Cara Membuat HTML Menjadi Website – HTML website adalah situs web yang dibuat menggunakan bahasa markup HTML (HyperText Markup Language). Situs web ini menggunakan HTML sebagai bahasa dasar untuk merancang struktur dan konten dasar situs, yang kemudian diperluas dan ditingkatkan dengan CSS (Cascading Style Sheets) untuk styling dan JavaScript untuk interaktivitas.
Sekarang, mari kita bahas lebih lanjut apa itu HTML dan peran pentingnya dalam pembuatan situs web.
Pentingnya HTML Dalam Membuat Website
HTML atau HyperText Markup Language adalah bahasa markup yang digunakan untuk membuat dan merancang halaman web. Dengan HTML, pengembang dapat menentukan struktur dasar situs web, termasuk elemen-elemen seperti judul, paragraf, gambar, tautan, dan bagian lainnya. HTML memungkinkan pengembang untuk menentukan bagaimana konten situs web akan diorganisir dan ditampilkan di browser web.
Website, di sisi lain, adalah kumpulan halaman web yang saling berhubungan yang umumnya berada pada server yang sama. Sebuah website biasanya ditempatkan pada server web yang dapat diakses melalui jaringan seperti Internet atau jaringan lokal (LAN) melalui alamat Internet yang dikenali sebagai URL, Uniform Resource Locator. Gabungan dari semua situs web yang dapat diakses publik di Internet disebut sebagai World Wide Web atau lebih dikenal dengan singkatan WWW.
Setelah kita memahami apa itu HTML dan website, sekarang mari kita lihat bagaimana cara membuat HTML menjadi website sederhana yang sudah TeknoTask rangkum agar mudah dipelajari.
Cara Membuat HTML Menjadi Website Sederhana
1. Persiapkan Folder Proyek
Untuk memulai membuat HTML menjadi website, buka Sublime Text dan buat folder baru untuk proyek Anda di tempat yang mudah diakses, misalnya di desktop atau dalam folder dokumen. Beri nama folder proyek sesuai dengan nama website yang akan Anda buat, misalnya dengan struktur folder dibawah ini:
WebHTML
- index.html
- style.css
2. Buat File HTML (index.html)
Setelah folder proyek Anda siap, buka Sublime Text dan buat file baru dengan nama index.html. Selanjutnya ketik atau salin kode HTML dibawah ini untuk membuat halaman website Anda.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website TeknoTask.Com</title>
</head>
<body>
<header>
<h1>Selamat Datang di Website TeknoTask</h1>
</header>
<nav>
<ul>
<li><a href="#home">Beranda</a></li>
<li><a href="#about">Tentang</a></li>
<li><a href="#services">Layanan</a></li>
<li><a href="#contact">Kontak</a></li>
</ul>
</nav>
<section id="home">
<h2>Beranda</h2>
<p>Ini adalah bagian beranda dari website saya.</p>
</section>
<section id="about">
<h2>Tentang</h2>
<p>Ini adalah bagian tentang dari website saya.</p>
</section>
<section id="services">
<h2>Layanan</h2>
<p>Ini adalah bagian layanan dari website saya.</p>
</section>
<section id="contact">
<h2>Kontak</h2>
<p>Ini adalah bagian kontak dari website saya.</p>
</section>
<footer>
<p>© 2024 Website TeknoTask. Hak cipta dilindungi.</p>
</footer>
</body>
</html>3. Buat File CSS (style.css)
Jika Anda ingin menambahkan gaya dan tata letak visual ke website Anda, buatlah file CSS dengan nama style.css secara terpisah dan tambahkan kode CSS dibawah ini.
<style type="text/css">
/* style.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: seagreen;
color: #fff;
text-align: center;
padding: 20px 0;
}
nav {
background-color: lawngreen;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
text-decoration: none;
color: #333;
}
nav ul li a:hover {
color: #000;
}
section {
padding: 50px 0;
text-align: center;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
</style>4. Simpan dan Jalankan Kode
Simpan file HTML dan CSS Anda, lalu buka file “index.html” menggunakan browser default Anda untuk melihat tampilan website Anda. Langkah cepatnya, Anda juga dapat melakukan klik kanan pada file “index.html” di Sublime Text dan pilih “Open in Browser”.
5. Tampilkan Website
Selamat! Kamu telah berhasil membuat HTML menjadi website sederhana menggunakan Sublime Text. Sesuaikan konten, struktur, dan desain sesuai dengan kebutuhan dan preferensi Anda.
Kesimpulan
Demikianlah ulasan mengenai cara membuat HTML menjadi website dengan mudah. Dengan memahami dasar-dasar HTML dan mengikuti langkah-langkah sederhana tersebut, diharapkan Anda dapat membuat website sederhana dengan lebih mudah.