1 Pertemuan‐3
Beberapa jenis Listp j (Daftar)( )
Ordered list/numbered list (daftar berurut/daftar dengan nomor atau abjad)
Unordered list/bulleted list (daftar tidak berurut/menggunakan bullet)
Menu list (daftar menu)
Menu list (daftar menu)
Directory list
2
Suatu daftar dimana item‐item yangy g ada di
dalam daftar tersebut memiliki nomor secara
berurut.
Tag : <ol>
<li> Item ke 1 </li> <li> Item ke‐1 </li> <li> Item ke‐2 </li> <li> Item ke‐n </li> </ol>
3
<ol>
<li> Apel </li> <li> Mangga </li> <li> Pisang </li> <li> Jeruk </li>
/ l </ol>
4 <ol type=“A”>yp
<li> Apel </li> <li> Mangga </li> <li> Pisang </li> <li> Jeruk </li> </ol>
<ol type=“a”> <ol type a >
<li> Apel </li> <li> Mangga </li> <li> Pisang </li> <li> Jeruk </li> </ol>
5 <ol type=“I”>
<ol type I > <li> Apel </li> <li> Mangga </li> <li> Pisang </li> <li> Jeruk </li> </ol>
<ol type=“i”> <ol type i >
<li> Apel </li> <li> Mangga </li> <li> Pisang </li> <li> Jeruk </li> </ol>
6
Suatu daftar dimana urutan tidak
diutamakan, jadi item‐item dalam daftar bisa
muncul dalam sembarang urutan.
Tag : <ul>
<li> Item ke 1 </li> <li> Item ke‐1 </li> <li> Item ke‐2 </li> <li> Item ke‐n </li> </ul>
7 <ul type "disc">
<ul type= disc > <li>Apel</li> <li>Mangga</li> <li>Pisang</li> <li>Jeruk</li> <li>Jeruk</li> </ul>
8 <ul type “circle">
<ul type= circle > <li>Apel</li> <li>Mangga</li> <li>Pisang</li> <li>Jeruk</li> <li>Jeruk</li> </ul>
<ul type “square"> <ul type= square >
<li>Apel</li> <li>Mangga</li> <li>Pisang</li> <li>Jeruk</li> <li>Jeruk</li> </ul>
9 <html>
<body> <ol> <ol>
<li> Kopi </li> <ul type="disc">
<li>Arabika</li> <li>Capucino</li> </ul>
<li> Teh </li>
<ul type="circle"> <li>Hijau</li> li i li <li>Hitam</li> </ul> </ol> </body> </html>
10
11
<html> <body>
h C t h Li t D fi i i /h <h4>Contoh List Definisi:</h4> <dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language, merupakan bahasa markup yang digunakan untuk membuat halaman‐halaman web.</dd>
<dt>Internet Explorer</dt>
<dd>Web browser yang merupakan bawaan dari <dd>Web browser yang merupakan bawaan dari sistem operasi Windows, digunakan untuk menampilkan halaman‐halaman web.</dd> </dl>
</body> </html>
Buatlah Tampilan Webp di bawah ini :
12 <html>
b d <body>
<h4>Contoh Ordered List:</h4> <ol>
<li>Fakultas Teknik dan Ilmu Komputer</li> <li>Fakultas Ekonomi</li>
<li>Fakultas Desain</li> <li>Fakultas Hukum</li> <li>Fakultas Hukum</li> <li>Fakultas Sosial Politik</li> </ol>
</body> </html>
13
<html> <body>
<h4>Atribut Pada Unordered List</h4>
<ul > <li>Bandung</li> <li>Jakarta</li> li S b /li <li>Surabaya</li> </ul> </body> </html>
1 - BLOCKQUOTE - PREFORMATTED TEXT S C - SPECIAL CHARACTER BLOCKQUOTE
| Blockquote untuk membuat Kutipan teks. | Tag : | Tag : <BLOCKQUOTE> ….. ….. </BLOCKQUOTE>
2
CONTOH
<html> <body>
h3 T k l i U i l S i l B (USB) /h3 <h3>Teknologi Universal Serial Bus (USB)</h3> <blockquote>
Pada awal tahun 1977 tepatnya komputer dengan prosesor Pentium, beberapa komputer sudah mempunyai piranti baru untuk memudahkan pengguna komputer dalam menangani masalah kabel yang banyak. <br>
Teknologi baru tersebut dinamalan Universal Serial Bus atau yang lebih dikenal dengan USB. Memang masih bayak yang tidak mengetahui apa dan fungsi teknologi ini Oleh sebab itu bab ini akan memperkenalkan dan fungsi teknologi ini. Oleh sebab itu bab ini akan memperkenalkan apa yang dimaksud dengan USB dan kegunaannya.
</blockquote>
<h5>Disadur dari Buku " Pengantar Sistem Komputer" Hal:134 <h5> </body>
</html>
3
PREFORMATTED TEXT
| Membuat Teks yang dibuat di Editor Ultra Edit sama dengan yang terlihat di Browsernya. sama dengan yang terlihat di Browsernya. | Tag nya :
<PRE> ……. </PRE>
CONTOH
<html <body>
<h3>Contoh Penggunaan Tag PRE</h3> <pre>
Halo nama saya : Rani Halo nama saya : Rani
()“ "() ( @_@ ) (0) (0) <b>Selamat Datang</b>g Di UNIKOM Tercinta </pre> </body> </html>
4
HASILNYA
5
KARAKTER SPESIAL
| Karakter yang penggunaannya di dalam HTML membutuhkan kode-kode tertentu.
membutuhkan kode kode tertentu.
| Tanda < dan > adalah salah satu contoh karakter spesial yang membutuhkan kode tertentu.
| Kode khusus untuk menampilkan karakter disebut Entity
y Karakter Entity
N ik E tit ( k k )
y Numerik Entity (menggunakan angka)
| Penulisan Entity :
y Diawali tanda & (Ampersand)
y Diakhiri tanda ; (Titik koma)
CONTOHKARAKTER SPESIAL
Nama Entitas Nomor Entitas Hasil Keterangan
© © © Copyright ® ® ® Registered
Trademark ™; ™ Trademark ¡ Non-breaking
space & & & Ampersand « « << Left-pointing
double angle » » >> Right-pointing
double angleg " " “ Tanda Kutip < < < Lebih kecil > = > Lebih Besar × × × Tanda kali ÷ ÷ ÷ Tanda Bagi
6
LATIHAN
| Buatlah Tampilan Web di bawah ini. | Format Web agar tampilannya sama | Format Web agar tampilannya sama. | Simpan dengan Nama Latihan2.html
1