Laprak Mutiara Permata Putri 24060121140154 css

(1)

CSS

LAPORAN PRAKTIKUM

Disusun untuk Memenuhi Tugas Praktikum pada Mata Kuliah Dasar Sistem Semester Satu

Disusun Oleh:

Mutiara Permata Putri (24060121140154)

PROGRAM STUDI S-1 INFORMATIKA LAB B2 DEPARTEMEN INFORMATIKA

FAKULTAS SAINS DAN MATEMATIKA UNIVERSITAS DIPONEGORO

SEMARANG

2021

(2)

BAB I PENDAHULUAN A. Rumusan Masalah

1. Bagaimana hasil yang didapat ketika ditambahkan kode css pada file paragraf.html sesuai dengan kreativitas Anda?

2. Bagaimana hasil yang didapat ketika ditambahkan kode css pada elemen .box sesuai dengan kreativitas Anda?

3. Bagaimana hasil yang didapat ketika ditambahkan kode css pada elemen .box sesuai dengan ketentuan yang telah diberikan?

4. Bagaimana hasil yang didapat ketika atribut class=”box” diubah menjadi id=”box1”, id=”box2”, id=”box3”, dan id=”box4” dan diberikan kode css sesuai dengan kreativitas Anda?

5. Bagaimana hasil yang didapat ketika ditambahkan kode css pada link.html sesuai dengan ketentuan yang telah diberikan?

6. Bagaimana hasil yang didapat ketika ditambahkan kode css pada link W3School sesuai dengan kreativitas Anda?

7. Bagaimana hasil yang didapat ketika ditambahkan kode css pada tabel.html dengan memilih salah satu dari contoh?

8. Bagaimana hasil yang didapat ketika ditambahkan kode css pada tabel.html sesuai dengan kreativitas Anda?

9. Bagaimana hasil yang didapat ketika ditambahkan kode css pada list.html sesuai dengan kreativitas Anda?

B. Tujuan

1. Mahasiswa dapat memahami kode dasar css.

2. Mahasiswa dapat memahami syntax css.

3. Mahasiswa dapat memahami penerapan warna pada css.

C. Landasan Teori

1. Cascading Style Sheet

Cascading Style Sheet (CSS) merupakan bahasa pemrograman

website yang digunakan untuk mengatur konten atau isi di halaman

website yang di tulis dalam bahasa html agar halaman website tersebut

lebih menarik dan rapi.

(3)

2. Pengenalan CSS

CSS memiliki sifat dalam berbagai style yang digunakan mengontrol tulisan, warna, keselarasan, dan margin. Properti style dalam CSS secara umum dapat dikelompokkan dalam dua kategori utama, yaitu:

a. Layout properties, yaitu terdiri dari beberapa sifat yang memengaruhi posisi elemen pada halaman website, seperti margin, padding, keselarasan, dan lain-lain.

b. Formatting properties, yaitu terdiri dari beberapa sifat yang memengaruhi tampilan secara visual dari elemen dalam sebuah website, seperti jenis tulisan, ukuran, warna, dan lain-lain.

Contoh skrip CSS sebagai berikut:

<p>Contoh Paragraf dalam DIV dengan style font- weight:bold</p>

<span>Contoh SPAN dalam DIV dengan style font- wight:bold</span>

</div>

<div>

<p>Contoh Paragraf dalam DIV tanpa style</p>

<span>Contoh SPAN dalam DIV tanpa style</span>

(4)

BAB II PEMBAHASAN A. Soal

1. a) Menambahkan kode css pada file paragraf.html.

b) Mengubah style pada paragraf.html sesuai dengan kreativitas Anda.

2. a) Membuat file css_class.html dan mengubah atribut menjadi class=”judul”.

b) Mengubah style css_class.html sesuai dengan kreativitas Anda.

3. a) Memberikan kotak pada sebuah dokumen.

b) Mengubah style untuk .box sesuai dengan ketentuan yang diberikan.

4. Mengubah style .box, atribut menjadi id=”box1”, id=”box2”, id=”box3”, id=”box4”, dan kode css.

5. a) Menambahkan kode css pada file link.html.

b) Mengubah style link.html sesuai dengan ketentuan yang telah diberikan.

6. Mengubah style pada link W3School sesuai kreativitas Anda.

7. a) Membuat sebuah tabel pada file html.

b) Mengubah style dengan memilih salah satu dari contoh.

8. Mengubah style sesuai dengan ketentuan yang telah disediakan.

9. a) Membuat sebuah list pada file html.

b) Memberikan warna latar belakang pada list.

B. Source Code 1. a)

<!DOCTYPE html>

<head>

<title>Belajar HTML</title>

</head>

<body>

