Belajar coding HTML mungkin tampak menakutkan pada awalnya, tetapi dengan pendekatan yang sistematis dan sumber daya yang tepat, Anda dapat menguasainya dengan cepat. HTML, singkatan dari HyperText Markup Language, merupakan tulang punggung dari setiap website. Memahami HTML adalah langkah pertama yang penting untuk membangun karir di bidang web development atau sekadar membuat website pribadi Anda sendiri. Panduan ini akan membawa Anda melalui perjalanan belajar HTML dari dasar hingga mampu membuat halaman web sederhana.
1. Mengenal HTML dan Konsep Dasar
HTML bukanlah bahasa pemrograman dalam arti sebenarnya, melainkan bahasa markup. Ini berarti HTML menggunakan tag untuk menandai elemen-elemen dalam sebuah dokumen, yang kemudian akan diinterpretasi oleh browser web untuk ditampilkan sebagai halaman web. Setiap tag diapit oleh kurung siku < dan >. Tag biasanya hadir berpasangan, tag pembuka <tag> dan tag penutup </tag>. Contohnya, tag <p> digunakan untuk membuat paragraf, dan </p> menutup paragraf tersebut.
Beberapa konsep dasar HTML yang perlu dipahami meliputi:
-
Elemen: Elemen adalah bagian fundamental dari sebuah halaman HTML. Setiap elemen terdiri dari tag pembuka, konten, dan tag penutup. Contohnya,
<p>Ini adalah sebuah paragraf.</p>merupakan sebuah elemen paragraf. -
Atribut: Atribut memberikan informasi tambahan tentang elemen. Atribut ditulis di dalam tag pembuka, dan terdiri dari nama atribut dan nilainya yang diapit tanda kutip. Contohnya,
<img src="gambar.jpg" alt="Gambar saya">dimanasrcdanaltadalah atribut. -
Tag: Seperti yang telah dijelaskan, tag adalah penanda yang digunakan untuk mendefinisikan elemen-elemen HTML. Ada tag yang berpasangan (misalnya
<p>…</p>,<h1>…</h1>) dan ada juga yang tunggal (misalnya<br>,<img>). -
DOCTYPE: Deklarasi
DOCTYPEberada di awal dokumen HTML dan memberi tahu browser tentang versi HTML yang digunakan. Contohnya:<!DOCTYPE html>. Ini penting untuk memastikan browser merender halaman web dengan benar. -
Head dan Body: Struktur dasar halaman HTML terdiri dari dua bagian utama:
<head>dan<body>.<head>berisi metadata seperti judul halaman, karakter set, dan link ke stylesheet eksternal.<body>berisi konten yang akan ditampilkan di halaman web, seperti teks, gambar, dan video.
2. Setup Lingkungan Kerja: Editor Kode dan Browser
Sebelum memulai, Anda perlu menyiapkan lingkungan kerja yang nyaman. Anda akan membutuhkan:
-
Text Editor/IDE: Anda dapat menggunakan text editor sederhana seperti Notepad++ (Windows), Sublime Text (Windows, macOS, Linux), Atom (Windows, macOS, Linux), atau Visual Studio Code (Windows, macOS, Linux). Visual Studio Code direkomendasikan karena fitur-fiturnya yang lengkap dan ekstensi yang banyak tersedia. IDE (Integrated Development Environment) seperti VS Code menyediakan fitur-fitur tambahan seperti auto-complete, debugging, dan Git integration yang sangat membantu dalam proses pengembangan.
-
Web Browser: Anda memerlukan web browser untuk melihat hasil kode HTML Anda. Chrome, Firefox, Safari, dan Edge adalah pilihan yang populer. Setiap browser memiliki tools developer yang membantu Anda memeriksa kode HTML dan CSS halaman web.
3. Struktur Dasar Halaman HTML
Setiap halaman HTML memiliki struktur dasar yang sama. Berikut contohnya:
html
<!DOCTYPE html>
