Ask Belajar HTML untuk pemula, menambahkan foto atau images kedalam struktur HTML AdityaDees

Ada banyak alasan mengapa Anda mungkin ingin menambahkan gambar ke halaman web: Anda mungkin ingin menyertakan logo, foto, ilustrasi, diagram, atau bagan.

Ada beberapa hal yang perlu dipertimbangkan ketika memilih dan menyiapkan gambar untuk situs Anda, tetapi meluangkan waktu untuk mendapatkannya tepat akan membuatnya terlihat lebih menarik dan profesional. Dalam bab ini Anda akan belajar bagaimana:

Sertakan gambar di halaman web Anda menggunakan HTML
Pilih format gambar yang akan digunakan
Tampilkan gambar dengan ukuran yang tepat
Optimalkan gambar untuk digunakan di web untuk membuat halaman memuat lebih cepat

Anda juga dapat menggunakan CSS untuk menyertakan gambar di halaman Anda menggunakan properti background-image, yang akan Anda temui ketika nanti belajar CSS.

Untuk menambahkan gambar ke halaman anda perlu menggunakan elemen. Ini kosong elemen (yang berarti ada tidak ada tag penutup). Itu harus membawa atribut berikut:

1. <src> Ini memberi tahu browser di mana itu dapat menemukan file gambar. Ini biasanya akan menjadi URL relatif menunjuk ke gambar di situs sendiri.

2. <alt> Ini memberikan deskripsi teks dari gambar yang menjelaskan gambar jika Anda tidak dapat melihatnya.

3. <title> Anda juga dapat menggunakan judul atribut dengan elemen untuk memberikan informasi tambahan tentang gambar. Sebagian besar browser akan menampilkan konten ini atribut dalam tootip ketika pengguna melayang di atas gambar.

Teks yang digunakan dalam atribut alt sering disebut sebagai teks alternatif. Itu harus memberikan deskripsi yang akurat untuk konten gambar sehingga dapat dipahami oleh perangkat lunak pembaca layar.

Jika gambar hanya untuk membuat halaman terlihat lebih menarik (dan itu tidak memiliki arti, seperti garis pemisah grafik), maka atribut alt harus tetap digunakan tapi kutipan harus ditinggalkan kosong.


				
								
<img src="images/wq.jpg" alt="deskripsi" title="Belajar HTML untuk membuat situs web sendiri." />

Hasil:

Menambahkan tinggi dan lebar gambar

Anda juga akan sering melihat <img>elemen menggunakan dua atribut lainnya yang menentukan ukurannya:

height Ini menentukan ketinggian gambar dalam piksel.
Width Ini menentukan lebar gambar dalam piksel.

Gambar sering membutuhkan waktu lebih lama untuk memuat dari kode HTML itu membuat sisa halaman. Oleh karena itu, adalah ide yang baik untuk tentukan ukuran gambar sehingga browser dapat merender sisa teks di halaman sambil meninggalkan jumlah yang tepat ruang untuk gambar yang diam Memuat. Ukuran gambar semakin ditentukan menggunakan CSS bukan dari HTML .


				

<img src="images/wq.jpg" alt="Belajar HTML" width="600" height="450" />

Hasil:

Contoh penempatan gambar

Di mana gambar ditempatkan dalam kode akan mempengaruhi bagaimana itu ditampilkan. Berikut adalah tiga contoh penempatan gambar yang menghasilkan hasil yang berbeda:

Sebelum paragraf Paragraf dimulai dengan garis yang baru setelah gambar.
Di awal kalimat Baris pertama teks sejajar dengan bagian bawah gambar.
Ditengah kalimat Gambar ditempatkan di antara paragraf dari kata-kata itu muncul di paragraf .


				
<img src="gambar/wq.png" alt="Belajar HTML" width="100"
height="100" />
 <p>Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.
 				</p>
 <hr/>
 
 <p><img src="gambar/wq.png" alt="Belajar HTML" width="100"
 height="100" />Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.</p>
 <hr />
 <p>Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan..<img
 src="gambar/wq.png" alt="Belajar HTML" width="100"
 height="100" />Belajar HTML mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.</p>

Hasil :

Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.

Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan..Belajar HTML mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.

Kode Lama: Menyelaraskan Gambar Horizontal

Atribut align adalah biasanya digunakan untuk menunjukkan bagaimana bagian lain dari halaman harus mengalir di sekitar gambar. Ini telah dihapus dari HTML5 dan situs web baru harus menggunakan CSS untuk mengontrol perataan gambar seperti yang akan Anda lihat di halaman berikutnya nanti.

Saya telah membahasnya di sini karena kemungkinan besar Anda akan menemukan itu jika Anda melihat kode yang lebih lama, dan karena beberapa editor visual masih masukkan atribut ini ketika Anda menunjukkan bagaimana gambar seharusnya selaras. Atribut align dapat mengambil nilai horizontal ini:

Left Ini menyelaraskan gambar ke kiri (memungkinkan teks mengalir di sekitarnya sisi kanan).
Right Ini menyelaraskan gambar ke kanan (memungkinkan teks mengalir di sekitarnya sisi kiri).


				
<img src="images/wq.jpg" alt="Belajar HTML" width="50%"
height="50%" align="right" />
 <p>Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.</p>
 <hr/>
 
 <p><img src="images/wq.jpg" alt="Belajar HTML" width="50%"
 height="50%" align="left" />Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.</p>

Hssil :

Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.

Gambar dan Keterangan Gambar

Gambar sering datang dengan keterangan. HTML5 telah diperkenalkan elemen <figure> baru untuk berisi gambar dan keterangannya sehingga keduanya berhubungan. Anda dapat memiliki lebih dari satu gambar di dalam <figure>elemen selama mereka semua berbagi caption yang sama.

Elemen <figcaption> telah ditambahkan ke HTML5 secara berurutan untuk mengizinkan penulis halaman web menambahkan keterangan untuk sebuah gambar. Sebelum elemen-elemen ini dibuat tidak ada cara untuk kaitkan elemen <img> dengan caption-nya.


				
<figure>
<img src="images/wq.jpg" alt="Belajar HTML">
<br />
 <figcaption>
Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.
 				
 </figcaption>
</figure>

Hasil :

Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan .Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.

Selanjutnya