<h1>Belajar HTML: Heading 1</h1>

<hr />

(5)

<p>HTML (Hyper Text Markup Language) adalah bahasa markup untuk mendeskripsikan dokumen atau halaman web.

Dokumen HTML terdiri atas sejumlah tag HTML. Setiap tag HTML digunakan untuk mendeskripsikan konten yang berbeda.

HTML dikembangkan mulai tahun 1991 dan hingga saat ini versi terbarunya adalah HTML5.</p>

</body>

<style>

h1 {

font-family: Verdana, Arial, Helvetica, sans- serif;

font-size: 36px;

font-weight: bold;

text-decoration: underline;

text-align: center;

text-transform: uppercase;

color: #ff4499;

background-color:rgb(0%, 100%, 100%);

}

p {

font-family: "Times New Roman", Georgia, serif;

font-size: 20px;

font-weight: normal;

text-decoration: italic;

text-align: justify;

text-indent: 20px;

color: #ff4499;

}

</style>

</head>

b)

<!DOCTYPE html>

<head>

<title>Belajar HTML</title>

</head>

<body>

<h1>Belajar HTML: Heading 1</h1>

(6)

<hr />

<p>HTML (Hyper Text Markup Language) adalah bahasa markup untuk mendeskripsikan dokumen atau halaman web.

Dokumen HTML terdiri atas sejumlah tag HTML. Setiap tag HTML digunakan untuk mendeskripsikan konten yang berbeda.

HTML dikembangkan mulai tahun 1991 dan hingga saat ini versi terbarunya adalah HTML5.</p>

</body>

<style>

h1 {

font-family: Georgia, 'Times New Roman', Times, serif;

font-size: 45px;

font-weight: bold;

text-decoration: none;

text-align: center;

text-transform: none;

color: #ff4499;

background-color:black;

}

p {

font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

font-size: 20px;

font-weight: normal;

text-indent: 20px;

color: black;

}

</style>

</head>

2. a)

<!DOCTYPE html>

<body>

(7)

<h2>HTML heading</h2>

<p>HTML heading digunakan untuk mendeskripsikan heading (judul). HTML heading ditampilkan dengan ukuran huruf yang lebih besar dibanding teks biasa, dimulai dari h1 untuk ukuran huruf terbesar sampai dengan h6 untuk ukuran huruf heading terkecil.</p>

</div>

<h2>HTML horizontal rule</h2>

<p>Elemen ini digunakan untuk memberikan garis horizontal lurus pada halaman web, didefinisikan dengan tag hr.</p>

</div>

<h2>HTML paragraf</h2>

<p>Elemen ini digunakan untuk mendeskripsikan sebuah paragraf, didefinisikan dengan pasangan tag p.</p>

</div>

<h2>HTML line break</h2>

<p>Elemen ini digunakan untuk membuat baris baru (line break), didefinisikan dengan tag br. Dalam dokumen HTML spasi lebih maupun baris kosong akan dianggap sebagai spasi tunggal, sehingga untuk memberikan line break dapat digunakan elemen break line.</p>

</div>

</body>

<style>

.box {

background-color: aqua;

color: black;

(8)

width: 75%;

}

.box h2 {

font-family: Verdana, Arial, Helvetica, sans- serif;

font-size: 28px;

font-weight: bold;

color: blue;

}

.box p {

font-family: "Times New Roman", Georgia, serif;

font-size: 20px;

}

</style>

b)

<!DOCTYPE html>

<body>

</div>

</div>

(9)

</div>

<p>Elemen ini digunakan untuk membuat baris baru (line break), didefinisikan dengan tag br. Dalam dokumen HTML spasi lebih maupun baris kosong akan dianggap

sebagai spasi tunggal, sehingga untuk memberikan line break dapat digunakan elemen break line.</p>

</div>

</body>

<style>

.box {

background-color: black;

color: rgb(245, 86, 192);

width: 80%;

}

.box h2 {

font-family: 'Times New Roman', Times, serif;

font-size: 35px;

font-weight: bold;

color: rgb(255, 0, 140);

}

.box p {

font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

font-size: 20px;

}

</style>

3. a)

<!DOCTYPE html>

<body>

(10)

</div>

</div>

</div>

</div>

</body>

<style>

.box{

(11)

color: black;

width: 500px;

margin: 15px;

padding: 10px;

border-style: solid;

border-width: 2px 10px 4px 10px;

border-color: #ff0000;

}

</style>

b)

<!DOCTYPE html>

<body>

</div>

</div>

</div>

(12)

</div>

</body>

<style>

.box{

color: black;

width: 500px;

margin: 10px 20px 10px 20px;

padding: 10px 20px 15px 10px;

border-style: dotted solid dotted solid;

border-color: blue;

}

