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
112
Pikirkan “a” sebagai anchor link dan “href ” sebagai
hypertext reference. Untuk menggunakan tag ini, ile yang dituju harus ile HTML. Pada “Teks hyperlink”, isikan teks yang akan
memiliki kemampuan link hypertext. Teks ini akan tampak digarisbawahi dan berwarna biru.
Lakukan langkah-langkah berikut untuk mencoba membuat hyperlink.
a. Buatlah halaman web baru pada folder
myweb sesuai
dengan penjelasan sebelumnya. b. Isikan tag HTML berikut.
html body
Halaman 2 body
html
c. Simpan file Notepad dengan nama
webku2.html.
Kemudian, hubungkan halaman
index.html dan webku2. html dengan memasukkan tag berikut setelah tag
img....
pa href=”webku2.html”Halaman 2a
d. Selanjutnya Save perubahan yang dibuat dan lihat hasilnya pada browser Anda. Pada bagian bawah gambar
akan terlihat tulisan “ Halaman 2
” dan jika pointer Anda berada diatas tulisan tersebut akan berubah menjadi
telunjuk. Klik kiri tulisan tersebut, maka Anda akan berpindah ke halaman
webku2.html. Begitulah cara
hyperlink menghubungkan halaman web.
Tips Trik
Anda dapat mengetahui panjang dan lebar gambar
dalam satuan pixel dengan menggunakan aplikasi
pengolah gambar. Cara paling mudah, Anda
cukup melakukan drag drop ikon gambar dari
Explorer ke web browser Anda. Pada titlebar akan
terpampang dimensi gambar tersebut.
Terlihat link teks menuju halaman 2 yang telah
dibuat berwarna biru dan digarisbawahi
Gambar 4.7
Praktis Belajar Teknologi Informasi dan Komunikasi untuk Kelas XI
Anda juga dapat Anda menggunakan tag anchor untuk memperlihatkan sebuah gambar. Jika link tersebut
diklik, gambar akan terlihat pada browser Anda. Untuk menggunakannya sama halnya dengan membuat link untuk
dokumen HTML lain.
a h r e f = ” n a m a f i l e g a m b a r b e s e r t a ekstensinya”teks hyperlinka
Tentunya ile gambar tersebut harus berada dalam folder yang sama dengan ile HTML yang Anda buat. Bagaimana jika
ile dokumen HTML atau gambar tersebut berada di folder yang berbeda dengan dokumen HTML yang sedang Anda
kerjakan?
Mungkin Anda ingin membuat sebuah folder khusus gambar karena ketika pengerjaan semakin kompleks, Anda
tentu ingin gambar-gambar berada dalam satu tempat agar pengerjaan lebih rapi. Untuk dapat melakukan, buatlah sebuah
folder baru pada folder
Myweb, beri nama folder tersebut
dengan gambar.
a. Simpan ile gambar, seperti friends.jpg Anda dalam folder
tersebut. b. Buka kembali dokumen HTML
index.html menggunakan
notepad. c. Edit tag img src=”friends.jpg.” menjadi
seperti berikut. img src=”gambarfriends.jpg”
d. Anda akan melihat bahwa gambar yang Anda simpan tidak berubah. Ini menandakan bahwa tag yang Anda
buat sudah benar. Coba Anda hapus “gambar” pada tag img... yang Anda buat. Apa yang terjadi?
Link yang Anda buat sebelumnya disebut juga dengan relative link. Artinya, web browser dapat membangun URL
lengkap berdasarkan lokasi dokumen HTML berada dan informasi tag yang dibuat pada dokumen URL. Hal ini sangat
berguna, karena meskipun Anda mengerjakan web dalam satu komputer, membukanya, kemudian membawa folder beserta
file dokumen HTML ke komputer lain dan membukanya kembali, semua link relatif akan tetap ada. Anda akan tetap
memiliki halaman web yang utuh beserta semua linknya.
Jika hyperlink diklik akan muncul halaman 2 seperti
ini.
Gambar 4.8
Tips Trik
Beberapa sistem komputer sensitif terhadap besar
kecil huruf ekstensi gambar. Contohnya, ile “friends.jpg”
berbeda dengan “friends. JPG”. Oleh karena itu,
disarankan untuk konsisten menggunakan huruf kecil
untuk semua kode
HTML yang Anda buat.
Info TIK
Dengan HTML, Anda
dapat memerintahkan web browser Anda untuk
membuka ile semua dokumen atau gambar
yang disimpan pada tingkat direktori lebih rendah.
Seperti pada subdirektori atau folder yang berada
pada folder dokumen HTML yang Anda kerjakan
dengan menggunakan karakter “”. karakter ini
menandakan perpindahan subdirektori yang dituju.
Hal ini juga berlaku bagi hyperlink
ke halaman web lain.
113
Pembuatan Homepage
