Pertemuan 02 | Struktur Dasar HTML

SLIDE 01

STRUKTUR DASAR HTML

PERTEMUAN 02Menyusun Isi dan Struktur Halaman WebDari file kosong menjadi halaman yang bermakna.

Target Pertemuan 02 Petunjuk Praktikum Preview Setelah HTML–CSS Lanjutkan setiap tahap pada satu file index.html menggunakan petunjuk praktikum.

DOSEN PENGAMPUI Kayan Herdiana, S.Kom., M.Kom.081 999 886 827

FONDASI

Dokumen HTML

Mengenal kerangka dasar yang dibaca oleh browser.

KONTEN

Elemen HTML

Menyusun teks, tautan, gambar, daftar, dan bagian halaman.

TARGET

Menyelesaikan 11 tahap praktikum dan menghasilkan halaman profil pada index.html.

SLIDE 02

CAPAIAN PEMBELAJARAN PERTEMUAN 02

Setelah perkuliahan, mahasiswa mampu:

MEMAHAMI

01Fungsi HTML sebagai struktur halaman

02Kerangka dokumen HTML yang valid

03Fungsi atribut href, src, dan alt

04Peran elemen HTML semantik

MEMPRAKTIKKAN

✓

Menggunakan heading dan paragraf

✓

Menambahkan link dan gambar

✓

Menyusun daftar dengan list

✓

Membuat halaman profil sederhana

SLIDE 03

MENGINGAT KEMBALI PERTEMUAN 01

Browser membutuhkan dokumen HTML untuk membentuk halaman yang dilihat pengguna.

</>

File HTMLBerisi struktur dan konten

index.html

→dibaca

◉

BrowserMemahami elemen HTML

Membentuk DOM

→dirender

▤

Halaman WebDitampilkan kepada pengguna

Teks · Gambar · Link

PERTANYAAN

Apa fungsi HTML?Apa tugas browser?Apa itu render?Di mana hasil tampil?

SLIDE 04

DISKUSI PEMANTIK STRUKTUR SEBUAH HALAMAN

Bayangkan halaman website kampus. Bagian apa saja yang dapat kita temukan?

AMATIBagian Halaman

Judul atau identitas website.
Menu navigasi.
Konten utama.
Gambar atau media.
Informasi penutup.

DISKUSIKANMakna Strukturnya

ABagian mana yang paling penting?

BBagaimana pengguna menemukan informasi?

CApa akibatnya jika semua konten dicampur?

WAKTU

Diskusikan bersama teman selama 3-5 menit.

SLIDE 05

PENGERTIAN DAN PERAN HTML

PENGERTIAN

HyperText Markup Language

HTML adalah bahasa markup untuk menyusun struktur dan memberi makna pada konten halaman web. HTML menandai konten, tetapi tidak menjalankan logika seperti bahasa pemrograman.

StrukturKontenMakna

KODE→HALAMAN

CONTOH ELEMEN

Konten yang Disusun

Judul dan paragraf
Tautan
Gambar
Daftar
Form

PERAN

HTML menyusun struktur, CSS mengatur tampilan, dan JavaScript menambahkan interaksi.

SLIDE 07

CARA BROWSER MEMBACA HTML

Browser mengubah kode HTML menjadi struktur yang dapat ditampilkan dan digunakan.

01File HTMLBrowser membuka index.html

→

02Membaca TagTag dipahami dari atas ke bawah

→

03Membentuk DOMElemen disusun sebagai struktur pohon

→

04RenderHalaman tampil di layar

ALUR

File HTML → tag dibaca → DOM dibentuk → halaman dirender.

SLIDE 09

ANATOMI ELEMEN HTML

Tag menjadi penanda, sedangkan tag beserta atribut dan kontennya membentuk satu elemen HTML.

BEDAH ELEMEN

<p adalah tag pembuka.
class adalah nama atribut.
"intro" adalah nilai atribut.
Isi paragraf adalah konten.
 adalah tag penutup.

HASIL

Seluruh bagian tersebut membentuk satu elemen HTML.

index.html

<p class="intro">
  Isi paragraf
</p>

CATATAN

Atribut memberi informasi tambahan dan memiliki nilai. Sebagian tag seperti <img> tidak memakai tag penutup.

SLIDE 10

ATURAN PENULISAN HTML YANG RAPI

Gunakan huruf kecilTulis <body>, bukan <BODY>.

Indentasi konsistenKonten di dalam elemen dibuat menjorok.

Tutup tag dengan benarPasangkan tag pembuka dan penutup.

Kutip nilai atributContoh: class="intro".

Perhatikan nestingElemen terakhir dibuka harus ditutup lebih dahulu.

Beri nama yang jelasAtribut dan isi harus mudah dipahami.

PRINSIP

Kode yang rapi lebih mudah dibaca, diperiksa, dan dikembangkan.

SLIDE 11

