Membuat Navbar Dan Elemen List Pada HTML

2022
NAVBAR DAN
FOOTER PADA HTML
ALFITRIATUS SULUS, S.PD | INFORMATIKA – XII MIPA
MEMBUAT NAVBAR PADA HTML
HTML memiliki beberapa element, salah satunya yaitu <nav>. Nav adalah element pada HTML yang
dibuat untuk mempresentasikan link navigasi. Bisa dibilang, nav adalah wadah dari link yang akan
men direct kita ke halaman lain. Tetapi link yang berada pada element <nav> biasanya adalah link
major yang merujuk kepada halaman lain pada website kita. Misalkan menunjukan link halaman
utama,gallery dll.
Berikut adalah contoh sederhana penulisan kode HTML untuk navigation bar.
<pre>
<nav>
<a href="/home/">Halaman Utama</a> |
<a href="/gallery/">Gallery</a> |
<a href="/contact/">Contact Us</a> |
</nav>
</pre>
Berikut adalah contoh lain dari pembuatan nav pada HTML:

<html>
<head>
<title>Contoh</title>
</head>
<body>
<nav>
<a href="/home/">Halaman Utama</a> |
<a href="/gallery/">Gallery</a> |
<a href="/contact/">Contact Us</a> |
</nav>
<h1>Ini Body</h1>
Teks ini berisi konten artikel
<footer>
<center>
Ini footer
</center>
</footer>
</body>
</html>
1
FOOTER PADA HTML
HTML <footer> element merepresentasikan sebuah catatan kaki (bagian kaki / footer) untuk
elemen yang menaunginya (berada di dalamnya), seperti catatan kaki pada sebuah <article>
element, <section> element, catatan kaki untuk induk dokumen (<body> element) dan lain
sebagainya.
Di dalam <footer> element, dapat ditulis konten yang berkaitan dengan informasi mengenai
penulis artikel atau dokumen, lisensi atau hak cipta tulisan dan beberapa link yang berkaitan
dengan dokumen tersebut.
<footer> tidak boleh ditulis di dalam <address>, <header> dan <footer> element lainnya
(bertumpuk / nested).
<footer> element tidak digunakan untuk mengelompokkan konten (sectioning content) dan ia
tidak menunjukkan bagian baru (new section).
Contoh HTML <footer> element

Contoh 1
Contoh <footer> yang berisi deretan link yang biasanya terletak dibawah halaman.
<footer>
<ul>
<li><a href="contact.html">Kontak</a></li>
<li><a href="about.html">Mengenai</a></li>
<li><a href="copyright.html">Copyright</a></li>
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="sitemap.xml">Sitemap</a></li>
</ul>
</footer>
Contoh 2
Contoh <footer> yang didalamnya terdapat <address> element. Contoh ini, biasanya ditulis
didalam <article> element yang menginformasikan mengenai penulis artikel tersebut.
2
Elemen List di HTML
HTML sudah menyediakan elemen untuk membuat list. Ada tiga macam jenis list yang bisa
dibuat di HTML:
1. Ordered List adalah list yang terurut;

2. Unordered List adalah list yang tak terurut;
3. dan Descriptiona List adalah list yang berisi definisi.
1. Ordered List di HTML
Ordered list dibuat dengan tag <ol>. Lalu di dalamnya diisi dengan item-item yang akan
dimasukkan ke dalam list. Item dibuat dengan tag <li> (list item).
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Ordered List</title>
</head>
<body>
<h1>Buah Favoritku:</h1>
<ol>
<li>Jeruk</li>
<li>Durian</li>
<li>Pisang</li>
<li>Pepaya</li>
<li>Mangga</li>
</ol>
</body>
</html>
3
Hasilnya:
List diatas diurutkan berdasarkan angka dari 1, 2, 3, sampai 5.
Lalu bagaimana kalau kita ingin menggunakan huruf seperti a, b, c atau angka romawi seperti
I, II, III?
Gampang..
Untuk membuat yang seperti itu, kita bisa menggunakan atribut type pada tag ol dan berikut
ini nilai yang bisa diberikan:
• a untuk alfabet a, b, c, dan seterusnya;

• A untuk alfabet A, B, C, dan seterusnya;
• i untuk angka romwari i, ii, iii, dan seterusnya;
• I untuk angka romwari I, II, III, dan seterusnya.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Ordered List dengan Atribut Type</title>
</head>
<body>
<h3>List dengan type alfabet</h3>
<ol type='a'>
<li>Tutorial List di HTML</li>
<li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li>
</ol>
<h3>List dengan type alfabet kapital (huruf besar)</h3>
<ol type='A'>
4
</ol>
<h3>List dengan type romawi</h3>
<ol type='i'>
</ol>
<h3>List dengan type romawi kapital</h3>
<ol type='I'>
</ol>
</body>
</html>
Hasilnya:
2.Unordered List di HTML
Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol pada item-nya.
Unordered list dibuat dengan tag <ul> dan untuk item-nya dibuat juga dengan tag <li>.
5
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Unordered List</title>
</head>
<body>
<h1>Bahasa Pemrograman untuk dipelajari:</h1>
<ul>
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Kotlin</li>
</ul>
</body>
</html>
6
Hasilnya:
Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc). Kita
juga bisa menggantinya dengan atribut type.
Berikut ini nilai yang bisa diberikan untuk atribut type:
• square untuk simbol persegi;

• disc (default) untuk simbol lingkaran disc;
• none tidak memakai simbol;
• circle untuk simbol lingkaran;
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<ul type="square">
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Kotlin</li>
</ul>
<h1>Framework untuk dipelajari:</h1>
<ul type="circle">
<li>Vuejs</li>
<li>Svelte</li>
<li>Reactjs</li>
</ul>
7
<h1>Tools untuk dipelajari:</h1>
<ul type="none">
<li>Gulp</li>
<li>NPM</li>
<li>Js Lint</li>
</ul>
<h1>Pelajari juga:</h1>
<ul type="disc">
<li>JSON</li>
<li>XML</li>
<li>Markdown</li>
</ul>
</body>
</html>
Hasilnya:
Selain menggunakan type, kita juga bisa menggunakan gambar.
Ini dilakukan dengan style CSS.
8
Contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<ul style="list-style-image:
url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico)">
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Kotlin</li>
</ul>
</body>
</html>
Hasilnya:
3. Description List di HTML
Description List adalah list yang berisi deksripsi atau penjelasan dari sesuatu.
Ada tiga tag yang digunakan untuk membuat description list:
• <dl> (description list) tag untuk memulai description list;

• <dt> (description term) tag untuk membuat kata yang akan dideskripsikan;
9
• <dd> (description description) tag untuk membuat penjelasan dari kata.
Format penulisannya seperti ini:
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Description List</title>
</head>
<body>
<h1>Daftar istilah:</h1>
<dl>
<dt>Kopi</dt>
<dd>Sebuah minuman berwarna hitam. Menurut pendapat lain kopi
adalah air yang dimasak sampai gosong.</dd>
<dt>Kopi Black Magic</dt>
<dd>Kopi hitam atau kopi tradisional yang dibuat dengan mantra-
mantra.</dd>
<dt>White Coffee</dt>
<dd>Kopi berwarna putih, kandungan kafeinnya sedikit.</dd>
<dt>Kopi++</dt>
<dd>Kopi ini mampu meningkatkan imajinasi 99 kali lipat.</dd>
</dl>
</body>
</html>
Hasilnya:
10
List di dalam List (Nested List)
List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list dengan
unordered list.
Caranya, list yang di dalam ditulis di dalam tag <li>.
Contoh:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>List di dalam List</title>
</head>
<body>
<h1>Distro Linux dan Keluarganya</h1>
<ol>
<li>Debian
<ul>
<li>Ubuntu</li>
<li>Mint</li>
<li>elementaryOS</li>
</ul>
</li>
<li>RedHat
<ul>
<li>Fedora</li>
</ul>
</li>
<li>Slackware</li>
</ol>
</body>
11
</html>
Hasilnya:
12

Membuat Navbar Dan Elemen List Pada HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Navbar Dan Elemen List Pada HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

2022

Berikut adalah contoh lain dari pembuatan nav pada HTML:

Teks ini berisi konten artikel

Contoh HTML <footer> element

1. Ordered List adalah list yang terurut;

1. Ordered List di HTML

List diatas diurutkan berdasarkan angka dari 1, 2, 3, sampai 5.

• a untuk alfabet a, b, c, dan seterusnya;

2.Unordered List di HTML

Berikut ini nilai yang bisa diberikan untuk atribut type:

• square untuk simbol persegi;

Selain menggunakan type, kita juga bisa menggunakan gambar.

Ini dilakukan dengan style CSS.

3. Description List di HTML

Ada tiga tag yang digunakan untuk membuat description list:

• <dl> (description list) tag untuk memulai description list;

Format penulisannya seperti ini:

Caranya, list yang di dalam ditulis di dalam tag <li>.

Anda mungkin juga menyukai