Dasar-dasar HTML: Membangun Halaman Web Pertama Anda

Hidup di dunia digital, semakin penting bagi siapa saja, baik Anda seorang individu maupun menjalankan bisnis, untuk memiliki jejak web di internet. Jika Anda sedang belajar membuat halaman web Anda sendiri, maka HTML (Hypertext Markup Language) harus menjadi hal pertama yang harus Anda mulai. HTML (HyperText Markup Language) adalah bahasa markup standar untuk membuat halaman web. Di sini saya akan membahas sedikit tentang dasar-dasar HTML dan membantu Anda membuat halaman web pertama Anda.

Memahami HTML

Web menggunakan bahasa markup yang disebut HTML untuk memberikan struktur konten. Tidak seperti bahasa pemrograman, HTML tidak memiliki kapasitas untuk melakukan perhitungan atau pemrosesan logika dan merupakan bentuk bahasa markup yang mendefinisikan bagaimana halaman web disusun. Elemen HTML didefinisikan menggunakan tag, yang terdiri dari nama elemen yang diapit oleh tanda kurung siku.

Struktur Dokumen HTML Dasar

Struktur semua file HTML adalah sama. Memahami elemen-elemen inti:

1. DOCTYPE: Doctype adalah hal pertama yang Anda lihat dalam file HTML. Dalam HTML5 akan terlihat seperti ini:
<!DOCTYPE html>
2. Elemen HTML: Tag ini ada di dalam tag dan berisi seluruh konten situs ini.
<html>
...
</html>
3. Elemen Kepala: Bagian dari dokumen, yang terletak di dalam elemen html yang sama dengan body (meskipun didahulukan dalam urutan sumber), yang dirancang terutama untuk metadata tentang halaman Anda seperti judul dan tautan stylesheet.

<head>
<meta charset="UTF-8">
<title>Your Page Title</title>
</head>

4. Body: Elemen tubuh terdiri dari semua konten yang akan muncul di browser seperti teks, tautan gambar, dan elemen lainnya.

<body>
<h1>Welcome to My First Web Page</h1>
<p>This is a paragraph of text.</p>
</body>

Sumber : rumahweb.com

Menyatukan Semuanya
Berikut adalah contoh sederhana dari dokumen HTML lengkap yang menggabungkan semua komponen yang disebutkan di atas:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My First Web Page</h1>
<p>This is a paragraph of text that introduces the content of the page.</p>
<a href="https://www.example.com">Visit Example.com</a>
</body>
</html>

Elemen-elemen HTML Utama

Nah... sekarang Anda sudah menguasai struktur dasar, jadi bagian ini akan berfokus pada pengenalan bagian-bagian utama HTML yang kita gunakan hampir setiap hari.

1. Membungkus tag di sekitar elemen teks: Judul dan Paragraf adalah contoh tingkat blok (yang mendefinisikan struktur) Pembungkusan TOC digunakan untuk membuat hirarki dalam konten Anda di luar sana.

<h1>Main Title</h1>
<h2>Subheading</h2>

2. Paragraf: Gunakan tag <p> untuk membuat paragraf teks.

<p>This is a paragraph.</p>

3. Tautan: Tag <a> membuat hyperlink. Anda dapat mengatur URL tautan menggunakan atribut href.

<a href="https://www.example.com">Click here to visit Example.com</a>

4. Gambar: Untuk menampilkan gambar, gunakan tag <img> dan tentukan sumbernya (src) dan teks alternatif (alt).

<img src="image.jpg" alt="Description of image">

5. Daftar: Anda dapat membuat daftar berurutan dan tidak berurutan menggunakan tag <ol> dan <ul>.

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

6. Divisi dan Rentang: Tag <div> adalah elemen tingkat blok yang digunakan untuk mengelompokkan konten, sedangkan tag <span> adalah elemen sebaris yang digunakan untuk menata sebagian teks.

<div>
<p>This is inside a div.</p>
</div>

<p>This is a <span style="color: red;">red</span> word.</p>

Menambahkan Gaya dengan CSS

Sementara HTML menyusun konten Anda, CSS (Cascading Style Sheets) digunakan untuk menatanya. Anda dapat menautkan file CSS di bagian <head> pada dokumen HTML Anda:

Anda juga dapat menambahkan gaya sebaris atau menggunakan tag <style> di bagian <head> untuk gaya internal:

<style>

body {

font-family: Arial, sans-serif;

background-color: #f0f0f0;

}

h1 {

color: blue;

}

</style>

Membuat Halaman Web Anda Interaktif dengan JavaScript

Untuk menambahkan interaktivitas pada halaman web Anda, Anda dapat menggunakan JavaScript. Anda dapat menautkan file JavaScript eksternal atau menulis skrip secara langsung dalam HTML Anda:

Anda juga dapat menambahkan skrip di dalam <body>:

function showAlert() {

alert("Hello, welcome to my web page!");

}

</script>

Menguji Halaman Web Anda

Jika Anda ingin melihat halaman web Anda, cukup simpan file HTML tersebut sebagai. File HTML tersebut kemudian dapat dilihat di browser web. Anda kemudian akan melihat kembali struktur konten sesuai dengan tag HTML yang Anda tentukan. Jelajahi kembali ketika Anda membuat perubahan.

Praktik Terbaik untuk HTML

1. HTML semantik: Gunakan elemen semantik seperti atau bahkan yang jarang saya gunakan, penggunaan wrapper untuk meningkatkan aksesibilitas dan SEO.

2. Validasi: alat bantu seperti W3C Markup Validation Service untuk memvalidasi apakah HTML Anda mengandung kesalahan.

3. Pilihlah platform: yang memenuhi standar dasar pendukung aksesibilitas dan memastikan halaman web Anda dapat diakses oleh semua pengguna, termasuk mereka yang memiliki keterbatasan. Atribut Alt untuk Struktur ImagesHeading

4. Komentar: Anda juga dapat menggunakan komentar untuk memberikan konteks dan membuat kode Anda lebih mudah dibaca. Komentar HTML terlihat seperti ini:

Kesimpulan

Dengan membuat halaman web pertama Anda dengan HTML, Anda memulai jalan yang luar biasa menuju Pengembangan Web. Mengetahui dasar-dasar HTML akan membantu Anda memformat dan menampilkan konten dengan tepat. Setelah Anda merasa nyaman dengan HTML, langkah selanjutnya adalah CSS untuk penataan dan JavaScript untuk interaktivitas. Teruslah berlatih dan mencoba berbagai pendekatan untuk membantu mengasah kemampuan pengembangan web Anda. Selamat membuat kode!