Cara Membuat Website HTML Menggunakan Notepad

By Posted on

Cara Membuat Website HTML Menggunakan Notepad – Membuat website HTML mungkin terdengar menakutkan bagi pemula, tetapi sebenarnya, itu bisa sangat mudah dilakukan dengan alat yang sederhana seperti Notepad. Dalam panduan ini, haikalweb akan melangkah melalui langkah-langkah untuk membuat website HTML sederhana menggunakan Notepad, dari mulai membuat folder hingga melihat tampilan akhir website.

Alat yang harus disiapkan

Berikut ini alat yang harus anda siapkan untuk membuat website html menggunakan notepad:

  • Laptop,
  • Notepad,
  • Web browser (disarankan menggunakan chrome),
  • Niat yang kuat.

Cara Membuat Website HTML menggunakan Notepad

1. Buat Folder Project Website HTML

Langkah pertama adalah membuat folder khusus untuk proyek website HTML Anda. Ini akan membantu Anda menjaga semua file yang terkait dengan proyek Anda terorganisir dengan baik. Misalnya, beri nama folder ini “Website_HTML_Project“.

2. Buat Folder “img”

Di dalam folder proyek Anda, buatlah folder baru dengan nama “img“. Folder ini akan digunakan untuk menyimpan semua file gambar yang akan Anda gunakan di situs web Anda. Pastikan Anda memilih nama yang jelas dan deskriptif agar mudah dikenali. Sebagai contoh download gambar disini.

3. Buat Sebuah File “website_html.html”

Sekarang, buka Notepad di komputer Anda. Mulailah dengan membuat file baru dan simpan dengan nama “website_html.html” di dalam folder proyek Anda. Ini akan menjadi file utama yang akan menampung kode HTML untuk website Anda.

Berikut ini source 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 HTML Menggunakan Notepad</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Selamat Datang di Website Saya!</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Beranda</a></li>
            <li><a href="#">Tentang</a></li>
            <li><a href="#">Kontak</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>Tentang Saya</h2>
            <p>Selamat datang di website saya! Saya seorang pemula dalam pembuatan website HTML dan saya senang bisa berbagi pengetahuan dengan Anda.</p>
        </section>
        <section>
            <h2>Galeri Gambar</h2>
            <img src="img/gambar1.png" alt="Gambar 1">
            <img src="img/gambar2.png" alt="Gambar 2">
        </section>
    </main>
    <footer>
        <p>&copy; 2024 Website HTML Menggunakan Notepad</p>
    </footer>
</body>
</html>
 

4. Buat File “style.css”

Selanjutnya, kita akan membuat file Cascading Style Sheets (CSS) untuk mengatur tampilan website. Buatlah file baru di Notepad dan simpan dengan nama “style.css” di dalam folder proyek Anda. File ini akan digunakan untuk menyesuaikan tata letak, warna, dan gaya lainnya dari elemen-elemen di halaman web Anda.

Artikel Terkait:  Cara Membuat Landing Page dengan HTML dan CSS

Berikut ini source code CSS yang dapat Anda implementasikan:

/* style.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
}

nav ul {
    list-style-type: none;
    padding: 0;
    text-align: center;
}

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

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

main {
    padding: 20px;
}

section {
    margin-bottom: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
}
 

5. Mulai Mengubah Website HTML

Sekarang, kita akan mulai menulis kode HTML untuk website Anda di file “website_html.html” yang sudah kita buat sebelumnya. Di sini, Anda dapat menambahkan elemen-elemen HTML seperti judul, paragraf, gambar, dan banyak lagi, sesuai dengan kebutuhan dan tujuan website Anda. Pastikan untuk memberikan komentar atau penjelasan yang jelas di dalam kode Anda, terutama jika Anda masih belajar.

6. Save & View Tampilan

Setelah menulis kode HTML dan menerapkannya ke file “website_html.html“, jangan lupa untuk menyimpan perubahan Anda. Kemudian, buka file tersebut di browser web Anda untuk melihat tampilan akhir dari website yang telah Anda buat. Ini memungkinkan Anda untuk melihat bagaimana tampilan dan layout dari website yang telah Anda rancang menggunakan kode HTML dan CSS.

Kesimpulan

Membuat website HTML menggunakan Notepad sebenarnya tidak sesulit yang Anda bayangkan, terutama untuk pemula. Dengan mengikuti langkah-langkah yang telah dijelaskan di atas dan dengan sedikit latihan, Anda akan segera bisa membuat website HTML sederhana dengan lancar. Teruslah berlatih, eksperimen dengan kode, dan jangan ragu untuk mencari sumber daya tambahan jika Anda mengalami kesulitan. Semoga panduan ini bermanfaat bagi Anda yang ingin belajar membuat website menggunakan HTML!

Related posts: