Pengenalan HTML

Hai sana, calon pengembang web! Saya sangat gembira menjadi panduanmu dalam perjalanan menarik ke dunia HTML. Sebagai seseorang yang telah mengajar ilmu komputer lebih dari satu dekade, saya bisa katakan bahwa HTML adalah dasar dari web, dan belajar itu adalah seperti membuka kekuatan super. Jadi, mari kita masuk!

HTML - Introduction

Apa Itu HTML?

HTML singkatan dari HyperText Markup Language. Saya tahu itu terdengar menakutkan, tapi pikirkan itu sebagai kerangka dari halaman web. Seperti tulang-tulang kita memberikan struktur ke tubuh kita, HTML memberikan struktur ke halaman web.

mari kita pecahnya:

HyperText: Ini merujuk kepada teks yang mengandung tautan ke teks lain.
Markup: Ini berarti kita menambahkan "tag" khusus ke teks biasa untuk memberikan makna dan struktur.
Language: Itu adalah cara untuk berkomunikasi dengan komputer, memberitahu mereka bagaimana menampilkan konten kita.

Ini adalah contoh sederhana dari HTML:

<h1>Selamat Datang di Halaman Web Pertamaku!</h1>
<p>Ini adalah paragraf teks.</p>

Dalam contoh ini, <h1> dan <p> adalah tag HTML yang memberitahu browser bagaimana menampilkan teks.

Mengapa Menggunakan HTML?

Mungkin Anda berpikir, "Mengapa harus belajar HTML?" Mari saya ceritakan sedikit cerita. Pada saat saya mulai, saya pikir bisa saja menggunakan pembuat website yang kaya untuk segala sesuatu. Tetapi kemudian saya mendapat klien yang menginginkan sesuatu yang spesifik yang tools tersebut tidak bisa lakukan. Itu saat saya menyadari kekuatan HTML.

Berikut adalah beberapa alasan mengapa HTML penting:

Itu adalah bahasa universal web: Setiap website yang Anda kunjungi pernah menggunakan HTML.
Memberikan kontrol kepada Anda: Anda bisa membuat persis apa yang Anda inginkan, bukan apa yang tools itu izinkan.
Itu adalah dasar pengembangan web yang lebih maju: Jika Anda ingin belajar CSS dan JavaScript kemudian, Anda perlu HTML terlebih dahulu.
Relatif mudah untuk belajar: Percayalah, jika saya bisa belajar itu, Anda pasti bisa!

Versi HTML

HTML telah berkembang sepanjang tahun, seperti anggur yang semakin baik dengan usia. Berikut adalah gambaran singkat dari versi utama:

Versi	Tahun	Fitur Utama
HTML 1.0	1991	Sederhana, hanya 18 elemen
HTML 2.0	1995	Formulir dan tabel diperkenalkan
HTML 3.2	1997	Dukungan untuk tag dan atribut lebih banyak
HTML 4.01	1999	Perbaikan dukungan untuk CSS dan skrip
XHTML	2000	Versi HTML yang ketat, berdasarkan XML
HTML5	2014	Standar saat ini, dengan elemen semantik dan API baru

Sekarang, kita umumnya menggunakan HTML5, yang sangat kuat dan fleksibel.

Struktur Dokumen HTML

Setiap dokumen HTML mengikuti struktur tertentu. Picturing itu sebagai blueprint untuk halaman web Anda. Berikut adalah penampilannya:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Web Pertamaku</title>
</head>
<body>
<h1>Selamat Datang di Halaman Web Saya!</h1>
<p>Ini adalah tempat semua konten yang terlihat berada.</p>
</body>
</html>

mari kita pecahnya:

<!DOCTYPE html>: Ini memberitahu browser bahwa kita menggunakan HTML5.
<html>: Elemen akar dari halaman HTML.
<head>: Mengandung informasi meta tentang dokumen.
<body>: Mengandung konten halaman yang terlihat.

Peran Browser Web dalam HTML

Browser web seperti penerjemah untuk HTML. Mereka membaca kode HTML dan merender itu menjadi halaman web visual yang kita lihat. Browser yang berbeda mungkin merender HTML sama sedikitnya berbeda, itu adalah sebabnya penting untuk menguji website Anda di beberapa browser.

Ini adalah fakta menarik: browser pertama disebut WorldWideWeb (kemudian dinamai Nexus) dan diciptakan oleh Tim Berners-Lee, penemu World Wide Web!

Tag, Atribut, dan Elemen HTML

HTML terdiri dari tiga komponen utama:

Tag: Ini adalah blok pembangun HTML. Mereka selalu ditutup dalam kurung sudut, seperti <p> untuk paragraf.
Atribut: Ini memberikan informasi tambahan tentang elemen. Mereka selalu ditentukan dalam tag awal.
Elemen: Elemen adalah semua dari tag awal ke tag akhir.

mari kita lihat contoh:

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

Dalam contoh ini:

<a> adalah tag (untuk hyperlink)
href dan title adalah atribut
Seluruh baris adalah elemen

Berikut adalah tabel dari beberapa tag HTML umum:

Tag	Deskripsi
`<h1>` hingga `<h6>`	Judul
`<p>`	Paragraf
`<a>`	Hyperlink
`<img>`	Gambar
`<ul>` dan `<ol>`	Daftar Tak Terurut dan Terurut
`<table>`	Tabel
`<div>`	Divisi atau seksi

Pentingnya Belajar HTML

Belajar HTML adalah seperti belajar membaca dan menulis dalam zaman digital. Itu adalah langkah pertama untuk memahami bagaimana web bekerja dan bagaimana membuatnya. Dengan HTML, Anda bisa:

Buat website Anda sendiri dari awal
Memahami dan memodifikasi website yang sudah ada
Komunikasikan lebih efektif dengan desainer dan pengembang
Membuka kesempatan karier dalam pengembangan web

Saya ingat mengajarkan seorang murid yang berpikir dia tidak "teknis" cukup untuk belajar coding. Dia mulai dengan HTML, dan dalam beberapa minggu, dia telah membuat website pertamanya. Ekspresi kebanggaan dan kepuasan di wajahnya adalah tak ternilai. Itu kekuatan HTML - itu mudah diakses, tapi kuat.

Dalam kesimpulan, HTML adalah tulang punggung web, dan belajar itu adalah langkah menarik pertama ke dunia pengembangan web. Mungkin itu terlihat menakutkan pada awalnya, tapi percayalah, dengan latihan dan kesabaran, Anda akan membuat halaman web yang menakjubkan dalam waktu singkat. Ingat, setiap ahli pernah menjadi pemula. Jadi, Anda siap untuk memulai perjalanan HTML Anda? mari kita kode!

Credits: Image by storyset