Laporan pratikum II web

LAPORAN PRATIKUM II
PRAKTIKUM PEMROGRAMAN BERBASIS WEB
CASCADING STYLE SHEET (CSS)
Disusun untuk Memenuhi Matakuliah Praktikum Pemrograman Berbasis Web yang
dibimbing oleh Bapak Didik Dwi Prasetya
Oleh :
GISRA RAHMADHITA
130533608259
S1 PTI 2013 Offering B
UNIVERSITAS NEGERI MALANG
FAKULTAS TEKNIK
JURUSAN TEKNIK ELEKTRO
PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA
FEBRUARI 2015

BAB II
CASCADING STYLE SHEET (CSS)
A. TUJUAN
Setelah dilakukan praktikum tentang Pengenalan HTML mahasiswa diharapkan:
 Memahami jenis dan struktur dasar dokumen CSS.
 Mampu memanfaatkan CSS untuk memformat dokumen HTML.
 Mampu memanfaatkan pendekatan CSS untuk menghasilkan halaman web yang elegan
dan menarik.
B. ALOKASI WAKTU
4 JS (4 x 50 menit)
C. PETUNJUK
D. DASAR TEORI
1. Cascading Style Sheet
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana
style diaplikasikan ke tag-tag HTML di dalam dokumen. Rekomendasi CSS menguraikan tiga
jenis style:
 Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
 Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
 Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen
HTML.
Selain mengulas tentang pemanfaatan CSS, bagian ini juga menekankan pada pembuatan
desain dengan menggunakan division. Bagaimanapun, untuk menghasilkan desain halaman web
yang baik, penggunaan tabel tidak disarankan dan sebagai gantinya adalah dengan memanfaatkan
division.
2. Pengenalan CSS
CSS (Cascading Style Sheet) dapat menerapkan suatu format ketika lebih dari satu style
berlaku. Misalkan kita menginginkan semua paragraph harus memiliki font biru, namun secara
khusus menginginkan satu kata agar berwarna merah. CSS bisa melakukan itu.
File index.html

File stylesheet.css
1. Menggunakan Style Sheet
Sebagaimana diketahui, ada tiga pendekatan yang bisa digunakan untuk
mengimplementasikan style sheet. Bagian ini akan menjelaskan langkah penerapan ketiga
pendekatan tersebut.
 Inline
Pada pendekatan ini, kita menerapkan style per baris atau per tag melalui atribut
style.Pendekatan inline sangat cocok digunakan untuk pemberian style khusus pada beberapa
tag saja.
 Embeded
