Tampilkan postingan dengan label Tutorial HTML. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial HTML. Tampilkan semua postingan
Selamat Malam buat sahabat setia Kumpulan Tutorial Website sekalian, saya ingin membagikan kepada anda sebuah tutorial HTML\CSS yang tidak kalah menariknya dari postingan saya yang lain . Tutorial kali ini adalah Cara Membuat Menu Navigasi Lengkap dengan Drop Down murni dengan CSS.
Baiklah sebelumnya, saya sebagai admin mengasumsikan bahwa Anda sudah paham HTML dan CSS, dan tentu saja sudah paham menghubungkan antara HTML file dengan CSS, kalau belum saya sarankan lihat postingan saya sebelum postingan ini.
Sebelum anda meneruskan membaca tutorial ini, saya sarankan anda paham mengenai dasar-dasar HTML dan dasar-dasar CSS terlebih dahulu.
1. Membuat kode HTML
Baik , mari kita mulai dengan kode HTML nya, serhubung sekarang jamannya HTML5 maka kita akan pakai HTML5, tenang aja masih saya campur-campur dengan XHTML, nanti mengenai HTML5 akan saya bahas sendiri dilain waktu. Oke untuk strukturnya masih sama kita menggunakan tag <ul> dan <li>.
Berikut kodenya HTML nya .
Sekarang buat sebuah halaman dengan nama "Header.HTML" , lalu copy-kan seluruh code HTML ini kedalamnya .
Nah sekarang langkah selanjutnya, kita ubah list yang biasa itu menjadi menu yang menarik dengan CSS. Seperti ini kode CSS nya, langsung saya tulis semua nanti baru saya terangin:
Buat sebuah halaman dengan nama "Style.CSS" , lalu copy-kan seluruh kode CSS dibawah ini kedalamnya. .
Jika sudah , sekarang coba anda jalankan pada browser file Header.HTML tadi , lalu lihat hasilnya.
So, sekarang saya akan terangkan bagian-bagian yang terpenting, pertama adalah #nav li disini kita kasih position:relative;, kenapa? karena drop down kita #place-nav ul ul memilki position:absolute;. Sehingga kita harus mendeklarasikan kontainernya agar posisinya pas dibawah tiap menu <li>. Jika kita tidak memberi position:relative; maka browser akan menganggap kontainer nya adalah <body> sehingga drop downnya akan muncul dipojok kiri atas browser.
Berikutnya adalah #nav li:hover a loh kok bukan #nav a:hover li kenapa <li> nya yang dihover? Yap, karena drop down kita berada didalam <li> dan bukan didalam <a> maka apabila kita ingin jejaknya tetap ada ya kita hover di <li> nya. Saya tambahkan z-index:1000 buat jaga-jaga karena biasanya dibawah menu itu biasanya terdapat slideshow javascript dan kebanyakan kasus terutama IE7 posisi dropdown dibawah slideshow, karena itu saya kasih z-index yang agak tinggi biar posisi diatasnya.
Dan karena IE6 hanya kenal hover untuk tag <a> maka kalau anda masih cinta IE6 dan masih ingin mendukungnya mending ke laut aja maka gunakan csshover.htc Peter Nederlof agar bisa jalan di IE6/ .
Oke berikutnya #place-nav ul ul nah ini merupakan drop downnya, karena itu kita beri position:absolute; agar muncul tepat dibawah tiap #nav a:hover li. Jangan lupa untuk kita hilangkan dulu, karena drop downnya baru muncul kalau kita hover jadi awalnya disembunyiin dulu dengan display:none;. Kita atur posisinya agar tepat dibawah menu dengan top:35px; dan left:0;. Pastikan untuk jarak atasnya tidak ada ruang kosong 1 pixel pun karena jika ada ketika mouse kita melewati ruang kosong tersebut maka mouse kita sudah diluar <li> sehingga dropdown akan langsung hilang. Jadi pastikan nilai top lebih kecil atau sama dengan nilai height <li> diatasnya.
Berikutnya #place-nav ul ul ul ini merupakan drop down level ke 2 jadi ya sama kayak sebelumnya, tapi karena dorp down level kedua posisinya agak kekanan dari drop down level 1, maka nilai left kita perbesar tapi juga jangan ada jarak 1 pixel pun.
Ini merupakan kode css untuk memunculkan drop down dan menghilangkannya. Seperti yang Anda lihat div#place-nav li:hover ul, div#place-nav li li:hover ul ini berarti jika kita menghover <li> maka <ul> berikutnya akan muncul display:block dan <ul> dalamnya (level ke 2) tidak muncul display:none; baru ketika kita hover <li> level ke dua maka drop down level ke dua akan muncul.
Selamat mencoba, dan jangan lupa share dan komentnya yah.
Terimakasih.
Baiklah sebelumnya, saya sebagai admin mengasumsikan bahwa Anda sudah paham HTML dan CSS, dan tentu saja sudah paham menghubungkan antara HTML file dengan CSS, kalau belum saya sarankan lihat postingan saya sebelum postingan ini.
Sebelum anda meneruskan membaca tutorial ini, saya sarankan anda paham mengenai dasar-dasar HTML dan dasar-dasar CSS terlebih dahulu.
1. Membuat kode HTML
Baik , mari kita mulai dengan kode HTML nya, serhubung sekarang jamannya HTML5 maka kita akan pakai HTML5, tenang aja masih saya campur-campur dengan XHTML, nanti mengenai HTML5 akan saya bahas sendiri dilain waktu. Oke untuk strukturnya masih sama kita menggunakan tag <ul> dan <li>.
Berikut kodenya HTML nya .
Sekarang buat sebuah halaman dengan nama "Header.HTML" , lalu copy-kan seluruh code HTML ini kedalamnya .
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Drop Down Menu ala Kumpulan Tutorial Website </title>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
<head>
<body>
<div id="place-nav">
<ul id="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Social</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google</a>
<ul>
<li><a href="#">Google Wave</a></li>
<li><a href="#">Google Buzz</a></li>
<li><a href="#">Google Plus</a></li>
</ul>
</li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
</ul>
</div>
</body>
</html>
Berikut sedikit penjelasan tentang kode diatas :
Jika kita perhatikan didalam <li> Social ada menu lagi dan didalamnya lagi tepatnya didalam <li> Google ada menu lagi. Ini kita nanti akan membuat drop down menu dengan 2 level kedalaman.Nah sekarang langkah selanjutnya, kita ubah list yang biasa itu menjadi menu yang menarik dengan CSS. Seperti ini kode CSS nya, langsung saya tulis semua nanti baru saya terangin:
Buat sebuah halaman dengan nama "Style.CSS" , lalu copy-kan seluruh kode CSS dibawah ini kedalamnya. .
#place-nav {
width:960px;
height:35px;
margin:63px 0 0 0;
}
#nav {
height:35px;
}
#nav li {
height:35px;
float:left;
display:inline;
margin:0 5px;
position:relative;
font-family: Arial, verdana, serif;
z-index:1000;
}
#nav li a {
float:left;
display:inline;
height:25px;
padding:10px 8px 0 8px;
font-size:12px;
color:#9e9e9e;
font-weight:bold;
text-transform:uppercase;
text-shadow:0 0 3px #c7c7c7;
}
#nav li:hover a {
text-decoration:none;
color:#505050;
}
#place-nav ul ul {
position:absolute;
z-index:1200;
display:none;
width:186px;
margin: 0;
top: 35px;
left:0;
background:#1d87ca;
padding:0 0 2px 0;
}
#place-nav ul li ul li {
display: inline;
float: left;
width:186px;
height:auto;
border-bottom:1px solid #085d93;
float: left;
padding: 0;
position:relative;
margin:0;
}
#place-nav ul ul ul {
position:absolute;
z-index:1300;
display:none;
width:186px;
margin: 0;
top: 0;
left:183px;
background:#1c83ce;
border-left:1px solid #1479c3;
padding:0;
}
#place-nav ul li ul li ul li {
display: inline;
float: left;
padding: 0;
}
#place-nav #nav li:hover ul li a, #place-nav #nav li:hover ul li a:link, #place-nav #nav li:hover ul li a:visited {
color:#fff;
font-size:12px;
width:170px;
height:auto;
text-transform:none;
border:none;
background: none;
padding:9px 8px;
text-shadow:none;
margin:0;
font-weight:lighter;
}
#place-nav #nav li:hover ul li a:hover, #place-nav #nav li ul li a:hover {
text-decoration:none;
color:#fff;
background:#0f74bd;
}
div#place-nav li:hover ul ul,
div#place-nav li li:hover ul ul
{display:none;} div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}
width:960px;
height:35px;
margin:63px 0 0 0;
}
#nav {
height:35px;
}
#nav li {
height:35px;
float:left;
display:inline;
margin:0 5px;
position:relative;
font-family: Arial, verdana, serif;
z-index:1000;
}
#nav li a {
float:left;
display:inline;
height:25px;
padding:10px 8px 0 8px;
font-size:12px;
color:#9e9e9e;
font-weight:bold;
text-transform:uppercase;
text-shadow:0 0 3px #c7c7c7;
}
#nav li:hover a {
text-decoration:none;
color:#505050;
}
#place-nav ul ul {
position:absolute;
z-index:1200;
display:none;
width:186px;
margin: 0;
top: 35px;
left:0;
background:#1d87ca;
padding:0 0 2px 0;
}
#place-nav ul li ul li {
display: inline;
float: left;
width:186px;
height:auto;
border-bottom:1px solid #085d93;
float: left;
padding: 0;
position:relative;
margin:0;
}
#place-nav ul ul ul {
position:absolute;
z-index:1300;
display:none;
width:186px;
margin: 0;
top: 0;
left:183px;
background:#1c83ce;
border-left:1px solid #1479c3;
padding:0;
}
#place-nav ul li ul li ul li {
display: inline;
float: left;
padding: 0;
}
#place-nav #nav li:hover ul li a, #place-nav #nav li:hover ul li a:link, #place-nav #nav li:hover ul li a:visited {
color:#fff;
font-size:12px;
width:170px;
height:auto;
text-transform:none;
border:none;
background: none;
padding:9px 8px;
text-shadow:none;
margin:0;
font-weight:lighter;
}
#place-nav #nav li:hover ul li a:hover, #place-nav #nav li ul li a:hover {
text-decoration:none;
color:#fff;
background:#0f74bd;
}
div#place-nav li:hover ul ul,
div#place-nav li li:hover ul ul
{display:none;} div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}
Jika sudah , sekarang coba anda jalankan pada browser file Header.HTML tadi , lalu lihat hasilnya.
So, sekarang saya akan terangkan bagian-bagian yang terpenting, pertama adalah #nav li disini kita kasih position:relative;, kenapa? karena drop down kita #place-nav ul ul memilki position:absolute;. Sehingga kita harus mendeklarasikan kontainernya agar posisinya pas dibawah tiap menu <li>. Jika kita tidak memberi position:relative; maka browser akan menganggap kontainer nya adalah <body> sehingga drop downnya akan muncul dipojok kiri atas browser.
Berikutnya adalah #nav li:hover a loh kok bukan #nav a:hover li kenapa <li> nya yang dihover? Yap, karena drop down kita berada didalam <li> dan bukan didalam <a> maka apabila kita ingin jejaknya tetap ada ya kita hover di <li> nya. Saya tambahkan z-index:1000 buat jaga-jaga karena biasanya dibawah menu itu biasanya terdapat slideshow javascript dan kebanyakan kasus terutama IE7 posisi dropdown dibawah slideshow, karena itu saya kasih z-index yang agak tinggi biar posisi diatasnya.
Dan karena IE6 hanya kenal hover untuk tag <a> maka kalau anda masih cinta IE6 dan masih ingin mendukungnya mending ke laut aja maka gunakan csshover.htc Peter Nederlof agar bisa jalan di IE6/ .
Oke berikutnya #place-nav ul ul nah ini merupakan drop downnya, karena itu kita beri position:absolute; agar muncul tepat dibawah tiap #nav a:hover li. Jangan lupa untuk kita hilangkan dulu, karena drop downnya baru muncul kalau kita hover jadi awalnya disembunyiin dulu dengan display:none;. Kita atur posisinya agar tepat dibawah menu dengan top:35px; dan left:0;. Pastikan untuk jarak atasnya tidak ada ruang kosong 1 pixel pun karena jika ada ketika mouse kita melewati ruang kosong tersebut maka mouse kita sudah diluar <li> sehingga dropdown akan langsung hilang. Jadi pastikan nilai top lebih kecil atau sama dengan nilai height <li> diatasnya.
Berikutnya #place-nav ul ul ul ini merupakan drop down level ke 2 jadi ya sama kayak sebelumnya, tapi karena dorp down level kedua posisinya agak kekanan dari drop down level 1, maka nilai left kita perbesar tapi juga jangan ada jarak 1 pixel pun.
Nah yang terakhir dan terpenting adalah :
div#place-nav li:hover ul ul,
div#place-nav li li:hover ul ul
{display:none;}
div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}
div#place-nav li li:hover ul ul
{display:none;}
div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}
Ini merupakan kode css untuk memunculkan drop down dan menghilangkannya. Seperti yang Anda lihat div#place-nav li:hover ul, div#place-nav li li:hover ul ini berarti jika kita menghover <li> maka <ul> berikutnya akan muncul display:block dan <ul> dalamnya (level ke 2) tidak muncul display:none; baru ketika kita hover <li> level ke dua maka drop down level ke dua akan muncul.
Selamat mencoba, dan jangan lupa share dan komentnya yah.
Terimakasih.
Hai Sahabat Blog Kumpulan Tutorial Website, saat ini saya ingin berbagi tutorial html sudah lama saya miliki dan sangat berguna bagi anda yang sedang belajar dasar HTML. disini saya memberikan seluruh fungsi tag html beserta keterangan dari tag html tersebut.
Tag
|
Keterangan atau Fungsi
|
<!-- ... -->
|
Digunakan
untuk memberi sebuah komentar atau keterangan. Kalimat yang terletak pada
kontiner ini tidak akan terlihat pada browser
|
<!DOCTYPE>
|
Mendefinisikan
informasi tipe dokumen
|
<a>
|
Mendefinisikan
sebuah anchor, tetapi lebih tepat jika diartikan sebagai tautan dikarenakan
tautan ini digunakan untuk saling menautkan antara satu dokumen HTML ke
dokumen HTML yang lain
|
<abbr>
|
Digunakan
untuk menguraikan satu ungkapan yang disingkat dan Anda dapat memberikan
informasi bermanfaat kepada penelusur-penulusur page source(halaman sumber
kode) / pembaca layar, sistem terjemahan dan mesin pencari yang berasal dari
singkatan yang sudah diuraikan, tetapi saat di browser uraian tersebut tidak
akan tampil dan hanya sebagai informasi saja
|
<acronym>
|
Mendefinisikan
akronim / fungsi tag ini kurang lebih sama dengan tag <abbr>
|
<address>
|
Mendefinisikan
informasi kontak untuk penulis/pemilik dokumen
|
<applet>
|
Digunakan
untuk memasukan file java kedalam dokumen HTML
|
<area
/>
|
Mendefinisikan
daerah yang dapat diklik (link) pada peta gambar
|
<b>
|
Membuat
teks tebal
|
<base
/>
|
Mendefinisikan
URL dasar/target untuk semua URL relatif dalam dokumen
|
<basefont
/>
|
Membuat
atribut teks default, seperti warna, ukuran, jenis font untuk semua teks
dalam dokumen
|
<bdo>
|
Digunakan
untuk menimpa arah teks
|
<big>
|
Memperbesar
ukuran teks sebesar satu point dari defaultnya
|
<blink>
|
Membuat
teks berkedip
|
<blockquote>
|
Mendefinisikan
sebuah kutipan panjang. Pada saat di browser teks akan tampil menjorok
kedalam
|
<body>
|
Mendefinisikan
body/isi dokumen HTML, berfungsi untuk menentukan bagaimana isi suatu dokumen
ditampilkan di web browsernya. Isi dokumen tersebut dapat berupa teks,
gambar, animas, link dan seterusnya
|
<br
/>
|
Memberi
baris baru/pindah baris
|
<button>
|
Mendefinisikan
sebuah tombol diklik
|
<caption>
|
Membuat
caption pada tabel
|
<center>
|
Untuk
perataan tengah terhadap teks atau gambar
|
<cite>
|
Mendefinisikan
kutipan
|
<code>
|
Mendefinisikan
sebuah bagian dari kode komputer
|
<col
/>
|
Mendefinisikan
nilai atribut dari satu kolom atau lebih dalam sebuah tabel
|
<colgroup>
|
Menentukan
kelompok dari satu kolom atau lebih dalam sebuah tabel untuk performatan
|
<dd>
|
Mendefinisikan
deskripsi dari item dalam daftar definisi
|
<del>
|
Untuk
memberi garis tengah pada teks/mencoret teks
|
<dfn>
|
Mendefinisikan
sebuah istilah definisi
|
<dir>
|
Mendefinisikan
sebuah daftar direktori
|
<div>
|
Mendefinisikan
sebuah section dalam dokumen
|
<dl>
|
Mendefinisikan
sebuah daftar definisi
|
<dt>
|
Mendefinisikan
istilah (item) dalam daftar definisi
|
<em>
|
Membuat
teks miring. Fungsi tag ini sama dengan tag <i> tetapi tag <em>
yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miring
|
<embed>
|
Digunakan
untuk memasukkan file video atau file musik
|
<fieldset>
|
Untuk
mengelompokkan elemen-elemen yang terkait dalam form / membuat seperti
frame-box di dalam form
|
<font>
|
Mendefinisikan
jenis font, warna dan ukuran untuk teks
|
<form>
|
Mendefinisikan
sebuah form HTML untuk input form
|
<frame
/>
|
Mendefinisikan
frame dalam fremeset
|
<frameset>
|
Mendefinisikan
satu set frame
|
<h1>
to <h6>
|
Digunakan
untuk menunjukkan awal dari suatu header/judul dari dokumen HTML tersebut.
|
<head>
|
Digunakan
untuk memberikan informasi tentang dokumen tersebut
|
<hr
/>
|
Membuat
garis horisontal
|
<html>
|
Mendefinisikan
root dari suatu dokumen HTML
|
<i>
|
Membuat
teks miring
|
<iframe>
|
Mendefinisikan
sebuah inline frame
|
<img
/>
|
Berfungsi untuk
menampilkan gambar pada dokumen HTML
|
<input
/>
|
Mendefinisikan
input field pada form
|
<ins>
|
Membuat
teks bergaris bawah
|
<kbd>
|
Mendefinisikan
teks yang di input dari keyboard
|
<label>
|
Mendefinisikan
label untuk sebuah elemen <input>
|
<legend>
|
Mendefinisikan
sebuah caption untuk elemen <fieldset>
|
<li>
|
Digunakan
untuk menampilkan informasi dalam bentuk item daftar
|
<link
/>
|
Mendefinisikan
hubungan antara dokumen dan sumber eksternalnya
|
<listing>
|
Fungsi tag
ini sama dengan tag <pre> dan dianjurkan menggunakan tag <pre>
karena tag <listing> tidak layak/diprotes
|
<map>
|
Mendefinisikan
client-side peta gambar
|
<marquee>
|
Membuat
teks berjalan secara vertikal atau horisontal
|
<menu>
|
Mendefinisikan
sebuah daftar menu
|
<meta
/>
|
Mendefinisikan
metadata tentang sebuah dokumen HTML
|
<nobr>
|
Mencegah
ganti baris pada teks atau gambar
|
<noframes>
|
Jika
browser user tidak mendukung frame
|
<noscript>
|
Jika
browser user tidak mendukung client-side scripts
|
<object>
|
meletakkan
embed sebuah objek
|
<ol>
|
Mendefinisikan
daftar dalam format penomoran
|
<optgroup>
|
Menampilkan
beberapa pilihan yang sudah dikelompokkan dalam bentuk sebuah daftar
drop-down
|
<option>
|
Menampilkan
beberapa pilihan yang berbentuk dalam sebuah daftar drop-down
|
<p>
|
Membuat
sebuah paragraf
|
<param
/>
|
Mendefinisikan
sebuah parameter untuk objek
|
<pre>
|
Membuat
teks dengan ukuran huruf yang sama
|
<q>
|
Mendefinisikan
sebuah kutipan singkat
|
<s>
|
Untuk
memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag
<del> tetapi tag <s> tidak dianjurkan sebagai gantinya
menggunakan tag <del>
|
<samp>
|
Mendefinisikan
contoh keluaran dari program komputer
|
<script>
|
Mendefinisikan
client-side script
|
<select>
|
Membuat
daftar drop-down
|
<small>
|
Memperkecil
ukuran teks dari ukuran defaultnya
|
<span>
|
Mendefinisikan
sebuah section dalam dokumen
|
<strike>
|
Untuk
memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag
<del>
|
<strong>
|
Membuat
teks tebal, fungsi tag ini sama dengan tag <b>
|
<style>
|
Mendefinisikan
informasi
|
<sub>
|
Memberikan
efek subscript pada teks
|
<sup>
|
Memberikan
efek superscript pada teks
|
<table>
|
Membuat
tabel
|
<tbody>
|
Untuk
mengelompokkan isi body di dalam sebuah tabel
|
<td>
|
Mendefinisikan
sel di dalam sebuah tabel
|
<textarea>
|
Mendefinisikan
sebuah kontrol input multiline
|
<tfoot>
|
Untuk
mengelompokkan isi footer di dalam sebuah tabel
|
<th>
|
Mendefinisikan
sel header di dalam sebuah tabel
|
<thead>
|
Untuk
mengelompokkan isi header di dalam sebuah tabel
|
<title>
|
Membuat
judul untuk dokumen HTML
|
<tr>
|
Membuat
baris di dalam sebuah tabel
|
<tt>
|
Mendefinisikan
teletype text
|
<u>
|
Membuat
teks bergaris bawah, fungsi tag ini sama dengan tag <ins> tetapi tag <u>
tidak dianjurkan untuk kategori HTML text formatting melainkan termasuk
kategori HTML Style
|
<ul>
|
Mendefinisikan
daftar dalam format bullet
|
<var>
|
Mendefinisikan
sebuah variabel
|
<xmp>
|
Mendefinisikan
preformatted text, fungsi tag ini sama dengan tag <pre>
|
Saya harap tutorial Fungsi tag HTML ini dapat berguna bagi ada. Tutorial HTML ini dapat anda print dengan memanfaatkan fasilitas print yang saya sediakan dibawah ini. Jika ada kurang lebihnya saya minta maaf. Selamat belajar bagi para generasi muda yang berbakat. Terimakasih.
