Cara Membuat Website Portal Berita dengan HTML dan CSS

By Posted on

Cara Membuat Website Portal Berita dengan HTML dan CSS – Apakah Anda tertarik untuk mempelajari cara membuat website portal berita yang menarik dan informatif menggunakan HTML dan CSS? Dalam era digital yang serba cepat ini, memiliki kemampuan untuk membuat situs web sendiri adalah keterampilan yang sangat berharga. Website portal berita adalah salah satu bentuk situs web yang paling umum ditemui, dan memiliki kemampuan untuk membuatnya sendiri memberikan Anda kontrol penuh atas isi dan tampilan situs Anda.

Artikel ini dirancang khusus untuk membantu Anda memulai langkah pertama dalam perjalanan pembuatan website portal berita. Kami akan membimbing Anda melalui setiap langkah dengan cara yang sederhana dan mudah dipahami, bahkan jika Anda baru memulai dalam dunia pengembangan web.

Dengan mengikuti panduan langkah demi langkah ini, Anda akan belajar bagaimana membuat struktur dasar dari website portal berita, menambahkan berita dan artikel, serta mendesain tampilan situs yang menarik dan responsif. Jangan khawatir jika Anda belum memiliki pengalaman dalam pemrograman web, karena artikel ini haikalweb akan memberikan penjelasan yang lengkap dan jelas untuk setiap langkahnya.

Mari kita mulai perjalanan menuju pembuatan website portal berita yang unik dan profesional!

Alat yang haru Anda Siapkan

Berikut ini beberapa alat yang harus ada untuk dapat membuat website portal berita dengan html dan css:

  • Perangkat Laptop,
  • Text editor code (Sublime text),
  • Web browser (Chrome),
  • Niat yang sungguh-sungguh.

Cara Membuat Website Portal Berita dengan HTML dan CSS

1. Buat Folder Project Website Portal Berita

Langkah pertama adalah membuat folder khusus untuk proyek website portal berita Anda. Ini akan membantu Anda dalam mengorganisir file-file proyek dengan baik.

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 dalam website portal berita. Download gambar disini untuk di implementasikan pada website portal berita.

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

3. Buat Sebuah File website_portal_berita.html

Buka editor teks favorit Anda dan buatlah file baru dengan nama “website_portal_berita.html“. Ini akan menjadi file utama yang akan menampilkan konten dari website portal berita Anda.

Berikut ini code HTML yang bisa 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 Portal Berita</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>Portal Berita Harian</h1>
            <nav>
                <ul>
                    <li><a href="#">Beranda</a></li>
                    <li><a href="#">Berita Terkini</a></li>
                    <li><a href="#">Kategori</a></li>
                    <li><a href="#">Tentang Kami</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <section class="news">
        <div class="container">
            <article>
                <img src="img/berita1.jpeg" alt="Gambar Berita 1">
                <div class="article-content">
                    <h2>Judul Berita Pertama</h2>
                    <p>Deskripsi singkat tentang berita pertama.</p>
                    <a href="#">Baca Selengkapnya</a>
                </div>
            </article>
            <article>
                <img src="img/berita2.jpg" alt="Gambar Berita 1">
                <div class="article-content">
                    <h2>Judul Berita Pertama</h2>
                    <p>Deskripsi singkat tentang berita pertama.</p>
                    <a href="#">Baca Selengkapnya</a>
                </div>
            </article>
            <article>
                <img src="img/berita3.jpg" alt="Gambar Berita 1">
                <div class="article-content">
                    <h2>Judul Berita Pertama</h2>
                    <p>Deskripsi singkat tentang berita pertama.</p>
                    <a href="#">Baca Selengkapnya</a>
                </div>
            </article>
            <!-- Artikel- artikel berita lainnya ditambahkan di sini -->
        </div>
    </section>
    <footer>
        <div class="container">
            <p>Hak Cipta © 2024 Website Portal Berita.</p>
        </div>
    </footer>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, buatlah file CSS terpisah untuk mendesain tampilan dari website portal berita Anda. Buatlah file baru dengan nama “style.css” di dalam folder proyek Anda.

Artikel Terkait:  Cara Membuat Website HTML Menggunakan Notepad

Berikut ini code css yang bisa Anda implementasikan:

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

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

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

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;
}

.news {
    padding: 20px 0;
}

article {
    background-color: #f8f9fa;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

article img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 10px;
}

.article-content h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.article-content p {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 15px;
}

.article-content a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

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

5. Mengubah Tampilan Website Portal Berita

Sekarang, kita akan mulai mendesain tampilan dari website portal berita Anda. Anda dapat menambahkan elemen-elemen HTML seperti header, daftar berita, gambar, dan lainnya di dalam file “website_portal_berita.html“. Kemudian, gunakan CSS di file “style.css” untuk mengatur tata letak, warna, dan gaya lainnya.

Berikut ini contoh perubahan yang bisa Anda coba:

<body>
<header>
<h1>Portal Berita Harian</h1>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Berita Terkini</a></li>
<li><a href="#">Kategori</a></li>
<li><a href="#">Tentang Kami</a></li>
</ul>
</nav>
</header>
<section class="news">
<article>
<img src="img/berita1.jpg" alt="Gambar Berita 1">
<h2>Judul Berita Pertama</h2>
<p>Deskripsi singkat tentang berita pertama.</p>
</article>
<!-- Artikel- artikel berita lainnya ditambahkan di sini -->
</section>
<footer>
<p>Hak Cipta © 2024 Website Portal Berita.</p>
</footer>
</body>

/* Gaya CSS Anda di sini */
header {
    background-color: #007bff;
    color: #fff;
    padding: 20px;
}

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;
}

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

article {
    border: 1px solid #ddd;
    padding: 20px;
}

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

6. Simpan & Lihat Tampilan

Setelah Anda menyelesaikan perubahan, simpan file HTML dan CSS Anda. Buka file “website_portal_berita.html” di browser web Anda untuk melihat tampilan dari website portal berita yang baru Anda buat.

Artikel Terkait:  Cara Membuat Website Toko Alat Tulis dengan HTML dan CSS

Penutup

Dengan mengikuti langkah-langkah di atas, Anda telah membuat sebuah website portal berita sederhana menggunakan HTML dan CSS. Jangan ragu untuk bereksperimen dengan desain dan konten Anda sendiri. Selamat mencoba!

Related posts: