Penerapan HTML (Part 6)

 I.Latar Belakang.

Latar belakang kali ini kita masih mengenal sintag tentang HTML apa saja yang di butuhkan untuk membuat web dasar

II.Alat dan Bahan.
    Laptop / PC
    W3SCHOOLS
    Sublime text


III.Tujuan.

 untuk mengetahui langkah dasar untuk membuat web yang sederhana.

IV.Penjelasan.

Gambar HTML.

Contoh :

Maka outputnya:

Selalu menentukan lebar dan tinggi dari suatu gambar. Jika lebar dan tinggi yang tidak ditentukan, halaman akan berkedip sementara beban gambar.

Gambar HTML Sintaks

Dalam HTML, gambar didefinisikan dengan tag <img>.
<Img> tag kosong, berisi atribut saja, dan tidak memiliki tag penutup.
Atribut src menentukan URL (alamat web) dari gambar.

<img src="url" alt="sebuah text">

 Alt Atribut.

Atribut alt menetapkan teks alternatif untuk gambar, jika gambar tidak dapat ditampilkan.

Atribut alt memberikan informasi alternatif untuk gambar jika pengguna untuk beberapa alasan tidak bisa melihatnya (karena koneksi yang lambat, kesalahan dalam atribut src, atau jika pengguna menggunakan pembaca layar).

Jika browser tidak dapat menemukan gambar, maka akan muncul alt teks.

Contoh :

Maka outputnya :

 atribut alt diperlukan. Sebuah halaman web tidak akan memvalidasi dengan benar tanpa itu.

Pembaca Layar HTML
Seorang pembaca layar adalah sebuah program perangkat lunak yang dapat membaca apa yang ditampilkan di layar.

pembaca layar yang berguna untuk orang-orang yang buta, tunanetra, atau belajar cacat.
pembaca catatan Layar dapat membaca atribut alt. 

Ukuran Gambar - Lebar dan Tinggi
Anda dapat menggunakan atribut style untuk menentukan lebar dan tinggi dari suatu gambar.

Nilai-nilai yang ditentukan dalam pixel (penggunaan px setelah nilai) 

Contoh :

Maka outputnya :

 Atau, kamu dapat menggunakan atribut lebar dan tinggi. Di sini, nilai-nilai yang ditentukan dalam pixel secara default

Contoh :

Maka outputnya :

Lebar dan Tinggi atau Style
Kedua lebar, tinggi, dan atribut gaya berlaku dalam standar HTML5 terbaru.
Kami menyarankan Anda menggunakan atribut style. Ini mencegah gaya lembar mengubah ukuran asli gambar

Contoh :

Maka outputnya:

Gambar di Folder lainJika tidak ditentukan, browser mengharapkan untuk menemukan gambar dalam folder yang sama sebagai halaman web.
Namun, itu adalah umum untuk menyimpan gambar dalam sub-folder. Anda kemudian harus menyertakan nama folder dalam atribut src

Contoh :

Maka outputnya :

Gambar di Server lainBeberapa situs web menyimpan gambar mereka di server gambar.
Sebenarnya, Anda dapat mengakses gambar dari alamat web di dunia

Contoh :

Maka outputnya :

Gambar animasi
Standar GIF memungkinkan gambar animasi

Contoh :

Maka outputnya :

Perhatikan bahwa sintaks memasukkan gambar animasi tidak berbeda dari gambar non-animasi.

Menggunakan Gambar sebagai sebuah Link
 Untuk menggunakan gambar sebagai link, hanya sarang <img> tag di dalam tag <a>

Contoh :

Maka outputnya :

jika kita klik pada gambar nya maka outputnya :

Tambahkan "border: 0;" untuk mencegah IE9 (dan sebelumnya) dari menampilkan perbatasan di sekitar gambar.

gambar Mengambang
Menggunakan properti CSS mengapung untuk membiarkan mengambang gambar.
gambar bisa mengapung ke kanan atau ke kiri dari teks

Contoh :

Maka outputnya :

gambar Maps
Gunakan <map> tag untuk mendefinisikan gambar-peta. Gambar-peta adalah gambar dengan area yang dapat diklik.
Atribut nama <map> tag dikaitkan dengan <img> atribut usemap dan menciptakan hubungan antara gambar dan peta.
<map> tag berisi sejumlah <area> tag, yang mendefinisikan daerah yang dapat diklik pada gambar-peta.

 Contoh :

Maka outputnya :

Rangkuman Bab

Gunakan HTML <img>                      elemen untuk menentukan gambar
Menggunakan atribut HTML src        untuk menentukan URL gambar
Menggunakan atribut HTML alt         untuk mendefinisikan teks alternatif untuk
                                                             gambar, jika tidak dapat ditampilkan
Gunakan lebar HTML dan tinggi        atribut untuk menentukan ukuran gambar
Gunakan CSS lebar dan tinggi            untuk menentukan ukuran gambar
                                                             (alternatif)

Menggunakan properti CSS                      mengapung untuk membiarkan
                                                                   mengambang gambar
Gunakan HTML <peta> elemen                untuk menentukan gambar-peta
Gunakan HTML <daerah> elemen           untuk menentukan daerah-daerah yang
                                                                   dapat diklik pada gambar-peta
Gunakan elemen HTML<img>usemap    atribut untuk menunjuk ke gambar-peta

Catatan: Memuat gambar membutuhkan waktu. Gambar besar dapat memperlambat halaman Anda. Gunakan gambar dengan hati-hati.

HTML Gambar Tags

tag                    Deskripsi

<Img>            Mendefinisikan gambar
<Peta>            Mendefinisikan sebuah image-map
<Daerah>        Mendefinisikan daerah yang dapat diklik di dalam gambar-peta

V.Kesimpulan.
 
dapat kita simpulkan bahwa trik trik dasar itu harus kita pelajari agar kita dapat membuat suatu web sederhana yang maximal.

VI.Refrensi.

    http://www.w3schools.com/html