--> Belajar HTML (Part 5): Mempelajari List dan Tag Div HTML
Home Belajar HTML

tutorial belajar HTML

SeniKoding.com - pada kesempatan ini Admin akan melanjutkan artikel berikutnya seputar tutorial belajar HTML. Bilamana ada yang belum membaca artikel-artikel dasar HTML sebelumnya, bisa dibuka lagi artikel part-part yang lalu. Pada artikel sebelumnya sudah dibahas dunia HTML lebih mendasar sehingga buat pemula atau yang belum pernah belajar HTML bisa membuka lagi artikel sebelumnya, sebelum masuk ke artikel ini dan selanjutnya.

Tutorial Belajar HTML Mempelajari List HTML


List HTML adalah kode HTML yang berfungsi untuk menampilkan daftar dalam halaman web. HTML memiliki tag khusu untuk menampilkan list. Jika daftar tersebut tidak urut bisa menggunakan "bullet", maka tag yang digunakan adalah <ul> yang berarti Unordered List. Namun jika daftar tersebut adalah daftar yang penting urutannya "angka", maka tag yang digunakan adalah <ol> yang berarti Ordered List.

Contoh kode List HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <h1>Tugas Akhir Teknik Informatika 2017</h1>
        <ul>
            <li>Pendahuluan</li>
            <ol>
                <li>Latar Belakang</li>
                <li>Rumusan Masalah</li>
                <li>Tujuan</li>
                <li>Batasan Masalah</li>
            </ol>
            <li>Daftar Pustaka</li>
            <ol>
                <li>Definisi Teknik Informatika</li>
                <li>Buku Pemrogramman web</li>
            </ol>
        </ul>
    </body>
</html>

Dari kode List HTML diatas dapat menghasilkan tampilan halaman website seperti gambar dibawah ini.

tutorial belajar HTML
List HTML

Tutorial Belajar HTML Mempelajari Tag Div HTML


Tag Div adalah tag yang ada didalam pengkodean HTML, berfungsi untuk mempermudah pemformatan dengan melakukan satu tag yaitu Div. Tag Div mempunyai dua macam atribut yaitu Class dan Id. Atribut ini berhubungan dengan script CSS yang akan dibahas lebih lanjut di artikel selanjutnya. Intinya pembuatan tag Div sangat membantu dalam custom kode HTML, yang memang semakin rapi dan simple kode program terutama HTML akan semakin powerfull juga terhadap halaman website.

Contoh kode Div HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
       <div id="container">
        
            <h1>SeniKoding.com</h1>
            <p>Situs Berita Teknologi dan Tutorial</p>
            
            <div id="header">
               ... ISI HEADER ...
           </div>
            
            <div id="content">
            
                <div class="sidebar">
                   ... ISI SIDEBAR ...
                </div>
                
               <div class="isi-content">
                  ... ISI KONTEN ...
               </div>
                
            </div>
            
            <div id="footer">
              ... ISI FOOTER ...
            </div>
            
       </div>
    </body>
</html>

Kode diatas adalah hanya kerangka kode tag Div. Jika digabungkan dengan kode CSS maka kerangka itu bisa menjadi desain website. Untuk lengkapnya mudah-mudahan bisa dijelaskan di artikel selanjutnya. Tetapi dengan kerangka itu kita sudah bisa membuat lebih mudah pola-pola atau rancangan desain website yang kita inginkan. Silakan sobat ber eksperimen sediri dengan panduan artikel ini.

Sampai disini Tutorial Belajar HTML Mempelajari List dan Tag Div HTML, semoga bermanfaat.

- Salam -


BAB : Belajar HTML dasar dari awal sampai akhir latihan

Baca juga :


Tidak ada komentar

Posting Komentar

Dilarang SPAM Komentar!

to Top