Lompat ke konten Lompat ke sidebar Lompat ke footer

[ Materi #8 ] Bermain dengan Tag List di Pemprograman HTML

List atau dalam bahasa indonesianya adalah daftar, merupakan perintah didalam pemprograman html untuk membuat daftar atau pengelompokan



Pembuka Pembahasan Tag List


Sobat, ingin membuat List semacam ini..?

  1. Aku Belajar
  2. Aku Belajar HTML
  3. Aku Belajar HTML dari Dasar
  4. Aku Belajar dengan Rajin
  5. Semoga Aku Bisa Menguasai Materi


yang saya cetak miring diatas adalah contoh List Penomoran / Numbering

  • Aku ingin jadi Tentara
  • Aku Ingin Jadi Pelari
  • Aku Ingin Menjadi Pengusaha
  • Aku Ingin Pandai dalam Agama
  • Aku Ingin Sukses


Sedangkan contoh yang tidak saya cetak tebal itu adalah contoh List Bullet, bukan berupa penomoran.
Seperti apa sih cara membuatnya? langsung aja simak materi yang kita bagikan di Genbisoft.Com ini.


Pembagian Tag Pengelompokan HTML


 Terdapat 2 jenis pengelompokan di pemprograman html, yaitu Ordered List ( Numbering ) dan Unordered List ( Bullet ). hampir sama tuh dengan yang ada di word.




Belajar Ordered List di Kode HTML


Mari kita bahas Ordered List ( Numbering ), Numbering ini jelas digunakan untuk membuat daftar, dimana setiap bagiannya memiliki nomor secara berurutan. Pengkodean dalam htmlnya yaitu tag <ol>, untuk menyatakan tiap bagiannya, digunakan tag <li>.
atribut elemen list ini yaitu :
Type = [ 1 | a | A | i | I ] ( default 1 )

nah, berikut contoh penulisannya :



<html>
<head>
<title>Belajar Ordered List</title>
</head>
<body>
<h2> Belajar Ordered List dengan genbisoft </h2>
<ol type= "1">
<li>HTML</li>
<li>PHP</li>
<li>CSS</li>
<li>My SQL</li>

</ol>
</body>
</html>



Coba sobat lihat untuk Ordered List atau penomoran itu menggunakan tag ol , seperti yang saya cetak tebal pada contoh diatas.

Nah gimana sobat Genbisoft? apakah sudah sedikit memahami tentang Ordered List?

Coba kita lihat lagi ilustrasi diatas, dimana di dalam tag ol, ada kode yang saya cetak miring untuk memudahkan pemahaman.
Jadi disitu kita memisahkan baris atau urutan nomor dengan menggunakan Tag li




Belajar Unordered List di Kode HTML




nah, selanjutnya... setelah kita tadi belajar tentang Ordered List atau Daftar Pengelompokan menggunakan Nomor, sekarang kita akan belajar nih tentang Unordered List ( Bullet ), ingat ini beda dengan OL diatas, dalam unordered list ini tidak dijumpai urutan nomor dalam suatu daftar. Setiap bagian unordered list ditandai dengan tanda bullet atau berupa shape tertentu, misalnya hanya bulatan saja. Unordeed list didalam pemprograman html dikodekan dengan tag <ul>, sama dengan tag ol diatas, setiap bagian unordered list tesebut digunakan tag <li>.
attributnya antara lain :

Type= [ disc | square | circle ]

contoh penulisannya sebagai berikut :

<html>
<head>
<title>Belajar UnOrdered List</title>
</head>
<body>
<h2> Belajar UnOrdered List dengan genbisoft </h2>
<ul type= "circle">
<li>HTML</li>
<li>PHP</li>
<li>CSS</li>
<li>My SQL</li>

</ul>
</body>
</html>

Coba deh sobat lihat, Unordered List itu dilambangkan sebagak tag dengan kode ul , seperti yang saya telah kasih Bold atau cetak tebal pada contoh diata, jadi perlu di ingat, didalam kode HTML itu, setiap ada permulaan, harus ada akhiran.

seperti tag <ul> diatas yang diakhiri dengan tag penutup </ul> , sedangkan pada tag <li> diatas yang saya garis miring... itu merupakan pengelompokannya, dimana setiap tag pembuka <li> akan diakhiri dengan tag penutup </li> seperti itu yang menandakan ganti baris.





Penutup Bahasan :


Ini merupakan pembahasan singkat pengenalan tag html untuk pemula, tetapi mungkin bisa sebagai pengingat juga bagi yang sudah mahir jika kebetulan ada yang lupa.. 



Setiap Tag Html itu ada Pembuka dan Penutupnya





Sekian, semoga bermanfaat ya buat sobat pembelajar Genbisoft.. jika ada kemauan.. kita bisa kok.. InsyaAllah..


















Posting Komentar untuk "[ Materi #8 ] Bermain dengan Tag List di Pemprograman HTML"


Recent Posts Label