Wadah W3.CSS
Ini adalah Header saya
Ini Artikel saya
Artikel ini berwarna abu-abu muda dan teksnya berwarna coklat. Artikel ini berwarna abu-abu muda dan teksnya berwarna coklat. Artikel ini berwarna abu-abu muda dan teksnya berwarna coklat. Artikel ini berwarna abu-abu muda dan teksnya berwarna coklat. Artikel ini berwarna abu-abu muda dan teksnya berwarna coklat.
Ini adalah Footer saya
Kelas Kontainer
Kelas w3-container menambahkan padding kiri dan kanan 16px ke elemen HTML apa pun.
Kelas w3-container adalah kelas yang sempurna untuk digunakan untuk semua elemen container HTML seperti:
<div>, <artikel>, <bagian>, <header>, <footer>, <form>, dan lainnya.
Wadah Memberikan Kesetaraan
Wadah w3 memberikan kesetaraan untuk semua elemen penampung HTML:
- Margin umum
- bantalan umum
- Penjajaran umum
- Font umum
- Warna umum
Untuk menggunakan wadah, cukup tambahkan kelas wadah-w3 ke elemen apa pun:
Contoh
<div class="w3-container">
<p>The w3-container class is an important
w3.CSS class.</p>
</div>
Untuk menambahkan warna, cukup tambahkan kelas warna w3- :
Contoh
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>
Header dan Footer
Kelas w3-container dapat digunakan untuk menata header:
tajuk
Contoh
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
Contoh
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
Tidak ada perbedaan dalam cara W3.CSS memperlakukan elemen <div> dan <header>.
Kelas w3-container dapat digunakan untuk menata footer:
Contoh
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
Contoh
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Banyak halaman web menggunakan elemen <div> alih-alih elemen <header> dan <footer>.
Artikel dan Bagian
Kelas w3-container dapat digunakan untuk menata elemen <article> dan <section>:
Contoh
<div class="w3-container">
<h2>London</h2>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
<article class="w3-container">
<h2>Paris</h2>
<p>The
Paris area is one of the largest population centers in Europe,
with more than 2 million inhabitants.</p>
</article>
<section
class="w3-container">
<h2>Tokyo</h2>
<p>Tokyo is the
center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</section>
Banyak halaman web menggunakan elemen <div> alih-alih elemen <article> dan <section>.
Contoh Halaman Web
tajuk
Mobil adalah kendaraan bermotor beroda, bertenaga sendiri yang digunakan untuk transportasi. Sebagian besar definisi istilah menentukan bahwa mobil dirancang untuk berjalan terutama di jalan raya. (Wikipedia)
Contoh menggunakan elemen <div> HTML
<div class="w3-container w3-red">
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>
<div class="w3-container
w3-red">
<h5>Footer</h5>
</div>
Contoh menggunakan elemen semantik HTML
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
<img src="img_car.jpg" alt="Car" style="width:100%">
<article
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>
<footer class="w3-container
w3-teal">
<h5>Footer</h5>
</footer>
Bantalan Kontainer
The w3-container class has a default 16px left and right padding, and no top or bottom padding:
Example
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
Normally you will not have to change the default padding of a container, because paragraphs and heading provide margins that will simulate padding.
I am a Heading
I am a paragraph.
Example
<div class="w3-container w3-blue">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>