ZenTutorials

Blog ini memuat artikel yang membahas tentang dunia teknologi informasi seperti Bahasa pemrograman, aplikasi dan internet.

populer android APPS

  1. apps
  2. apps
  3. apps
  4. apps

Populer android Games

  1. games
  2. games
  3. games
  4. games
  5. games

Sabtu, 26 Januari 2019

List di HTML

List (Daftar) yang di maksud adalah menampilkan data atau informasi secara terstruktur.

List di html di bagi menjadi tiga yakni ordered list (Daftar berurutan), unordered list (Daftar tak berurutan) dan Description List (List dengan deskripsi) dan ke tiga jenis list ini sudah di sediakan elementnya sesuai fungsinya masing-masing.

Membuat list (Ordered list) di HTML

List jenis ini sistem kerjanya menampilkan daftar informasi secara berurutan dengan menggunakan penomoran (1,2,3...) atau abjad (a,b,c...) dll.

Element untuk membuat list jenis ini (Ordered list) yakni dengan tag <ol> sebagai pembungkus list dan tag <li> sebagai daftar item.

Contoh membuat list jenis Ordered list sebagai berikut:

Contoh membuat Ordered list di HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>MySql</li>
</ol>

</body>
</html>


Preview

  1. HTML
  2. CSS
  3. JavaScript
  4. PHP
  5. MySql

Contoh di atas, informasi berupa teks di tampilkan secara berurutan dan setiap item informasi terdapat pengurutan berupa angka.

Dengan tag <ol>, kita juga bisa merubah mode pengrurutannya yang secara default HTML mengurutkan berasarkan angka yang terkecil sambai terbesar pada setiap item, kita dapat mengubahnya dengan sebuah abjad dengan menggunakan sebuah atribut khusus yakni atribut Style="...".

Contoh pengurutan daftar ordered list berdasarkan abjad sebagai berikut:

Contoh tag <ol> denagan atribut type di HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<ol type="a" >
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>MySql</li>
</ol>

<ol type="A" >
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>MySql</li>
</ol>

</body>
</html>


Preview

  1. HTML
  2. CSS
  3. JavaScript
  4. PHP
  5. MySql
  1. HTML
  2. CSS
  3. JavaScript
  4. PHP
  5. MySql

Selain mengurutkan berdasarkan angkan dan abjad, kita juga bisa mengurutkan list (Ordered list) dengan angka romawi.

Contoh:

Contoh Ordered list dengan atribut type di tag <ol> HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<ol type="i" >
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>MySql</li>
</ol>

<ol type="I" >
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>MySql</li>
</ol>

</body>
</html>


Preview

  1. HTML
  2. CSS
  3. JavaScript
  4. PHP
  5. MySql
  1. HTML
  2. CSS
  3. JavaScript
  4. PHP
  5. MySql

Membuat list (Unordered List) di HTML

Unordered list (Daftar tak berurutan) adalah list yang tidak di sertai indikasi pengrurutan berdasarkan angka atau abjad.

Unordered list indikasi itemnya berupa karakter seperti titik bulat dan lain-lain. element yang di gunakan untuk membuat list (Unordered list) adalah element HTML dengan tag <ul> dan item list dengan tag <li>. Contoh Unordered list sebagai berikut:

Contoh Unordered list di HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<ul>
<li>HTML</li>
<li>CSS</li>
<li>php</li>
<li>MYsql</li>
<li>JAVA</li>
</ul>

</body>
</html>


Preview

  • HTML
  • CSS
  • php
  • MYsql
  • JAVA

Kita juga bisa mengubah karakter yang mengindikasikan item list dengan karakter lain dengan atribut type="...", contohnya seperti di bawah ini:

Contoh mengganti karakter indikasi list di tag <ul>

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<p>Atrubut type="square" (karakter kotak)</p>

<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>php</li>
<li>MYsql</li>
<li>JAVA</li>
</ul>

<p>Atribut type="none" (menghilangkan karakter penanda list)</p>

<ul type="none">
<li>HTML</li>
<li>CSS</li>
<li>php</li>
<li>MYsql</li>
<li>JAVA</li>
</ul>

<p>Atribut type="circle" (lingkaran)</p>

<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>php</li>
<li>MYsql</li>
<li>JAVA</li>
</ul>

<p>Atribut type="dics" (seperti default)</p>

<ul type="disc">
<li>HTML</li>
<li>CSS</li>
<li>php</li>
<li>MYsql</li>
<li>JAVA</li>
</ul>


</body>
</html>


Preview

Atrubut type="square" (karakter kotak)

  • HTML
  • CSS
  • php
  • MYsql
  • JAVA

Atribut type="none" (menghilangkan karakter penanda list)

  • HTML
  • CSS
  • php
  • MYsql
  • JAVA

Atribut type="circle" (lingkaran)

  • HTML
  • CSS
  • php
  • MYsql
  • JAVA

Atribut type="dics" (seperti default)

  • HTML
  • CSS
  • php
  • MYsql
  • JAVA

Membuat list (Description list) di HTML

List jenis ini (Description list) adalah list yang tedak memilki indikasi daftar baik berupa abjad, angka dan karakter. namaun di sini ada yang membedakan dari dua jenis list yang sebelumnya kita bahas, yakni description list bisa di sertai dengan keterangan (deskripsi) pada setiap daftar informasinya.

Tag yabg sudah di sediakan di HTML unutuk membuat description list adalah tag <dl> (Data list). Tag untuk list itemnya adalah <dt> (Data term) dan untuk mendefinisikan deskripsinya yakni tag <dd> (data description).

Contoh untuk membuat Description List sebagai berikut:

.

Contoh Description List di HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<dl>

<dt>HTML</dt>
<dd>Belajar html dasar sangat penting untuk bekal saat mempelajari bahasa pemrograman</dd>

<dt>CSS</dt>
<dd>HTML dan CSS perlu di kuasai dengan baik untuk dapat membangun struktur web berpotensi</dd>

<dt>Java Script</dt>
<dd>Web modern membutuhkan Java Script agar nampak dinamis.</dd>

<dt>PHP</dt>
<dd>Bahasa pemrograman berbasis web dapat di manfaatkan agar web lebih dinamis dan interaktif.</dd>

</dl>

</body>
</html>


Preview

HTML
Belajar html dasar sangat penting untuk bekal saat mempelajari bahasa pemrograman
CSS
HTML dan CSS perlu di kuasai dengan baik untuk dapat membangun struktur web berpotensi
Java Script
Web modern membutuhkan Java Script agar nampak dinamis.
PHP
Bahasa pemrograman berbasis web dapat di manfaatkan agar web lebih dinamis dan interaktif.

Sebenarnya, masih ada satu lagi tehnik membuat List di html dengan indikator list gambar, namun konsep ini tidak akan kita bahas di artikel ini, melainkan kita akan bahas saat kita sudah belajar mengenai CSS lebih dalam lagi.

Admin ZenTutorials di Januari 26, 2019
Label: Bahasa pemrograman, HTML

Tidak ada komentar:

Posting Komentar

#Tanggapi artikel ini dengan berkomentar.
#Dilarang keras, komentar Spam, berbau SARA, PORNOGRAFI, PELECEHAN DAN UJARAN KEBENCIAN.
#Terimakasih di awal bagi yang berkomentar.

Posting Lebih Baru Posting Lama Beranda
Langganan: Posting Komentar (Atom)

Postingan Populer

  • else if di JAVA
    Pengkondisian atau Statement else IF ? Kondisional else IF sering di gunakan ketika ada lebih dari satu kondisi yang perlu di uji. struct...

Halaman

  • Beranda
  • Belajar Bahasa markup HTML
  • Belajar Bahasa pemrograman JavaScript
  • Belajar bahasa pemrograman PHP
  • Belajar bahasa pemrograman JAVA
  • Belajar Style CSS
  • Belajar bahasa pemrograman C++

Label

  • Bahasa pemrograman
  • C++
  • CSS
  • HTML
  • JAVA
  • PHP

tentang saya dan profesi saya

  1. About me
  2. Contact form
  3. Disclaimer
  4. Policy privacy
  5. TOS
Copy right