HTML (Hypertext Markup Language) adalah bahasa dasar yang digunakan untuk membuat situs web. Meskipun terdengar kompleks, belajar HTML tidak harus sulit. Dalam panduan ini, kita akan membahas HTML untuk pemula secara langkah demi langkah. Anda akan belajar dasar-dasar HTML dan bagaimana membuat situs web sederhana.
Apa Itu HTML?
Sebelum kita mulai, mari pahami apa itu HTML. HTML adalah bahasa markup yang digunakan untuk membuat struktur dasar dari sebuah situs web. Ini digunakan untuk mengatur dan menandai konten situs web sehingga browser web dapat menginterpretasikannya dan menampilkannya kepada pengguna.
Persiapan Pertama
Sebelum Anda mulai menulis kode HTML, ada beberapa persiapan yang perlu Anda lakukan:
1. Pilih Editor
Anda dapat menggunakan editor teks apa pun untuk menulis kode HTML. Notepad di Windows atau TextEdit di Mac adalah pilihan yang bagus. Jika Anda ingin editor khusus untuk pengembangan web, Anda dapat mencoba Visual Studio Code, Sublime Text, atau Atom.
2. Buat Folder Proyek
Setelah Anda memilih editor teks dan mempersiapkan diri untuk belajar HTML, langkah selanjutnya adalah membuat folder proyek khusus. Mengapa ini penting? Folder proyek membantu Anda mengatur semua file yang terkait dengan situs web Anda.
3. Pilih Tema atau Ide
Sebelum Anda mulai menulis kode, pertimbangkan apa yang ingin Anda sertakan dalam situs web Anda. Apakah ini situs pribadi, blog, atau halaman portofolio? Punya ide tentang tampilan dan struktur situs Anda.
Baca Juga: Jenis Layanan Digital Agency
Struktur Dasar HTML
Setiap dokumen HTML harus dimulai dengan struktur dasar. Berikut contohnya:
“`html
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Judul Situs Anda</title>
</head>
<body>
<!– Isi situs Anda akan ditambahkan di sini –>
</body>
</html>
– <!DOCTYPE html>: Ini mendefinisikan versi HTML yang digunakan.
– <html>: Ini adalah elemen utama yang mengelilingi seluruh dokumen HTML.
– <head>: Bagian ini mengandung informasi meta tentang situs Anda.
– <meta charset=”UTF-8″>: Ini mendefinisikan pengaturan karakter untuk dokumen, yang umumnya diatur sebagai UTF-8 untuk mendukung karakter internasional.
– <title>: Ini adalah judul situs yang akan muncul di tab browser.
– <body>: Semua konten yang akan ditampilkan di situs Anda ditempatkan di dalam elemen ini.
Menambahkan Judul dan Paragraf
Anda dapat menambahkan judul dan paragraf sederhana ke situs Anda seperti ini:
“`html
<body>
<h1>Selamat datang di Situs Saya</h1>
<p>Ini adalah paragraf pertama di situs saya. Selamat datang di dunia HTML!</p>
</body>
“`
– <h1>: Ini adalah elemen untuk judul utama situs Anda.
– <p>: Ini adalah elemen untuk menambahkan paragraf.
Baca Juga: Jasa Pembuatan Website Untuk Developer Perumahan Di Bekasi
Menambahkan Gambar
Jika Anda ingin menambahkan gambar, gunakan elemen `<img>` seperti ini:
“`html
<img src=”gambar-saya.jpg” alt=”Deskripsi Gambar”>
– `src`: Ini adalah atribut yang menunjukkan lokasi file gambar.
– `alt`: Ini adalah deskripsi alternatif yang akan muncul jika gambar tidak dapat ditampilkan. Ini juga penting untuk aksesibilitas.
Membuat Tautan (Hyperlink)
Anda dapat membuat tautan (link) ke halaman lain dengan menggunakan elemen `<a>`. Contoh tautan ke Google:
“`html
<a href=”https://www.google.com”>Kunjungi Google</a>
“`
– href: Ini adalah atribut yang menunjukkan alamat URL yang akan dihubungkan oleh tautan.
Membuat Daftar
Anda dapat membuat daftar tak terurut (unordered list) dan daftar terurut (ordered list) dengan elemen `<ul>` dan `<ol>`. Setiap item dalam daftar didefinisikan menggunakan elemen `<li>`. Berikut contoh penggunaan daftar:
“`html
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Simpan dan Tampilkan Dokumen HTML
Setelah Anda menulis kode HTML, simpan dokumen dengan ekstensi `.html`. Misalnya, `index.html`. Buka dokumen ini menggunakan browser web untuk melihat tampilan situs Anda.
Baca Juga: Penggunaan Chatbots dalam Bisnis: Manfaat dan Tantangan
Selamat! Anda telah membuat situs web sederhana dengan HTML. Teruslah berlatih dan eksperimen dengan elemen HTML lainnya. HTML adalah dasar dari web development, dan pemahaman yang baik tentang ini adalah langkah awal menuju pembuatan situs web yang lebih kompleks dan dinamis.
