Lebih jauh, pengunaan tag ini dapat Anda kombinasikan dengan tag paragraf baru ataupun tag heading. Satu hal perlu
diperhatikan adalah pada kombinasi urutan tag. Tag pembuka yang diketikkan pertama akan memiliki tag penutup yang
disimpan pada urutan terakhir. Perhatikan contoh penulisan tag
berikut.
h2iPertamai dan ittTerakhir itth2
Penulisan tag tersebut akan menghasilkan teks, seperti berikut.
Pertama dan
Terakhir
6. Membuat List
Anda juga dapat membuat list tidak berurutan atau yang dikenal dengan bullet list. List ini ditandai dengan tanda titik,
namun ini bergantung web browser Anda. Untuk membuatnya gunakan tag
ul....ul
. Perhatikan contoh berikut.
h2List tidak berurutanh2 ul
liObjek 1 liObjek 2
liObjek 3 ul
Perubahan yang terjadi pada browser
Gambar 4.3
107
Pembuatan Homepage
Di unduh dari : Bukupaket.com
108
Perhatikan tag
ul
menandakan awal dan akhir list yang dibuat. Adapun tag
li
menandakan list item atau daftar objek
. Untuk membuat list berurutan, dengan penomoran,
Anda dapat menggunakan tag
ol....ol
. Perhatikan contoh berikut.
h2List berurutanh2 ol
liObjek 1 liObjek 2
liObjek 3 ol
Jika Anda inginkan, Anda dapat membuat daftar objek dengan kombinasi keduanya. Perhatikan contoh berikut.
bList Kombinasib ul
liObjek 1 liObjek 2
ul li Objek 2.1
ul li Objek 2.1.1
li Objek 2.1.2 ul
li Objek 2.2 li Objek 2.3
ul liObjek 3
ul
Berikut hasil yang akan Anda dapatkan.
Tips Trik
Jika Anda melihat sebuah halaman web
yang menarik dan ingin tahu bagaimana cara
membuatnya. Anda dapat mengetahui bahasa
HTML yang digunakan pada
halaman web tersebut. Bahkan Anda dapat
melakukan perubahan- perubahan dan melihat
perubahan yang Anda lakukan secara offline.
Untuk melakukannya, save halaman web ke komputer
Anda. Kemudian klik kanan pada ikon dokumen
HTML
tersebut dan klik Open withNotepad.
Hasil daftar yang didapatkan
Gambar 4.4
Praktis Belajar Teknologi Informasi dan Komunikasi untuk Kelas XI
Di unduh dari : Bukupaket.com
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,
b r s i l a h k a n m e l i h a t - l i h a t h o m e p a g e 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
Di unduh dari : Bukupaket.com
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
Di unduh dari : Bukupaket.com
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
