Kompetensi yang Diharapkan

Setelah menyelesaikan latihan ini, peserta didik mampu:

Memahami konsep HTML Semantic.
Menggunakan tag semantic pada website.
Membuat struktur website yang baik dan sesuai standar.
Menggabungkan HTML dan CSS.
Membuat website profil pribadi sederhana yang responsif.

A. TEORI SINGKAT

Apa itu HTML Semantic?

HTML Semantic adalah penggunaan tag HTML yang memiliki makna atau arti terhadap isi kontennya.

Sebelum HTML Semantic

<div id="header">
</div>

<div id="menu">
</div>

<div id="content">
</div>

<div id="footer">
</div>

Browser tidak mengetahui fungsi masing-masing bagian.

Sesudah HTML Semantic

<header></header>

<nav></nav>

<main></main>

<section></section>

<article></article>

<footer></footer>

Browser, mesin pencari, dan programmer lain dapat memahami struktur website dengan lebih mudah.

B. STRUKTUR WEBSITE YANG AKAN DIBUAT

Website Profil Pribadi

+--------------------------------+
|           HEADER               |
+--------------------------------+
|           MENU                 |
+--------------------------------+
|           BANNER               |
+--------------------------------+
|      TENTANG SAYA              |
+--------------------------------+
|      KEAHLIAN                 |
+--------------------------------+
|      PORTOFOLIO               |
+--------------------------------+
|      KONTAK                   |
+--------------------------------+
|           FOOTER               |
+--------------------------------+

C. PERSIAPAN FOLDER PROYEK

Buat struktur folder berikut:

profil-pribadi/

│
├── index.html
│
├── css/
│   └── style.css
│
└── img/
    ├── foto.jpg
    ├── project1.jpg
    ├── project2.jpg
    └── project3.jpg

D. MEMBUAT FILE HTML

Langkah 1: Kerangka Dasar

File:

index.html

<!DOCTYPE html>
<html lang="id">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Profil Pribadi</title>

<link rel="stylesheet" href="css/style.css">

</head>

<body>

</body>

</html>

E. MEMBUAT HEADER

Tambahkan kode berikut di dalam <body>.

<header>

<h1>Deka Wildan</h1>

<p>Web Developer | Guru RPL | Content Creator</p>

</header>

Penjelasan:

Tag <header> digunakan sebagai bagian kepala website.

F. MEMBUAT NAVIGASI

<nav>

<ul>

<li><a href="#tentang">Tentang</a></li>

<li><a href="#keahlian">Keahlian</a></li>

<li><a href="#portofolio">Portofolio</a></li>

<li><a href="#kontak">Kontak</a></li>

</ul>

</nav>

Penjelasan:

Tag <nav> digunakan untuk menu navigasi.

G. MEMBUAT KONTEN UTAMA

<main>

</main>

Tag <main> berisi isi utama website.

H. MEMBUAT SECTION TENTANG SAYA

Tambahkan di dalam <main>.

<section id="tentang">

<h2>Tentang Saya</h2>

<img src="img/foto.jpg" alt="Foto Profil">

<p>

Saya adalah seorang web developer dan guru yang memiliki minat dalam pengembangan aplikasi berbasis web, mobile, dan teknologi cloud computing.

</p>

</section>

I. MEMBUAT SECTION KEAHLIAN

<section id="keahlian">

<h2>Keahlian</h2>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>PHP Laravel</li>

<li>MySQL</li>

<li>Python</li>

</ul>

</section>

J. MEMBUAT PORTOFOLIO

Gunakan tag semantic <article>.

<section id="portofolio">

<h2>Portofolio</h2>

<article>

<h3>Aplikasi Kasir</h3>

<img src="img/project1.jpg">

<p>

Aplikasi kasir untuk UMKM menggunakan Laravel.

</p>

</article>

<article>

<h3>Sistem Absensi</h3>

<img src="img/project2.jpg">

<p>

Sistem absensi berbasis web.

</p>

</article>

<article>

<h3>Website Sekolah</h3>

<img src="img/project3.jpg">

<p>

Website profil sekolah modern.

</p>

</article>

</section>

K. MEMBUAT KONTAK

<section id="kontak">

<h2>Kontak</h2>

<p>Email : [email protected]</p>

<p>WhatsApp : 081234567890</p>

<p>Instagram : @dekawildan</p>

</section>

L. MEMBUAT FOOTER

<footer>

<p>

Copyright © 2026 Deka Wildan

</p>

</footer>

M. MEMBUAT CSS

File:

css/style.css

Style Dasar

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

Body

body{
    font-family:Arial, sans-serif;
    line-height:1.6;
}

Header

header{
    background:#0d6efd;
    color:white;
    text-align:center;
    padding:40px;
}

Section

section{
    padding:40px;
}

Foto Profil

#tentang img{
    width:200px;
    border-radius:50%;
}

Portofolio

#portofolio{
    display:grid;
    grid-template-columns:
    repeat(3,1fr);

    gap:20px;
}

Artikel

article{

    border:1px solid #ddd;

    padding:15px;

    text-align:center;
}

Gambar Portofolio

article img{
    width:100%;
}

Footer

footer{
    background:#333;
    color:white;
    text-align:center;
    padding:20px;
}

N. MEMBUAT RESPONSIVE DESIGN

Tambahkan di bagian bawah CSS.

@media(max-width:768px){

    nav ul{
        flex-direction:column;
        text-align:center;
    }

    #portofolio{
        grid-template-columns:1fr;
    }

}

HASIL YANG DIHARAPKAN

Peserta didik menghasilkan website yang memiliki:

✅ Header profesional
✅ Menu navigasi
✅ Profil pribadi
✅ Daftar keahlian
✅ Portofolio proyek
✅ Informasi kontak
✅ Footer
✅ Layout Grid
✅ Layout Flexbox
✅ Responsive Mobile

LATIHAN MANDIRI

Latihan 1

Modifikasi warna website sesuai warna favorit masing-masing.

Latihan 2

Tambahkan menu:

Pendidikan
Pengalaman

menggunakan tag <section>.

Latihan 3

Tambahkan minimal 5 portofolio.

Latihan 4

Tambahkan ikon media sosial.

TUGAS PROYEK SISWA

Proyek Individu

Buat Website Profil Pribadi dengan ketentuan:

Wajib Menggunakan

<header>
<nav>
<main>
<section>
<article>
<footer>

Isi Website

Foto Profil
Biodata
Pendidikan
Keahlian
Pengalaman
Portofolio
Kontak

Kriteria Penilaian

Aspek	Bobot
Struktur HTML Semantic	20%
CSS Layout	20%
Flexbox	15%
Grid	15%
Responsive Design	15%
Kerapian Kode	15%

Nilai Tambahan

Peserta didik yang mampu menambahkan:

Dark Mode
Animasi CSS
Tombol WhatsApp
Efek Hover pada Portofolio

akan memperoleh nilai bonus.