HTML Chapter 5 - HTML Lists, Blok and Inline element

Tetap pada HTML Dasar, saya akan membahas : HTML list, Block, and inline element, HTML Class. Langsung menuju ke TKP :

1. Pembahasan Materi

• HTML List
• Block and Inline element
• HTML Class

2. Alat dan Bahan

• Laptop
• Sublime Text
• Aplikasi Browser

3. Tahap Pelaksanaan

A. HTML List

  Merupakan sebuah daftar baik menggunakan angka, simbol, romawi ataupun huruf.

#maca-macam List beserta penjelasan dan bentuk dasar :

 a. Urordered 
          Biasa menggunakan sintaks <ul></ul> dan <li></li> yang berada ditengah yang menunjukkan dimulainya daftar.

          <ul>
             <li>statement</li>
          </ul>

      * Jenis-jenis type dalam Urordered :
         - disc : daftar penanda untuk peluru (default).
         - circle : mengatur item daftar penanda ke lingkaran.
         - square : mengatur item daftar penanda untuk persegi.
         - none : tidak akan ditandai.

      * Penerapan dalam Sublime Text :

        - Buka Sublime Text 
        - Sintaks pembuatan type Disc seperti dibawah ini.

Inilah coding dari Jenis-jenis type dalam Urordered :

Untuk hasilnya seperti ini :

 b. Ordered 
          Biasa menggunakan sintaks <ol></ol> dan <li></li> yang berada di tengah.

         <ol>
              <li>statement</li>
          </ol>

       * Jenis-jenis type dalam Ordered :
         - type="1" : daftar barang akan diberi nomor dengan angka (default).
         - type="A" : daftar barang akan diberi nomor dengan huruf besar.
         - type="a" : daftar barang akan diberi nomor dengan huruf kecil.
         - type="I" : daftar barang akan diberi nomor dengan angka romawi huruf besar.
         - type="i" : daftar barang akan diberi nomor dengan angka romawi huruf kecil.

* Penerapan dalam Sublime Text :

         - Buka Sublime Text
         - Sintaks  type="1, A, a, I, i" seperti dibawah ini :

Untuk hasilnya seperti dibawah ini:

  c. Deskripsi HTML
          Daftar istilah dengan deskripsi setiap istilah. Biasanya menggunakan sintaks <dl></dl> yang menandakan dafar deskripsi, sintaks <dt></dt> dan<dd></dd> mendefinisikan istilah (nama).

           <dl>
               <dt>statement</dt>
                     <dd>statement</dd>
           </dl>
        
         * Penerapan sintaks deskripsi seperti dibawah ini.

           - Masukkan coding dibawah ini ke sublime text :

Untuk hasilnya seperti ini :

     e. List Bersarang dan List Horizontal
            Digunakan untuk membuat menu. Dan biasanya menggunakan CSS untuk memperindah tampilan.

        * Penerapan coding List Bersarang dan List horizontal

          - Buka Sublime Text dan masukkan coding seperti dibawah ini.

Untuk hasilnya seperti ini :

B. HTML Blok and Inline element

         Element HTML memiliki nilai tampilan default tergantung jenis elementnya. Sedangkan Inline adalah salah satu tampilan nilai default untuk banyak unsur.
     - Elemen blok-tingkat : dimulai pada baris baru dan mengambil lebar penuh yang tersedia.
        - Contoh elemen blok bertingkat :
          * <div>
          * <H1>-<H6>
          * <P>
          * <form>

     - Inline element : tidak dimulai pada baris baru dan hanya membutuhkan banyak lebar yang diperlukan.
        - Contoh elemen inline:
          *<span>
          *<a>
          *<img>

      * Penerapan coding dari <div> dan <span>  
        - Buka sublime text
         - Masukkan coding dibawah ini untuk div.

Untuk hasilnya seperti ini :

 C. HTML Class

           HTML Kelas atribut : memungkinkan untuk menentukan gaya yang sama untuk elemen dengan nama kelas yang sama.


       * Penerapan coding dari class HTML div dan span
         - Buka Sublime Text.
          - Masukkan coding dibawah ini untuk class div dan span.

Untuk hasilnya seperti ini :

4. Kesimpulan

  Kesimpulan dari ulasan tadi, banyak macam-macam list sesuai macam apa yang kita butuhkan. Dan perbedaan antara span dan div dalam HTML. DIV digunakan sebagai wadah untuk elemet HTML lain, sedangkan SPAN digunakan sebagai wadah untuk beberapa teks.

5. Referensi

• https://www.w3schools.com/html/html_blocks.asp
• https://id.wikipedia.org/wiki/HTML