</style>

4.

<!DOCTYPE html>

<body>

</div>

</div>

(13)

</div>

</div>

</body>

<style>

#box1 {

background-color: blue;

color: pink;

font-width: bold;

width: 450px;

border-style: solid;

border-color: purple;

}

#box2 {

background-color: grey;

color: white;

width: 500px;

(14)

border-style: dotted;

border-color: black;

}

#box3 {

background-color: red;

color: orange;

width: 300px;

border-style: dotted solid dotted solid;

border-color: yellow;

}

#box4 {

background-color: violet;

color: pink;

width: 600px;

border-style: solid dotted dotted dotted;

border-color: cyan;

}

</style>

5. a)

<!DOCTYPE html>

(15)

<html>

<head>

<title>HTML Links</title>

</head>

<body>

<a href="http://www.w3schools.com"

target="_blank">Klik Di sini</a><br /><br />

target="_self">Klik Di sini</a><br /><br />

target="_parent">Klik Di sini</a><br /><br />

target="_top">Klik Di sini</a><br /><br />

target="framename">Klik Di sini</a><br /><br />

<a href="#heading">Heading</a>

<a href="#hr">Horizontal rule</a>

<a href="#paragraf">Paragraf</a>

<a href="#br">Break line</a>

</body>

</html>

<style>

a:link {

color: blue;

}

a:visited {

(16)

color: aqua;

background-color: white;

}

a:hover {

color: red;

background-color: pink;

}

a:active {

color: purple;

}

</style>

b)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

(17)

<a href="#heading">Heading</a>

<a href="#hr">Horizontal rule</a>

<a href="#paragraf">Paragraf</a>

<a href="#br">Break line</a>

</body>

</html>

<style>

a:link {

color: blue;

background-color: none;

}

a:visited {

color: green;

}

a:hover {

color: blue;

font-weight: bold;

}

a:active {

color: red;

font-weight: bold;

background-color: pink;

}

</style>

6.

<!DOCTYPE html>

<html>

<head>

(18)

</head>

<body>

<a class="link" href="http://www.w3schools.com"

<a class="bookmark" href="#heading">Heading</a>

<a class="bookmark" href="#hr">Horizontal rule</a>

<a class="bookmark" href="#paragraf">Paragraf</a>

<a class="bookmark" href="#br">Break line</a>

</html>

<style>

a.link:link {

color: blue;

}

a.link:visited {

color: blue;

(19)

}

a.link:hover {

color: yellow;

font-weight: bold;

background-color: orange;

}

a.link:active {

color: blue;

font-weight: bold;

background-color: purple;

}

a.bookmark:link{

color: red;

}

a.bookmark:visited{

color: black;

}

a.bookmark:hover{

color: yellow;

font-weight: bold;

(20)

background-color: blue;

}

a.bookmark:active{

color: orange;

font-weight: bold;

background-color: red;

}

</style>

7. a)

<table>

<caption>Data Mahasiswa</caption>

<tr>

<th>Kelas</th>

</tr>

<tr>

<td>Anisa</td>

</tr>

<tr>

</tr>

<tr>

(21)

</tr>

<tr>

<td>Yusuf</td>

</tr>

<tr>

</tr>

</table>

b)

<table>

<tr>

<th>Kelas</th>

</tr>

<tr>

<td>Anisa</td>

</tr>

<tr>

</tr>

<tr>

(22)

</tr>

<tr>

<td>Yusuf</td>

</tr>

<tr>

</tr>

</table>

<style>

th {

height: 30px;

text-align: left;

vertical-align: middle;

padding: 15px;

background-color: #4CAF50;

color: white;

} td {

height: 20px;

vertical-align: top;

padding: 15px;

}

tr:hover {

background-color: #f5f5f5 }

</style>

8.

<table>

<tr>

(23)

<th>Kelas</th>

</tr>

<tr>

<td>Anisa</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Yusuf</td>

</tr>

<tr>

</tr>

(24)

</table>

<style>

table {

border-collapse: collapse;

width: 100%;

} th {

height: 30px;

text-align: left;

vertical-align: middle;

padding: 15px;

background-color: #4CAF50;

color: white;

} td {

height: 20px;

vertical-align: top;

padding: 15px;

}

tr:nth-child(even) {

background-color: #f2f2f2 }

</style>

9. a)

<h2>Unordered List A</h2>

(25)

<li>Javascript</li>

</ul>

<h2>Unordered List B</h2>

<li>Javascript</li>

</ul>

<h2>Unordered List C</h2>

<li>Javascript</li>

</ul>

<style>

ul.a {

list-style-type: square;

} ul.b {

list-style-image: url('image/list.jpg');

} ul.c {

list-style-type: none;

(26)

margin: 0;

padding: 0;

}

</style>

</head>

b)

