BAB 3 - 205150407111026 - Kenneth Clinton Waworuntu

LATIHAN PRAKTIKUM PEMROGRAMAN WEB
BAB : HTML & CSS

NAMA : KENNETH CLINTON WAWORUNTU
NIM : 205150407111026
ASISTEN : 1. NATA NIRWASITA RASENDRIYA
2. NUZULUL ATHAYA
TGL PRAKTIKUM: 28 FEBRUARI 2022
LATIHAN 1
A. Soal
Jalankan kode diatas tanpa menggunakan server. Apa yang terjadi? Kemudian hapus tag
<body>. Amati apa yang terjadi lalu simpulkan.
B. Screenshoot
- Tampilan hasil run menggunakan tag <body> dan tanpa menggunakannya serta tanpa
menggunakan server.
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
Tanpa meggunakan server, kode masih bisa tetap berjalan dan ditampilkan di website
menggunakan chrome. Lalu dengan dihapusnya tag <body> kode masih bisa tetap berjalan
tetapi tidak bisa di konfigurasi seperti mengubah style, memberikan id, dan sebagainya.
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. Screenshoot
C. Syntax
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8" />
6 <style type="text/css">
7 h1 {
8 color: orange;
9 text-align: center;
10 }
11 p {
12 font-family: "Times New Roman";
13 font-size: 40px;
14 }
15 </style>
16 </head>
17 <body>
18 <h1>Hello World</h1>
19 <p>Belajar HTML</p>
20 <p></p>
21 </body>
22 </html>
D. Penjelasan
Perbedaan kode program pada latihan 2 ini dengan latihan 1 adalah adanya tambahan tag
<style> untuk memodifikasi bagian-bagian tertentu di dalam body seperti merubah posisi
text, merubah warna text, merubah jenis tulisan, dan merubah ukuran tulisan. Cara
penulisan CSS pada kode program ini adalah internal CSS atau dikenal dengan embeded
CSS, yang artinya ditulis dalam satu file html. Jika ingin mengubah cara penulisan menjadi
external CSS atau linked maka tinggal memindahkan kode di dalam tag <style> ke file baru
yang berekstensi .css dan menghubungkannya dalam file html contohnya <link
rel="stylesheet" type="text/css" href="index.css" /> index.css merupakan nama file css
yang akan dihubungkan ke file html.
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. Screenshoot
C. Syntax
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 <style>
7 blockquote {
8 font-size: 24px;
9 }
10 blockquote::before {
11 content: open-quote;
12 }
13 blockquote::after {
14 content: close-quote;
15 }
16 </style>
17 </head>
18 <body>
19 <blockquote>
20 I'd volunteer to go to prison, as long
21 as there are books. Because with books I am free.
22 </blockquote>
23 </body>
24 </html>
D. Penjelasan
Kode CSS tersebut mencari tag blockquote dalam tag <body> dan memodifikasi style
tulisannya yaitu ukuran text, lalu memberikan tanda petik pembuka (“) pada awal kalimat
dan tanda petik penutup (”) pada akhir kalimat.
LATIHAN 4
A. Soal
Jalankan kode tersebut dan amati apa yang terjadi. Jelaskan apa yang dilakukan oleh kode
CSS tersebut.
B. Screenshoot
C. Syntax
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 <style>
7 @media screen and (max-width: 2000px) {
8 blockquote {
9 font-size: 40px;
10 color: black;
11 }
12 }
14 blockquote {
15 font-size: 30px;
16 color: gray;
17 }
18 }
20 blockquote {
21 font-size: 20px;
22 color: lightgray;
23 }
24 }
25 </style>
26 </head>
27 <body>
28 <blockquote>
29 I'd volunteer to go to prison, as long
30 as there are books. Because with books I am free.
31 </blockquote>
32 </body>
33 </html>
D. Penjelasan
Kode CSS tersebut memodifikasi style berdasarkan ukuran resolusi page yaitu ukuran
tulisan dan warna tulisan mempunyai batas-batas tertentu, contohnya warna abu-abu muda
dengan ukura tulisan 20 pixel mempunyai batas ukuran lebar chrome yaitu 600 pixel, dan
sebagainya.
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. Screenshoot
C. Syntax
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 </head>
7 <body>
8 <ol type="I" start="2">
9 <li>TK Kristen Eben Haezar Manado</li>
10 <li>SD Kristen Eben Haezar Manado</li>
11 <li>SMP Kristen Eben Haezar Manado</li>
12 <li>SMAN 9 BINSUS Manado</li>
13 <li>Sistem Informasi Universitas
Brawijaya</li>
14 </ol>
15 </body>
16 </html>
D. Penjelasan
Kode program tersebut menampilkan riwayat pendidikan saya dari tk sampai saat ini
menggunakan order list dengan tipe angka romawi dan dimulai dari angka dua.
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. Screenshoot
C. Syntax
• html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 <link rel="stylesheet" type="text/css"
href="index.css" />
7 </head>
8 <body>
9 <table cellspacing="0" cellpadding="10"
border="1">
10 <tr class="warna-muda bold">
11 <td rowspan="2">No.</td>
12 <td rowspan="2">Nama Sekolah</td>
13 <td colspan="2">Tahun</td>
14 </tr>
15 <tr class="warna-tua bold">
16 <td>Masuk</td>
17 <td>Lulus</td>
18 </tr>
19
20 <tr class="warna-muda">
21 <td>1.</td>
22 <td class="left">TK Kristen Eben
Haezar Manado</td>
23 <td>2006</td>
24 <td>2008</td>
25 </tr>
26 <tr class="warna-tua">
27 <td>2.</td>
28 <td class="left">SD Kristen Eben
Haezar Manado</td>
29 <td>2008</td>
30 <td>2014</td>
31 </tr>
33 <td>3.</td>
34 <td class="left">SMP Kristen Eben
Haezar Manado</td>
35 <td>2014</td>
36 <td>2017</td>
37 </tr>
38 <tr class="warna-tua">
39 <td>4.</td>
40 <td class="left">SMAN 9 BINSUS
41 Manado</td>
42 <td>2017</td>
43 <td>2020</td>
44 </tr>
46 <td>5.</td>
<td class="left">Sistem Informasi
47 Universitas Brawijaya</td>
48 <td>2020</td>
49 <td>Sekarang</td>
50 </tr>
51 </table>
52 </body>
</html>
• css
1 body {
2 font-family: "Roboto";
3 text-align: center;
4 }
5
6 .warna-muda {
7 background-color: #9bd7ff;
8 }
9
10 .warna-tua {
11 background-color: #00a2ff;
12 }
13
14 .bold {
15 font-weight: bold;
16 }
17
18 .left {
19 text-align: left;
20 }
D. Penjelasan
Membuat tabel dengan memakai tag-tag pada soal yang diberikan yaitu tag <tr> untuk
membuat baris dan tag <td> untuk membuat kolom, lalu memakai colspan serta rowspan
untuk menggabungkan beberapa kolom serta baris. Setelah itu memodifikasi tabel dengan
menggunakan external css dan pada tag-tag tertentu memberikan nama class agar dapat
dimodifikasi sesuai keinginan.

BAB 3 - 205150407111026 - Kenneth Clinton Waworuntu

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

BAB 3 - 205150407111026 - Kenneth Clinton Waworuntu

Diunggah oleh

Hak Cipta:

Format Tersedia

LATIHAN PRAKTIKUM PEMROGRAMAN WEB

BAB : HTML & CSS

Anda mungkin juga menyukai