7. Memasukkan Gambar ke Halaman Web
Sebelum Anda memasukkan gambar ke dalam halaman web, terdapat beberapa hal yang perlu Anda perhatikan.
- Format gambar yang umum digunakan untuk web adalah
GIF dan JPEGJPG. Kedua format ini melakukan kompresi gambar sehingga ukuran file relatif kecil.
- Usahakan ukuran file gambar tidak lebih dari 100kb.
Sebaiknya hanya sekitar 50kb. -
Tidak semua pengguna memiliki monitor layar besar 21 inci, maka dari itu usahakan ukuran gambar tidak lebih
dari 480x300 pixel. Gambar sebesar ini akan memenuhi layar monitor ukuran 14 inci sehingga pengguna akan
sedikit terganggu.
Kali ini Anda akan mempelajari cara memasukkan gambar yang disisipkan di antara teks. Tag HTML untuk memasukkan
gambar ini adalah sebagai berikut.
img src=”nama ile beserta ekstensinya”
Harus Anda ingat, bahwa ile yang dituju harus berada dalam folder yang sama dengan dokumen HTML Anda. Untuk
itu, buatlah file gambar Anda yang berekstensi JPG atau GIF. Kemudian, cobalah sisipkan gambar pada web Anda.
Perhatikan contoh berikut.
brtali persaudaraan antara teman-temanku dittSMA 48 Bandungtt.
brJika kamu siswa SMA 48 atau memang ingin bibersahabatib denganku,
brsilahkan melihat-lihat homepage pribadiku ini.img src=”friends.jpg.”
p
Save perubahan ini dan lihat perubahan pada browser Anda. Jika tag yang Anda masukkan sesuai, hasil yang Anda
dapatkan akan seperti berikut ini.
109
Pembuatan Homepage
110
Perhatikan hasilnya. Terlihat bahwa penempatan tag
img src=”friends.jpg.”
pada teks akan menyimpan gambar yang sejajar dengan teks. Anda dapat membuatnya berada di
bawah dengan menyisipkan tag p sebelum dan sesudah tag gambar tersebut. Hasilnya akan seperti ini.
Anda juga dapat mengatur kesejajaran antara teks dan gambar. Mengunakan atribut Align yang disisipkan pada tag
1img, Anda dapat mengatur kesejajaran ini. 1
img align=top src=”nama ile beserta ekstensi gambar”
, menghasilkan teks sejajar di atas gambar. 2
img align=middle src=”nama ile beserta ekstensi gambar”
, menghasilkan teks sejajar gambar.
Hasil penyisipan gambar
Gambar 4.5
Akibat penyisipan tag p sebelum dan sesudah tag
img src=”friends. jpg.”
Gambar 4.6
Praktis Belajar Teknologi Informasi dan Komunikasi untuk Kelas XI
3
img align=bottom src=”nama ile beserta ekstensi gambar”
, merupakan nilai default tag img..., menghasilkan teks sejajar di bawah gambar.
Contoh
Bagaimana cara mengatur dimensi gambar yang di- sisipkan?
Pembahasan: Anda dapat mengatur panjang dan lebar gambar yang
disisipkan. Biasanya, web browser membaca nilai ini dari gambar itu sendiri. Namun jika diperlukan, Anda dapat
mengatur dimensi gambar dengan memasukkan nilai width dan height pada tag
img...
. Caranya sebagai berikut.
img src=”nama ile beserta ekstensi gambar” width=X height=Y ,
menjadi
img src=”nama ile beserta ekstensi gambar” width=400 height=300
Nilai lebarwidth X dan tinggiheight Y gambar dalam satuan pixel.
Latihan 4.1
Cobalah gunakan atribut width dan height pada tag
img...
gambar Anda. Apa yang Anda dapatkan?
8. Membuat Hyperlink pada HTML
Kemampuan utama web adalah kemampuan untuk membuat link hypertext ke informasi lain. Informasi lain
tersebut dapat berupa halaman web lain, gambar, suara, ilm digital, animasi, software program, dan lain-lain. World Wide
Web atau WWW menggunakan skema penunjukan alamat yang dikenal dengan URL Uniform Resource Locator untuk
menunjukkan lokasi suatu informasi. Hypertext link atau hyperlink ini dikenal sebagai anchor dan pada teks biasanya
digarisbawahi berwarna biru.
Salah satu link anchor paling mudah adalah link yang membuka ile HTML lain yang berada dalam satu folder dengan
halaman web yang sedang dibuka. Tag HTML untuk melakukan ini adalah sebagai berikut.
a href=”nama ile HTML”teksa
111
Pembuatan Homepage
Kategori