RudihartoDalam sesi belajar HTML part 6, kita sudah mengetahui perbedaan antara div, class, dan id dalam HTML. Pada sesi belajar HTML part 7 ini, kita akan mulai belajar layout dan responsive web design dengan HTML sederhana. Mari kita bahas!
HTML memungkinkan kita untuk membangun struktur halaman website, termasuk elemen seperti header, paragraf, daftar, dan tabel. Namun, agar halaman website lebih menarik dan fungsional, pemahaman tentang layout pada website dan desain responsif sangat penting.
Layout website berperan dalam mengatur tata letak elemen-elemen di dalam halaman agar terlihat terstruktur dan estetis. Sementara itu, desain responsif memastikan tampilan website tetap optimal di berbagai perangkat, baik desktop, tablet, maupun ponsel, tanpa mengurangi fungsi atau kenyamanannya.
HTML Layout: Dasar Tata Letak Website
HTML memiliki elemen-elemen penting yang akan sering digunakan untuk membuat website, diantaranya:
<header>: Bagian atas halaman, biasanya berisi judul atau menu navigasi.<nav>: Elemen untuk menu navigasi.<main>: Bagian utama dari konten halaman.<section>: Digunakan untuk membagi konten menjadi bagian tertentu.<aside>: Untuk informasi tambahan, seperti sidebar.<footer>: Bagian bawah halaman, biasanya berisi hak cipta atau tautan kontak.
Berikut contoh sederhana struktur HTML:
<!DOCTYPE html>
<html>
<head>
<title>Website Sederhana</title>
</head>
<body>
<header>
<h1>Judul Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
<main>
<section>
<h2>Konten Utama</h2>
<p>Ini adalah bagian utama dari halaman.</p>
</section>
</main>
<footer>
<p>© 2024 Website Sederhana</p>
</footer>
</body>
</html>Tips menyusun kode HTML:
- Gunakan
<div>untuk mengelompokkan tiap-tiap elemen - Gunakan tambahan komentar HTML, agar kode mudah dipahami
<!-- Bagian Header -->
<header></header>
<!-- Bagian Footer -->
<footer></footer>Setelah mengenal struktur HTML, selanjutnya kami akan meneruskan materi desain responsive agar website dapat tampil bagus, rapi, dan tetap mengedepankan fungsional di semua ukuran device.
Responsive Web Design: Membuat Website Fleksibel
Desain responsive adalah desain halaman dimana website bisa tampil bagus, rapi, dan tetap fungsional saat diakses dari semua jenis dan ukuran device, mulai dari layar besar hingga layar kecil seperti ponsel.
Saat ini, sudah menjadi kewajiban bagi para developer atau web designer untuk menyematkan fitur ini disetiap website yang dibangun. Tujuannya, agar pengunjung website memiliki pengalaman berbeda setiap mengakses diberbagai jenis dan ukuran device.
Pengenalan Media Queries di CSS
Media queries memungkinkan Anda mengatur lebar layout berdasarkan ukuran layar perangkat. Contoh:
@media (max-width: 780px) {
body {
background-color: lightgray;
}
}Kode di atas akan mengubah warna latar menjadi abu-abu saat lebar layar kurang dari 780px.
Teknik Dasar Responsive Design
Desain responsive adalah teknik membuat website yang dapat tampil baik menyesuaikan dengan perangkat yang digunakan.
1. Gunakan Unit Fleksibel
Bayangkan Anda memiliki pakaian melar, yang menyesuaikan dengan ukuran badan. Unit fleksibel dalam CSS juga demikian. Unit ini untuk mengatur elemen di website agar menyesuaikan dengan ukurang perangkat pengakses.
Contoh unit fleksibel:
em: Ukuran relatif terhadap ukuran font induknya.rem: Ukuran relatif terhadap akar font (biasanya ukuran font pada elemen ).vw: Ukuran relatif terhadap lebar viewport (layar).vh: Ukuran relatif terhadap tinggi viewport.
Dengan menggunakan unit Fleksibel, kita tidak perlu mengatur ukuran dalam pixel. Karena elemen akan menyesuaian secara otomatis ketika diakses melalui berbagai ukuran layar perangkat.
Contoh penggunaan Fleksibel:
.container {
width: 80vw; /* Lebar container 80% dari lebar layar */
}2. Tambahkan Viewport Meta Tag
Viewport meta tag adalah sebuah tag <head> dalam HTML, yang memberikan informasi kepada browser, tentang bagaimana cara halaman website ditampilkan.
Tanpa viewport meta tag pada halaman website, browser akan menampilkan halaman website dengan ukuran yang berbeda dari perangkat yang digunakan. Hal ini dapat menyebabkan tampilan website tidak beraturan.
Contoh viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width: Code yang digunakan untuk memberitahu browser, agar lebar viewport sama dengan lebar perangkat.initial-scale=1.0: Digunakan untuk mengatur skala awal halaman menjadi 1, artinya tidak ada pembesaran atau pengecilan awal.
3. Contoh Layout Grid Responsif
Layout grid responsif adalah cara mengatur tata letak elemen-elemen dihalaman website agar bisa menyesuaian diri dengan berbagai ukuran perangkat pengakses.
Bayangkan Anda memiliki kotak-kotak di halaman website, yang bisa memanjang menyesuaikan layar perangkat.
Contoh sederhana:
HTML
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>CSS
.container {
display: flex;
flex-wrap: wrap;
}
.item {
width: 33.33%;
padding: 10px;
box-sizing: border-box;
}Keterangan:
display: flex;: Berfungsi untuk mengubah container menjadi flex container, yaitu kita dapat mengatur item-item dengan fleksibel.flex-wrap: wrap;: Berfungsi untuk membungkus item ke baris berikutnya jika tidak muat dalam satu baris.width: 33.33%;: Setiap item akan memiliki lebar 33.33% dari lebar container.
Kesalahan umum yang harus dihindari:
- Menggunakan ukuran tetap untuk semua elemen.
- Tidak menguji tampilan di berbagai perangkat.
Dengan menggabungkan teknik diatas, Anda akan bisa membuat halaman website dengan layout teratur dan halaman responsive sehingga terlihat bagus.
Setiap membuat halaman website, jangan melewatkan selalu melakukan pengujian dengan mengaksesnya diberbagai layar perangkat.
Contoh Script HTML Responsive Design
Berikut adalah contoh script html sederhana, dalam sesi belajar HTML part 7 yang dapat Anda pelajari.
Kode HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Contoh Website</h1>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
</header>
<main>
<section>
<p>Ini adalah contoh paragraf pertama. Anda dapat menambahkan konten teks sesuai kebutuhan.</p>
<p>Ini adalah contoh paragraf kedua. Anda dapat menambahkan konten teks sesuai kebutuhan.</p>
<p>Ini adalah contoh paragraf ketiga. Anda dapat menambahkan konten teks sesuai kebutuhan.</p>
<p>Ini adalah contoh paragraf keempat. Anda dapat menambahkan konten teks sesuai kebutuhan.</p>
</section>
</main>
<footer>
<p>© 2024 Contoh Website</p>
</footer>
</body>
</html>Kode CSS:
/* CSS Reset Sederhana */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* Agar padding dan border masuk dalam width elemen */
}
body {
font-family: sans-serif;
line-height: 1.6;
width: 1200px; /* Lebar body 1200px */
margin: 0 auto; /* Body menjadi rata tengah */
}
header {
background-color: #f4f4f4;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
margin-top: 20px;
text-align: center; /* Rata tengah menu di layar kecil */
}
nav ul li {
display: inline;
margin-right: 20px;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
footer {
background-color: #333333; /* Background footer #333333 */
color: #fff; /* Warna teks footer putih */
text-align: center;
padding: 10px;
position: relative;
bottom: 0;
width: 100%;
}
/* Responsive Design dengan Media Queries */
@media (max-width: 768px) {
body {
width: 90%; /* Lebar body menjadi 90% dari lebar layar */
}
nav ul li {
display: block; /* Tampilan menu vertikal di layar kecil */
margin: 10px 0;
}
main {
padding: 10px;
}
.container {
flex-direction: column; /* Item ditampilkan vertikal */
}
.item {
width: 100%; /* Item mengambil lebar penuh */
}
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}Dari kombinasi script diatas, tampilan websitenya akan seperti berikut jika diakses melalui device handphone.
Penutup
HTML layout dan responsive sangat dibutuhkan dalam membangun halaman website, karena memiliki fungsi penting agar website Anda terlihat profesional, menarik, dan mudah diakses di berbagai perangkat.
Layout yang baik membantu agar tampilan website tampak rapi, sedangkan responsive website membantu halaman website tampil optimal saat diakses di berbagai perangkat.
Belajar HTML, terutama mempelajari layout dan responsive desain sebenarnya tidak sesulit itu. Asal memiliki kemauan belajar dan sering mempergunaanya, Anda akan mampu membuat website fungsional, menarik, dan responsive. Jadi jangan ragu untuk mulai belajar!
Demikianlah sesi belajar HTML part 7 dari Rumahweb tentang layout dan responsive web design. Ikuti terus sesi belajar HTML part selanjutnya yang kami publikasi tiap bulan sekali. Semoga bermanfaat.
