LATIHAN PRAKTIK – MEMBANGUN WEBSITE PROFIL PRIBADI MENGGUNAKAN HTML SEMANTIC DAN CSS

deka — Tue, 16 Jun 2026 01:36:17 +0000

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

Browser tidak mengetahui fungsi masing-masing bagian.

Sesudah HTML Semantic

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









Profil Pribadi

E. MEMBUAT HEADER

Tambahkan kode berikut di dalam .



Deka Wildan


Web Developer | Guru RPL | Content Creator

Penjelasan:

Tag

digunakan sebagai bagian kepala website.

F. MEMBUAT NAVIGASI





Tentang


Keahlian


Portofolio


Kontak

Penjelasan:

Tag

digunakan untuk menu navigasi.

G. MEMBUAT KONTEN UTAMA

Tag

berisi isi utama website.

H. MEMBUAT SECTION TENTANG SAYA

Tambahkan di dalam



Tentang Saya






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

I. MEMBUAT SECTION KEAHLIAN



Keahlian




HTML


CSS


JavaScript


PHP Laravel


MySQL


Python

J. MEMBUAT PORTOFOLIO

Gunakan tag semantic



Portofolio




Aplikasi Kasir






Aplikasi kasir untuk UMKM menggunakan Laravel.







Sistem Absensi






Sistem absensi berbasis web.







Website Sekolah






Website profil sekolah modern.

K. MEMBUAT KONTAK



Kontak


Email : deka@example.com


WhatsApp : 081234567890


Instagram : @dekawildan

L. MEMBUAT FOOTER





Copyright © 2026 Deka Wildan

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

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

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.

BAB 16 – ANIMATION & PROJECT

deka — Mon, 15 Jun 2026 12:58:13 +0000

ANIMATION

CSS dapat membuat animasi tanpa JavaScript.

Contoh

@keyframes bergerak{

    from{
        left:0;
    }

    to{
        left:300px;
    }

}

.box{
    animation:bergerak 3s infinite;
}

Praktik

Membuat tombol berkedip.

@keyframes kedip{

    0%{
        opacity:1;
    }

    50%{
        opacity:0.5;
    }

    100%{
        opacity:1;
    }

}

button{
    animation:kedip 2s infinite;
}

PROYEK AKHIR

WEBSITE PROFIL SEKOLAH

Halaman yang Dibuat

1. Beranda

Berisi:

Logo sekolah
Banner
Sambutan

2. Profil

Berisi:

Sejarah sekolah
Visi dan misi

3. Jurusan

Menampilkan:

Menggunakan CSS Grid.

4. Galeri

Menampilkan foto kegiatan sekolah.

Menggunakan Grid.

5. Kontak

Berisi:

Alamat
Telepon
Email

PROYEK AKHIR LANJUTAN

LANDING PAGE BISNIS UMKM

Fitur:

Navbar Flexbox
Hero Section
Produk Grid
Tombol WhatsApp
Responsive Mobile
Hover Effect
Animasi Tombol

UJI KOMPETENSI SISWA

Pilihan Praktik

Paket A

Buat Website Profil Pribadi

Kriteria:

✓ Responsive
✓ Flexbox
✓ Grid
✓ Hover Effect

Paket B

Buat Website Toko Online Sederhana

Kriteria:

✓ Navbar
✓ Katalog Produk
✓ Responsive
✓ Animasi

Paket C

Buat Website Sekolah

Kriteria:

✓ Menu Navigasi
✓ Profil
✓ Galeri
✓ Kontak
✓ Responsive

BAB 15 – TRANSFORM & TRANSITION

deka — Mon, 15 Jun 2026 12:56:47 +0000

TRANSFORM

Transform digunakan untuk mengubah bentuk objek.

Memperbesar

transform:scale(1.2);

Memutar

transform:rotate(45deg);

Menggeser

transform:translateX(50px);

Praktik

img:hover{
    transform:scale(1.1);
}

TRANSITION

Transition membuat perubahan lebih halus.

Contoh

button{
    transition:0.5s;
}

button:hover{
    background:red;
}

Praktik

.box{
    transition:0.3s;
}

.box:hover{
    transform:scale(1.1);
}

BAB 14 – RESPONSIVE DESIGN & MEDIA QUERY

deka — Mon, 15 Jun 2026 12:54:32 +0000

Pengertian

Responsive Design adalah teknik agar website dapat menyesuaikan berbagai ukuran layar.

Perangkat

Perangkat	Lebar
HP	< 768px
Tablet	768px
Laptop	1024px
Desktop	> 1200px

MEDIA QUERY

Pengertian

Media Query digunakan untuk mengubah tampilan berdasarkan ukuran layar.

Contoh

@media(max-width:768px){

    body{
        background:lightblue;
    }

}

Jika layar kurang dari 768px maka background berubah.

Praktik

.container{
    display:flex;
}

@media(max-width:768px){

    .container{
        flex-direction:column;
    }

}

Hasil

Desktop:

HTML CSS JS

Mobile:

HTML
CSS
JS

Latihan

Buat 3 kartu produk:

Desktop:

[1][2][3]

Mobile:

[1]
[2]
[3]

BAB 13 – CSS GRID

deka — Mon, 15 Jun 2026 12:52:57 +0000

Pengertian

CSS Grid digunakan untuk membuat layout dua dimensi.

Sangat cocok untuk:

Dashboard
Galeri
Landing Page

