3 Dec 2023

Elemen HTML

Pada bagian sebelumnya, kita membahas struktur dasar dari dokumen HTML. Sekarang, saya akan membahas tentang elemen HTML, komponen dasar yang membentuk halaman web.

Memahami Elemen HTML

Elemen HTML adalah blok bangunan dari sebuah halaman web. Mereka terdiri dari tag, konten, dan atribut.

Pada tahap ini saya memfokuskan kamu untuk mencoba semua tag yang saya berikan. Aplikasikan contoh-contoh tersebut di dalam tag body.

Contoh seperti ini:

index.html

<!doctype html>
<html>
  <head>
    <title>blog.adydetra.my.id</title>
  </head>
  <body>
    taruh semua contoh yang saya berikan disini
  </body>
</html>

Oke sudah paham? Mari eksplorasi 🔎 beberapa elemen HTML umum.

Elemen Heading

HTML menyediakan enam tingkatan heading, mulai dari <h1> (terbesar) hingga <h6> (terkecil).

<h1>Ini adalah Heading 1</h1>
<h2>Ini adalah Heading 2</h2>
<h3>Ini adalah Heading 3</h3>
<h4>Ini adalah Heading 4</h4>
<h5>Ini adalah Heading 5</h5>
<h6>Ini adalah Heading 6</h6>

Elemen Paragraf

Elemen <p> digunakan untuk mendefinisikan paragraf.

<p>
  Ini adalah paragraf. Ini bisa berisi teks, gambar, tautan, dan elemen lainnya.
</p>

Elemen Anchor (Tautan)

Elemen <a> digunakan untuk membuat tautan.

<a href="https://www.adydetra.my.id">Kunjungi adydetra.my.id</a>

Elemen Gambar

Elemen <img> digunakan untuk menyematkan gambar dalam halaman web.

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

Atau bisa juga mengambil gambar dari URL

<img src="https://gambar.com/gambar.jpg" alt="Deskripsi gambar" />

Elemen Div dan Span

Elemen <div> dan <span> digunakan untuk mengelompokkan dan menerapkan gaya.

<div>Ini adalah elemen div atau kontainer.</div>

<span>Ini adalah elemen inline tanpa kontainer.</span>

Elemen Input

Elemen <input> digunakan untuk berbagai kontrol formulir.

<input type="text" placeholder="Masukkan nama Anda" />

Daftar: Berurutan dan Tidak Berurutan

HTML mendukung daftar berurutan dan tidak berurutan menggunakan <ol> dan <ul>.

Daftar Berurutan:

<ol>
  <li>Indomie Goreng</li>
  <li>Indomie Rendang</li>
  <li>Indomie Ayam Geprek</li>
</ol>

Daftar Tidak Berurutan:

<ul>
  <li>Indomie Goreng</li>
  <li>Indomie Rendang</li>
  <li>Indomie Ayam Geprek</li>
</ul>

Komentar

Anda dapat menambahkan komentar di HTML menggunakan sintaks .

<!-- Ini adalah komentar. Komentar tidak ditampilkan di peramban. -->

Ini hanya beberapa contoh dari elemen-elemen HTML. Seiring Anda terus belajar HTML, Anda akan menemui banyak elemen lain yang memiliki tujuan berbeda.

Memahami dan menguasai elemen-elemen ini akan memberdayakan Anda untuk membuat halaman web yang kaya dan interaktif.