Cara Membuat Website Pariwisata dengan HTML dan CSS

Cara Membuat Website Pariwisata dengan HTML dan CSS – Apakah Anda ingin mempelajari cara membuat website pariwisata yang menakjubkan tetapi tidak tahu harus mulai dari mana? Dalam panduan ini, saya akan membimbing Anda melalui langkah-langkahnya dengan cara yang mudah dipahami, bahkan untuk pemula sekalipun. Anda akan belajar bagaimana membuat website pariwisata yang menarik dengan menggunakan HTML dan CSS.

Menjadi Pengembang Web Pariwisata dalam Sekejap! Dengan pesatnya perkembangan industri pariwisata, memiliki website yang menarik dan informatif merupakan suatu keharusan. Dalam panduan ini, riztekno akan membimbing Anda melalui setiap langkah dengan jelas dan sederhana. Mulai dari membuat folder proyek hingga menyempurnakan tampilan dengan gaya CSS yang menakjubkan, Anda akan mendapatkan semua yang Anda butuhkan di sini!

Alat yang Dibutuhkan

Berikut ini beberapa alat yang dibutuhkan untuk dapat membuat website pariwisata dengan html dan css:

  • Perangkat laptop,
  • Notepad++ (Text editor code),
  • Google chrome (Web browser),
  • Niat yang kuat.

Cara Membuat Website Pariwisata dengan HTML dan CSS

1. Buat Folder Project Website Pariwisata

Langkah pertama yang perlu Anda lakukan adalah membuat folder khusus untuk proyek website pariwisata Anda. Folder ini akan menjadi tempat penyimpanan untuk semua file yang terkait dengan proyek ini.

2. Buat Folder Img

Di dalam folder proyek Anda, buatlah subfolder dengan nama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan dalam website pariwisata. Download gambar disini untuk diterapkan ke dalam project website pariwisata.

3. Buat Sebuah File website_pariwisata.html

Sekarang, mari kita mulai membuat file HTML untuk website pariwisata Anda. Ikuti langkah-langkah berikut:

  • Buka editor teks favorit Anda (misalnya, Notepad, Sublime Text, atau Visual Studio Code).
  • Buat file baru dengan nama website_pariwisata.html.
  • Ketik kode dasar HTML berikut 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>Website Pariwisata</title>
</head>
<body>
  <header>
    <div class="container">
      <h1>Website Pariwisata</h1>
      <nav>
        <ul>
          <li><a href="https://riztekno.com/">Beranda</a></li>
          <li><a href="https://riztekno.com/">Destinasi</a></li>
          <li><a href="https://riztekno.com/">Kontak</a></li>
        </ul>
      </nav>
    </div>
  </header>
  
  <section id="landing-page">
    <div class="container">
      <div class="landing-content">
        <h2>Selamat Datang di Destinasi Wisata Terbaik</h2>
        <p>Temukan keindahan alam yang luar biasa dan pengalaman tak terlupakan.</p>
        <a href="https://riztekno.com/" class="btn">Selengkapnya</a>
      </div>
    </div>
  </section>
  
  <section id="destinasi">
    <div class="container">
      <div class="destination">
        <img src="img/destinasi1.jpg" alt="Destinasi 1">
        <h3>Destinasi Wisata 1</h3>
        <p>Deskripsi singkat tentang destinasi wisata 1.</p>
        <a href="https://riztekno.com/" class="btn">Kunjungi</a>
      </div>
      <div class="destination">
        <img src="img/destinasi2.jpg" alt="Destinasi 2">
        <h3>Destinasi Wisata 2</h3>
        <p>Deskripsi singkat tentang destinasi wisata 2.</p>
        <a href="https://riztekno.com/" class="btn">Kunjungi</a>
      </div>
      <div class="destination">
        <img src="img/destinasi3.jpg" alt="Destinasi 3">
        <h3>Destinasi Wisata 3</h3>
        <p>Deskripsi singkat tentang destinasi wisata 3.</p>
        <a href="https://riztekno.com/" class="btn">Kunjungi</a>
      </div>
      <div class="destination">
        <img src="img/destinasi4.jpg" alt="Destinasi 4">
        <h3>Destinasi Wisata 4</h3>
        <p>Deskripsi singkat tentang destinasi wisata 4.</p>
        <a href="https://riztekno.com/" class="btn">Kunjungi</a>
      </div>
    </div>
  </section>

  <footer>
    <div class="container">
      <p>&copy; 2024 Website Pariwisata. All Rights Reserved.</p>
    </div>
  </footer>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, kita akan membuat file CSS untuk mengatur tampilan website pariwisata. Berikut langkahnya:

  • Di dalam folder proyek, buatlah file baru dengan nama style.css.
  • Masukkan kode CSS dasar atau aturan gaya sesuai kebutuhan Anda. Contoh:
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  
  .container {
    width: 80%;
    margin: 0 auto;
  }
  
  header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
  }
  
  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: #20e4ee;
    text-decoration: none;
  }
  
  #landing-page {
    background-image: url('img/background.jpg');
    background-size: cover;
    color: #1f0303;
    padding: 100px 0;
    text-align: center;
  }
  
  .landing-content {
    max-width: 600px;
    margin: 0 auto;
  }
  
  #destinasi {
    padding: 50px 0;
    text-align: center;
  }
  
  .destination {
    margin-bottom: 30px;
  }
  
  .destination img {
    max-width: 100%;
    border-radius: 10px;
  }
  
  .btn {
    display: inline-block;
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  
  .btn:hover {
    background-color: #555;
  }
  
  footer {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
  }
 

5. Mengubah Tampilan Website Pariwisata

Sekarang saatnya untuk mulai mengubah tampilan website pariwisata sesuai keinginan Anda. Anda dapat menambahkan elemen HTML baru, mengatur layout, menambahkan gambar, dan menerapkan gaya menggunakan CSS.

  • Tambahkan elemen HTML seperti <header>, <nav>, <section>, dan lainnya sesuai dengan struktur website pariwisata Anda.
  • Gunakan CSS untuk menentukan warna, ukuran teks, spasi, dan tata letak halaman.
Artikel Terkait:   Cara Membuat Website Seperti Facebook dengan HTML dan CSS

6. Save & View Tampilan

Setelah Anda selesai mengedit file HTML dan CSS, pastikan untuk menyimpan perubahan Anda. Kemudian, buka file website_pariwisata.html menggunakan browser web favorit Anda untuk melihat tampilan website pariwisata yang telah Anda buat.

Preview hasil

Berikut ini adalah preview hasil website pariwisata dengan html dan css jika Anda berhasil membuatnya:

Penutup

Jadi, jangan ragu untuk memulai perjalanan Anda dalam menciptakan website pariwisata yang memukau. Dengan sedikit usaha dan pemahaman yang tepat, Anda dapat menghasilkan website yang tidak hanya menarik perhatian pengunjung tetapi juga memberikan pengalaman yang menyenangkan dan informatif. Teruslah eksplorasi dan kembangkan kreativitas Anda dalam dunia web development. Selamat mencoba, dan semoga sukses!