Pelajaran HTML untuk Pemula

HTML, ataupun HyperText Markup Language, merupakan fondasi dari nyaris seluruh taman website. Selaku bahasa markup yang digunakan buat membuat struktur serta konten taman website, HTML ialah keahlian bawah yang wajib dipahami oleh tiap pengembang website. Bila kita baru mulai belajar HTML serta mau menguasai dasar- dasarnya dari nol, postingan ini hendak membagikan panduan lengkap buat menolong kita mengawali.

Apa Itu HTML?

HTML merupakan bahasa markup yang digunakan buat membuat serta menyusun elemen- elemen di taman website. HTML sediakan struktur buat bacaan, foto, video, serta bermacam elemen yang lain yang kita amati di web website. HTML memakai tag buat memastikan gimana elemen- elemen ini ditampilkan di browser.

Struktur Dasar Dokumen HTML

Dokumen HTML dimulai dengan deklarasi tipe dokumen dan diikuti oleh elemen-elemen dasar. Berikut adalah struktur dasar dokumen HTML:

<!DOCTYPE html>

<html>

<head>

<title>Judul Halaman</title>

</head>

<body>

<h1>Selamat datang di HTML!</h1>

<p>Ini adalah paragraf pertama saya.</p>

</body>

</html>

<!DOCTYPE html>: Menunjukkan bahwa dokumen ini menggunakan HTML5.
<html>: Elemen root yang membungkus seluruh konten halaman web.
<head>: Bagian yang berisi meta-informasi tentang halaman, seperti judul dan link ke file CSS.
<title>: Menentukan judul halaman yang ditampilkan di tab browser.
<body>: Bagian utama halaman web yang berisi konten yang terlihat oleh pengguna.

Elemen dan Tag HTML

Tag HTML biasanya terdiri dari tag pembuka dan tag penutup. Tag pembuka mengandung nama elemen dan atribut, sedangkan tag penutup hanya mengandung nama elemen dengan garis miring di depannya. Misalnya, <p>Ini paragraf.</p>.

Beberapa elemen HTML dasar meliputi:

Heading Tags (<h1> hingga <h6>)
Digunakan untuk membuat judul dengan berbagai tingkat kepentingan.

   <h1>Judul Utama</h1>
   <h2>Subjudul</h2>

Paragraph (<p>)
Digunakan untuk membuat paragraf teks.

   <p>Ini adalah paragraf teks.</p>

Anchor (<a>)
Digunakan untuk membuat tautan ke halaman lain atau URL.

   <a href="https://www.example.com">Kunjungi Example.com</a>

Image (<img>)
Digunakan untuk menampilkan gambar. Memerlukan atribut src untuk menentukan sumber gambar.

   <img src="gambar.jpg" alt="Deskripsi Gambar">

List (<ul>, <ol>, <li>)
Digunakan untuk membuat daftar tidak terurut (<ul>) atau terurut (<ol>), dengan setiap item daftar menggunakan tag <li>.

   <ul>
       <li>Item 1</li>
       <li>Item 2</li>
   </ul>

Table (<table>, <tr>, <td>, <th>)
Digunakan untuk membuat tabel data.

   <table>
       <tr>
           <th>Kolom 1</th>
           <th>Kolom 2</th>
       </tr>
       <tr>
           <td>Data 1</td>
           <td>Data 2</td>
       </tr>
   </table>

Atribut HTML

Atribut HTML memberikan informasi tambahan tentang elemen dan biasanya ditulis di dalam tag pembuka. Beberapa atribut umum meliputi:

href: Digunakan pada tag <a> untuk menentukan URL target.

   <a href="https://www.example.com">Kunjungi Example.com</a>

src: Digunakan pada tag <img> untuk menentukan lokasi gambar.

   <img src="gambar.jpg" alt="Deskripsi Gambar">

alt: Digunakan pada tag <img> untuk menyediakan deskripsi alternatif jika gambar tidak dapat dimuat.

   <img src="gambar.jpg" alt="Deskripsi Gambar">

class: Digunakan untuk memberi kelas pada elemen yang dapat ditargetkan oleh CSS.

   <p class="teks-utama">Ini adalah teks utama.</p>

id: Digunakan untuk memberikan identitas unik pada elemen.

   <p id="paragraf-utama">Ini adalah paragraf utama.</p>

Formulir HTML

Formulir HTML digunakan untuk mengumpulkan data dari pengguna. Elemen formulir meliputi:

Form (<form>)
Menandai awal dan akhir formulir.

   <form action="/submit" method="post">
       <label for="nama">Nama:</label>
       <input type="text" id="nama" name="nama">
       <input type="submit" value="Kirim">
   </form>

Input (<input>)
Digunakan untuk menerima input dari pengguna. Tipe input dapat bervariasi (teks, password, email, dll).

   <input type="text" name="nama" placeholder="Masukkan nama">

Label (<label>)
Menyediakan deskripsi untuk elemen input.

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

Textarea (<textarea>)
Digunakan untuk area input multi-baris.

   <textarea name="komentar" rows="4" cols="50"></textarea>

Select (<select>, <option>)
Digunakan untuk membuat menu dropdown.

   <select name="opsi">
       <option value="1">Opsi 1</option>
       <option value="2">Opsi 2</option>
   </select>

HTML Semantik

HTML semantik menggunakan elemen yang menggambarkan makna konten dengan lebih baik. Beberapa elemen semantik yang umum digunakan meliputi:

<header>: Menandai bagian atas halaman atau bagian dari halaman.

   <header>
       <h1>Judul Situs</h1>
   </header>

<nav>: Menandai bagian navigasi.

   <nav>
       <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">About</a></li>
       </ul>
   </nav>

<article>: Menandai konten independen yang dapat berdiri sendiri.

   <article>
       <h2>Judul Artikel</h2>
       <p>Isi artikel.</p>
   </article>

<section>: Menandai bagian-bagian dari dokumen.

   <section>
       <h2>Bagian 1</h2>
       <p>Isi bagian 1.</p>
   </section>

<footer>: Menandai bagian bawah halaman atau bagian dari halaman.

   <footer>
       <p>&copy; 2024 Nama Situs</p>
   </footer>

Memvalidasi Kode HTML

Validasi HTML berarti buat membenarkan kalau kode kita cocok dengan standar website serta leluasa dari kesalahan. Kita bisa memakai perlengkapan validasi HTML semacam W3C Validator buat mengecek serta membetulkan permasalahan dalam kode HTML kita.

Ingin jadi UI- UX Designer? Cek panduan lengkap UI- UX Design berikut.

Belajar HTML merupakan langkah awal yang sangat berarti dalam pengembangan website. Dengan menguasai struktur bawah dokumen HTML, bermacam elemen serta tag, dan atribut- atributnya, kita hendak bisa membuat taman website yang simpel tetapi efisien. Praktikkan pemakaian bermacam elemen serta atribut HTML, dan eksplorasi elemen semantik buat membuat taman website yang lebih terstruktur serta gampang dibaca.

Mudah- mudahan panduan ini menolong kita mengawali ekspedisi belajar HTML serta membangun fondasi yang kokoh buat pengembangan website!

codingtutu – Kumpulan coding program webdesign