HTML5 (Struktur)

HTML (HyperText Markup Language) adalah pondasi utama web. Ia berfungsi untuk menentukan bagian-bagian konten dalam halaman web tanpa menggunakan logika pemrograman.

1. Struktur Dasar Dokumen

Setiap file HTML5 harus memiliki kerangka standar sebagai berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar HTML - Teknik Informatika UMMI</title>
</head>
<body>
    <h1>Halo, Teknik Informatika UMMI</h1>
    <p>Selamat datang di perkuliahan web programming.</p>
</body>
</html>

Penjelasan Komponen:

  • <!DOCTYPE html>: Memberitahu browser bahwa ini adalah HTML5.
  • <html>: Elemen utama yang membungkus seluruh konten situs.
  • <head>: Berisi metadata (informasi seperti judul, charset, dan link CSS).
  • <body>: Berisi semua konten yang tampil secara visual kepada user.

2. Elemen dan Atribut

Elemen terdiri dari tag pembuka, isi konten, dan tag penutup.

A. Heading dan Teks

Digunakan untuk hierarki konten (sangat penting untuk SEO):

Elemen Tag HTML Fungsi & Kegunaan
Heading 1 <h1>...</h1> Judul Utama: Paling penting. Biasanya hanya 1 per halaman.
Heading 2 <h2>...</h2> Sub-judul: Untuk bagian atau bab besar.
Heading 3 <h3>...</h3> Sub-sub-judul: Rincian di bawah Heading 2.
Heading 4-6 <h4> s/d <h6> Detail: Digunakan untuk struktur yang lebih mendalam.
Paragraph <p>...</p> Teks Konten: Elemen standar untuk paragraf teks.
Line Break <br> Baris Baru: Memaksa teks pindah ke baris bawah tanpa spasi antar paragraf.

Catatan: Semakin kecil angka tag (h1), semakin besar ukuran teksnya secara default.

B. Atribut HTML

Atribut memberikan informasi tambahan pada elemen:

  • Link: <a href="https://google.com">Google</a> (href adalah alamat tujuan).
  • Gambar: <img src="foto.jpg" alt="Deskripsi Foto"> (src adalah sumber, alt deskripsi gambar).

Materi tabel sebaiknya diletakkan di dalam Bagian 1: HTML5, tepatnya setelah pembahasan Elemen dan Atribut Teks. Tabel adalah elemen struktur konten, sehingga sangat logis jika diletakkan di sana sebelum masuk ke materi Semantic HTML.

Berikut adalah materi tabel sederhana yang sudah disesuaikan untuk disisipkan ke dalam konten utama:

C. Tabel HTML

Tabel digunakan untuk menyajikan data dalam bentuk baris dan kolom.

Elemen Dasar Tabel:

  • <table> : Pembungkus utama tabel.
  • <tr> (Table Row) : Membuat baris baru.
  • <th> (Table Header) : Judul kolom (teks biasanya tebal dan di tengah).
  • <td> (Table Data) : Sel atau isi data dalam kolom.

Contoh Kode Tabel Sederhana:

<table border="1">
    <tr>
        <th>No</th>
        <th>Mata Kuliah</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Pemrograman Web</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Sistem Operasi</td>
    </tr>
</table>

3. Semantic HTML5

Semantic HTML adalah penggunaan tag sesuai dengan maknanya (konteks), bukan hanya sekadar tampilannya.

  • <header> : Area logo atau navigasi atas.
  • <nav> : Link navigasi utama.
  • <main> : Konten utama halaman.
  • <section> : Pengelompokan konten satu tema.
  • <article> : Konten mandiri (blog post/berita).
  • <aside> : Konten pendukung (sidebar/iklan).
  • <footer> : Informasi hak cipta atau kontak di bagian bawah.

4. Form HTML5 & Validasi Input

Form digunakan untuk menerima input user. HTML5 mempermudah validasi tanpa harus selalu pakai JavaScript di awal dengan memanfaatkan atribut type yang spesifik:

  • <input type="email"> : Memastikan format email benar.
  • <input type="number"> : Membatasi input hanya angka.
  • <input type="date"> : Menampilkan date picker bawaan browser.
  • <input type="color"> : Menampilkan pemilih warna.

Contoh Kode Form:

<form>
    <label>Nama:</label>
    <input type="text">

    <label>Email:</label>
    <input type="email" required>

    <button type="submit">Kirim</button>
</form>

CSS3 (Tampilan)

CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan (style) dan tata letak HTML.

1. Cara Penggunaan

  1. Inline: Langsung di tag (<p style="color:red;">).
<p style="color:red;">Merah</p>
  1. Internal: Di dalam tag <style> di bagian <head>.
<style>
p {
    color: blue;
}
</style>
  1. External (Best Practice): File .css terpisah dihubungkan dengan :
<link rel="stylesheet" href="style.css">

2. Selector CSS

/* Berdasarkan Tag */
p { color: black; }

/* Berdasarkan Class */
.box { background: yellow; }

/* Berdasarkan ID */
#judul { font-size: 24px; }

3. Box Model

Setiap elemen HTML dianggap sebagai kotak:

  • Content: Isi konten.
  • Padding: Jarak dalam (isi ke border).
  • Border: Garis tepi.
  • Margin: Jarak luar (antar elemen).

Contoh:

div {
    margin: 10px;
    padding: 20px;
    border: 1px solid black;
}

4. Layout Modern & Responsive

  • Flexbox: Layout satu dimensi (baris atau kolom).

    container {
	display: flex;
	justify-content: space-between;
	align-items: center;

  • Grid: Layout dua dimensi (baris dan kolom).

    container {
	display: grid;
	grid-template-columns: 1fr 1fr;

  • Media Query: Digunakan agar web tampil baik di HP, Tablet, dan Laptop.

    @media (max-width: 768px) {
    h1 { font-size: 18px; }
}

Contoh Studi Kasus

<!DOCTYPE html>
<html>
<head>
    <title>Profil</title>
    <style>
        body { font-family: Arial; text-align: center; background-color: #f5f5f5; }
        .card { 
            border: 1px solid #ccc; 
            padding: 20px; 
            width: 300px; 
            margin: 50px auto; 
            background: white;
            border-radius: 10px;
        }
        button { background: blue; color: white; padding: 10px; border: none; border-radius: 5px; }
    </style>
</head>
<body>

<div class="card">
    <h1>Nadia</h1>
    <p>Mahasiswa Informatika UMMI</p>
    <button>Follow</button>
</div>

</body>
</html>