Studi Kasus W3.CSS
Membangun Situs Web Responsif Dari Awal
Dalam bab ini kita akan membangun situs web responsif W3.CSS dari awal.
Pertama, mulai dengan halaman HTML sederhana, dengan viewport awal dan link ke W3.CSS.
Contoh
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<h1>My first W3.CSS website!</h1>
<p>This site
will grow as we add more ...</p>
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Masukkan Elemen ke dalam Wadah
Untuk menambahkan margin dan padding umum, letakkan elemen HTML di dalam container (<div class="w3-container">)
Pisahkan header dari konten lainnya, menggunakan dua elemen <div> terpisah:
Contoh
<div class="w3-container">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Kelas Warna
Kelas warna mendefinisikan warna elemen.
Contoh ini menambahkan warna ke elemen <div> pertama:
Contoh
<div class="w3-container w3-light-grey">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Kelas Ukuran
Kelas ukuran menentukan ukuran teks untuk elemen.
Contoh ini menambahkan ukuran ke kedua elemen header:
Contoh
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Gunakan Elemen Semantik
Jika Anda ingin mengikuti rekomendasi semantik HTML5. silakan lakukan!
Tidak masalah untuk W3.CSS jika Anda menggunakan <div> atau <header>.
Contoh
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<header class="w3-container
w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</header>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer
class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html>
Tata Letak Responsif Multikolom
Dengan W3.CSS, mudah untuk membuat tata letak responsif multikolom.
Kolom akan mengatur ulang sendiri secara otomatis ketika dilihat pada ukuran layar yang berbeda.
Beberapa aturan kisi:
- Mulai dengan kelas baris <div class="w3-row-padding">
- Gunakan kelas yang telah ditentukan sebelumnya seperti "w3-third" untuk membuat kolom kisi dengan cepat
- Tempatkan konten teks Anda di dalam kolom kisi
Contoh ini menunjukkan cara membuat tiga kolom dengan lebar yang sama:
Contoh
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Contoh ini menunjukkan cara membuat empat kolom dengan lebar yang sama:
Contoh
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div
class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Kolom Dengan Lebar Berbeda
Contoh ini membuat tata letak tiga kolom di mana kolom di tengah lebih lebar dari kolom pertama dan terakhir:
Contoh
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Bilah Navigasi
Bilah navigasi adalah header navigasi yang ditempatkan di bagian atas halaman.
Contoh
<nav class="w3-bar w3-black w3-large">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a
href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</nav>
Navigasi Halaman
Dengan navigasi samping, Anda memiliki beberapa opsi:
- Selalu tampilkan panel navigasi di sebelah kiri konten halaman.
- Gunakan navigasi samping responsif "sepenuhnya otomatis" yang dapat dilipat.
- Buka panel navigasi di bagian kiri konten halaman.
- Buka panel navigasi di atas semua konten halaman.
- Geser konten halaman ke kanan saat membuka panel navigasi.
- Tampilkan panel navigasi di sisi kanan, bukan di sisi kiri
Contoh ini membuka panel navigasi di bagian kiri konten halaman:
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none"
id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a
class="w3-bar-item w3-button" href="#">Link 2</a>
<a
class="w3-bar-item w3-button"
href="#">Link 3</a>
</nav>
JavaScript digunakan untuk membuka dan menyembunyikan menu:
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}