Format List Dalam HTML (Pertemuan 4)

Assalamu'alaikum Wr. Wb

Hello Guys,, Bertemu lagi dengan saya Salman Fauzan di postingan ini. Kali ini kita akan melanjutkan pembahasan kita mengenai HTML kemarin. Sekarang kita akan membahas mengenai Tag HTML untuk membuat List. Tag ini sangat berguna untuk membuat List Daftar Menu Makanan dan lain sebagainya. Langsung saja kita mulai pembahasan kali ini.

1. Tag UnOrdered List
Pada Tag UnOrdered List (ul), kita dapat membuat List yang tidak akan diurutkan penempatan List Menunya, jadi Tag <ul> ini berfungsi untuk membuat List Menu yang tidak akan diurutkan, kemudian ditutup dengan Tag </ul>. Masing-masing Item yang akan dimasukan kedalam List ul ini harus dibuat menggunakan tag <li> kemudian ditutup dengan </li>. Contoh :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia Vertebrata </title>
 </head> 
 <body bgcolor = "Powderblue">
   <p align = "Right">
<font face = "Impact" color = "Darkorange" >
  <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
 </font>
   </p>
<body>
 <h1>
Vertebrata</h1>
<ul>
<li>Ikan
 <ul>
<li>Patin</li>
<li>Gurami</li>
<li>Mujair</li>
</ul>
</li>
<li>Amfibi
  <ul>
<li>Ordo Anura
  <ul>
<li>Katak Hijau</li>
<li>Katak Darat</li>
<li>Katak Ungu</li>
</ul>
</li>
<li>Ordo Urodela
  <ul type = "circle">
<li>Salamander
<li>
<li>Mudpuppy</li>
</ul>
</li>
</ul>
</li>
<li>Reptil
 <ul>
<li>Buaya</li>
<li>Ular Kobra</li>
<li>Penyu</li>
</ul>
</li>
</ul>
</body>
</html>

Nah hasilnya akan menjadi seperti ini :

Adapun Attribute yang digunakan pada Tag <ul> untuk mengganti Icon / Tanda dari setiap List.

Disk (Bulatan Hitam) Code = <ul type = "Disk" >
Circle (Bulatan Putih) Code = <ul type = "Circle" >
Square (Kotak) Code = <ul type = "Square" >

2. Ordered List
Pada Tag Ordered List (ol), kita dapat membuat List yang akan diurutkan nantinya, Tag <ol> berfungsi untuk memulai List Menu yang nantinya akan diurutkan, kemudian ditutup dengan Tag </ol> untuk mengakhiri List tersebut. Masing-masing item yang akan berada dalam tag <ol> harus dibuat menggunakan Tag <li> kemudian ditutup dengan Tag </li> Contoh :

<html>
  <head>
   <title> Salman Fauzan Fahri Aulia Latihan 10 Macam-Macam List </title>
  </head> 
  <body bgcolor = "Powderblue">
   <p align = "Right">
<font face = "Impact" color = "Darkorange" >
   <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
  </font>
   </p>
<body>
 <h1>
Contoh Ordered List Mulai Nomor 17</h1>
<ol start = "17">
<li>Multimedia</li>
<li>Teknik Komputer Jaringan</li>
<li>Rekayasa Perangkat Lunak</li>
</ol>
<h2>
Contoh Ordered List Mulai Abjad 17</h2>
<ol type = "A" Start "17">
<li>Ungu</li>
<li>Merah</li>
<li>Hijau</li>
</ol>
<h3>
Contoh Ordered List 'a'</h3>
<ol type = "a">
<li>Violet</li>
<li>Red</li>
<li>Green</li>
</ol>
<h4>
Contoh Ordered List 'I' Romawi </h4>
<ol type = "I">
<li>Kelas X</li>
<li>Kelas XI</li>
<li>Kelas XII</li>
</ol>
<h4>
COntoh Ordered List "i" Romawi</h4>
<ol type "i">
<li>Satu</li>
<li>Dua</li>
<li>Tiga</li>
</ol>
</body>

 </html>

Dan hasilnya akan menjadi seperti ini :

Adapun Attribute yang digunakan pada Tag <ol> untuk mengganti Icon / Tanda dari setiap List.

A (Penomoran menggunakan Character A ) Code = <ol type = "A" >
a (Penomoran menggunakan Character a ) Code = <ol type = "a" >
1 (Penomoran menggunakan Angka ) Code = <ol type = "1" >

Apabila menggunakan Attribute diatas, penomoran / penandaan setiap list akan dimulai dari type yang kalian gunakan tersebut.

3. Kombinasi Tag ul dan ol
Tentu saja Tag <ul> dan <ol> dapat disatukan, kombinasi Tag <ul> dan <ol> ini kadang digunakan untuk beberapa alasan dalam pembuatan List Menu. Contoh :

