Pengertian HTML
HTML adalah singkatan dari Hypertext Markup Language. Ini adalah bahasa markah standar yang digunakan untuk membuat halaman web. HTML memberikan struktur dasar untuk konten web, termasuk teks, gambar, tautan, formulir, dan elemen-elemen lainnya.
Struktur Dasar HTML
Setiap halaman web HTML memiliki struktur dasar yang terdiri dari elemen-elemen utama. Struktur ini harus diikuti untuk memastikan bahwa halaman dapat diinterpretasikan dengan benar oleh peramban web.
Contoh struktur dasar HTML:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman</title>
</head>
<body>
<!-- Konten halaman web -->
<h1>Selamat Datang di Situs Web Saya</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>
```
Elemen HTML Umum
Teks
- `<h1>` hingga `<h6>`: Heading (judul) level 1 hingga 6.
- `<p>`: Paragraf.
- `<strong>`: Teks tebal.
- `<em>`: Teks miring.
Gambar
- `<img>`: Menyisipkan gambar.
```html
<img src="url_gambar.jpg" alt="Deskripsi Gambar">
```
Tautan (Link)
- `<a>`: Membuat tautan (link).
```html
<a href="https://www.contoh.com">Kunjungi Contoh.com</a>
```
Daftar (list)
- `<ul>`: Daftar tak terurut.
```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
```
- `<ol>`: Daftar terurut.
```html
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
```
Formulir
- `<form>`: Membuat formulir.
- `<input>`: Elemen input dalam formulir.
- `<textarea>`: Area teks dalam formulir.
- `<button>`: Tombol dalam formulir.
Attribut HTML Umum
- `class`: Menentukan kelas elemen.
- `id`: Menentukan ID elemen.
- `style`: Menentukan gaya CSS inline.
- `src`: Menentukan sumber (source), seperti untuk gambar atau skrip.
- `href`: Menentukan lokasi tautan.
Contoh Penggunaan Elemen dan Attribut
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh HTML</title>
<style>
.judul-miring {
font-style: italic;
}
</style>
</head>
<body>
<h1 class="judul-miring">Ini adalah Judul dengan Gaya Miring</h1>
<p id="paragraf-1">Ini adalah paragraf pertama.</p>
<img src="gambar.jpg" alt="Deskripsi Gambar">
<a href="https://www.contoh.com">Kunjungi Contoh.com</a>
</body>
</html>
```
Materi ini hanya memberikan gambaran dasar tentang HTML. Untuk pemahaman yang lebih mendalam, disarankan untuk melanjutkan dengan mempelajari CSS (Cascading Style Sheets) untuk pengaturan tata letak dan tampilan halaman web, serta JavaScript untuk menambahkan interaktivitas ke halaman web.