Scribd
Unggah
15 tayangan16 halaman

Rfref

Dokumen tersebut merupakan laporan praktikum HTML yang berisi 6 latihan penulisan kode HTML dan CSS. Latihan-latihan tersebut meliputi penulisan tag dasar HTML, penambahan gaya tampilan menggunakan CSS internal dan eksternal, penggunaan media query, serta penulisan list dan tabel. [/ringkasan]

Diunggah oleh

Dimas Fiebry Prayhoga Putra
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 PDF, TXT atau baca online di Scribd
15 tayangan16 halaman

Rfref

Dokumen tersebut merupakan laporan praktikum HTML yang berisi 6 latihan penulisan kode HTML dan CSS. Latihan-latihan tersebut meliputi penulisan tag dasar HTML, penambahan gaya tampilan menggunakan CSS internal dan eksternal, penggunaan media query, serta penulisan list dan tabel. [/ringkasan]

Diunggah oleh

Dimas Fiebry Prayhoga Putra
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 PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 16

NAMA : Dimas Fiebry Prayhoga Putra

NIM : 225150600111002
KELAS : PWTI - A
BAB :2
ASISTEN : 1. Agustinus Parasian Tampubolon
2. Muhammad Dhzuhri Agistian

1. Langkah-Langkah Praktikum
Latihan 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>
</body>
</html>

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

Latihan 2

<!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;
}

Laporan Praktikum Sistem Operasi PTI 1


</style>
</head>
<body>
<h1>Hello World</h1>
<p>Belajar HTML<p>
</body>
</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.

Latihan 3

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>.

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

Jalankan kode tersebut dan amati apa yang terjadi. Jelaskan apa yang dilakukan oleh kode
CSS tersebut.

Latihan 4

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

Laporan Praktikum Sistem Operasi PTI 2


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;
}
}

Jalankan kode tersebut dan amati apa yang terjadi. Jelaskan apa yang dilakukan oleh kode
CSS tersebut.

Latihan 5
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.

Latihan 6
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.

Laporan Praktikum Sistem Operasi PTI 3


2. Pembahasan Tugas
Latihan 1
Di source code saya, saya tambahkan komen keterangan “ini dengan tag body” sebagai
penanda ketika nanti saya inspect

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>

<h1>Hello World</h1>
<p>Belajar HTML</p>

<!-- Ini dengan tag body -->


</body>

</html>

Laporan Praktikum Sistem Operasi PTI 4


Kemudian akan saya hapus tag body, dan melihat perubahannya

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>

<h1>Hello World</h1>
<p>Belajar HTML</p>

<!-- Ini tanpa tag body -->

</html>

Laporan Praktikum Sistem Operasi PTI 5


Setelah saya amati dan cari tahu, ketika saya menjalankan kode tanpa tag <body>, browser
akan mencoba memperbaiki struktur HTML dengan menambahkan tag <body> secara
otomatis. Dalam kasus ini, browser akan menampilkan konten "Hello World" dan "Belajar
HTML" seperti sebelumnya, karena kebanyakan browser modern akan mencoba untuk
memperbaiki kesalahan struktur HTML semaksimal mungkin. Namun, hasilnya dapat
bervariasi tergantung pada browser yang digunakan.

Latihan 2

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Hello World</title>
<style type="text/css">
h1 {

Laporan Praktikum Sistem Operasi PTI 6


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>

Jika saya menjalankan kode tersebut, saya akan melihat perubahan tampilan dari kode
sebelumnya. Sekarang, teks "Hello World" akan ditampilkan dalam warna orange dan
penulisannya rata tengah, sedangkan teks "Belajar HTML" akan ditampilkan dalam font
Times New Roman dan berukuran 40px.

a. Perbedaan dari kode sebelumnya adalah penggunaan CSS internal di bagian head
dokumen HTML, yang didefinisikan dengan tag <style> di dalam tag <head> untuk
menentukan gaya (style) elemen HTML secara internal dalam dokumen yang sama.

b. Cara penulisan CSS pada kode di atas adalah dengan menggunakan gaya internal atau
Embedded Style Sheet. Ini berarti gaya CSS ditulis langsung di dalam dokumen
HTML yang sama, di antara tag <style> </style> di dalam tag <head>.

c. Ini adalah dokumen HTML dan CSSnya

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<h1>Hello World</h1>
<p>Belajar HTML</p>
</body>

Laporan Praktikum Sistem Operasi PTI 7


</html>

h1 {
color: orange;
text-align: center;
}

p {
font-family: "Times New Roman";
font-size: 40px;
}

Latihan 3

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="style.css">

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

<body>
<h1>Hello World</h1>
<p>Belajar HTML</p>
<blockquote>I'd volunteer to go to prison, as long as there are books.
Because with books I am free.</blockquote>
</body>

</html>

Laporan Praktikum Sistem Operasi PTI 8


Dalam source code ini, kalimat yang diberikan saya masukkan ke dalam tag <blockquote>,
dan CSS internal untuk menentukan gaya blok kutipan ditulis dalam tag <style> di dalam tag
<head>. CSS tersebut mengatur ukuran font blok kutipan serta menambahkan tanda kutip
buka dan tutup setelah teks.

Latihan 4

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="style.css">

<style>
@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;
}
}
</style>
</head>

<body>
<h1>Hello World</h1>

Laporan Praktikum Sistem Operasi PTI 9


<p>Belajar HTML</p>
<blockquote>I'd volunteer to go to prison, as long as there are books.
Because with books I am free.</blockquote>
</body>

</html>

Kode CSS yang diberikan menggunakan media queries untuk mengubah gaya blok kutipan
(<blockquote>) berdasarkan lebar layar pengguna atau device yang digunakan. Pada lebar
layar yang lebih besar, ukuran font lebih besar (40px) dan warna teksnya adalah hitam. Ketika
lebar layar mengecil menjadi 800px, ukuran font berkurang (30px) dan warna teks menjadi
abu-abu. Saat lebar layar mencapai 600px, ukuran font lebih kecil lagi (20px) dan warna teks
menjadi abu-abu muda. Ini memastikan tampilan yang responsif pada berbagai perangkat
dengan ukuran layar yang berbeda.

Laporan Praktikum Sistem Operasi PTI 10


Laporan Praktikum Sistem Operasi PTI 11
Latihan 5

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<ol type="I" start="2">

<li>Sekolah Menengah Pertama</li>

<li>Sekolah Menengah Atas</li>

<li>Sarjana S-1</li>

<li>Program Pascasarjana</li>

</ol>

</body>

</html>

Laporan Praktikum Sistem Operasi PTI 12


Latihan 6

<!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>
body {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
sans-serif;
}

table {
border-collapse: collapse;
}

table {
width: 50%;
}

Laporan Praktikum Sistem Operasi PTI 13


td,
th {

border: 1.6px solid #c96599;


padding: 4px;
}

.aa {
text-align: center;
}

.a {
background-color: #f2e6ea;
}

.bb {
background-color: #f2e6ea;
}

.b {
background-color: #e3cad2;
}

.c {
text-align: center;
}
</style>
</head>

<body>
<table>
<thead>
<tr class="a">
<th class="aa" rowspan="2"><b>No</b></th>
<th class="aa" rowspan="2"><b>Nama Sekolah</b></th>
<th class="aa" colspan="2"><b>Tahun</b></th>
</tr>
<tr class="b">
<th class="c"><b>Masuk</b></th>
<th class="c"><b>Lulus</b></th>
</tr>
</thead>

Laporan Praktikum Sistem Operasi PTI 14


<tr class="bb">
<td class="aa">1.</td>
<td>Nama TK</td>
<td></td>
<td></td>
</tr>
<tr class="b">
<td class="aa">2.</td>
<td>Nama SD</td>
<td></td>
<td></td>
</tr>
<tr class="bb">
<td class="aa">3.</td>
<td>Nama SMP</td>
<td></td>
<td></td>
</tr>
<tr class="b">
<td class="aa">4.</td>
<td>Nama SMA</td>
<td></td>
<td></td>
</tr>
<tr class="bb">
<td class="aa">5.</td>
<td>Nama Perguruan Tinggi</td>
<td></td>
<td></td>
</tr>
</table>
</body>

</html>

<!-- SourceCode Ori Dimas -->

Laporan Praktikum Sistem Operasi PTI 15


Laporan Praktikum Sistem Operasi PTI 16

Anda mungkin juga menyukai