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.
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.
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
Sekolah SMAN
Selamat datang di Sekolah SMAN!
Website kami menyediakan informasi tentang program studi yang ditawarkan oleh Sekolah SMAN. Silakan jelajahi halaman kami untuk mengetahui lebih lanjut.
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 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