Belajar HTML #2: Struktur dasar dan Tag HTML

Author Erick Irwansyah
25 Dec 2024
Html
Belajar HTML #2: Struktur dasar dan Tag HTML

Hai! Semoga semangat belajarnya tetap tinggi. ? Kali ini kita akan membahas struktur dasar HTML lebih dalam dan mengenal beberapa tag penting yang wajib kamu ketahui saat membuat halaman web. Yuk, kita mulai!

Mengapa Struktur Itu Penting?

Struktur HTML menentukan bagaimana konten akan ditampilkan di browser. Kalau HTML-mu tertata rapi, tidak hanya memudahkan kamu membaca kodenya, tapi juga memudahkan browser untuk merender halaman dengan benar.

Struktur Dasar HTML

Coba perhatikan kode berikut:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Halaman Saya</title>
  </head>
  <body>
    <h1>Halo, Dunia!</h1>
    <p>Ini adalah paragraf pertama saya di HTML.</p>
  </body>
</html>

Mari kita pecah satu per satu:

  1. <!DOCTYPE html>
    Ini memberi tahu browser bahwa kita menggunakan HTML5. Penting banget, jangan lupa menulis ini di bagian atas setiap file HTML.

  2. <html>
    Semua elemen HTML berada di dalam tag ini. Ini adalah elemen paling luar.

  3. <head>
    Bagian ini berisi informasi tentang halaman, seperti judul (dengan <title>) dan metadata (dengan <meta>).

  4. <body>
    Semua konten yang terlihat oleh pengguna berada di sini, seperti teks, gambar, atau video.

Tag Penting dalam HTML

Berikut adalah beberapa tag dasar yang wajib kamu tahu:

  1. Tag Heading (<h1> hingga <h6>)
    Digunakan untuk judul. Ukurannya dari besar ke kecil:

    <h1>Ini Heading 1</h1>
<h2>Ini Heading 2</h2>
<h3>Ini Heading 3</h3>

  2. Tag Paragraf (<p>)
    Untuk menulis teks paragraf:

    <p>Belajar HTML itu menyenangkan!</p>

  3. Tag Tautan (<a>)
    Membuat hyperlink:

    <a href="https://www.code80vity.com">Kunjungi Code80vity</a>

  4. Tag Gambar (<img>)
    Menampilkan gambar:

    <img src="gambar.jpg" alt="Deskripsi Gambar">
    • src: Lokasi file gambar.
    • alt: Teks alternatif jika gambar gagal dimuat.

  5. Tag Daftar (<ul> dan <ol>)
    Membuat daftar bullet atau nomor:

    <!-- Daftar tidak berurutan -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Daftar berurutan -->
<ol>
  <li>Langkah 1</li>
  <li>Langkah 2</li>
  <li>Langkah 3</li>
</ol>

Praktik Langsung

Coba buat file baru dan tambahkan kode berikut:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Belajar HTML</title>
  </head>
  <body>
    <h1>Selamat Datang di Belajar HTML</h1>
    <p>Ini adalah contoh struktur dasar HTML dengan beberapa tag penting:</p>

    <h2>Daftar Teknologi</h2>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>

    <h2>Gambar Favorit</h2>
    <img src="https://via.placeholder.com/150" alt="Contoh Gambar">

    <h2>Tautan</h2>
    <p>Kunjungi <a href="https://www.code80vity.com">Code80vity</a> untuk belajar lebih banyak.</p>
  </body>
</html>

Buka file ini di browser. Lihat hasilnya dan coba edit beberapa bagian, misalnya tambahkan daftar lain atau ganti gambar.

Tantangan untuk Kamu

  1. Buat daftar baru tentang hobi favoritmu menggunakan <ul> atau <ol>.
  2. Tambahkan gambar lain dengan tag <img>.
  3. Buat tautan ke situs favoritmu menggunakan <a>.

Artikel ini adalah fondasi penting untuk memahami elemen dasar HTML. Jangan lewatkan pembelajaran ini sebelum lanjut ke tutorial berikutnya di www.code80vity.com. Yuk, terus berlatih dan eksplorasi! ?

Tutorial Terkait Lainnya

Belajar HTML #4: Cara Menambahkan Gambar dan Tautan di HTML
Belajar HTML #4: Cara Menambahkan Gambar dan Tautan di HTML

Halo lagi! Kali ini kita bakal bahas tentang daftar atau list di HTML. Kalau kamu pernah lihat websi...

Baca Tutorial
Belajar HTML #6: Membuat Formulir di HTML
Belajar HTML #6: Membuat Formulir di HTML

Halo teman-teman! Semoga kalian semua sehat dan semangat belajar. Kali ini kita akan bahas sesuatu y...

Baca Tutorial
Belajar HTML #5: Cara Menambahkan Gambar dan Tautan di HTML
Belajar HTML #5: Cara Menambahkan Gambar dan Tautan di HTML

Hai lagi! Gimana belajarnya? Semoga makin lancar, ya. Kali ini kita akan bahas cara membuat tabel di...

Baca Tutorial

Comments

Please login to post a comment.
No comments yet. Be the first to comment!
Previous Next
Tutorial Terkait
Belajar HTML #4: Cara Menambahkan Gambar dan Tautan di HTML
Belajar HTML #5: Cara Menambahkan Gambar dan Tautan di HTML
Belajar HTML #3: Cara Menambahkan Gambar dan Tautan di HTML
Belajar HTML #1: Pengenalan HTML
Tutorial Terbaru
Tutorial PHP Dasar #13: Upload File dengan PHP
25 Dec 2024 Php
Tutorial PHP Dasar #12: php security (sql injection & hashing)
25 Dec 2024 Php
Tutorial PHP Dasar #11: CRUD dengan PHP dan MySQL
25 Dec 2024 Php
Tutorial PHP Dasar #10: Session dan Cookie di PHP
25 Dec 2024 Php
Tutorial PHP Dasar #9: Validasi Form di PHP
25 Dec 2024 Php