Belajar Membuat Heading, List, dan Memahami Tag Div
Setelah di artikel sebelumnya yaitu tentang Dasar-dasar Belajar HTML yang meliputi Atribut HTML, Penulisan Lokasi File, dan Membuat Link. Di artikel kali ini saya akan membahas tentang Cara Membuat Heading, List, dan Memahami Tag Div. Belajar Membuat Heading, List, dan Memahami Tag Div
Setelah di artikel sebelumnya yaitu tentang Dasar-dasar Belajar HTML yang meliputi Atribut HTML, Penulisan Lokasi File, dan Membuat Link. Di artikel kali ini saya akan membahas tentang Cara Membuat Heading, List, dan Memahami Tag Div. Ok langsung saja berikut adalah penjelasannya, dibaca dan dipahami dengan baik ya.
Membuat Heading (Penjudulan)
Heading digunakan untuk memberikan sebuah judul pada suatu artikel atau dokumen HTML. Hal ini sangat penting untuk dilakukan agar memberitahu pengunjung website atau blog tentang konten yang kita buat. Untuk memformat penjudulan dalam HTML, kita bisa gunakan tag <h1> untuk judul utama karena merupakan heading dengan font terbesar dan untuk judul sub yang lainnya anda dapat menggunakan tag <h2> sampai dengan tag <h6>.
Setiap level judul memiliki ukuran font yang berbeda-beda, tetapi anda masih bisa merubah ukurannya melalui CSS. Judul dari sebuah artikel yang kita buat sebaiknya menggunakan tag <h1>, sub judul menggunakan tag <h2>, sub-sub judul menggunakan <h3>, dan sampai seterusnya. Struktur yang teratur juga menjadi nilai tambah untuk SEO agar struktur menjadi konsisten dan usahakan agar tidak melompati struktur penulisan.
Sebagai contoh latihan, buatlah script HTML berikut:
<html>
<head>
<title>Belajar Membuat Heading</title>
</head>
<body>
<h1>Judul Heading 1</h1>
<h2>Judul Heading 2</h2>
<h3>Judul Heading 3</h3>
<h4>Judul Heading 4</h4>
<h5>Judul Heading 5</h5>
<h6>Judul Heading 6</h6>
</body>
</html>
<head>
<title>Belajar Membuat Heading</title>
</head>
<body>
<h1>Judul Heading 1</h1>
<h2>Judul Heading 2</h2>
<h3>Judul Heading 3</h3>
<h4>Judul Heading 4</h4>
<h5>Judul Heading 5</h5>
<h6>Judul Heading 6</h6>
</body>
</html>
Berikut adalah hasil tampilan dari kode diatas di web browser:
 |
