Mengenal HTML: Tulang Punggung Website Anda
HTML, singkatan dari HyperText Markup Language, adalah bahasa pemrograman dasar yang digunakan untuk membangun struktur sebuah halaman web. Bayangkan HTML sebagai kerangka bangunan – ia menentukan elemen-elemen utama seperti judul, paragraf, gambar, dan link, tetapi tidak menentukan bagaimana elemen-elemen tersebut ditampilkan secara visual.
Elemen HTML didefinisikan menggunakan tag, yang diapit oleh tanda kurung siku (< >). Setiap tag biasanya memiliki tag pembuka dan tag penutup. Misalnya, tag <p> digunakan untuk membuat paragraf, dengan </p> sebagai tag penutupnya. Berikut beberapa tag HTML dasar:
- <html>: Tag utama yang menandai awal dan akhir dokumen HTML.
- <head>: Bagian yang berisi metadata seperti judul halaman dan tautan ke file CSS.
- <body>: Bagian yang berisi konten utama halaman web yang akan terlihat oleh pengguna.
- <h1> sampai <h6>: Tag untuk judul, dengan <h1> sebagai judul utama dan <h6> sebagai subjudul terkecil.
- <p>: Tag untuk paragraf.
- <a>: Tag untuk membuat link (hyperlink), misalnya <a href=”https://www.example.com”>kunjungi website ini</a>
- <img>: Tag untuk menyisipkan gambar.
- <ul> dan <ol>: Tag untuk membuat daftar yang tidak berurutan (unordered list) dan daftar yang berurutan (ordered list).
- <li>: Tag untuk item daftar.
Contoh sederhana HTML:
<html> <head> <title>Contoh Halaman Web</title> </head> <body> <h1>Selamat Datang!</h1> <p>Ini adalah contoh paragraf sederhana.</p> </body> </html>
Kode di atas akan menghasilkan halaman web sederhana dengan judul “Contoh Halaman Web” dan sebuah paragraf yang berbunyi “Ini adalah contoh paragraf sederhana.”
CSS: Mengatur Gaya dan Tata Letak
CSS, singkatan dari Cascading Style Sheets, adalah bahasa yang digunakan untuk mengatur tampilan visual dari sebuah halaman web. Jika HTML adalah kerangka bangunan, maka CSS adalah cat dan desain interiornya. CSS memungkinkan Anda untuk mengendalikan warna teks, ukuran font, tata letak elemen, jarak antar elemen, dan banyak lagi.
Cara Menambahkan CSS: Ada tiga cara utama untuk menambahkan CSS ke halaman web Anda:
- Inline CSS: Menambahkan atribut style langsung ke dalam tag HTML. Cara ini kurang efisien dan tidak disarankan untuk proyek yang lebih besar.
- Embedded CSS: Menambahkan kode CSS di dalam tag <style> di bagian <head> dokumen HTML. Cocok untuk halaman web yang kecil dan sederhana.
- External CSS: Membuat file CSS terpisah (.css) dan menautkannya ke dokumen HTML menggunakan tag <link> di bagian <head>. Cara ini lebih efisien dan direkomendasikan untuk proyek yang lebih besar karena memungkinkan pengelolaan style yang lebih terorganisir dan dapat digunakan kembali di banyak halaman.
Contoh Sederhana CSS (External):
style.css:
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
index.html:
<html> <head> <link rel="stylesheet" href="style.css"> <title>Contoh Halaman Web</title> </head> <body> <h1>Selamat Datang!</h1> <p>Ini adalah contoh paragraf sederhana.</p> </body> </html>
Kode di atas akan menghasilkan halaman web dengan latar belakang abu-abu, font Arial, dan judul berwarna biru tua yang di tengah.
Kesimpulan
HTML dan CSS adalah dua teknologi inti yang membentuk dasar dari pengembangan web. Mempelajari dasar-dasar HTML dan CSS merupakan langkah pertama yang penting bagi siapa pun yang ingin membangun website. Dengan pemahaman yang mendalam tentang kedua teknologi ini, Anda akan dapat membangun website yang sederhana, menarik, dan fungsional.
Selanjutnya: Setelah menguasai dasar-dasar HTML dan CSS, Anda dapat mempelajari teknologi lain seperti JavaScript untuk menambahkan interaktivitas ke website Anda. Ada banyak sumber daya online yang tersedia untuk membantu Anda dalam mempelajari lebih lanjut tentang pengembangan web.