Cara Membuat 2 Layout HTML Sederhana

Halo Sobat Sederhana! Di artikel ini, kita akan membahas cara membuat dua layout HTML sederhana. Layout HTML adalah susunan elemen HTML yang digunakan untuk membuat tampilan visual sebuah halaman web. Dua layout HTML yang akan kita bahas adalah layout dua kolom dan layout tiga kolom.

Layout Dua Kolom

Layout dua kolom adalah salah satu layout yang paling sering digunakan pada sebuah halaman web. Layout ini terdiri dari dua kolom, yaitu kolom utama dan kolom samping.

Untuk membuat layout dua kolom, berikut adalah tahapan-tahapannya:

1. Membuat Struktur HTML

Pertama, buat struktur HTML untuk layout dua kolom. Berikut adalah contohnya:

Kode HTML
<div id=”wrapper”> <div id=”main”></div> <div id=”sidebar”></div> </div>

Pada contoh di atas, struktur HTML terdiri dari satu wrapper dan dua div yang mewakili kolom utama dan kolom samping.

2. Menentukan CSS

Setelah membuat struktur HTML, selanjutnya tentukan properti CSS untuk masing-masing elemen HTML. Berikut adalah contohnya:

Kode CSS
#wrapper { width: 960px; margin: 0 auto; } #main { width: 600px; float: left; } #sidebar { width: 300px; float: left; }

Pada contoh di atas, kita memberikan lebar 960 piksel pada wrapper, lebar 600 piksel pada kolom utama, dan lebar 300 piksel pada kolom samping.

3. Membuat Konten

Setelah menentukan CSS, selanjutnya buat konten untuk kolom utama dan kolom samping. Berikut adalah contohnya:

Kode HTML
<div id=”wrapper”> <div id=”main”> <h2>Judul Artikel</h2> <p>Isi artikel…</p> </div> <div id=”sidebar”> <h3>Menu</h3> <ul> <li>Menu 1</li> <li>Menu 2</li> </ul> </div> </div>

Pada contoh di atas, kita membuat judul artikel dan isi artikel pada kolom utama, serta menu pada kolom samping.

Layout Tiga Kolom

Layout tiga kolom adalah salah satu layout yang cukup kompleks, namun dapat memberikan tampilan yang menarik pada sebuah halaman web. Layout ini terdiri dari tiga kolom, yaitu kolom utama, kolom kiri, dan kolom kanan.

Untuk membuat layout tiga kolom, berikut adalah tahapan-tahapannya:

1. Membuat Struktur HTML

Pertama, buat struktur HTML untuk layout tiga kolom. Berikut adalah contohnya:

Kode HTML
<div id=”wrapper”> <div id=”main”></div> <div id=”left”></div> <div id=”right”></div> </div>

Pada contoh di atas, struktur HTML terdiri dari satu wrapper dan tiga div yang mewakili kolom utama, kolom kiri, dan kolom kanan.

2. Menentukan CSS

Setelah membuat struktur HTML, selanjutnya tentukan properti CSS untuk masing-masing elemen HTML. Berikut adalah contohnya:

Kode CSS
#wrapper { width: 960px; margin: 0 auto; } #main { width: 600px; float: left; } #left { width: 180px; float: left; } #right { width: 180px; float: right; }

Pada contoh di atas, kita memberikan lebar 960 piksel pada wrapper, lebar 600 piksel pada kolom utama, lebar 180 piksel pada kolom kiri, dan lebar 180 piksel pada kolom kanan.

3. Membuat Konten

Setelah menentukan CSS, selanjutnya buat konten untuk masing-masing kolom. Berikut adalah contohnya:

Kode HTML
<div id=”wrapper”> <div id=”main”> <h2>Judul Artikel</h2> <p>Isi artikel…</p> </div> <div id=”left”> <h3>Menu</h3> <ul> <li>Menu 1</li> <li>Menu 2</li> </ul> </div> <div id=”right”> <h3>Iklan</h3> <p>Isi iklan…</p> </div> </div>

Pada contoh di atas, kita membuat judul artikel dan isi artikel pada kolom utama, menu pada kolom kiri, dan iklan pada kolom kanan.

FAQ

1. Apa itu layout HTML?

Layout HTML adalah susunan elemen HTML yang digunakan untuk membuat tampilan visual sebuah halaman web.

2. Apa saja jenis-jenis layout HTML?

Jenis-jenis layout HTML antara lain layout dua kolom, layout tiga kolom, layout empat kolom, dan layout full width.

3. Bagaimana cara membuat layout dua kolom?

Cara membuat layout dua kolom adalah dengan membuat struktur HTML, menentukan CSS, dan membuat konten.

4. Bagaimana cara membuat layout tiga kolom?

Cara membuat layout tiga kolom adalah dengan membuat struktur HTML, menentukan CSS, dan membuat konten.

5. Apakah layout HTML harus rumit?

Tidak. Layout HTML dapat dibuat sederhana atau rumit, tergantung kebutuhan dan keinginan pembuat halaman web.

Semoga Bermanfaat dan sampai jumpa di artikel menarik lainnya.

Cara Membuat 2 Layout HTML Sederhana