Membangun Situs Web Responsif Dari Awal
Dalam bab ini kita akan membangun sebuah W3.CSS responsif website 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="http://www.w3ii.com/lib/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> Cobalah sendiri " Masukan Elemen di Kontainer
Sekarang kita perlu menambahkan margin umum dan padding untuk semua elemen.
Untuk mencapai hal ini, menempatkan elemen HTML Anda di dalam kontainer (<div class = "w3-container">)
Untuk memungkinkan mendefinisikan kelas terpisah untuk header. Memisahkan header dari sisa konten, menggunakan terpisah <div> elemen:
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> Cobalah sendiri " Kelas warna
kelas warna mendefinisikan warna elemen.
Contoh ini menambahkan warna untuk pertama <div> elemen:
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>
Cobalah sendiri " ukuran Kelas
kelas ukuran mendefinisikan ukuran teks untuk elemen.
Contoh ini menambahkan ukuran untuk kedua elemen sundulan:
Contoh
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This sage
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>
Cobalah sendiri " Gunakan Semantic Elements
Jika Anda ingin mengikuti HTML5 rekomendasi semantik. 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="http://www.w3ii.com/lib/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> Cobalah sendiri " Multicolumn Tata Letak Responsif
Dengan W3.CSS mudah untuk membuat tata letak responsif multicolumn.
Kolom akan mengatur ulang dirinya sendiri secara otomatis bila dilihat dari ukuran layar yang berbeda.
Beberapa aturan jaringan:
- Mulailah dengan kelas baris <div class = "w3-baris-bantalan">
- Menggunakan kelas yang telah ditetapkan seperti "w3-ketiga" untuk segera membuat kolom kotak
- Tempatkan konten teks dalam kolom kotak
Contoh ini menunjukkan bagaimana untuk 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> Cobalah sendiri " Contoh ini menunjukkan bagaimana untuk 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> Cobalah sendiri " Kolom Dengan Berbagai Lebar
Contoh ini menciptakan 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> Cobalah sendiri " Bar navigasi
Sebuah bar navigasi adalah header navigasi yang ditempatkan di bagian atas halaman.
Contoh
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Cobalah sendiri " Side Navigasi
Dengan navigasi samping, Anda memiliki beberapa pilihan:
- Selalu menampilkan panel navigasi di sebelah kiri konten halaman.
- Buka panel navigasi, menyembunyikan bagian kiri konten halaman.
- Buka panel navigasi, menyembunyikan semua isi halaman.
- Menggeser konten halaman ke kanan, saat membuka panel navigasi.
Contoh ini membuka panel navigasi, menyembunyikan bagian dari konten halaman:
<nav class="w3-sidenav w3-black w3-card-2" style="display:none">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
<a href="#">Link 4</a>
<a
href="#">Link 5</a>
</nav>
JavaScript digunakan untuk membuka dan menyembunyikan menu:
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
Cobalah sendiri "