| Tampilan Script Heading |
Didalam dokumen HTML anda juga bisa mengatur format font seperti layaknya mengatur jenis font, warna huruf, ukuran/size font dan lain-lainnya. Untuk mengatur format font dalam dokumen HTML caranya dengan menggunakan tag <font>…</font>. Baik, saya akan membagikan sedikit caranya, walau ini agak menyimpang dari topik pembahasan kali ini. Namun, kalau kalian tidak mau mencobanya atau menggunakannnya juga tidak apa-apa, karena saya cuma ingin berbagi. Berikut adalah contoh penggnaan tag font nya:
<html>
<head>
<title>Cara Memformat Font</tilte>
</head>
<body>
<font size=”7pt” face=”Tahoma” color=”green”>
Bentuk teks Tahoma berwarna hijau
</font>
</body>
</html>
<head>
<title>Cara Memformat Font</tilte>
</head>
<body>
<font size=”7pt” face=”Tahoma” color=”green”>
Bentuk teks Tahoma berwarna hijau
</font>
</body>
</html>
Dari kode diatas terdapat tag <font size=”7pt” face=”Tahoma” color=”green”>, itu artinya kita mengatur font pada dokumen HTML dengan ukuran 7 pt, dengan dengan jenis font Tahoma yang berwarna hijau.
Itu sekilas tentang cara memformat font, kalian bisa mencobanya sendiri nanti, dan semoga bisa bermanfaat bagi kalian semua. OK, mari kita kembali ke topik selanjutnya.
Membuat List (Daftar)
Sebuah daftar dapat memiliki penomoran atau hanya sebuah seimbol berupa lingkaran atau bentuk lainnya. Dalam HTML, daftar yang menggunakan penomoran disebut dengan ordered list dan yang menggunakan simbol disebut dengan unordered list.
Itu sekilas tentang cara memformat font, kalian bisa mencobanya sendiri nanti, dan semoga bisa bermanfaat bagi kalian semua. OK, mari kita kembali ke topik selanjutnya.
Membuat List (Daftar)
Sebuah daftar dapat memiliki penomoran atau hanya sebuah seimbol berupa lingkaran atau bentuk lainnya. Dalam HTML, daftar yang menggunakan penomoran disebut dengan ordered list dan yang menggunakan simbol disebut dengan unordered list.
- Oredered List
Ordered list atau Daftar berurutan dapat dibuat dengan menggunakan tag <ol> (singkatan dari ordered list) dan untuk setiap list nya kita gunakan tag <li> (singkatan dari list item/daftar item). Sebagai contoh, perhatikan kode HTML berikut:
<h2>Daftar Kegiatan Hari Minggu</h2>
<ol>
<li>Lari Pagi</li>
<li>Membuat Artikel Baru</li>
<li>Mengerjakan Tugas</li>
<li>Main Game</li>
<li>Barzanzi</li>
</ol>
<ol>
<li>Lari Pagi</li>
<li>Membuat Artikel Baru</li>
<li>Mengerjakan Tugas</li>
<li>Main Game</li>
<li>Barzanzi</li>
</ol>
Penomoran daftar akan dilakukan secara otomatis bila anda menambahkan daftar item.
Note: “Gunakan Ordered List, bila sebuah list/daftar memerlukan urutan yang benar, seperti cara membuat akun emai, cara membuat blog, cara membuat website, cara menyalakan komputer sesuai prosedur dan sebagainya”.
Jika kode diatas ditampilkan pada browser, maka tampilannya akan seperti berikut:
 |
| Tampilan Script Ordered List |
- Unordered List
Berbeda dengan daftar yang berurut, unordered list akan menandai setiap item dengan simbol. Baik berupa lingkaran atau persegi (anda masih bisa merubahnya dengan CSS). Untuk membuat daftar tidak berurut kita gunakan tag <ul>, item yang terdapat didalamnya harus diapitdengan tag <li>.
Jika kita memodifikasi contoh sebelumnya dengn merubah <o> menjadi <ul> maka yang akan kita dapat adalah seperti berikut:
Jika kita memodifikasi contoh sebelumnya dengn merubah <o> menjadi <ul> maka yang akan kita dapat adalah seperti berikut:
<h2>Daftar Kegiatan Hari Minggu</h2>
<ul>
<li>Lari Pagi</li>
<li>Membuat Artikel Baru</li>
<li>Mengerjakan Tugas</li>
<li>Main Game</li>
<li>Barzanzi</li>
</ul>
<ul>
<li>Lari Pagi</li>
<li>Membuat Artikel Baru</li>
<li>Mengerjakan Tugas</li>
<li>Main Game</li>
<li>Barzanzi</li>
</ul>
 |
| Tampilan Script Unordered List |
Definition List
Berbeda dengan Ordered List dan Unordered List yang memiliki struktur sama, Data List memiliki struktur tersendiri. Biasanya Data List ini digunakan untuk membuat daftar istilah beserta definisinya seperti halnya dalam kamus.
<dl>
<dt>Example</dt>
<dt>Example</dt>
<dl>
<dt>Example</dt>
<dt>Example</dt>
<dl>
Tag dt (definition term) digunakan untuk menampung istilah yang akan didefinisikan, dan tag dd digunakan untuk menuliskan definisi dari dt sebelumnya. Berikut contoh penggunaannya dari Definition List:
<dl>
<dl>
<dt>Manga</dt>
<dd>Manga (baca: man-ga, atau ma-ng-ga) merupakan kata komik dalam bahasa Jepang; di luar Jepang, kata tersebu digunakan khusus untuk membicarakan tentang komik Jepang. </dd>
<dt>Mangaka</dt>
<dd>Mangaka (baca: man-ga-ka, atau ma-ng-ga-ka) adalah orang yang menggabar Manga</dd>
</dl>
<dt>Manga</dt>
<dd>Manga (baca: man-ga, atau ma-ng-ga) merupakan kata komik dalam bahasa Jepang; di luar Jepang, kata tersebu digunakan khusus untuk membicarakan tentang komik Jepang. </dd>
<dt>Mangaka</dt>
<dd>Mangaka (baca: man-ga-ka, atau ma-ng-ga-ka) adalah orang yang menggabar Manga</dd>
</dl>
Jika kode diatas ditampilkan pada browser, maka tampilannya akan seperti berikut:
 |
