Cara Membuat Website Tour and Travel dengan HTML dan CSS

By Posted on

Cara Membuat Website Tour and Travel dengan HTML dan CSS – Membuat website tour and travel sendiri bisa menjadi pengalaman yang menyenangkan, terutama jika Anda seorang pemula dalam dunia pengembangan web. Dalam artikel ini, haikalweb akan membahas langkah-langkah detail untuk membuat website tour and travel menggunakan HTML dan CSS. Langkah-langkahnya akan mudah dipahami bahkan bagi pemula sekalipun.

Alat yang Harus disiapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk membuat website tour and travel dengan HTML dan CSS:

  • Laptop,
  • Web browser (disarankan menggunakan chrome),
  • Text Editor (Visual studio code),
  • Niat yang kuat.

Cara Membuat Website Tour and Travel dengan HTML dan CSS

1. Buat Folder Project Website Tour and Travel

Pertama, buatlah sebuah folder di komputer Anda untuk proyek website tour and travel Anda. Folder ini akan menjadi tempat Anda menyimpan semua file yang terkait dengan proyek ini.

2. Buat Folder Img

Di dalam folder proyek Anda, buatlah subfolder bernama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di website Anda, seperti gambar destinasi wisata, logo perusahaan, dan lainnya. Sebagai contoh implementasi download gambar disini.

3. Buat Sebuah File tour_and_travel.html

Selanjutnya, buatlah sebuah file HTML baru dengan nama “tour_and_travel.html” di dalam folder proyek Anda. File ini akan menjadi halaman utama dari website tour and travel yang akan Anda buat.

Berikut ini code 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 Tour and Travel</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>Welcome to Our Tour and Travel Website</h1>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Destinations</a></li>
                    <li><a href="#">Tours</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="banner">
        <div class="container">
            <h2>Explore Exciting Destinations with Us!</h2>
            <p>Plan your dream vacation now.</p>
            <a href="#" class="btn">Book Now</a>
        </div>
    </section>

    <section class="destinations">
        <div class="container">
            <h2>Popular Destinations</h2>
            <div class="destination">
                <img src="img/destination1.jpg" alt="Destination 1">
                <h3>Destination 1</h3>
            </div>
            <div class="destination">
                <img src="img/destination2.jpg" alt="Destination 2">
                <h3>Destination 2</h3>
            </div>
            <div class="destination">
                <img src="img/destination3.jpg" alt="Destination 3">
                <h3>Destination 3</h3>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>&copy; 2024 Website Tour and Travel. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>
 

4. Buat File style.css

Setelah Anda membuat file HTML, sekarang saatnya membuat file CSS untuk mengatur tampilan dan gaya dari website Anda. Buatlah sebuah file dengan nama “style.css” di dalam folder proyek Anda.

Artikel Terkait:  Cara Membuat Web Perusahaan Online dengan HTML dan CSS

Berikut ini code CSS yang dapat Anda implementasikan:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
}

header {
    background: #333;
    color: #fff;
    padding-top: 30px;
    padding-bottom: 20px;
}

header h1 {
    margin: 0;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

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

.banner {
    background: url('img/banner.jpg') no-repeat center center/cover;
    color: #fff;
    text-align: center;
    padding: 100px 0;
}

.banner h2 {
    margin: 0;
}

.btn {
    display: inline-block;
    background: #333;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

.destinations {
    padding: 50px 0;
}

.destinations h2 {
    text-align: center;
}

.destination {
    float: left;
    width: 30%;
    margin-right: 5%;
    margin-bottom: 30px;
}

.destination img {
    width: 100%;
    border-radius: 5px;
}

footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}
 

5. Mengubah Tampilan Website Tour and Travel

Sekarang, kita akan mulai mengubah tampilan website tour and travel kita menggunakan HTML dan CSS. Anda bisa mulai dengan menambahkan struktur dasar HTML seperti header, navigasi, konten, dan footer di file “tour_and_travel.html”. Selanjutnya, Anda dapat menggunakan file “style.css” untuk memberi gaya pada elemen-elemen HTML tersebut. Misalnya, Anda bisa menentukan warna latar belakang, font, ukuran teks, dan tata letak.

6. Save & View Tampilan

Setelah Anda selesai mengedit file HTML dan CSS, pastikan untuk menyimpan perubahan yang telah Anda buat. Kemudian, buka file “tour_and_travel.html” menggunakan browser web Anda untuk melihat tampilan website Anda. Anda dapat melakukan perubahan lebih lanjut pada kode HTML dan CSS sesuai dengan kebutuhan dan preferensi Anda.

Artikel Terkait:  Cara Membuat Form Login Keren dengan HTML dan CSS

Penutup

Dengan mengikuti langkah-langkah di atas, Anda akan dapat membuat sebuah website tour and travel sederhana menggunakan HTML dan CSS. Jangan ragu untuk bereksperimen dengan kode dan menyesuaikannya dengan keinginan Anda. Semoga artikel ini bermanfaat bagi Anda yang ingin belajar membuat website dan dapat membantu Anda memahami dasar-dasar pengembangan web.

Related posts: