Hyperlinks, Images,

dan Lists
Week III

Static Web Programming

Semester 1
Hyperlinks
Hyperlink (atau link) adalah sebuah
kata, kumpulan kata, atau gambar yang
dapat diklik untuk menuju ke sebuah
dokumen baru atau bagian dalam
dokumen tersebut.
Kursor akan berbentuk sebuah tangan jika
digerakkan di atas sebuah link.
Links dalam HTML menggunakan tag
<a>
Hyperlinks
Tag <a> dapat digunakan dalam 2 cara:
◦ Untuk membuat link dengan dokumen baru,
menggunakan atribut href
◦ Untuk membuat penanda (bookmark) di
dalam dokumen, menggunakan atribut
name
Sintaks Link HTML
Kode HTML untuk membuat link:
<a href=“url”>Teks Link</a>
Atribut href untuk menentukan link yang
dituju.
Contoh:
<a href=“http://www.google.com/”>
Buka Google</a>
Sehingga akan ditampilkan seperti berikut:
Buka Google
Sintaks Link HTML
url dalam atribut href juga bisa
merujuk pada dokumen HTML
lainnya.
Contoh:
<a href=“dokumen.html”>
Teks Link</a>
Dalam elemen anchor, Teks Link tidak
harus berupa teks namun bisa gambar
atau elemen HTML lainnya.

<a href=“url”><img src=“Tulips.jpg”/></a>

Link HTML – Atribut Target
Atribut target digunakan untuk menentukan
letak dokumen yang di-link-kan untuk
dibuka
Contoh berikut menunjukkan bahwa
dokumen yang di-link-kan akan dibuka
di window baru atau tab baru
Contoh:
<a href=“http://www.google.com/”
target=“_blank”>Buka
Google</a>
Link HTML – Atribut Title
Atribut title digunakan untuk memberikan
teks penjelasan yang lebih detil mengenai
sebuah link.
Title muncul sebagai tooltip.
Contoh:
<a href=“http://www.google.com/”
title=“Ini adalah link
google”>
Buka Google</a>
Link HTML – Atribut Name
Atribut name menentukan nama sebuah
anchor
Atribut ini digunakan untuk membuat
penanda dalam sebuah dokumen
HTML
Dalam HTML5 € lebih menggunakan
id daripada name
Contoh:
<a name=“tips”>Tips</a>
Buat link menuju bagian Tips di
dalam dokumen yang sama
<a href=“#tips”>Buka
Tips</a>
Link HTML – Atribut Rel
 Atribut rel (relationship) menunjukkan
keterkaitan dengan dokumen/halaman yang
sama atau dokumen/halaman lain yang dituju.
 Atribut ini bersifat invisible dan digunakan
sebagai informasi tentang link bagi search
engine.
 Yang dikenal adalah rel=“nofollow”, perintah
bagi search engine untuk mengabaikan suatu
link pada suatu halaman web/blog € terutama
untuk menghindari spam.
 Contoh:
<a href=“url”
rel=“nofollow>URL</a>
IMAGES
Image HTML
Images sangat menentukan bagi
seorang desainer web, sehingga
penting untuk mengetahui bagaimana
menggunakannya secara tepat.
Tag <img/> untuk meletakkan
sebuah gambar dalam web page.
Tag <img> dan Atribut src
Tag <img> merupakan empty element,
yang berarti bahwa tag ini hanya
memiliki atribut dan bisa tidak memakai
tag penutup.
Untuk menampilkan gambar,
gunakan atribut src (source).
Contoh:
<img
src=“Tulips.jpg”/>
Tag <img> dan Atribut alt
Atribut alt digunakan untuk
memberikan informasi tambahan
tentang gambar,.
Teks ini akan muncul jika kursor diatas
gambar atau jika gambar tidak dapat
ditampilkan (misalkan akibat koneksi
yang lemah).
Contoh:
<img src=“Tulips.jpg”
alt=“Bunga
Mengatur Tinggi dan Lebar Image
Atribut height € digunakan untuk
mengatur tinggi gambar
Atribut width € digunakan untuk
mengatur lebar gambar
Nilai atribut ini secara default
ditentukan dengan satuan pixel
Contoh:
<img src=“Tulips.jpg” alt=“Bunga
Tulips” height=“200” width=“300”/>
LISTS
Lists HTML
Secara
umum, List HTML ada 2
macam:
◦ Ordered List
◦ Unordered List
Ada 3 macam tipe list, yaitu:
◦ Ordered list, tag <ol> - numbers
◦ Unordered list, tag <ul> - bullets
◦ Definition list, tag <dl> - dictionary
Lists HTML

Ordered List: Unordered List:

1. Item pertama Item
2. Item kedua Item
3. Item ketiga Item
Ordered Lists
Ordered list diawali dengan tag <ol> dan
diakhiri dengan tag </ol>.
Tiap item, diawali dengan tag <li>
dan ditutup dengan tag </li>.
Atribut type dalam elemen ol digunakan
untuk menentukan tipe numbering
(contoh tipe numbering: 1, A, a, I, i) €
tipe default = 1.
Ordered Lists
Contoh:
<ol type=“A”>
<li>Makanan</li>
<li>Minuman</li>
</ol>

Tampilan dalam web browser:

A. Makanan
B. Minuman
Unordered Lists
Unordered list diawali dengan tag
<ul> dan diakhiri dengan tag </ul>.
Tiap item, diawali dengan tag <li>
dan ditutup dengan tag </li>.
Atribut type dalam elemen ul digunakan
untuk menentukan tipe bulleting (contoh
tipe bulleting: circle, square, disc) €
tipe default = disc.
Unordered Lists
Contoh:
<ul type=“square”>
<li>Makanan</li>
<li>Minuman</li>
</ul>

Tampilan dalam web browser:

■ Makanan
■ Minuman
Definition Lists

 Definition list adalah sebuah list dari item,

dengan deskripsi tiap item.
 List ini menggunakan tag <dl>.
 Tag <dl> untuk mendefinisikan bentuk list, tag
<dt> untuk mendefinisikan item, dan tag <dd>
untuk mendeskripsikan item dalam list.
 Definition List : <dl>
 Data term : <dt>
 Data description : <dd>
 Definition Lists
 Contoh:
 Tampilan di browser:

<dl>
Makanan
<dt>Makanan</dt>
Berat Ringan
<dd>Berat</dd>
Minuman
<dd>Ringan</dd> Kaleng Soda
<dt>Minuman</dt>
<dd>Kaleng</dd>
<dd>Soda</dd>
</dl>
LATIHAN
Make this following list :
 FORMAT :
 Send your script as NIM_LIST.html
 Due date : Next Week at 11.59pm