Cara Membuat Website Pariwisata dengan HTML dan CSS

By Posted on

Cara Membuat Website Pariwisata dengan HTML dan CSS – Dalam era digital saat ini, memiliki sebuah website pariwisata dapat membantu mempromosikan destinasi wisata secara luas dan efektif. Dengan menggunakan HTML dan CSS, Anda dapat membuat website pariwisata yang menarik dan informatif. Dalam panduan ini, kami akan membimbing Anda melalui langkah-langkah detail untuk membuat website pariwisata yang memukau.

Alat yang Disiapkan untuk Membuat Website Pariwisata

Berikut ini alat yang harus Anda siapkan untuk membuat Website pariwisata:

  • Perangkat Laptop,
  • Web browser (chrome),
  • Text Editor (Visual studio code, Sublime Text) cukup pilih salah satu,
  • Niat yang kuat.

Cara Membuat Website Pariwisata dengan HTML dan CSS

1. Buat Folder Project Website Pariwisata

Langkah pertama adalah membuat folder khusus untuk proyek website pariwisata Anda. Anda dapat menamainya sesuai keinginan Anda, misalnya “Project_Website_Pariwisata“.

2. Buat Folder “img”

Di dalam folder proyek Anda, buatlah folder baru bernama “img”. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di website pariwisata Anda nantinya. Sebagai project awal download gambar disini.

3. Buat Sebuah File “website_pariwisata.html”

Sekarang, mari buat file HTML untuk halaman website pariwisata kita. Gunakan teks editor favorit Anda dan buat file baru dengan nama “website_pariwisata.html“. Pastikan untuk menyimpannya di dalam folder proyek Anda.

Berikut ini kode HTML yang dapat Anda implementasikan:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Pariwisata</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>Destinasi Wisata Impian</h1>
            <p>Temukan petualangan baru di tempat-tempat eksotis yang menakjubkan!</p>
        </div>
    </header>

    <nav>
        <div class="container">
            <ul>
                <li><a href="#">Beranda</a></li>
                <li><a href="#">Destinasi</a></li>
                <li><a href="#">Paket Wisata</a></li>
                <li><a href="#">Tentang Kami</a></li>
                <li><a href="#">Kontak</a></li>
            </ul>
        </div>
    </nav>

    <section class="gallery">
        <div class="container">
            <h2>Galeri Destinasi</h2>
            <div class="gallery-item">
                <img src="img/destination1.jpg" alt="Destinasi 1">
                <h3>Gunung Bromo</h3>
            </div>
            <div class="gallery-item">
                <img src="img/destination2.jpg" alt="Destinasi 2">
                <h3>Pulau Komodo</h3>
            </div>
            <div class="gallery-item">
                <img src="img/destination3.jpg" alt="Destinasi 3">
                <h3>Dieng Plateau</h3>
            </div>
        </div>
    </section>

    <section class="destination">
        <div class="container">
            <h2>Deskripsi Destinasi</h2>
            <p>Gunung Bromo adalah salah satu destinasi wisata yang paling terkenal di Indonesia. Terletak di Jawa Timur, Gunung Bromo menawarkan pemandangan matahari terbit yang spektakuler dari puncaknya.</p>
            <p>Pulau Komodo, yang terletak di Nusa Tenggara Timur, adalah rumah bagi hewan langka Komodo Dragon. Selain itu, pulau ini juga memiliki keindahan bawah laut yang memukau bagi para penyelam.</p>
            <p>Dieng Plateau, terletak di Jawa Tengah, menawarkan pemandangan alam yang memesona dengan danau-danau, bukit hijau, dan area perkebunan. Dieng juga dikenal dengan fenomena alamnya yang unik, seperti sunrise di Sikunir.</p>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>Hak Cipta &copy; 2024 Website Pariwisata. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>
 

4. Buat File “style.css”

Selanjutnya, kita perlu membuat file CSS untuk mengatur tata letak dan gaya halaman website pariwisata kita. Buatlah file baru dengan nama “style.css” dan pastikan untuk menyimpannya di dalam folder proyek Anda juga.

Artikel Terkait:  Cara Membuat Tampilan Facebook dengan HTML dan CSS

Berikut ini kode CSS yang dapat Anda implementasikan:

/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global Styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.container {
    width: 80%;
    margin: auto;
}

header, nav, section, footer {
    padding: 20px 0;
}

/* Header Styles */
header {
    background-color: #f8f8f8;
    text-align: center;
}

header h1 {
    color: #333;
}

/* Navigation Styles */
nav ul {
    list-style: none;
    text-align: center;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
}

/* Gallery Styles */
.gallery {
    background-color: #f9f9f9;
    text-align: center;
}

.gallery-item {
    display: inline-block;
    margin: 20px;
}

.gallery-item img {
    max-width: 100%;
    border-radius: 5px;
}

.gallery-item h3 {
    margin-top: 10px;
    color: #333;
}

/* Destination Styles */
.destination {
    background-color: #fff;
    padding: 20px;
    text-align: justify;
}

/* Footer Styles */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    margin-top: 50px;
    padding: 20px 0;
}
 

5. Mengubah Tampilan Website Pariwisata

Sekarang saatnya untuk mulai mengubah tampilan website pariwisata Anda dengan HTML dan CSS. Anda dapat memulai dengan menambahkan elemen-elemen seperti header, navigasi, galeri foto, deskripsi destinasi, dan footer ke dalam file HTML Anda. Gunakan CSS untuk mengatur tata letak, warna, font, dan gaya lainnya agar sesuai dengan tema pariwisata yang Anda inginkan.

Berikut contoh struktur dasar HTML yang dapat Anda gunakan untuk memulai:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Pariwisata</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <!-- Header Anda di sini -->
    </header>

    <nav>
        <!-- Navigasi Anda di sini -->
    </nav>

    <section class="gallery">
        <!-- Galeri Foto Anda di sini -->
    </section>

    <section class="destination">
        <!-- Deskripsi Destinasi Anda di sini -->
    </section>

    <footer>
        <!-- Footer Anda di sini -->
    </footer>
</body>
</html>
 

6. Save & View Tampilan

Setelah Anda selesai mengedit file HTML dan CSS, pastikan untuk menyimpan perubahan Anda. Buka file “website_pariwisata.html” menggunakan browser web Anda untuk melihat tampilan dari halaman website pariwisata yang telah Anda buat. Periksa apakah tata letak dan gaya sesuai dengan yang Anda inginkan. Jika perlu, lakukan penyesuaian lebih lanjut dalam kode HTML dan CSS Anda.

Artikel Terkait:  Cara Membuat Web Company Profile dengan HTML dan CSS

Penutup

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat sebuah website pariwisata sederhana menggunakan HTML dan CSS. Selamat mencoba dan semoga sukses!

Related posts: