Scribd
Unggah
58 tayangan8 halaman

Laprak PDF

Ujian Tengah Semester mencakup soal-soal pengetahuan dasar tentang HTML, CSS, dan pembuatan tabel menggunakan tag-tag dasar HTML. Soal-soal tersebut dijawab dengan memberikan penjelasan konsep dan contoh kode.

Diunggah oleh

Lana Saiful
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
58 tayangan8 halaman

Laprak PDF

Ujian Tengah Semester mencakup soal-soal pengetahuan dasar tentang HTML, CSS, dan pembuatan tabel menggunakan tag-tag dasar HTML. Soal-soal tersebut dijawab dengan memberikan penjelasan konsep dan contoh kode.

Diunggah oleh

Lana Saiful
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 8

Ujian Tengah Semester

“Pemrograman Web 1”

Nama : Lana Saiful Aqil


Kelas : TRPL B
NIM : 20/457264/SV/17711
1. Tuliskan dan jelaskan apa yang anda ketahui tentang istilah-istilah berikut ini, jika
perlu silahkan berikan contoh!
a. HTML
Hypertext Markup Language (HTML) adalah bahasa standar untuk dokumen yang
dirancang untuk ditampilkan di browser internet. HTML men-support CSS dan
Javascript.
b. Tag HTML
Tag adalah sebauh penanda awalan dan akhiran dari sebuah elemen di HTML. Tag
dibuat dengan kurung siku (<nama_tag>), didalam tag bisa ditambahkan atribut.
Contoh: <p>, <a>, <body>, <head>, dan sebagainya.
c. Element HTML
Terdiri atas bagian bagian berikut ini :
- Tag pembuka (atribut, CSS)
- Content
- Tag penutup
Contoh :

d. Atribut HTML
Atribut adalah kata khusus yang berada di dalam tag pembuka. Atribut juga disebut
sebagai modifier yang akan menentukan perliaku dari elemen.
Contoh :
<img src="gambar.jpg" width="100" height="100" />
e. CSS
Cascading Style Sheet merupakan aturan untuk mengatur beberapa komponen dalam
sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan
bahasa pemograman. CSS dapat didalam maupun diluar file html.
Contoh :
<style>
p{
color: blue;
text-weight: bold;
}
<style>
2. Tuliskan dan jelaskan cara penulisan css pada html! Berikan contohnya!
Penulisan CSS ada tiga :
a. Untuk inline CSS
Kita bisa menambahkan style didalam tag, contoh :
<p style=”color: white”>Lorem ipsum</p>
b. Untuk CSS yang berada di dalam file html
Kita cukup menggunakan tag <style>, lalu diikuti dengan content CSS yang
dibutuhkan, lalu terkahir ditutup dengan tag </style>
Biasanya tag style ini diletakkan di bagian <head> dari file html.
Contoh :
<!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>Document</title>
    <style>
        p {
            color : white;
        }
        body {
            background-color: black;
        }
    </style>
</head>
<body>
    <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel e
sse enim odit officiis quisquam blanditiis omnis. Voluptas harum quas p
ossimus?
    </p>
</body>
</html>
c. Untuk CSS yang diluar HTML
Didalam html ditambahkan <link>, seperti contoh berikut :

Kemudian kita buat file baru dan beri nama ppwb1.css


Didalam file itu kita masukkan kode CSS kita.
p {
    color : white;
}
body {
    background-color: black;
}

3. Tuliskan dan jelaskan beberapa tag html yang digunakan untuk membuat sebuat
tabel!
Jika perlu silahkan berikan contohnya.
Ada 4 tag yang dibutuhkan untuk membuat table.
a. <table>. Fungsinya untuk menampilkan table. Supaya border dari table tidak
transparan, maka kita tambahkan atribut border=x, dimana x adalah ketebalan suatu
border.
b. <tr>. Kependekan dari table row, fungsinya adalah untuk menambahkan data pada
tiap tiap row (baris)
c. <th>. Kependekan dari table head. Fungsinya adalah untuk memberikan text-bold
pada data. Biasanya digunakan untuk judul kolom table dan judul baris table.
d. <td>. Kependekan dari table data. Fungsinya adalah untuk menambahkan data pada
suatu table.
<tr>, <th>, dan <td> semuanya berada di <table>. Dan <th> dan <td> semuanya berada
di dalama <tr>.
Contoh :

<table border="5">
        <tr>
            <th>Nama</th>
            <th>Kelas</th>
            <th>NIM</th>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>TRPL C</td>
            <td>20/999999/SV/00000</td>
        </tr>
        <tr>
            <td>Agung Supriyadi</td>
            <td>TRPL C</td>
            <td>19/000000/SV/99999</td>
        </tr>
    </table>

Tampilan pada browser


4. Lampirkan hasil code yang anda buat di dalam lembar jawab anda dalam bentuk
screenshot code beserta tampilan dalam browser !
a. Heading
Code 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>Document</title>
    <style>
        .custom-font {
            color : blue;
            font-weight: bold   ;
        }
    </style>
</head>
<body>
    <h1>Praktikum Pemrograman <span style="color: red;">Web 1.</span></h1>
    <p class="custom-font">Ujian Tengah Semester</p>
</body>
</html>
Tampilan Pada Browser :
b. Form
Code form.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>Document</title>
    <link rel="stylesheet" href="form.css">
</head>
<body>
    <h2>Jika anda memerlukan bantuan, Silahkan hubungi kami</h2>
    <hr>
    <br> <br>
    <h4>Email (Wajib Diisi)</h4>
    <textarea name="email" id="email" cols="30" rows="3"></textarea>
    <br>
    <h4>Pesan (Wajib Diisi)</h4>
    <textarea name="pesan" id="pesan" cols="30" rows="5"></textarea>
    <br>
    <p>*tuliskan kontak yang bisa dihubungi dalam pesan</p>
    <button class="custom-button">Kirim</button>
</body>
</html>

Code CSS :
.custom-button {
    font-size: 16px;
    padding: 10px 100px;
}
Tampilan pada Browser :
c. Table
Code 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>Document</title>
    <link rel="stylesheet" href="table.css">
</head>
<body>
    <table border="4">
        <tr>
            <th colspan=3 class="abu-abu">Provinsi Papua Barat Kabupaten F
akfak</th>
        </tr>
        <tr>
            <td rowspan=3><img src="naruto.jpg" alt="Naruto" width="200"><
/td>
            <td class="putih bg-red">Nama</td>
            <td class="putih bg-red">Uzumaki Naruto</td>
        </tr>
        <tr>
            <td>Tempat/Tgl Lahir</td>
            <td>Sleman, 4 November 2002</td>
        </tr>
        <tr>
            <td>Alamat</td>
            <td class="bg-blue">
                <ul>
                    <li>Werboan Distrik</li>
                    <li>Kec. Fakfak</li>
                    <li>RT: 99</li>
                    <li>RW: XXX</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

Code CSS :
.putih {
    color: white;
}

.abu-abu {
    background-color: cadetblue;
}

.bg-blue {
    background-color: aqua;
}

.bg-red {
    background-color: brown;
}

Tampilan pada browser :

Anda mungkin juga menyukai