Cara Membuat Web Berita dengan HTML dan CSS

By Posted on

Cara Membuat Web Berita dengan HTML dan CSS – Dalam era digital ini, kemampuan untuk membuat dan mengelola situs web menjadi semakin penting. Salah satu jenis situs web yang umum adalah situs berita. Dalam panduan haikalweb kali ini, kita akan membahas langkah-langkah detail untuk membuat sebuah situs web berita menggunakan HTML dan CSS. Langkah-langkahnya mudah dipahami, cocok untuk pemula yang ingin mempelajari dasar-dasar pembuatan situs web.

Cara Membuat Web Berita dengan HTML dan CSS

1. Buat Folder Proyek Web Berita

Langkah pertama yang perlu dilakukan adalah membuat sebuah folder untuk proyek situs web berita Anda. Anda dapat memberi nama folder ini sesuai dengan keinginan Anda, misalnya “ProyekWebBerita“.

2. Buat Folder Img

Dalam folder proyek Anda, buatlah folder baru dengan nama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di situs web berita Anda. Download gambar disini untuk menambahkan contoh gambar web berita nantinya.

3. Buat Sebuah File web_berita.html

Buatlah sebuah file baru di dalam folder proyek Anda dan beri nama “web_berita.html“. Ini akan menjadi file utama yang akan menampilkan konten situs web berita Anda. Gunakan editor teks favorit Anda, seperti Notepad atau Visual Studio Code, untuk membuat file ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Situs Web Berita</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Selamat Datang di Situs Berita Kami</h1>
        <nav>
            <ul>
                <li><a href="#">Beranda</a></li>
                <li><a href="#">Berita Terkini</a></li>
                <li><a href="#">Tentang Kami</a></li>
                <li><a href="#">Kontak</a></li>
            </ul>
        </nav>
    </header>
    
    <section class="berita">
        <article>
            <h2>Judul Berita Pertama</h2>
            <p>Deskripsi singkat tentang berita pertama Anda.</p>
            <img src="img/berita1.jpg" alt="Gambar Berita Pertama">
        </article>
        
        <article>
            <h2>Judul Berita Kedua</h2>
            <p>Deskripsi singkat tentang berita kedua Anda.</p>
            <img src="img/berita2.jpg" alt="Gambar Berita Kedua">
        </article>
    </section>
    
    <footer>
        <p>Hak Cipta © 2024 Situs Web Berita. All rights reserved.</p>
    </footer>
</body>
</html>
 

4. Buat File style.css

Sekarang, buatlah file CSS untuk mengatur tata letak dan tampilan situs web berita Anda. Buat file baru di dalam folder proyek Anda dan beri nama “style.css”.

/* style.css */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

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

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

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

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

.berita {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
    padding: 20px;
}

article {
    border: 1px solid #ccc;
    padding: 10px;
}

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

5. Mengubah Tampilan Web Berita

Anda dapat mengubah tampilan web berita sesuai dengan preferensi Anda dengan mengedit file style.css. Cobalah untuk menyesuaikan warna, font, dan tata letak sesuai dengan keinginan Anda gunakan tag seperti<header>, <nav>, <section>, <footer>.

6. Simpan dan Lihat Tampilan

Setelah Anda selesai mengedit file HTML dan CSS, pastikan untuk menyimpan perubahan Anda. Buka file web_berita.html menggunakan browser web Anda untuk melihat tampilan situs web berita Anda.

Penutup

Dengan mengikuti langkah-langkah di atas, Anda sekarang telah membuat sebuah situs web berita sederhana menggunakan HTML dan CSS. Jika Anda ingin mengembangkan lebih lanjut, Anda dapat mempelajari JavaScript untuk menambahkan interaktivitas ke situs web Anda. Semoga panduan ini bermanfaat untuk Anda dalam memulai perjalanan Anda dalam pembuatan situs web!

Related posts: