Cara Membuat Web Berita Dengan HTML dan CSS

Cara Membuat Web Berita Dengan HTML dan CSS – Sobat Tekno, zaman telah bergeser ke era digital, di mana hampir segala sesuatu mengandalkan digitalisasi. Kegiatan yang dulu dilakukan secara konvensional, sekarang dapat diwujudkan secara digital, seperti membaca berita.

Kini, membaca berita tak lagi memerlukan kertas koran, melainkan dapat diakses melalui portal berita di situs web tanpa perlu repot membeli koran fisik. Bagi kamu yang ingin membuat web berita sendiri namun bingung memulainya darimana, berikut TeknoTask akan memberikan panduan membuat web berita hanya bermodalkan HTML dan CSS saja.

Apa itu Website Portal Berita?

Dalam konsep umum, website portal berita adalah sebuah platform daring yang bertujuan sebagai penyedia informasi. Di dalam situs ini, pembaca dapat menemukan, membaca, dan berinteraksi dengan beragam informasi yang tersedia.

Namun, dari sudut pandang teknis, portal berita dapat diartikan sebagai laman khusus yang dirancang untuk menarik perhatian pembaca dan audiens, membuka akses ke informasi lebih mendalam dari sebuah laman resmi.

Situs portal berita juga memiliki karakteristik yang membedakannya dari laman umum. Ada yang bersifat terbuka, dapat diakses oleh siapa saja, dan ada pula yang bersifat tertutup, memerlukan akses khusus untuk informasi yang lebih rinci. Dengan fitur ini, situs portal berita menjadi sebuah “pintu” yang harus dilewati sebelum mengakses informasi yang lebih luas.

Cara Membuat Web Berita Dengan HTML dan CSS

1. Persiapkan Struktur Folder dan File

Sobat, sebelum kita mulai, pastikan struktur folder dan file proyek sudah tersusun dengan rapi. Ikuti langkah-langkah ini:

  1. Buat Folder Proyek: Buka manajer file, buat folder proyek baru, contohnya “WebsiteBerita”.
  2. Buat File HTML: Di dalam folder proyek, buat file HTML baru, misalnya “index.html”.
  3. Buat File CSS: Buat file CSS baru, misalnya “style.css”, di dalam folder yang sama.
  4. Tambahkan Gambar: Buat folder gambar dan letakkan semua gambar di dalam folder, untuk semua gambarnya bisa kamu unduh disini.
Artikel Terkait:   Cara Membuat HTML Menjadi Website

2. Tambahkan Struktur HTML Web Berita

Setelah struktur folder dan file siap, buka file “index.html” menggunakan Sublime Text dan tambahkan struktur HTML sebagai berikut.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Berita Terkini</title>
</head>
<body>

    <header>
        <div class="logo">
            <img src="logo/logo teknotask.png" alt="Logo Berita">
        </div>
        <nav>
            <ul>
                <li><a href="#">Politik</a></li>
                <li><a href="#">Ekonomi</a></li>
                <li><a href="#">Teknologi</a></li>
                <li><a href="#">Olahraga</a></li>
            </ul>
        </nav>
        <div class="header-icons">
            <i class="fas fa-bell"></i>
            <a href="#" class="signup-btn">Daftar</a>
        </div>
    </header>

    <section class="news-list">
        <article>
            <img src="gambar/politik1.jpeg" alt="Berita 1">
            <h2>Judul Berita Politik</h2>
            <p>Isi berita politik...</p>
        </article>
        <!-- Tambahkan lebih banyak artikel berita jika diperlukan -->
        <article>
            <img src="gambar/ekonomi.webp" alt="Berita 1">
            <h2>Judul Berita Ekonomi</h2>
            <p>Isi berita ekonomi...</p>
        </article>
        <article>
            <img src="gambar/teknologi1.jpg" alt="Berita 1">
            <h2>Judul Berita Teknologi</h2>
            <p>Isi berita teknologi...</p>
        </article>
        <article>
            <img src="gambar/olahraga1.jpeg" alt="Berita 1">
            <h2>Judul Berita Olahraga</h2>
            <p>Isi berita olahraga...</p>
        </article>
    </section>

    <section class="news-list">
        <article>
            <img src="gambar/politik2.jpg" alt="Berita 1">
            <h2>Judul Berita Politik</h2>
            <p>Isi berita politik...</p>
        </article>

        <article>
            <img src="gambar/ekonomi.jpeg" alt="Berita 1">
            <h2>Judul Berita Ekonomi</h2>
            <p>Isi berita ekonomi...</p>
        </article>
        <article>
            <img src="gambar/teknologi2.jpg" alt="Berita 1">
            <h2>Judul Berita Teknologi</h2>
            <p>Isi berita teknologi...</p>
        </article>
        <article>
            <img src="gambar/olahraga2.jpeg" alt="Berita 1">
            <h2>Judul Berita Olahraga</h2>
            <p>Isi berita olahraga...</p>
        </article>
    </section>

    <footer>
        <p>© 2024 Berita Terkini. All rights reserved.</p>
    </footer>

</body>
</html>

3. Tambahkan CSS Web Berita

Selanjutnya, buka file “style.css” dan tambahkan gaya CSS untuk membuat tampilan web berita menjadi menarik.

<style type="text/css">
    body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f8f8;
}

header {
    background-color: #333;
    color: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.logo img {
    width: 180px;
}

nav {
    flex-grow: 1;
    text-align: center;
    padding-right: 40px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    justify-content: center;
}

nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: color 0.3s ease-in-out;
}

nav a:hover {
    color: #ffcc00;
}

.header-icons {
    display: flex;
    gap: 20px;
    align-items: center;
}

.header-icons i {
    color: #fff;
    font-size: 1.5rem;
}

.signup-btn {
    padding: 10px 20px;
    background-color: #ffcc00;
    color: #333;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.signup-btn:hover {
    background-color: #333;
    color: #ffcc00;
}

.news-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    justify-content: center;
}

article {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 300px;
}

article img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 2px solid #ddd;
}

article h2 {
    padding: 10px;
    color: #333;
}

article p {
    padding: 0 10px 10px 10px;
    color: #555;
}

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

</style>

4. Jalankan Kode

Jika dirasa sudah menambahkan kode HTML dan CSS untuk website berita, buka file “index.html” menggunakan browser atau langsung jalankan kode melalui server Sublime Text untuk melihat hasilnya. Pastikan juga file “style.css” berada di folder yang sama, untuk cara menjalankannya bisa lihat gambar diatas.

Artikel Terkait:   Cara Membuat Web Responsive dengan HTML dan CSS

5. Tampilkan Website

Akhirnya, buka file “index.html” menggunakan browser atau live server Sublime Text untuk melihat hasilnya. Sesuaikan konten dan desain sesuai preferensi Anda.

Penutup

Demikianlah ulasan mengenai cara membuat web berita dengan HTML dan CSS dengan mudah. Semoga panduan ini membantu Sobat Tekno dalam merajut informasi digital secara menarik dan responsif. Selamat mencoba, dan jangan ragu untuk terus mengasah keterampilan pemrograman webmu.