Cara Membuat List Di Html

List yaitu pendirian penulisan yang sering digunakan cak bagi membuat daftar beruntun. Terdapat 3 macam list yang suka-suka di HTML yaitu
ordered list,
unordered list
dan
description list. Cara menciptakan menjadikan list di html tentunya farik-cedera sesuai jenisnya. Ketiga macam list HTML tersebut lagi memiliki tampilan dan kepentingan nan berbeda.

Perbedaan penulisan ketiga jenis list ini terdapat pada pembuka dan penutupnya tetapi. Sedangkan kerjakan membentuk item pada ordered dan unordered list memperalat elemen yang separas ialah
<li>..</li>. Cak bagi mengarifi lebih intern masing-masing list tersebut kita akan bahas satu-persatu.

Ordered List pada HTML

Ordered list adalah jenis list berurutan yang ditampilkan dengan menggunakan angka atau nomor atau huruf. Ordered list biasa digunakan untuk menyodorkan daftar item nan membutuhkan penomoran misalnya daftar pemenang lomba, daftar urutan ranking kelas bawah dan urutan-urutan lain nan membutuhkan nomor. Tag
<ol>
digunakan kerjakan membuat list yang berjenis
ordered list.

Pendirian membuat ordered list HTML

Ordered list maupun list angka/nomor dibuat dengan menggunakan tag
<ol>. Penulisan item-item list tersebut menggunakan tag <li> yang ditelakkan diantara tag pembuka <ol> dan tag penutup </ol>.

Sempurna penulisan ordered list:

<!DOCTYPE html> <html>  <head>   <title>Belajar ordered list</title>  </head>  <body>   <p>Bujuk nama pemenang lomba koding:</p>   <ol>   <li>Nama juara purwa</li>   <li>Etiket jago kedua</li>   <li>Logo juara ketiga</li>   </ol>  </body> </html>
        

Hasil tampilan pada browser:

Tampilan ordered list HTML di browser

Penjelasan kode: Pada contoh kode di atas, penulisan ordered list dimulai dari baris ke-8 yakni tag <ol>. Lampau, baris ke-9 mencecah-11 ialah item-item dari list tersebut dimana penulisannya menunggangi tag <li>. Lalu berakhir pada ririt ke-12 yaitu tag pengunci </ol>. Secara kodrati angka 1 hingga 3 akan ditampilkan plong tiap item (di depan nama jago).

Atribut-Atribut untuk Molekul <ol>

Telah kita ketahui bahwa kemujaraban tag ol digunakan cak bagi menciptakan menjadikan ordered list. Atom <ol> memiliki 3 atribut unik yang dapat digunakan yaitu atribut type, atribut tiba dan atribut reversed.

Atribut type

Atribut type digunakan untuk mengubah jenis pengurutannya. Misalnya ingin mengubah berpangkal skor (1,2,3,…) menjadi fonem (a,b,c,…). Terwalak 5 diversifikasi value yang dapat kita gunakan yakni:

Atribut Kepentingan
type=”1″ Pemijatan dengan angka
type=”a” Pemijatan dengan huruf mungil (a,b,c,…)
type=”A” Pengurutan dengan huruf besar/kapital (A,B,C,…)
type=”i” Pemencetan dengan ponten romawi kecil (i,ii,iii,…)
type=”I” Pengurutan dengan poin romawi besar (I,II,III,…)

Transendental penggunaan atribut type:

<!DOCTYPE html> <html>  <head>   <title>Atribut type Ordered list</title>  </head>  <body>   <p>Pengurutan dengan type 1</p>   <ol type="1">   <li>item list</li>   <li>item list</li>   <li>item list</li>   </ol>   <p>Pengurutan dengan type a</p>   <ol type="a">   <li>item list</li>   <li>item list</li>   <li>item list</li>   </ol>   <p>Pengurutan dengan type A</p>   <ol type="A">   <li>item list</li>   <li>item list</li>   <li>item list</li>   </ol>   <p>Pemencetan dengan type i</p>   <ol type="i">   <li>item list</li>   <li>item list</li>   <li>item list</li>   </ol>   <p>Pemijatan dengan type I</p>   <ol type="I">   <li>item list</li>   <li>item list</li>   <li>item list</li>   </ol>  </body> </html>
        

Hasilnya:

Penggunaan atribut type di ordered list HTML

Penjelasan kode: Setelah menggunakan atribut type kita dapat melihat perbedaan lega kesannya yaitu plong tipe pengurutannya.

Atribut Start

Atribut start digunakan untuk mengubah atau menentukan kredit mulanya pemencetan. Kalau minus menggunakan atribut ini pengurutan akan dimulai dari angka 1 tetapi jika kita mau dimulai dari angka 5 maka kita perlu memasukkannya puas value atribut start menjadi <ol berangkat=”5″>.

Contoh penggunaan atribut start:

<!DOCTYPE html> <html>  <head>   <title>Atribut menginjak Ordered list</title>  </head>  <body>   <p>Pengurutan dengan type 1</p>   <ol mulai="5">   <li>item list</li>   <li>item list</li>   <li>item list</li>   </ol>   <p>Pengurutan dengan type a</p>   <ol type="a" start="5">   <li>item list</li>   <li>item list</li>   <li>item list</li>   </ol>  </body> </html>
        

Karenanya:

Tampilan atribut start untuk list HTML

Penjelasan kode: Atribut menginjak pada contoh di atas menunjukkan pengurutan dimulai dari ponten 5. Peristiwa tersebut sekali lagi berlaku bakal penggunaan atribut type yang dimulai dari huruf e (abc ke-5) minus kita saling manual doang dengan menambahkan atribut start.

Atribut reversed

Atribut reversed digunakan untuk mengingkari urutan mulai sejak nan terbesar menuju yang terkecil. Atribut ini ialah atribut tanpa value kaprikornus hanya terbiasa menambahkan reversed plong tag pembuka ol.

<ol reversed>   <li>item list</li>   <li>item list</li>   <li>item list</li> </ol>
        

Unordered List pada HTML

Unordered list adalah variasi list yang tidak berturutan yang ditampilkan dengan menunggangi simbol. Unordered list digunakan kerjakan menampilkan daftar list yang tak memerlukan angka pengurutan misalnya daftar OS komputer jinjing, daftar aplikasi editor html dan tak-lain.

Cara Membuat Unordered List Html

Unordered list atau list fon dibuat dengan memperalat tag <ul>. Sama dengan list sebelumnya, item-item list ini ditulis dengan menggunakan tag <li> yang terletak di kerumahtanggaan partikel <ul>.

Cermin penulisan unordered list:

<!DOCTYPE html> <html>  <head>   <title>Belajar unordered list</title>  </head>  <body>   <p>Daftar OS komputer jinjing:</p>   <ul>   <li>Linux</li>   <li>Windows</li>   <li>Mac</li>   </ul>  </body> </html>
        

Hasilnya:

Tampilan unordered list HTML di browser

Penjelasan kode: Penulisan unordered list plong kamil di atas dimulai berusul larik ke-8 yaitu tag <ul>. Lalu dilanjutkan dengan item-itemnya yang diapit oleh tag <li> pada baris ke-9 hingga ke-11. Kemudian ditutup dengan tag </ul>.

Atribut kerjakan Elemen <ul>

Begitu juga dijelaskan di atas bahwa kepentingan ul lega HTML adalah lakukan membuat unordered list. Pada varian HTML5 Elemen <ul> enggak memiliki atribut tersendiri. Sebenarnya terwalak 2 atribut individual nan populer bakal anasir <ul> belaka sudah tak disupport maka dari itu HTML5 sehingga kita tidak terlazim mempelajarinya. Lakukan sekedar siaran, atribut tersebut adalah atribut type dan atribut compact.

Atribut type digunakan buat merubah jenis simbol yang secara default adalah disc, dapat kita ubah menjadi circle dan square.

Atribut compact digunakan untuk memunculkan ukuran makin kerdil untuk list.

Boleh dilihat bahwa antara ordered dan unordered list setolok-sama memperalat tag <li>. Fungsi li pada html adalah untuk menampilkan item plong unordered dan ordered list. Sedangkan pada description list enggak menggunakan tag <li>. Yuk kita bahas lebih lanjur.

Description List sreg HTML

Description list adalah jenis list yang digunakan untuk mengemukakan istilah dan penjelasannya seperti kamus. Description list jarang digunakan seandainya dibandingkan 2 jenis list sebelumnya. Cara penulisan description list minus berbeda semenjak jenis list sebelumnya. Kalau kita cuma teristiadat 2 tag lega ordered dan unordered list, maka untuk menulis description list kita membutuhkan 3 tag HTML yaitu tag <dl>, tag <dt> dan tag <dd>.

Tag <dl> digunakan bakal mendefinisikan bahwa kode tersebut adalah description list. Tag <dt> digunakan untuk mengapit istilah (term). Tag <dd> digunakan bikin mengapit penjelasannya (description).

Contoh penulisan description list:

<!DOCTYPE html> <html>  <head>   <title>Membiasakan description list</title>  </head>  <body>   <p>Daftar istilah:</p>   <dl>   <dt>HTML</dt>   <dd>HyperText Markup Language yaitu bahasa bikin mewujudkan halaman web.</dd>   <dt>PHP</dt>   <dd>Bahasa pemrograman yang tenar digunakan untuk mewujudkan web disisi peladen.</dd> </dl>  </body> </html>
        

Hasilnya:

Tampilan description list HTML

Penjelasan kode: Penulisan description list pada contoh tersebut dimulai dari baris ke-8 adalah tag <dl>. Kemudian istilah diapit maka dari itu tag <dt> pada ririt ke-9 dan ke-11. Lalu tag <dd> mengapit penjelasan masing-masing puas saf ke-10 dan ke-12. Lalu diakhiri dengan intiha tag </dl>.

Nested List HTML

Nested list ialah list di n domestik list. Misalnya saat kita batik list OS komputer yang terdiri mulai sejak Linux, Windows dan Mac. Linux dalamnya terwalak list lagi yaitu Ubuntu, Debian, RedHat, dll. Pada kamil seperti inilah kita perlu membuat nested list.

Cara Membuat Nested List HTML

Untuk menciptakan menjadikan nested list di HTML, list lampiran harus diletakkan di n domestik tag <li>. List tersebut ditulis kamil berbunga tag <ol> atau <ul> di dalam tag <li>.

Pola kode:

<!DOCTYPE html> <html>  <head>   <title>Belajar nested list</title>  </head>  <body>   <p>Daftar OS komputer:</p>   <ul>   <li>Linux 	<ul> 	  <li>Ubuntu</li> 	  <li>Debian</li> 	  <li>RedHat</li> 	 </ul>   </li>   <li>Windows</li>   <li>Mac</li>   </ul>  </body> </html>
        

Hasilnya:

Tampilan nested list HTML pada browser

Penjelasan kode: Pada baris ke-9 tag <li> enggak ditutup dengan </li> tetapi dimasukkan list tambahan lagi yang dimulai pada baris ke-10 merupakan tag <ul>. List adendum berakhir pada baris ke-14 dengan tag </ul>. Setelah itu bau kencur ditutup dengan tag </li>.

Selain digunakan cak bagi mewujudkan daftar urutan kerumahtanggaan halaman web, list juga biasa digunakan buat pembuatan menu. Sekadar, untuk membuat menu kita harus mempelajari CSS dan JS. Hendaknya tuntaskan dahulu pembelajaran HTML sebelum belajar CSS dan JS. Jika ada pertanyaan akan halnya materi list HTML ini silahkan bingkis komentar pada kolom komentar.

M. Hernawan

Web developer nan juga suka dengan dunia sysadmin. Interelasi sparing Teknik Informatika di Indonesia.

Source: https://itkoding.com/membuat-list-pada-html/

Posted by: caribes.net