STRUKTUR DASAR DOKUMEN HTML

KERANGKA UTAMA

DOCTYPE menentukan standar HTML.
html membungkus dokumen.
head menyimpan informasi dokumen.
body memuat konten halaman.

URUTAN

Kerangka ditulis lebih dahulu sebelum menambahkan isi.

index.html

<!doctype html>
<html lang="id">
  <head>
    <meta charset="utf-8">
    <title>Profil Saya</title>
  </head>
  <body>
    <h1>Halo!</h1>
  </body>
</html>

SLIDE 12

DOCTYPE, HTML, DAN HEAD

KERANGKA DOKUMEN

<!doctype html>

Memberi tahu browser bahwa dokumen menggunakan standar HTML modern.

<html lang="id">

Elemen akar yang membungkus head dan body. Atribut lang="id" menandai bahasa Indonesia.

bagian head

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Saya</title>
</head>

FUNGSI

head menyimpan informasi dokumen yang tidak menjadi konten utama halaman.

URUTAN

DOCTYPE berada paling atas, lalu elemen html membungkus head dan body.

SLIDE 14

BAGIAN BODY PADA DOKUMEN

YANG DILIHAT PENGGUNA

<body>

Semua konten halaman ditempatkan di dalam body.

JudulParagrafLinkGambarDaftar

bagian body

<body>
  <h1>I Kayan Herdiana</h1>
  <p>Dosen Web Programming</p>
  <a href="https://instiki.ac.id">
    Website INSTIKI
  </a>
</body>

BEDAKAN

<head> memberi informasi kepada browser; <body> menyajikan konten kepada pengguna.

SLIDE 15

AKTIVITAS SUSUN STRUKTUR HTML

Urutkan potongan berikut menjadi dokumen HTML yang benar.

A<body>

B<!doctype html>

C<head>

D<html>

E<title>

F<h1>

G</body>

H</html>

WAKTU

Susun bersama pasangan selama 5 menit. Perhatikan nesting dan tag penutup.

KUNCI INTI

DOCTYPE → html → head → body → penutup body → penutup html.

SLIDE 16

HEADING UNTUK HIERARKI JUDUL

TINGKAT KEPENTINGAN

Judul utama halamanUmumnya satu topik utama.

Bagian utamaMembagi halaman menjadi beberapa bagian.

SubbagianRincian di dalam bagian H2.

Rincian lanjutanGunakan jika hierarki membutuhkannya.

heading.html

<h1>Profil Mahasiswa</h1>

<h2>Tentang Saya</h2>
<h3>Pendidikan</h3>

<h2>Portofolio</h2>
<h3>Website</h3>

PRINSIP

Pilih heading berdasarkan hierarki makna, bukan sekadar ukuran huruf.

SLIDE 17

PARAGRAF DAN PEMISAH KONTEN

PARAGRAF

Membungkus satu gagasan atau paragraf teks.

PINDAH BARIS

Memindahkan baris jika memang diperlukan, misalnya pada alamat.

PEMISAH

<hr>

Menandai perpindahan atau pemisah tematik antarkonten.

contoh teks

<p>Saya belajar HTML untuk menyusun halaman web.</p>
<hr>
<p>Pertemuan berikutnya membahas elemen lainnya.</p>

HINDARI

Jangan memakai banyak   hanya untuk menciptakan jarak visual.

SLIDE 18

FORMAT TEKS YANG BERMAKNA

SANGAT PENTING

Menandai teks yang memiliki kepentingan kuat.

Harap kumpulkan tugas hari ini.

kumpulkan tugas hari ini

MAKNA↔KONTEKS

PENEKANAN

Memberi tekanan pada kata atau frasa dalam konteks kalimat.

Saya mengatakan hari ini, bukan besok.

hari ini

SEMANTIK

strong dan em memberi makna, bukan hanya mengubah tampilan.

SLIDE 19

AKTIVITAS MEMILIH ELEMEN TEKS

Pilih elemen paling tepat: h1, p, strong, atau em.

01Judul utama halaman profil mahasiswa.

02Deskripsi singkat tentang diri sendiri.

03Peringatan bahwa batas pengumpulan adalah hari ini.

04Penekanan pada kata tertentu dalam sebuah kalimat.

DISKUSI

Jelaskan alasan pemilihan elemen, bukan hanya jawabannya.

SLIDE 20

TAUTAN DENGAN ELEMEN ANCHOR

ELEMEN <a>

Menghubungkan Halaman

Atribut href menentukan alamat tujuan ketika tautan diklik.

Teks tautanHarus menjelaskan tujuan.

Alamat tujuanDitulis pada atribut href.

link.html

<a href="https://instiki.ac.id">
  Kunjungi Website INSTIKI
</a>

<a href="profil.html">
  Buka Halaman Profil
</a>

HASIL

Teks dapat diklikBrowser membuka alamat yang tercantum pada href.

