Mengatur Tampilan dengan CSS
Setelah membuat struktur HTML dasar, saatnya mengatur tampilan halaman web dengan CSS. Buatlah file baru dengan ekstensi “.css” dan sertakan file tersebut di dalam tag
pada file HTML. Contoh kode CSS berikut menunjukkan cara mengubah warna latar belakang dan teks pada elemen:
/* style.css */ h1 { background-color: #f2f2f2; color: #333333; }
Dalam contoh di atas, kita menggunakan selector “h1” untuk memilih elemen
dan memberikan properti CSS, seperti warna latar belakang dan warna teks. Anda dapat mengatur tampilan elemen-elemen lain pada halaman web sesuai kebutuhan Anda.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.
Desain Tampilan Navbar Dengan CSS
Silahkan teman-teman buka file style.css dan tulis atau copas script berikut.
font-family: Arial, sans-serif;
text-decoration: none;
justify-content: space-between;
text-decoration: none;
display: inline-block;
Perhatikan pada script CSS di atas.
Script CSS yang kita gunakan di atas pasti tidak asing lagi bagi teman-teman. karena sudah pernah dibahas di malasngoding.com.
Baca juga : Tutorial CSS dasar untuk pemula
Kamu bisa fokus pada class .menu. di sini kita menggunakan display: flex; agar tampilan dari logo/judul website, menu navigasi dan tombol responsive nya terletak sejajar bersampingan.
Tapi secara default, tombol responsive (.tombol) kita sembunyikan dengan perintah display: none;.
Karena kita akan menampilkan tombol responsive (.tombol) hanya saat website diakses dari ukuran layar yang kecil nantinya.
Lihat hasil menu navbar kita.
Sampai di sini, kita sudah berhasil membuat navbar, tapi belum responsive.
Pengertian Website Responsive
Website responsive adalah website yang memiliki kemampuan untuk menyesuaikan tampilannya secara otomatis dengan layar perangkat pengguna.
Tampilan akan disajikan sesuai dengan ukuran layar perangkat yang digunakan oleh pengguna.
Seorang ahli desain web yaitu Ethan Marcotte mengakui betapa pentingnya website responsive. Om Ethan Marcotte adalah seorang Web Designer yang terkenal karena telah memperkenalkan konsep desain responsive pada tahun 2010 melalui tulisannya yang berjudul “Responsive Web Design” di situs A List Apart.
Karena kontribusi dan edukasi yang diberikan oleh om Ethan ini, dia dianggap sebagai salah satu pakar terkemuka di bidang website design.
Pengenalan HTML, CSS, dan JavaScript
HTML, CSS, dan JavaScript adalah tiga teknologi utama yang digunakan dalam pembuatan website. HTML (HyperText Markup Language) digunakan untuk membuat struktur dan konten dasar dari sebuah halaman web. CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan dan tata letak elemen-elemen dalam halaman web. Sedangkan JavaScript digunakan untuk memberikan interaksi dan fungsionalitas dinamis pada halaman web.
Dengan menguasai ketiga teknologi ini, Anda dapat membuat website yang menarik dan interaktif. Berikut adalah langkah-langkah untuk memulai:
Di tutorial ini teman-teman akan belajar membuat navbar responsive dengan HTML dan CSS.
Dengan penggunaan website yang berkembang pesat saat ini, kita wajib memastikan website yang kita buat memiliki desain web yang menarik.
Tapi bukan hanya desain tampilannya saja yang harus kita perhatikan, kita juga harus memastikan bahwa website kita dapat diakses dari berbagai perangkat dengan baik.
Salah satu komponen yang terpenting adalah dengan membuat navbar yang responsive.
Navbar atau menu navigasi pada website kita harus responsive saat diakses menggunakan berbagai perangkat.
Dalam tutorial ini, kamu akan diajarkan langkah-langkah untuk membuat navbar responsive menggunakan HTML dan CSS.
Membuat Navbar Responsive dengan HTML dan CSS
Untuk mengikuti panduan cara membuat navbar responsive dengan HTML dan CSS ini, silahkan teman-teman sediakan sebuah file HTML dan file CSS.
Siapkan file HTML tempat kita akan membuat navbar responsive.
Di sini saya menyiapkan 2 buah file, yaitu :
Menambahkan Interaksi dengan JavaScript
Terakhir, Anda dapat menambahkan interaksi dan fungsionalitas dinamis pada halaman web menggunakan JavaScript. Buatlah file baru dengan ekstensi “.js” dan sertakan file tersebut di dalam tag
atau pada file HTML. Contoh kode JavaScript berikut menunjukkan cara mengubah teks pada elemensecara dinamis:
// script.js var paragraph = document.querySelector("p"); paragraph.textContent = "Teks inidiubah menggunakan JavaScript!";
Dalam contoh di atas, kita menggunakan metode querySelector untuk memilih elemen
dan kemudian mengubah kontennya menggunakan properti textContent. Anda dapat menambahkan lebih banyak interaksi dan fungsionalitas sesuai kebutuhan Anda.
“Website adalah jendela virtual yang membuka peluang tak terbatas untuk mengekspresikan kreativitas dan berbagi informasi.”
Sampai jumpa kembali di artikel menarik lainnya. Semoga panduan lengkap ini membantu Anda memulai perjalanan dalam pembuatan website dengan menggunakan HTML, CSS, dan JavaScript. Jangan ragu untuk terus belajar dan mengeksplorasi kemampuan baru. Selamat mencoba!
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.
Membuat Kerangka Navbar Dengan HTML
Yuk mari kita buat struktur kerangka HTML dan struktur menu navigasi atau navbar nya.
Panduan Membuat Navbar Responsive dari www.malasngoding.com
Perhatikan pada file index.html di atas.
Dalam file index.html ini kita membuat kerangka struktur HTML, kemudian kita juga membuat struktur menu navbar dengan element .
Untuk membuat navbar atau menu navigasi, kita bisa membuatnya dengan elemen list HTML.
Pada menu navbar ini kita membuat beberapa komponen, diantaranya :
Kita sudah pernah membahas tentang karakter simbol pada HTML di tutorial sebelumnya, silahkan baca kembali tutorial membuat simbol pada HTML.
Oke, jalankan file index.html, maka hasilnya akan tampil element list HTML seperti berikut.
Tampilan masih polos karena kita belum mendesainnya.
Proses desain akan kita lakukan dengan cara memberikan sentuhan CSS pada file style.css.
