Praktikum 1 CSS (Pengenalan CSS) PDF

PRAKTIKUM : PRAKTIKUM CSS 1
NAMA : ___________________________________
KELAS : ___________________________________
TANGGAL PRAKTIKUM : ___________________________________
A. TUJUAN
1. Siswa dapat mengenal, memahami fungsi dan manfaat CSS dalam halaman web.
2. Siswa dapat membuat format template sederhana pada halaman web.
B. PENDAHULUAN
CSS adalah kependekkan dari Cascading Style Sheet. Dengan menggunakan CSS kita dapat menciptakan
sebuah format template pada setiap halaman web Anda dengan sangat mudah dan dinamis. Di dalam
halaman web terdapat terdapat beberapa elemen HTML yang kesemuanya itu dapat dikendalikan dengan
menggunakan sebuah bahasa script CSS, dalam pengaturannya biasanya style disimpan di dalam sebuah file
yang bernama style sheet.css. Style sheet ini dapat juga berupa file maupun embeded bersama tag HTML
itu sendiri.
Dengan menggunakan CSS kita dapat menghemat pekerjaan pengaturan web, karena HTML hanya
mengijinkan untuk pengaturan halaman per-elemen saja. Jadi jika kita membuat sebuah web yang besar
kita akan dipersulit dengan pengaturan halaman baik itu warna background, jenis text, maupun ukuran
text.
Dengan adanya kesulitan di atas, maka CSS telah memberi solusi. Jika mengggunakan CSS, cukup sekali
saja dalam menentukan sebuah bentuk Lay Out halaman web kita yang kemudian semua halaman akan
dihubungkan dengan file CSS yang telah kita buat. Selain itu kita juga diberikan kemudahan dalam
mengelola web. Jadi kapan pun kita dapat mengganti tampilan halaman dengan hanya merubah file
dokumen Style sheet yang telah kita buat.
Di dalam HTML dikenal tiga macam teknik dalam penulisan dokumen Style sheet, yaitu:
a. External Style Sheet
External Style Sheet atau juga kita dapat menyebutnya dengan istilah Linking Style Sheet. Kita sebut
External karena pada teknik ini kita menuliskan semua efek style di dalam sebuah dokumen tersendiri
yang kita panggil dengan menggunakan Link. Teknik pemanggilannya kita deklarasikan di dalam tag
head.
<link rel=”stylesheet” type=”text/css” href=”css_file.css”>
b. Internal style sheet (inside the <head> tag)

Internal Style Sheet atau sering juga disebut Embeding Style Sheet adalah sebuah metode penulisan
dokumen Style CSS pada satu halaman HTML, dokumen ini diletakkan bercampur dengan tag HTML
yang dibaca diantara tag <head></head>.
<style type=”text/css”>
…definisi style…
</style>
c. Inline style (inside an HTML element)

Inline Style adalah sebuah metode penulisan CSS langsung pada komponen tag HTML. Akan tetapi cara
ini kurang begitu digunakan karena proses penulisannya yang langsung dituliskan di dalam elemen
HTML sehingga mempersulit apabila kita memiliki dokumen HTML yang begitu banyak. Jadi dengan
metode ini kita harus meletakkan efek-efek yang kita inginkan di dalam setiap tag HTML yang kita
inginkan. Teknik penulisannya adalah sebagai berikut:
<tag STYLE=definisi_style…> teks </tag>

Praktikum Dasar Web
C. PRAKTIKUM
Ketentuan Praktikum:
1. Ketik dokumen halaman web pada Notepad
2. Capture Screen hasil tampilan pada browser.
3. Buat analisa dan kesimpulan dari praktikum yang Anda kerjakan.
1. Berikut ini terdapat dua buah dokumen yang memiliki tujuan sama, yaitu menangani ukuran huruf
di dalam halaman web. Pada dokumen A tidak memasukkan elemen CSS, sedang pada dokumen B
menggunakan style CSS.
A.
<html>
<head>
<title>Tanpa menggunakan CSS</title>
</head>
<body>
<h1><font face="verdana" color="red">SMK Negeri 2 Surabaya</font></h1>
Sebelumnya SMK Negeri 2 Surabaya dikenal dengan nama STM Negeri 1 Surabaya.
</body>
</html>
B. <html>
<head>
<title>Menggunakan CSS</title>
<style type="text/css">
h1
{
font-family: verdana;
color: red
}
</style>
</head>
<body>
<h1>SMK Negeri 2 Surabaya</h1>
Sebelumnya SMK Negeri 2 Surabaya dikenal dengan nama STM Negeri 2 Surabaya.
</body>
</html>
2. External Style Sheet

ex1.css
body {background-color: yellow}
h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}
<html>
<head>
<link rel="stylesheet" type="text/css" href="ex1.css">
</head>
<body>
<h1>This header is 36 pt</h1>

<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>
Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya 2

Praktikum Dasar Web
3. Internal Style Sheet
A. <html>
<head>
h1 {
text-decoration: overline;
text-align: center;
color: red
}
h2 {
text-decoration: line-through;
text-align: left;
color: green
}
h3 {
text-decoration: underline;
text-align: right
}
hr {
color:pink
}
</style>
</head>
<body>
<h1>This is header 1</h1>
<hr>
<hr>
<hr>
</body>
</html>
B. <html>
<head>
<title>Belajar CSS</title>
P{
color:red;
}
em {
color:green;
}
b {
color:blue;
}
</style>
</head>
<body>
<p>
Ini adalah paragraf pertama. <em>Ini adalah teks dicetak miring dan hijau.</em> Ini adalah paragraf pertama.
Ini adalah paragraf pertama. Ini adalah paragraf pertama. Ini adalah paragraf pertama.
Ini adalah paragraf pertama. <b>Ini adalah teks dicetak tebal dan biru.</b> Ini adalah paragraf pertama.
</p>
</body>
</html>

Praktikum Dasar Web
4. Inline Style
<html>
<head>
<title>Belajar CSS</title>
</head>
<body>
<h1 style="color:red; text-align:center;">Paragraf Pertama</h1>
<p style="color:white; background:red; font-family:arial;">
</p>
<h1 style="color:orange; text-align:right;">Paragraf Kedua</h1>

<p style="color:yellow; background:orange; font-family:verdana;">
Ini adalah paragraf kedua. Ini adalah paragraf kedua. Ini adalah paragraf kedua.
</p>
</body>
</html>
D. TUGAS PRAKTIKUM
1. Buat tampilan halaman web berikut ini dengan menggunakan CSS, dalam format:
a. Inline Style
b. Internal Style Sheet
c. External Style Sheet h1
Verdana
10pt
E. KESIMPULAN PRAKTIKUM

Praktikum 1 CSS (Pengenalan CSS) PDF

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

Praktikum 1 CSS (Pengenalan CSS) PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

PRAKTIKUM : PRAKTIKUM CSS 1

<link rel=”stylesheet” type=”text/css” href=”css_file.css”>

b. Internal style sheet (inside the <head> tag)

c. Inline style (inside an HTML element)

<tag STYLE=definisi_style…> teks </tag>

2. External Style Sheet

<h1>This header is 36 pt</h1>

<p>This paragraph has a left margin of 50 pixels</p>

Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya 2

Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya 3

<h1 style="color:orange; text-align:right;">Paragraf Kedua</h1>

Rekayasa Perangkat Lunak (Tk.1) - SMKN 2 Surabaya 4

Anda mungkin juga menyukai