Laporan Praktikum CSS - Putri Angraeni Badar - 210210502058 - TEKOM E

LAPORAN
PRAKTIKUM DESAIN ANATRMUKA PENGGUNA
CSS (Cascanding Style Sheet)
Disusun Oleh :
PUTRI ANGRAENI BADAR

210210502058
PRODI TEKNIK KOMPUTER

JURUSAN TEKNIK INFORMATIKA DAN KOMPUTER
UNIVERSITAS NEGERI MAKASSAR
TAHUN 2022
A. Judul Praktikum
CSS (Cascanding Style Sheet)
B. Tujuan Praktikum
1. Memahami dasar pembuatan web.
2. Memahami perintah dasar CSS.
3. Mendifinisikan dan memebedakan penulisan CSS, colors, background,
borders pada dokumen HTML dan CSS.
4. Mengaplikasikan perintah html dengan menggunakan penulisan CSS,
colors, background, borders pada dokumen HTML dan CSS.
C. Teori Dasar
CSS adalah singkatan dari Cascading Style Sheets yang berguna untuk
menyederhanakan proses pembuatan website dengan mengatur elemen
yang tertulis di bahasa HTMl. Sersuai Namanya style berarti gaya atau
tampilan, css beguna untuk menmabh dan mengatur tampilan, seperti
menammbah garis atau mengatur garis, menambah posisi atau
mengatur posisi. CSS dipakai untuk mendesain halaman depan atau
tampilan website (front end). CSS menangani tampilan dari halaman
website.
A. Penulisan CSS
Penulisan CSS terdapat 3 metode yaitu penulisan css, pada tag elemen
HTML secdara langsung, penulisan css pada style yang biasanya
ditempatkan di head atau memisahkan dokumen html dan css.
Memahami istilah pada css lihat pada gamabr dibawah ini :
1. CSS pada tag elemen HTML
Penulisan css pada tag elemen HTML dilakukan dengan menambahkan atribut
style pada tag html yang akan diatur. Contoh penulisan dsar CSS sebagai
berikut :
Hasil :
2. CSS pada style

CSS pada style biasanya di tempatkan pada element <head>, dengan metode
menarget selector yang dimaksud, pada proses target selector ada 3 metode
penulisan yaitu, menarget tag html, menarget atribut id, dan menarget atribut
class. Jika selector yang ditarget adalah atribut id maka akan menggunakan
simbol ‘#’ sebagai pendefinisian bahwa selecktor yang ditarget adalah atribut
id, sedangkan jika menarget atribut class maka akan menggunakan symbol ‘.’
Sebagai pendefinisian bahwa selector yang ditarget adalah atribut class.
Contoh perintah css dasar sebagai berikut :
Hasil :
3. CSS pada dokumen terpisah

CSS pada dokumen terpisah memerlukan 2 dokumen yaitu dokumen HTML dan
dokumen CSS, penghubung anatar dookumen ditempatkan pada element
<head> dengan menggunakan element tag <link>, perintah dasar cs sebagai
berikut :
• Dokumen HTML
• Dokumen CSS
Hasil :
Tampilan folder web :
B. Colors
Colors merupakan perintah CSS yang berfungsi untuk mengatur warna
teks, perintah CSS memiliki beberapa nilai yang dapat digunakan,
seperti RGB, Hex, dan HSL, contoh perintah dasar CSS sebagai berikut :
Hasil :
Penggunaan kode warna dapat dicari di internet atau aplikasi pengolah gambar.
C. Background
Background pada perintah CSS untuk mengganti latar pada target
selector, pada perintah background CSS terdapat beberapa jenis
property yang dapat digunakan, yaitu background-color, background-
image, background-repeat, dan background-attachment.
1. Background-color
Background color berfungsi utnuk memberikan warna pada background
selector yang dituju, contoh penggunaan perintah CSS dasar sebagai berikut:
Hasil:
2. Background-image
Background image berfungsi untuk memberi gambar sebagai latar selector
yang dituju, contoh penulisan css dasar sebagai berikut :
Hasil :
3. Background-repeat
Background-repeat berfungsi untuk mengatur arah dan perulangan
background, contoh pernulisan css dasar sebagai berikut :
Hasil :
Penggunaan property background-repeat ada memiliki beberapa nilai,

