Artikel

Layout Web Menggunakan HTML dan CSS

1. Apa itu Layout?

Layout adalah bagaimana elemen-elemen halaman web ditempatkan dan diorganisir. Ini termasuk posisi elemen seperti header, sidebar, konten utama, dan footer. Layout dapat ditentukan dengan menggunakan CSS (Cascading Style Sheets) atau dengan menggunakan kode HTML (Hypertext Markup Language) yang ditulis dengan baik. Layout yang baik dapat membuat halaman web lebih mudah dilihat dan digunakan, serta meningkatkan kesan keseluruhan pada pengunjung.

2. Apa itu Grid Layout?

Grid adalah sistem yang digunakan untuk mengorganisir elemen-elemen halaman web secara geometris. Ini terdiri dari baris dan kolom yang dapat digunakan untuk menempatkan elemen seperti teks, gambar, atau form. Grid dapat ditentukan menggunakan CSS (Cascading Style Sheets) atau menggunakan framework seperti Bootstrap atau Foundation. Grid dapat digunakan untuk menciptakan layout yang lebih rapi dan struktur yang lebih baik, serta membuat halaman web lebih mudah digunakan pada perangkat berbeda.

3. Contoh Penggunaan Grid Layout?

<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Grid Layout</h1>

<p>This grid layout contains six columns and three rows:</p>

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

</body>
</html>

Coding di atas adalah contoh implementasi grid layout menggunakan CSS. Dalam coding ini terdapat beberapa elemen yang digunakan untuk membuat grid layout:

  1. Elemen div dengan class “grid-container” adalah elemen utama yang digunakan sebagai container grid. Pada class ini, properti “display: grid” digunakan untuk mengaktifkan grid layout pada elemen tersebut.
  2. Properti “grid-template-areas” digunakan untuk menentukan area-area dari grid yang akan digunakan. Pada contoh ini, terdapat enam kolom dan tiga baris.
  3. Elemen div dengan class “item1”, “item2”, “item3”, “item4”, dan “item5” adalah elemen yang digunakan untuk mengisi area-area dari grid. Masing-masing elemen ini memiliki class yang digunakan untuk menentukan area grid mana yang akan ditempati oleh elemen tersebut.
  4. Properti “gap” digunakan untuk menentukan jarak antar elemen dalam grid.
  5. Properti “background-color” digunakan untuk menentukan warna latar belakang dari grid container dan elemen yang ada di dalamnya.
  6. Properti “text-align” dan “font-size” digunakan untuk menentukan posisi teks dan ukuran font dari elemen yang ada di dalam grid.

Secara keseluruhan, coding di atas menunjukkan bagaimana grid layout dapat digunakan untuk mengorganisir elemen-elemen halaman web secara rapi dan struktur yang baik.

4. Output

Artikel Terkait :

image
Soal Latihan dan Contoh Form Kontrol di Bootstrap 5
questionmark, info, help-308636.jpg
Tanya Jawab C Bagian 1
twitter, social media, communication-1522890.jpg
Membuat Fungsi Login Sederhana PHP
login sederhana
Membuat Form Login Sederhana
dual screen, programming, coding-1745705.jpg
CSS
Belajar Flexbox CSS
image-4
Teknik Pembuatan Laporan Prakerin
image-1
Membuat CRUD Native PHP
image
Membuat Halaman Beranda Menggunakan CodeIgniter4 Dan AdminLTE
image-1
Membuat Website Statis Responsive
1
Membuat Game Flappy Bird Menggunakan Construct 3
Ade Bratajaya Pradana

Ade Bratajaya Pradana

Saya adalah seorang programmer sekaligus guru yang mengajar di SMK TI Bali Global Badung. Antusias dengan dunia programming dan pendidikan. Senang berbagi ilmu tentang teknologi dan berita terbaru seputar IT. Memiliki visi memajukan IT di Indonesia khususnya di Pulau Bali. .

Leave a Comment

Your email address will not be published. Required fields are marked *