<html>
  <head>
   <title> Salman Fauzan Fahri Aulia Masih Latihan List Kombinasi </title>
  </head> 
  <body bgcolor = "Powderblue">
   <p align = "Right">
<font face = "Impact" color = "Darkorange" >
   <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
  </font>
   </p>
<body>

 <h1>
Kombinasi OL dan UL</h1>
<ol type ="1">
<li> Daftar Makanan Tradisional : </li>
<ul type = "circle">
<li>Tahu Gejrot</li>
</ul>
<ul type = "disc">
<li>Peuyeum</li>
</ul>
<ul type = "square">
<li>Karedok</li>
</ul>
</ol>
</body>
</html>

Hasilnya akan menjadi seperti ini :

Jadi kita dapat membuat List percabangan seperti ini, tentu saja kalian dapat menggunakan Tag <ul> dan <ol> sesuai selera kalian dalam membuat List Menu yang kalian inginkan.

4.Definition List
Apabila kalian ingin membuat suatu List yang akan menjelaskan pengertian / penjelasan mengenai List tersebut. Ketika kita akan membuat pasangan Tag <dl> kita juga harus mengggunakan pasangan Tag <dt> untuk membuat judul dari list tersebut, kemudian menggunakan pasangan Tag <dd> untuk membuat paragraf yang berisi mengenai penjelasan dari List tersebut. Contoh :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia Latihan Paragraf </title>
 </head> 
  <body bgcolor = "Powderblue">
   <p align = "Right">
<font face = "Impact" color = "Darkorange" >
   <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
  </font>
   </p>
<body>
 <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 sistem operasi Windows, digunakan untuk 
   menampilkan halaman-halaman web.</dd>
 </dl>
</body>
</html>

Hasilnya akan menjadi seperti ini :

Tidak jauh berbeda dengan penggunaan Tag <ul> dan <ol> bukan. Tag ini digunakan ketika kita membuat suatu list yang nantinya akan diberi penjelasan mengenai list tersebut.

5.Biodata

Penerapan Tag <ul> dan <ol> pun dapat dibuat menjadi sebuah biodata, tentu saja menggunakan Tag yang sebelumnya telah kita pelajari. Nah ini dia contoh penggunaan kombinasi dari Tag-Tag yang telah kita bahas sebelumnya, saya akan menggunakan Biodata saya untuk contoh ini.

Ini adalah contoh penggunaan kombinasi beberapa Tag yang telah kita bahas, tentu saja kalian dapat membuatnya yang lebih bagus dari ini dengan berkreasi sendiri menggunakan Tag-Tag yang telah dipelajari sebelumnya. Untuk Codingannya bisa kalian lihat dibawah ini :

<html>
  <head>
   <title> Salman Fauzan Fahri Aulia My Biodata </title>
  </head>
 <body Background = "1.png" width = "100%" height = "100%" >
   <center>
    <font face = "Lucida Handwriting" color = "IndianRed">
     <h1>
My Biodata</h1>
</font>
      <font face = "Comic Sans MS" color = "DarkRed">
       <h4>
 Nama saya adalah Salman Fauzan Fahri Aulia. Saya lahir di Bandung, 4 Maret 2002. Saya bersekolah
       di SMKN 4 Bandung yang berada di Jl. Kliningan No. 6 Turangga, Lengkong. Kota Bandung, Jawa Barat 40264.
       Jurusan saya adalah Rekayasa Perangkat Lunak atau RPL. Saya tinggal di Komp. Permata Kopo Blok C-67, Sayati,
       Margahayu, Jawa Barat 40228.
       </h4>
<img src = "lul.jpg" width = "200" height = "270" >
   </center>
<font face = "Comic Sans MS" color = "Crimson">
      <b>
       <ul type = "disc">
<li>Nama : Salman Fauzan Fahri Aulia</li>
</ul>
<ul type = "disc">
<li>TTL : Bandung, 4 Maret 2002</li>
</ul>
<ul type = "disc">
<li>Kelas : XI - RPL 3</li>
</ul>
<ul type = "disc">
<li>Jurusan : Rekaya Perangkat Lunak (RPL)</li>
</ul>
<ul type = "disc">
<li>Cita-Cita : Gaming Development / Pro Gamers </li>
</ul>
<ul type = "disc">
<li>Hobi/Minat : Progamming / Gaming </li>
</ul>
</b>
 </body>
<html>

Cukup sampai disini dulu ya guys pembahasan kita kali ini, semoga bermanfaat bagi untuk kalian, mohon maaf bila ada kesalahan kata dalam penjelasan maupun pengetikan. See you next guys

Wassalamu'alaikum Wr. Wb.

Cyber Information Cafe

Cari Blog Ini

Format List Dalam HTML (Pertemuan 4)

Komentar

Posting Komentar