Cara Membuat Website Offline dengan HTML

by

Cara Membuat Website Offline dengan HTML – Apakah Anda ingin belajar cara membuat website sederhana menggunakan HTML, tapi tidak yakin harus mulai dari mana? Artikel ini akan membantu Anda memulai dengan langkah-langkah yang mudah dipahami, khususnya untuk pemula. Caramembuatweb akan membimbing Anda melalui proses membuat website offline menggunakan HTML dan CSS.

Dalam dunia digital yang terus berkembang, memiliki kemampuan dasar dalam membangun website menjadi semakin penting. Dengan menguasai keterampilan dasar HTML dan CSS, Anda dapat membuat website yang menarik dan fungsional tanpa harus tergantung pada platform atau koneksi internet.

Apa yang membuat HTML menjadi pilihan yang baik untuk memulai adalah kejelasannya. HTML (HyperText Markup Language) adalah bahasa standar untuk membangun dan merancang halaman web. Dengan sedikit pengetahuan tentang kode HTML, Anda dapat membuat halaman web dengan struktur yang tepat dan konten yang terstruktur dengan baik.

Alat yang harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk dapat membuat website offline dengan html:

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

Cara Membuat Website Offline dengan HTML

Langkah 1: Membuat Folder Project Website Offline

Langkah pertama adalah membuat folder khusus untuk proyek website offline Anda. Simpan semua file yang terkait dengan proyek ini di dalam folder tersebut. Anda bisa memberi nama folder sesuai keinginan Anda, misalnya “website_offline_project“.

Langkah 2: Membuat Folder “img”

Di dalam folder proyek Anda, buatlah folder baru dengan nama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di website Anda. Download gambar disini untuk di implmentasikan dalam website offline html.

Artikel Terkait:   Cara Membuat Website CV Menggunakan HTML dan CSS

Langkah 3: Membuat File website_offline.html

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

  1. Buka teks editor favorit Anda (Sublime text).
  2. Buat file baru dan simpan dengan nama “website_offline.html” di dalam folder proyek Anda.
  3. Mulailah dengan menulis struktur dasar HTML, seperti di bawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Offline</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <div class="header__logo">
                <img src="img/logo.jpg" alt="Logo Website">
                <h1>Website Offline</h1>
            </div>
            <nav class="header__nav">
                <ul>
                    <li><a href="https://riztekno.com/">Home</a></li>
                    <li><a href="#content">About</a></li>
                    <li><a href="https://riztekno.com/">Contact</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <section class="landing">
                <h2>Selamat Datang di Website Offline</h2>
                <p>Ini adalah contoh sederhana menggunakan HTML dan CSS.</p>
                <a href="#content" class="btn">Lanjutkan</a>
            </section>
            <section id="content" class="content">
                <img src="img/gambar.jpg" alt="Gambar Menarik">
                <p>Berikut adalah website sederhana!</p>
            </section>
        </main>
        <footer>
            <p>&copy; 2024 Website Offline</p>
        </footer>
    </div>
</body>
</html>
 

Langkah 4: Membuat File style.css

Selanjutnya, mari kita buat file CSS untuk mengatur tata letak dan gaya visual website offline Anda. Berikut langkah-langkahnya:

  1. Buka teks editor favorit Anda.
  2. Buat file baru dan simpan dengan nama “style.css” di dalam folder proyek Anda.
  3. Anda dapat mulai menambahkan gaya CSS ke file ini untuk mendesain tampilan website Anda.
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    max-width: 800px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header__logo img {
    width: 50px;
    height: 50px;
    margin-right: 300px;
}

.header__nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.header__nav ul li {
    display: inline-block;
    margin-right: 20px;
}

.header__nav ul li:last-child {
    margin-right: 0;
}

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

.header__nav ul li a:hover {
    color: #007bff;
}

.landing {
    text-align: center;
    margin-bottom: 40px;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #0056b3;
}

footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ccc;
}

img {
    width: 400px; /* Atau sesuai dengan ukuran yang Anda inginkan */
    height: auto;
    display: block;
    margin: 0 auto;
}

.container {
    max-width: 1500px; /* Menyesuaikan lebar maksimum kontainer */
    width: 90%; /* Menyesuaikan lebar kontainer untuk tampilan yang lebih luas */
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
}
 

Langkah 5: Mengubah Tampilan Website Offline

Sekarang saatnya untuk menambahkan konten ke dalam website offline Anda. Anda bisa menambahkan teks, gambar, dan elemen HTML lainnya sesuai keinginan Anda. Gunakan tag-tag HTML seperti <p>, <img>, <h1>, dll., untuk menambahkan konten ke dalam file “website_offline.html“.

Artikel Terkait:   Cara Membuat Web Menggunakan Notepad

Langkah 6: Menyimpan & Melihat Tampilan

Setelah selesai mengedit file HTML dan CSS, pastikan untuk menyimpan semua perubahan yang telah Anda buat. Kemudian, buka file “website_offline.html” di browser web Anda untuk melihat tampilan website offline Anda. Pastikan bahwa semua konten dan desain tampil dengan baik.

Preview hasil

Berikut ini preview hasil website offline dengan html jika Anda telah berhasil membuatnya:

Penutup

Dalam panduan ini, kami telah membahas langkah-langkah detail untuk membuat website offline menggunakan HTML dan CSS. Dengan mengikuti panduan ini, Anda telah mempelajari bagaimana membuat struktur dasar website, menambahkan konten, dan mengatur tata letak menggunakan CSS.

Ingatlah bahwa membangun website adalah proses yang terus berkembang. Setelah Anda merasa nyaman dengan dasar-dasar HTML dan CSS, jangan ragu untuk mengeksplorasi lebih lanjut dan mencoba hal-hal baru. Teruslah belajar dan berlatih, karena hal ini akan membantu Anda menjadi seorang pengembang web yang lebih baik.

Selamat mencoba, dan semoga berhasil dalam perjalanan Anda untuk menjadi seorang yang mahir dalam membangun website!

Related posts: