Belajar HTML dari Nol Hingga Mahir: Pengenalan HTML untuk Pemula

2 min read

HTML, atau HyperText Markup Language, merupakan dasar dari hampir semua halaman web di internet. Bagi pemula yang ingin memahami bagaimana web bekerja dan bagaimana membuat halaman web sendiri, belajar HTML adalah langkah pertama yang penting. Artikel ini akan membimbing Anda melalui pengenalan HTML untuk pemula, memberikan dasar yang kokoh untuk memulai perjalanan Anda dalam pengembangan web.

Apa Itu HTML?

HTML adalah bahasa markup yang digunakan untuk membuat struktur dasar suatu halaman web. Singkatnya, HTML memberi tahu browser bagaimana menyusun dan menampilkan konten pada halaman web. Setiap elemen dalam HTML didefinisikan menggunakan tag, yang mengandung instruksi-instruksi tertentu.

Struktur Dasar Dokumen HTML

Sebelum kita mulai, mari lihat struktur dasar dari setiap dokumen HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halaman Anda</title>
</head>
<body>

    <!-- Konten halaman web Anda akan diatur di sini -->

</body>
</html>
  • <!DOCTYPE html>: Menandakan versi HTML yang digunakan (HTML5 dalam contoh ini).
  • <html lang="en">: Memulai elemen HTML, dengan atribut lang yang menunjukkan bahasa halaman.
  • <head>: Bagian ini berisi informasi-informasi terkait halaman web, seperti judul dan metadata.
  • <meta charset="UTF-8">: Menentukan pengaturan karakter dokumen (UTF-8 adalah standar umum).
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Mengoptimalkan tampilan pada perangkat berbagai ukuran.
  • <title>Judul Halaman Anda</title>: Judul halaman yang akan ditampilkan di tab browser.
  • <body>: Bagian utama yang berisi konten dari halaman web Anda.

Tag dan Elemen HTML Dasar

Mari kita kenali beberapa tag dasar HTML yang akan membantu Anda membuat halaman sederhana:

  1. <h1><h6>: Untuk judul dengan tingkat kepentingan yang berbeda.
   <h1>Judul Utama</h1>
  1. <p>: Untuk menuliskan paragraf teks.
   <p>Ini adalah paragraf teks.</p>
  1. <a>: Untuk membuat tautan (link) ke halaman lain.
   <a href="https://www.contohlink.com">Tautan Contoh</a>
  1. <img>: Untuk menampilkan gambar.
   <img src="gambar-contoh.jpg" alt="Deskripsi Gambar">
  1. <ul> dan <li>: Untuk membuat daftar tak terurut.
   <ul>
       <li>Item 1</li>
       <li>Item 2</li>
   </ul>
  1. <ol> dan <li>: Untuk membuat daftar terurut.
   <ol>
       <li>Item 1</li>
       <li>Item 2</li>
   </ol>

Praktik: Membuat Halaman Sederhana

Mari praktikkan pengetahuan ini dengan membuat halaman sederhana. Gantilah konten dalam tag <body> dengan elemen-elemen HTML yang telah dipelajari.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Sederhana</title>
</head>
<body>

    <h1>Selamat Datang di Halaman Sederhana!</h1>

    <p>Ini adalah halaman web pertama Anda menggunakan HTML.</p>

    <ul>
        <li>Tambahkan elemen baru ke halaman.</li>
        <li>Modifikasi teks dan tag yang telah dipelajari.</li>
        <li>Terus berlatih untuk memahami HTML dengan lebih baik.</li>
    </ul>

    <p>Jangan lupa <a href="https://www.contohlink.com">kunjungi link ini</a> untuk informasi lebih lanjut.</p>

</body>
</html>

Selamat! Anda telah membuat halaman web sederhana menggunakan HTML. Dengan memahami dasar-dasar ini, Anda telah melangkah ke arah yang benar untuk menjadi mahir dalam pengembangan web. Teruslah berlatih dan eksplorasi lebih lanjut tentang tag dan elemen HTML untuk memperluas pengetahuan Anda.

Belajar HTML dari Nol Hingga Mahir: Sejarah HTML Hingga…

HTML (HyperText Markup Language) merupakan bahasa markup yang menjadi pondasi dari hampir seluruh konten web yang kita akses hari ini. Untuk memahami sepenuhnya bagaimana...
Ahmad Syarifuddin Latif
1 min read

Leave a Reply

Your email address will not be published. Required fields are marked *