Advan– Cara Membuat Halaman Web, HTML adalah tempat yang tepat untuk memulai. Sebagai bahasa dasar dari semua situs web, HTML (Hypertext Markup Language) digunakan untuk membuat struktur halaman web. Kamu mungkin pernah mendengar istilah ini, tapi apakah kamu sudah pernah mencoba membuat halaman web sendiri?
Tenang, nggak sesulit yang kamu bayangkan kok! Dengan mengikuti panduan ini, kamu bisa membuat halaman web sederhana hanya dengan HTML. Langkah-langkah yang akan kita bahas di artikel ini cukup mudah diikuti, bahkan jika kamu baru pertama kali memegang koding.
Nah, sebelum kita mulai belajar HTML, ada baiknya kamu mengetahui alat yang kamu butuhkan untuk membuat halaman web. Kamu hanya memerlukan teks editor seperti Notepad atau Visual Studio Code, serta sebuah browser untuk menampilkan hasilnya. Yuk, langsung aja kita mulai langkah-langkahnya:
1. Buat Dokumen HTML Pertama Kamu
Langkah pertama yang harus kamu lakukan adalah membuat file HTML baru. Kamu bisa menggunakan teks editor seperti Notepad atau Visual Studio Code. Setelah itu, simpan file dengan ekstensi .html. Misalnya, beri nama file kamu index.html.
Setelah file siap, kamu bisa mulai menuliskan kode HTML dasar. Kode pertama yang perlu kamu masukkan adalah deklarasi HTML seperti ini:
html
<!DOCTYPE html>
<html>
<head>
<title>Halaman Web Pertama Kamu</title>
</head>
<body>
<h1>Selamat Datang di Website Pertama Kamu!</h1>
</body>
</html>
Bagian kode di atas merupakan kerangka dasar dari sebuah halaman HTML. Tag <html> menandakan bahwa seluruh isi halaman kamu menggunakan HTML. Sedangkan tag <head> berisi informasi tentang halaman seperti judul, dan <body> adalah tempat di mana kamu menaruh konten utama.
2. Menambahkan Heading dan Paragraf
Selanjutnya, kamu bisa menambahkan teks di halaman web dengan menggunakan tag heading <h1> sampai <h6> dan tag paragraf <p>. Misalnya, untuk menambahkan judul dan deskripsi singkat, kamu bisa menuliskan kode seperti ini:
html
<h1>Ini Judul Utama Halaman Kamu</h1>
<p>Ini adalah paragraf pertama yang menjelaskan isi halaman web.</p>
Heading biasanya digunakan untuk memberi struktur pada halaman kamu, sedangkan paragraf untuk menuliskan informasi yang lebih rinci. Semakin besar angkanya, semakin kecil ukuran heading-nya.
3. Menambahkan Gambar
Supaya halaman web kamu lebih menarik, kamu bisa menambahkan gambar menggunakan tag <img>. Tag ini membutuhkan atribut src untuk menunjukkan di mana gambar tersebut berada. Contohnya:
html
<img src=”gambar.jpg” alt=”Gambar Halaman Web”>
Jangan lupa tambahkan deskripsi gambar di atribut alt untuk membantu pengunjung yang tidak bisa melihat gambar karena berbagai alasan.
Baca Juga : Perbedaan Antara Hashing dan Enkripsi Data
4. Membuat Tautan (Link)
Untuk menambahkan navigasi ke halaman lain atau situs web lain, kamu bisa menggunakan tag <a>. Ini contoh cara menambahkan link:
html
<a href=”https://website.com”>Kunjungi Website</a>
Link ini akan mengarahkan pengunjung ke halaman atau situs lain yang kamu tuju.
5. Menambahkan Daftar
Kalau kamu ingin menambahkan daftar item, kamu bisa menggunakan tag <ul> untuk daftar tanpa nomor, dan <ol> untuk daftar bernomor. Misalnya:
html
<ul>
<li>Item pertama</li>
<li>Item kedua</li>
</ul>
Ini membuat daftar poin tanpa nomor. Sedangkan jika ingin daftar bernomor:
html
<ol>
<li>Item pertama</li>
<li>Item kedua</li>
</ol>
6. Menyimpan dan Melihat Hasil
Setelah kamu selesai menulis kode HTML, simpan file tersebut dengan ekstensi .html. Lalu, buka file ini menggunakan browser seperti Chrome atau Firefox, dan kamu akan melihat halaman web yang telah kamu buat.
7. Mengembangkan Lebih Lanjut
Kalau kamu ingin halaman web kamu terlihat lebih menarik, kamu bisa menambahkan CSS (Cascading Style Sheets) untuk mempercantik tampilan. Tapi, untuk pemula, memahami dasar-dasar HTML sudah merupakan langkah awal yang sangat baik.
Membuat halaman web sederhana dengan HTML sebenarnya tidak sulit. Kamu hanya perlu mengikuti langkah-langkah dasar di atas. Seiring waktu, kamu akan semakin mahir dan bisa menambahkan lebih banyak fitur seperti gambar, link, dan daftar. Halaman web pertama ini adalah langkah awal untuk membuka potensi kamu di dunia web development!
Nah, buat kamu yang ingin mendukung aktivitas sehari-hari, seperti belajar HTML atau browsing, produk dari Advan bisa jadi pilihan. Advan G9 Pro hadir dengan prosesor cepat dan layar luas, cocok untuk kamu yang butuh perangkat berkualitas dengan harga terjangkau. Ditambah lagi, Advan Router WiFi bisa membantu kamu tetap terhubung dengan internet yang stabil. Kombinasi handphone Advan dan router ini bikin pengalaman belajar HTML kamu jadi makin lancar! Kunjungi website Advan.id untuk info lebih lanjut dan pilih produk terbaikmu.***
Editor: Andik Chefasa