yaitu repeat, repeat-x, repeat-y, no-repeat, space, round, initial, dan
inherit
4. Background-attachment
Background attachment berfungsi untuk menentukan posisi dari dari
background image, contoh penulisan css dasar sebagai berikut
Hasil :
Penggunaan property background-attachment memiliki beberapa value yaitu
fixed, scroll, local, initial, dan inherit.
D. Borders
Border pada perintah CSS untuk menambah, menganti dan mengatur
garis, beberapa property pada borders yaitu border-style, border-
width, border-color, dan rounded-border.
1. Border-style
Border-style atau garis batas, berfungsi untuk memberi garis pada selector
yang ditarget, pada bagian property border ada beberapa jenis value yaitu
dotted, dashed, solid, double, groove, ridge, inset, outset, none, dan hidden,
contoh penulisan css dasar sebagai berikut :
Hasil :
2. Border-width
Border-width berfungsi untuk mengatur ketebalan dari garis border, pada
property border- width dapat diisi dengan value px, medium, dan thick,
contoh penulisan css dasar sebagai berikut :
Hasil :
Perlu untuk memperhatikan syarat property border-width terlepas dari

border-style
3. Border-color
Border-color berfungsi untuk memberi warna pada garis border, pada
property border-color dapat menggunakan value name color, HEX, RGB, HSL,
dan transparent, perlu untuk memperhatikan bahwa penggunaan border-
color tidak lepas dari border-style, contoh perintah css dasar sebagai berikut:
Hasil :
4. Rounded-border
Rounded-border berfungsi untuk mengubah sudut border yang runcing,
menjadi sudut setengah lingkaran, contoh perintah css dasar sebagai berikut:
Hasil :
D. Alat dan Bahan
1. Perangkat komputer
2. Sistem operasi
3. Editor teks sederhana (notepad++ / Visual Studio Code)
4. Web browser
E. Kesehatan dan keselamatan kerja