Struktur Dasar

.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
}

Hasil

1 2
3 4

Grid 3 Kolom

grid-template-columns:
1fr 1fr 1fr;

Memberi Jarak

gap:20px;

Praktik

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

    gap:20px;
}

Latihan

Buat galeri foto:

6 gambar
3 kolom
Jarak 10px

Tugas Praktik

Buat halaman produk UMKM:

Foto produk
Nama produk
Harga

Ditampilkan menggunakan Grid.

BAB 12 – FLEXBOX

deka — Mon, 15 Jun 2026 12:51:40 +0000

A. Pengertian Flexbox

Flexbox digunakan untuk mengatur layout satu dimensi.

Sangat sering digunakan dalam website modern.

Struktur Dasar

HTML

CSS

.container{
    display:flex;
}

Hasil

[1] [2] [3]

B. Justify Content

Mengatur posisi horizontal.

justify-content:center;

Nilai lain:

space-between
space-around
space-evenly
flex-start
flex-end

C. Align Items

Mengatur posisi vertikal.

align-items:center;

Praktik 1


    HTML

    CSS

    JS

.container{
    display:flex;
    justify-content:center;
    gap:20px;
}

Latihan

Buat 4 kotak berjajar menggunakan Flexbox.

Tugas Praktik

Buat menu navigasi horizontal:

Home
Profil
Galeri
Kontak

Menggunakan Flexbox.

BAB 11 – POSITION

deka — Mon, 15 Jun 2026 12:50:41 +0000

POSITION

Position digunakan untuk menentukan posisi elemen.

A. Static

Default browser.

position:static;

B. Relative

position:relative;
left:50px;

C. Absolute

position:absolute;
top:100px;
left:50px;

D. Fixed

Menu tetap meskipun halaman digulir.

position:fixed;
top:0;

E. Sticky

position:sticky;
top:0;

Praktik

Membuat menu tetap di atas:

.menu{
    position:fixed;
    top:0;
    width:100%;
}

BAB 10 – DISPLAY

deka — Mon, 15 Jun 2026 12:49:39 +0000

DISPLAY

Display menentukan bagaimana elemen ditampilkan.

A. Block

Contoh elemen block:

Judul

Paragraf

Karakteristik:

Selalu membuat baris baru
Lebar penuh

B. Inline

Contoh:

HTML
CSS

Karakteristik:

Tidak membuat baris baru

C. Inline-Block

display:inline-block;

Gabungan block dan inline.

Praktik

Home

Profil

Kontak

.menu{
    display:inline-block;
    background:blue;
    color:white;
    padding:10px;
}

BAB 9 – WIDTH DAN HEIGHT

deka — Mon, 15 Jun 2026 12:48:22 +0000

A. Width

Width digunakan untuk mengatur lebar.

div{
    width:400px;
}

B. Height

Height digunakan untuk mengatur tinggi.

div{
    height:200px;
}

Praktik


    Belajar CSS

.kotak{
    width:400px;
    height:200px;
    background-color:lightblue;
}

BAB 8 – CSS BOX MODEL

deka — Mon, 15 Jun 2026 12:46:52 +0000

A. Pengertian Box Model

Dalam CSS, setiap elemen dianggap sebagai sebuah kotak (box).

Ketika browser menampilkan sebuah elemen, sebenarnya browser membuat struktur seperti berikut:

+-------------------------+
|         Margin          |
|  +-------------------+  |
|  |      Border       |  |
|  | +---------------+ |  |
|  | |    Padding    | |  |
|  | | +-----------+ | |  |
|  | | | Content   | | |  |
|  | | +-----------+ | |  |
|  | +---------------+ |  |
|  +-------------------+  |
+-------------------------+

Komponen Box Model terdiri dari:

Content
Padding
Border
Margin

B. Content

Content adalah isi utama elemen.

Contoh:

Belajar CSS

Tulisan “Belajar CSS” adalah content.

C. Padding

Padding adalah ruang di dalam elemen.

p{
    padding:20px;
}

Ilustrasi:

+----------------+
|   Padding      |
|  Belajar CSS   |
|   Padding      |
+----------------+

D. Border

Border adalah garis tepi elemen.

p{
    border:2px solid black;
}

E. Margin

Margin adalah jarak antar elemen.

p{
    margin:30px;
}

Praktik 1

Buat file HTML berikut:


    Kotak Pertama

CSS:

.box{
    width:300px;
    padding:20px;
    border:2px solid blue;
    margin:30px;
}

Latihan

Buat kotak berukuran 400px.
Beri padding 25px.
Beri border merah 3px.
Beri margin 50px.

Tugas Praktik

Buat kartu profil siswa menggunakan Box Model yang berisi:

Foto
Nama
Kelas
Jurusan

Dengan border dan padding yang rapi.

tutorial css – bisasoftware.id

LATIHAN PRAKTIK – MEMBANGUN WEBSITE PROFIL PRIBADI MENGGUNAKAN HTML SEMANTIC DAN CSS

Kompetensi yang Diharapkan

A. TEORI SINGKAT

Apa itu HTML Semantic?

Sebelum HTML Semantic

Sesudah HTML Semantic

B. STRUKTUR WEBSITE YANG AKAN DIBUAT

C. PERSIAPAN FOLDER PROYEK

D. MEMBUAT FILE HTML

Langkah 1: Kerangka Dasar

E. MEMBUAT HEADER