Scribd Logo
Unggah

Selamat datang di Scribd!

  • Modul 4

    Diunggah oleh

    Aditya Nugraha
    30 tayangan10 halaman

    Judul Asli

    modul 4

    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

    Hak Cipta:

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

    Modul 4

    Diunggah oleh

    Aditya Nugraha

    Hak Cipta:

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

    LAPORAN PRAKTIKUM

    PEMROGRAMAN WEB
    MODUL 4
    CSS (Cascading Style Sheets)

    ERRAS LINDIARDA MAHENTAR


    3411191102
    D

    PROGRAM STUDI INFORMATIKA


    FAKULTAS SAINS DAN INFORMATIKA
    UNIVERSITAS JENDRAL ACHMAD YANI
    2020
    Pembahasan :

    CSS adalah kependekan dari Cascading Style Sheet, berfungsi untuk

    mempercantik penampilan HTML atau menentukan bagaimana elemen HTML

    ditampilkan, seperti menentukan posisi, merubah warna teks atau background dan lain

    sebagainya. CSS akan membantu para web designer untuk mengubah tampilan teks (baik

    dari bentuk dan ukuran font maupun warnanya), menambahkan gambar, hingga mengubah

    latar belakang sebuah halaman HTML.

    Keberadaan CSS bisa terlihat dengan adanya atribut warna teks. Di sini CSS memberi

    perintah berupa teks berwarna biru melalui tag <span> dengan atribut class=”warna”. Jadi

    setiap tag <span> muncul, teks yang mengikutinya akan berwarna biru. Pun demikian saat

    kamu ingin mengganti warnanya. Tinggal mengganti CSS pada tag <style> dari “blue” ke

    warna lain, maka teks yang awalnya berwarna biru akan berubah warna.

    Latihan
    Latihan 1.
    a. Sorce Code
    <!DOCTYPE html>
    <html>
    <body>
    <hl style="background-color:DodgerBlue;">Hello World</h1>
    <p style="background-color:Tomato;">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit </p>
    </body>
    </html>

    b. Hasil Eksekusi
    c. Analisa

    Terdapat perbedaan dari hasil script pemrograman web sebelumnya. Kali ini,
    background dari tulisannya menimbulkan warna karena pada script tersebut terdapat
    code css selector. Selector adalah elemen/ tag html yang ingin diberi style. Sehingga
    kita bisa mempercantik halaman webnya dengan sesuka hati sesuai keinginan masing-
    masing.

    Latihan 2.
    a. Sorce Code

    <!DOCTYPE html>
    <html>
    <body>
    <hl style="border: 2px solid Tomato;">Hello World</h1>
    <hl style="border: 2px solid DodgerBlue;">Hello World</hl>
    <hl style="border: 2px solid Violet;">Hello World</hl>
    </body>
    </html>

    b. Hasil Eksekusi

    c. Analisa
    latihan ini, terdapat beberapa pilihan warna elemen diatas, serupa tapi tak sama.

    Latihan 3
    a. Sorce code
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    background-color: lightblue;
    }
    </style>
    </head>
    <body>
    <hl>Hello World!</h1>
    <p>This page has a light blue background color!</p>
    </body>
    </html>

    b. Hasil Eksekusi

    c. Analisa
    latihan yang diatas, terdapat pilihan untuk mengubah warna pada background
    nya, dengan contoh background-color:”lightblue” dan lain warna yang dibutuhkan.

    Latihan 4
    a. Sorce code
    <html>
    <head>
    <style>
    div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px; margin: 25px;
    }
    </style>
    </head>
    <body>
    <h2>Demonstrating the Box Model</h2>
    <p>The CSS box model is essentially a box that wraps around every HTML
    element. It consists of: borders, padding, margins, and the actual content.
    </p>
    <div>This text is the actual content of the box. We have added a 25px
    padding</div>
    </body>
    </html>

    b. Hasil Eksekusi

    c. Analisa
    latihan diatas ini, adalah contoh menggunakan code css div pada tag html. Terdapat 2
    box berwarna beda karena tag htmlnya pun berbeda. Pada box warna hijau
    menggunakan script : <h2>Demonstrating the Box Model</h2>
    <p>The CSS box model essentilly a box that wraps around every HTML
    element. it consists of: borders, padding, margins, and the actual content.
    </p>
    sedangkan pada box berwarna abu menggunakan script : <div>This text is the actual
    content of the box. we have added a 25px padding</div>

    Latihan 5
    a. Sorce code
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    table {
    border-collapse: collapse;
    width: 100%;
    }
    th, th {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid rgb(231, 80, 80);
    }
    tr:hover {background-color: #ce2398;}
    </style>
    </head>
    <body>
    <h2>NAMA KARAKTER ANIME</h2>

    <table border="2" width="50%" align="center">


    <tr>
    <th>Nomer</th>
    <th>Nama Anime</th>
    <th>Judul Anime</th>
    </tr>
    <tr>
    <th>1</th>
    <th>Naruto</th>
    <th>Naruto series</th>
    </tr>
    <tr>
    <th>2</th>
    <th>cebol</th>
    <th>black clover</th>
    </tr>
    <tr>
    <th>3</th>
    <th>Monkey D Luffy</th>
    <th>One Piece</th>
    </tr>
    <tr>
    <th>4</th>
    <th>kang sate</th>
    <th>Nanatsu No Taizai</th>
    </tr>
    <tr>
    <th>5</th>
    <th>Botak</th>
    <th>One Punch Man</th>
    </tr>
    <tr>
    <th>6</th>
    <th>Kiritod</th>
    <th>sword art online</th>
    </tr>
    </table>
    </body>
    </html>
    b. Hasil Eksekusi

    c. Analisa
    latihan diatas, melengkapi css dengan membentuk sebuah table.

    Latihan 6
    a. Sorce code
    <!DOCTYPE html>
    <html>
    <style>
    input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    }
    input[type=submit]{
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    }
    input[ype=submit]:hover {
    background-color: #45a049;
    }
    div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    }
    </style>
    <body>
    <h3>CSS Untuk style sebuah HTML form</h3>

    <div>
    <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your n
    ame..">

    <label for="lname">Last Name</label>


    <input type="text" id="lname" name="lasname" placeholder="Your las
    t name..">

    <label for="country">Country</label>
    <select id="country" name="country">
    <option value="Indonesia">Indonesia</option>
    <option value="Japan">Japan</option>
    <option value="Rusia">Rusia</option>
    </select>

    <input type="submit" value="Submit">


    </form>
    </div>
    </body>
    </html>

    b. Hasil Eksekusi
    TUGAS PRAKTIKUM
    a. Sorce code
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    table{
    width: 100%;
    height: 640px;
    text-align: center;
    }
    </style>
    </head>
    <body>
    <table>
    <tr height="10%">
    <td></td>
    <td>Header</td>
    <td></td>
    </tr>
    <tr height="10%">
    <td></td>
    <td>Navigation Menu</td>
    <td></td>
    </tr>
    <tr height="70%">
    <td>Content</td>
    <td>MainContent</td>
    <td>Content</td>
    </tr>
    <tr height="10%">
    <td></td>
    <td>footer</td>
    <td></td>
    </tr>
    </table>
    </body>
    </html>
    b. Hasil Eksekusi

    Anda mungkin juga menyukai