1. Hati-hatilah dalam memakai perangkat elektronik
2. Pastikan kabel listrik terpasang dan dalam kondisi baik
3. Lakukan praktikum dalam posisi duduk yang benar
4. Jauhkan kabel listrik dari sentuhan anda
5. Gunakan alas kaki celana Panjang dan kemeja
6. Gunakan kacamata anti radiasi layer
F. Langkah Kerja
1. Menyiapkan alat praktik.
2. Selalu memperhatikan keselamatan kerja.
3. Menggunakan editor, setelah penulisan script simpan dengan ekstensi
*.html, jika menggunakan dokumen css terpisah gunakan ekstensi *.css
untuk dokumen css.
4. Mengerjakan dan menyelesaikan tugas praktik seseui petunjuk kerja.
5. Mengorganisasi dengan baik folder pribadi untuk masing-masing
praktikum dengan menyimpan seluruh hasil praktik dalam folder jobsheet
5, dikumpulkan dan folder utama ‘pemrograman web’.
G. Praktikum
1. Inline CSS (Tag Langsung)
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Tugas Desain Antarmuka Pengguna Tag
Langsung</title>
</head>
<body>
<body style="background-color:aqua;">
<center><h1 Style = "background-color:black;
color:white;">Website JobSheet 5</h1></center>
<h4><p Style = "border-style: solid;">Nama :
Putri Angraeni Badar<br>
NIM : 210210502058<br>
Kelas : TEKOM E<br>
Alamat : Jl. A. P. Pettarani, Lasinri</p></h4>
</p>
<center><h5 style = "background-color:grey;
color:white">CopyRight 2022 | unm.ac.id</h5></center>
</body>
</html>
Output :
Analisis
No. Nama Tag Fungsi
1. <!DOCTYPE html> Pada baris ini terdapat sebuah deklarasi
untuk mengidentifikasi jenis dokumen
HTML yang digunakan agar browser dapat
menentukan bagaimana memperlakukan
kode tersebut.
<html> Pada baris ini terdapat tag pembuka untuk
2.
membuat dokumen HTML.
<head> Tag head ini berisi nformasi meta tentang
3.
dokumen.
<title> Dibaris ini terdapat tag title untuk membuat
4. judul halaman yang nantinya akan
ditampilkan di browser.
<body> Dibaris ini terdapat tag body sebagai tempat
5. dibuatnya semua konten website
menggunakan HTML.
<body Pada bagian ini diletakan secara langsung
style="background-
property style yang merupakan element
color:aqua;">
6. untuk menyisipkan kode style background
color (warna latar belakang) ke dalam
sebuah dokumen web (HTML).
<center> Pada baris ini terdapat tag center untuk
7.
membuat jajaran teks menjadi ditengah.
<h1 Style = Pada blok ini terdapat tag h1 yang berfungsi
"background-
untuk mebuat judul atau heading dimana
color:black;
8. color:white;">Website semakin kecil angkanya maka akan semakin
JobSheet 5</h1>
besar ukuran fontnya (tulisannya). Lalu,
terdapat pula style background color black
yang berfungsi untuk memberikan warna
hitam pada latar belakang dokumen web
dan color white yang berfungsi untuk
memberi warna putih pada tulisan
“Website JobSheet 5”.
<h4><p Style = Pada blok ini terdapat tag h4 yang berfungsi
"border-style:
solid;">Nama : Putri
Angraeni Badar<br> semakin kecil angkanya maka akan semakin
NIM :210210502058<br>
Kelas : TEKOM E<br>
besar ukuran fontnya (tulisannya)
Alamat : Jl. A. P. begitupun sebaliknya semakin besar
Pettarani,
Lasinri</p></h4></p> angkanya maka akan semakin kecil ukuran
tulisannya. Lalu, terdapat pula tag p
9.
(paragraph) yang berfungsi untuk
menandai sekumpulan teks sebagai suatu
paragraph, border style solid yang
berfungsi untuk memberikan border
(bingkai) solid pada dokumen web, lalu
terdapat pula tag br yang berfungsi untuk
membuat garis baru.
<h5 style = Pada blok ini terdapat tag h5 yang berfungsi
"background-
color:grey;
color:white">CopyRight semakin kecil angkanya maka akan semakin
2022 | unm.ac.id</h5>
besar ukuran fontnya (tulisannya)
begitupun sebaliknya semakin besar
10.
angkanya maka akan semakin kecil ukuran
tulisannya. Lalu, terdapat pula style
background color grey yang berfungsi untuk
memberikan warna pada latar belakang
berwarna abu-abu pada tulisan “CopyRight
2022 | unm.ac.id” dan color white yang
berfungsi untuk memberi warna putih pada
“CopyRight 2022 | unm.ac.id”.
Analisis Keseluruhan :
Syntax html diatas menerapkan style CSS jenis inline dimana property style
diterapkan secara langsung pada baris atau elemen HTML. Inline menerapakan
style per baris atau per tag melalui atribut style. Pada syntax HTML diatas,
terdapat pendeklarasian DOCTYPE html dengan mengikutsertakan validator
untuk dokumen html yang menggunakan CSS ini. Pada bagian head , terdapat
pendeklarasian nama title yang digunakan yaitu “Tugas Desain Antarmuka
Pengguna Tag Langsung”, tulisan ini akan muncul pada bagian title halaman yang
sedang dibuka pada browser. Kemudain pada bagian body terdapat syntax
penerapan inline style yang mendeklarasikan style yang digunakan pada blok 1
adalah background berwarna aqua. Kemudian, pada blok kedua tulisan berwarna
putih dengan background berwarna hitam. Kemudian pendeklarasian blok ketiga
dengan menggunakan style border solid. Terakhir, pada blok keempat
dideklarasikan style background color berwarna abu-abu dan tulisan berwarna
putih. Sehingga nanti hasilnya latar belakang keseluruhan berwana aqua, tulisan
pada blok 2 adalah berwarna putih dengan latar berwarna hitam, blok ketiga
berwarna tulisannya berwarna hitam dan terdapat bingkai lalu blok keempat
tulisannya berwarna putih dengan latar berwarna abu-abu.
2. Internal CSS (Tag Style)
Source code :
<!DOCTYPE html>
<html>
<head>
<title>Tugas Desain Antarmuka Pengguna Tag Style</title>
<style>
body {
background-color: aqua;
}
p.one {
background-color: black;
text-align: center;
font-family: "Times New Roman", Times, serif;
color: white;
font-size: 35px;
}
p.two {
border-style: solid;
text-align: justify;
font-size: 15px;
}
p.three {
background-color: grey;
text-align: center;
color: white;
font-size: 15px;
}
</style>
</head>
<body>
<p class = "one">Website JobSheet 5</p>
<p class = "two">Nama : Putri Angraeni Badar<br>
NIM : 210210502058<br>
Kelas : TEKOM E<br>
Alamat : Jl. A. P. Pettarani, Lasinri</p>
<p class = "three">CopyRight 2022 | unm.ac.id</p>
</body>
</html>
Output :
Analisis
No. Nama Tag Fungsi

1. <!DOCTYPE html> Pada baris ini terdapat sebuah deklarasi untuk
mengidentifikasi jenis dokumen HTML yang
digunakan agar browser dapat menentukan
bagaimana memperlakukan kode tersebut.
2.
3.
dokumen.
<style> Pada baris ini terdapat tag style yang
5. berfungsi untuk menyisipkan kode style ke
dalam sebuah dokumen web (HTML).
body { Pada block ini terdapat pendeklarasian 4 class
background-
yaitu body, p.one, p.two, dan p.three. Pada
color: aqua;
} class body digunakan style background color
p.one {
dengan warna aqua, pada class p.one
background- digunakan style background color berwarna
color: black;
text-align: hitam, text align center, font family times new
center; roman, times, serif dengan color berwarna
font-family:
"Times New Roman", putih dan font sizenya 35px. Lalu, pada class
Times, serif; p.three digunakan style style background
color:
white; color berwarna aqua, border style solid, text
font-size:
align justify, font family times new roman,
35px;
} times, serif dan font sizenya 35px. Selanjutnya
6. pada class p.three digunakan style
p.two {
background- background color grey, text align center, font
color: aqua;
family times new roman, times, serif dengan
border-
style: solid; color white dan font sizenya 15px.
text-align:
justify;
font-family:
"Times New Roman",
Times, serif;
font-size:
15px;
}
p.three {
background-
color: grey;
text-align:
center;
font-family:
"Times New Roman",
Times, serif;
color:
white;
font-size:
15px;
}

