dasar html (11): Membuat Frame, List & Image Mapping

MEMBUAT ORDERED LIST
Order/Unorder List digunakan untuk memberikan penomoran/daftar pada paragraft.
tag yang digunakan adalah

<ol> : untuk mendefinisikan daftar dengan menggunakan nomer berurutan
<ul> : untuk mendefinisikan daftar tanpa nomer berurutan
<li> : untuk membuat daftar itemnya
semua tag tersebut adalah berpasangan (paired)

contoh penggunaan:

<ol start="3">
<li>Baris ini bernomer 3</li>
<li>Baris ini bernomer 4</li>
</ol>

pada contoh diatas, jika tidak didefinisikan maka nomer awalnya adalah 1

<ul imgsrc="panah.gif">
<li>Contoh Item satu</li>
<li>Contoh Item dua</li>
</ul>

Pada contoh diatas, bullet yang muncul berasal dari gambar panah.gif, yang berada pada folder yang sama dengan web html tersebut

<ul type="circle">
<li>Ini Bulletnya berbentuk bulat</li>
</ul>
<ul type="circle">
<li>Ini Bulletnya berbentuk kotak</li>
</ul>

MEMBUAT FRAME
Frame adalah salah satu cara untuk menampilkan halaman web yang terdiri dari beberapa halaman web html
Pada sebuah laman web, misal index.html terdapat kode baris sebagai berikut:

<frameset cols="25%",*,25%>
<frame name="kiri" src="menu.html">
<frame name="tengah" src="konten.html">
<frame name="kanan" src="menukanan.html">
</frameset>

pada contoh script itu, halaman index.html akan berbentuk
Dengan bagian 1 adalah memuat file menu.html, bagian tengah konten.html, dan bagian kanan memuat menukanan.hmtl

NB: Pada desain web, penggunaan frameset sangat TIDAK DISARANKAN, karena akan membuat website menjadi seolah amburadul dan load terhadap website tersebut lelet.
MEMBUAT FRAME INTERNAL
Seperti pada frame, iframe/frame internal juga digunakan untuk memuat halaman web lain pada suatu halaman website, namun bedanya, iframe berada full didalam web html, dan tidak membagi layar menjadi beberapa bagian seperti pada frameset
letak iframe terkunci, seperti ketika saat kita meletakan gambar menggunakan tag img.
contoh:
<iframe src=”halaman_lain.html” width=”200″ height=”300″></iframe>

MEMBUAT IMAGE MAP LINK
Image map adalah sebuah hyperlink dengan menggunakan metode hotspot, dimana link ini adalah linx berjenis khusus yaitu dengan ara grafis yang sudah ditentukan sebelumnya
contoh: gunakan gambar ukuran 150×100 pixel

<map name="map1">
<area href="hace.web.id" shape="rect" coords="123,0,150,22">
<area href="cadsquad.blogspot.com" shape="circle" coords="70,40,30">
<area href="hantuceria.wordpress.com" shape="polygon" coords="7,7,15,10,7,60,12,52">
</map>
<img src="image.jpg" width="150px" height="100x">

MEMBUAT LINK MENGGUNAKAN BOOKMARK

Hyperlink menggunakan bookmark adalah suatu cara yang digunakan untuk melihat dokumen dalam sebuah halaman web ke bagian yang langsung dituju.
Misal ada dokumen yang panjang pada sebuah halaman web dan terbagi menjadi beberapa bagian sub title
Jika ingin langsung menuju ke subtitle yang ada dibawah (nggak kelihatan dilayar) maka kita bisa membuat bookmark sehingga bisa langsung diakses dari bagian atas halaman, nggak perlu scrolling

<a href="#judulsatu">Link ke paragraf judulsatu</a>
<p name="judulsatu">
texs yang sangat panjang dan dibawah
</p>

Leave a Reply

Your email address will not be published. Required fields are marked *