Tugas Pemrograman Web -2

-

 TUGAS PEMROGRAMAN WEB C KE 2

MEMBUAT WEBSITE BERITA

Berikut Source Code:

1. index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Latihan 1</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="header">
        <div class="jarak">
            <center>
                <h2>BERITA HARIAN TERBARU!!</h2>
            </center>
        </div>
    </div>
    <div class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <div class="content">
        <div class="jarak">
            <!-- untuk ke kiri -->
            <div class="kiri">
                <!-- untuk blog -->

                <div class="border">
                    <div class="jarak">
                        <h3>Hadapi Liverpool, Napoli Mesti Galang Pertahanan Kukuh!</h3>
                        <p>Jakarta - Napoli diselimuti kepercayaan diri tinggi menjelang duel dengan Liverpool di Liga Champions. Partenopei harus menggalang pertahanan kukuh agar bisa menang. Baca artikel sepakbola, "Hadapi Liverpool, Napoli Mesti Galang
                            Pertahanan Kukuh!"
                        </p>
                        <button class="btn"> <a href="https://sport.detik.com/sepakbola/uefa/d-6277747/hadapi-liverpool-napoli-mesti-galang-pertahanan-kukuh">Read More....</a></button>
                    </div>
                </div>
                <!-- end blog -->
                <div class="border">
                    <div class="jarak">
                        <h3>US Open 2022: Kyrgios Singkirkan Medvedev</h3>
                        <p>New York - Petenis Australia Nick Kyrgios lolos ke perempatfinal US Open 2022 usai menyingkirkan juara bertahan Daniil Medvedev. Hasil itu sekaligus membuat Medvedev kehilangan peringkat 1 dunia.
                        </p>
                        <button class="btn"><a href="https://sport.detik.com/raket/d-6273090/us-open-2022-kyrgios-singkirkan-medvedev">Read More....</a></button>
                    </div>
                </div>
            </div>

            <div class="kanan">
                <div class="jarak">
                    <h3>CATEGORY</h3>
                    <P><a href="https://sport.detik.com/sepakbola/uefa/d-6277747/hadapi-liverpool-napoli-mesti-galang-pertahanan-kukuh" class="undercolor">OLAHRAGA</a></P>
                    <P><a href="#" class="undercolor">PENDIDIKAN</a></P>
                    <P><a href="#" class="undercolor">HIBURAN</a></P>
                    <P><a href="#" class="undercolor">MUSIK</a></P>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="jarak">
            <p>Copyright ~RandomEasy</p>
        </div>
    </div>
</body>

</html>

2. style.css

body {
    background: #f3f3f3;
    width: 100%;
    color: #333;
    font-family: sans-serif;
    margin: 0 auto;
}

.header {
    width: 90%;
    margin: auto;
    height: 120px;
    line-height: 120px;
    background: #41a85f;
    color: #fff;
}

.content {
    width: 90%;
    margin: auto;
    height: 420px;
    padding: 0.1px;
    background: #fff;
    color: #333;
}

.kiri {
    width: 70%;
    float: left;
    margin: auto;
    background: #fff;
    height: 420px;
}

.kanan {
    width: 30%;
    float: left;
    margin: auto;
    background: #fff;
    height: 420px;
}

.border {
    border: 2px solid #74c599;
    margin-top: 1pc;
    padding-bottom: 1pc;
    padding-left: 2pc;
    padding-right: 2pc;
}

.undercolor {
    text-decoration: none;
}

.footer {
    width: 90%;
    margin: auto;
    height: 40px;
    line-height: 30px;
    background: #41a85f;
    color: #fff;
}

.menu {
    background-color: #53bd84;
    width: 90%;
    margin: 0 auto;
    height: 50px;
    padding: 0 auto;
    line-height: 50px;
    position: relative;
}

.jarak {
    padding: 0 2pc;
}

.menu ul {
    list-style: none;
}

.menu ul li a {
    float: left;
    width: 70px;
    display: block;
    text-align: center;
    color: #fff;
    text-decoration: none;
}

.menu ul li a:hover {
    background-color: #121312;
    display: block;
}


3. Dokumentasi



Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 6 - Pemrograman Perangkat Bergerak

-
  Hesekiel Nainggolan 5025201054 PPB I Pada kesempatan kali ini, kita akan membuat Kalkulator  Sederhana dengan fitur operasi sederhana pertambahan, pengurangan, perkalian, dan pembagian.  1. Membuat Variabel Inputan Pertama kita akan membuat suatu variabel inputan, dimana akan menampung inputan dari angka yang akan kita masukkan. Jadi bakalan ada 2 variabel. Satu variabel untuk menginputkan angka, dan satu lagi untuk hasil dari operasi yang dilakukan. 2. Membuat TextField untuk Inputan angka Kita butuh sebuah textfield untuk memasukkan sebuah angka untuk operasi perhitungan yang akan dilakukan 3. Membuat Button untuk fitur operasi angka. Kemudian kita akan membuat button serta logic dari operasi perhitungan yang akan dibuat.  Hasil
Baca selengkapnya

TUGAS PWEB-C MINGGU KE-1 (MEMBUAT CV HTML)

-
Gambar
TUGAS PWEB-C MINGGU KE-1 (MEMBUAT CV HTML) Pada minggu pertama pemrograman web kelas C, ditugaskan membuat CV menggunakan HTML . Link Repository :  https://github.com/kielnaingggolan07/Portofolio.github.io Link Web : https://kielnaingggolan07.github.io/Portofolio.github.io Link Referensi :   https://bagusistighfar.blogspot.com/2021/09/tugas-pweb-d-minggu-ke-2-membuat-cv-html.html Berikut penjelasan mengenai file yang saya buat: 1. index.html Pada file ini menyimpan mengenai informasi mengenai biodata saya. <! DOCTYPE html >     < html lang = "en" >     < head >       < meta charset = "UTF-8" >       < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >       < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >       < title > My CV </ title >       < link rel = "stylesheet" href = "style....
Baca selengkapnya

Tugas 10 - Pemrograman Perangkat Bergerak

-
Gambar
Hesekiel Nainggolan 5025201054 PPB I  Dessert Clicker Pada pertemuan kali ini, kita akan membuat aplikasi dessert clicker. Apa itu aplikasi dessert clicker?. Jadi di Dessert Clicker, setiap kali pengguna mengetuk makanan penutup di layar, aplikasi akan " membeli " makanan penutup untuk pengguna. Aplikasi mengupdate nilai dalam tata letak untuk: Jumlah makanan penutup yang " dibeli " Total pendapatan untuk makanan penutup " yang dibeli " Untuk membuat aplikasi dessert clicker, kita akan menggunakan code yang sudah ada di  Github . Untuk membuat dessert clicker sendiri, ada beberapa tahapan yang akan kita lakukan: 1. Membuat New Project Sama seperti langkah-langkah pada pertemuan sebelumnya, hal yang pertama sekali kita lakukan adalah membuat new project dengan penamaan bebas sesuai dengan keingingina kita. Kita juga bisa menggunakan import project dengan link Github diatas. 2. Mempelajari Metode Siklus Proses dan Menambahkan Logging Dasar Kita pasti pernah ...
Baca selengkapnya