menggunakan HTML.
<p class = Pada bagian ini class yang telah dibuat di tag
"one">Website
style selanjutnya diterapkan pada masing-
JobSheet 5</p>
<p class = masing elemen. Seperti, class “one”
"two">Nama : Putri
Angraeni Badar<br>
diterapkan pada elemen pertama yang berisi
NIM:210210502058<br> tulisan “Website JobSheet 5”, class “two”
8. Kelas: TEKOM E<br>
Alamat : Jl. A. P. diterapkan pada elemen kedua yang berisi
Pettarani, tulisan “Nama, NIM, kelas, dan alamat”, dan
Lasinri</p>
<p class = class “three” diterapkan pada elemen ketiga
"three">CopyRight yang berisi tulisan “CopyRight 2022 |
2022 | unm.ac.id</p>
unm.ac.id”.
Syntax html diatas menerapkan style CSS jenis external dimana property style
diterapkan pada baris atau elemen HTML. external menerapakan style per baris
atau per tag melalui atribut style. Pada syntax HTML diatas, terdapat
pendeklarasian DOCTYPE html dengan mengikutsertakan validator untuk
dokumen html yang menggunakan CSS ini. Pada bagian head , terdapat
pendeklarasian nama title yang digunakan yaitu “Tugas Desain Antarmuka
Pengguna Tag Style”, tulisan ini akan muncul pada bagian title halaman yang
sedang dibuka pada browser. Kemudian, terdapat 4 class yaitu body, p.one,
p.two, dan p.three. Pada bagian ini class yang telah dibuat di tag style
selanjutnya diterapkan pada masing-masing elemen. Seperti, class “one”
diterapkan pada elemen pertama yang berisi tulisan “Website JobSheet 5”,
class “two” diterapkan pada elemen kedua yang berisi tulisan “Nama, NIM,
kelas, dan alamat”, dan class “three” diterapkan pada elemen ketiga yang berisi
tulisan “CopyRight 2022 | unm.ac.id”.
3. External CSS
Source Code :
External.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tugas Desain Antarmuka Pengguna Dokumen CSS
Terpisah</title>
<link rel="stylesheet" type="text/css"
href="External.css"/>
</head>
<body>
<div class="one">
<p>Website JobSheet 5</p>
</div>
<div class="two">
<p>Nama : Putri Angraeni Badar<br>
NIM : 210210502058<br>
Kelas : TEKOM E<br>
Alamat : Jl. A. P. Pettarani, Lasinri</p>
</div>
<div class="three">
<p>CopyRight 2022 | unm.ac.id</p>
</div>
</body>
</html>
External.CSS
body {
}
.one {
background-color: black;
text-align: center;
color: white;
font-size: 30px;
}
.two {
border-style: solid;
text-align: justify;
font-size: 15px;
}
.three {
background-color: grey;
text-align: center;
color: white;
font-size: 15px;
}
Output :
Analisis
External.html
No. Nama Tag Fungsi
1. <!DOCTYPE html> Pada baris ini terdapat sebuah deklarasi
untuk mengidentifikasi jenis dokumen
HTML yang digunakan agar browser dapat
menentukan bagaimana memperlakukan
kode tersebut.
2.
3.
dokumen.
<link rel="stylesheet" Pada baris ini terdapat tag link
type="text/css"
rel="styesheet" = Menunjukkan bahwa file
href="External.css"/>
yang dirujuk adalah file stylesheet (CSS) dan
5.
href attribute digunakan untuk
menentukkan lokasi file (CSS) yang ingin
disisipkan.
menggunakan HTML.
<div class="one"> Pada blok disamping terdapat tag div (divisi
<p>Website
atau bagian) untuk menempatkan
JobSheet 5</p>
7. </div> beberapa element menjadi satu bagian,
<div class="two">
yang penggunaannya ditujukan untuk
mempermudah aplikasi style dengan CSS
<p>Nama : Putri dan perlakuan khusus lainnya yang
Angraeni Badar<br>
kemudian dapat diberi atribut class seperti
NIM :
210210502058<br> script disamping. Dan setelah pada bagian
Kelas :
TEKOM E<br>
stylenya kita masuk pada pemanggilan class
Alamat : Jl. one dengan tulisan “Website JobSheet 5”,
A. P. Pettarani,
Lasinri</p> class “two” diterapkan pada elemen kedua
</div> yang berisi tulisan “Nama, NIM, kelas, dan
<div alamat”, dan class “three” diterapkan pada