Pada pendekatan ini, keseluruhan aturan style didefinisikan ke dalam satu blok baru
kemudian digunakan di elemen-elemen HTML.Terlihat bahwa pendefinisian style berdampak
pada seluruh elemen paragraf. Bagaimana jika hanya ingin memberikan style pada elemen
tertentu. Untuk lebih menspesifikasikan pemberian style, kita bisa menggunakan atribut class
atau id. Tekniknya, class dinotasikan dengan titik (.); id dinotasikan dengan pagar (#).
 Linked
Pendekatan ini mirip dengan embedded, kecuali style-nya diletakkan di file terpisah dan
berekstensi css. Pemisahan style ini juga menjadikan pendekatan ini sangat efektif dan
efisien, khususnya ketika akan digunakan oleh lebih dari satu dokumen.
Langkah-langkah pembuatan file css diperlihatkan sebagai berikut:
1. Buka editor teks.
2. Ketikkan rule style seperti berikut:
3. Simpan di satu folder dengan ekstensi css, misalnya style.css. Setelah selesai
mendefinisikan file style, kita bisa menggunakannya di dokumen HTML melalui suatu link.

2. Tipografi
Berkaitan dengan visualisasi teks, ada beragam style yang bisa kita berikan untuk
menghasilkan bentuk sesuai keinginan.Heading.Perlu diperhatikan, dalam pembahasan ini
akan digunakan pendekatan embedded. Langkah ini dimaksud untuk memfokuskan perhatian
pada satu topik yang dijelaskan dalam satu dokumen. Bagaimanapun, untuk implementasi
nyata disarankan menggunakan pendekatan linked style.
 Style Font
Ada beragam style yang bisa diterapkan pada teks, misalnya bentuk, ukuran, dan warna.
 Mengatur Spasi
Properti style line-height memungkinkan kita untuk mengubah spasi standar dari suatu
teks.
 Initial Cap
Jika diperlukan, kita bisa mengatur huruf pertama dari paragraph merepresentasikan
huruf besar (initial cap) seperti layaknya di majalah.
3. Elemen-Elemen Halaman
CSS dapat digunakan untuk memformat elemen-elemen HTML apa pun, misalnya border dan
padding.
 Border
Properti border merepresentasikan batas dari suatu bidang area, misalnya paragraf. Properti
ini menyediakan beberapa style yang bisa dimanfaatkan untuk membuat variasi border.
Padding
Seperti halnya di tabel, padding berfungsi untuk menetapkan jarak antara border dengan
konten.
4. Link
CSS juga memungkinkan kita untuk mengatur style maupun perilaku dari suatu link. Sebagai
contoh, kita bisa menghilangkan garis bawah yang normalnya ada di setiap link.Pengaturan
link yang paling menarik adalah berkaitan dengan diarahkannya kursor di atasnya
5. List
Kemampuan menarik lainnya dari CSS adalah memformat list menjadi struktur menu yang
elegan.
6. Menggunakan Division
Pendekatan yang efektif untuk memformat elemen-elemen HTML termasuk juga division—
adalah dengan menggunakan CSS.
 Ukuran Area
Seperti di kebanyakan elemen, kita bisa memanfaatkan atribut width dan height untuk
menspesifikasikan ukuran area. Selain itu, atribut-atribut seperti padding dan margin juga
bisa dimanfaatkan di sini.

 Format Font
Di dalam suatu area, kita juga bisa menerapkan style spesifik yang tentunya akan terisolasi
(unik) dengan keseluruhan area.

Posisi Area
Seperti halnya paragraf, elemen-elemen div akan menghasilkan area secara berurutan dari atas ke
bawah. Adapun jika dikehendaki, kita bisa mengatur posisi area secara fleksibel dengan
memanfaatkan atribut float CSS.
Perlu diperhatikan, atribut float normalnya akan mencoba memampatkan area sepanjang
masih bisa dilakukan. Misalkan di dokumen sebelumnya kita tambahkan sebuah area
kecil.Bergantung kebutuhan, perilaku normal dari float bisa sesuai keinginan atau sebaliknya.
Apabila dua kotak pertama dikehendaki sejajar sehingga penambahan baru akan dilakukan
setelah batas kota terluas (kotak kanan), kita bisa me-reset atribut float dengan menggunakan
atribut clear.
7. Membuat Kerangka
Kerangka dasar merupakan kulit luar atau pembungkus (wrapper) yang umumnya digunakan
untuk menampung keseluruhan desain. Sederhananya, karakteristik utama dari kerangka ini
adalah terletak di tengah web browser. Untuk menempatkan area kerangka berada di tengah
secara horizontal browser, kita dapat memanfaatkan atribut margin. Tekniknya, tetapkan nilai
auto pada margin, di mana akan mengakibatkan posisi secara otomatis diatur di tengah.
8. DesainLayout
Setelah mempersiapkan wrapper, langkah selanjutnya adalah membuat desain layout.
Sebagai contoh, kita akan membuat layout standar (header, menu,content, dan footer) dengan
style terpisah. Definisikan style seperti berikut dan simpan dengan nama mystyle.css.
E. LATIHAN
2.1. Latihan 1 – Inline Style
Sorce Code
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<tittle>Inline Style</title>
</head>
<body>

<p style="color:red; font-style:italic">
Ini paragraf pertama

<p style="color:blue; font-weight:bold">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
<p>
Ini Paragraf ketiga
</body>
</html>
Printscreen
Penjelasan
Inline merupakan salah satu dari properti style CSS yang diterapkan secara
langsung per baris atau per elemen HTML (tag HTML). Penggunaan properti
style terdapat pada tag paragraf pertama yaitu
<p style="color:red; font-style:italic">
Properti style tersebut yang membuat teks pada paragraf pertama berwarna
merah dan miring. Sedangkan pada tag paragraf kedua
<p style="color:blue; font-weight:bold">
Properi style tersebut membuat teks pada paragraf kedua berwarna biru dan
tebal.
2.2. Latihan 2 – Embeded Style
Source Code
<!DOCTYPE html
lang="en">
<head>

<title>Embedded Style</title>
<style type="text/css">

</style>
</head>
<body>
<p>
<p>
aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
<p>
Ini Paragraf ketiga
</body>
</html>
Printscreen
Penjelasan
Embedded merupakan properti style di dalam CSS yang diletakkan di dalam satu
blok di dokumen HTML dan dapat dipanggil dengan nama blok pada tag di
dalam tag head dengan atribut type dan value atribut text/css. Nama blok
disamakan dengan tag p jadi jika menggunakan tag p maka teks dalam tag p style-
nya akan sesuai dengan style CSS yang diatur dalam blok. Sehingga ketika suatu
tag html dipanggil dalam body maka tag tersebut juga akan membawa properti
css yang telah dideklarasikan dalam bagian head. Pada source code html di atas

menggunakan embedded style sehingga pada bagian head diberikan style sebagai
berikut:

</style>
Style di atas digunakan dalam tag P sehingga ketika tag P ditambahkan dalam
body, maka style tersebut akan diterapkan dalam tag tersebut. Sehingga tag p atau
paragraf akan berwana merah dan dicetak miring.
2.3. Latihan 3 – Embeded Style 2
Source Code
<!DOCTYPE html
lang="en">
<head>
<title>Embedded Style</title>

</style>
</head>
<body>
<p class="style1">
<p id="style2">
<p class="style1">
Ini Paragraf ketiga

</body>
</html>
Printscreen
Penjelasan
Embedded merupakan properti style di dalam CSS yang diletakkan di dalam satu
blok di dokumen HTML dan dapat dipanggil dengan nama blok pada tag di
dalam tag head dengan atribut type dan value atribut text/css. Pemanggilam
Embedded style sendiri dibagi menjadi dua yaitu selector id dan selector class.
Untuk selector id yaitu style yang digunakan untuk bagian unik dalam HTML
misal digunakan pada header atau footer dari suatu web. Sedangkan untuk
selector class digunakan untuk style yang digunakan secara umum. Untuk
pendefinisiannya untuk selector id menggunakan tanda # seperti berikut ini:

Sehingga text menyesuaikan dengan pemanggilan dari style tersebut.
2.4. Latihan 4 – Linked Style
Source Code
.style1 {
color: red;
font-style: italic;

}
.style2 {
color: red;
font-weight: bold;
}
<!DOCTYPE html
<html xmllns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<title>Linked Style</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<p class="style1">
<p class="style2">
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris
nisi ut aliquip ex ea commodo consequat.
<p class="style1">
Ini paragraf ketiga
</body>
</html>
Printscreen
Penjelasan
Pendekatan dengan menggunakan linked list mirip dengan embedded, hanya saja
style-nya diletakkan di file terpisah dan berekstensi css dalam satu folder dengan

file html. Untuk memanggil css tersebut menggunakan tag link seperti di bawah
ini
<link rel="stylesheet" href="style.css" type="text/css" />
Nama file ekstensi .css di panggil dengan atribut href. Atribut tipe untuk
menentukan file yang dipanggil betipe css atau tidak dan atribut rel untuk
menentukan tipe css. Sehingga elemen dalam file HTML tersebut dapat
mengambil style dari luar HTML.
2.5. Latihan 5 – Style Font
Source Code
<!DOCTYPE html
lang="en">
<head>
<title>Style Font</title>

</style>
</head>
<body>
<p class="style_font">
magna aliqua.
<p>
aliqua.
</body>
</html>
Print Screen

Penjelasan
CSS dapat digunakan sebagai visualisasi style text dalam pemrograman web.
Dengan menggunakan CSS dapat mengatur style teks baik yang terkait dengan
nama font yang digunakan, ukuran font, style font (italic, bold,underline), serta
dalam pewarnaan font. Di dalam source code dari tampilan web di atas,
disertakan css secara embedded dalam html dimana nama css yang disertakan
adalah style_font. style_font ini berisi jenis font yaitu Georgia dengan ukuran 18
px serta dicetak miring, tebal, dan bergaris bawah serta font diatur berwarna
merah. Selanjutnya style_font tersebut diintegrasikan dalam paragraf pertama
sehingga terdapat perbandingan antara paragraf 1 yang menggunakan style_font
dengan paragraf 2 yang tidak menggunakan style font.
2.6. Latiahn 6 – Mengatur Spasi
Source Code
<head>
<title>Mengatur Spasi</title>

</style>
</head>
<body>
<p class="style_font">
magna aliqua.
<p>
aliqua.
</body>

Print Screen
Penjelasan
Dalam visualisasi text dalam CSS tidak hanya terbatas pada style font seperti
pada latihan 6 saja, namun juga mencakup spasi yang digunakan pada text. Untuk
mengatur spasi dari suatu text dapat menggunakan CSS yaitu mengatur line
height. Pada Source code program 7 diatur line height sebesar 36 px yang
diterapkan pada paragraf 1. Sehingga dari printscreen di atas dapat dibandingkan
spasi yang digunakan antara paragraf 1 yang menggunakan line-height dan
paragraf 2 yang tidak menggunakan line-height.
2.7. Latihan 7 – Initial Cap
Source Code
<!DOCTYPE html
lang="en">
<head>
<title>Style Font</title>

</style>
</head>
<body>
<p>

Lorem ipsum dolor sit amet, consectetur adipisicing
elit,
sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
ullamco laboris
</body>
</html>
Print Screen
Penjelasan
Selain mengatur style font dan spasi font CSS juga dapat digunakan untuk
membuat tampilan huruf pertama dari paragraph merepresentasikan huruf besar
(initial cap). Untuk menggunakan initial cap di dalam CSS dibuat menggunakan
first letter pada tag p dengan properties sebagai berikut:
font-size: 3em
background-color: black
color: white
Font-size dalam properties di atas digunakan untuk mengatur besar initial cap
dengan ukuran huruf 3em dengan warna background yaitu hitam dan warna font
yaitu putih seperti pada hasil printscreen.
2.8. Latihan 8 – Border
Source Code
<!DOCTYPE html
lang="en">
<head>
<title>Style Sheet</title>

</style>
</head>
<body>
<p class="border1">
elit,
ullamco laboris
<p class="border2">
elit,
ullamco laboris
<p class="border3">
elit,
ullamco laboris
</body>
</html>
Printscreen

Penjelasan
Fungsi border dalam blok embedded yang digunakan untuk mengatur tebal
border, bentuk border, dan warna border seperti. Dalam penggunaannya setiap
border diberik ketebalan 1px dan berwarna merah. Namun pada border yang
dibuat pada paragraf di atas dibedakan atas bentuk bordernya. Pada paragraf 1
menggunakan border solid tanpa putus-putus. Sedangkan paragraf 2
menggunakan border dashed yaitu garis putus garis putus, dan paragraf terakhir
menggunakan dotted yaitu titik putus titik putus.
2.9. Latihan 9 – Padding
Source Code
<!DOCTYPE html
lang="en">
<head>
<title>Style Sheet</title>

</style>
</head>
<body>
<p class="border1">
elit,
ullamco laboris
<p class="border2">
elit,
ullamco laboris

</body>
</html>
Print Screen
Penjelasan
Dalam source code html di atas menggunakan padding pada masing-masing blok
untuk mengatur jarak antara teks dengan border. Pada paragraf 1 menggunakan
padding untuk semua sisi yaitu 10 px sehingga jarak antara teks dengan border
dari sisi atas, kanan, kiri, dan bawah adalah 10 px. Berbeda pada paragraf kedua
menggunakan pengaturan padding untuk masing masing sisi yaitu 20 px, 10 px,
5px, dan 40 px. Untuk urutannya sesuai dengan jarum jam yaitu padding atas 20
px, padding kanan 10 px, padding bawah 5px, dan padding kiri 40 px.
2.10. Latihan 10 – Link
Source Code
<!DOCTYPE HTML
"http:/www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
lang="en">
<head> <title>Style Link</title>

</style>
</head>
<body>
<a href="11_Link1.html">Link Normal</a><br/>

<a href="11_Link1.html" class="link_none">Link tanpa garis
bawah</a>
</body>
</html>
<!DOCTYPE HTML
"http:/www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
lang="en">
<head> <title>Style Link</title>

</style>
</head>
<body>
<a href="11_Link1.html">Link Normal</a> <br/>
<p class="link1">
<a href="11_Link1.htm">Link tanpa garis bawah</a>
</p>
<p class="link2">
<a href="11_Link1.htm">Ubah style font</a>
</p>
<p class="link3">
<a href="11_Link1.htm">Ubah kursor</a>
</p>
</body>
</html>
Print Screen

Penjelasan
Pada source code di atas menggunakan 2 blok embedded .link_none yang di
dalamnya terdapat fungsi text-decoration: none; untuk mengatur teks link agar
tidak bergaris bawah pada tag a kedua karena default teks adalah bergaris bawah.
Setelah link teks diklik maka akan melakukan link ke file lain yang menggunakan
3 blok embedded .link1 yang di dalamnya terdapat fungsi text-decoration: none;
untuk mengatur teks link agar tidak bergaris bawah, .link2 yang di dalamnya
terdapat fungsi membuat huruf link miring dan tebal, dan .link3 yang membuat
cursor menjadi bentuk wait. a:hover digunakan untuk membuat blok atau fungsi
di dalamnya berjalan ketika kursor ditunjuk pada teks link.
2.11. Latihan 11 – List
Source Code
<head>
<title>Style List</title>
<!--
#leftmenu ul {
width: 200px;
list-style-type: none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active{
padding-left: 15px;
}
#leftmenu a{
padding: 5px 0px 5px 15px; display: block;

background: #6cae15 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover{
background: #5e9711 no-repeat left center; color:
#ffffff;
}
-->
</style>
</head>
<body>
List Normal
<ul>
<li>Satu</li>
<li>Dua</li>
</ul>
<hr/>
Style List
<div id="leftmenu">
<ul>
<li><a href="#">Menu Satu</a></li>
<li><a href="#">Menu Dua</a></li>
<li><a href="#">Menu Tiga</a></li>
</ul>
</div>
</body>
Print Screen
Penjelasan

