Skip to main content

Web 01 - Header

Header adalah bagian atas halaman web yang biasanya mencakup logo, menu navigasi, dan mungkin beberapa elemen lain seperti tombol pencarian. Ini adalah elemen yang tetap konsisten di semua halaman situs, memberi identitas visual dan navigasi yang mudah bagi pengguna. Contoh header di beberapa website populer:

  1. Traveloka alt text

  2. Amazon

  3. Tokopedia alt text

  4. AirBnB alt text

Dalam bab ini, kita akan mulai membuat website klon dari etsy.com & kita awali dari bagaimana membuat header-nya.

tip

Bagian paling atas sebuah halaman sering juga disebut sebagai banner.

Struktur Dokumen​

Kita mulai dari struktur dokumennya dulu. Sebagai referensi, kita lihat layout etsy.com. Bagian yang ditandai warna biru adalah bagian utamanya yang punya dua baris tombol di bagian atas (upper) & bawah (lower).

alt text

Buat direktori proyek, kasih nama web-01 & buat file index.html yang isinya:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
  <title>Tokoku.com</title>
</head>
<body>  
  <header>
    <div class="container">
      <!-- baris atas-->
      <div class="upper">
        <!-- logo -->
        <!-- tombol kategori -->
        <!-- input untuk search -->
        <!-- tombol sign-in -->
        <!-- tombol favorit -->
        <!-- tombol gift -->
        <!-- tombol shopping cart -->
      </div>

      <!-- baris bawah -->
      <div class="lower">
        <!-- tombol gift mode -->
        <!-- tombol deal -->
        <!-- tombol home favorites -->
        <!-- tombol fashion find -->
        <!-- tombol registry -->
      </div>
    </div>    
  </header>
</body>
</html>

Elemen Header​

Elemen header dalam HTML adalah elemen semantik yang digunakan untuk mendefinisikan bagian header dari sebuah halaman web atau bagian dari dokumen. Kita bisa saja pake div, tapi header lebih baik secara semantik & juga sangat logis dipake untuk bagian yang memang berfungsi sebagai header.

info

Selain di bagian navigasi, elemen ini bisa dipake di banyak tempat dalam dokumen HTML yang sama misalnya, di dalam elemen article atau section untuk memberikan header pada bagian atau artikel tertentu.

Kenapa di dalam header kita buat elemen div.container ? Karena elemen lebar elemen header sebenarnya sama dengan lebar halaman web. Perhatikan garis warna abu di bawahnya. Itu garis batas (border) bawah dari elemen header & lebarnya kita liat sama dengan lebar halaman webnya. Nah untuk memisahkan bagian yang lebarnya terbatas (biru) dari bagian yang lebarnya full kita buat div tambahan di dalamnya.

alt text

tip

Ingat div.container artinya elemen div dengan atribut class="container".

Kita mulai dari logo. Untuk proyek ini kita bisa pake logo/icon gratisan yang banyak tersedia di Internet. Salah satu website yang menyediakan ikon gratisan adalah www.svgrepo.com. Buka websitenya & cari ikon yang kalian mau. Saya cari ikon pake kata kunci "shop" dan saya pilih yang ini:

alt text

Unduh filenya & simpan di direktori web-01/images/. Ganti namanya jadi logo.svg.

Di dalam index.html cari baris dengan komentar <!-- logo --> & tambahkan elemen a dengan img di dalamnya:

<!-- logo -->
 <a class="logo" href="/">
  <img src="/images/logo.svg" />
</a>
info