SLIDE 21

TAUTAN INTERNAL DAN EKSTERNAL

INTERNAL

Masih dalam website yang sama

Gunakan path relatif untuk menuju file atau bagian lain di dalam proyek.

internal

<a href="profil.html">Profil</a>
<a href="#kontak">Kontak</a>

EKSTERNAL

Menuju website lain

Gunakan URL lengkap beserta protokol https://.

eksternal

<a href="https://instiki.ac.id">
  Website INSTIKI
</a>

TARGET

Gunakan target="_blank" hanya ketika halaman memang perlu dibuka pada tab baru.

SLIDE 22

MENAMPILKAN GAMBAR

ELEMEN IMG

<img>

SRC

Sumber gambarLokasi atau alamat file gambar.

ALT

Deskripsi alternatifMenjelaskan isi atau fungsi gambar.

gambar.html

<img
  src="assets/images/foto-profil.jpg"
  alt="Foto profil I Kayan Herdiana"
  width="240"
>

HASIL

Browser memuat file dari atribut srcElemen img tidak menggunakan tag penutup.

SLIDE 23

PENTINGNYA ATRIBUT ALT

alt menyampaikan informasi ketika gambar tidak dapat dilihat.

AKSESIBILITAS

Screen Reader

Membantu pengguna memahami isi atau fungsi gambar.

GAGAL DIMUAT

Teks Pengganti

Deskripsi tetap tersedia ketika file gambar bermasalah.

KONTEKS

Makna Gambar

Membantu mesin memahami hubungan gambar dengan konten.

DEKORATIF

Jika gambar hanya dekorasi dan tidak membawa informasi, gunakan alt="".

SLIDE 24

PATH FILE DAN STRUKTUR FOLDER

ROOTprofil-mahasiswaPROYEK

HTMLindex.htmlHalaman utama
DIRassetsFolder aset
- DIRimagesFolder gambar
  - JPGfoto.jpgFoto profil

PATH RELATIF

index.html

<img
  src="assets/images/foto.jpg"
  alt="Foto profil mahasiswa"
>

ARTI

Dari index.html, masuk ke folder assets, lalu images.

SLIDE 25

DAFTAR TIDAK BERURUTAN

KAPAN DIGUNAKAN?

<ul> dan <li>

Gunakan ketika urutan item tidak menentukan makna.

Daftar minatMenuFiturKategori

daftar-minat.html

<h2>Minat Saya</h2>
<ul>
  <li>Web Design</li>
  <li>Digital Marketing</li>
  <li>Analisis Data</li>
</ul>

STRUKTUR

Setiap item <li> harus ditempatkan di dalam elemen daftar <ul>.

SLIDE 26

DAFTAR BERURUTAN

KAPAN DIGUNAKAN?

<ol> dan <li>

Gunakan ketika urutan langkah atau posisi item penting.

Langkah kerjaPeringkatProsedurTahapan

langkah.html

<h2>Membuka Halaman HTML</h2>
<ol>
  <li>Buka folder proyek.</li>
  <li>Klik dua kali index.html.</li>
  <li>Periksa hasil di browser.</li>
</ol>

BEDAKAN

ul menampilkan kumpulan item; ol menampilkan urutan yang bermakna.

SLIDE 27

HTML SEMANTIK

Elemen semantik menjelaskan peran suatu bagian halaman melalui nama elemennya.

headerBagian pengantar

navKumpulan navigasi

mainKonten utama

footerBagian penutup

MANFAAT

Struktur lebih mudah dibaca dan dipelihara pengembang.

AKSESIBILITAS

Browser dan teknologi bantu lebih mudah memahami halaman.

SLIDE 28

STRUKTUR HEADER, NAV, MAIN, DAN FOOTER

headerLogo, nama website, atau pengantar.

↓

navTautan navigasi utama.

↓

mainIsi utama yang unik pada halaman.

↓

footerHak cipta atau informasi penutup.

semantic.html

<header>Nama Website</header>
<nav>Beranda · Profil · Kontak</nav>

<main>
  <h1>Profil Mahasiswa</h1>
  <p>Konten utama halaman.</p>
</main>

<footer>© 2026 INSTIKI</footer>

SLIDE 29

DIV DAN ELEMEN SEMANTIK

PEMBUNGKUS UMUM

<div>

Tidak menjelaskan peran konten secara langsung.

Cocok untuk pengelompokan layout.
Berguna jika tidak ada elemen semantik yang tepat.
Maknanya bergantung pada class atau konteks.

PILIH↔SESUAI MAKNA

PEMBUNGKUS BERMAKNA

Elemen Semantik

Nama elemen langsung menjelaskan fungsi bagian halaman.

header untuk pengantar.
nav untuk navigasi.
main untuk konten utama.

PEDOMAN

Gunakan elemen semantik jika maknanya jelas; gunakan div sebagai pembungkus umum.

PRAKTIKUM P02-01

STRUKTUR DOKUMEN HTML

FILE

struktur.html

FOKUS

Kerangka HTML

WAKTU

7 menit

HASIL

Dokumen valid

TUGAS

01
Buat folder proyekGunakan nama pertemuan-02-nim.
02
Buat struktur.htmlLengkapi doctype, html, head, dan body.
03
Ubah titleGunakan nama sendiri.
04
Uji di ChromePastikan file dapat dibuka.

struktur.html

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Nama Mahasiswa</title>
</head>
<body></body>
</html>

SIMPAN

File ini menjadi contoh kerangka untuk latihan berikutnya.

PRAKTIKUM P02-02

HIERARKI HEADING

FILE

heading.html

FOKUS

h1, h2, h3

WAKTU

6 menit

HASIL

Judul berjenjang

TUGAS

01
Salin kerangkaGunakan struktur dari latihan pertama.
02
Nama lengkapGunakan satu h1.
03
Bagian profilGunakan h2.
04
SubbagianGunakan h3 untuk program studi.

heading.html

<h1>Nama Lengkap</h1>
<h2>Tentang Saya</h2>
<h3>Program Studi</h3>

PERIKSA

Pilih heading berdasarkan tingkat informasi, bukan berdasarkan ukuran tulisan.

PRAKTIKUM P02-03

PARAGRAF PROFIL

FILE

paragraf.html

FOKUS

p dan br

WAKTU

6 menit

HASIL

Deskripsi diri

TUGAS

01
Paragraf pertamaPerkenalkan diri dan program studi.
02
Paragraf keduaCeritakan minat atau tujuan belajar.
03
Pemisah barisCoba br pada alamat singkat.
04
PersonalisasiGunakan informasi sendiri.

paragraf.html

<h1>Profil Saya</h1>
<p>Saya mahasiswa Bisnis Digital.</p>
<p>Saya tertarik mempelajari web.</p>
<p>Denpasar<br>Bali</p>

CATATAN

Gunakan paragraf baru untuk gagasan baru. Jangan memakai banyak br sebagai pengganti paragraf.

PRAKTIKUM P02-04

FORMAT TEKS

FILE

format-teks.html

FOKUS

strong, em, mark

WAKTU

6 menit

HASIL

Teks bermakna

TUGAS

01
Informasi pentingGunakan strong.
02
Penekanan suaraGunakan em.
03
SorotanGunakan mark.
04
Keterangan kecilCoba elemen small.

format-teks.html

<p>Saya belajar
  <strong>HTML</strong> dan
  <em>desain web</em>.
</p>
<p><mark>Target utama</mark></p>
<small>Dibuat oleh Nama Anda</small>

PERSONALISASI

Ubah seluruh isi contoh agar sesuai dengan profil sendiri.

PRAKTIKUM P02-05

LINK EKSTERNAL

FILE

link-eksternal.html

FOKUS

a dan href

WAKTU

6 menit

HASIL

Dua tautan

TUGAS

01
Website INSTIKIGunakan URL lengkap.
02
Tautan pribadiPilih media sosial atau portofolio.
03
Teks tautanJelaskan tujuan tautan.
04
Uji klikPastikan alamat dapat dibuka.

link-eksternal.html

<h1>Tautan Saya</h1>
<a href="https://instiki.ac.id">
  Website INSTIKI
</a>
<a href="https://example.com">
  Portofolio Saya
</a>

PERIKSA

Alamat eksternal harus diawali dengan https://.

PRAKTIKUM P02-06

LINK INTERNAL

FILE

link-internal.html

FOKUS

id dan #tujuan

WAKTU

7 menit

HASIL

Navigasi bagian

TUGAS

01
Buat dua tujuanTambahkan id profil dan kontak.
02
Buat menuHref memakai tanda #.
03
Tambahkan kontenBeri jarak agar perpindahan terlihat.
04
Uji navigasiKlik kedua tautan.

link-internal.html

<nav>
  <a href="#profil">Profil</a>
  <a href="#kontak">Kontak</a>
</nav>
<h2 id="profil">Profil</h2>
<h2 id="kontak">Kontak</h2>

BEDAKAN

Link internal menuju id pada file yang sama, sedangkan link eksternal menuju alamat website.

PRAKTIKUM P02-07

MENAMPILKAN GAMBAR DAN MENULIS ALT

FILE

gambar.html

GAMBAR

foto.jpg

WAKTU

7 menit

HASIL

Gambar tampil

TUGAS

01
Siapkan fotoSimpan di folder proyek.
02
Gunakan imgIsi atribut src.
03
Tulis altDeskripsikan isi gambar.
04
Uji kesalahanUbah src sementara dan amati alt.

gambar.html

<h1>Foto Profil</h1>
<img
  src="foto.jpg"
  alt="Foto profil Nama Mahasiswa">

ALT

