Bukankah lebih bagus jika Anda bisa memiliki gambar dari aktor dan musik legenda David Hasselhoff tepat di tengah halaman Anda?
Yang terdengar seperti sedikit tantangan ...
Mungkin, tapi sebenarnya itu cukup mudah dilakukan. Yang Anda butuhkan adalah sebuah elemen:
Contoh 1:
<img src="david.jpg" alt="David" />
akan terlihat seperti ini di browser:
Yang perlu Anda lakukan adalah pertama memberitahu browser bahwa Anda ingin memasukkan gambar (
img ) dan kemudian di mana ia berada (
src , singkatan dari "sumber"). Apakah Anda mendapatkan gambar?
Perhatikan bagaimana
img elemen dibuka dan ditutup menggunakan tag yang sama. Seperti
<br /> tag, tidak terikat pada sepotong teks.
"David.jpg" adalah nama dari file gambar yang ingin Anda masukkan dalam halaman Anda. ". Jpg" adalah jenis file gambar.
Sama seperti ekstensi ". Htm" menunjukkan bahwa file adalah sebuah
dokumen HTML, "jpg". Memberitahu browser bahwa file adalah gambar. Ada tiga jenis tipe file gambar Anda dapat memasukkan ke dalam halaman Anda:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
Gambar GIF biasanya terbaik untuk grafis dan gambar, sementara gambar JPEG biasanya lebih baik untuk foto.
Hal ini karena dua alasan: pertama, gambar GIF hanya terdiri dari 256
warna, sedangkan gambar JPEG terdiri dari jutaan warna dan kedua, format
GIF adalah lebih baik mengompresi gambar sederhana, dibandingkan dengan
format JPEG yang dioptimalkan untuk gambar yang lebih kompleks. Semakin baik kompresi, semakin kecil ukuran file gambar, semakin cepat halaman Anda akan beban. Seperti Anda mungkin tahu dari pengalaman Anda sendiri, tidak perlu 'berat' halaman dapat sangat mengganggu bagi pengguna.
Secara tradisional, GIF dan format JPEG telah menjadi dua jenis gambar
dominan, tetapi akhir-akhir ini, format PNG telah menjadi lebih dan
lebih populer (terutama dengan mengorbankan format GIF).
Format PNG berisi dengan berbagai cara yang terbaik dari kedua JPEG dan GIF format: jutaan warna dan efektif mengompresi.
Di mana saya mendapatkan gambar-gambar saya dari?
Untuk membuat gambar Anda sendiri, Anda memerlukan program editing gambar.
Sebuah program editing gambar adalah salah satu alat paling penting yang Anda butuhkan untuk membuat website yang indah.
Sayangnya, tidak ada program editing gambar yang baik datang dengan Windows atau sistem operasi lain.
Dengan demikian, Anda dapat mempertimbangkan untuk berinvestasi baik
dalam Paint Shop Pro, PhotoShop atau Macromedia Fireworks, yang
merupakan tiga dari program editing gambar terbaik saat ini di pasar.
Namun, seperti yang kita katakan sebelumnya, tidak akan perlu membeli program mahal untuk menyelesaikan tutorial ini. Untuk sekarang, Anda dapat men-download gambar yang sangat baik program editing
IrfanView yang disebut freeware dan karena itu tidak ada biaya.
Atau Anda hanya dapat meminjam gambar dari situs lain dengan men-download. Tapi harap berhati-hati untuk tidak melanggar hak cipta saat men-download gambar. Namun, ini berguna untuk mengetahui cara men-download gambar, jadi inilah cara melakukannya:
- Klik kanan pada gambar pada setiap gambar di Internet.
- Pilih "Simpan gambar sebagai ..." di menu yang muncul.
- Pilih lokasi untuk foto tersebut pada komputer Anda dan tekan "Simpan".
Lakukan ini dengan gambar di bawah ini dan simpan di komputer Anda pada lokasi yang sama dengan dokumen HTML Anda. (Perhatikan bahwa logo tersebut disimpan sebagai file PNG: logo.png):
Sekarang Anda dapat menyisipkan gambar ke dalam salah satu halaman Anda sendiri. Cobalah sendiri.
Apakah itu semua saya perlu tahu tentang gambar?
Ada beberapa hal lagi yang harus Anda ketahui tentang gambar.
Pertama, Anda dapat dengan mudah menyisipkan gambar terletak di folder
lain, atau bahkan gambar yang terletak pada situs-situs lain:
Contoh 2:
<img src="images/logo.png" />
<img src="images/logo.png" />
Contoh 3:
<img src="http://www.html.net/logo.png" />
<img src="http://www.html.net/logo.png" />
Kedua, gambar dapat link:
Contoh 4:
<a href="http://www.html.net"> <img src="logo.png" /></a>
<a href="http://www.html.net"> <img src="logo.png" /></a>
akan terlihat seperti ini di browser (coba klik pada gambar):
Apakah ada atribut lain saya harus tahu tentang?
Anda selalu perlu untuk menggunakan atribut
src , yang memberitahu browser mana gambar tersebut berada. Selain itu, ada sejumlah atribut lainnya yang dapat berguna ketika memasukkan gambar.
Para
alt
atribut digunakan untuk memberikan deskripsi alternatif dari suatu
gambar jika, untuk beberapa alasan, gambar tidak ditampilkan untuk
pengguna. Hal ini sangat penting untuk pengguna dengan gangguan penglihatan, atau jika halaman dibuka sangat lambat. Oleh karena itu, selalu gunakan
alt atribut:
Contoh 5:
<img src="logo.gif" alt="HTML.net logo" />
<img src="logo.gif" alt="HTML.net logo" />
Beberapa browser membiarkan teks atribut alt muncul sebagai kotak
pop-up kecil ketika pengguna menempatkan kursor di atas gambar mereka. Perlu diketahui bahwa bila menggunakan
alt atribut, tujuannya adalah untuk memberikan gambaran alternatif dari gambar. Para
alt
atribut tidak boleh digunakan khusus untuk membuat pesan pop-up bagi
pengguna sejak saat itu pengguna tunanetra akan mendengar pesan tanpa
mengetahui apa gambar adalah.
Para
title atribut dapat digunakan untuk menambahkan informasi pada gambar:
Contoh 6:
<img src="logo.gif" title="Learn HTML from HTML.net" />
<img src="logo.gif" title="Learn HTML from HTML.net" />
Akan terlihat seperti ini di browser:
Jika Anda, tanpa mengklik, tempatkan kursor di atas gambar, Anda akan
melihat teks "Belajar HTML dari HTML.net" muncul sebagai kotak pop-up.
Dua atribut penting lainnya adalah
width dan
height :
Contoh 7:
<img src="logo.png" width="141px" height="32px" />
<img src="logo.png" width="141px" height="32px" />
akan terlihat seperti ini di browser:
Para
width dan
height atribut dapat digunakan untuk mengatur tinggi dan lebar gambar. Nilai yang digunakan untuk mengatur lebar dan tinggi adalah piksel. Pixel adalah satuan pengukuran yang digunakan untuk mengukur resolusi layar. (Resolusi layar yang paling umum adalah 1024x768 piksel). Tidak seperti cm, pixel adalah unit relatif dari pengukuran yang tergantung pada resolusi layar.
Untuk pengguna dengan resolusi layar tinggi, 25 piksel mungkin sesuai
dengan 1 sentimeter, sedangkan pixel 25 sama di resolusi layar yang
rendah mungkin sesuai dengan 1,5 cm pada layar.
Jika Anda tidak menetapkan lebar dan tinggi, gambar akan dimasukkan dalam ukuran sebenarnya. Tetapi dengan lebar dan tinggi Anda dapat memanipulasi ukuran:
Contoh 8:
<img src="logo.gif" width="32px" height="32px" />
<img src="logo.gif" width="32px" height="32px" />
akan terlihat seperti ini di browser:
Namun, perlu diingat bahwa ukuran sebenarnya dalam kilobyte dari file
gambar akan tetap sama sehingga akan memakan waktu yang sama untuk
memuat gambar seperti yang terjadi sebelumnya, meskipun tampak kecil di
layar. Oleh karena itu,
Anda tidak harus mengurangi ukuran gambar dengan menggunakan atribut lebar dan tingginya.
Sebaliknya, Anda harus selalu mengubah ukuran gambar Anda dalam program
editing gambar untuk membuat halaman Anda lebih ringan dan lebih cepat.
Yang mengatakan, itu masih ide yang baik untuk menggunakan atribut
lebar dan tinggi karena browser maka akan dapat mendeteksi berapa banyak
ruang gambar harus dalam tata letak halaman terakhir sebelum foto
tersebut sepenuhnya download. Hal ini memungkinkan browser Anda untuk mengatur halaman baik dalam cara yang lebih cepat.
Cukup tentang David Hasselhoff dan gambar untuk saat ini.
Cari dokumen HTML dan gambar pada komputer Anda (di "Situs Lokal") dan
mentransfernya ke server (situs "Remote") dengan mengklik ganda pada
mereka. Sekarang seluruh dunia dapat melihat mereka! (Sebagai contoh, pada http://htmlnet.site50.net/page1.htm alamat). 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna Aliquam erat
volutpat.
Ut WISI Enim iklan minimnya veniam, Quis nostrud exerci tasi
ullamcorper suscipit lobortis nisl ut aliquip mantan ea commodo
consequat ... 
