Cara Membuat Blog HTML Dengan Notepad

Cara Membuat Blog HTML Dengan Notepad – Sobat Tekno, tahukah kamu bahwa membuat halaman web sebenarnya tidak sesulit yang dibayangkan? Jangan khawatir, kita bisa memulainya dengan langkah-langkah sederhana.

Salah satu cara yang efektif adalah dengan menggunakan aplikasi Notepad. Nah, kali ini TeknoTask akan membahas cara membuat blog HTML dengan Notepad. Yuk, ikuti panduan langkah demi langkah di bawah ini!

Cara Membuat Blog HTML dan CSS Dengan Notepad

1. Persiapkan Folder dan File

Pertama-tama, buatlah sebuah folder khusus untuk proyek blogmu, misalnya “MyBlog”. Di dalam folder ini, buatlah file HTML baru dengan nama “index.html”. Jangan lupa untuk menyiapkan gambar yang ingin kamu gunakan untuk setiap artikel dan letakkan di folder yang sama, untuk gambarnya bisa kamu unduh disini.

2. Struktur Dasar HTML

Sekarang, buka file “index.html” menggunakan Notepad. Tambahkan struktur dasar HTML pada file tersebut. Ini adalah langkah awal yang penting untuk membangun halaman webmu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Blog</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <nav>
        <ul>
            <li><a href="#article1">Artikel 1</a></li>
            <li><a href="#article2">Artikel 2</a></li>
            <li><a href="#article3">Artikel 3</a></li>
        </ul>
    </nav>

    <header>
        <h1>My Blog</h1>
    </header>

    <!-- Artikel 1 -->
    <div class="article" id="article1">
        <img src="images/image1.png" alt="Gambar Artikel 1" class="article-image">
        <h2>Artikel 1: Judul Artikel Pertama</h2>
        <p>Isi artikel pertama...</p>
    </div>

    <!-- Artikel 2 -->
    <div class="article" id="article2">
        <img src="images/image2.png" alt="Gambar Artikel 2" class="article-image">
        <h2>Artikel 2: Judul Artikel Kedua</h2>
        <p>Isi artikel kedua...</p>
    </div>

    <!-- Artikel 3 -->
    <div class="article" id="article3">
        <img src="images/image3.png" alt="Gambar Artikel 3" class="article-image">
        <h2>Artikel 3: Judul Artikel Ketiga</h2>
        <p>Isi artikel ketiga...</p>
    </div>

    <footer>
        <p>© 2024 My Blog. All rights reserved.</p>
    </footer>

</body>
</html>

3. CSS untuk Tampilan Menarik

Tidak lengkap rasanya jika halaman webmu hanya memiliki teks polos. Agar terlihat menarik, kita perlu menambahkan gaya CSS. Buatlah file “style.css” di dalam folder yang sama dengan “index.html”. Kemudian, tambahkan kode CSS untuk mengatur tata letak dan penampilan halaman webmu.

<style>

nav {
    background-color: #333;
    padding: 10px 0;
}

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

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

a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

header {
    text-align: center;
    margin: 20px 0;
}

.article {
    background-color: #fff;
    margin: 20px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.article-image {
    width: 100%;
    max-width: 400px; /* Atur lebar maksimum gambar */
    height: auto; /* Biarkan tinggi gambar menyesuaikan dengan lebar */
    border-radius: 8px;
    margin-bottom: 10px;
}

h2 {
    color: #333;
}

p {
    color: #555;
}

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

</style>

4. Tampilkan Website

Setelah menambahkan struktur dasar HTML dan CSS, saatnya melihat hasil karya kita. Buka file “index.html” menggunakan browser favoritmu. Pastikan juga file “style.css” berada di folder yang sama, berikut dibawah ini adalah output hasil seluruh kode diatas.

Artikel Terkait:   Cara Membuat Web E-Commerce dengan HTML

Kamu akan melihat bagaimana halaman web sederhana yang menarik hanya dengan menggunakan HTML dan CSS saja. Jangan lupa untuk menyesuaikan gambar, warna, dan font sesuai dengan selera dan kebutuhanmu.

Kesimpulan

Nah, begitulah cara membuat blog HTML dengan Notepad secara sederhana. Sekarang, kamu telah memasuki dunia coding dan membuat halaman webmu sendiri. Semoga panduan ini bermanfaat untuk perjalananmu dalam memahami dasar-dasar pembuatan halaman web. Selamat mencoba, Sobat Tekno!