Tulis informasi yang mewakili gambar, bukan sekadar “gambar” atau “foto”.

PRAKTIKUM P02-08

MEMINDAHKAN GAMBAR DAN PATH

EDIT FILE

gambar.html

FOLDER BARU

assets/images

WAKTU

7 menit

HASIL

Path diperbarui

LANJUTKAN P02-07

01
Buka gambar.htmlJangan membuat file HTML baru.
02
Buat folderTambahkan assets/images.
03
Pindahkan fotoLetakkan foto.jpg di dalam images.
04
Perbarui srcUji sampai gambar kembali tampil.

gambar.html setelah diedit

pertemuan-02-nim/
├── gambar.html
└── assets/
    └── images/
        └── foto.jpg

src="assets/images/foto.jpg"

PERUBAHAN

Foto berpindah folder, sehingga nilai src pada gambar.html harus ikut diperbarui.

PRAKTIKUM P02-09

DAFTAR MINAT

FILE

daftar-minat.html

FOKUS

ul dan li

WAKTU

6 menit

HASIL

Daftar bebas

TUGAS

01
Buat headingGunakan judul Minat Saya.
02
Gunakan ulMinat tidak memerlukan urutan.
03
Tambahkan itemMinimal tiga minat.
04
PersonalisasiGunakan minat sebenarnya.

daftar-minat.html

<h1>Minat Saya</h1>
<ul>
  <li>Desain web</li>
  <li>Digital marketing</li>
  <li>Fotografi</li>
</ul>

TAMBAHAN

Mahasiswa yang selesai lebih cepat dapat menjelaskan satu minat dalam paragraf.

PRAKTIKUM P02-10

TARGET BELAJAR

FILE

target-belajar.html

FOKUS

ol dan li

WAKTU

6 menit

HASIL

Daftar berurutan

TUGAS

01
Buat headingGunakan judul Target Belajar.
02
Gunakan olNomor menunjukkan urutan.
03
Tambahkan targetMinimal tiga tahap.
04
Susun logisDari target awal ke lanjutan.

target-belajar.html

<h1>Target Belajar</h1>
<ol>
  <li>Memahami HTML</li>
  <li>Menguasai CSS dasar</li>
  <li>Membuat website pribadi</li>
</ol>

JELASKAN

Mengapa daftar ini cocok menggunakan ol, bukan ul?

PRAKTIKUM P02-11

HEADER HALAMAN

BUAT FILE

index.html

FOKUS

header

WAKTU

7 menit

HASIL

Awal proyek akhir

MULAI PROYEK AKHIR

01
Buat index.htmlSalin kerangka dari struktur.html.
02
Buat headerLetakkan di dalam body.
03
Tambahkan identitasGunakan h1 dan paragraf.
04
Beri id berandaMenjadi tujuan tautan kembali ke atas.

index.html

<header id="beranda">
  <h1>Nama Mahasiswa</h1>
  <p>Mahasiswa Bisnis Digital</p>
</header>

PROYEK AKHIR

Mulai tahap ini, P02-11 sampai P02-15 mengedit index.html yang sama.

PRAKTIKUM P02-12

NAVIGASI HALAMAN

EDIT FILE

index.html

LANJUTKAN

P02-11

WAKTU

5 menit

HASIL

Menu internal

TAMBAHKAN KE PROYEK

01
Buka index.htmlPertahankan header dari P02-11.
02
Buat navLetakkan di dalam header.
03
Tambahkan empat menuSamakan dengan bagian hasil akhir.
04
Gunakan hrefArahkan ke id yang akan dibuat.

tambahkan ke dalam header

<nav aria-label="Navigasi utama">
  <a href="#profil">Profil</a> |
  <a href="#minat">Minat</a> |
  <a href="#target">Target Belajar</a> |
  <a href="#tautan">Tautan</a>
</nav>

CATATAN

Nav mengelompokkan tautan utama, bukan seluruh tautan yang ada di halaman.

PRAKTIKUM P02-13

KONTEN UTAMA

EDIT FILE

index.html

LANJUTKAN

P02-12

WAKTU

6 menit

HASIL

Konten terstruktur

TAMBAHKAN KE PROYEK

01
Buka index.htmlPertahankan header dan nav.
02
Buat satu mainLetakkan setelah header.
03
Buat empat sectionProfil, minat, target, dan tautan.
04
Samakan setiap idHarus sesuai href pada navigasi.

tambahkan setelah header

<main>
  <section id="profil">
    <h2>Profil</h2>
  </section>
  <section id="minat">
    <h2>Minat</h2>
  </section>
  <section id="target">
    <h2>Target Belajar</h2>
  </section>
  <section id="tautan">
    <h2>Tautan</h2>
  </section>
</main>

PERIKSA

Satu halaman umumnya memiliki satu main yang memuat konten utamanya.

PRAKTIKUM P02-14

FOOTER HALAMAN

EDIT FILE

index.html

LANJUTKAN

P02-13

WAKTU

5 menit

HASIL

Struktur lengkap

LENGKAPI STRUKTUR

01
Buka index.htmlPertahankan seluruh hasil sebelumnya.
02
Buat footerLetakkan setelah main.
03
Tambahkan identitasGunakan nama dan tahun.
04
Simpan dan ujiKlik setiap menu navigasi.

tambahkan setelah main

<footer>
  <p>
    Dibuat oleh Nama Mahasiswa
    &copy; 2026
  </p>
</footer>

FUNGSI

Footer memuat informasi penutup yang berkaitan dengan halaman.

PRAKTIKUM P02-15

INTEGRASI DAN PEMERIKSAAN PROFIL

EDIT FILE

index.html

SUMBER

9 file latihan

WAKTU

15 menit

HASIL

Profil lengkap

SELESAIKAN PROYEK

01
Buka index.htmlLanjutkan struktur hasil P02-14.
02
Salin konten terpilihGabungkan heading, teks, link, gambar, dan daftar.
03
Tempatkan pada sectionSesuaikan konten dengan bagian semantik.
04
Uji keseluruhanPeriksa navigasi, gambar, dan identitas.

struktur proyek akhir

pertemuan-02-nim/
├── index.html
├── struktur.html
├── heading.html
├── ... 7 file lainnya
└── assets/
    └── images/
        └── foto.jpg

PENTING

File latihan tetap disimpan sebagai referensi. index.html menjadi proyek akhir Pertemuan 2.

HASIL AKHIR 1/3

HEAD, HEADER, DAN NAVIGASI

index.html — bagian 1

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil I Made Arya</title>
</head>
<body>
  <header id="beranda">
    <p>PROFIL MAHASISWA</p>
    <h1>I Made Arya</h1>
    <p>Mahasiswa Bisnis Digital</p>
    <nav aria-label="Navigasi utama">
      <a href="#profil">Profil</a> |
      <a href="#minat">Minat</a> |
      <a href="#target">Target Belajar</a> |
      <a href="#tautan">Tautan</a>
    </nav>
  </header>
  <hr>

PERHATIKAN

Identitas dokumenLang, charset, viewport, dan title berada di head.

Identitas mahasiswaGanti nama dan program studi dengan data sendiri.

Tujuan navigasiNilai href harus sama dengan id section tujuan.

LANJUTKAN

Jangan tutup body dan html dahulu; sambungkan dengan kode pada slide berikutnya.

HASIL AKHIR 2/3

KONTEN UTAMA PROFIL

index.html — bagian 2A

  <main>
    <section id="profil">
      <h2>Tentang Saya</h2>
      <img src="assets/images/foto.jpg"
           alt="Foto profil I Made Arya" width="220">
      <p>Saya mahasiswa <strong>Bisnis Digital</strong>
         yang tertarik mempelajari pengembangan web.</p>
      <p>Saya ingin membuat halaman yang
         <em>rapi dan mudah dipahami</em>.</p>
    </section>

    <section id="minat">
      <h2>Minat Saya</h2>
      <ul>
        <li>Desain web</li>
        <li>Digital marketing</li>
        <li>Fotografi produk</li>
      </ul>
    </section>

index.html — bagian 2B

    <section id="target">
      <h2>Target Belajar</h2>
      <ol>
        <li>Memahami struktur HTML</li>
        <li>Menguasai CSS dasar</li>
        <li>Membuat website pribadi</li>
      </ol>
    </section>

    <section id="tautan">
      <h2>Tautan</h2>
      <p>
        <a href="https://instiki.ac.id">
          Kunjungi website INSTIKI
        </a>
      </p>
      <p><a href="#beranda">Kembali ke atas</a></p>
    </section>
  </main>

PERSONALISASI

Ganti foto, deskripsi, minat, dan target belajar. Pertahankan susunan elemen semantiknya.

HASIL AKHIR 3/3

FOOTER DAN STRUKTUR PROYEK

index.html — bagian 3

  <hr>
  <footer>
    <p>
      &copy; 2026 I Made Arya.
      Dibuat untuk praktikum Web Programming.
    </p>
  </footer>
</body>
</html>

Buka Contoh Hasil Akhir

struktur folder akhir

