Web Development Tutorials Tips & Tricks

Konsep Dasar Pemrograman – HTML (Hypertext Markup Language)

RyukensDev

Admin

posted on 2 months ago — updated on 1 second ago

58
views

HTML (Hypertext Markup Language) adalah bahasa standar yang digunakan untuk membuat dan menyusun konten di halaman web.

Apa itu HTML?

HTML (Hypertext Markup Language) adalah bahasa standar yang digunakan untuk membuat dan menyusun konten di halaman web. HTML digunakan untuk mendefinisikan struktur dasar dari sebuah halaman web dengan menggunakan elemen-elemen atau tag HTML. Dengan HTML, kita bisa menentukan teks, gambar, tautan, tabel, dan berbagai elemen lain yang membentuk sebuah halaman web.

Struktur Dasar HTML

HTML memiliki struktur yang sangat sederhana, terdiri dari tag pembuka dan penutup. Berikut adalah struktur dasar dari sebuah 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</title>

</head>

<body>

<h1>Selamat datang di Halaman Web Saya!</h1>

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

</body>

</html>

<!DOCTYPE html>: Mendeklarasikan tipe dokumen HTML.
<html>: Tag pembungkus seluruh konten HTML.
<head>: Berisi metadata halaman web, seperti charset, viewport, dan judul halaman.
<body>: Berisi konten halaman yang akan ditampilkan kepada pengguna.

Elemen HTML yang Paling Sering Digunakan

<h1> - <h6>: Tag heading untuk judul, dengan <h1> sebagai judul utama dan <h6> sebagai judul terkecil.

Contoh: <h1>Judul Halaman</h1>

<p>: Tag untuk paragraf teks.

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

<a>: Tag untuk membuat tautan (link) ke halaman lain atau sumber daya lain.

Contoh: <a href="https://www.example.com">Kunjungi Example</a>

<img>: Tag untuk menampilkan gambar.

Contoh: <img src="gambar.jpg" alt="Deskripsi Gambar">

<ul> dan <ol>: Tag untuk membuat daftar tidak terurut (unordered list) dan daftar terurut (ordered list).

Contoh (daftar tidak terurut):

<ul>

<li>Item 1</li>

<li>Item 2</li>

</ul>

<table>: Tag untuk membuat tabel.

Contoh:

<table>

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>Data 1</td>

<td>Data 2</td>

</tr>

</table>

Atribut dalam HTML

Atribut adalah informasi tambahan yang dapat dimasukkan ke dalam tag HTML untuk memberikan pengaturan atau konfigurasi tambahan. Beberapa atribut yang sering digunakan:

href: Atribut pada tag <a> untuk menentukan alamat tautan.

Contoh: <a href="https://www.example.com">Klik di sini</a>

src: Atribut pada tag <img> untuk menentukan sumber gambar.

Contoh: <img src="gambar.jpg" alt="Deskripsi Gambar">

alt: Atribut pada tag <img> untuk memberikan deskripsi gambar jika gambar tidak dapat ditampilkan.

Contoh: <img src="gambar.jpg" alt="Gambar Pemandangan">

class: Atribut yang digunakan untuk memberikan kelas pada elemen, sering digunakan dengan CSS untuk styling.

Contoh: <p class="highlight">Paragraf ini disorot.</p>

id: Atribut untuk memberikan identitas unik pada elemen, berguna untuk JavaScript dan styling.

Contoh: <div id="container">Konten di sini</div>

Formulir (Form) di HTML

HTML memungkinkan kita untuk membuat formulir untuk mengambil input dari pengguna menggunakan tag <form>. Sebagai contoh:

<form action="/submit" method="POST">

<label for="nama">Nama:</label>

<input type="text" id="nama" name="nama">

<input type="submit" value="Kirim">

</form>

action: Menentukan URL tempat data formulir akan dikirim.
method: Menentukan metode pengiriman data (misalnya, POST atau GET).

HTML Semantik

HTML semantik adalah praktik penggunaan elemen HTML yang memiliki makna khusus untuk struktur halaman. Beberapa elemen semantik yang umum digunakan antara lain:

<header>: Digunakan untuk elemen header dari sebuah halaman atau bagian.
<footer>: Digunakan untuk elemen footer.
<article>: Menandai artikel atau konten utama dalam halaman.
<section>: Membagi halaman menjadi bagian-bagian terpisah.
<nav>: Digunakan untuk menandai navigasi halaman.

Kesimpulan

HTML adalah dasar dari semua halaman web. Dengan HTML, kita dapat menentukan struktur dan konten dari sebuah halaman web menggunakan berbagai elemen seperti heading, paragraf, tautan, gambar, dan tabel. HTML juga memungkinkan kita untuk menambahkan atribut untuk menyesuaikan elemen-elemen tersebut. Selain itu, penggunaan elemen semantik dalam HTML membantu dalam pengembangan web yang lebih terstruktur dan mudah dipahami oleh mesin pencari, serta memudahkan aksesibilitas bagi pengguna.

Dengan memahami HTML, kita bisa mulai membuat halaman web statis dan kemudian melanjutkan untuk belajar teknologi lain seperti CSS untuk styling dan JavaScript untuk interaktivitas.