Setelah menyelesaikan latihan ini, peserta didik mampu:<\/p>\n\n\n\n
HTML Semantic adalah penggunaan tag HTML yang memiliki makna atau arti terhadap isi kontennya.<\/p>\n\n\n\n
<div id=\"header\">
<\/div>
<div id=\"menu\">
<\/div>
<div id=\"content\">
<\/div>
<div id=\"footer\">
<\/div><\/code><\/pre>\n\n\n\nBrowser tidak mengetahui fungsi masing-masing bagian.<\/p>\n\n\n\n
\n\n\n\nSesudah HTML Semantic<\/h3>\n\n\n\n<header><\/header>
<nav><\/nav>
<main><\/main>
<section><\/section>
<article><\/article>
<footer><\/footer><\/code><\/pre>\n\n\n\nBrowser, mesin pencari, dan programmer lain dapat memahami struktur website dengan lebih mudah.<\/p>\n\n\n\n
\n\n\n\nB. STRUKTUR WEBSITE YANG AKAN DIBUAT<\/h1>\n\n\n\n
Website Profil Pribadi<\/p>\n\n\n\n
+--------------------------------+
| HEADER |
+--------------------------------+
| MENU |
+--------------------------------+
| BANNER |
+--------------------------------+
| TENTANG SAYA |
+--------------------------------+
| KEAHLIAN |
+--------------------------------+
| PORTOFOLIO |
+--------------------------------+
| KONTAK |
+--------------------------------+
| FOOTER |
+--------------------------------+<\/code><\/pre>\n\n\n\n
\n\n\n\nC. PERSIAPAN FOLDER PROYEK<\/h1>\n\n\n\n
Buat struktur folder berikut:<\/p>\n\n\n\n
profil-pribadi\/
\u2502
\u251c\u2500\u2500 index.html
\u2502
\u251c\u2500\u2500 css\/
\u2502 \u2514\u2500\u2500 style.css
\u2502
\u2514\u2500\u2500 img\/
\u251c\u2500\u2500 foto.jpg
\u251c\u2500\u2500 project1.jpg
\u251c\u2500\u2500 project2.jpg
\u2514\u2500\u2500 project3.jpg<\/code><\/pre>\n\n\n\n
\n\n\n\nD. MEMBUAT FILE HTML<\/h1>\n\n\n\nLangkah 1: Kerangka Dasar<\/h2>\n\n\n\n
File:<\/p>\n\n\n\n
index.html<\/code><\/pre>\n\n\n\n<!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><\/code><\/pre>\n\n\n\n
\n\n\n\nE. MEMBUAT HEADER<\/h1>\n\n\n\n
Tambahkan kode berikut di dalam <body><\/code>.<\/p>\n\n\n\n<header>
<h1>Deka Wildan<\/h1>
<p>Web Developer | Guru RPL | Content Creator<\/p>
<\/header><\/code><\/pre>\n\n\n\nPenjelasan:<\/p>\n\n\n\n
Tag <header><\/code> digunakan sebagai bagian kepala website.<\/p>\n\n\n\n
\n\n\n\nF. MEMBUAT NAVIGASI<\/h1>\n\n\n\n<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><\/code><\/pre>\n\n\n\nPenjelasan:<\/p>\n\n\n\n
Tag <nav><\/code> digunakan untuk menu navigasi.<\/p>\n\n\n\n
\n\n\n\nG. MEMBUAT KONTEN UTAMA<\/h1>\n\n\n\n<main>
<\/main><\/code><\/pre>\n\n\n\nTag <main><\/code> berisi isi utama website.<\/p>\n\n\n\n
\n\n\n\nH. MEMBUAT SECTION TENTANG SAYA<\/h1>\n\n\n\n
Tambahkan di dalam <main><\/code>.<\/p>\n\n\n\n<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><\/code><\/pre>\n\n\n\n
\n\n\n\nI. MEMBUAT SECTION KEAHLIAN<\/h1>\n\n\n\n<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><\/code><\/pre>\n\n\n\n
\n\n\n\nJ. MEMBUAT PORTOFOLIO<\/h1>\n\n\n\n
Gunakan tag semantic <article><\/code>.<\/p>\n\n\n\n<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><\/code><\/pre>\n\n\n\n
\n\n\n\nK. MEMBUAT KONTAK<\/h1>\n\n\n\n<section id=\"kontak\">
<h2>Kontak<\/h2>
<p>Email : deka@example.com<\/p>
<p>WhatsApp : 081234567890<\/p>
<p>Instagram : @dekawildan<\/p>
<\/section><\/code><\/pre>\n\n\n\n
\n\n\n\nL. MEMBUAT FOOTER<\/h1>\n\n\n\n<footer>
<p>
Copyright \u00a9 2026 Deka Wildan
<\/p>
<\/footer><\/code><\/pre>\n\n\n\n
\n\n\n\nM. MEMBUAT CSS<\/h1>\n\n\n\n
File:<\/p>\n\n\n\n
css\/style.css<\/code><\/pre>\n\n\n\n
\n\n\n\nStyle Dasar<\/h2>\n\n\n\n*{
margin:0;
padding:0;
box-sizing:border-box;
}<\/code><\/pre>\n\n\n\n
\n\n\n\nBody<\/h2>\n\n\n\nbody{
font-family:Arial, sans-serif;
line-height:1.6;
}<\/code><\/pre>\n\n\n\n
\n\n\n\nHeader<\/h2>\n\n\n\nheader{
background:#0d6efd;
color:white;
text-align:center;
padding:40px;
}<\/code><\/pre>\n\n\n\n
\n\n\n\nMenu<\/h2>\n\n\n\nnav{
background:#333;
}
nav ul{
display:flex;
justify-content:center;
list-style:none;
}
nav ul li{
margin:15px;
}
nav ul li a{
color:white;
text-decoration:none;
}<\/code><\/pre>\n\n\n\n
\n\n\n\nSection<\/h2>\n\n\n\nsection{
padding:40px;
}<\/code><\/pre>\n\n\n\n
\n\n\n\nFoto Profil<\/h2>\n\n\n\n#tentang img{
width:200px;
border-radius:50%;
}<\/code><\/pre>\n\n\n\n
\n\n\n\nPortofolio<\/h2>\n\n\n\n#portofolio{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:20px;
}<\/code><\/pre>\n\n\n\n
\n\n\n\nArtikel<\/h2>\n\n\n\narticle{
border:1px solid #ddd;
padding:15px;
text-align:center;
}<\/code><\/pre>\n\n\n\n
\n\n\n\nGambar Portofolio<\/h2>\n\n\n\narticle img{
width:100%;
}<\/code><\/pre>\n\n\n\n
\n\n\n\nFooter<\/h2>\n\n\n\nfooter{
background:#333;
color:white;
text-align:center;
padding:20px;
}<\/code><\/pre>\n\n\n\n
\n\n\n\nN. MEMBUAT RESPONSIVE DESIGN<\/h1>\n\n\n\n
Tambahkan di bagian bawah CSS.<\/p>\n\n\n\n
@media(max-width:768px){
nav ul{
flex-direction:column;
text-align:center;
}
#portofolio{
grid-template-columns:1fr;
}
}<\/code><\/pre>\n\n\n\n
\n\n\n\nHASIL YANG DIHARAPKAN<\/h1>\n\n\n\n
Peserta didik menghasilkan website yang memiliki:<\/p>\n\n\n\n
\u2705 Header profesional
\u2705 Menu navigasi
\u2705 Profil pribadi
\u2705 Daftar keahlian
\u2705 Portofolio proyek
\u2705 Informasi kontak
\u2705 Footer
\u2705 Layout Grid
\u2705 Layout Flexbox
\u2705 Responsive Mobile<\/p>\n\n\n\n
\n\n\n\nLATIHAN MANDIRI<\/h1>\n\n\n\nLatihan 1<\/h2>\n\n\n\n
Modifikasi warna website sesuai warna favorit masing-masing.<\/p>\n\n\n\n
\n\n\n\nLatihan 2<\/h2>\n\n\n\n
Tambahkan menu:<\/p>\n\n\n\n
Pendidikan
Pengalaman<\/code><\/pre>\n\n\n\nmenggunakan tag <section><\/code>.<\/p>\n\n\n\n
\n\n\n\nLatihan 3<\/h2>\n\n\n\n
Tambahkan minimal 5 portofolio.<\/p>\n\n\n\n
\n\n\n\nLatihan 4<\/h2>\n\n\n\n
Tambahkan ikon media sosial.<\/p>\n\n\n\n
\n\n\n\nTUGAS PROYEK SISWA<\/h1>\n\n\n\nProyek Individu<\/h2>\n\n\n\n
Buat Website Profil Pribadi dengan ketentuan:<\/p>\n\n\n\n
Wajib Menggunakan<\/h3>\n\n\n\n\n<header><\/code><\/li>\n\n\n\n<nav><\/code><\/li>\n\n\n\n<main><\/code><\/li>\n\n\n\n<section><\/code><\/li>\n\n\n\n<article><\/code><\/li>\n\n\n\n<footer><\/code><\/li>\n<\/ul>\n\n\n\nIsi Website<\/h3>\n\n\n\n\n- Foto Profil<\/li>\n\n\n\n
- Biodata<\/li>\n\n\n\n
- Pendidikan<\/li>\n\n\n\n
- Keahlian<\/li>\n\n\n\n
- Pengalaman<\/li>\n\n\n\n
- Portofolio<\/li>\n\n\n\n
- Kontak<\/li>\n<\/ol>\n\n\n\n
Kriteria Penilaian<\/h3>\n\n\n\nAspek<\/th> Bobot<\/th><\/tr><\/thead> Struktur HTML Semantic<\/td> 20%<\/td><\/tr> CSS Layout<\/td> 20%<\/td><\/tr> Flexbox<\/td> 15%<\/td><\/tr> Grid<\/td> 15%<\/td><\/tr> Responsive Design<\/td> 15%<\/td><\/tr> Kerapian Kode<\/td> 15%<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nNilai Tambahan<\/h3>\n\n\n\n
Peserta didik yang mampu menambahkan:<\/p>\n\n\n\n
\n- Dark Mode<\/li>\n\n\n\n
- Animasi CSS<\/li>\n\n\n\n
- Tombol WhatsApp<\/li>\n\n\n\n
- Efek Hover pada Portofolio<\/li>\n<\/ul>\n\n\n\n
akan memperoleh nilai bonus.<\/p>\n","protected":false},"excerpt":{"rendered":"
Kompetensi yang Diharapkan Setelah menyelesaikan latihan ini, peserta didik mampu: A. TEORI SINGKAT Apa itu HTML Semantic? HTML Semantic adalah…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[15],"tags":[33],"class_list":["post-535","post","type-post","status-publish","format-standard","hentry","category-tutorial-css","tag-tutorial-css"],"_links":{"self":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/comments?post=535"}],"version-history":[{"count":1,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/535\/revisions"}],"predecessor-version":[{"id":536,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/535\/revisions\/536"}],"wp:attachment":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/media?parent=535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/categories?post=535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/tags?post=535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}