pertemuan-02-nim/
|-- index.html
|-- struktur.html
|-- heading.html
|-- paragraf.html
|-- format-teks.html
|-- link-eksternal.html
|-- link-internal.html
|-- gambar.html
|-- daftar-minat.html
|-- target-belajar.html
`-- assets/
    `-- images/
        `-- foto.jpg

HASIL AKHIR

index.html adalah proyek profil utama; file lainnya tetap disimpan sebagai catatan latihan setiap konsep.

PRAKTIKUM P02-01

MEMBUAT HALAMAN HTML

BUAT FOLDER

pertemuan-02-nim

BUAT FILE

index.html

WAKTU

10 menit

HASIL

Halaman kosong

LANGKAH

01
Buat folder proyekGunakan File Explorer.
02
Buka melalui VS CodePilih File lalu Open Folder.
03
Buat index.htmlNama file memakai huruf kecil.
04
Isi kerangka HTMLSimpan dengan Ctrl+S.

index.html — kode baru

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Nama Mahasiswa</title>
</head>
<body>

</body>
</html>

PRAKTIKUM P02-02

MENAMBAHKAN HEADING

EDIT FILE

index.html

LANJUTKAN

P02-01

WAKTU

7 menit

HASIL

Identitas tampil

TAMBAHKAN DI DALAM BODY

01
Heading utamaGunakan h1 untuk nama.
02
Heading tingkat duaIsi dengan status mahasiswa.
03
Heading tingkat tigaIsi dengan nama kampus.
04
Ubah identitasGunakan data sendiri.

tambahkan ke body

<h1>Nama Mahasiswa</h1>
<h2>Mahasiswa Bisnis Digital</h2>
<h3>Institut Bisnis dan Teknologi Indonesia</h3>

PRAKTIKUM P02-03

PARAGRAF DAN FORMAT TEKS

EDIT FILE

index.html

LANJUTKAN

P02-02

WAKTU

10 menit

HASIL

Tentang saya

TAMBAHKAN SETELAH HEADING

01
Buat judul bagianGunakan h2 Tentang Saya.
02
Tulis dua paragrafGunakan elemen p.
03
Tegaskan kata pentingGunakan strong.
04
Beri penekananGunakan em.

kode baru

<h2>Tentang Saya</h2>
<p>
  Saya mahasiswa <strong>Bisnis Digital</strong> yang tertarik
  mempelajari pengembangan web.
</p>
<p>
  Saya ingin membuat halaman yang
  <em>rapi dan mudah dipahami</em>.
</p>

PRAKTIKUM P02-04

TAUTAN EKSTERNAL

EDIT FILE

index.html

LANJUTKAN

P02-03

WAKTU

6 menit

HASIL

Link INSTIKI

TAMBAHKAN DI BAWAH PARAGRAF

01
Buat judul TautanGunakan elemen h2.
02
Buat elemen anchorGunakan elemen a.
03
Isi tujuanGunakan atribut href.
04
Uji linkKlik melalui browser.

kode baru

<h2>Tautan</h2>
<p>
  <a href="https://instiki.ac.id">
    Kunjungi website INSTIKI
  </a>
</p>

PRAKTIKUM P02-05

GAMBAR DAN FOLDER ASET

EDIT FILE

index.html

BUAT FOLDER

assets/images

WAKTU

12 menit

HASIL

Foto profil

TAMBAHKAN SETELAH TENTANG SAYA

01
Buat folder asetassets lalu images.
02
Salin fotoGunakan nama foto.jpg.
03
Tambahkan imgTulis path dari index.html.
04
Isi altDeskripsikan isi gambar.

kode baru

<img
  src="assets/images/foto.jpg"
  alt="Foto profil Nama Mahasiswa"
  width="220"
>

FOLDER

assets/images/foto.jpgPath dihitung dari lokasi index.html.

PRAKTIKUM P02-06

DAFTAR TIDAK BERURUTAN

EDIT FILE

index.html

FOKUS

ul dan li

WAKTU

7 menit

HASIL

Daftar minat

TAMBAHKAN SEBELUM TAUTAN

01
Buat judul Minat SayaGunakan h2.
02
Buat daftar ulUrutan tidak menunjukkan prioritas.
03
Tambahkan tiga liIsi dengan minat sendiri.
04
Periksa penutupPastikan semua tag lengkap.

kode baru

<h2>Minat Saya</h2>
<ul>
  <li>Desain web</li>
  <li>Digital marketing</li>
  <li>Fotografi produk</li>
</ul>

PRAKTIKUM P02-07

DAFTAR BERURUTAN

EDIT FILE

index.html

FOKUS

ol dan li

WAKTU

7 menit

HASIL

Target belajar

TAMBAHKAN SETELAH DAFTAR MINAT

01
Buat judul Target BelajarGunakan h2.
02
Buat daftar olNomor menunjukkan urutan.
03
Tambahkan tiga liSusun target secara bertahap.
04
Gunakan isi sendiriSesuaikan tujuan belajar.

kode baru

<h2>Target Belajar</h2>
<ol>
  <li>Memahami struktur HTML</li>
  <li>Menguasai CSS dasar</li>
  <li>Membuat website pribadi</li>
</ol>

PRAKTIKUM P02-08

ELEMEN HEADER

EDIT FILE

index.html

FOKUS

header dan id

WAKTU

6 menit

HASIL

Bagian pembuka

UBAH KODE YANG SUDAH ADA

01
Cari tiga heading identitasJangan mengetik ulang isinya.
02
Buka elemen headerLetakkan sebelum h1.
03
Tutup elemen headerLetakkan setelah h3.
04
Tambahkan id berandaDipakai navigasi pada tahap akhir.

pembungkus baru

<header id="beranda">
  <h1>Nama Mahasiswa</h1>
  <h2>Mahasiswa Bisnis Digital</h2>
  <h3>Institut Bisnis dan Teknologi Indonesia</h3>
</header>

PRAKTIKUM P02-09

ELEMEN MAIN DAN SECTION

EDIT FILE

index.html

LANJUTKAN

P02-08

WAKTU

12 menit

HASIL

Konten semantik

BUNGKUS KONTEN LAMA

01
Buat satu mainLetakkan setelah header.
02
Buat section profilIsi Tentang Saya dan foto.
03
Buat section daftarPisahkan minat dan target.
04
Buat section tautanPindahkan link eksternal.

pembungkus dan id baru

<main>
  <section id="profil">...</section>
  <section id="minat">...</section>
  <section id="target">...</section>
  <section id="tautan">...</section>
</main>

PINDAHKAN

Tanda ... berarti konten lama dipindahkan, bukan ditulis sebagai tiga titik.

PRAKTIKUM P02-10

ELEMEN FOOTER

EDIT FILE

index.html

LANJUTKAN

P02-09

WAKTU

5 menit

HASIL

Bagian penutup

TAMBAHKAN SETELAH MAIN

01
Buat elemen footerLetakkan sebelum penutup body.
02
Tambahkan paragrafIsi nama dan tahun.
04
Simpan perubahanPeriksa melalui browser.

kode baru

<footer>
  <p>
    &copy; 2026 Nama Mahasiswa.
    Dibuat untuk praktikum Web Programming.
  </p>
</footer>

PRAKTIKUM P02-11

NAVIGASI INTERNAL

EDIT FILE

index.html

LANJUTKAN

P02-10

WAKTU

10 menit

HASIL

Proyek lengkap

HUBUNGKAN MENU DAN SECTION

01
Tambahkan navLetakkan di dalam header.
02
Samakan href dan idContoh #profil menuju id profil.
03
Tambah kembali ke atasArahkan ke #beranda.
04
Uji seluruh linkKlik satu per satu.

kode baru

<nav aria-label="Navigasi utama">
  <a href="#profil">Profil</a> |
  <a href="#minat">Minat</a> |
  <a href="#target">Target Belajar</a> |
  <a href="#tautan">Tautan</a>
</nav>

<p><a href="#beranda">Kembali ke bagian atas</a></p>

SLIDE 34

MEMERIKSA HASIL PRAKTIKUM

CHECKLIST HASIL

Identitas pribadiNama dan isi bukan contoh dosen.

Struktur semantikHeader, nav, main, dan footer.

Media dan linkFoto tampil dan tautan berfungsi.

DaftarMinat dan target belajar tersedia.

DEVELOPER TOOLS

Buka halamanJalankan index.html.

↓

Tekan F12Periksa tab Elements.

↓

PerbaikiCocokkan DOM dengan source.

PEER CHECK

Minta teman memeriksa menggunakan checklist tanpa mengubah kode Anda.

SLIDE 35

QUIZ PEMAHAMAN PERTEMUAN 02

Bagian mana yang menampilkan konten halaman?A. head B. body C. title D. meta
Atribut tujuan pada elemen anchor adalah...A. src B. alt C. href D. class
Elemen untuk daftar berurutan adalah...A. ul B. ol C. li D. dl

Atribut yang mendeskripsikan gambar adalah...A. href B. title C. alt D. lang
Elemen konten utama yang semantik adalah...A. div B. span C. main D. br
Heading utama halaman sebaiknya menggunakan...A. h1 B. h4 C. strong D. p

SLIDE 36

REFLEKSI DAN RANGKUMAN

KONSEP UTAMA

01Struktur dokumen HTML

02Elemen teks dan heading

03Link, gambar, dan list

04Elemen HTML semantik

SUDAH BISA

✓

Membuat index.html yang valid

✓

Menyusun hierarki konten

✓

Menggunakan path relatif

✓

Memeriksa hasil di browser

REFLEKSI 01

Elemen HTML apa yang paling mudah dipahami?

REFLEKSI 02

Bagian mana yang masih perlu dipraktikkan?

SLIDE 37

PERSIAPAN PERTEMUAN 03

BERIKUTNYADasar-dasar Styling dengan CSSMengubah halaman HTML menjadi lebih menarik dan terarah secara visual.

MATERI

Menambahkan CSSSintaks CSSSelector tagClass dan ID

PERSIAPKAN

✓File index.html hasil praktik

✓Folder assets dan gambar

✓Visual Studio Code

✓Browser dan Developer Tools

“Struktur yang baik akan diperkuat oleh tampilan yang konsisten.”