BELAJAR HTML 7 : Cara Membuat Daftar/List

Cara Membuat Daftar/List di HTML

html

Dalam HTML, tag list terdiri dari 2 jenis, ordered list (perurutan) dan unordered list (tidak berurutan). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak.



Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>. Penjelasan ini akan lebih mudah jika menggunakan contoh.

Berikut adalah contoh kode HTML untuk membuat ordered list menggunakan tag<ol>:


 <!DOCTYPE html>  
 <html>  
 <head>  
  <title>penggunaan tag list </title>  
 </head>  
 <body>  
  <h1>daftar belanjaan</h1>  
  <ol>  
  <li>minyak goreng</li>  
   <li>sabun mandi</li>  
   <li>deterjen</li>  
   <li>shampoo</li>  
   <li>obat nyamuk</li>  
  </ol>  
 </body>  
 </html>
Save dengan nama list.html, lalu buka dengan browser :
mozila
Untuk membuat unordered list, tinggal ganti tag <ol> menjadi <ul>.

Berikut adalah contoh kode HTML untuk membuat unordered list menggunakan tag<ul>:

 <!DOCTYPE html>  
 <html>  
 <head>  
  <title>penggunaan tag list </title>  
 </head>  
 <body>  
  <h1>daftar belanjaan</h1>  
  <ul>  
   <li>minyak goreng</li>  
   <li>sabun mandi</li>  
   <li>deterjen</li>  
   <li>shampoo</li>  
   <li>obat nyamuk</li>  
  </ul>  
 </body>  
 </html>
Save dengan nama list2.html, lalu bukan dengan browser :
mozila
Penggunaan tag list pada HTML tidak hanya untuk membuat daftar saja. Dengan CSS, tag list dapat digunakan untuk membuat menu navigasi di dalam halaman web, seperti menu home, contact us, dll. Tag list juga dapat digunakan untuk nested list, atau list bersarang, yang artinya sebuah list yang berada di dalam list lainnya.

ide
Di dalam HTML, selain ordered list dan unordered list, terdapat 1 lagi jenis list, yaitu description list. Pembahasan tentang description list akan kita bahas dalam tutorial HTML Lanjutan: Cara Membuat Description List dalam HTML (tag dl, dt dan dd).

Dalam tutorial belajar HTML dasar selanjutnya, kita akan membahas salah satu tag terpenting dari HTML, yakni tag <a> untuk membuat link di HTML .

Sumber : duniailkom.com

Komentar

Posting Komentar

Postingan populer dari blog ini

BELAJAR PHP 5 : Cara Menjalankan File PHP dengan XAMPP

Gambar
Mengenal Folder htdoc Agar dapat mengakses halaman PHP dari web browser , maka anda harus menempatkan file PHP di dalam folder khusus yang merupakan folder home dari web server. Pada aplikasi XAMPP , folder tersebut adalah folder htdocs yang berada di dalam folder instalasi XAMPP . Jika anda mengubah tempat instalasi XAMPP menjadi D:\xampp ( jika mengikuti tutorial sebelumnya), maka folder tersebut seharusnya berada di D:\xampp\htdocs . Anda bisa meletakkan file PHP langsung di dalam folder ini, atau agar memudahkan pencarian file , buatlah sebuah folder baru di dalam folder htdocs ini. Untuk tutorial belajar PHP , saya akan membuat folder "belajar". Folder belajar inilah yang aka kita jadikan sebagai tempat file PHP nantinya. Cara menulis File PHP File PHP pada dasarnya merupakan file text biasa yang bisa di buat menggunakan aplikasi notepad bawaan windows, namun untuk fitur yang lebih, anda dapat menggunakan aplikasi editor text seperti Notepat++ , yang dapat di dow
Baca selengkapnya

BELAJAR PHP 10 : CARA PENULISAN KOMENTAR DALAM KODE PHP

Gambar
BELAJAR PHP 10 : CARA PENULISAN KOMENTAR DALAM KODE PHP Pada tutorial Belajar PHP kali ini kita akan membahas cara penulisan komentar di dalam kode PHP . PHP menyediakan beberapa cara untuk menambahkan komentar yang mirip dengan cara memberikan komentar di bahasa pemograman lain seperti C, C++ dan Unix Shell Komentar di perlukan untuk memberikan penjelasan kepada orang lain yang membaca kode kita. komentar sepenuhnya akan diabaikan oleh PHP pada saat eksekusi. Walaupun anda berfikir bahwa mungkin hanya anda yang akan membaca kode program tersebut, namun itu adalah ide yang bagus. saya sendiri sering bingung ketika memahami beberapa baris kode program setelah beberapa bulan tidak melihatnya. Komentar yang baik adalah komentar singkat dan tidak terlalu panjang, namun memberikan penjelasan tentang kegunaan kode atau variabel tersebut dibuat. Selain sebagai tempat membuat penjelasan, sifat komentar yang tidak akan dieksekusi oleh PHP , memberikan ke
Baca selengkapnya

BELAJAR PHP 8 : CARA MENGUBAH FILE KONFIGURASI PHP (php.ini)

Gambar
BELAJAR PHP 8 : CARA MENGUBAH FILE KONFIGURASI PHP (php.ini). Dalam tutorial belajar PHP kali ini kita akan mempelajari cara mengubah/mengedit file konfigurasi PHP melalui file php.ini. Hal ini terdengar sedikit rumit. Namun dengan mengetahui cara mengubah settingan PHP , akan membantu kita dalam menguasi PHP .  Mencari file php.ini dengan phpinfo() Sama seperti MySQL , seluruh setingan PHP berada dalam sebuah file konfigurasi yang bernama php.ini. Tergantung settingan awal, file php.ini bisa berada dalam folder sistem Windows , atau di dalam folder PHP itu sendiri. Untuk mengetahui lokasi file php.ini, jalankan XAMPP dan web server Apache , lalu dari halaman awal localhost, cari menu phpinfo() pada menu sebelah kiri. phpinfo() merupakan sebuah fungsi bawaan PHP yang digunakan untuk mengetahui settingan PHP itu sendiri. Anda juga bisa menampilkan phpinfo dengan membuat sebuah file PHP, dan menuliskan kode berikut : <?php echo phpinfo(); ?> Didalam t
Baca selengkapnya