class="three"> elemen ketiga yang berisi tulisan
<p>CopyRight 2022
| unm.ac.id</p> “CopyRight 2022 | unm.ac.id”.
</div>
External.CSS
No. Nama Tag Fungsi
1. body { Pada block ini terdapat pendeklarasian 4
background-color:
class yaitu body, p.one, p.two, dan p.three.
aqua;
} Pada class body digunakan style
.one {
background color dengan warna aqua, pada
background-color: class p.one digunakan style background
black;
text-align: color berwarna hitam, text align center,
center; font family times new roman, times, serif
font-family:
"Times New Roman", dengan color berwarna putih dan font
Times, serif; sizenya 35px. Lalu, pada class p.three
color: white;
font-size: 30px; digunakan style style background color
}
berwarna aqua, border style solid, text align
.two { justify, font family times new roman, times,
background-color:
serif dan font sizenya 35px. Selanjutnya
aqua;
border-style: pada class p.three digunakan style
solid;
text-align: background color grey, text align center,
justify;
font family times new roman, times, serif
font-family:
"Times New Roman", dengan color white dan font sizenya 15px.
Times, serif;
font-size: 15px;
}
.three {
background-color:
grey;
text-align:
center;
font-family:
"Times New Roman",
Times, serif;
color: white;
font-size: 15px;
}
Program diatas menggunakan 1 file html dan 1 file css untuk pendeklarasian
style apa saja yang digunakan pada file dokumen html yang akan digunakan
sebagai halaman web. Kemudian pada file document html, untuk dapat
menggunakan pendeklarasian style yang telah disimpan dalam file css maka
pendeklarasian fungsi pemanggilan dapat dituliskan pada bagian head dengan
menggunakan pendekatan linked.
H. Kesimpulan
1. Cascading style sheet (CSS) merupakan sekumpulan aturan yang
menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam
dokumen.
2. Internal CSS adalah kode CSS yang ditulis di dalam tag <style> dan kode
HTML dituliskan di bagian atas (header) file HTML. Internal CSS dapat
digunakan untuk membuat tampilan pada satu halaman website dan tidak
digunakan pada halaman website yang lain.
3. Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML
Eksternal CSS ditulis di sebuah file khusus yang berekstensi .css. File
eksternal CSS biasanya diletakkan setelah bagian <head> pada halaman.
4. Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen
HTML. Setiap elemen HTML memiliki atribut style, di situ lah inline CSS
ditulis.
DAFTAR PUSTAKA
JobSheet5 Desain Antarmuka Pengguna (Penulisan CSS, Colors, Backgrounds,

Borders). Pdf
Niagahoster. 2022. ” Apa Perbedaan Inline CSS, Internal CSS, dan External
CSS?”, URL: https://www.niagahoster.co.id/blog/perbedaan-internal-external-
dan-inline-css/. Diakses pada selasa, 27 september 2022.
Yorozuya.2016. “Laporan Praktikum Pemrograman Web Modul 4”, URL :

http://yorozuyakinchan.blogspot.com/2017/04/laporan-praktikum-web-1-
modul-4.html. Diakses pada selasa, 27 september 2022.
apaCara.com.2018. “HTML Link Tag | belajar <link> element”, URL :

https://www.apacara.com/tutorial/html/html-link-tag.html. Diakses pada selasa,
27 september 2022.

Laporan Praktikum CSS - Putri Angraeni Badar - 210210502058 - TEKOM E

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Laporan Praktikum CSS - Putri Angraeni Badar - 210210502058 - TEKOM E

Uploaded by

Copyright:

Available Formats

LAPORAN

PRAKTIKUM DESAIN ANATRMUKA PENGGUNA

CSS (Cascanding Style Sheet)

PUTRI ANGRAENI BADAR

PRODI TEKNIK KOMPUTER

2. CSS pada style

3. CSS pada dokumen terpisah

Penggunaan property background-repeat ada memiliki beberapa nilai,

Perlu untuk memperhatikan syarat property border-width terlepas dari

E. Kesehatan dan keselamatan kerja

No. Nama Tag Fungsi

<body> Dibaris ini terdapat tag body sebagai tempat

<div alamat”, dan class “three” diterapkan pada

JobSheet5 Desain Antarmuka Pengguna (Penulisan CSS, Colors, Backgrounds,

Yorozuya.2016. “Laporan Praktikum Pemrograman Web Modul 4”, URL :

apaCara.com.2018. “HTML Link Tag | belajar <link> element”, URL :

You might also like