Days
Hours
Minutes
Seconds
Selamat datang di dunia web development! Langkah pertama Anda untuk menjadi seorang pengembang web adalah dengan mempelajari HTML. Jangan khawatir, HTML itu mudah dan menyenangkan untuk dipelajari. Artikel ini akan memandu Anda memahami dasar-dasar HTML dari nol.
HTML adalah singkatan dari HyperText Markup Language. Singkatnya, HTML bukanlah bahasa pemrograman, melainkan bahasa markah (markup language) yang berfungsi untuk membangun struktur dan konten dari sebuah halaman web.
Bayangkan HTML seperti kerangka sebuah rumah. Ia menentukan di mana letak pintu, jendela, dinding, dan atap. Begitu pula dengan halaman web, HTML menentukan di mana letak judul, paragraf, gambar, dan tautan (link).
HTML terdiri dari serangkaian elemen, yang Anda definisikan menggunakan tag. Tag ini memberitahu browser bagaimana cara menampilkan konten. Sebagian besar tag memiliki tag pembuka dan tag penutup.
<p>): Ini menandai awal dari sebuah elemen.Ini adalah paragraf.): Ini adalah isi dari elemen tersebut.</p>): Ini menandai akhir dari sebuah elemen. Perhatikan adanya garis miring (/).Ada juga elemen yang tidak memerlukan tag penutup, seperti <img> untuk gambar atau <br> untuk baris baru. Ini disebut empty tags atau self-closing tags.
Setiap file HTML memiliki struktur dasar yang wajib ada. Struktur ini memberitahu browser bahwa ini adalah dokumen HTML dan berisi informasi dasar tentang halaman tersebut.
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman Saya</title>
</head>
<body>
<h1>Judul Utama Artikel</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>
Mari kita bedah setiap bagiannya:
<!DOCTYPE html>: Deklarasi ini mendefinisikan bahwa dokumen ini adalah dokumen HTML5. Ini wajib ada di baris paling atas.<html>: Ini adalah elemen akar (root) dari sebuah halaman HTML. Semua elemen lain harus berada di dalam tag ini.<head>: Elemen ini berisi informasi meta tentang halaman web, seperti judul halaman, set karakter, dan tautan ke file CSS. Konten di dalam <head> tidak akan ditampilkan di halaman utama browser.<title>: Menentukan judul halaman yang akan muncul di tab browser.<body>: Elemen ini berisi semua konten yang akan ditampilkan kepada pengguna, seperti teks, gambar, video, dan tautan.
Berikut adalah beberapa elemen (tag) HTML yang paling sering digunakan dan wajib Anda ketahui sebagai pemula.
Judul digunakan untuk menandai bagian-bagian penting dari konten Anda. HTML menyediakan enam level judul, dari <h1> hingga <h6>. <h1> adalah level tertinggi (paling penting) dan <h6> adalah yang terendah.
Contoh Kode:
<h1>Ini Judul Level 1</h1>
<h2>Ini Judul Level 2</h2>
<h3>Ini Judul Level 3</h3>
Untuk membuat teks dalam bentuk paragraf, Anda menggunakan tag <p>.
Contoh Kode:
<p>Ini adalah sebuah paragraf. Browser akan secara otomatis memberikan sedikit spasi sebelum dan sesudah paragraf.</p>
<p>Ini adalah paragraf lainnya.</p>
Tautan atau hyperlink sangat penting di web. Untuk membuatnya, gunakan tag <a> (anchor) dengan atribut href (hypertext reference) yang berisi alamat URL tujuan.
Contoh Kode:
<a href="https://www.google.com">Klik di sini untuk pergi ke Google</a>
Untuk menampilkan gambar, gunakan tag <img>. Tag ini bersifat self-closing dan memerlukan setidaknya dua atribut:
src (source): Alamat (URL) dari file gambar.alt (alternative text): Teks alternatif yang akan muncul jika gambar gagal dimuat. Ini juga penting untuk aksesibilitas (pembaca layar).Contoh Kode:
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Rumah Trulli di Italia" width="500">
Ada dua jenis daftar yang umum digunakan:
<ul>): Daftar yang itemnya ditandai dengan bulatan atau simbol lain. Setiap item daftar menggunakan tag <li> (list item).<ol>): Daftar yang itemnya ditandai dengan angka atau huruf. Setiap item juga menggunakan tag <li>.Contoh Kode:
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
<ol>
<li>Bangun tidur</li>
<li>Mandi</li>
<li>Sarapan</li>
</ol>
Selamat! Anda sekarang sudah memahami konsep paling dasar dari HTML. Langkah selanjutnya adalah:
.html (misalnya, latihan1.html).Teruslah berlatih, karena kunci untuk menguasai HTML adalah dengan terus mencoba dan membangun sesuatu. Selamat belajar!
Dipercaya oleh lebih dari 200++ client untuk menyelesaikan proyeknya dengan total 250++ proyek dari berbagai jenis proyek