| Tampilan Script Definition List |
List/Daftar bersarang
Sebuah daftar bisa saja memiliki daftar lagi di dalam itemnya, atau biasa kita sebut dengan daftar/list bersarang (nested list). Contohnya seperti pada latihan yang akan kita buat berikut.
Berikut file baru HTML lalu ketikkan kodenya berikut:
Sebuah daftar bisa saja memiliki daftar lagi di dalam itemnya, atau biasa kita sebut dengan daftar/list bersarang (nested list). Contohnya seperti pada latihan yang akan kita buat berikut.
Berikut file baru HTML lalu ketikkan kodenya berikut:
<!DOCTYPE HTML>
<html>
<head>
<title>List/Daftar</title>
<head>
<body>
<h2>Daftar Kegiatan Hari Minggu</h2>
<ol>
<li>Pergi ke Pasar
<ul>
<li>Beli Sayuran</li>
<li>Beli Kertas
<ol>
<li>A3</li>
<li>Legal</li>
</ol>
</li>
<li>Beli Tinta</li>
</ul>
</li>
<li>Buat Tutorial HTML</li>
<li>Mengerjakan Tugas</li>
</ol>
</body>
</html>
<html>
<head>
<title>List/Daftar</title>
<head>
<body>
<h2>Daftar Kegiatan Hari Minggu</h2>
<ol>
<li>Pergi ke Pasar
<ul>
<li>Beli Sayuran</li>
<li>Beli Kertas
<ol>
<li>A3</li>
<li>Legal</li>
</ol>
</li>
<li>Beli Tinta</li>
</ul>
</li>
<li>Buat Tutorial HTML</li>
<li>Mengerjakan Tugas</li>
</ol>
</body>
</html>
Dan berikut adalah tampilan pada browser:
 |
