Laporan1 - 195150200111005 - Zidane El Faruqi

LATIHAN PRAKTIKUM PEMROGRAMAN WEB
BAB : HTML & CSS

NAMA : ZIDANE EL FARUQI
NIM : 195150200111005
ASISTEN : 1. KRESNA HAFIZH MUHAIMIN
2. FERRY ARDIANTO RISMAWAN
TGL PRAKTIKUM: 1 MARET 2021
LATIHAN 1
A. Soal
Tulis kode di bawah ini.
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>
Jalankan kode di atas tanpa menggunakan server. Apa yang terjadi? Kemudian
hapus tag <body>, Amati apa yang terjadi lalu simpulkan
B. Screenshoot
Screenshoot saat tag <body> dihapus
C. Syntax
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 </head>
9 </html>
D. Penjelasan
Saat kode program yang ada di soal dijalankan, maka akan muncul “Hello World”
dan “Belajar HTML” yang dimana tulisan “Hello World” sebagai judul. Dan saat
kita menghapus tag <body> tidak akan terjadi apa apa karena pada HTML
diperbolehkan tidak menggunakan tag <body>.
LATIHAN 2
A. Soal
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
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>
19 <p>Belajar HTML<p>
20 </body>
21 </html>
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
Pert1.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 <link rel ="stylesheet" href="style.css">
7 </head>
8 <body>
11 </body>
12 </html>
style.css
1 h1 {
2 color:orange;
3 text-align:center;
4 }
5
6 p {
7 font-family:"Times New Roman";
8 font-size:40px;
9 }
D. Penjelasan
a. Saat kode program dijalankan maka akan menghasilkan perububahan warna
dan posisi pada tulisan “Hello World” yang menjadi orange dan berposisi di
tengah (Center)
b. Penulisan CSS pada kode diatas menggunakan metode Inline yaitu
penulisan langsung file css yang dituliskan didalam tag<head>
c. Sesuai soal, untuk melakukan penulisan CSS dengan tipe linked saya
menggunakan syntax <link rel ="stylesheet" href="style.css"> sesuai
dengan nama file css yang telah dibuat di tempat yang berbeda dengan file
html-nya.
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>.
1 <style>
2 blockquote {
3 font-size: 24px;
4 }
5
6 blockquote::before {
7 content: open-quote;
8 }
9
10 blockquote::after {
11 content: close-quote;
12 }
13 </style>
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
13 }
14
17 }
18 </style>
19
20 </head>
21 <body>
22 <blockquote>I'd volunteer to go to prison, as long
23 as there are books.
24 Because with books
25 I am free.</blockquote>
26 </body>
27 </html>
D. Penjelasan
Tag <blockquote> yang ada pada soal latihan 3 ini mempunyai fungsi untuk
memberikan tanda kutip pada text. Penggunan tag ini biasanya digunakan untuk
penegasan penting pada kutipan yang akan ditulis dan ditampilkan sebagai penanda
dan pembeda pada kalimat tersebut.
LATIHAN 4
A. Soal
Ubah kode CSS pada Latihan 3 menjadi seperti berikut
1 @media screen and (max-width: 2000px) {

2 blockquote {
3 font-size: 40px;
4 color: black;
5 }
6 }
7
9 blockquote {
10 font-size: 30px;
11 color: gray;
12 }
13 }
14
16 blockquote {
17 font-size: 20px;
18 color: lightgray;
19 }
20 }
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>
8 blockquote {
9 font-size: 40px;
10 color: black;
11 }
12 }
13
15 blockquote {
16 font-size: 30px;
17 color: gray;
18 }
19 }
20
22 blockquote {
23 font-size: 20px;
24 color: lightgray;
25 }
26 }
27
28
31 }
32
35 }
36 </style>
37 </head>
38 <body>
39 <blockquote>I'd volunteer to go to prison, as long
40 as there are books.
41 Because with books
42 I am free.</blockquote>
43 </body>
44 </html>
D. Penjelasan
Hasil tampilan yang muncul ialah tulisan “I'd volunteer to go to prison, as long there
are books. Because with books I am free.” Tulisan tersebut akan berubah warnanya
sesuai dengan kondisi layar. Jika dibukan dengan kondisi layar dibawah 2000px
akan bewarna hitam, 800px akan bewarna abu abu, dan 200px akan bewarna
lightgrey yang bisa dilihat di bagian screenshoot.
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 <h1>Riwayat Pendidikan Zidane El Faruqi</h1>
9 <ol type="I" start =2>
10 <li>TK Hang Tuah 2(2005-2007)</li>
11 <li>SDN 07 SEMPER TIMUR 07 PAGI(2007-2013)</li>
12 <li>MTSN 05 JAKARTA UTARA(2013-2016)</li>
13 <li>SMAN 52 JAKARTA UTARA(2016-2019)</li>
14 <li>Universitas Brawijaya(2019-Sekarang)</li>
15 </ol>
16 </body>
17 </html>
D. Penjelasan
Pada soal ini kita diberitahu untuk memakai tag <ol> dan <li> yang berfungsi
sebagai order list. Pada perintah soal nomor 5 ini diperintahkan untuk menggunakan
tipe romawi dan dimulai dari nomor II. Maka, sintaks yang digunakan adalah
type=”I” dan untuk memulai dari nomor II menggunakan start=2”.
LATIHAN 6
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>
5 <title>Zidane El Faruqi</title>
6 <style>
7 .table-design{
8 background-color: #FFFACD
9
10 }
11 .header-Lulus{
12 background-color: #FFA07A
13 }
14 .header-Masuk{
16 }
17 .baris-2{
20 }
21 .baris-4{
23 }
24 </style>
25 </head>
26 <body>
27 <table class="table-design" border="1" cellspacing
28 = "1" cellpadding = "1">
29 <thead>
30 <tr>
31 <th rowspan="2">No.</th>
32 <th rowspan="2">Nama Sekolah</th>
33
34 <th colspan="2">Tahun Lulus</th>
35 </tr>
36 <tr>
37 <th class="header-Lulus">Masuk</th>
38 <th class="header-Masuk">Lulus</th>
39 </tr>
40 </thead>
41 <tbody>
42 <tr>
43 <th>1.</th>
44 <td>TK Hang Tuah 2</td>
45 <td>2005</td>
46 <td>2007</td>
47 </tr>
48 <tr class="baris-2">
49 <th>2.</th>
50 <td>SDN 07 SEMPER TIMUR 07 PAGI</td>
51 <td>2007</td>
52 <td>2013</td>
53 </tr>
54 <tr>
55 <th>3.</th>
56 <td>MTSN 05 JAKARTA UTARA</td>
57 <td>2013</td>
58 <td>2016</td>
59 </tr>
60 <tr class="baris-4">
61 <th>4.</th>
62 <td>SMAN 52 JAKARTA UTARA</td>
63 <td>2016</td>
64 <td>2019</td>
65 </tr>
66 <tr>
67 <th>5.</th>
68 <td>Universitas Brawijaya</td>
69 <td>2019</td>
70 <td>2023</td>
71 </tr>
72 </tbody>
73
74 </body>
75 </html>
D. Penjelasan
Untuk membuat tabel pada html, kita dapat menggunakan tag <table> dan untuk
membuat barisnya bisa menggunakan tag <tr> lalu untuk membuat kolom dapat
menggunakan tag <td> dan untuk menggabungkan barisnya kita dapat memakai tag
<rowspan> dan untuk menggabungkan kolom dapat menggunakan tag <colspan>.
Untuk isi tabelnya, masukkan riwayat pendidikan seperti pada Latihan soal 5.

Laporan1 - 195150200111005 - Zidane El Faruqi

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

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

Laporan1 - 195150200111005 - Zidane El Faruqi

Diunggah oleh

Hak Cipta:

Format Tersedia

LATIHAN PRAKTIKUM PEMROGRAMAN WEB

BAB : HTML & CSS

b. Termasuk cara apakah penulisan CSS pada kode di atas?

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

Anda mungkin juga menyukai