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 filebeserta ekstensi gambar” width=X height=Y ,
menjadi
img src=”nama filebeserta 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 fileHTML”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 href=”nama file gambar beserta 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
