HTML (Hypertext Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur dasar dari halaman web. Dalam konteks pengajaran kepada anda, memahami struktur dasar HTML adalah langkah pertama yang penting dalam memahami dasar-dasar pengembangan web. Artikel ini akan memberikan panduan lengkap tentang struktur dasar HTML, termasuk tag doctype, head, body, serta beberapa tag penting lainnya, disertai dengan penjelasan yang mudah dipahami bagi anda.
Table of Contents
1. Tag Doctype
Tag doctype (<!DOCTYPE html>) adalah tag yang mendefinisikan jenis dokumen HTML yang digunakan. Ini harus ditempatkan di bagian paling atas dari dokumen HTML dan merupakan bagian yang wajib ada dalam setiap halaman HTML. Tag doctype memberitahu browser jenis dokumen HTML yang digunakan, sehingga browser dapat menampilkan halaman web dengan benar.
<!DOCTYPE html>
2. Bagian Head HTML
Bagian head HTML berisi informasi tentang dokumen HTML, seperti judul halaman, tautan ke stylesheet eksternal, meta-data, dan skrip JavaScript yang digunakan dalam halaman. Bagian head tidak ditampilkan secara langsung pada halaman web, tetapi digunakan untuk memberikan informasi yang penting untuk browser dan mesin pencari.
Tag Penting dalam Bagian Head:
<title>: Menentukan judul halaman web yang ditampilkan di tab browser. Judul halaman memberikan informasi tentang konten halaman kepada pengguna dan juga penting untuk SEO (Search Engine Optimization).<meta>: Menyediakan informasi meta-data tentang halaman web, seperti deskripsi dan kata kunci. Meta-data digunakan oleh mesin pencari untuk memahami konten halaman.<link>: Menautkan halaman web dengan stylesheet eksternal. Stylesheet digunakan untuk mengatur tata letak, warna, dan gaya halaman web.<script>: Menambahkan skrip JavaScript ke halaman web. Skrip JavaScript digunakan untuk menambahkan interaktivitas dan fungsionalitas ke halaman web.
<head>
<title>Judul Halaman</title>
<meta charset="UTF-8">
<meta name="description" content="Deskripsi Halaman">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
3. Bagian Body HTML
Bagian body HTML berisi semua konten yang akan ditampilkan pada halaman web, seperti teks, gambar, tautan, tabel, formulir, dan elemen-elemen interaktif lainnya. Bagian body adalah bagian yang ditampilkan secara langsung kepada pengguna saat mereka mengunjungi halaman web.
Tag Penting dalam Bagian Body:
<h1>,<h2>, …,<h6>: Elemen heading untuk menampilkan judul atau heading pada halaman web. Semakin tinggi nomor heading, semakin rendah tingkat kepentingannya.<p>: Elemen paragraph untuk menampilkan teks paragraf.<a>: Elemen tautan atau hyperlink untuk membuat tautan ke halaman web lain.<img>: Elemen gambar untuk menampilkan gambar pada halaman web.<ul>,<ol>,<li>: Elemen daftar untuk membuat daftar tak berurutan dan berurutan.<table>,<tr>,<td>,<th>: Elemen tabel untuk membuat tabel pada halaman web.<form>,<input>,<button>: Elemen formulir untuk membuat formulir input seperti teks, kotak centang, dan tombol.
<body>
<h1>Selamat Datang!</h1>
<p>Ini adalah paragraf pertama.</p>
<a href="https://www.example.com">Klik di sini</a> untuk mengunjungi situs web kami.
<img src="gambar.jpg" alt="Deskripsi Gambar">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<table>
<tr>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
<form>
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">
<input type="submit" value="Kirim">
</form>
</body>
Memahami struktur dasar HTML dan tag-tag penting seperti tag doctype, head, body, serta beberapa tag penting lainnya adalah langkah pertama yang penting dalam mempelajari pengembangan web. Dengan menggunakan tag-tag ini, anda akan memiliki dasar yang kuat dalam memahami bagaimana sebuah halaman web dibangun dan bekerja. Anda dapat melanjutkan pelajaran anda ke pengenalan dasar html. Selamat belajar!
Leave a Reply