Anda di halaman 1dari 12

Pemrograman Web / Internet

Pertemuan II
Materi
Pengenalan Atribut
List Tag
Link Tag
Latihan
Mengenal Atribut
Atribut adalah sifat, bentuk, informasi unik yang disertakan ke dalam sebuah
elemen html untuk melengkapi fungsi, format hingga cara kerja dari elemen html
tersebut.
Lokasi dari atribut berada di dalam elemen html.
Beberapa atribut hanya dapat digunakan pada elemen tertentu dengan nilai
tertentu juga. Misalnya : atribut align hanya dapat digunakan pada blocking
element dan inline element dengan nilai atribut default left namun dapat diubah
menjadi right, center dan justify.
Contoh :
<elemen attr="value_attr"
attr2="value_attr2"></elemen>
<elemen attr="value_attr" />
Beberapa Contoh Atribut Pada Tag
Tag Atribut Fungsi
p, h1...h6, blockquote,
etc
align
Untuk mengubah pola
tulisan ke rata kanan,
kiri, tengah dan rata
kanan-kiri.
Nilai Atribut
{"left", "right",
"center", "justify"}
title, id, class, style {specified}
Dapat di
implementasikan
hampir di semua tag
dengan nilai yang
tergantung dari
kondisi.
All tag {core attribute}
dir {"rtl", "ltr"}
Membuat arah tulisan
dari kanan ke kiri,
atau kiri ke kanan.
Hasil dari penggunaan
atribut sama dengan
rata kanan dan kiri.
Lists
List pada HTML sering kita kenal sebagai
penomoran dan pembentukan poin poin
teks. (Bulletes and Numbering)
Untuk penomoran gunakan tag ordered list
yaitu <ol></ol>
Sedangkan untuk membuat poin poin teks
gunakan unordered list yaitu <ul></ul>
Untuk membuat sebuah elemen
penomoran atau poin ke dalam ordered
maupun unordered list gunakan list
dengan tag <li></li>.
Contoh Tag Ordered List
Kode



Tampilan
<p>Contoh penggunaan <i>ordered list</i> :</p>
<ol>
<li>Langkah Pertama</li>
<li>Langkah Kedua</li>
<li>Langkah Ketiga</li>
<li>dst...</li>
<ol>
Contoh Tag Unordered List
Kode



Tampilan
<p>Contoh penggunaan <i>unordered list</i> :</p>
<ul>
<li>Langkah Pertama</li>
<li>Langkah Kedua</li>
<li>Langkah Ketiga</li>
<li>dst...</li>
<ul>

Ordered List extra attribute
Atribut yang digunakan adalah atribut type yang dapat disematkan ke
dalam tag <ol>, seperti : <ol type="a"></ol> maka yang akan
ditampilkan adalah penomoran dengan small letters. Selain itu,
disediakan pula atribut start untuk mereset penomoran poin pertama
berdasarkan nilai atribut yang dimasukkan ke atribut start.
Link
Link adalah inti dari sebuah pemrograman web
karena kehandalannya dalam menghubungkan
sebuah dokumen web dengan dokumen lainnya.
Untuk membuat link pada sebuah halaman web,
gunakan tag dengan elemen a (anchor)
<a></a>.
Untuk dapat menghubungkan satu dokumen ke
dokumen lainnya, anchor tag perlu melakukan
pengalamatan file yang dituju dengan cara
memasukkan alamat file yang ingin di akses ke
dalam atribut href pada anchor tag.
<a href="lokasi_file">ini alamat menuju ke lokasi_file</a>
Mengakses halaman web lain pada direktori
lokal
File 1, file1.html



File 2, file2.html
<html>
<head><title>Halaman 2</title></head>
<body>
<p>Halaman 2</p>
<p><a href="file1.html">Kembali ke Halaman 1</a></p>
</body>
</html>
<html>
<head><title>Halaman 2</title></head>
<body>
<p>Halaman 1</p>
<p><a href="file2.html">Ke Halaman 2</a></p>
</body>
</html>
Dalam hal ini, file1.html dan file2.html berada pada direktori (folder) yang sama
Peran Anchor Tag Lainnya
Salah satu fungsi dari anchor tag adalah mengarahkan ke sub
bagian tertentu di dalam dokumen web dengan memanfaatkan
atribut id.
<html>
<head><title>Anchor Tag</title></head>
<body>
<h3>Contoh Implementasi Tag &lt;a&gt;&lt;/a&gt;</h3>
<p id="para1">Paragraf 1</p>
<p id="para2">Paragraf 2</p>
<p id="para3">Paragraf 3</p>
<p id="para4">Paragraf 4</p>
<hr />
<p>
<a href="#para1">P1</a>
<a href="#para2">P2</a>
<a href="#para3">P3</a>
<a href="#para4">P4</a>
</p>
</body>
</html>
Sampai Jumpa Minggu Depan

Anda mungkin juga menyukai