√ Belajar Membuat Heading, List, dan Memahami Tag Div - AdityaTekno

Social Items

heading+list+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.


Contohnya apabila anda ingin membuat judul utama menggunakan <h1> kemudian langsung menggunakan tag <h4> sebagai sub judulnya, itu sangat tidak dianjurkan untuk membuat web yang SEO. Dan jangan lupa, disetiap tag heading harus ditutup dengan tag penutupnya seperti <h1>…</h1>.

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>

Berikut adalah hasil tampilan dari kode diatas di web browser:

tampilan+heading
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>

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.
  • 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>

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:


orfered+list
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:


<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>

Berikut adalah hasil tampilan dari kode diatas di web browser:

contoh+unordered+list
Tampilan Script Unordered List

Secara default, tem akan ditandai dengan lingkaran.

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>

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>

Jika kode diatas ditampilkan pada browser, maka tampilannya akan seperti berikut:

contoh+definition+list
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:

<!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>

Dan berikut adalah tampilan pada browser:

list+daftar+bersarang
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:


1. Header

Bagian kepala website yang berisi logo website, nama website, slogan website, menu website dan lain sebagainya.

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.


<div id=”header”>
</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? 

Bagi seorang pemula, termasuk saya sendiri ketika masih belajar HTML dan CSS pasti menanyakan hal yang sama. Pasalnya atribut ID dan Class digunakan untuk menamai tag HTML. Lalu apa perbedaan dari keduanya?

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>

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>

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

Ketika suatu tag memiliki tag/konten didalamnya maka hubungan antar tag-tag tersebut disebut dengan child-parent dan sibling. Perhatikan contoh berikut:

<div id=”wrapper”>
<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

Belajar Membuat Heading, List, dan Memahami Tag Div

heading+list+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.


Contohnya apabila anda ingin membuat judul utama menggunakan <h1> kemudian langsung menggunakan tag <h4> sebagai sub judulnya, itu sangat tidak dianjurkan untuk membuat web yang SEO. Dan jangan lupa, disetiap tag heading harus ditutup dengan tag penutupnya seperti <h1>…</h1>.

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>

Berikut adalah hasil tampilan dari kode diatas di web browser:

tampilan+heading
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>

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.
  • 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>

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:


orfered+list
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:


<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>

Berikut adalah hasil tampilan dari kode diatas di web browser:

contoh+unordered+list
Tampilan Script Unordered List

Secara default, tem akan ditandai dengan lingkaran.

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>

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>

Jika kode diatas ditampilkan pada browser, maka tampilannya akan seperti berikut:

contoh+definition+list
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:

<!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>

Dan berikut adalah tampilan pada browser:

list+daftar+bersarang
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:


1. Header

Bagian kepala website yang berisi logo website, nama website, slogan website, menu website dan lain sebagainya.

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.


<div id=”header”>
</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? 

Bagi seorang pemula, termasuk saya sendiri ketika masih belajar HTML dan CSS pasti menanyakan hal yang sama. Pasalnya atribut ID dan Class digunakan untuk menamai tag HTML. Lalu apa perbedaan dari keduanya?

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>

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>

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

Ketika suatu tag memiliki tag/konten didalamnya maka hubungan antar tag-tag tersebut disebut dengan child-parent dan sibling. Perhatikan contoh berikut:

<div id=”wrapper”>
<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
Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo