Dasar Html Dan Css Pdf
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.
Apa manfaat HTML dan CSS
Dengan menguasai HTML dan CSS, kamu akan bisa membuat berbagai macam layout website sesuai kebutuhan pekerjaan atau klien kamu.
Istilah "slicing" adalah mengubah desain yang kamu atau tim designer buat dan menjadikannya kode (HTML dan CSS) sehingga ia bukan lagi sekedar desain, tapi sebuah website yang bisa digunakan oleh banyak orang.
Kamu juga akan membuka pintu pekerjaan yang bernama "front end developer". Sebelum nanti lanjut mempelajari Javascript.
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.
Download Template HTML dan CSS Bootstrap
Dalam panduan cara membuat website dengan html ini kita akan menggunakan salah satu template dari Start Bootstrap. Tenang, template yang digunakan gratis dan mudah untuk dioptimalkan serta dirancang dengan sangat baik.
Yuk kita download terlebih dahulu templatenya.
Langkah 1: Buka website startbootstrap.com untuk mendapatkan template html dan css Start Bootstrap secara gratis dan bebas digunakan.
Langkah 2: Klik Browse Template & Themes.
Langkah 3: Pilih salah satu template sesuai kebutuhan Anda, dalam demo ini kami memilih template Creative karena gratis dan cukup simple jika dilihat dari tampilan yang ada.
Langkah 4: Kemudian klik Free Download dan simpan filenya di lokasi yang mudah ditemukan.
Langkah 5: Setelah selesai di download, buka file tersebut dan pindahkan isinya ke direktori utama akun hosting website Anda. Sebagai permulaan, Anda bisa menggunakan web hosting murah untuk percobaan menerapkan cara membuat website dengan html ini.
Langkah 6: Setelah selesai dipindahkan, buka file tersebut. Caranya klik dua kali di file Index.html dan nantinya akan terbuka di browser chrome yang Anda gunakan.
Selanjutnya kita lanjutkan ke pembahasan selanjutnya.
Membuat Struktur HTML Dasar
Setelah memiliki teks editor, buatlah file HTML baru dengan ekstensi “.html”. Dalam file HTML, Anda perlu menuliskan struktur dasar sebuah halaman web. Berikut contoh struktur dasar HTML:
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 .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.
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 .