Source code di atas menggunakan 4 blok embedded #leftmenu yang semuanya
sama tetapi memiliki pengaturan yang berbeda yang dipanggil dengan atribut id
yaitu mengatur list, mengatur link ketika sebelum dan setelah di klik, mengatur
otomatisa ke tag a, dan mengatur ketika mouse di arahkan ke list. Untuk
perbedaannya antara list yang menggunakan style dan list tanpa menggunakan
style dapat terlihat pada printscreen di atas.
2.12. Latihan 12 – Ukuran Division
Source Code
<!DOCTYPE html
lang="en">
<head>
<title>Demo Ukuran Division</title>

</style>
</head>
<body>
<div class="box1">
Paragraf ini di dalam tag <div>
</div>
<div class="box2">
</div>
</body>
</html>
Print Screen

Penjelasan
Pada source code di atas digunakan untuk mengatur tag div pertama dan kedua
yang dipanggil dengan atribut class. Tag div (Division) digunakan untuk
mengatur elemen-elemen dalam html menjadi beberapa seksi-seksi dan setiap
seksi dapat di atur berbeda-beda. Pada latihan ini division diatur areanya
menggunakan style pada .box1 dan .box2.
2.13. Latihan 13 – Format Font Division
Source Code
<!DOCTYPE html
lang="en">
<head>
<title>Demo Ukuran Division</title>
<!--
.box1 {
width: 200px;
height: 50px;
background :grey;
text-transform:uppercase;
font-weight: bold;
}
.box2{
margin: 10px;
padding: 10px;
width: 400px;

height: 100px;
-->
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
Print Screen
Penjelasan
Dalam source code di atas juga menggunakan pengaturan pada division namaun
yang membedakan adalah pengaturan fungsi dalam .box1 di isi fungsi yang
digunakan untuk mengatur teks di dalam division sehingga tampilan dari hasil
division seperti pada printscreen di atas.
2.14. Latihan 14 – Posisi Area Division
Source Code
<!DOCTYPE html

lang="en">
<head>
<title>Demo Posisi Division</title>

</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
Print Screen

Penjelasan
Pada source code di atas mengatur posisi dari area division yang digunakan dalam
membuat sebuah division. Dalam tag di atas di atur posisinya dengan
menggunakan float : left dan float :right sehingga tampilan dari lokasi division
dapat terlihat pada printscreen.
2.15. Latihan 15 – Posisi Area Division 2
Source Code
<!DOCTYPE html
lang="en">
<head>
<title>Demo Posisi Division</title>

</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">

</div>
<div class="box3">
</div>
</body>
</html>
Print Screen
Penjelasan
Pada source code di atas mengatur posisi dari area division yang digunakan dalam
membuat sebuah division. Dalam tag di atas di atur posisinya dengan
menggunakan float : left untuk box pertama float :right untuk box kedua dan
float:both untuk box ketiga sehingga tampilan dari lokasi division dapat terlihat
pada printscreen.
2.16. Latihan 16 – Membuat Kerangka
Source Code
<!DOCTYPE html
lang="en">
<head>
<title>Demo Wrapper</title>
<!--
#wrapper {
margin: auto;
width: 700px;

}
-->
</style>
</head>
<body>
<div id="wrapper">
<p>
<p>
magna aliqua.
ullamco laboris
</div>
</body>
</html>
Print Screen
Penjelasan
Kerangka dasar merupakan kulit luar atau pembungkus (wrapper) yang umumnya
digunakan untuk menampung keseluruhan desain. Sederhananya, karakteristik
utama dari kerangka ini adalah terletak di tengah web browser. Untuk
menempatkan area kerangka berada di tengah secara horizontal browser, kita
dapat memanfaatkan atribut margin. Tekniknya, tetapkan nilai auto pada margin,
di mana akan mengakibatkan posisi secara otomatis diatur di tengah. Dalam
source code di atas dibuat sebuah wrapper dengan margin auto sehingga
menyesuaikan dengan besar kerangka dimana panjangnya 700 px dan memiliki
border 1 px solid berwarna red.
2.17. Latihan 17 – Desain Layout

Source Code
<!DOCTYPE html
lang="en">
<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="inner">
<div id="sidebar">SideBar</div>
<div id="content">Content</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Print Screen
Penjelasan

Setelah mempersiapkan wrapper, langkah selanjutnya adalah membuat desain
layout berisi layout standar (header, menu,content, dan footer) dengan style
terpisah dengan menggunakan pendekatan linked sehingga style yang terdapat
dalam header, content, sidebar, dan footer dapat dipanggil dalam HTML dengan
menggunakan linked style.
F. Studi Kasus
Buat desain header web memanfaatkan CSS dan background gambar terserah seperti
terlihat pada gambar 14.
Source Code
#wrapper{
margin: auto;
width: 1366px;
}
#header{
height: 200px;
background: url(background.jpg);
border-bottom:10px solid black;
}
#logo{
float: left;
margin-top:25px;
margin-left:150px;
height:100px
width: 600px;
}
.right{
float:right;
margin-top:4px;
margin-right:100px;
height:90px;
width:300px;
}
#right1{
float:right;
width:200px;
height:20px;
margin-top:125px;
margin-right:5px;
}
#right2{
float:right;
width: 270px;
height:20px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Studi Kasus</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="UM.png"
align="center"height="150"width="150">
<span style="font-family:Arial Black;font-
size:40px;margin: auto">
<a href="" style="text-decoration:none"> TEKNIK
ELEKTRO</a></span>
</div>
<div class="right">
<div id="right2">
<div clas="link1">
<a href=>Home</a> |<a
<a href=>Sitemap</a> |<a
<a href=>RSS</a> | <a
<a href=>Contact</a> | <a
<a href=>About Us</a>
</div>
</div>
<div id="right1">
<table border= "0">
<tr>
<td>Search</td>
<td><input type="text"/> </td>
</div>
</div>
</div>
</div>
</body>
</html>
Print Screen

Penjelasan
Desain tampilan header di atas dibuat dengan menggunakan CSS yaitu division yang
disusun untuk membuat sebuah lay out seperti pada printscreen hasil di atas. Division
yang paling luar adalah wrapper yaitu sebagai pembungkus dari tampilan header
tersebut dimana lebarnya adalah 1366 px. Di dalam division wrapper terdapat division
header dengan tinggi 200px dimana backgroundnya merupakan sebuah gambar editan
sendiri seperti pada gambar. Selanjutnya dalam division gambar terdapat division
yang float kanan dan float kiri. Untuk float kiri digunakan sebagai logo UM dan text
sedangkan untuk float kanan digunakan sebagai link dan search box.
G. Chalenge
Source Code
<!DOCTYPE html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="stylec.css" type="text/css"
/>
</head>
<body bgcolor="black">
<div id="wrapper">
<div id="header">
<div id="header1">
<div id="header11">
<img src="index.jpg" height="60"
width="60" align="left"/>
</div>
<div id="header12">
<span style="font-family:Times
New Roman;font-size:50px;margin:auto;color:black">
KELANA
</div>
</div>
<div id="header2">
<div id="header21">
Home |Sitemap |RSS |Contact |About US
</div>
<div id="header22" align="right" >
Search
</div>
<div id="header23">
</div>
</div>
</div>
<div id="inner">
<div id="innerkiri">
<div id="isiinnerkiri">

<a href="#">Home</a>
</div>
<a href="#">Profil</a>
</div>
<a href="#">Alama</a>
</div>
<a href="#">Budaya</a>
</div>
<a href="#">Kuliner</a>
</div>
<a href="#">Tips dan Trik</a>
</div>
</div>
<div id="slide">
<img src="as.jpg" height="200" width="730"
align="left"/>
</div>
<div id="isi">
KELANA "kenali dan lestarikan aku"
<br/>
Salah satu komunitas pecinta alam yang
berasal dari jawa timur. forum ini lahir di Lumajang 01 Januari 2015
lalu. dalam forum ini
mereka bertekad untuk mengenalkan alam,
budaya, dan kuliner yang ada di Indonesia. Indonesia ibarat permata
yang terpendam bagi mereka.
Melalui forum ini mereka juga bermaksut untuk
mendukung program pemerintah daerah untuk mengenalkan icon-icon kota
mereka
</div>
</div>
<div id="fotter">
</div>
</div>
</body>
</html>
#wrapper
{
margin: auto;
width: 1000px;
}
#header
{
height: 80px;
background: green;
}
#header1
{
float: left;
width: 700px;
height: 80px;

background: green;
}
#header11
{
margin-top: 8px;
margin-left: 100px;
float: left;
width: 60px;
height: 60px;
background: green;
border: 1px solid blue;
}
#header12
{
margin-top: 8px;
float: left;
width: 200px;
height: 60px;
background: green;
}
#header2
{
float: left;
height: 80px;
width: 294px;
background: green;
}
#header21
{
margin-top: 2px;
margin-left: 5px;
float: left;
height: 20px;
width: 288px;
background: green;
}
#header22
{
margin-top: 30px;
margin-left: 30px;
float: left;
height: 20px;
width: 60px;
background: green;
}
#header23
{
margin-top: 30px;
margin-left: 3px;
float: left;
height: 20px;
width: 100px;
background: white;
}
#inner
{
margin-top: 5px;

height: 420px;
background: white;
}
#innerkiri
{
margin-top: 10px;
float: left;
height: 400px;
width: 250px;
background: green;
}
#isiinnerkiri
{
margin-top: 10px;
padding-left:20px;
float: left;
height: 30px;
width: 210px;
background: white;
font-size:25px;
}
#jeda
{
margin-top: 10px;
float: left;
height: 10px;
width: 30px;
background: white;
}
#slide
{
margin-top: 10px;
margin-left: 10px;
float: left;
height: 200px;
width: 730px;
background: green;
}
#isi
{
margin-top: 10px;
margin-left: 10px;
float: left;
height: 190px;
width: 730px;
background: white;
}
#fotter
{
margin-top: 5px;
height: 130px;
background: green;
}

Print Screen
H. Kesimpulan
 CSS (Cascading Style Sheet) dapat menerapkan suatu format ketika lebih dari
satu style berlaku.
 Terdapat dua alas an mengapa memisahkan file css dan html. Pertama, kita
dapat menerapkan style yang sama untuk beberapa elemen tanpa menulis
ulang kode. Kedua, kita dapat menerapkan style dan format yang sama (satu
file css) untuk beberapa halaman HTML.
 Salah satu kelebihan CSS adalah kita dapat menerapkan beberapa format
untuk satu selector.
 CSS dapat melakukan backup. Cara kerjanya ketika opsi pertama tidak dapat
dijalankan CSS akan langsug menjalankan opsi selanjutnya
 HTML bisa bersifat nested (bersarang)
 Class pada CSS berguna untuk menerapkan suatu style pada banyak elemen
 ID digunakan untuk menerapkan satu style pada banyak elemen
I. Daftar Pustaka
 Modul II Praktikum Pemrograman Berbasis Web. CSS. Malang: Pendidikan
Teknik Informatika Universitas Negeri Malang.

Laporan pratikum II web

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (15)

Similar to Laporan pratikum II web

Similar to Laporan pratikum II web (20)

More from rahmi wahyuni

More from rahmi wahyuni (14)

Recently uploaded

Recently uploaded (12)

Laporan pratikum II web