Cara Membuat Blog HTML dengan Notepad

by

Cara Membuat Blog HTML dengan Notepad – Membuat blog dengan HTML adalah langkah pertama yang signifikan dalam memahami dasar-dasar pembuatan situs web. Dalam dunia yang semakin terhubung secara digital ini, memiliki pengetahuan tentang HTML adalah keunggulan tersendiri. Dengan langkah-langkah yang disajikan secara rinci dalam panduan ini, Anda akan dipandu dari awal hingga akhir dalam proses pembuatan blog HTML dengan menggunakan Notepad, tanpa perlu memiliki pengalaman sebelumnya.

Dengan mengikuti langkah-langkah yang mudah dipahami ini, Anda akan dapat membuat blog HTML sendiri dengan cepat dan efisien. Mari kita mulai dari langkah pertama dengan membuat folder proyek untuk blog HTML Anda.

Alat yang Harus Disiapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk dapat membuat blog html dengan notepad:

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

Cara Membuat Blog HTML dengan Notepad

1. Buat Folder Project Blog HTML

Langkah pertama adalah membuat folder untuk proyek blog HTML Anda. Anda dapat memberi nama folder ini sesuai keinginan Anda, misalnya “BlogHTML“.

2. Buat Folder Img

Di dalam folder proyek Anda, buatlah folder baru dengan nama “img“. Folder ini akan digunakan untuk menyimpan gambar yang akan Anda gunakan di blog Anda. Download gambar disini untuk diterapkan kedalam project blog html dengan notepad

3. Buat Sebuah File blog.html

Buka Notepad atau editor teks sederhana lainnya. Mulailah dengan membuat file baru dan simpan dengan nama “blog.html” di dalam folder proyek Anda.

Berikut ini file html yang dapat Anda tambahkan untuk membuat blog html dengan notepad:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Blog</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>My Awesome Blog</h1>
            <nav>
                <ul>
                    <li><a href="https://riztekno.com/">Home</a></li>
                    <li><a href="https://riztekno.com/">About</a></li>
                    <li><a href="https://riztekno.com/">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <div class="container">
            <article>
                <div class="post-image">
                    <img src="img/landing.jpg" alt="Blog Image">
                </div>
                <div class="post-content">
                    <h2>Post Title</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p>
                    <a href="https://riztekno.com/">Read more</a>
                </div>
            </article>

            <article>
                <div class="post-image">
                    <img src="img/post1.jpg" alt="Blog Image">
                </div>
                <div class="post-content">
                    <h2>Post Title</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p>
                    <a href="#">Read more</a>
                </div>
            </article>

            <article>
                <div class="post-image">
                    <img src="img/post2.jpg" alt="Blog Image">
                </div>
                <div class="post-content">
                    <h2>Post Title</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p>
                    <a href="#">Read more</a>
                </div>
            </article>

            <article>
                <div class="post-image">
                    <img src="img/post3.jpg" alt="Blog Image">
                </div>
                <div class="post-content">
                    <h2>Post Title</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p>
                    <a href="#">Read more</a>
                </div>
            </article>

            <!-- Add more articles here -->
        </div>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2024 My Awesome Blog</p>
        </div>
    </footer>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, buatlah file CSS baru dengan nama “style.css” di dalam folder proyek Anda. File ini akan digunakan untuk mengubah tampilan blog HTML Anda.

Artikel Terkait:   Cara Membuat Web Company Profil dengan HTML dan CSS

Berikut ini file css yang dapat Anda tambahkan untuk membuat blog html dengan notepad:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f3f3f3;
}

.container {
    width: 80%;
    margin: 0 auto;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
}

header h1 {
    margin: 0;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

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

main {
    padding: 20px 0;
}

article {
    background-color: #fff;
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.post-image {
    position: relative;
    overflow: hidden;
}

.post-image img {
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
}

.post-image:hover img {
    transform: scale(1.1);
}

.post-content {
    padding: 20px;
}

.post-content h2 {
    margin-top: 0;
}

.post-content p {
    color: #555;
}

.post-content a {
    display: inline-block;
    text-decoration: none;
    background-color: #333;
    color: #fff;
    padding: 8px 16px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.post-content a:hover {
    background-color: #555;
}

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

5. Mengubah Tampilan Blog HTML

Anda dapat mengubah tampilan blog HTML Anda dengan mengedit file “style.css“. Anda juga dapat menambahkan elemen HTML baru di dalam file “blog.html” sesuai kebutuhan, seperti menu navigasi, konten blog, dll.

6. Save & View Tampilan

Setelah selesai mengedit, simpan semua perubahan yang telah Anda buat. Lalu, buka file “blog.html” menggunakan browser web favorit Anda untuk melihat tampilan blog HTML Anda yang baru.

Preview hasil

Berikut ini preview hasil blog html dengan notepad jika Anda berhasil membuatnya:

Penutup

Dengan mengikuti langkah-langkah yang mudah dipahami ini, Anda akan dapat membuat blog HTML sendiri dengan cepat dan efisien. Mari kita mulai dari langkah pertama dengan membuat folder proyek untuk blog HTML Anda.

Artikel Terkait:   Cara Membuat Website Keren dengan HTML dan CSS

Setelah mengikuti langkah-langkah tersebut, Anda sekarang memiliki dasar yang kokoh dalam membuat blog HTML menggunakan Notepad. Jangan ragu untuk terus bereksperimen dan belajar lebih lanjut tentang HTML dan CSS. Dengan pengetahuan yang Anda peroleh, Anda dapat mengembangkan blog Anda menjadi lebih menarik dan fungsional. Selamat mencoba, dan semoga sukses dalam perjalanan Anda menuju dunia pengembangan web!

Related posts: