Top Banner
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
44

Laporan pratikum II web

Aug 06, 2015

Download

Data & Analytics

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 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

Page 2: Laporan pratikum II web

BAB IICASCADING 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

Page 3: Laporan pratikum II web

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

Page 4: Laporan pratikum II web

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

Page 5: Laporan pratikum II web

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. Desain Layout 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 htmlPUBLIC "-//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><!-- menerapkan embedded style pada paragraf --><p style="color:red; font-style:italic">

Ini paragraf pertama

<!-- menerapkan embedded style pada paragraf -->

Page 6: Laporan pratikum II web

<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 htmlPUBLIC "-//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><title>Embedded Style</title>

Page 7: Laporan pratikum II web

<style type="text/css"><!--P {

color:red;font-style:italic;

}--></style>

</head>

<body><p>

Ini paragraf pertama

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,

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

Page 8: Laporan pratikum II web

menggunakan embedded style sehingga pada bagian head diberikan style sebagai

berikut:

<style type="text/css"><!--P {

color:red;font-style:italic;

}-->

</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 htmlPUBLIC "-//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><title>Embedded Style</title>

<style type="text/css"><!--.style1 {

color:red;font-style:italic;

}#style2{color: blue;font-weight:bold;}--></style>

</head>

<body><p class="style1">

Ini paragraf pertama

<p id="style2">Lorem ipsum dolor sit amet, consectetur adipisicing elit,

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

Page 9: Laporan pratikum II web

</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:

<!--.style1 {

color:red;font-style:italic;

}

Sedangkan untuk selector class menggunakan tanda . (dot) yaitu seperti berikut

ini:

#style2{color: blue;font-weight:bold;}-->

Sehingga text menyesuaikan dengan pemanggilan dari style tersebut.

2.4. Latihan 4 – Linked Style

Source Code

.style1 {color: red;

Page 10: Laporan pratikum II web

font-style: italic;}

.style2 {color: red;font-weight: bold;

}

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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">Ini paragraf pertama

<p class="style2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit,

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

Page 11: Laporan pratikum II web

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 htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

lang="en">

<head><title>Style Font</title>

<style type="text/css"><!-- .style_font

{font-family: Georgia;font-size: 18px;font-style: italic;font-weight: bold;text-decoration: underline;color: red;

} --> </style>

</head>

<body><p class="style_font"> Lorem ipsum dolor sit amet, consectetur adipisicing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua.

</body></html>

Print Screen

Page 12: Laporan pratikum II web

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 type="text/css"><!--.style_font {

line-height: 36px;}--></style></head>

<body><p class="style_font"> Lorem ipsum dolor sit amet, consectetur adipisicing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua.

</body>

Page 13: Laporan pratikum II web

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 htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmllns="http://www.w3.org/1999/xhtml" xml:lang="en"

lang="en">

<head><title>Style Font</title>

<style type="text/css"><!-- p:first-letter

{font-size: 3em;background-color: black;color: white;

} --> </style>

</head>

<body><p>

Page 14: Laporan pratikum II web

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

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. </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 htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmllns="http://www.w3.org/1999/xhtml" xml:lang="en"

lang="en">

<head><title>Style Sheet</title>

Page 15: Laporan pratikum II web

<style type="text/css"><!-- .border1

{border: 1px solid red;

}.border2 {

border: 1px dashed red;} .border3 {

border: 1px dotted red;}

--> </style>

</head>

<body><p class="border1"> Lorem ipsum dolor sit amet, consectetur adipisicing

elit, 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="border2"> Lorem ipsum dolor sit amet, consectetur adipisicing

elit, 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="border3"> Lorem ipsum dolor sit amet, consectetur adipisicing

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

</body></html>

Printscreen

Page 16: Laporan pratikum II web

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 htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmllns="http://www.w3.org/1999/xhtml" xml:lang="en"

lang="en">

<head><title>Style Sheet</title>

<style type="text/css"><!-- .border1

{border: 1px solid red;padding: 10px

}.border2 {

border: 1px solid red;padding: 20px 10px 5px 40px

} --> </style>

</head>

<body><p class="border1">

Page 17: Laporan pratikum II web

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

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="border2"> Lorem ipsum dolor sit amet, consectetur adipisicing

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

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

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Page 18: Laporan pratikum II web

"http:/www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head> <title>Style Link</title><style type="text/css"><!--.link_none {text-decoration: none;}--></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 HTMLPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http:/www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head> <title>Style Link</title><style type="text/css"><!--.link1 a:hover{

text-decoration: none;}

.link2 a:hover {font-style: italic;font-weight: bold;}

.link3 a:hover {cursor: wait;}--></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>

Page 19: Laporan pratikum II web

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>

<style type="text/css">

Page 20: Laporan pratikum II web

<!--#leftmenu ul {

width: 200px;list-style-type: none;padding:0; margin:0;

}

#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active{padding-left: 15px;text-decoration: none;

}

#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

Page 21: Laporan pratikum II web

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 htmlPUBLIC "-//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><title>Demo Ukuran Division</title>

<style type="text/css"><!--.box1 {

width: 200px;height: 50px;background :grey;border: 1px solid red;

}.box2{

Page 22: Laporan pratikum II web

margin: 10px;padding: 10px;width: 400px;height: 100px;border: 1px solid red;

--></style>

</head>

<body><div class="box1">

Paragraf ini di dalam tag &lt;div&gt;</div>

<div class="box2">Lorem ipsum dolor sit amet, consectetur adipisicing elit,

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.

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

Page 23: Laporan pratikum II web

2.13. Latihan 13 – Format Font Division

Source Code

<!DOCTYPE htmlPUBLIC "-//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><title>Demo Ukuran Division</title>

<style type="text/css"><!--.box1 {

width: 200px;height: 50px;background :grey;text-transform:uppercase;font-weight: bold;border: 1px solid red;

}.box2{

margin: 10px;padding: 10px;width: 400px;height: 100px;border: 1px solid red;

--></style>

</head>

<body><div class="box1">

Paragraf ini di dalam tag &lt;div&gt;</div>

<div class="box2">Lorem ipsum dolor sit amet, consectetur adipisicing elit,

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.

</div></body></html>

Print Screen

Page 24: Laporan pratikum II web

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 htmlPUBLIC "-//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><title>Demo Posisi Division</title>

<style type="text/css"><!--.box1 {

float:left;width: 200px;height: 50px;background :grey;border: 1px solid red;

}.box2{

float: right;padding: 10px;width: 300px;height: 100px;border: 1px solid red;

Page 25: Laporan pratikum II web

--></style>

</head>

<body><div class="box1">

Paragraf ini di dalam tag &lt;div&gt;</div>

<div class="box2">Lorem ipsum dolor sit amet, consectetur adipisicing elit,

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.

</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 htmlPUBLIC "-//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><title>Demo Posisi Division</title>

Page 26: Laporan pratikum II web

<style type="text/css"><!--.box1 {

float:left;width: 200px;height: 50px;background :grey;border: 1px solid red;

}.box2{

float: right;padding: 10px;width: 300px;height: 100px;border: 1px solid red;

}.box3{

clear:both;float: left;width: 200px;height: 50px;background: grey;border: 1px solid red;

}--></style>

</head>

<body><div class="box1">

Paragraf ini di dalam tag &lt;div&gt;</div>

<div class="box2">Lorem ipsum dolor sit amet, consectetur adipisicing elit,

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.

</div>

<div class="box3">Paragraf ini di dalam tag &lt;div&gt;

</div>

</body></html>

Print Screen

Page 27: Laporan pratikum II web

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 htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head><title>Demo Wrapper</title><style type="text/css"><!--#wrapper {

margin: auto;width: 700px;border: 1px solid red;

}--></style>

</head>

<body><div id="wrapper">

<p>Paragraf ini di dalam tag &lt;div&gt;<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore

magna aliqua.

Page 28: Laporan pratikum II web

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

nisi ut aliquip ex ea commodo consequat.</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 htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head><title>Desain Layout Sederhana</title><link rel="stylesheet" href="mystyle.css" type="text/css" />

</head>

Page 29: Laporan pratikum II web

<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

Page 30: Laporan pratikum II web

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:100pxwidth: 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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">

Page 31: Laporan pratikum II web

<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

Page 32: Laporan pratikum II web

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 htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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><div id="isiinnerkiri"><a href="#">Profil</a></div><div id="isiinnerkiri"><a href="#">Alama</a></div><div id="isiinnerkiri"><a href="#">Budaya</a></div><div id="isiinnerkiri"><a href="#">Kuliner</a>

Page 33: Laporan pratikum II web

</div><div id="isiinnerkiri"><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;

}

Page 34: Laporan pratikum II web

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

}

Page 35: Laporan pratikum II web

#isiinnerkiri{

margin-top: 10px;padding-left:20px;float: left;height: 30px;width: 210px;background: white;font-size:25px;text-decoration: none;

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

Page 36: Laporan pratikum II web

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.