23 Juni 2026

Mengenal HTML

 


Struktur Dokumen HTML

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman website.

Struktur Dasar HTML

<!DOCTYPE html>

<html>

<head>

    <title>Judul Halaman</title>

</head>

<body>

    <h1>Halo Dunia</h1>

    <p>Ini adalah halaman web pertama saya.</p>

</body>

</html>

Penjelasan

  • <!DOCTYPE html> → Menentukan bahwa dokumen menggunakan HTML5.
  • <html> → Elemen utama yang membungkus seluruh halaman.
  • <head> → Berisi informasi halaman seperti judul, stylesheet, dan metadata.
  • <title> → Judul halaman yang muncul pada tab browser.
  • <body> → Berisi seluruh konten yang ditampilkan kepada pengguna.

Perkenalan

HTML terdiri dari Tag, Element, Attribute, dan Comment.

HTML Tag, Element, Attribute & Comment

1. HTML Tag

Tag adalah penanda yang digunakan untuk membuat elemen HTML.

Contoh:

<h1>Judul</h1>

<p>Paragraf</p>

Tag pembuka:

<h1>

Tag penutup:

</h1>

2. HTML Element

Element adalah keseluruhan bagian HTML yang terdiri dari tag pembuka, isi, dan tag penutup.

Contoh:

<p>Belajar HTML</p>

Element di atas terdiri dari:

  • Tag pembuka <p>
  • Isi "Belajar HTML"
  • Tag penutup </p>

3. HTML Attribute

Attribute digunakan untuk memberikan informasi tambahan pada tag HTML.

Contoh:

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

Keterangan:

  • href adalah attribute
  • Nilainya adalah https://google.com

Contoh lain:

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

4. HTML Comment

Comment digunakan untuk memberikan catatan pada kode dan tidak akan ditampilkan di browser.

Contoh:

<!-- Ini adalah komentar -->

HTML Tag Untuk Menampilkan Teks

1. Heading

Heading digunakan untuk membuat judul.

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

h1 adalah ukuran terbesar dan h6 adalah ukuran terkecil.

2. Paragraf

Digunakan untuk membuat paragraf.

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

3. Link / Anchor

Digunakan untuk membuat tautan.

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

    Kunjungi Google

</a>

Membuka halaman baru:

<a href="https://www.google.com" target="_blank">

    Google

</a>

4. Span

Digunakan untuk memberi gaya pada sebagian teks.

<p>

    Saya belajar <span style="color:red;">HTML</span>

</p>

5. Huruf Tebal

<b>Teks Tebal</b>

atau

<strong>Teks Penting</strong>

6. Huruf Miring

<i>Teks Miring</i>

atau

<em>Teks Ditekankan</em>

7. List

Ordered List (Nomor)

<ol>

    <li>HTML</li>

    <li>CSS</li>

    <li>JavaScript</li>

</ol>

Hasil:

  1. HTML
  2. CSS
  3. JavaScript

Unordered List (Bullet)

<ul>

    <li>HTML</li>

    <li>CSS</li>

    <li>JavaScript</li>

</ul>

HTML Tag Untuk Multimedia

1. Gambar

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

Mengatur ukuran:

<img src="gambar.jpg"

     width="300"

     height="200">

2. Video

<video controls width="400">

    <source src="video.mp4" type="video/mp4">

</video>

Attribute:

  • controls → menampilkan tombol play, pause, volume.

3. Suara (Audio)

<audio controls>

    <source src="musik.mp3" type="audio/mpeg">

</audio>

4. Halaman Website Lainnya (Iframe)

Menampilkan halaman website lain di dalam halaman web.

<iframe

    src="https://www.wikipedia.org"

    width="600"

    height="400">

</iframe>

HTML Tag Untuk Tabel

1. Tabel

Contoh tabel sederhana:

<table border="1">

    <tr>

        <th>Nama</th>

        <th>Umur</th>

    </tr>

 

    <tr>

        <td>Andi</td>

        <td>20</td>

    </tr>

 

    <tr>

        <td>Budi</td>

        <td>22</td>

    </tr>

</table>

Tag Tabel

Tag

Fungsi

table

Membuat tabel

tr

Membuat baris

th

Judul kolom

td

Isi data

HTML Tag Untuk Formulir

1. Formulir

Digunakan untuk menerima input dari pengguna.

Contoh:

<form>

 

    Nama:

    <input type="text">

 

    <br><br>

 

    Email:

    <input type="email">

 

    <br><br>

 

    Password:

    <input type="password">

 

    <br><br>

 

    Jenis Kelamin:

    <input type="radio" name="jk"> Laki-laki

    <input type="radio" name="jk"> Perempuan

 

    <br><br>

 

    Hobi:

    <input type="checkbox"> Membaca

    <input type="checkbox"> Olahraga

 

    <br><br>

 

    <button type="submit">

        Kirim

    </button>

 

</form>

Jenis Input Populer

Type

Fungsi

text

Input teks

password

Password

email

Email

number

Angka

date

Tanggal

radio

Pilihan tunggal

checkbox

Pilihan ganda

file

Upload file

submit

Tombol kirim

HTML Tag Untuk Membagi Layout Website

1. Layout Website

HTML5 menyediakan tag khusus untuk membagi struktur website.

Contoh:

<body>

 

    <header>

        Header Website

    </header>

 

    <nav>

        Menu Navigasi

    </nav>

 

    <main>

 

        <section>

            Konten Utama

        </section>

 

        <aside>

            Sidebar

        </aside>

 

    </main>

 

    <footer>

        Footer Website

    </footer>

 

</body>

Fungsi Tag Layout

Tag

Fungsi

header

Bagian kepala website

nav

Menu navigasi

main

Konten utama

section

Bagian konten

article

Artikel mandiri

aside

Sidebar

footer

Bagian bawah website

Kesimpulan

HTML digunakan untuk membangun struktur halaman web. Elemen penting yang harus dipahami adalah:

  1. Struktur dokumen HTML
  2. Tag, Element, Attribute, dan Comment
  3. Tag teks (Heading, Paragraf, Link, Span, Format Teks, List)
  4. Multimedia (Gambar, Video, Audio, Iframe)
  5. Tabel
  6. Formulir
  7. Layout Website

Dengan menguasai HTML dasar, Anda dapat melanjutkan ke CSS untuk mempercantik tampilan dan JavaScript untuk membuat website lebih interaktif.

 


at

Tidak ada komentar:

Posting Komentar