KURSUS WEB JAKARTA

HTML Images

gunung bromo

<!DOCTYPE html>
<html>
<body>

<h2>Gunung Bromo-Jawa Timur</h2>
<img border="0" src="/images/bromo.jpg" alt="Gunung Bromo" width="250" height="179">

</body>
</html>
 

 

HTML Images - The <img> Tag and the Src Attribute

Dalam HTML, gambar didefinisikan dengan tag <img>.

Tag <img> kosong, yang berarti bahwa mengandung atribut saja, dan tidak memiliki tag penutup.

Untuk menampilkan gambar pada halaman, Anda perlu menggunakan atribut src. Src singkatan dari "source". Nilai atribut src adalah URL gambar yang ingin ditampilkan.

Sintaks untuk mendefinisikan gambar:

<img src="url" alt="some_text"> 

URL yang menunjuk ke lokasi di mana foto tersebut disimpan. Sebuah gambar yang bernama "gambar.gif", yang terletak di direktori "images" pada "www.kursuswebdesign.co.id" memiliki URL: http://www.kursuswebdesign.co.id/images/gambar.gif.

Browser menampilkan gambar di mana tag <img> terjadi dalam dokumen. Jika Anda menempatkan tag gambar antara dua paragraf, browser menunjukkan paragraf pertama, kemudian paragraf kedua.

HTML Images - The Alt Attribute

Atribut alt diperlukan menentukan sebuah teks alternatif untuk gambar, jika gambar tidak dapat ditampilkan.

Nilai atribut alt adalah teks penulis-didefinisikan:

 <img src="gambar.gif" alt="gambar besar">

 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).

HTML Images - Set Height and Width of an Image

Atribut tinggi dan lebar yang digunakan untuk menentukan tinggi dan lebar dari suatu gambar.

Nilai-nilai atribut yang ditetapkan dalam piksel secara default:

<img src="bromo.jpg" alt="Gunung Bromo" width="250" height="179">

 Tip: Ini adalah praktik yang baik untuk menentukan baik tinggi dan atribut lebar untuk gambar. Jika atribut diatur, ruang yang diperlukan untuk gambar dicadangkan saat halaman dimuat. Namun, tanpa atribut-atribut, browser tidak mengetahui ukuran gambar. Efeknya bahwa tata letak halaman akan berubah selama pemuatan (sedangkan beban gambar).

Basic Notes - Useful Tips

Catatan: Jika file HTML berisi sepuluh gambar - file sebelas diperlukan untuk menampilkan halaman yang tepat. Pemuatan gambar membutuhkan waktu, jadi saran terbaik saya adalah: Gunakan gambar dengan hati-hati.

Catatan: Ketika sebuah halaman web dimuat, itu adalah browser, pada saat itu, yang benar-benar mendapatkan gambar dari web server dan memasukkan ke halaman. Oleh karena itu, pastikan bahwa gambar benar-benar tinggal di tempat yang sama dalam hubungannya dengan halaman web, jika pengunjung Anda akan mendapatkan ikon link yang rusak. Ikon broken link ditampilkan jika browser tidak dapat menemukan gambar.

HTML Image Tags

Tag Description
<img> Mendefinisikan gambar
<map> Mendefinisikan alamat gambar
<area> Mendefinisikan daerah yang dapat diklik dalam sebuah alamat gambar

BELAJAR WEB DI ITKOMPUTER

Durasi 8 kali pertemuan untuk satu kali pertemuan 2 jam.
Pengenalan Photoshop untuk design web, design web dengan Photoshop, Integrasi Photoshop dengan DreamWeaver, Pengenalan DreamWeaver, perintah-perintah HTML, CSS, JQuery, Membuat animasi banner, Upload website dengan FTP dan cpanel, trik bagai mana mempromosikan website anda di internet, memilih web Hosting. Berbagai Tips dan Trik menarik tentang Web Design. Tujuan akhir setelah mengikuti kursus ini: Anda dapat membuat web yang menarik seperti company profile, web gallery photo, banner animasi, mempromosikan web di internet dan dapat melakukan upload ke server hosting.

Klik disini untuk mendaftar