Hai semuanya! Pernahkah kalian bertanya-tanya bagaimana sebuah website seperti YouTube, Instagram, atau halaman game favorit kalian dibuat? Semua itu dimulai dari sesuatu yang disebut HTML.
Jangan takut dengan kata "pemrograman". HTML itu
seperti bermain balok LEGO. Kita hanya perlu menyusun balok-balok (disebut tag)
untuk membangun sesuatu yang keren di internet. Siap untuk memulai petualangan
kita? Ayo mulai!
BAB 1: Perkenalan dengan HTML
Apa itu HTML?
HTML adalah singkatan dari HyperText Markup Language.
- HyperText: Teks yang bisa diklik (seperti link) untuk
pindah ke halaman lain.
- Markup Language: Bahasa yang menggunakan
"tanda" atau "tag" untuk memberitahu browser (seperti
Google Chrome atau Firefox) bagaimana cara menampilkan konten.
Analogi Sederhana:
Bayangkan membangun sebuah rumah. HTML
adalah kerangka atau rangka rumahnya. HTML yang menentukan
di mana letak pintu, jendela, dinding, dan atap. HTML belum mengatur warna cat
atau jenis sofanya, ya. Itu tugas lain (namanya CSS).
Apa yang Kita Butuhkan?
- Teks Editor: Tempat kita menulis kode. Tidak perlu
aplikasi canggih! Kalian bisa pakai:
- Notepad
(bawaan Windows)
- TextEdit
(bawaan Mac)
- VS
Code (rekomendasi, gratis dan lebih keren!)
- Web Browser: Tempat kita melihat hasil kode kita. Kalian
pasti sudah punya:
- Google
Chrome, Mozilla Firefox, Microsoft Edge, dll.
Struktur Dasar Halaman HTML
Setiap halaman HTML wajib punya struktur dasar ini. Anggap
saja ini adalah denah rumah yang harus selalu ada.
Generated html
<!DOCTYPE
html>
<html>
<head>
<title>Judul
Halaman Saya</title>
</head>
<body>
<!-- Konten website kita akan ada di
sini! -->
<h1>Halo Dunia!</h1>
<p>Ini adalah website pertama saya.
Keren!</p>
</body>
</html>
Penjelasan:
- <!DOCTYPE
html>: Memberitahu browser bahwa ini adalah dokumen HTML5 (versi
terbaru). Wajib ada di baris paling atas.
- <html>: Tag pembuka dari
seluruh halaman. Semua kode lain ada di dalamnya.
- <head>:
Bagian "kepala". Isinya adalah informasi tentang halaman yang
tidak terlihat langsung, seperti judul tab browser (<title>).
- <body>: Bagian
"badan". Semua yang ingin kita tampilkan di halaman web (teks,
gambar, video) diletakkan di sini.
Cara Menyimpan dan Melihat Hasil:
- Ketik
kode di atas di Teks Editor.
- Simpan file dengan nama latihan1.html.
Pastikan ekstensinya .html, bukan .txt!
- Buka
file tersebut dengan Web Browser (klik kanan > Open with > Google
Chrome).
- Tadaa! Kamu akan melihat tulisan
"Halo Dunia!" di halaman browser. Selamat, kamu sudah
membuat website pertamamu!
100 Contoh Coding HTML (Dari Sederhana Hingga Advance)
Mari kita mulai
petualangan coding kita! Contoh-contoh ini disusun berdasarkan tingkat
kesulitan.
Bagian 1: Dasar-Dasar & Teks (Contoh 1-20)
Ini adalah fondasi. Kita akan belajar membuat judul,
paragraf, dan memformat teks.
Generated html
<!-- 1.
Struktur HTML Paling Dasar -->
<!DOCTYPE html>
<html>
<head>
<title>Dasar
1</title>
</head>
<body>
Halo Nama saya
adalah Roy Vance
</body>
</html>
<!-- 2. Menambahkan Judul Halaman (Terlihat di Tab
Browser) -->
<title>Website Pertamaku</title>
<!-- 3. Membuat Judul Utama (Heading 1) -->
<h1>Ini Judul Paling Besar dan Penting</h1>
<!-- 4. Membuat Sub-Judul (Heading 2-6) -->
<h2>Ini sub-judul</h2>
<h3>Ini lebih kecil</h3>
<h4>Dan seterusnya...</h4>
<h5>Sampai</h5>
<h6>Yang paling kecil</h6>
<!-- 5. Membuat Paragraf -->
<p>Ini adalah sebuah paragraf. Paragraf digunakan untuk menulis teks yang
panjang.</p>
<!-- 6. Membuat Teks Tebal (Bold) -->
<p>Ini adalah teks <b>tebal</b>.</p>
<p>Cara yang lebih modern: <strong>teks ini
penting</strong>.</p>
<!-- 7. Membuat Teks Miring (Italic) -->
<p>Ini adalah teks
<i>miring</i>.</p>
<p>Cara yang lebih modern: <em>teks ini
ditekankan</em>.</p>
<!-- 8. Membuat Teks Bergaris Bawah (Underline) -->
<p>Ini adalah teks <u>bergaris
bawah</u>.</p>
<!-- 9. Membuat Teks Tercoret (Strikethrough) -->
<p>Harga lama: <s>Rp 50.000</s></p>
<!-- 10. Membuat Pindah Baris (Line Break) -->
<p>Puisi
baris pertama.<br>Puisi baris kedua.</p>
<!-- 11. Membuat Garis Horizontal (Horizontal Rule)
-->
<p>Konten di atas garis.</p>
<hr>
<p>Konten di bawah garis.</p>
<!-- 12. Menggabungkan Beberapa Format -->
<p>Ini adalah <b><i><u>teks super
penting!</u></i></b></p>
<!-- 13. Teks Subscript (Teks di bawah) -->
<p>Rumus kimia air adalah
H<sub>2</sub>O.</p>
<!-- 14. Teks Superscript (Teks di atas) -->
<p>Rumus
matematika: E = mc<sup>2</sup>.</p>
<!-- 15. Teks
yang ditandai (Highlight) -->
<p>Jangan
lupa untuk <mark>mengerjakan PR</mark>.</p>
<!-- 16. Teks dengan ukuran lebih kecil -->
<p>Hak Cipta © 2023. <small>Semua hak
dilindungi.</small></p>
<!-- 17. Menampilkan Kutipan (Blockquote) -->
<blockquote cite="sumber-kutipan.com">
Ini adalah kutipan panjang dari seseorang yang
terkenal. Biasanya tampil sedikit menjorok ke dalam.
</blockquote>
<!-- 18.
Menampilkan kode komputer (Code) -->
<p>Untuk
mencetak di Python, gunakan perintah
<code>print("Halo")</code>.</p>
<!-- 19. Teks
Pre-formatted (Menampilkan spasi dan enter apa adanya) -->
<pre>
Aku ingin begini
Aku ingin begitu
Ingin ini itu banyak sekali
</pre>
<!-- 20.
Menambahkan Komentar (Tidak akan tampil di browser) -->
<!-- Ini adalah komentar. Berguna untuk catatan bagi
programmer. -->
IGNORE_WHEN_COPYING_START
content_copy download
Use code with
caution. Html
IGNORE_WHEN_COPYING_END
Bagian 2: List dan Link (Contoh 21-35)
Website tidak akan lengkap tanpa daftar (list) dan tautan
(link).
Generated html
<!-- 21.
Membuat Daftar Tidak Berurutan (Unordered List) -->
<ul>
<li>Makan</li>
<li>Tidur</li>
<li>Main Game</li>
</ul>
<!-- 22. Membuat Daftar Berurutan (Ordered List) -->
<ol>
<li>Bangun
pagi</li>
<li>Mandi</li>
<li>Sarapan</li>
</ol>
<!-- 23. Membuat Link ke Website Lain -->
<a href="https://www.google.com">Klik di
sini untuk ke Google</a>
<!-- 24. Link yang Membuka di Tab Baru -->
<a href="https://www.youtube.com"
target="_blank">Buka YouTube di tab baru</a>
<!-- 25. Link
ke Halaman Lain di Website Kita -->
<a href="profil.html">Lihat Halaman Profil
Saya</a>
<!-- 26. Membuat Link Email (Membuka aplikasi email)
-->
<a href="mailto:guru@sekolah.id">Kirim Email
ke Guru</a>
<!-- 27. List di dalam List (Nested List) -->
<ul>
<li>Minuman
<ol>
<li>Es Teh</li>
<li>Jus Jeruk</li>
</ol>
</li>
<li>Makanan</li>
</ul>
<!-- 28. Menambahkan judul pada link (tooltip) -->
<a href="https://wikipedia.org"
title="Ensiklopedia Online">Wikipedia</a>
<!-- 29. Link
ke Bagian Tertentu di Halaman yang Sama -->
<a href="#bab3">Lompat ke Bab 3</a>
<!-- Nanti di bagian bawah halaman, kita buat targetnya
-->
<h2 id="bab3">Ini adalah Bab 3</h2>
<!-- 30. Link Telepon (jika dibuka di HP, akan langsung
menelpon) -->
<a href="tel:+6281234567890">Hubungi
Kami</a>
<!-- 31. Daftar Definisi (Description List) -->
<dl>
<dt>HTML</dt>
<dd>HyperText
Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading
Style Sheets</dd>
</dl>
<!-- 32. Link
yang dinonaktifkan (hanya tampilan, tidak bisa diklik) -->
<a>Ini link mati</a>
<!-- 33.
Menggunakan list untuk navigasi menu -->
<nav>
<ul>
<li><a
href="index.html">Beranda</a></li>
<li><a
href="tentang.html">Tentang</a></li>
<li><a
href="kontak.html">Kontak</a></li>
</ul>
</nav>
<!-- 34. Mengubah tipe bullet pada Unordered List -->
<ul style="list-style-type:square;">
<li>Item kotak</li>
<li>Item kotak</li>
</ul>
<!-- 35. Mengubah tipe nomor pada Ordered List -->
<ol type="A">
<li>Item
A</li>
<li>Item B</li>
</ol>
IGNORE_WHEN_COPYING_START
content_copy download
Use code with
caution. Html
IGNORE_WHEN_COPYING_END
Bagian 3: Gambar dan Media (Contoh 36-50)
Saatnya membuat website kita lebih hidup dengan gambar,
suara, dan video!
Generated html
<!-- 36. Menampilkan
Gambar dari Internet -->
<img
src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg">
<!-- 37. Menampilkan Gambar dari Folder Lokal -->
<!-- Simpan gambar "kucing.jpg" di folder yang
sama dengan file html -->
<img src="kucing.jpg">
<!-- 38. Menambahkan Teks Alternatif (Penting!) -->
<!-- alt akan muncul jika gambar gagal dimuat -->
<img src="kucing-lucu.jpg" alt="Seekor
kucing oranye sedang tidur">
<!-- 39. Mengatur Lebar dan Tinggi Gambar -->
<img src="kucing.jpg" alt="Kucing"
width="200" height="150">
<!-- 40. Membuat Gambar sebagai Link -->
<a
href="https://id.wikipedia.org/wiki/Kucing">
<img
src="kucing.jpg" alt="Info tentang kucing"
width="100">
</a>
<!-- 41. Gambar dengan Judul (Tooltip) -->
<img src="kucing.jpg" alt="Kucing"
width="100" title="Ini kucing peliharaanku!">
<!-- 42. Menambahkan Audio (MP3) -->
<audio controls>
<source
src="musik-keren.mp3" type="audio/mpeg">
Browser Anda tidak
mendukung elemen audio.
</audio>
<!-- 43. Audio yang Langsung Berputar (Autoplay -
hati-hati menggunakannya) -->
<audio controls autoplay muted>
<source
src="musik-keren.mp3" type="audio/mpeg">
</audio>
<!-- 44. Menambahkan Video (MP4) -->
<video width="320" height="240"
controls>
<source
src="video-lucu.mp4" type="video/mp4">
Browser Anda tidak
mendukung tag video.
</video>
<!-- 45. Video dengan Gambar Poster -->
<video width="320" height="240"
controls poster="poster-video.jpg">
<source
src="video-lucu.mp4" type="video/mp4">
</video>
<!-- 46. Menyematkan Video YouTube -->
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube
video player" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<!-- 47. Menyematkan Peta Google Maps -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.575689178942!2d106.82496411476899!3d-6.187474895520182!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f43a9d1b0d85%3A0x264cb402b0c79237!2sMonumen%20Nasional!5e0!3m2!1sid!2sid!4v1671515152285!5m2!1sid!2sid"
width="400" height="300" style="border:0;"
allowfullscreen="" loading="lazy"></iframe>
<!-- 48. Gambar dengan Figure dan Figcaption (Cara
Modern) -->
<figure>
<img
src="monas.jpg" alt="Monumen Nasional"
width="300">
<figcaption>Gambar 1. Monumen Nasional di
Jakarta.</figcaption>
</figure>
<!-- 49. Menggunakan SVG (Scalable Vector Graphics)
langsung di HTML -->
<svg width="100" height="100">
<circle
cx="50" cy="50" r="40" stroke="green"
stroke-width="4" fill="yellow" />
</svg>
<!-- 50. Video yang berulang (loop) -->
<video width="320" height="240"
controls loop>
<source
src="video-lucu.mp4" type="video/mp4">
</video>
IGNORE_WHEN_COPYING_START
content_copy download
Use code with
caution. Html
IGNORE_WHEN_COPYING_END
Bagian 4: Tabel (Contoh 51-60)
Tabel berguna untuk menampilkan data yang terstruktur,
seperti jadwal pelajaran.
Generated html
<!-- 51.
Tabel Paling Sederhana -->
<table>
<tr>
<td>Baris 1,
Kolom 1</td>
<td>Baris 1,
Kolom 2</td>
</tr>
<tr>
<td>Baris 2,
Kolom 1</td>
<td>Baris 2,
Kolom 2</td>
</tr>
</table>
<!-- 52. Tabel dengan Border (menggunakan sedikit CSS)
-->
<table border="1">
<tr>
<td>Baris 1,
Kolom 1</td>
<td>Baris 1,
Kolom 2</td>
</tr>
<tr>
<td>Baris 2,
Kolom 1</td>
<td>Baris 2,
Kolom 2</td>
</tr>
</table>
<!-- 53. Tabel dengan Judul Kolom (Header) -->
<table border="1">
<tr>
<th>Nama
Siswa</th>
<th>Nilai</th>
</tr>
<tr>
<td>Budi</td>
<td>85</td>
</tr>
<tr>
<td>Ani</td>
<td>90</td>
</tr>
</table>
<!-- 54. Tabel dengan Caption (Judul Tabel) -->
<table border="1">
<caption>Daftar Nilai Kelas 8A</caption>
<tr>
<th>Nama</th>
<th>Nilai</th>
</tr>
<tr>
<td>Cici</td>
<td>88</td>
</tr>
</table>
<!-- 55. Menggabungkan Kolom (colspan) -->
<table border="1">
<tr>
<th>Nama</th>
<th
colspan="2">Telepon</th>
</tr>
<tr>
<td>Dodi</td>
<td>0812</td>
<td>0813</td>
</tr>
</table>
<!-- 56. Menggabungkan Baris (rowspan) -->
<table border="1">
<tr>
<th>Nama</th>
<td>Eka</td>
</tr>
<tr>
<th
rowspan="2">Telepon</th>
<td>0814</td>
</tr>
<tr>
<td>0815</td>
</tr>
</table>
<!-- 57. Struktur Tabel Semantik (thead, tbody, tfoot)
-->
<table border="1">
<thead>
<tr>
<th>Barang</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>Buku</td>
<td>Rp
5.000</td>
</tr>
<tr>
<td>Pensil</td>
<td>Rp
2.000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>Rp
7.000</td>
</tr>
</tfoot>
</table>
<!-- 58. Styling Sederhana pada Tabel -->
<table border="1" style="width:100%;
text-align:center;">
<tr>
<th>Senin</th>
<th>Selasa</th>
<th>Rabu</th>
</tr>
<tr>
<td>Matematika</td>
<td>IPA</td>
<td>IPS</td>
</tr>
</table>
<!-- 59. Grup Kolom (colgroup) untuk styling -->
<table border="1">
<colgroup>
<col
span="1" style="background-color: #f2f2f2;">
<col
span="2" style="background-color: #d6d6d6;">
</colgroup>
<tr>
<th>No</th>
<th>Nama</th>
<th>Kota</th>
</tr>
<tr>
<td>1</td>
<td>Fani</td>
<td>Jakarta</td>
</tr>
</table>
<!-- 60. Contoh Jadwal Pelajaran -->
<table border="1"
style="width:50%">
<caption>Jadwal Pelajaran</caption>
<thead>
<tr>
<th>Hari</th>
<th>Jam ke-1</th>
<th>Jam ke-2</th>
</tr>
</thead>
<tbody>
<tr>
<th>Senin</th>
<td>Bahasa Indonesia</td>
<td>Olahraga</td>
</tr>
<tr>
<th>Selasa</th>
<td
colspan="2">Seni Budaya</td>
</tr>
</tbody>
</table>
IGNORE_WHEN_COPYING_START
content_copy download
Use code with
caution. Html
IGNORE_WHEN_COPYING_END
Bagian 5: Form dan Input (Contoh 61-80)
Ini bagian yang interaktif! Kita akan belajar membuat
formulir pendaftaran, login, atau survei.
Generated html
<!-- 61. Form
Sederhana dengan Input Teks -->
<form>
<label
for="nama">Nama:</label><br>
<input
type="text" id="nama" name="nama">
</form>
<!-- 62. Input Password -->
<form>
<label
for="pwd">Password:</label><br>
<input
type="password" id="pwd" name="pwd">
</form>
<!-- 63. Tombol Submit (Untuk Mengirim Form) -->
<form action="/proses-data.php">
<label
for="username">Username:</label><br>
<input
type="text" id="username"
name="username"><br>
<input
type="submit" value="Kirim">
</form>
<!-- 64. Tombol Reset (Untuk Mengosongkan Form) -->
<form>
<input
type="text" placeholder="Ketik sesuatu...">
<input
type="reset" value="Hapus">
</form>
<!-- 65. Radio Button (Hanya bisa pilih satu) -->
<p>Pilih gender Anda:</p>
<input type="radio" id="pria"
name="gender" value="pria">
<label
for="pria">Pria</label><br>
<input type="radio" id="wanita"
name="gender" value="wanita">
<label for="wanita">Wanita</label>
<!-- 66. Checkbox (Bisa pilih banyak) -->
<p>Hobi Anda:</p>
<input type="checkbox" id="hobi1"
name="hobi1" value="Membaca">
<label for="hobi1">
Membaca</label><br>
<input type="checkbox" id="hobi2"
name="hobi2" value="Olahraga">
<label for="hobi2"> Olahraga</label>
<!-- 67. Dropdown Menu (Select) -->
<label for="kota">Pilih Kota:</label>
<select
id="kota" name="kota">
<option
value="jakarta">Jakarta</option>
<option
value="bandung">Bandung</option>
<option
value="surabaya" selected>Surabaya</option>
</select>
<!-- 68. Text Area (Untuk input teks yang panjang) -->
<label
for="pesan">Pesan:</label><br>
<textarea id="pesan" name="pesan"
rows="4" cols="50"></textarea>
<!-- 69. Input Angka (Number) -->
<label for="kuantitas">Jumlah (antara 1 dan
5):</label>
<input type="number" id="kuantitas"
name="kuantitas" min="1" max="5">
<!-- 70. Input Tanggal (Date) -->
<label for="ultah">Tanggal
Lahir:</label>
<input type="date" id="ultah"
name="ultah">
<!-- 71. Input Email (Dengan validasi email sederhana)
-->
<label for="email">Masukkan
email:</label>
<input type="email" id="email"
name="email">
<!-- 72. Input Range Slider -->
<label for="volume">Volume:</label>
<input type="range" id="volume"
name="volume" min="0" max="100">
<!-- 73. Input Pemilih Warna (Color Picker) -->
<label for="favcolor">Pilih warna
favoritmu:</label>
<input type="color" id="favcolor"
name="favcolor" value="#ff0000">
<!-- 74. Input Upload File -->
<label for="myfile">Pilih
file:</label>
<input type="file" id="myfile"
name="myfile">
<!-- 75. Fieldset dan Legend (Mengelompokkan input)
-->
<form>
<fieldset>
<legend>Data
Pribadi:</legend>
<label
for="nama">Nama:</label>
<input
type="text" id="nama"
name="nama"><br><br>
<label
for="email">Email:</label>
<input
type="email" id="email" name="email">
</fieldset>
</form>
<!-- 76. Placeholder (Teks bantuan di dalam input) -->
<input type="text" placeholder="Ketik nama
pengguna di sini...">
<!-- 77. Input yang Wajib Diisi (Required) -->
<form action="/proses-data.php">
<label
for="username">Username (wajib):</label>
<input
type="text" id="username" name="username"
required>
<input
type="submit">
</form>
<!-- 78. Input yang Dinonaktifkan (Disabled) -->
<label for="negara">Negara:</label>
<input type="text" id="negara"
name="negara" value="Indonesia" disabled>
<!-- 79. Input Hanya Baca (Read-only) -->
<label for="kode">Kode User:</label>
<input type="text" id="kode"
name="kode" value="USR123" readonly>
<!-- 80. Tombol Biasa (Button) -->
<button type="button"
onclick="alert('Halo!')">Klik Aku!</button>
IGNORE_WHEN_COPYING_START
content_copy download
Use code with
caution. Html
IGNORE_WHEN_COPYING_END
Bagian 6: Struktur Halaman & Semantik (Contoh 81-90)
Ini adalah cara "pro" menyusun halaman web. Tag
ini tidak mengubah tampilan, tapi memberitahu browser dan mesin pencari
(seperti Google) tentang struktur konten kita. Ini sangat penting!
Generated html
<!-- 81.
Header (Untuk bagian atas halaman: logo, judul, navigasi) -->
<header>
<h1>Judul
Website Keren</h1>
<p>Slogan website kita ada di
sini.</p>
</header>
<!-- 82. Nav (Untuk menu navigasi utama) -->
<nav>
<a
href="/">Beranda</a> |
<a
href="/profil">Profil</a> |
<a
href="/kontak">Kontak</a>
</nav>
<!-- 83. Main
(Untuk konten utama halaman) -->
<main>
<h2>Artikel
Utama</h2>
<p>Ini adalah isi konten paling penting dari
halaman ini.</p>
</main>
<!-- 84. Section (Untuk mengelompokkan konten yang
berhubungan) -->
<section>
<h3>Tentang
Saya</h3>
<p>Saya adalah
siswa SMP yang suka coding.</p>
</section>
<section>
<h3>Hobi
Saya</h3>
<p>Hobi saya
adalah bermain basket dan membaca buku.</p>
</section>
<!-- 85. Article (Untuk konten mandiri seperti postingan
blog) -->
<article>
<h2>Cara
Membuat Nasi Goreng</h2>
<p>Pertama, siapkan nasi...</p>
</article>
<!-- 86. Aside
(Untuk konten sampingan, seperti iklan atau link terkait) -->
<aside>
<h4>Link
Populer</h4>
<a
href="#">Artikel 1</a><br>
<a
href="#">Artikel 2</a>
</aside>
<!-- 87. Footer (Untuk bagian bawah halaman: hak cipta,
kontak) -->
<footer>
<p>© 2023
Website Saya. Dibuat dengan cinta.</p>
</footer>
<!-- 88. Details dan Summary (Untuk membuat konten
accordion/toggle) -->
<details>
<summary>Klik
untuk melihat jawaban</summary>
<p>Jawabannya
adalah: HTML itu mudah dan menyenangkan!</p>
</details>
<!-- 89. Time (Untuk menandai waktu atau tanggal) -->
<p>Artikel ini dipublikasikan pada <time
datetime="2023-12-25">25 Desember 2023</time>.</p>
<!-- 90. Gabungan Semua Tag Semantik (Struktur Halaman
Lengkap) -->
<!DOCTYPE html>
<html>
<head>
<title>Struktur Lengkap</title>
</head>
<body>
<header>
<h1>Blog
Pribadiku</h1>
</header>
<nav>
<a
href="#">Home</a> <a
href="#">About</a>
</nav>
<main>
<article>
<h2>Belajar HTML itu Seru</h2>
<p>Ini adalah konten artikel saya...</p>
</article>
</main>
<aside>
<p>Widget sampingan.</p>
</aside>
<footer>
<p>Copyright 2023</p>
</footer>
</body>
</html>
IGNORE_WHEN_COPYING_START
content_copy download
Use code with
caution. Html
IGNORE_WHEN_COPYING_END
Bagian 7: Tingkat Lanjut - Pengenalan CSS &
JavaScript (Contoh 91-100)
Sekarang kita
akan sedikit "mengintip" kekuatan CSS (untuk menghias) dan JavaScript
(untuk membuat interaksi). Ini akan membuat website kita jauh lebih
keren!
Generated html
<!-- 91.
Pengenalan Inline CSS (Mengubah Warna Teks) -->
<p style="color:blue;">Paragraf ini berwarna
biru.</p>
<!-- 92. Inline CSS (Mengubah Ukuran Font) -->
<h1 style="font-size:50px;">Judul ini lebih
besar dari biasanya.</h1>
<!-- 93. Inline CSS (Mengubah Warna Latar) -->
<p style="background-color:yellow;">Paragraf
ini punya latar belakang kuning.</p>
<!-- 94. Inline CSS (Mengubah Jenis Font) -->
<p style="font-family:courier;">Paragraf ini
menggunakan font Courier.</p>
<!-- 95. Pengenalan Internal CSS (Menulis CSS di dalam
<head>) -->
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:
lightblue;
}
h1 {
color: white;
text-align:
center;
}
p {
font-family:
verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Halaman dengan Style</h1>
<p>Semua
paragraf akan mengikuti style ini.</p>
</body>
</html>
<!-- 96. Pengenalan CSS Class (Membuat style yang bisa
dipakai ulang) -->
<head>
<style>
.kota {
background-color:
tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="kota">London</h2>
<p>London adalah ibu kota Inggris.</p>
<h2
class="kota">Paris</h2>
<p>Paris adalah ibu kota Perancis.</p>
</body>
<!-- 97. Pengenalan CSS ID (Membuat style khusus untuk
satu elemen) -->
<head>
<style>
#judul-utama {
background-color:
lightblue;
color: black;
padding: 20px;
text-align:
center;
}
</style>
</head>
<body>
<h1 id="judul-utama">Judul Spesial
Saya</h1>
</body>
<!-- 98. Pengenalan JavaScript (Membuat Alert saat tombol
diklik) -->
<button onclick="alert('Kamu mengklik
saya!')">Klik di sini!</button>
<!-- 99.
PROYEK MINI 1: Halaman Profil Sederhana -->
<!DOCTYPE html>
<html lang="id">
<head>
<title>Profil Budi</title>
<style> body
{ font-family: sans-serif; } .foto-profil { border-radius: 50%; }
</style>
</head>
<body>
<header>
<h1>Profil Saya</h1>
</header>
<main>
<section>
<img
src="foto-profil.jpg" alt="Foto Budi" width="150"
class="foto-profil">
<h2>Budi Sanjaya</h2>
<p>Siswa Kelas 8 di SMP Cita-Cita Luhur.</p>
</section>
<section>
<h3>Hobi Saya</h3>
<ul>
<li>Bermain Futsal</li>
<li>Coding</li>
<li>Membaca Komik</li>
</ul>
</section>
<section>
<h3>Hubungi Saya</h3>
<p>Kamu bisa follow saya di <a href="#"
target="_blank">Instagram</a>.</p>
</section>
</main>
<footer>
<p>©
2023 Budi Sanjaya</p>
</footer>
</body>
</html>
<!-- 100. PROYEK MINI 2: Form Pendaftaran Lomba 17-an
-->
<!DOCTYPE html>
<html lang="id">
<head>
<title>Daftar Lomba 17-an</title>
<style> body
{ font-family: Arial; background-color: #f4f4f4; } form { max-width: 500px;
margin: auto; padding: 20px; background: white; } </style>
</head>
<body>
<h1
style="text-align: center;">Form Pendaftaran Lomba 17
Agustus</h1>
<form
action="/proses-daftar.php">
<fieldset>
<legend>Data Diri</legend>
<p>
<label for="nama">Nama Lengkap:</label><br>
<input type="text" id="nama"
name="nama" required placeholder="Contoh: Budi Sanjaya">
</p>
<p>
<label for="kelas">Kelas:</label><br>
<input type="text" id="kelas"
name="kelas" required placeholder="Contoh: 8A">
</p>
</fieldset>
<fieldset>
<legend>Pilihan Lomba (Pilih satu)</legend>
<p>
<input type="radio" id="lomba1"
name="lomba" value="Balap Karung">
<label for="lomba1">Lomba Balap
Karung</label><br>
<input type="radio" id="lomba2"
name="lomba" value="Makan Kerupuk">
<label for="lomba2">Lomba Makan
Kerupuk</label><br>
<input type="radio" id="lomba3"
name="lomba" value="Tarik Tambang">
<label for="lomba3">Lomba Tarik Tambang</label>
</p>
</fieldset>
<br>
<input
type="submit" value="Daftar Sekarang!">
<input
type="reset" value="Ulangi">
</form>
</body>
</html>
IGNORE_WHEN_COPYING_START
content_copy download
Use code with
caution. Html
IGNORE_WHEN_COPYING_END
Langkah Selanjutnya?
Wow, keren! Kalian sudah berhasil melewati 100 contoh kode
HTML. Sekarang kalian sudah punya
dasar yang sangat kuat.
Apa selanjutnya?
- Berlatih
Terus: Coba buat halaman web sendiri. Mungkin tentang hobi kalian,
game favorit, atau biodata diri yang lebih keren.
- Pelajari CSS: Ingat analogi rumah tadi? Sekarang
saatnya belajar mengecat dinding, memilih perabotan, dan menata taman
dengan CSS (Cascading Style Sheets). CSS akan membuat website
kalian jadi cantik!
- Pelajari
JavaScript: Jika ingin membuat website-mu lebih interaktif (misalnya
membuat game sederhana atau kalkulator), maka langkah selanjutnya adalah
belajar JavaScript.
Tetap semangat,
jangan takut untuk mencoba dan berbuat salah. Kesalahan dalam coding
adalah bagian dari belajar. Selamat menjadi programmer web masa depan
0 Comments
Post a Comment