Cara Membuat Website Keren dengan HTML dan CSS

Cara Membuat Website Keren dengan HTML dan CSS – Dalam era digital saat ini, memiliki kemampuan untuk membuat dan merancang sebuah situs web menjadi semakin penting. Salah satu aspek yang menarik adalah membuat situs web berita yang menampilkan informasi dengan jelas dan menarik. Dalam artikel ini, riztekno akan memandu langkah demi langkah dalam membuat sebuah situs web berita menggunakan bahasa pemrograman HTML dan CSS. Meskipun terdengar kompleks, langkah-langkah yang akan dibahas sangat cocok untuk pemula yang ingin memahami dasar-dasar pengembangan web. Mulai dari pembuatan folder proyek hingga penyesuaian tampilan, ikuti panduan ini untuk menciptakan situs web berita yang menarik dan informatif.

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk dapat membuat web berita dengan html dan css:

  • Perangkat laptop,
  • Google chrome (Web browser),
  • Sublime text (Text editor code),
  • Niat yang kuat.

Cara Membuat Web Berita dengan HTML dan CSS

1. Buat Folder Project Web Berita

Langkah pertama yang perlu Anda lakukan adalah membuat folder khusus untuk proyek website berita Anda. Ini akan membantu Anda menjaga semua file terorganisir dengan baik. Misalnya, Anda dapat menamai folder ini “WebBerita“.

2. Buat Folder Img

Dalam folder proyek Anda, buatlah folder terpisah untuk menyimpan semua gambar yang akan digunakan di website Anda. Anda dapat menamai folder ini “img“. Download gambar disini untuk dapat di terapkan dalam project web berita dengan html dan css.

3. Buat Sebuah File web_berita.html

Sekarang, mari kita mulai membuat file HTML untuk website berita. Gunakan teks editor favorit Anda dan buatlah file baru dengan nama “web_berita.html” dalam folder proyek Anda.

Berikut ini file html yang dapat Anda tambahkan untuk membuat web berita dengan html dan css:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Berita</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="logo">
            <img src="img/logo.png" alt="Logo Website">
        </div>
        <div class="website-name">
            <h1>Website Berita</h1>
        </div>
        <nav>
            <ul>
                <li><a href="https://riztekno.com/">Home</a></li>
                <li><a href="https://riztekno.com/">Berita</a></li>
                <li><a href="https://riztekno.com/">Tentang</a></li>
                <li><a href="https://riztekno.com/">Kontak</a></li>
            </ul>
        </nav>
    </header>

    <div class="landing-page">
        <div class="landing-content">
            <img src="img/landing_page.jpg" alt="Gambar Landing">
            <h2>Selamat Datang di Website Berita</h2>
            <p>Dapatkan informasi terkini mengenai berita terbaru di seluruh dunia.</p>
            <a href="https://riztekno.com/" class="btn">Lihat Berita</a>
        </div>
    </div>

    <div class="article">
        <article>
            <img src="img/article1.jpg" alt="Gambar Artikel 1">
            <h3>Judul Artikel 1</h3>
            <p>Deskripsi singkat mengenai artikel pertama.</p>
            <a href="https://riztekno.com/" class="btn">Baca Selengkapnya</a>
        </article>
        <article>
            <img src="img/article2.jpg" alt="Gambar Artikel 2">
            <h3>Judul Artikel 2</h3>
            <p>Deskripsi singkat mengenai artikel kedua.</p>
            <a href="https://riztekno.com/" class="btn">Baca Selengkapnya</a>
        </article>
        <article>
            <img src="img/article3.jpg" alt="Gambar Artikel 3">
            <h3>Judul Artikel 3</h3>
            <p>Deskripsi singkat mengenai artikel ketiga.</p>
            <a href="https://riztekno.com/" class="btn">Baca Selengkapnya</a>
        </article>
    </div>
</body>
</html>
 

4. Buat File style.css

Setelah membuat file HTML, sekarang kita perlu membuat file CSS untuk mengatur tata letak dan gaya website berita kita. Buatlah file baru dengan nama “style.css” dalam folder proyek Anda.

Artikel Terkait:   Cara Membuat Menu Vertikal dengan HTML dan CSS

Berikut ini file css yang dapat Anda tambahkan untuk membuat web berita dengan html dan css:

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

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

.logo img {
    width: 50px;
    height: 50px;
}

.website-name {
    flex-grow: 1;
}

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

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

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

.landing-page {
    text-align: center;
    padding: 50px 0;
}

.landing-content {
    max-width: 800px;
    margin: 0 auto;
}

.landing-content img {
    max-width: 100%;
}

.article {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 50px;
}

.article article {
    width: calc(33.333% - 20px);
    margin-bottom: 20px;
    text-align: center;
}

.article article img {
    max-width: 100%;
    border-radius: 5px;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #555;
}
 

5. Mengubah Tampilan Web Berita

Sekarang, Anda dapat mulai mengubah tampilan website berita Anda dengan menambahkan konten HTML dan menggunakan CSS untuk mengatur tata letak dan gaya.

<article>
    <img src="article4.jpg" alt="Gambar Artikel 4">
    <h3>Judul Artikel 4</h3>
    <p>Deskripsi singkat mengenai artikel keempat.</p>
    <a href="#" class="btn">Baca Selengkapnya</a>
</article>
 

Preview hasil

Berikut ini preview hasil web berita dengan html dan css jika Anda berhasil membuatnya:

Penutup

Dengan mengikuti langkah-langkah sederhana yang telah dibahas di atas, Anda sekarang memiliki dasar yang kuat untuk memulai perjalanan Anda dalam pembuatan situs web berita menggunakan HTML dan CSS. Ingatlah untuk terus eksplorasi dan praktek, karena pengalaman adalah kunci untuk menguasai keterampilan ini. Jangan ragu untuk berkreasi dan menyesuaikan desain situs web berita sesuai dengan gaya dan kebutuhan Anda sendiri. Dengan sedikit latihan, Anda akan menjadi ahli dalam menghasilkan konten yang menarik dan menarik bagi pembaca Anda. Selamat mencoba!

Artikel Terkait:   Cara Membuat Search Box dengan HTML dan CSS