Internet dan Web

By : Lisda Juliana P.

PERTEMUAN VPERTEMUAN V

ListList Tag <li> digunakan untuk menampilkan informasi dalam Tag <li> digunakan untuk menampilkan informasi dalam

bentuk daftar/list bentuk daftar/list baikbaik berurutan (ordered list) maupun yang tidak berurutan (ordered list) maupun yang tidak berurutan (unordered list).berurutan (unordered list).

Sintax =<li>…</li>Sintax =<li>…</li> Ada 3 jenis daftar/list yang dikenal di HTML, yaitu :Ada 3 jenis daftar/list yang dikenal di HTML, yaitu :

a.a. <ul>=unordered list= daftar dalam format bullet<ul>=unordered list= daftar dalam format bulletyaitu : yaitu : daftar tanpa no.urutdaftar tanpa no.urut

Sintax : <ul type=value>…</ul>Sintax : <ul type=value>…</ul>type=[disc|square|circle|] type=[disc|square|circle|] default disc default disc disc: bullet titikdisc: bullet titik

square: bullet kotaksquare: bullet kotakcircle : bullet lingkarancircle : bullet lingkaran

Contoh: ulist.htmContoh: ulist.htm

b. <ol> = daftar dalam format ordered list atau daftar dengan no.urut ( numbering ).

Sintax : <ol start= type=value>…</ol> start = begin number type=[1|a|A|i|I] default 1

1= numbera= LowercaseA= Upercasei=Lower romanI= Upper Roman

Contoh : olist.htm

Definition List • Definition List terdiri diapit oleh tag <DL> … </DL>

dan <DT> tag menentukan definition term serta <DD> tag menentukan definition itu sendiri.

• Sintax : <DL>…</DL>» <DT>…</DT>» <DD>…</DD>

• Contoh : deflist.htm

• Latihan list.htm

Membuat Link• Elemen link berfungsi sebagai penghubung antara suatu halaman dengan halaman yang

lain, atau ke URL lain, bahkan dalam satu halaman berpindah ke sub judul yang lain. Format tag link adalah sbb :

<a href = URL_tujuan atribut>hypertext</a>• URL_tujuan bernilai lokasi dan nama file yang akan dituju

untuk menuju ke email : Mailto : nama emailuntuk menuju ke web tertentu tulis URLnyauntuk menuju ke file tertentu tulis nama file dan posisinya

• Hypertext nilainya akan ditampilkan dibrowser sbg text link atau tombol penghubung.

• Atribut: color link=warna link vlink(visit link)= warna link yang telah

dikunjungi. alink(active link)=warna link yang sedang aktif hlink(harol link)=warna link ketika mouse diatasnya

target : _blank =untuk membuat jendela baru

Contoh: link.htm

Link ke Section tertentu dalam Document• Untuk membuat link ke section tertentu

dalam satu document gunakan property name untuk membuat nama tujuan dari link. Syntax name anchor:

• <A NAME =”nama”>Topic name</A>• untuk membuat link ke name :• <A HREF=”#nama”>menuju ke Topic

name</A>Contoh: nama.htm

Link Ke bagian tertentu Document Lain

Untuk membuat link ke bagian tertentu document lain anda bisa gunakan anchor name di document yang menjadi tujuan hperlink.

Contoh : linkdokumen.htm

Menempelkan Image• Kita dapat menempelkan gambar dalam html dengan format file

JPG atau GIF. Untuk menampilkannya digunakan tag IMG :<IMG SRC=namafilegambar/posisi file atribut>

• atribut elemen gambar :– SRC = lokasi dan nama gambar– Alt = teks (teks alternatif) untuk ie, Title =untuk mozila– Width = lebar gambar dalam pixel– Height = tinggi gambar dalm pixel– Vspace=jarak vertikal dengan gambar yang lain– Hspace = jarak horizontal dengan gamabr yang lain– Align =[top|middle|bottom|left|right] perataan gambar– Border = pixel (tebal garis tepi gambar)Contoh : image.htm

Image Map• Anda bisa gunakan image yang ada pada

website anda untuk membuat image map. Image map yaitu suatu area pada image yang bisa kita beri hyperlink area ini biasanya disebut “hot spots”.

• Coordinat dari hotspot ditentukan menggunakan bidang geometry seperti rectangle, polygon dan lainya.

Shape dari image map :

Coordinat dari object relatif terhadap pojok kiri atas image.

Contoh : map.html