Scribd Logo
Unggah

Selamat datang di Scribd!

  • BAB 3-Fatih Daffa Nurma Saputra-205150400111035

    Diunggah oleh

    Fatih Daffa Nurma Saputra
    27 tayangan9 halaman

    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
    27 tayangan9 halaman

    BAB 3-Fatih Daffa Nurma Saputra-205150400111035

    Diunggah oleh

    Fatih Daffa Nurma Saputra

    Hak Cipta:

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

    LATIHAN PRAKTIKUM PEMROGRAMAN WEB

    BAB : HTML & CSS


    NAMA : FATIH DAFFA NURMA S
    NIM : 205150400111035
    ASISTEN : 1. HAFIZH DAFFA SEPTIANTO
    2. RABIATUL AULIAH
    TGL PRAKTIKUM: 4 MARET 2022

    LATIHAN 1
    A. Soal

    Jalankan kode di atas tanpa menggunakan server. Apa yang terjadi? Kemudian hapus
    tag<body>. Amati apa yang terjadi lalu simpulkan.

    B. Screenshot
    C. Syntax

    1 <!DOCTYPE html>
    2 <html lang="en">
    3 <head>
    4 <meta charset="utf-8">
    5 <title>Hello World</title>
    6 </head>
    7 <body>
    8 <h1>Hello World</h1>
    9 <p>Belajar HTML</p>
    10 </body>
    11 </html>

    D. Penjelasan

    Kode pada latihan 1 ketika dijalankan tanpa menggunakan server, akan muncul tulisan
    “Hello World” sebagai judul dan ”Belajar HTML” sebagai kalimat paragraf. Apabila tag
    <body> dihapus, tidak terjadi perubahan apapun pada tampilan HTML ketika dijalankan.
    Jadi, walau tampilan dari HTML tersebut sama, tetapi kode HTML tersebut mungkin
    akan sulit dikenali ketika dibuka browser serta mengurangi dari segi kerapian.

    LATIHAN 2
    A. Soal

    a. Jalankan kode tersebut kemudian amati yang terjadi. Apakah ada perbedaan daripada
    sebelumnya? Beri penjelasan.
    b. Termasuk cara apakah penulisan CSS pada kode di atas?
    c. Ubah cara penulisan CSS ini dalam tipe linked (external) style sheet.

    B. Screenshot
    C. Syntax

    1 <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <style type="text/css">
    h1 {
    color:orange;
    text-align:center;
    }
    p {
    font-family:"Times New Roman";
    font-size:40px;
    }
    </style>
    </head>
    <body>
    <h1>Hello World</h1>
    <p>Belajar HTML<p>
    </body>
    </html>

    D. Penjelasan

    Perbedaan tampilan kode HTML dengan tersebut dengan sebelumnya, yaitu tulisan
    “Hello World” berubah menjadi warna orange dan posisinya menjadi di tengah., serta
    tulisan “Belajar HTML” berubah menjadi ukuran 40px dengan font times new roman.
    Cara penulisan kode CSS pada latiha 2 tersebut dengan cara embedded style sheet.

    LATIHAN 3
    A. Soal

    Tulis kalimat berikut dalam tag <blockquote>:


    I'd volunteer to go to prison, as long as there are books. Because with books I am free.
    Tulis kode CSS berikut di dalam tag <head>. Jalankan kode tersebut dan amati apa yang
    terjadi. Jelaskan apa yang dilakukan oleh kode CSS tersebut.

    B. Screenshot

    C. Syntax

    1 <style>
    blockquote {
    font-size: 24px;
    }
    blockquote::before {
    content: open-quote;
    }
    blockquote::after {
    content: close-quote;
    }
    </style>

    D. Penjelasan

    Ketika kode tersebut dijalankan, akan tampil tulisan “I'd volunteer to go to prison, as long
    as there are books. Because with books I am free.” dengan ada tanda kutip pada tampilan
    di browser.

    LATIHAN 4
    A. Soal

    Ubah kode CSS pada Latihan 3 menjadi seperti berikut. Jalankan kode tersebut dan amati
    apa yang terjadi. Jelaskan apa yang dilakukan oleh kode CSS tersebut.

    B. Screenshot

    C. Syntax

    1 @media screen and (max-width: 2000px) {


    blockquote {
    font-size: 40px;
    color: black;
    }
    }
    @media screen and (max-width: 800px) {
    blockquote {
    font-size: 30px;
    color: gray;
    }
    }
    @media screen and (max-width: 600px) {
    blockquote {
    font-size: 20px;
    color: lightgray;
    }
    }

    D. Penjelasan

    Ketika kode tersebut dijalankan, maka akan tampil tulisan “I'd volunteer to go to prison,
    as long as there are books. Because with books I am free.” Yang memiliki ukuran font
    40px dan warna hitam jika dibuka dengan ukuran tampilan 2000px, ukuran font 30px dan
    warna abu-abu jika dibuka dengan ukuran tampilan 800px, serta ukuran font 20px dan
    warna abu-abu terang jika dibuka dengan ukuran tampilan 600px.

    LATIHAN 5
    A. Soal

    Tag <ol> dan <li> digunakan untuk membuat suatu daftar bernomor (ordered list).
    Atribut type dapat digunakan untuk mengubah tipe nomor, seperti 1, 2, 3; a, b, c; dan
    lain-lain. Tulis daftar riwayat pendidikan Anda dengan ordered list yang diawali dari
    angka 2 dan menggunakan angka Romawi (I, II, III, dst.). Anda boleh berdiskusi dengan
    praktikan yang lain.

    B. Screenshot
    C. Syntax

    1 <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Hello World</title>
    </head>
    <body>
    <h1>Hello World</h1>
    <p>Belajar HTML</p>
    <ol type="I" start="2">
    <li>TK Sukun 1</li>
    <li>SD 1 Gondosari</li>
    <li>SMP 1 Kudus</li>
    <li>SMA 1 Kudus</li>
    <li>Universitas Brawijaya</li>
    </ol>
    </body>
    </html>

    D. Penjelasan

    Menggunakan ordered list romawi dapat digunakan dengan menulis type=”I” di dalam
    tag <ol>. Apabila ordered list dimulai dari nomor 2, maka dapat ditambahkan start=”2”
    setelah penulisan type.

    LATIHAN 6
    A. Soal

    Tag <table> digunakan untuk membuat tabel. Di dalam suatu tabel, dibuat baris-baris,
    dan di dalam suatu baris, dibuat kolom-kolom atau cell-cell. Baris dibuat dengan tag <tr>
    dan kolom/cell dibuat dengan tag <td>. Beberapa cell dapat digabungkan (merge) secara
    vertikal menggunakan atribut rowspan dan secara horizontal menggunakan atribut
    colspan. Dengan beberapa tag dan atribut tersebut, buat tabel seperti di bawah ini. Anda
    boleh berdiskusi dengan praktikan yang lain.
    B. Screenshot

    C. Syntax

    1 <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <link rel="stylesheet" href="Modul 3.css">
    <style type="text/css">
    td{
    text-align: center;
    }
    .Sekolah{
    text-align: left;
    }
    </style>
    </head>
    <body>
    <h1>Hello World</h1>
    <p>Belajar HTML<p>
    <table border="1" cellspacing="0"
    cellpadding="5">
    <tr>
    <th rowspan="2">No.</th>
    <th rowspan="2">Nama
    Sekolah</th>
    <th colspan="2">Tahun</th>
    </tr>
    <tr>
    <th>Masuk</th>
    <th>Lulus</th>
    </tr>
    <tr>
    <td>1.</td>
    <td class="Sekolah">TK Sukun
    1</td>
    <td>2006</td>
    <td>2008</td>
    </tr>
    <tr>
    <td>2.</td>
    <td class="Sekolah">SD 1
    Gondosari</td>
    <td>2008</td>
    <td>2014</td>
    </tr>
    <tr>
    <td>3.</td>
    <td class="Sekolah">SMP 1
    Kudus</td>
    <td>2014</td>
    <td>2017</td>
    </tr>
    <tr>
    <td>4.</td>
    <td class="Sekolah">SMA 1
    Kudus</td>
    <td>2017</td>
    <td>2020</td>
    </tr>
    <tr>
    <td>5.</td>
    <td class="Sekolah">Universitas
    Brawijaya</td>
    <td>2020</td>
    <td>2024</td>
    </tr>
    </table>
    </body>
    </html>

    D. Penjelasan

    Pembuatan tabel dapat dilakukan dengan menggunakan tag <table>. Pada latihan 5,
    terdapat lima enam tujuh baris dan empat kolom. Pada kolom nomor dan nama sekolah
    mencakup dua baris yang mana kita dapat menambahkan atribut rowspan=”2”. Untuk
    tahun, mencakup dua kolom yang mana kita dapat menambahkan atribut colspan=”2”.

    Anda mungkin juga menyukai