HTML

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur halaman web. Dengan HTML, kita dapat menentukan elemen-elemen seperti teks, gambar, tautan, tabel, hingga form pada sebuah halaman. Artikel ini akan membahas dasar-dasar HTML, elemen penting, dan contoh penerapannya.


Apa itu HTML?

HTML adalah bahasa yang digunakan untuk:

1. Membuat kerangka dasar halaman web.

2. Menentukan struktur dan konten pada web.

3. Berinteraksi dengan teknologi pendukung seperti CSS (untuk desain) dan JavaScript (untuk fungsionalitas).


HTML terdiri dari tag yang ditulis di dalam tanda kurung sudut (<>). Setiap elemen HTML memiliki pasangan tag pembuka dan penutup, misalnya:

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


Struktur Dasar Dokumen HTML

Sebuah dokumen HTML dimulai dengan elemen-elemen berikut:

<!DOCTYPE html>

<html>

  <head>

    <title>Judul Halaman</title>

  </head>

  <body>

    <h1>Selamat Datang di Website Saya</h1>

    <p>Ini adalah konten pertama saya menggunakan HTML.</p>

  </body>

</html>

Penjelasan:

1. <!DOCTYPE html>: Menentukan tipe dokumen (HTML5).

2. <html>: Elemen utama yang mencakup seluruh konten halaman.

3. <head>: Bagian yang berisi informasi meta, judul, dan link ke file lain (seperti CSS).

4. <title>: Menentukan judul halaman yang ditampilkan di tab browser.

5. <body>: Bagian utama yang berisi konten yang terlihat di halaman web.


Tag Penting dalam HTML

1. Heading (Judul)

Heading digunakan untuk membuat judul dengan berbagai ukuran, dari yang terbesar (<h1>) hingga terkecil (<h6>).

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>


2. Paragraf dan Teks

Untuk menulis teks atau paragraf, gunakan <p>.

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

Untuk teks tebal atau miring, gunakan:

<b>Teks tebal</b>

<i>Teks miring</i>


3. Tautan (Link)

Untuk membuat tautan, gunakan tag <a> dengan atribut href.

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


4. Gambar

Untuk menampilkan gambar, gunakan tag <img> dengan atribut src dan alt.

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


5. Daftar

Daftar berurutan (ordered list):

<ol>

  <li>Item 1</li>

  <li>Item 2</li>

</ol>


Daftar tidak berurutan (unordered list):

<ul>

  <li>Item A</li>

  <li>Item B</li>

</ul>


6. Tabel

Untuk membuat tabel, gunakan tag <table>.

<table border="1">

  <tr>

    <th>Nama</th>

    <th>Usia</th>

  </tr>

  <tr>

    <td>Ani</td>

    <td>20</td>

  </tr>

  <tr>

    <td>Budi</td>

    <td>22</td>

  </tr>

</table>


HTML + CSS: Membuat Website Menarik

HTML dapat digabungkan dengan CSS untuk membuat desain lebih menarik. Contoh:

<!DOCTYPE html>

<html>

  <head>

    <style>

      body {

        font-family: Arial, sans-serif;

        background-color: #f4f4f4;

      }

      h1 {

        color: #333;

      }

      p {

        color: #666;

      }

    </style>

  </head>

  <body>

    <h1>Website Pertamaku</h1>

    <p>Ini adalah halaman yang dirancang dengan HTML dan CSS.</p>

  </body>

</html>


Kesimpulan

HTML adalah fondasi pembuatan halaman web. Dengan memahami elemen-elemen dasar seperti heading, paragraf, tautan, dan tabel, Anda sudah dapat membuat kerangka halaman yang sederhana.

Untuk membuat website lebih interaktif dan menarik, Anda dapat mempelajari CSS dan JavaScript sebagai pendukung HTML.

“Mulailah coding hari ini, dan buat website impianmu!”

Posting Komentar

0 Komentar