Membuat navbar dengan Html dan Css

membuat navbar dengan html dan css
hallo semunya kali ini saya akan membagikan sebuah toturial pemrograman website menggunakan HTML dan CSS, tutorial yang dibahas kali ini adalah tentang membuat navbar dengan html dan css. tentunya teman harus mengerti dahulu konsep dari html sendiri. untuk mengetahui konsep html silahkan baca di link di bawah ini:

pengertian html dan elementnya

HTML sendiri memiliki banyak element, salah satunya yaitu <nav>. Nav merupakan sebuah element yang ada di HTML yang dibuat untuk mempresentasikan atau mendefenisikan sebuah 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,profil,kontak,dll.
untuk melakukan pengcodingan HTML tentunya kita memerlukan sebuah tools yang disebut sebagai text editor. text editor sendiri banyak jenis nya misalkan notepad,notepad++,sublime text,dll. untuk text editor teman-teman tentukan susuai dengan kemauan sendiri.

proses pembuatan menu navigasi

untuk melakukan pembuatan menu navigasi yang pertama kita lakukan adalah mebuat sebuah file html dengan text editor yang kita gunakan, untuk penamaan file html sendiri terserah kalian tetapi harus di akhiri dengan .(dot)html, sebagai contoh saya memberi nama file html dengan menu.html untuk menyesuaikan dengan topik kita tentang membuat menu navigasi. berikut script sederhana untuk membuat navigation bar.
sampai disini kita sudah bisa membuat sebuah navigasi sederhana.

Menambahkan style nevbar dengan css

setelah kita berhasil membuat navbar sederhana, kita juga bisa menambahkan style navigasi bar kita dengan css agar tampilannya lebih menarik lagi. Sebelum itu ada baiknya mengetahui apa itu CSS dan bagimana penggunaannya sliahkan baca di bawah ini untuk penjelasannya.

Pengertian CSS dan Cara Penggunaannya

berikut hasil kombinasi nav ditambah dengan style css.
menambahkan css pada navigation bar
untuk membuat navbar seperti gambar diatas cara nya adalah ketikan contoh script yang ada di bawah ini.

Penjelasan

pada bagian ini kita menentukan tinggi dari menu navigasi kita sebesar 50px; dan memberikan background warna hitam.selanjut nya di bagian ini kita memberikan styel menu kita dengan warna putih pada tag <a> dan membuat tulisan menjadi di tengan beserta membuat pading 15px untuk top dan bottom dan 16 px untuk left dan right, dan menghilangkan garis bawah pada tag<a>.dan yang terakhir pada bagin ini adalah menambahkan style hover atau ketika mouse kita berada pada salah satu menu bar kita maka akan background akan berubah menjadi warna hitam gelap.
Demikianlah tutorial membuat navbar dengan html dan css semoga bermanfaat buat teman-teman sekalian, happy coding!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *