Chat Box

Friday, 7 December 2012

Konsep dasar navigasi website

Tinggalkan Komentar

Ass Wr wb.....
kalian tau apa itu navigasi ? navigasi adalah objek yang di gunakan pengunjung untuk menjelajahi situs web kita, simplenya kaya gitu :) atau biasa di kenal dengan menu. navigasi. Langsung aja ga usah panjang lebar cape buat artikelnya :D . Untuk dapat memahami pembuatan sebuah navigasi dalam sebuah website, kita harus sudah paham dengan tag dasar HTML seperti tag <a> <ul> <li> dan paham tentang apa itu link, kalo belom tau apa-apa monggo mampir kemari tempat belajar bahasa pemrograman dari paling gampang sampe yang bikin otak ngebul ada di sini w3schools .

Untuk struktur dasar membuat menu navigasi scriptnya seperti ini :
<ul><li> <a>Menu1</a> </ li> 
<li> <a>Menu2</a> </ li> 
<li> <a>Menu3</a> </ li> 
<li> <a>Menu4</a> </ li> 
</ ul>
Apa itu tag ul , li dan a ? simpelnya dalem membuat menu navigasi kita tidak di tuntut untuk membuat sebuah urutan menu yang terstruktur, maksudnya menu tersebut bisa kita atur sesuai dengan keinginan kita , berbeda dengan tata cara untuk menjalankan motor kita di tuntut untuk mengikuti aturan yang terstruktur mulai dari memutar kunci ke posisi on lalu menghidupkan motor dengan cara menekan starter pada panel kendali lalu memasukan gigi dan tarik gas secara perlahan sehingga motor dapat di jalankan. Nah itu tatacara yang terstruktur jika saya formating ke dalam HTML akan menjadi'
<ol>
<li><a>Memutar kunci ke posisi on</a></li>
<li><a>Menghidupkan motor dengan cara menekan starter pada panel kendali</a></li>
<li><a>Memasukan gigi</a></li>
<li><a>Tarik gas secara perlahan sehingga motor dapat di jalankan</a></li>
</ol>
Perhatikan baik-baik markup untuk membuat sebuah menu navigasi dan markup untuk menjalankan sebuah motor, apa perbedaanya ? ternyata ada pada pembungkus tag <li> dan <a> apa hayo ? iya benar! ternyata yang membedakan adalah tag <ul> dan <ol> . Singkatnya OL (Ordered List) di gunakan untuk membuat sebuah markup yang terstruktur maksudnya markup yang di buat tersusun berdasarkan urutan angka, berbeda dengan tag UL (UNORDERED LIST) di gunakan untuk membuat sebuah markup yang tidak terstruktur atau menggunakan lambang bullet . silahkan di cek di text editor anda :D. Lalu apa hubunganya dengan tag <li> dan <a> ? oke gw bahas sedetail mungkin :)
Tag LI (List Item) di gunakan untuk membuat sebuah daftar barang atau sejenisnya, dan tag A (Anchor) di gunakan untuk membuat sebuah link (Penghubung) . Logikanya seperti berikut :
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Profile.html">Profile</a></li>
<li><a href="Gallery.html">Gallery</a></li>
<li><a href="Contact.html">Contact</a></li>
<ul>
Ketika menu Home gw klik, maka gw bakal di hubungin ke file index.html begitupun ketika gw klik menu Profile gw bakal di arahin ke file Profile.html dan seterusnya. Nah di situ saya tambahkan tag Href <a href"#">Isimenu</a>. Apa fungsi dari tag Href ? Href (Hyperlink Refrence) merupakan tag yang di gunakan untuk menghubungkan kesuatu file yang mengakibatkan terjadinya proses loading page yang dituju seperti kasus diatas yang udah gw jelasin :D. Kalo hanya membuat markupnya seperti ini bisa tidak ?
<ul><li> <a="index.html">Home</a> </ li> 
</ul
Jelas tidak bisa, ketika kita klik menu Home maka tidak akan melakukan fungsi apapun terhadan menu Home walaupun menu Home sudah menjadi Link, karena tag <a href> adalah satu kesatuan yang sangat membutuhkan :D, oiya kenapasih mesti pake tanda kutip 2 ? <li> <a="index.html">Home</a> </ li> *perhatikan teks yang di blok merah*. Karekter kutip dua tidak harus sama dengan marukup saya contohkan, hanya saja ketika kita menggunakan contoh kutip satu maka di akhirnya pun kutip satu seperti berikut :
<ul><li> <a href='index.html'>Home</a> </ li> 
</ul
Jadi untuk membuat sebuah menu navigasi dalam sebuah web di perlukan markup yang kompleks agar hasil yang kita buat dapat menjadikan pengnjung betah berlama-lama mengitari halaman web kita seutuhnya :D . segitu ajah ya hehe cape ngetik panjang lebar dan ingat ini artikel ORIGINAL saya yang buat so *Saling menghargai antar bloger itu baik, sertakan sumber ketika ingin mengcopas artikel saya. Terimakasih :)

Saling MENGHARGAI antar "Bloger" itu penting, sertakan sumber ketika ingin mengcopas artikel saya. Terimakasih

0 comments:

Post a Comment

Konsep dasar navigasi websiteOops ! | Error 404 To Top Submit ExpressSEO Services & Tools