Belajar HTML #1: Pengenalan HTML

Author Erick Irwansyah
25 Dec 2024
Html
Belajar HTML #1: Pengenalan HTML

Hai, gimana kabarnya? Kali ini, kita mulai dari dasar banget, yaitu HTML. Kalau kamu pernah dengar istilah ini, HTML adalah singkatan dari HyperText Markup Language. Ini adalah bahasa standar yang digunakan untuk membuat kerangka sebuah halaman web.

Apa Itu HTML?

HTML adalah fondasi utama sebuah website. Bayangkan sebuah bangunan: HTML adalah rangkanya. Dengan HTML, kamu bisa:

  • Menambahkan teks
  • Memasukkan gambar
  • Membuat tautan
  • Dan mengatur elemen lainnya di halaman web

Format HTML terdiri dari tag. Tag ini biasanya berpasangan, misalnya <p> untuk paragraf:

<p>Ini adalah paragraf pertama saya di HTML!</p>

Setiap pasangan tag punya:

  • Opening tag: <p>
  • Closing tag: </p>
  • Isi di dalamnya, yaitu teks atau elemen lainnya.

Struktur Dasar HTML

Setiap dokumen HTML punya struktur seperti ini:

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Halo, World!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
  </body>
</html>

Penjelasan:

  1. <!DOCTYPE html>: Memberitahu browser bahwa ini adalah dokumen HTML5.
  2. <html>: Elemen utama yang menampung semua konten.
  3. <head>: Tempat informasi metadata, seperti judul halaman.
  4. <title>: Teks yang muncul di tab browser.
  5. <body>: Semua konten yang akan terlihat di halaman web.

Praktik Langsung

Sekarang, yuk coba bikin file HTML sederhana:

  1. Buka teks editor favoritmu (Notepad, VS Code, atau Sublime).

  2. Ketikkan kode berikut:

    <!DOCTYPE html>
<html>
  <head>
    <title>Belajar HTML</title>
  </head>
  <body>
    <h1>Selamat Datang di Dunia HTML</h1>
    <p>Ini adalah langkah pertama kamu dalam belajar membuat website!</p>
  </body>
</html>

  3. Simpan file tersebut dengan nama index.html.

  4. Buka file tersebut di browser (cukup klik dua kali file-nya).

  5. Tada! Kamu baru saja membuat halaman web pertama! ?

Tantangan untuk Kamu

  • Ganti teks di tag <h1> dan <p> dengan kalimat kamu sendiri.
  • Tambahkan satu paragraf lagi dengan tag <p>.

Sekian dulu pengenalan tentang HTML. Artikel ini adalah langkah awal yang penting sebelum kamu lanjut ke tutorial berikutnya di www.code80vity.com. Jangan lupa coba praktiknya, ya! ?

Tutorial Terkait Lainnya

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

Hai lagi! Kali ini kita akan belajar bagaimana cara menambahkan gambar ke halaman web kamu. Gambar b...

Baca Tutorial
Belajar HTML #2: Struktur dasar dan Tag HTML
Belajar HTML #2: Struktur dasar dan Tag HTML

Hai! Semoga semangat belajarnya tetap tinggi. ? Kali ini kita akan membahas struktur dasar HTML lebi...

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!
Next
Tutorial Terkait
Belajar HTML #4: Cara Menambahkan Gambar dan Tautan di HTML
Belajar HTML #6: Membuat Formulir di HTML
Belajar HTML #3: Cara Menambahkan Gambar dan Tautan di HTML
Belajar HTML #5: Cara Menambahkan Gambar dan Tautan di 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