URL (Uniform Resource Locator) URL (Uniform Resource Locator) adalah alamat web yang dipakai buat nemuin sumber daya di internet. URL punya beberapa komponen:

  1. Skema: Menunjukkan protokol yang dipakai (misalnya, http, https, ftp).
  2. Host: Nama domain atau alamat IP dari server (misalnya, www.example.com).
  3. Port: Nomor opsional yang menunjukkan port komunikasi (misalnya, :80 untuk HTTP).
  4. Path: Lokasi spesifik sumber daya di server (misalnya, /product/shoes.html). Khusus untuk index.html, path-nya bisa diabaikan karena browser secara otomatis akan mencari file index.html kalo kita buka URL yang berakhiran / atau domain utama.
  5. Query: Parameter opsional yang dikirim ke sumber daya (misalnya, ?id=123). Biasanya dipakai untuk memfilter/mencari data.
  6. Fragmen: Bagian opsional dari sumber daya, biasanya menunjukkan bagian tertentu (misalnya, #section1).

Dua Cara Penulisan path:

  • Path Absolut: Ini URL lengkap yang mencakup semua komponen yang diperlukan buat akses sumber daya. Dimulai dari skema dan mencakup host (misalnya, https://www.example.com/page.html). Selalu berfungsi terlepas dari lokasi saat ini; berguna buat ngelink ke sumber daya dari domain yang berbeda.
  • Path Relatif: Ini URL parsial yang relatif ke lokasi dokumen saat ini. Gak termasuk skema atau host dan dimulai dari path (misalnya, page.html atau /images/pic.jpg). Tergantung pada lokasi dokumen saat ini; berguna buat link internal dalam domain yang sama.

Contoh

Dua cara penulisan path ini merujuk pada dokumen HTML yang sama:

  • URL Absolut: https://www.example.com/about/team.html
  • URL Relatif: /about/team.html (kalo dokumen yang sedang dimuat browser adalah https://www.example.com atau https://www.example.com/index.html)

Lanjut, buat file index.css, yang isinya:

/* reset */
* {
  margin: 0;
  padding: 0;
}

header a img {
  width:24px;
}

Jalankan Live Preview dengan klik kanan file index.html & pilih Show Preview.

Menu Live Preview

Di panel sebelah kanan VSCode, kita bisa lihat halaman HTML yang baru kita buat.

Header Preview

Penjelasan Kode

Dengan kode HTML ini, kita menambahkan elemen img (gambar) ke dalam halaman. Elemen ini kita kasih atribut src untuk memuat file logo.svg dari direktori images/. Kenapa kita bungkus dengan elemen a ? Karena kita ingin bagian logo ini bisa diklik. Elemen a kita atur supaya mengarahkan kita ke home dengan cara mengeset atribut href (hyperref) ke URL relatif / (root)

<a class="logo" href="/">
  <img src="/images/logo.svg" />  
</a>
info

SVG (Scalable Vector Graphics) adalah format file berbasis XML yang digunakan untuk menggambarkan grafik vektor dua dimensi. Berbeda dengan gambar raster seperti PNG, JPG, BMP, dan WebP, yang menyimpan data gambar sebagai grid piksel individual, SVG menggunakan persamaan matematis untuk mendefinisikan bentuk, garis, warna, dan teks. Ini memungkinkan gambar SVG untuk diperbesar atau diperkecil ke ukuran berapa pun tanpa kehilangan kualitas atau menjadi kasar (pixelated).

Poin Penting:

  1. Skalabilitas: Gambar SVG dapat diubah skalanya tanpa batas tanpa kehilangan kualitas, membuatnya ideal untuk desain web responsif dan tampilan resolusi tinggi.
  2. Ukuran File: File SVG seringkali lebih kecil dari versi raster karena hanya berisi data tentang bentuk dan warna, bukan piksel individual.
  3. Editabilitas: Gambar SVG dapat dengan mudah diedit dengan editor teks atau perangkat lunak desain grafis, karena ditulis dalam format XML.

Perbandingan dengan Format Raster:

  • PNG (Portable Network Graphics): Format gambar raster yang mendukung kompresi tanpa kehilangan dan transparansi. Ideal untuk gambar yang membutuhkan latar belakang transparan, seperti logo dan ikon.
  • JPG/JPEG (Joint Photographic Experts Group): Format gambar raster yang banyak digunakan dengan kompresi lossy. Cocok untuk foto dan gambar dengan banyak warna dan gradasi, tetapi kualitasnya menurun dengan pengeditan dan penyimpanan berulang.
  • BMP (Bitmap): Format gambar raster tanpa kompresi yang menyimpan data untuk setiap piksel. File BMP bisa sangat besar dan kurang umum digunakan saat ini karena tidak efisien.
  • WebP: Format gambar yang dikembangkan oleh Google, mendukung kompresi lossy dan lossless. WebP sering lebih efisien dalam ukuran file dibandingkan PNG dan JPEG, dengan kualitas gambar yang sama atau lebih baik.
Raster vs SVG setelah diperbesar

Kelemahan SVG dibandingkan Format Raster:

SVG kurang cocok untuk gambar dengan detail kompleks atau tekstur halus, seperti foto, karena lebih sulit untuk merepresentasikan gradasi warna yang halus dan detail-detail kecil dengan format vektor. Untuk jenis gambar ini, format raster seperti JPG atau PNG lebih efektif.

Manfaat SVG:

  • Kualitas: Tetap tajam pada resolusi berapa pun.
  • Kinerja: Umumnya lebih cepat dimuat dan dirender, terutama untuk grafik sederhana.
  • Interaktivitas: Mendukung fitur seperti animasi dan hyperlink, meningkatkan pengalaman pengguna di situs web.

SVG sangat menguntungkan untuk grafik web, ikon, logo, dan grafik lain yang memerlukan pengubahan ukuran sering atau rendering berkualitas tinggi pada berbagai resolusi layar.

Referensi:

  1. Mozilla Developer Network (MDN) - SVG
  2. WebP Image Format
  3. What a Raster Images? - Adobe
  4. XML Introduction - W3Schools

Untuk index.css, di dalam blok paling atas kita tulis kode untuk mereset / menghilangkan margin & padding bawaan browser. Di sini kita pake selektor universal yang artinya "untuk semua elemen di manapun berada".

* {
  margin: 0;
  padding: 0;
}

Dalam blok berikutnya kita atur supaya semua elemen img yang ada di dalam a lebarnya 24px. Kenapa cuma lebarnya yang kita atur? Karena elemen img selalu mempertahankan rasio lebar & tinggi kalo hanya salah satu yang diset. Jadi kalo kita atur width saja, height akan otomatis menyesuaikan, begitu juga sebaliknya. Kita nggak pake .upper & .logo untuk selektornya karena kita mau semua img yang ada di header lebarnya 24px.

Elemen Header lainnya​

Lanjut, kita buat elemen header lainnya. Untuk ikon, silakan pilih & unduh sendiri di SVGRepo.

<div class="upper">
  <!-- logo -->
  <a class="logo" href="/">
    <img src="/images/logo.svg" />    
  </a>
  <a class="category" href="/">
    <img src="/images/category.svg" alt="Category"/>
  </a>
  <!-- input untuk search -->
  <input class="searchbox" type="text" name="search" id="">
  <!-- tombol sign-in -->
  <a class="sign-in" href="/">Sign In</a>
  <!-- tombol favorit -->
  <a class="favorite" href="/">
    <img src="/images/heart.svg" alt="Favorite">
  </a>
  <!-- tombol gift -->
  <a href="/" class="gift">
    <img src="/images/gift.svg" alt="Gift">
  </a>
  <!-- tombol shopping cart -->
  <a href="/" class="cart">
    <img src="/images/cart.svg" alt="Cart">
  </a>
</div>
Header

Di bawah ikon, kelihatan ada seperti garis-garis kecil.

Underline

Kenapa ada garis-garis ini? Karena secara default, semua link a ada garis bawahnya (underline). Untuk menghilangkan garis ini, tambahin kode berikut di atas header a img.

header a {
  text-decoration: none;
}

Header Bawah​

Kita lanjut ke baris bawah.

<!-- baris bawah -->
<div class="lower">
  <!-- tombol gift mode -->
  <a href="/">
    <img src="/images/gift.svg" />
    <span>Gift Mode</span>
  </a>
  <!-- tombol deal -->
  <a href="/">
    Deals
  </a>
  <!-- tombol home favorites -->
  <a href="/">
    Home Favorites
  </a>
  <!-- tombol fashion find -->
  <a href="/">
    Fashion Find
  </a>
  <!-- tombol registry -->
  <a href="/">
    Registry
  </a>
</div>
Header Upper & Lower

Layout​

Buka index.css, tambahkan blok-blok berikut:

* {
  /* kode nggak berubah */
}

header {
  border-bottom: 1px solid grey;
  padding: 20px 0;
}

header .container {
  outline: 1px solid red;
  width: 80%;  
  margin-left: auto;
  margin-right: auto;    
}

Layout Header v1

Border​

Baris border-bottom: 1px solid grey, membuat garis tepi di bagian bawah header. Tebalnya 1px, gayanya solid atau garis penuh, & warnanya abu (grey). Beberapa cara pembuatan border:

1. Menggunakan properti shorthand

Kita bisa menulis border dengan satu baris kode menggunakan properti shorthand. Ini gabungan dari ketebalan, jenis garis, dan warna, ditulis dalam satu baris.

border: 2px dashed blue;

Kode di atas menghasilkan border di semua sisi, dengan ketebalan 2px, warna biru, gaya garis putus (dashed).

info

Gaya border selain solid & dashed adalah dotted, groove, inset, outset, hidden & double. Silakan dicoba sendiri & lihat bedanya.

2. Mengatur garis tepi untuk masing-masing sisi

border-top: 3px solid red;
border-right: 1px dotted green;
border-bottom: 2px double black;
border-left: 5px groove purple;

3. Mengatur gaya, ketebalan, & warna secara terpisah

border-style: dashed;
border-width: 1px;
border-top-width: 3px;
border-top-color: red;
border-top-style: dotted;
tip

Border vs Outline

Dua properti ini sama-sama membuat garis tepi, bedanya border bisa dibikin lengkung dengan properti border-radius, outline nggak bisa.

Properti outline nggak mempengaruhi lebar atau tinggi objek. Kalo ada elemen lebarnya 100px kita kasih outline dengan tebal 10px, lebarnya tetap 100px. Sebaliknya, border bisa mengubah lebar/tinggi elemen. Karena itu, outline lebih sering dipakai sebagai marker (penanda) tepi elemen.

Padding​

Padding itu jarak atau ruang kosong antara konten di dalam elemen dan tepi elemen itu sendiri.

Dalam kode yang kita tulis, kita buat ruang kosong selebar 20px di sisi atas & bawah header.

header {
  padding: 20px 0; /* atas-bawah 10px, kiri-kanan 0 */
}

Contoh lain:

header {
  padding: 20px;
}

Artinya, kita kasih ruang kosong 20px di semua sisi elemen itu (atas, kanan, bawah, kiri).

kalo mau atur padding-nya beda-beda di setiap sisi:

header {
  padding: 10px 20px 30px 40px; /* atas, kanan, bawah, kiri */
}

Atau dengan statemen terpisah untuk masing-masing sisi:

header {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

Padding lazim dipakai untuk bikin tampilan yang lebih rapi dan nggak kelihatan dempet-dempet.

Margin​

Kalo padding itu untuk mengatur jarak di dalam elemen, margin buat ngatur jarak di luar elemen. Dengan margin, kita bisa kontrol seberapa jauh elemen kita dari elemen lain di sekitarnya, termasuk dari tepi elemen parent atau kontainernya. Sama seperti padding, kita bisa atur margin untuk masing-masing sisi: atas, kanan, bawah, dan kiri.

header .container {
  outline: 1px solid red;
  width: 80%;  
  margin-left: auto;
  margin-right: auto;    
}

Kalo semua sisi sama, kita bisa pake sintaks shorthand:

header .container {
  margin: 20px;
}

Artinya, ada jarak kosong 20px di semua sisi elemen (atas, kanan, bawah, kiri).

Kalo mau beda-beda di setiap sisi:

.element {
  margin: 10px 20px 30px 40px; /* atas, kanan, bawah, kiri */
}

Sama seperti padding, kalo atas sama dengan bawah, kiri sama dengan kanan:

.element {
  margin: 10px 20px; /* atas-bawah 10px, kiri-kanan 20px */
}
tip

Padding vs Margin

Kedua properti ini mengatur ruang kosong. Bedanya, pertama, kalo padding kita atur dari sudut pandang kontainer atau parent, margin dari sudut pandang elemen kontennya. Yang kedua, padding nggak bisa dikasih nilai auto & karena itu nggak bisa dipake untuk keperluan centering elemen seperti yang kita buat di atas.

Lebar Elastis​