Belajar HTML dasar

3 min read 01-09-2024
Belajar HTML dasar

Pendahuluan

HTML (HyperText Markup Language) adalah bahasa pemrograman dasar yang digunakan untuk membangun struktur dan konten website. Sebagai bahasa markup, HTML menggunakan tag untuk mendefinisikan elemen-elemen seperti judul, paragraf, gambar, dan tautan. Menguasai HTML adalah langkah pertama yang penting untuk menjadi seorang web developer. Artikel ini akan membahas secara lengkap dasar-dasar HTML, mulai dari struktur dasar hingga penerapan berbagai elemen penting dalam membangun website.

1. Memahami Struktur Dasar HTML

1.1. Dokumen HTML

Setiap halaman web ditulis dalam dokumen HTML, yang memiliki struktur dasar yang sama. Berikut adalah struktur dasar dokumen HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Judul Halaman Web</title>
</head>
<body>
  <h1>Judul Utama</h1>
  <p>Ini adalah paragraf pertama.</p>
</body>
</html>

Penjelasan:

  • <!DOCTYPE html>: Deklarasi ini mendefinisikan jenis dokumen HTML yang digunakan. Dalam kasus ini, kita menggunakan HTML5.
  • <html>: Tag ini adalah tag akar yang menandai awal dan akhir dokumen HTML.
  • <head>: Tag ini berisi metadata tentang dokumen HTML, seperti judul halaman, tautan ke file CSS, dan meta tag lainnya.
  • <title>: Tag ini menentukan judul halaman web yang ditampilkan pada tab browser.
  • <body>: Tag ini berisi konten yang ditampilkan pada halaman web, seperti teks, gambar, video, dan lainnya.

1.2. Tag dan Atribut

HTML menggunakan tag untuk mendefinisikan elemen-elemen dalam dokumen HTML. Setiap tag memiliki nama yang diawali dengan karakter kurang dari (<) dan diakhiri dengan karakter lebih dari (>). Beberapa tag memiliki atribut yang memberikan informasi tambahan tentang elemen tersebut.

Contoh:

<img src="gambar.jpg" alt="Gambar" width="200" height="100">

Dalam contoh di atas, tag <img> mendefinisikan elemen gambar. Atribut src menunjukkan sumber gambar, alt adalah teks alternatif yang ditampilkan jika gambar tidak dapat dimuat, dan width dan height menentukan lebar dan tinggi gambar dalam piksel.

2. Elemen-Elemen Penting dalam HTML

2.1. Teks

Tag <p> digunakan untuk mendefinisikan paragraf teks.

<p>Ini adalah contoh paragraf pertama.</p>
<p>Ini adalah contoh paragraf kedua.</p>

Tag <h1> hingga <h6> digunakan untuk mendefinisikan judul dan subjudul dengan tingkat hierarki yang berbeda.

<h1>Judul Utama</h1>
<h2>Judul Sub</h2>
<h3>Judul Sub 2</h3>

Tag <b>, <strong>, <i>, dan <em> digunakan untuk mendefinisikan teks yang tebal, teks yang penting, teks miring, dan teks yang ditekankan.

<b>Teks tebal</b>
<strong>Teks penting</strong>
<i>Teks miring</i>
<em>Teks ditekankan</em>

2.2. Gambar

Tag <img> digunakan untuk menampilkan gambar dalam halaman web.

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

Atribut src menentukan sumber gambar, dan alt adalah teks alternatif yang ditampilkan jika gambar tidak dapat dimuat.

2.3. Tautan

Tag <a> digunakan untuk membuat tautan ke halaman web lain atau ke bagian lain dari halaman yang sama.

<a href="https://www.google.com">Kunjungi Google</a>

Atribut href menentukan URL tujuan tautan.

2.4. Daftar

HTML menyediakan dua jenis daftar: daftar berurutan dan daftar tak berurutan.

Daftar berurutan

Tag <ol> digunakan untuk mendefinisikan daftar berurutan.

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Daftar tak berurutan

Tag <ul> digunakan untuk mendefinisikan daftar tak berurutan.

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

2.5. Tabel

Tag <table>, <tr>, <th>, dan <td> digunakan untuk membuat tabel.

<table>
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane Doe</td>
    <td>25</td>
  </tr>
</table>

2.6. Formulir

Tag <form>, <input>, <textarea>, <select>, dan <button> digunakan untuk membuat formulir.

<form>
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama">
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br>
  <button type="submit">Kirim</button>
</form>

3. Menjalankan Kode HTML

Kode HTML dapat dijalankan menggunakan browser web. Anda dapat membuat file HTML dengan ekstensi .html, dan kemudian membukanya di browser web.

4. Tips Belajar HTML

  • Mulailah dengan contoh sederhana: Cobalah untuk membuat halaman web sederhana dengan teks, gambar, dan tautan.
  • Gunakan editor kode: Gunakan editor kode seperti Visual Studio Code atau Sublime Text untuk menulis kode HTML dengan lebih mudah.
  • Latih terus-menerus: Semakin banyak Anda berlatih, semakin mahir Anda dalam HTML.
  • Gunakan sumber belajar online: Ada banyak sumber belajar online yang tersedia, seperti W3Schools, Codecademy, dan Khan Academy.

5. Kesimpulan

HTML adalah bahasa pemrograman dasar yang penting untuk membangun website. Memahami dasar-dasar HTML adalah langkah pertama yang penting untuk menjadi seorang web developer. Dengan mempelajari struktur dasar, elemen-elemen penting, dan menjalankan kode HTML, Anda dapat mulai membangun website Anda sendiri.

Related Posts


Latest Posts


Popular Posts