Tahap 9: Blogs ~ SERSAN

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.

These icons link to social bookmarking sites where readers can share and discover new web pages.