| Tampilan Sceript List/Daftar bersarang |
Yang perlu anda perhatikan adalah dimana anda meletakkan tag <ol> atau <ul>. Jika anda ingin menempatkannya pada suatu item, yaitu sebelum penutup tag list item <li>. Daftar seperti ini biasanya digunakan untuk pembuatan menu website, atau keperluan lainnya yang memang membutuhkan penomoran atau sesuatu yang memiliki poin-poin.
Baca Juga : Belajar Membuat Form dan tabel
Memahami Tag div (Division)
Anda dapat membuat suatu grup dari tag-tag HTML, yang anda buat dengan menggunakan tag <div>, seperti pada contoh kasus berikut:
Setiap website/blog yang anda buka, jika diperhatikan pasti memiliki empat bagian/grup. Keempat bagian/grup ini antara lain:
Baca Juga : Belajar Membuat Form dan tabel
Memahami Tag div (Division)
Anda dapat membuat suatu grup dari tag-tag HTML, yang anda buat dengan menggunakan tag <div>, seperti pada contoh kasus berikut:
Setiap website/blog yang anda buka, jika diperhatikan pasti memiliki empat bagian/grup. Keempat bagian/grup ini antara lain:
1. Header
Bagian kepala website yang berisi logo website, nama website, slogan website, menu website dan lain sebagainya.
2. Content
2. Content
Berisi isi dari website itu sendiri, jika website berupa blog, maka contentnya berisi tentang postingan terbaru atau informasi lainnya.
3. Sidebar
Berada disamping Content dan biasanya berisi iklan, kategori artikel dan widget atau hiasan situs lainnya.
4. Footer
Bagian kaki dari website yang pada umumnya diisi dengan tag website tersebut, misalnya Copyrihgt © 2017 by Aditya Tekno.
Lebih sederhananya, bayangkanlah Surat Resmi yang memiliki Kop Surat, Badan Surat, dan penutup surat.
Dalam HTML, kita dapat membagi bagian-bagian tersebbut dengan menggunakan tag <div> (divison/bagian) dan untuk menamai setiap div kita gunakan atribut id atau class. Berikut contoh penggunaan tag div jika kita terapkan pada bagian-bagian website yang telah kita sebutkan sebelumnya. Atribut ID dan Class tidak hanya digunakan dalam tag div saja melainkan dapat digunakan di setiap tag HTML untuk memberikan penamaan sebagai referensi jika diperlukan.
Dalam HTML, kita dapat membagi bagian-bagian tersebbut dengan menggunakan tag <div> (divison/bagian) dan untuk menamai setiap div kita gunakan atribut id atau class. Berikut contoh penggunaan tag div jika kita terapkan pada bagian-bagian website yang telah kita sebutkan sebelumnya. Atribut ID dan Class tidak hanya digunakan dalam tag div saja melainkan dapat digunakan di setiap tag HTML untuk memberikan penamaan sebagai referensi jika diperlukan.
<div id=”header”>
</div>
<div id=”content”>
<div>
<div id=”sidebar”>
</div>
<div id=”footer”>
</div>
</div>
<div id=”content”>
<div>
<div id=”sidebar”>
</div>
<div id=”footer”>
</div>
Jika anda menampilkannnya pada browser, anda tidak akan melihat apa-apa karena tag div tidak akan menampilkan efek visual. Tag ini hanya digunakan untuk membuat dokumen HTML lebih terstruktur dengan membagi-bagi dokumen ke dalam bagian-bagian yang lebih spesifik.
1. Lebih Baik Pakai ID atau Class?
ID
Atribut ID digunkan untuk penamaan elemen HTML yang memiliki karakteristik unik/berbeda. Tidak boleh ada dua atau lebih elemen yang mempunyai ID yang sama. Perhatikan contoh berikut ini:
<div id=”menu”>
<ul id=”menu”>
<li>Home</li>
<li>Tips SEO</li>
</ul>
</div>
<ul id=”menu”>
<li>Home</li>
<li>Tips SEO</li>
</ul>
</div>
Peggunaan atribut ID pada contoh di atas adalah SALAH, karena terdapat dua ID yang sama, yaitu “menu” pada tag <div> dan <ul>. Perhatikan contoh sebelumnya, bahwa kita menggunakan ID yang berbeda untuk setiap div yakni header, content, sidebar dan footer karena semuanya memiliki struktur dan fungsi yang berbeda dalam suatu dokumen HTML.
Class
Class digunakan untuk penamaan elemen yang memiliki karakteristik/struktur sam dan dapat digunakan berulang kali dalam markup (kode HTML). Sebagai contoh, perhatikan kode HTML berikut:
<ul id=”menu”>
<li class=”biru”>Home</li>
<li>Tutorial</li>
<li class=”biru”>Berita<li>
<li>Video</li>
</ul>
<li class=”biru”>Home</li>
<li>Tutorial</li>
<li class=”biru”>Berita<li>
<li>Video</li>
</ul>
Pada kode HTML diatas, saya menggunakan class biru pada beberapa list item, karena nantinya list item yang memiliki class biru akan diberi warna background biru. Kesimpilannya adalah ketika anda memiliki beberapa elemen dengan karakter/format yang sama, gunakan Class sebagai penamaannya dan gunakan ID untuk elemen yang berbeda dan membutuhkan tanda pengenal lebih spesifik.
2. Memahami Hubungan Child, Parent dan Siblings
<div id=”wrapper”>
<div id=”content”>
<div id=”article”></div>
<div id=”sidebar”></div>
</div>
</div>
<div id=”content”>
<div id=”article”></div>
<div id=”sidebar”></div>
</div>
</div>
Dalam contoh kode HTML tersebut:
- <div id=”wrapper”> disebut Parent, dan tag HTML yang ada di dalamnya disebut dengan Child (div id=”content”>).
- Begitu juga dengan <div id=”content”> disebut Parent untuk <div id=”article”> dan <div id=”sidebar”>.
- Dan hubungan antara <div id=”article”> dan <div id=”sidebar”> disebut dengan Sibling atau saudara.
Kurasa sampe disini dulu postingan kali ini, semoga bisa bermanfaat bagi kalian semua yang membacanya. Jangan lupa untuk klik tombol like dibawah, dan juga share ke teman kalian semua. Bukannya berbagi itu indah ya, hehe
Terima kasih atas kunjungannya, dan maaf bila ada salah dalam penulisan, baik itu typo atau tulisan yang kurang baik. Good Luck! Sampai jumpa di postingan selanjutnya. Salam AdityaTekno.com.
Sumber:
Buku Belajar HTML dan CSS oleh Rian Ariona
Buku Belajar HTML dan CSS oleh Rian Ariona
