Cara Membuat Website Pariwisata dengan HTML dan CSS – Sobat Tekno pastinya sudah pernah melihat website yang bertemakan pariwisata, namun bagaimana kalau kita coba menjelajahi dunia pariwisata melalui website yang kamu buat sendiri? Tentu hal itu menjadi hal yang sangat menarik bukan? Selain itu juga akan menambah wawasan serta skill yang kamu miliki dalam pembuatan website bertema pariwisatas.
Nah oleh karena itulah dalam panduan artikel kali ini, TeknoTask akan mengajak kamu untuk membuat dan memberikan cara mendesain situs web pariwisata menggunakan HTML dan CSS. Nantinya, di akhir tutorial ini, kamu akan memiliki keterampilan dan pengetahuan untuk menciptakan situs web menakjubkan yang tidak hanya menarik pengunjung, tetapi juga memamerkan layanan perjalanan dan keindahan pariwisatamu.
Apa Itu Website Pariwisata?
Website pariwisata adalah tempat online yang didesain khusus untuk menyajikan informasi seputar destinasi pariwisata, atraksi, fasilitas, dan kegiatan yang bisa dinikmati di suatu daerah atau negara. Intinya, website ini bertujuan memberikan panduan komprehensif kepada pengunjung atau calon wisatawan agar mereka bisa merencanakan perjalanan mereka dengan lebih baik.
Sebuah website pariwisata umumnya menghadirkan berbagai informasi penting, seperti sebagai berikut:
- Deskripsi Destinasi: Mengulas tempat wisata, sejarah, budaya, dan kekhasan suatu daerah.
- Atraksi dan Aktivitas: Menyajikan informasi seputar objek wisata dan kegiatan yang bisa dinikmati oleh pengunjung.
- Akomodasi: Daftar hotel, penginapan, atau tempat menginap lainnya beserta fasilitas dan harga yang ditawarkan.
- Restoran dan Kuliner: Rekomendasi tempat makan, kuliner khas daerah, dan ulasan mengenai pengalaman kuliner.
- Transportasi: Informasi tentang cara mencapai destinasi, opsi transportasi lokal, dan penyewaan kendaraan.
- Event dan Festival: Jadwal acara, festival, atau perayaan khusus yang bisa menarik wisatawan.
- Galeri Foto dan Video: Visualisasi destinasi dan pengalaman wisata melalui gambar dan video.
- Peta dan Navigasi: Peta interaktif dan panduan arah untuk membantu pengunjung menjelajahi daerah tersebut.
Website pariwisata menjadi sumber informasi terpadu yang mempermudah wisatawan dalam merencanakan perjalanan mereka. Selain itu, dapat berfungsi sebagai alat promosi yang efektif bagi destinasi pariwisata dan pemerintah setempat.
Langkah-langkah Membuat Website Pariwisata Sederhana dengan HTML dan CSS
Setelah kamu mengetahui pengertian dari website pariwisata, selanjutnya adalah kami akan memberikan panduan langkah demi langkah untuk membuat web pariwisata menggunakan HTML dan CSS dibawah ini.
1. Persiapkan Struktur Folder
Sobat Tekno, untuk langkah awal yang perlu kita lakukan adalah membuka manajer file dan membuat folder baru untuk proyek website pariwisata. Misalnya, kita bisa memberi nama folder “WebsitePariwisata”. Dalam folder ini, mari kita buat subfolder “Gambar” untuk menyimpan gambar yang akan kita gunakan.
Selain itu buat juga file baru dengan nama index.html dan style.css, untuk lebih lengkapnya struktur foldernya seperti dibawah ini:
WebsitePariwisata
- wisata
– wisata1.jpg
– wisata2.jpg - index.html
- style.css
Untuk contoh gambar tempat wisatanya bisa kamu unduh disini.
2. Buat File HTML Utama (index.html)
Buka Sublime Text dan buat file baru dengan nama “index.html” dalam folder proyek, jika sudah membuat maka isi file ini dengan struktur HTML dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Destinasi Pariwisata</title>
</head>
<body>
<header>
<h1>Selamat Datang di Destinasi Pariwisata</h1>
<nav id="kota-navigasi">
<ul>
<li><a href="#jakarta">Jakarta</a></li>
<li><a href="#bali">Bali</a></li>
<li><a href="#yogyakarta">Yogyakarta</a></li>
<li><a href="#bandung">Bandung</a></li>
<li><a href="#surabaya">Surabaya</a></li>
<!-- Tambahkan nama kota lainnya sesuai kebutuhan -->
</ul>
</nav>
</header>
<section id="destinasi">
<div class="wisata">
<img src="wisata/wisata1.webp" alt="Tempat Wisata 1">
<h2>Wisata Alam Indah</h2>
<p>Deskripsi: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ullamcorper justo nec ligula dictum, vel dictum velit suscipit.</p>
<p>Jam Buka: 08.00 - 18.00</p>
</div>
<div class="wisata">
<img src="wisata/wisata2.jpg" alt="Tempat Wisata 2">
<h2>Wisata Sejarah Megah</h2>
<p>Deskripsi: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ullamcorper justo nec ligula dictum, vel dictum velit suscipit.</p>
<p>Jam Buka: 09.00 - 17.00</p>
</div>
<!-- Tambahkan tempat wisata lainnya sesuai kebutuhan -->
</section>
<footer>
<p>© 2024 Destinasi Pariwisata. All rights reserved.</p>
</footer>
</body>
</html>3. Buat File CSS (style.css)
Selanjutnya, buat file baru dengan nama “style.css” dalam folder proyek, jika sudah membuat maka isi file ini dengan kode CSS dibawah ini.
<style type="text/css">
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #3498db;
color: #fff;
text-align: center;
padding: 1em 0;
}
#kota-navigasi {
margin-top: 10px;
}
#kota-navigasi ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}
#kota-navigasi li {
margin-right: 20px;
}
#kota-navigasi a {
text-decoration: none;
color: #fff;
font-weight: bold;
font-size: 16px;
}
#kota-navigasi a:hover {
text-decoration: underline;
}
#destinasi {
max-width: 800px;
margin: 20px auto;
padding: 20px;
}
.wisata {
margin-bottom: 20px;
}
.wisata img {
width: 200%; /* Set ukuran gambar menjadi 100% lebar dari wadah */
max-width: 600px; /* Batasi lebar maksimum gambar */
height: auto; /* Biarkan tinggi otomatis mengikuti lebar */
}
footer {
background-color: #3498db;
color: #fff;
text-align: center;
position: fixed;
width: 100%;
bottom: 0;
}
</style>4. Tambahkan Konten Destinasi Pariwisata (index.html)
Kembali ke file “index.html” menggunakan Sublime Text, jika ingin menambah banyak konten lagi didalamnya maka tambahkan konten destinasi pariwisata sesuai dengan keinginanmu.
5. Jalankan Kode
Simpan semua perubahan kode di HTML maupun CSSnya, lalu buka file “index.html” menggunakan browser default untuk melihat hasilnya.
6. Tampilkan Website
Selamat! kamu telah berhasil membuat website pariwisata sederhana dengan HTML dan CSS menggunakan Sublime Text. Selanjutnya kamu bisa menyesuaikan konten dan desain sesuai dengan kebutuhan proyek yang kamu butuhkan.
Akhir Kata
Demikian artikel yang membahas tentang panduan untuk membuat website pariwisata di Sublime Text. Meskipun menggunakan dasar HTML dan CSS, jangan khawatir jika kamu belum terlalu mahir dalam pemrograman karena kamu masih bisa mengembangkan terus kode yang kamu buat tersebut.