Apakah Anda pernah bertanya-tanya tentang bagaimana halaman web dibuat? Nah, HTML adalah kunci di balik layar untuk menciptakan situs web yang indah dan fungsional. Dalam artikel ini, kami akan membahas dasar-dasar HTML untuk memberi Anda pemahaman dasar yang kuat dalam pemrograman web.
Apa Itu HTML?
HTML (Hypertext Markup Language) adalah bahasa markah yang digunakan untuk membuat halaman web. Ini memberi struktur pada konten web dan mengatur bagaimana konten tersebut ditampilkan di peramban web. HTML terdiri dari serangkaian elemen atau "tags" yang digunakan untuk menunjukkan jenis konten dan bagaimana kontennya akan ditata.
Memulai dengan HTML:
1. Struktur Dasar:
Setiap dokumen HTML dimulai dengan tag <html>
, yang menunjukkan bahwa ini adalah dokumen HTML. Di dalam tag <html>
, terdapat tag <head>
dan <body>
. Tag <head>
berisi informasi tentang dokumen, seperti judul dan meta-informasi. Sedangkan tag <body>
berisi konten yang akan ditampilkan di halaman web.
2. Judul Halaman:
Gunakan tag <title>
di dalam tag <head>
untuk menentukan judul halaman Anda. Judul ini akan muncul di tab peramban web Anda dan juga akan digunakan oleh mesin pencari.
3. Menambahkan Teks dan Gambar:
Anda dapat menambahkan teks menggunakan tag <p>
untuk paragraf atau <h1>
, <h2>
, <h3>
, dll. untuk judul. Untuk gambar, gunakan tag <img>
dan tentukan atribut src
untuk menentukan lokasi gambar.
4. Membuat Tautan:
Untuk membuat tautan, gunakan tag <a>
dan tentukan atribut href
untuk menentukan URL yang ingin Anda tautkan.
5. Daftar dan Tabel:
Anda dapat membuat daftar menggunakan tag <ul>
untuk daftar tak berurutan atau <ol>
untuk daftar berurutan. Untuk tabel, gunakan tag <table>
, <tr>
untuk baris, dan <td>
untuk sel.
<!DOCTYPE html> <html> <head> <title>Contoh Halaman HTML</title> </head> <body> <h1>Selamat Datang di Situs Web Kami</h1> <p>Ini adalah paragraf pertama di halaman web kami.</p> <img src="gambar.jpg" alt="Gambar Contoh"> <a href="https://www.contoh.com">Kunjungi Contoh.com</a> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <table border="1"> <tr> <td>Data 1</td> <td>Data 2</td> </tr> <tr> <td>Data 3</td> <td>Data 4</td> </tr> </table> </body> </html>