Panduan HTML

Selamat datang, para pengembang web yang sedang belajar! Hari ini, kita akan mendalamkan dunia HTML, tulang punggung setiap website yang Anda kunjungi. Sebagai seseorang yang telah mengajar HTML selama lebih dari satu dekade, saya bisa mengatakan bahwa itu tidak begitu menakutkan seperti yang tampak pertama kali. Pada kenyataannya, saya menyukai untuk menganggap HTML sebagai blok Lego dari internet - pieces yang sederhana, tapi saat digabungkan, dapat menciptakan sesuatu yang menakjubkan!

HTML - Cheat Sheet

Daftar Isi

Sebelum kita mulai perjalanan ini, mari kita lihat singkat apa yang akan kita bahas:

Tag Dasar
Atribut Body
Tag Teks
Tautan
Pemformatan
Daftar
Elemen Grafis
Form
Tabel
Atribut Tabel
Atribut tag input HTML5
Editor dan Formatter HTML

Sekarang, mari kita mulai kerja!

Tag Dasar

Setiap dokumen HTML dimulai dengan beberapa tag esensial. Bayangkan ini sebagai dasar halaman web Anda:

<!DOCTYPE html>
<html>
<head>
<title>Halaman Web Pertama Saya</title>
</head>
<body>
Halo, Dunia!
</body>
</html>

mari kitauraikan ini:

<!DOCTYPE html> memberitahu browser ini adalah dokumen HTML5.
<html> adalah elemen akar halaman.
<head> berisi informasi meta tentang dokumen.
<title> menentukan judul dokumen.
<body> menentukan badan dokumen, tempat semua konten terlihat.

Atribut Body

Tag <body> dapat memiliki berbagai atribut untuk mengontrol bagaimana konten ditampilkan. Berikut adalah beberapa yang umum:

Atribut	Deskripsi
bgcolor	Mengatur warna latar belakang
background	Mengatur gambar latar belakang
text	Mengatur warna teks

Contoh:

<body bgcolor="lightblue" text="navy">
Selamat datang di dunia biru saya!
</body>

Ini akan menciptakan halaman dengan latar belakang biru muda dan teks biru laut. Seperti menggambar kamar Anda, tapi untuk website!

Tag Teks

HTML menyediakan beberapa tag untuk pemformatan teks. Berikut adalah beberapa yang paling umum:

Tag	Deskripsi
`<h1>` hingga `<h6>`	Judul (h1 adalah yang terbesar, h6 yang terkecil)
`<p>`	Paragraf
`<br>`	Pemutus baris
`<strong>`	Teks tebal
`<em>`	Teks miring

Contoh:

<h1>Selamat datang di Website Saya</h1>
<pIni adalah pernyataan <strong>tebal</strong>.</p>
<pIni adalah titik yang <em>ditekan</em>.</p>

Tautan

Tautan adalah apa yang membuat web menjadi "web"! Berikut cara untuk membuatnya:

<a href="https://www.example.com">Klik saya!</a>

Atribut href menentukan URL halaman yang dituju oleh tautan. Anda juga dapat menautkan ke bagian khusus halaman menggunakan IDs:

<h2 id="section2">Bagian 2</h2>
<a href="#section2">Pergi ke Bagian 2</a>

Pemformatan

HTML menawarkan berbagai cara untuk memformat teks Anda selain tebal dan miring. Berikut adalah beberapa lagi:

Tag	Deskripsi
`<sup>`	Teks superskrip
`<sub>`	Teks subskrip
`<pre>`	Teks yang diformat
`<code>`	Snippet kode

Contoh:

<p>H<sub>2</sub>O adalah air.</p>
<p>2<sup>3</sup> sama dengan 8.</p>
<pre>
Teks ini
diformat.
</pre>
<p>Ini adalah <code>kode inline</code>.</p>

Daftar

Daftar membantu mengatur informasi. Ada tiga jenis di HTML:

Daftar tak terurut (<ul>)
Daftar terurut (<ol>)
Daftar definisi (<dl>)

Contoh:

<ul>
<li>Apel</li>
<li>Buah banana</li>
<li>Ceri</li>
</ul>

<ol>
<li>Tahap pertama</li>
<li>Tahap kedua</li>
<li>Tahap ketiga</li>
</ol>

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

Elemen Grafis

Gambar dapat membuat website Anda tampak hidup. Berikut cara untuk menambahkannya:

<img src="cat.jpg" alt="Anak kucing yang lucu" width="300" height="200">

Atribut src menentukan file gambar, alt menyediakan teks alternatif untuk pembaca layar atau jika gambar gagal dimuat, dan width serta height mengatur dimensi.

Form

Form memungkinkan pengguna memasukkan data. Berikut contoh form sederhana:

<form action="/submit-form" method="post">
<label for="name">Nama:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<input type="submit" value="Kirim">
</form>

Ini menciptakan form dengan field nama dan email, serta tombol submit.

Tabel

Tabel digunakan untuk menampilkan data dalam baris dan kolom:

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Baris 1, Sel 1</td>
<td>Baris 1, Sel 2</td>
</tr>
<tr>
<td>Baris 2, Sel 1</td>
<td>Baris 2, Sel 2</td>
</tr>
</table>

Atribut Tabel

Tabel dapat disesuaikan dengan berbagai atribut:

Atribut	Deskripsi
border	Mengatur lebar batas
cellpadding	Mengatur ruang antara konten sel dan batas
cellspacing	Mengatur ruang antara sel
width	Mengatur lebar tabel

Atribut tag input HTML5

HTML5 memperkenalkan jenis input baru dan atribut:

Type/Attribute	Deskripsi
type="email"	Untuk alamat email
type="date"	Untuk pemilihan tanggal
type="number"	Untuk input numerik
placeholder	Teks petunjuk di field input
required	Menjadikan field wajib

Contoh:

<input type="email" placeholder="Masukkan email Anda" required>
<input type="date" name="birthday">
<input type="number" min="1" max="100">

Editor dan Formatter HTML

Meskipun Anda dapat menulis HTML dalam setiap editor teks, menggunakan editor HTML khusus dapat membuat hidup Anda lebih mudah. Beberapa opsi populer termasuk:

Visual Studio Code
Sublime Text
Atom

Editor ini menawarkan fitur seperti penyorotan sintaks dan otocompletion, yang dapat menyelamatkan waktu dan kepalaman Anda!

Kesimpulan

Dan begitu punya, teman-teman! Panduan HTML ini mencakup dasar-dasar yang Anda butuhkan untuk mulai membuat halaman web Anda sendiri. Ingat, HTML hanya permulaan. Sebagai Anda maju, Anda akan ingin belajar CSS untuk pemformatan dan JavaScript untuk interaktivitas.

Belajar HTML seperti belajar bahasa baru - itu memerlukan latihan. Jangan takut untuk mencoba dan membuat kesalahan. Itu bagaimana kita semua belajar! Dan siapa tahu? Mungkin website besar berikutnya akan dibangun oleh Anda!

Selamat coding, dan semoga tag Anda selalu tertutup dengan baik!

Credits: Image by storyset