Cara Membuat Website Hotel Menggunakan HTML dan CSS

Cara Membuat Website Hotel Menggunakan HTML dan CSS – Dalam era digital ini, keberadaan website bagi bisnis, termasuk hotel, menjadi sangat penting. Website tidak hanya berfungsi sebagai wadah informasi, tetapi juga sebagai sarana promosi yang efektif. Bagi pemula, membuat website mungkin terdengar menakutkan, tetapi dengan panduan ini, Anda akan diajak melangkah step-by-step untuk menciptakan website hotel menggunakan HTML dan CSS, tanpa perlu pengetahuan khusus dalam pemrograman.

Jika Anda adalah pemilik hotel atau mungkin seorang yang tertarik dengan dunia web development, maka artikel ini akan menjadi panduan yang tepat. Dengan mengikuti langkah-langkah sederhana yang kami berikan, Anda akan dapat membuat website hotel yang menarik dan profesional, serta dapat ditemukan dengan mudah di mesin pencari seperti Google. Mari kita mulai perjalanan pembuatan website hotel Anda!

Alat yang Dibutuhkan

Berikut ini beberapa alat yang dibutuhkan untuk dapat membuat website hotel menggunakan html dan css:

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

Cara Membuat Website Hotel Menggunakan HTML dan CSS

1. Buat Folder Project Website Hotel

Langkah pertama adalah membuat folder khusus untuk proyek website hotel Anda. Ini akan membantu dalam mengorganisasi file-file proyek Anda. Misalnya, Anda dapat memberi nama folder ini “HotelWebsite“.

2. Buat Folder Img

Di dalam folder proyek Anda, buatlah folder baru dan beri nama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan digunakan di website hotel Anda nantinya. Download gambar disini untuk di implementasikan ke dalam project website hotel sebagai contoh awal.

3. Buat Sebuah File website_hotel.html

Sekarang, mari kita mulai membuat file HTML utama untuk website hotel. Ikuti langkah-langkah ini:

  • Buka teks editor atau IDE (Integrated Development Environment) favorit Anda.
  • Buat file baru dan simpan dengan nama “website_hotel.html” di dalam folder proyek Anda.
  • Buka file tersebut dengan editor teks Anda.
  • Tulis kode HTML dasar seperti berikut:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hotel Website</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <div class="container">
            <h1>Welcome to Our Hotel</h1>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Rooms</a></li>
                    <li><a href="#">Facilities</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section id="hero">
        <div class="container">
            <h2>Your Dream Stay Awaits</h2>
            <p>Book your stay now and enjoy our luxurious accommodations.</p>
            <a href="https://riztekno.com/" class="btn">Book Now</a>
        </div>
    </section>

    <section id="rooms">
        <div class="container">
            <h2>Our Rooms</h2>
            <div class="room">
                <img src="img/room1.jpg" alt="Room 1">
                <h3>Deluxe Room</h3>
                <p>Experience luxury like never before in our deluxe rooms.</p>
                <a href="#" class="btn">Book Now</a>
            </div>
            <div class="room">
                <img src="img/room2.jpg" alt="Room 1">
                <h3>Deluxe Room</h3>
                <p>Experience luxury like never before in our deluxe rooms.</p>
                <a href="#" class="btn">Book Now</a>
            </div>
            <div class="room">
                <img src="img/" alt="Room 1">
                <h3>Deluxe Room</h3>
                <p>Experience luxury like never before in our deluxe rooms.</p>
                <a href="#" class="btn">Book Now</a>
            </div>
            <!-- Add more rooms here -->
        </div>
    </section>

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

</html>
 

4. Buat File style.css

Sekarang saatnya untuk membuat file CSS untuk mengatur tampilan website hotel Anda. Ikuti langkah-langkah berikut:

  • Buka editor teks Anda kembali.
  • Buat file baru dan simpan dengan nama “style.css” di dalam folder proyek Anda.
  • Pastikan Anda menghubungkan file CSS ini ke dalam file HTML yang telah Anda buat sebelumnya.
/* Reset styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header styles */
header {
    background-color: rgba(51, 51, 51, 0.9); /* Menambahkan transparansi */
    color: #fff;
    padding: 20px 0;
    transition: background-color 0.5s ease; /* Animasi transisi warna latar */
}

header:hover {
    background-color: rgba(51, 51, 51, 1); /* Meningkatkan transparansi saat dihover */
}

nav ul {
    list-style-type: none;
}

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

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

nav ul li a:hover {
    color: #ffd700; /* Warna kuning saat dihover */
}

/* Hero section styles */
/* Hero section styles */
#hero {
    background-image: url('img/landing_bg.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 100px 0;
    position: relative;
}

#hero::after {
    content: '';
    background: rgba(0, 0, 0, 0.5); /* Menambahkan overlay transparan */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Memperbaiki masalah tidak bisa diklik */
}

/* Button styles */
.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ffd700;
    color: #333;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease; /* Animasi perubahan warna latar */
    position: relative;
    z-index: 1; /* Menempatkan tombol di atas overlay */
}

.btn:hover {
    background-color: #ffc107; /* Warna latar yang berbeda saat dihover */
}


/* Rooms section styles */
.room {
    margin-bottom: 40px;
    transition: transform 0.3s ease; /* Animasi saat mouse hover */
}

.room img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.room h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.room:hover {
    transform: scale(1.05); /* Memperbesar ukuran saat dihover */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Menambahkan bayangan */
}



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

5. Mengubah Tampilan Website Hotel

Saatnya untuk mengubah tampilan website hotel Anda dengan CSS. Ini adalah langkah yang sangat krusial dalam membuat website yang menarik dan fungsional. Di sini Anda dapat menentukan tata letak, warna, font, dan gaya visual lainnya.

Artikel Terkait:   Cara Membuat Menu Vertikal dengan HTML dan CSS

Anda dapat menggunakan berbagai properti CSS seperti font-family, color, background-color, padding, margin, dan banyak lagi untuk menyesuaikan tampilan situs web Anda sesuai keinginan.

Pastikan untuk memberikan struktur yang baik dan responsif agar website hotel Anda dapat diakses dengan baik di berbagai perangkat.

6. Save & View Tampilan

Setelah Anda selesai mengedit file HTML dan CSS, pastikan untuk menyimpan perubahan Anda. Kemudian, buka file “website_hotel.html” menggunakan browser web untuk melihat tampilan website hotel Anda.

Preview hasil

Berikut ini preview hasil website hotel menggunakan html dan css jika Anda berhasil membuatnya:

Penutup

Membuat website hotel bukanlah tujuan akhir, melainkan awal dari perjalanan dalam membangun kehadiran digital yang kuat untuk bisnis Anda. Teruslah eksplorasi, pelajari lebih dalam mengenai pengoptimalan mesin pencari (SEO), serta jadilah kreatif dalam menyampaikan pesan dan menarik perhatian calon tamu.

Dengan begitu, website hotel Anda bukan hanya menjadi sekadar portal informasi, tetapi juga menjadi cerminan dari nilai-nilai, kualitas, dan kenyamanan yang akan ditemui oleh tamu yang memilih untuk menginap di hotel Anda. Semoga artikel ini memberikan inspirasi dan panduan yang berharga bagi Anda dalam memulai langkah pertama menuju keberhasilan dalam dunia digital. Sukses selalu!