MATERI 1 – 4 DAN LATIHAN
LEVEL 1
By: Putra Maryu Sunjaya (LED Community)
Apa Itu HTML?
HTML (HyperText Markup Language) adalah bahasa standar untuk membuat dan
menata struktur halaman web.
HTML menggunakan tag (penanda) untuk menentukan elemen seperti teks, gambar,
tautan, tabel, dan form agar bisa ditampilkan di browser.
Singkatnya: HTML = kerangka dasar sebuah website.
Fungsi HTML dalam Website
Fungsi HTML adalah membangun struktur dan isi halaman web, seperti judul, paragraf,
gambar, tautan, dan form, agar browser tahu apa yang harus ditampilkan dan
bagaimana urutannya.
Singkatnya: HTML berfungsi sebagai rangka dan penentu isi website.
Tag <html>, <head>, dan <body>
<html> → pembungkus utama seluruh kode HTML.
<head> → berisi informasi tentang halaman (judul, meta, link CSS, script).
<body> → berisi konten yang ditampilkan di browser (teks, gambar, tombol, dan
lain-lain).
Singkatnya:
<html> = wadah utama
<head> = data halaman
<body> = isi halaman
Elemen dan Atribut HTML
Elemen HTML: bagian utama kode yang dibentuk oleh tag pembuka, isi, dan tag
penutup.
Contoh: <p>Isi teks</p>
Atribut HTML: informasi tambahan pada tag untuk mengatur perilaku atau tampilan
elemen.
Contoh: <img src="[Link]" alt="Deskripsi">
Singkatnya:
Elemen = struktur
Atribut = pengatur detailnya.
Tag Pembuka dan Penutup
Elemen: satu kesatuan kode HTML yang terdiri dari tag pembuka, isi, dan tag
penutup.
Contoh: <p>Paragraf</p>
Tag Pembuka: menandai awal elemen.
Contoh: <p>
Tag Penutup: menandai akhir elemen dengan tanda garis miring.
Contoh: </p>
Singkatnya:
Elemen = keseluruhan
Tag pembuka & penutup = batas awal dan akhir elemen.
Tag <h1> sampai <h6> (Judul)
Tag <h1> sampai <h6> digunakan untuk membuat judul atau heading pada halaman
web. <h1> adalah judul utama (terbesar dan paling penting), sedangkan <h6> adalah
judul terkecil dan paling rendah tingkatannya.
Singkatnya: semakin besar angkanya, semakin kecil dan kurang penting
judulnya.
<h1>Ini Heading 1</h1>
<h2>Ini Heading 2</h2>
<h3>Ini Heading 3</h3>
<h4>Ini Heading 4</h4>
<h5>Ini Heading 5</h5>
<h6>Ini Heading 6</h6>
Tag <p> (Paragraf)
Tag <p> digunakan untuk membuat paragraf teks pada halaman web. Browser otomatis
memberi jarak antar paragraf.
Singkatnya:
<p> = wadah teks paragraf dalam HTML.
<p>Ini Paragraf 1</p>
<p>Ini Paragraf 2</p>
Tag <br> dan <hr>
- <br>: membuat baris baru tanpa memulai paragraf baru.
- <hr>: membuat garis pemisah horizontal antar bagian halaman.
Singkatnya:
<br> = ganti baris
<hr> = garis pembatas.
<p>paragraf 1 <br> paragraf 2</p>
<hr>
<p>paragraf 3 <br> paragraf 4</p>
Tag <b>, <i>, <u>, <strong>, <em>
- <b>: menebalkan teks tanpa makna khusus.
- <i>: memiringkan teks tanpa makna khusus.
- <u>: menggarisbawahi teks.
- <strong>: menebalkan teks dengan penekanan penting.
- <em>: memiringkan teks dengan penekanan makna.
<p>Ini <b>Tag B</b> Tebal</p>
<p>Ini <i>Tag i</i> Miring</p>
<p>Ini <u>Tag U</u> Garis Bawah</p>
<p>Ini <strong>Tag strong</strong> Tebal</p>
<p>Ini <em>Tag em</em> Miring</p>
Komentar dalam HTML
Komentar dalam HTML ditulis dengan <!-- isi komentar -->. Fungsinya untuk
menambahkan catatan atau penjelasan di kode yang tidak ditampilkan di browser.
Singkatnya: komentar = catatan dalam kode, tidak terlihat di tampilan web.
<!-- Isi Komentar -->
Tag <img> dan atribut src, alt
Tag <img> digunakan untuk menampilkan gambar di halaman web.
- src: menentukan lokasi atau URL gambar.
- alt: menampilkan teks pengganti jika gambar tidak bisa dimuat.
<img src="sumber gambar" alt="jika tidak muncul, tulisan
ini yang muncul">
LATIHAN
Tugas 1 – Menggunakan <h1> sampai <h6> dan <p>
Tujuan: Mengenal tag judul dan paragraf.
Instruksi:
1. Buat file bernama [Link].
2. Tulis contoh judul menggunakan <h1> sampai <h6>.
3. Tambahkan 2 paragraf yang berisi teks tentang HTML.
Tugas 2 – Menggunakan <h1> sampai <h6>, <p>, <hr>, dan <br>
Tujuan: Mengenal garis pemisah dan baris baru.
Instruksi:
1. Buat file bernama [Link].
2. Gunakan kembali isi tugas 1.
3. Tambahkan <hr> di antara judul dan paragraf.
4. Tambahkan <br> untuk memberi jarak antar paragraf.
Tugas 3 – Menggunakan <h1> sampai <h6>, <p>, <img> dan atributnya
Tujuan: Mengenal tag gambar dan atribut src serta alt.
Instruksi:
1. Buat file bernama [Link].
2. Tulis contoh judul menggunakan <h1> sampai <h6>.
3. Tambahkan 2 paragraf.
4. tambahkan 1 gambar di bawah paragraf:
<img src="nama [Link]" alt="Contoh gambar HTML">
#Pastikan gambar tampil atau teks pengganti muncul jika gambar tidak tersedia.
ATAU:
Tugas 4 – Menggunakan <h1> sampai <h6>, <p>, <b>, <i>,<u>
Tujuan: Mengenal tag gambar dan atribut src serta alt.
Instruksi:
1. Buat file bernama [Link].
2. Tulis contoh judul menggunakan <h1> sampai <h6>.
3. Tambahkan 1 paragraf normal.
4. Tambahkan 1 paragraf tebal.
5. Tambahkan 1 paragraf miring.
6. Tambahkan 1 paragraf bergaris bawah.
Tugas 5 – Menggunakan <h1> sampai <h6>, <p>, <hr>, <br>, <img> dan
atributnya
Tujuan: Menggabungkan semua elemen dasar HTML.
Instruksi:
1. Buat file bernama [Link].
2. Gunakan semua elemen: judul, paragraf, garis, baris baru, dan gambar.
3. Atur urutan agar tampilan rapi dan mudah dibaca.
4. Tambahkan teks penjelasan di bawah gambar.
Tugas 6 – Menggunakan <h1> sampai <h6>, <p>, <hr>, <br>, <img> dan
atributnya, serta <b>, <i>, <u>
Tujuan:
Melatih penggunaan elemen dasar HTML untuk teks dan gambar dengan
efek gaya (tebal, miring, garis bawah).
Instruksi:
1. Buat file bernama [Link]
2. Gunakan semua elemen berikut:
<h1> sampai <h6>
<p
<hr>
<br>
<img> beserta atribut src dan alt
<b>, <i>, dan <u>