Scribd Logo
Unggah

Selamat datang di Scribd!

  • LAYOUT-WEBSITE-CSS

    Diunggah oleh

    Bondan Prakoso
    35 tayangan10 halaman
    Dokumen tersebut merupakan laporan praktikum pemrograman web client pada pertemuan ke-4 yang membahas tentang layout website dengan CSS. Pada praktikum tersebut dilakukan modifikasi file CSS untuk menambahkan border pada div dan menambahkan kolom baru di sebelah kanan pengumuman.

    Deskripsi Asli:

    Judul Asli

    205410129 Kharisma Satria Nindhita P4

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Dokumen tersebut merupakan laporan praktikum pemrograman web client pada pertemuan ke-4 yang membahas tentang layout website dengan CSS. Pada praktikum tersebut dilakukan modifikasi file CSS untuk menambahkan border pada div dan menambahkan kolom baru di sebelah kanan pengumuman.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    35 tayangan10 halaman

    LAYOUT-WEBSITE-CSS

    Diunggah oleh

    Bondan Prakoso
    Dokumen tersebut merupakan laporan praktikum pemrograman web client pada pertemuan ke-4 yang membahas tentang layout website dengan CSS. Pada praktikum tersebut dilakukan modifikasi file CSS untuk menambahkan border pada div dan menambahkan kolom baru di sebelah kanan pengumuman.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 10

    LAPORAN PRAKTIKUM

    PRAKTIKUM PEMROGRAMAN WEB CLIENT

    PERTEMUAN KE – 4

    Disusun Oleh :

    NAMA : Kharisma Satria Nindhita

    NIM : 205410129

    JURUSAN : TEKNIK INFORMATIKA

    JENJANG : S1

    LaboratoriumTerpadu

    Sekolah Tinggi Management Informatika Komputer

    AKAKOM

    YOGYAKARTA

    2020
    PERTEMUAN KE – 4

    (LAYOUT WEBSITE DENGAN CSS)

    PRAKTIK

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

    <head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    </head>

    <body>
    <div class="header">
    <h1>STMIK AKAKKOM</h1>
    </div>

    <div class="topnav">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    </div>
    <div class="row">
    <div class="column side">
    <h2>Left side</h2>
    <h2>Visi</h2>
    <p>
    Menjadi perguguruan tinggi teknologi informasi,
    dan komunikasi yang bersifat adaptif, berwawasan global,
    dan berlandaskan nilai-nilai luhur budaya bangsa </p>
    </div>
    <div class="column middle">
    <h2>Main content</h2>
    <h4> Jenjang program studi</h4>
    <ol type="1">
    <li>S2</li>
    <li>S1</li>
    <li>D2</li>
    </ol>
    </div>
    <div class="column side">
    <h2>Right Side</h2>
    <h2>PENGUMUMAN</h2>
    <p>Pendafteran workshop web client, dilakukan melalui HMJ</p>
    </div>
    </div>

    <div class="footer">
    <p>Footer</p>
    <p>STMIK AKAKOM</p>
    <P>Jl. Raya Janti Karang Jambe no. 143 yogyakarata 55198, Indonesia </P>
    </div>
    </body>

    </html>

    Css
    * {
    box-sizing: border-box;
    }

    body {
    margin: 0;
    }

    .header {
    background-color: #f1f1f1;
    padding: 20px;
    text-align: center;
    }

    .topnav {
    overflow: hidden;
    background-color: #333;
    }

    .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }
    .topnav a:hover {
    background-color: #ddd;
    color: black;
    }

    .column {
    float: left;
    padding: 10px;
    }

    .column.side {
    width: 25%;
    }

    .column.middle {
    width: auto;
    }

    .row:after {
    content: "";
    display: table;
    clear: both;
    }

    @media Sceeen and (max-width: 600px) {

    .columnside,
    .columnmiddle {
    width: 100%;
    }
    }

    .footer {
    background-color: #f1f1f1;
    padding: 10px;
    text-align: center;
    }
    Latihan

    1. Modifikasi file CSS sehingga terlihat border-nya. coba dengan 3 jenis border yang
    berbeda-beda.

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

    <head>
    <title>Document</title>
    <style>
    body {
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
    background-color: aliceblue;
    }

    .satu {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: rgb(58, 255, 58);
    border-style: dashed;
    margin-top: 200px;
    }

    .dua {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: rgb(228, 57, 57);
    border-style: dotted dashed solid double;
    margin-top: 200px;
    }

    .tiga {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: rgb(0, 204, 255);
    border-style: outset;
    border-color: red;
    margin-top: 200px;
    }
    </style>
    </head>

    <body>
    <img src="GOJO.jpg" alt="">
    <div class="satu"></div>
    <div class="dua"></div>
    <div class="tiga"></div>
    </body>

    </html>
    2. Tambahkan sebuah kolom (side) disebelah kanan pengumuman, atur sehingga tampilan
    tetap proporsional.

    HTML

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

    <head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    </head>

    <body>
    <div class="header">
    <h1>STMIK AKAKKOM</h1>
    </div>

    <div class="topnav">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    </div>
    <div class="row">
    <div class="column side">
    <h2>Left side</h2>
    <h2>Visi</h2>
    <p>
    Menjadi perguguruan tinggi teknologi informasi,
    dan komunikasi yang bersifat adaptif, berwawasan global,
    dan berlandaskan nilai-nilai luhur budaya bangsa </p>
    </div>
    <div class="column middle">
    <h2>Main content</h2>
    <h4> Jenjang program studi</h4>
    <ol type="1">
    <li>S2</li>
    <li>S1</li>
    <li>D2</li>
    </ol>
    </div>
    <div class="column middle">
    <h2>Main content</h2>
    <h2>PENGUMUMAN</h2>
    <p>Pendafteran workshop web client,
    dilakukan melalui HMJ</p>
    </div>
    <div class="column side">
    <h2>Right Side</h2>
    <h2>TUTOTITTK</h2>
    <p>Pendafteran workshop web client, dilakukan melalui HMJ</p>
    </div>
    </div>

    <div class="footer">
    <p>Footer</p>
    <p>STMIK AKAKOM</p>
    <P>Jl. Raya Janti Karang Jambe no. 143 yogyakarata 55198, Indonesia </P>
    </div>
    </body>

    </html>

    CSS

    * {
    box-sizing: border-box;
    }

    body {
    margin: 0;
    }

    .header {
    background-color: #f1f1f1;
    padding: 20px;
    text-align: center;
    }

    .topnav {
    overflow: hidden;
    background-color: #333;
    }

    .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }

    .topnav a:hover {
    background-color: #ddd;
    color: black;
    }

    .column {
    float: left;
    padding: 10px;
    border-style: solid;
    }

    .column.side {
    width: 25%;
    }

    .column.middle {
    width: 25%;
    }

    .row:after {
    content: " ";
    display: table;
    clear: both;
    }

    @media Sceeen and (max-width: 600px) {

    .columnside,
    .columnmiddle {
    width: 100%;
    }
    }

    .footer {
    background-color: #f1f1f1;
    padding: 10px;
    text-align: center;
    }

    Anda mungkin juga menyukai