Membuat Event Click Pada Menu Navigasi

Langkah selanjutnya, kita akan menampilkan menu saat tombol navigasi diklik.

Agar tombol navigasi bisa menampilkan menu saat di klik, kita harus membuat event dengan javascript.

Kita akan membuat event click() pada tombol menu, script nya bisa kita tulis pada file index.html di atas tag .

Selamat Datang di Website Saya!

Ini adalah contoh halaman web.

Dalam contoh di atas, kita memiliki tag sebagai elemen utama. Di dalamnya, terdapat tag yang berisi informasi tentang halaman web, seperti judul halaman, file CSS eksternal, dan file JavaScript eksternal. Bagian utama dari halaman web ditempatkan di dalam tag .

Update pada kelas (Changelog)

Mempersiapkan Lingkungan Kerja

Langkah pertama adalah mempersiapkan lingkungan kerja Anda. Anda membutuhkan teks editor yang memungkinkan Anda menulis dan mengedit kode HTML, CSS, dan JavaScript. Beberapa pilihan teks editor populer termasuk Visual Studio Code, Sublime Text, dan Atom. Pilihlah yang paling sesuai dengan preferensi Anda.

Daftar Materi Belajar HTML:

Lihat Semua materi belajar html diatas, untuk menguasai HTML dengan Cepat!

Menyukai Kucing, Terkadang ngopi dikala Hujan, Menyukai Blog dan Website. Sekarang berfokus kepada SEO.

Membuat website dengan HTML dan hias dengan CSS. Miliki kedua kekuatan ini, kamu akan bisa membuat berbagai macam website!

HTML adalah teknologi yang digunakan untuk membuat struktur dasar website, seperti menampilkan text, gambar, video dan lainnya.

CSS adalah teknologi yang digunakan untuk menghias halaman HTML alias menghias website kamu.

Contoh Kode atau Coding HTML Website Sekolah

Buka Text Editor kamu, Setelah dibuka kita membuat folder. Kamu dapat menyimpan folder di Documents atau ditempat lain. Kita akan membuat dua buah file. Yaitu index.html dan style.css.

Baca Juga : Cara Menghubungkan HTML dan CSS

body {font-family: Arial, sans-serif;margin: 0;padding: 0;}header {background-color: #333;color: #fff;padding: 20px;text-align: center;}nav {background-color: #555;color: #fff;padding: 10px;}nav ul {list-style-type: none;margin: 0;padding: 0;}nav ul li {display: inline;margin-right: 10px;}nav ul li a {color: #fff;text-decoration: none;}main {padding: 20px;}footer {background-color: #333;color: #fff;padding: 10px;text-align: center;}

Luar Biasa! ini adalah hasilnya. Disini temen-temen bisa mengembangkan website nya agar lebih menawan lagi. Demikian tutorial Contoh Coding Website Sekolah HTML dan CSS.

Lihat artikel HTML dan CSS dari alafgani.web.id yang akan dapat menambah ilmu tentang HTM.

Membuat Navbar Responsive Dengan Media Query

Langkah selanjutnya kita akan masuk ke proses membuat menu navbar yang responsive.

Sehingga saat dibuka dari perangkat smartphone atau tablet, tampilan navbar kita akan otomatis menyesuaikan desainnya.

Untuk membuat halaman website yang responsive, kita akan sering menggunakan sebuah aturan pada CSS. yaitu @media.

Media query merupakan teknik CSS terbaru yang hadir pada CSS3.

@media adalah aturan dalam CSS yang digunakan untuk membuat gaya tertentu yang hanya berlaku saat diakses dari ukuran layar tertentu juga.

Misal, kita bisa membuat script CSS tertentu yang hanya dijalankan saat halaman website diakses dari ukuran layar laptop, dan juga bisa mengatur suatu script CSS tersebut hanya dijalankan saat diakses dari ukuran layar lain seperti smartphone atau tablet.

Misalnya lagi, kita mau jika warna background website berwarna merah saat diakses dari laptop, dan background nya berubah menjadi kuning jika diakses dari smartphone.

Begitulah kira-kira kegunaan aturan @media di CSS ini.

Jadi bisa mempermudah kita jika kita mau mengatur letak, warna, ukuran font dan desain lainnya saat diakses di berbagai resolusi layar dan perangkat.

Tambahkan script CSS berikut ini pada file style.css.

@media screen and (max-width: 768px) {

display:inline-block;

display: inline-block !important;

Tampilan navbar menjadi lebih rapi karena kita membuat penyesuaian CSS dengan script @media screen and (max-width: 768px) di atas.

Perhatikan pada aturan @media tadi.

Artinya jika halaman website diakses dari layar yang memiliki lebar maksimal 768px, maka :

Maka jadilah tampilan seperti di atas. navbar menjadi lebih ringkas dan rapi.

Coding CSS lainnya yang di atas akan kita bahas juga menurut alur panduan ini, agar lebih mudah dipahami.

Pentingnya Tampilan Website Yang Responsive

Website yang responsive bertujuan untuk memberikan pengalaman dan kenyamanan untuk pengguna saat mengakses website kita.

Setelah memahami sedikit penjelasan tentang apa itu makna responsive dan manfaatnya, kita akan mulai dengan materi cara membuat menu navigasi atau navbar yang responsive dengan HTML dan CSS.

Cara Membuat Website dengan HTML, CSS, dan JavaScript: Panduan Lengkap untuk Pemula

Sahabat Hostnic! Apa kabar sahabat semua? Semoga sehat selalu. Pada kesempatan ini, kita akan membahas cara membuat website dengan menggunakan HTML, CSS, dan JavaScript. Jika Anda adalah seorang pemula yang ingin mempelajari dasar-dasar pembuatan website, artikel ini akan memberikan panduan lengkap untuk memulai. Mari kita mulai pembahasan lengkapnya.