Apa itu container dalam html

Container Kelas

Kelas w3-kontainer adalah yang paling penting dari kelas W3.CSS.

Kelas w3-kontainer digunakan untuk semua jenis elemen kontainer HTML seperti:

<Div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>, dan banyak lagi.

Tajuk ini adalah Green.

footer ini merah.

Artikel ini adalah abu-abu dan teks berwarna coklat.

Kontainer Menyediakan Kesetaraan

Kelas w3-wadah penting untuk menyediakan kesetaraan:

• margin umum
• paddings umum
• keberpihakan vertikal umum
• keberpihakan horisontal umum
• font umum
• warna umum

Contoh

<div class="w3-container">
  <p>London is the most populous city in the United Kingdom.</p>
</div>

Cobalah sendiri "

Untuk menambah warna, tambahkan saja kelas warna w3-:

Contoh

<div class="w3-container w3-red">
  <p>London is the most populous city in the United Kingdom.</p>
</div>

Cobalah sendiri "

Header dan footer

Kelas w3-kontainer dapat digunakan untuk gaya header:

Heading 1

Contoh

<header class="w3-container w3-teal">
  <h2>Heading 1</h2>
</header>

Cobalah sendiri "

Kelas w3-kontainer dapat digunakan untuk gaya footer:

Contoh

<footer class="w3-container w3-teal">
  <h5>Footer</h5>
  <p>Footer information goes here</p>
</footer>

Cobalah sendiri "

Artikel dan Bagian

Kelas w3-kontainer dapat digunakan untuk gaya <article> dan <section> elemen:

Contoh

<article class="w3-container">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</article>

<section class="w3-container">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</section>

<div class="w3-container">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div>

Cobalah sendiri "

	Banyak halaman web menggunakan <div> elemen bukan <article> dan <section> elemen.

Catatan, Panel, dan Quotes

Kelas w3-kontainer dapat digunakan untuk menampilkan semua jenis catatan:

London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.

Contoh

<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div>

Cobalah sendiri "

Kelas w3-kontainer dapat digunakan untuk menampilkan semua jenis panel:

London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.

London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.

Contoh

<div class="w3-container w3-light-grey w3-border">
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div> 

Cobalah sendiri "

Kelas w3-kontainer dapat digunakan untuk menampilkan semua jenis kutipan:

"Buatlah sesederhana mungkin, tetapi tidak sederhana."

Albert Einstein

Contoh

<div class="w3-container w3-leftbar w3-light-grey">
  <p><i>"Make it as simple as possible, but not simpler."</i></p>
  <p>Albert Einstein</p>
</div>

Cobalah sendiri "

Pergi ke bab W3.CSS Borders untuk mempelajari lebih lanjut tentang menampilkan catatan, panel, dan kutipan.

kombinasi

Header

Sebuah mobil adalah roda, self-powered kendaraan bermotor yang digunakan untuk transportasi. Sebagian besar definisi dari istilah menetapkan bahwa mobil dirancang untuk berjalan terutama di jalan-jalan. (Wikipedia)

Contoh menggunakan HTML <div> elemen

<div class="w3-container w3-red">
  <h2>Header</h2>
</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>

Cobalah sendiri "

Misalnya menggunakan HTML elemen semantik

<header class="w3-container w3-red">
  <h2>Header</h2>
</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-red">
  <h5>Footer</h5>
</footer>

Cobalah sendiri "

kontainer Padding

Kelasw3-kontainer memiliki 16px bawaan kiri dan padding kanan, dan tidak ada atas atau bantalan bawah:

Saya tidak memiliki atas atau bantalan bawah

Contoh

<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>

Cobalah sendiri "

Biasanya Anda tidak perlu mengubah padding default wadah, karena paragraf dan judul memberikan margin yang akan mensimulasikan padding.

Saya Heading 1

Saya seorang ayat.

Contoh

<div class="w3-container w3-blue">
  <h2>I am Heading 1</h2>
  <p>I am a paragraph.</p>
</div>

Cobalah sendiri "

kontainer sectioning

Kelasw3-kontainer tidak memiliki atas standar atau margin bawah.

Dua kontainer akan menampilkan wothout margin antara mereka:

Saya Heading 1

Saya seorang ayat.

Saya Heading 1

Saya seorang ayat.

Kelasw3-bagian dapat digunakan untuk memisahkan kontainer.Memiliki 16px atas dan bawah margin:

Saya Heading 1

Saya seorang ayat.

Saya Heading 1

Saya seorang ayat.

Contoh

<div class="w3-container w3-section w3-blue">
  <h2>I am Heading 1</h2>
  <p>I am a paragraph.</p>
</div>

<div class="w3-container w3-section w3-green">
  <h2>I am Heading 1</h2>
  <p>I am a paragraph.</p>
</div>

Cobalah sendiri "

Menyembunyikan (Penutupan) Kontainer

Menyembunyikan atau menutup wadah mudah:

×

Untuk menutup wadah ini, klik pada X di sudut kanan atas.

Contoh

<div class="w3-container w3-red">

<span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>

<p>To close this container, click on the X in the upper right corner.</p>

</div>

Cobalah sendiri "

Wadah membuka

Membuka wadah tertutup mudah:

Contoh

<div id="id01"class="w3-container w3-margin-top w3-green" style="display:none">
  <span onclick="this.parentElement.style.display='none'" class="w3-closebtn">X</span>
  <p>London is the capital city of England.
  It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div>

Cobalah sendiri "

Apa itu container pada web?

Div container untuk apa?

Apa perbedaan dari container dan container fluid?

Apa itu class Row?