<h2>Unordered List A</h2>

<li>Javascript</li>

</ul>

<h2>Unordered List B</h2>

<li>Javascript</li>

</ul>

<h2>Unordered List C</h2>

<li>Javascript</li>

</ul>

<style>

ul.a {

list-style-type: square;

background: #ff9999;

} il.b {

list-style-image: url('images/list.jpg');

(27)

background: #3399ff;

}

ul.b li {

background: #cce5ff;

margin: 5px;

padding: 10px;

} ul.c {

list-style-type: none;

font-weight: bold;

}

ul.c li {

background: #cce5ff;

margin: 5px;

padding: 10px;

}

</style>

</head>

C. Screenshot

1. a)

(28)

b)

2. a)

b)

(29)

3. a)

b)

4.

(30)

5. a)

b)

6.

(31)

7. a)

b)

8.

(32)

9. a)

b)

(33)

D. Pembahasan 1. a)

b)

Pada source code diatas menggunakan tag <style></style> untuk

memuat style kode css yang terdiri dari berbagai macam komponen,

seperti h1 dan p. Dalam setiap komponen juga terdapat berbagai macam

style, seperti font-family, font-size, font-weight, text-decoration, text-

align, text-transform, color, dan background-color.

(34)

2. a)

b)

Pada source code diatas menggunakan tag <style></style> untuk

memuat style kode css yang terdiri dari berbagai macam komponen,

seperti .box, .box h2, dan .box p. Dalam setiap komponen juga terdapat

berbagai macam style, seperti font-family, font-size, font-weight, text-

align, width, color, dan background-color.

(35)

3. a)

b)

Pada source code diatas menggunakan tag <style></style> untuk

memuat style kode css yang terdiri dari berbagai macam komponen,

seperti .box. Dalam setiap komponen juga terdapat berbagai macam

style, seperti margin, width, color, padding, border-style, border-width,

border-color, dan background-color.

(36)

4. Pada source code diatas menggunakan tag <style></style> untuk memuat style kode css yang terdiri dari berbagai macam komponen, seperti #box1, #box2, #box3, dan #box4. Dalam setiap komponen juga terdapat berbagai macam style, seperti margin, width, color, padding, border-style, border-width, border-color, dan background-color.

5. a)

(37)

b)

Pada source code diatas menggunakan tag <style></style> untuk memuat style kode css yang terdiri dari berbagai macam komponen, seperti a:link, a:visited, a:hover, dan a:active. Dalam setiap komponen juga terdapat berbagai macam style, seperti text-decoration, color, background-color, dan font-weight.

6. Pada source code diatas menggunakan tag <style></style> untuk memuat style kode css yang terdiri dari berbagai macam komponen, seperti a.link:link, a.link:visited, a.link:hover, a.link:active,

a.bookmark:link, a.bookmark:visited, a.bookmark:hover, dan

a.bookmark:active. Dalam setiap komponen juga terdapat berbagai

(38)

macam style, seperti text-decoration, color, background-color, dan font- weight.

7. a)

b)

Pada source code diatas menggunakan tag <style></style> untuk

memuat style kode css yang terdiri dari berbagai macam komponen,

seperti th, td, dan tr:hover. Dalam setiap komponen juga terdapat

berbagai macam style, seperti height, text-align, vertical-align, padding,

background-color, dan color.

(39)

8. Pada source code diatas menggunakan tag <style></style> untuk memuat style kode css yang terdiri dari berbagai macam komponen, seperti table, th, td, tr:nth-child(even). Dalam setiap komponen juga terdapat berbagai macam style, seperti border-collapse, width, height, text-align, vertical-align, padding, background-color, dan color.

9. a)

(40)

b)

Pada source code diatas menggunakan tag <style></style> untuk

memuat style kode css yang terdiri dari berbagai macam komponen,

seperti ul.a, il.b, ul.b li, ul.c, ul,c li. Dalam setiap komponen juga terdapat

berbagai macam style, seperti list-style-type, background, list-style-

image, margin, padding, dan font-weight.

(41)

BAB III PENUTUP A. KESIMPULAN

Untuk menyelesaikan permasalahan di atas, kita dapat menggunakan metode css_font, css_class, css_box, css_link, css_tabel_hover,

css_tabel_strip, dan css_list yaitu mengubah style yang berbeda dengan menarik. Untuk mengubahnya, kita dapat mengubah kode css sesuai dengan kreativitas diri sendiri sehingga menghasilkan output yang sangat menarik. Dengan demikian, kita dapat berlatih sekreatif mungkin dalam mengubah kode css untuk memberikan output yang menarik dan