اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Halo, calon ahli digital masa depan!Yuk, belajar bareng Bu Mawar—karena dari satu klik, bisa lahir sejuta ide dan manfaat.HTML (HyperText Markup Language) adalah bahasa standar untuk membuat halaman web.
HTML berfungsi untuk menentukan struktur dan isi dari halaman web, seperti : teks, gambar, tautan, tabel, formulir, dan sebagainya.
HTML bukan bahasa pemrograman, melainkan bahasa markup (penanda).
Mari kita lanjut ke struktur html dan tag-tag pentingnya!
Struktur html :
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Selamat Datang di Halaman Web Saya</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>
<!DOCTYPE html> : Harus ada di baris pertama
<html>... </html> : Elemen induk dari seluruh dokumen HTML
<head> ... </head> : Berisi informasi tentang dokumen (metadata)
<title> ... `/title> : Menentukan judul halaman di tab browser
<body> ... </body> : Berisi konten utama yang terlihat oleh pengguna
Teks :
| Tag |
Fungsi |
Contoh |
<h1> sampai <h6> |
Heading (judul) dari besar ke kecil |
<h1>Judul Utama</h1> |
<p> |
Paragraf |
<p>Ini contoh paragraf.</p> |
<br> |
Baris baru (enter) |
<p>Baris 1<br>Baris 2</p> |
<b> atau <strong> |
Menebalkan teks |
<b>teks tebal</b> |
<i> atau <em> |
Miringkan teks |
<i>teks miring</i> |
<u> |
Garis bawah |
<u>garis bawah</u> |
Gambar dan tautan :
| Tag |
Fungsi |
Contoh |
<img> |
Menampilkan gambar |
<img src="foto.jpg" alt="Foto Profil"> |
<a> |
Membuat hyperlink |
<a href="https://www.google.com">Google</a> |
List :
| Tag |
Fungsi |
Contoh |
<ul> |
Daftar tidak berurutan (bullet) |
<ul><li>Item 1</li><li>Item 2</li></ul> |
<ol> |
Daftar berurutan (nomor) |
<ol><li>Langkah 1</li><li>Langkah 2</li></ol> |
<li> |
Elemen dalam daftar |
Digunakan di dalam <ul> atau <ol> |
Tabel :
| Tag |
Fungsi |
Contoh |
<table> |
Membuat tabel |
<table>...</table> |
<tr> |
Baris tabel (table row) |
<tr>...</tr> |
<th> |
Judul kolom (table header) |
<th>Nama</th> |
<td> |
Isi sel tabel (table data) |
<td>Umi</td> |
Formulir :
| Tag |
Fungsi |
Contoh |
<form> |
Membuat form input |
<form action="#">...</form> |
<input> |
Kolom isian |
<input type="text" placeholder="Nama"> |
<textarea> |
Kotak teks panjang |
<textarea></textarea> |
<select> |
Daftar pilihan |
<select><option>A</option><option>B</option></select> |
<button> |
Tombol |
<button>Kirim</button> |
html5 :
| Tag |
Fungsi |
Keterangan |
<header> |
Bagian kepala halaman |
Biasanya berisi logo atau navigasi |
<nav> |
Menu navigasi |
Berisi tautan antar halaman |
<main> |
Isi utama halaman |
Fokus konten utama |
<section> |
Bagian dalam halaman |
Misal: artikel, fitur, atau konten tertentu |
<article> |
Konten mandiri |
Misal: postingan blog |
<footer> |
Bagian bawah halaman |
Biasanya berisi hak cipta atau kontak |
Setiap tag pembuka harus diakhiri dengan tag penutup, kecuali beberapa tag seperti <br>, <img>, <input>.
Tag bisa memiliki atribut seperti:
- src (sumber gambar)
- href (alamat tautan)
- alt (teks alternatif)
- id atau class (penanda untuk CSS atau JavaScript)
Penulisan HTML tidak peka huruf besar-kecil, tapi disarankan pakai huruf kecil semua agar rapi dan konsisten.
Tidak ada komentar:
Posting Komentar