Modul Belajar HTML Dasar untuk Pemula: Panduan Lengkap dengan Contoh dan Penjelasan
Bagian 1: Struktur Dasar HTML
🔹 Fungsi
Menjadi kerangka awal setiap halaman web HTML.
🔹 Syntax
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman web</title>
</head>
<body>
<h1>Halo Dunia!</h1>
</body>
</html>
🔹 Penjelasan
<!DOCTYPE html>: Menyatakan dokumen ini menggunakan HTML5.<html>: Tag utama pembungkus seluruh isi HTML.<head>: Berisi informasi meta (judul, charset, link CSS, dsb).<title>: Judul halaman (terlihat di tab browser).<body>: Isi utama halaman web (yang dilihat pengguna).
Bagian 2: Elemen Teks
1. Heading
- Fungsi: Menandai judul atau subjudul.
- Tag:
<h1>s.d.<h6>(semakin kecil angkanya, semakin kecil ukurannya).
<h1>Judul Besar</h1>
<h2>Sub Judul</h2>2. Paragraf
<p>Ini adalah paragraf pertama saya dalam HTML.</p>3. Line Break & Horizontal Line
<p>Baris 1<br>Baris 2</p>
<hr>4. Text Format
<b>Tebal</b>
<strong>Penting</strong><br>
<i>Miring</i>
<em>Penekanan</em><br>
<mark>Highlight</mark>
code>kode</code>Bagian 3: Gambar dan Link
1. Menampilkan Gambar
<img src="gambar.jpg" alt="deskripsi gambar" width="200">2. Membuat Tautan
<a href="https://tjkt.smknegeri1kandanghaur.sch.id" target="_blank">Kunjungi web TJKT NESAKA<a/>Bagian 4: List (Daftar)
1. Daftar Tak Berurutan
<ul>
<li>Login</li>
<li>Isi Form</li>
</ul>2. Daftar Berurutan
<ol>
<li>Login</li>
<li>Isi Form</li>
</ol>Bagian 5: Formulir Sederhana
<form>
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama"><br></br>
<input type="submit" value="kirim">
</form>Bagian 6: Tabel
<table border="1">
<tr>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>Andi</td>
<td>XI TKJ</td>
</tr>
</table>Bagian 7: Multimedia (Audio & Video)
<audio controls>
<source src="musik.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
Tinggalkan Balasan