LAPORAN 2 PEMROGRAMAN WEB CSS CASCADING

(1)

LAPORAN PRAKTIKUM MODUL 2

PEMROGRAMAN WEB

CASCADING STYLE SHEET (CSS)

Disusun Oleh:

Ananda Putri Syaviri (130533608243) PTI OFF B

UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK JURUSAN TEKNIK ELEKTRO

PROGRAM STUDI S1 PENDIDIKAN TEKNIK INFORMATIKA


(2)

MODUL 2

CASCADING STYLE SHEET (CSS)

A.KOMPETENSI DASAR

• 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. PETUNJUK

• Awali setiap aktivitas dengan do’a, semoga berkah dan bermanfaat.

• Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar.

• Kerjakan tugas- tugas praktikum dengan baik, sabar dan jujur.

• Tanyakan kepada asisten/ dosen apabila ada hal-hal yang kurang jelas.

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


(3)

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

D.LATIHAN

1. Menggunakan Style Sheet .

- Inline.

<!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" xml:lang="en" lang="en"> <head>

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

<p style="color:blue; font-weight:bold">

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

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

<p>

Ini paragraf ketiga


(4)

</html>

Gambar 1.1 kode HTML

Gambar 1.2 Tampilan hasil halaman web Penjelasan :

- 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 “Inline Style”, 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 pargraf 1 adalah warna merah dengan font style italic. Kemudian pendeklarasian paragraph kedua dengan menggunakan style warna biru dengan font-weight bold. Sehingga nanti hasilnya tulisan pada paragraph 1 adalah berwarna merah dengan italic, paragraph kedua berwarna biru dengan bold ( ditulis tebal) dan paragraph ketiga ditulis default tanpa perubahan apapun.

- Embedded Style

<!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" xml:lang="en" lang="en"> <head>

<title>Embedded Style</title>

<style type="text/css">

p {

color: red;

font-style: italic; }


(5)

-->

</style>

</head> <body>

<p>

Ini paragraf pertama

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris

nisi ut alliquip ex ea commodo consequat.

<p>

Ini paragraf ketiga

</body> </html>

Gambar 1.3 kode HTML

Gambar 1.4 Tampilan hasil halaman web Penjelasan :

- Program diatas adalah penerapan menggunakan embedded style. Aturan penggunaan Embedded style didefinisikan ke dalam satu blok kemudan digunakan di elemen-elemen HTML. Pendeklarasian style pada bagian head. Sehingga hasilnya menyeluruh. Seperti pada program diatas, menggunakan style type = text/css, dengan aturan pada paragraph menggunakan tulisan warna merah dan font style italic. Hasilnya adalah setiap paragarf yang ada pada bagian body akan dituliskan dalam tulisan berwarna merah dan dicetak miring.


(6)

<!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" xml:lang="en" lang="en"> <head>

<title>Embedded Style</title>

<style type="text/css">

p {

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 euismod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris nisi ut alliquip ex ea commodo consequat.

<p class="style3"> Ini paragraf ketiga

</body> </html>

Gambar 1.5 Kode HTML


(7)

Penjelasan :

- Sama seperti contoh sebelumnya, hanya saja menggunakan 2 style yang dituliskan pada head. Style kedua menggunakan warna biru dengan font weight bold. Penulisan deklarasi style1 dan style2 berbeda. Style 1 menggunakan class sehingga nantinya dapat digunakan berulang kali pada satu halaman HTML, sedangkan style2 menggunakan id yang sifatnya unik , sehingga hanya dapat digunkana 1 kali dalam satu HTML. Penerapan style1 dan style2 , yaitu dituliskan pada <p…>  <p class=”style1”> Ini pargraf pertama. Sehingga nanti hasilnya adalah per paragraph dengan style yang digunakan.

- Linked

<!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" 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 id="style2">

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

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

<p class="style1">

Ini paragraf ketiga

</body> </html>


(8)

Gambar 1.9 Tampilan hasil halaman web Penjelasan :

- Program diatas menggunakan pendekatan linked, yang aturannya menggunakan 2 dokumen html. Satu digunakan untuk pendeklarasian aturan style dan disimpan dalam format css, dan yang satunya adalah dokumen HTML. Cara kerjanya adalah menggunakan suatu link yang penulisannya diletakkan pada head. Link yang dituju adalah file css tersebut untuk dapat mengakses style-style yang ada pada file css. Hasilnya sama seperti program sebelumnya, yang membedakan adalah penggunaan pendekatan linked yang prinsipnya file dokumen dan CSS diletakkan terpisah menggunakan tag link. Penulisan tag link : <link rel=”stylesheet” href=”style.css” type=”text/css” />.

2. Tipografi

- Style Font

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


(9)

<p class="style_font">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua.

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua.

</body> </html>

Gambar 2.0 kode HTML

Gambar 2.1 Tampilan hasil halaman web Penjelasan :

- Program diatas menerapkna pendekatan embedded karena mendeklarasikan penulisan aturan CSS pada satu blok (head). Dengan menggunakan class sehingga nantinya dapat digunakan berulang kali. Aturan CSS yang digunakan adalah style font, dengan Font-family : Georgia, size : 18px, style : italic, weight : bold dan decoration textnya underline dengan fot color warna merah. Sehingga nanti hasilnya pada paragraph 1 ditulis dengan tulisan Georgia berukuran 18px dicetak miring dan ditebal serta diberi garis bawah. Seddangkan paragraph kedua ditulis default karena tidak menggunakan style CSS.

- Initial Cap

<!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" xml:lang="en" lang="en"> <head>

<title>Style Font</title>

<style type="text/css">


(10)

p:first-letter { font-size: 3em;

background-color: black; color: white;

} -->

</style>

</head> <body>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

sed do euismod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris nisi ut alliquip ex ea commodo consequat.

</body> </html>

Gambar 2.2Kode HTML

Gambar 2.3 Tampilan hasil halaman web Penjelasan :

- Program diatas menggunakan pendekatan embedded style. Menggunakan style first-letter style pada paragraph dengan ketentuan font size 3em, background colour hitam dan warna tulisannya putih. Ini dimaksudkan menggunakan style CSS yang hasilnya adalah mengubah huruf awal (first letter) pada paragraph menjadi lebih besar dan memiliki tampilan berbeda dibandingkan penulisan huruf hinga kalimat setelahnya. 3. Elemen- elemen Halaman

- Border

<!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" xml:lang="en" lang="en"> <head>

<title>Style Sheet</title>


(11)

<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 euismod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris

nisi ut alliquip ex ea commodo consequat.

<p class="border2">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris

nisi ut alliquip ex ea commodo consequat. <p class="border3">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris

nisi ut alliquip ex ea commodo consequat.

</body> </html>


(12)

Gambar 2.5 Hasil Tampilan Web Penjelasan :

- Program diatas menggunakan pendekatan embedded style dengan pendeklarasian 3 class style border yang digunakan pada halam HTML ini. Style border 1 digunakan pada paragraph pertama dengan border 1px garris solid berwarna merah, yang artinya borderannya dalam bentuk garis penuh. Style border 2 digunakan pada paragraph kedua dengan border 1px garis dashed berwarna merah , yang artinya borderannya dalam bentuk garis putus-putus tebal dan berjarak, sedangkan style border 3 yang digunakan pada paragarf 3 menggunakan tipe dotted yang hasilnya borderan dalam bentuk garis putus-putus kecil sehingga jaraknya lebih kecil.

- Padding

<!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" xml:lang="en" lang="en"> <head>

<title>Style Sheet</title>

<style type="text/css">

.border1 {

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

}

.border2 {

border: 1px dashed red; padding: 20px 10px 5px 40px; }

-->


(13)

</head> <body>

<p class="border1">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris

nisi ut alliquip ex ea commodo consequat.

<p class="border2">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris

nisi ut alliquip ex ea commodo consequat.

</body> </html>

Gambar 2.6 Kode HTML

Gambar 2.7 Tampilan hasil web Penjelasan :

- Program diatas menerapkan padding yang befungsi untuk menetapkan jarak antara border dengan konten. Pada dokumen ini menggunakan menggunakan 2 border style dengan padding yang berbeda. Style border 1 menggunakan padding sebesar 10px, dan style border 2 menggunakan padding 20px 10px 5px 40px, yang artinya padding atas sebesar 20px, kanan 10px, bawah 5px dan kiri 40px. Hasilnya terlihat jelas berbeda antara paragraph 1 dan 2. Border 1 digunakan pada paragraph 1 yang nilai padding semua sisi 10px, sehinga rata kanan kiri atas bawah.


(14)

4. Link - Link 1

<head>

<title>Style Link</title>

<style type="text/css">

.link_none {

text-decoration: none; }

-->

</style> </head> <body>

<a href="link2.html">Link Normal</a> <br />

<a href="link2.html" class="link_none">Link tanpa garis bawah</a>

</body> </html>

Gambar 2.8 Kode HTML

Gambar 2.9 Tampilan Hasil Web Penjelasan :

- Program diatas menggunakan pendekatan embedded style dengan class link_none yang artinya untuk link tanpa dekorasi apapun, termasuk underline, sehingga hasilnya sebuah link tidak memiliki garis bawah. Dimaksudkan untuk melakukan modifikasi pada penulisan sebuah link.

- Link 2

<head>

<title>Style Link</title>

<style type="text/css">


(15)

.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="link2.html">Link Normal</a> <br />

<p class="link1">

<a href="link2.html">Link tanpa garis bawah</a>

</p>

<p class="link2">

<a href="link2.html">Ubah style font</a> </p>

<p class="link3">

<a href="link2.html">Ubah kursor</a> </p>

</body> </html>

Gambar 3.0 Kode HTML


(16)

- Program diatas menggunakan 3 style link , yang pertama tanpa dekorasi text, yang kedua dicetak miring dan tebal, yang ketiga dengan cursor wait. Pada Link Normal dan link tanpa garis bawah yang ada pada link 1, ditautkan ke link 2. Kemudian pada link 2 link bertambah 2 yaitu ubah style font dengan style link2 (dicetak miring dan tebal) dan ubah kursor menggunakan style link3 (cursor: wait).

5. List

<head>

<title>Style List</title>

<style type="text/css">

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


(17)

</div> </body>

Gambar 3.2 Kode HTML

Gambar 3.3 Tampilan hasil halaman web Penjelasan :

- Menggunakan 4 id style : yang pertama leftmenu ul (unordered list) dengan width 200px, list style typenya none, dengan padding dan margin 0. Kedua leftmenu link, dengan aturan link dapat dikunjungi dan berstatus aktif kemudian padding kiri 15px tanpa text decoration. Yang ketiga leftmenu dengan aturan padding atas kanan bawah kiri berurutan 5px 0px 5px 15px dan diplay diberi block dengan background berwarrna kode #6cae15 no repeat left center dan margin 0px 0px 1px (atas kanan bawah) dengan warna white (kode : #ffffff). Dan style keempat leftmenu dengan ketentuan background bewarna hijau kode #5e9711 no repeat left center dengan warna putih (#ffffff). Sehingga hasilnya pada list Normal menggunakan default penulisan list dan untuk style list (menu 1, 2, 3) menggunakan class leftmenu sehingga hasilnya terdapat 3 block menu seperti pada gambar.

6. Division - Ukuran area

<!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" xml:lang="en" lang="en"> <head>


(18)

.box1 {

width: 200px; height: 50px; background: grey; 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 euismod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris

nisi ut alliquip ex ea commodo consequat. </div>

Gambar 3.4 kode HTML


(19)

Penjelasan :

- Program diatas membuat 2 class box dengan ketentuan masing-masing box yang berbeda. Box 1 berukuran 200px x 50px dengan background berwarna abu dan border sebesar 1px garis solid bewarna merah. Sedangkan box 2 berukuran 400px x 100px menggunakan margin 10px (untuk semua posisi) dan padding sebesar 10px, border sebesar 1px garis solid berwarna merah. Sehingga hasilnya akan tampak berbeda antara box 1 dan 2 karena box 2 menggunakan margin dan padding, sedangkan box 1 tidak menggunakan margi sehingga secara default akan diletakkan pada pojok kiri atas halaman.

- Format font

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


(20)

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

Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris

nisi ut alliquip ex ea commodo consequat. </div>

Gambar 3.6 kode HTML

Gambar 3.7 Tampilan hasil halaman web Penjelasan :

- Program diatas sama seperti program sebelumnya, yang membedakan adalah style

pada box 1 diubah menjadi berukuran 200px x 50px dengan text-transofrm : uppercase (menjadi lebih besar tulisannya) dan dicetak tebal.

- Posisi area

<!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" xml:lang="en"

lang="en"> <head>

<title>Demo Posisi Division</title>

<style type="text/css">

.box1 {

float: left; width: 200px; height: 50px;


(21)

background: grey; border: 1px solid red; }

.box2 {

float: right; padding: 10px; width: 300px; 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 euismod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris

nisi ut alliquip ex ea commodo consequat. </div>

- Posisi area (1)

<!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" 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; }


(22)

/* me-reset pengaturan float left maupun right */ 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 euismod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris

nisi ut alliquip ex ea commodo consequat. </div>

<div class="box3">

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

</body> </html>

Gambar 3.8 Kode HTML Awal:


(23)

//modifikasi:

Gambar 3.9 Tampilan hasil halaman web Penjelasan :

- Program diatas adalah untuk mengatur posisi area secara fleksibel dengan memanfaatkan atribut float CSS. Box1 dengan float= left, berukuran 200px x 50px background abu-abu dengan border solid 1px berwarna merah. Box2 dengan float= right berukuran 300px x 100px , dengan padding 10px dan border solid 1px berwarna merah. Maka nanti hasilnya adalah box1 terletak pada sisi kiri halam dan box 2 terletak pada sisi kanan halaman. Atribut float mencoba menempatkan area box sepanjang area yang masih bisa dilakukan. Kemudian untuk memodifikasi agar dapat muncul seperti gambar kedua, melakukan penambahan baru setelah batas kotak terluas(kotak kanan), dengan mereset atribut float dengan menggunakan atribut clear. Sehingga hasilnya akan muncul seperti gambar kedua.

7. Membuat Kerangka - Syntax :

<!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" xml:lang="en" lang="en"> <head>

<title>Demo Wrapper</title>

<style type="text/css">

#wrapper {

margin: auto; width: 700px;

border: 1px solid red; }

-->


(24)

<body>

<div id="wrapper">

<p>

Paragraf ini di dalam tag &lt;div&gt;

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

sed do euismod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud excercitation ullamco laboris nisi ut alliquip ex ea commodo consequat.

</div>

</body>

- Screen shoot :

- Penjelasan :

Program diatas menggunakan fungsi wrapper untuk menampung keseluruhan desain. Pada id wrapper terdapat pendeklarasian penggunaan margin auto yang berfungsi untuk menempatkan area kerangka tepat berada di tengah sehingga berapapun ukurannya tidak akan mempengaruhi letak area kerangka. Kemudian dengan ukuran width sebesar 700px dan border 1px garis solid berwarna merah. 8. Desain Layout

- Syntax :

<!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" xml:lang="en"

lang="en"> <head>

<title>Desain Layout Sederhana</title>

<link rel="stylesheet" href="mystyle.css" type="text/css"

/> </head> <body>


(25)

<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> - Screen shoot :

- Penjelasan :

Program diatas menggunakan 2 file html, 1 file css untuk pendeklarasian style apa saja yang digunakan pada file dokumen html yang akan digunakan sebagai halaman web. Pendeklarasian wrapper, header, inner, sidebar, content dan footer yang menggunakan id sehingga tidak mungkin sama dengan id lainnya. 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. Pada bagian body untuk header menggunakan id


(26)

wrapper dan header. Pada bagian sidebar menggunakan inner dan sidebar. Bagian content menggunakan fungsi content dan footer menggunakan fungsi footer. Maka hasilnya dapat dilihat pada screenshoot.

E. STUDI KASUS

- Membuat desain header web dengan memanfaatkan CSS dan background gambar.

Source Code HTML

- Box.css

#header{

height: 100px;

border: 1px solid blue;

margin: auto;

padding: 10px 10px 10px 10px;

border-bottom : 12px solid black;

background-image: -moz-linear-gradient(bottom, #FFFFFF 0%,

#FFB24D 50%, #F56505 100%); }

.box1 {

float: left;

width: 200px;

height: 100px;

} .box2 {

float: left;

width: 405px;

height: 100px;

} .box3{

float: right;

width: 350px;

height: 50px;

} .box4{

float: right;

width: 350px;

height: 50px;

}

#textheader{

float: left;

margin: auto;

height: 60px;

padding: 20px 0px 20px 20px;

font-size: 30px;

font-weight: bold;

text-align : left;

font-family: "Jokerman";

color: black;

}


(27)

#menusearch{

float: right;

margin : 25px 60px 0 0;

width: 250px;

height : 30px;

font-family: "Monotype Corsiva"

}

.link a:hover{

text-decoration: underline;

}

- Dokumen HTML

<!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" xml:lang="en" lang="en"> <head>

<title>Studi Kasus 1</title>

<link rel="stylesheet" href="box.css" type="text/css" />

</head> <body>

<div id="header">

<div class="box1"align="left">

<img src="um.png" align="right" height="100"

width="100"></img>

</div>

<div class="box2"align="left">

<div id="textheader">

Teknik Elektro </div>

</div>

<div class="box3"align="center">

<div class="link">

<a href="Link1.html">Home </a>| <a href="Link2.html"> Sitemap </a> | <a href="Link3.html"> RSS </a>| <a href="Link4.html">Contact </a>| <a href="Link5.html">About us </a>

</div>

</div>

<div class="box4"align="right">

<div id="menusearch">

<label for="firstname">Search: </label>

<input type="text" name="search" required pattern= "[A-Za-z]{1,20}" placeholder = "search"><br><br>

</div> </body>


(28)

Hasil Tampilan Web:

Penjelasan :

- Program diatas menggunakan 4box untuk mendesain header agar dapat tampil seperti pada hasil. Box 1 digunakan untuk meletakkan logo, box 2 digunakan untuk meletakkan tulisan, box 3 untuk content link , dan box 4 untuk lebel search, jika ingin menacri sesuatu yang berkaitan dengan informasi yang ada pada halaman web tersebut. Menggunakan pendekatan linked sehingga pada bagian head dicantumkan halaman html yang akan di link-an. Menggunakan file css bernama box yang isinya pengaturan dari desain penyusun header. Kemudian pada bagian body, hanya ada id header, karena hanya akan membuat sebuah header web. Pada bagian header, dicantumkan pemanggilan class box1,2,3,4 untuk dapat menampilkan pengaturan yang dideklarasikan pada file css. Untuk field search menggunakan fungsi required sehingga nantinya akan di link-an jika mengklik button atau meneka enter pada keyboard.

F. TUGAS CHALENGE Source Code HTML : - File css

#wrapper{

margin: auto;

width: 900px;

}

#header{

height: 110px;

background-image:

-moz-linear-gradient(bottom, #FFDBFB 0%, #FF3366 50%, #FF4848 100%);

border-bottom: 10px solid

black; }

#inner{

float: left;

margin: auto;

background-image:

-moz-linear-gradient(bottom, #FF7575 0%, #DBDBFF 50%, #6755E3 100%); }

#sidebar{

float: left;

margin-right: 20px;

width: 148px;

height: 330px;

}

#sidebar ul {

margin: 0px -40px;

width: 150px;

height: 330;

list-style-type:none;

padding: 10px, 10px, 10px,

10px;

margin: 5px, 5px, 5px, 5px;

}

#sidebar a:link, #sidebar

a:visited, #sidebar a:active{

text-decoration: underline;

}

#sidebar a{

padding: 15px 15px 15px 15px;


(29)

background-image: -moz-linear-gradient(bottom, #FF7575 0%, #DBDBFF 50%, #8C8CFF 100%);

color: black;

font-family: Jokerman;

font-size: 15px;

}

#content{

float: left;

width: 732px;

height: 500px; } #footer { clear: both; height: 70px; background-image: -moz-linear-gradient(bottom, #FFDBFB 0%, #FF3366 50%, #FF4848 100%); border-top: 10px solid black; } .box1 { float: left; margin: 10px; width: 100px; height: 100px; } .box2 { float: left; width: 500px; height: 100px; } .box3 { float: right; width: 280px; height: 50px; } .box4 { float: right; width: 280px; height: 30px;

font-family: "Monotype Corsiva" }

.box5 {

float: right; width: 294px; height: 50px;

font-family: "Bauhaus 93"; font-size: 19px; } .box6 { float: left; width: 290px; height: 100px;

font-family: "Bauhaus 93"; font-size: 12px; } #textheader { float: left; margin: auto; height: 60px;

padding: 20px 0px 20px 20px; font-size: 24px;

font-weight: bold; text-align : left;

font-family: "Imprint MT Shadow"; color: black; } .link a:hover{ text-decoration: underline; }

- File html

<!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/xht ml" xml:lang="en" lang="en"> <head>

<title>Chalenge</title>

<link rel="stylesheet"

href="mystyle1.css"

type="text/css" /> </head>

<body>

<div id="wrapper">

<div id="header">

<div


(30)

<img src="psm.jpeg"

align="right" height="80"

width="80"></img>

</div>

<div

class="box2"align="left">

<div id="textheader">

UKPSM Universitas Negeri Malang -Swara Satata kti-ǡ </div> </div> <div

class="box3"align="left">

<div class="link">

<a href="Link1.html">Home </a>| <a

href="Link2.html"> Sitemap </a> | <a

href="Link3.html"> RSS </a>| <a href="Link4.html">Contact </a>| <a href="Link5.html">About us </a>

</div>

</div>

<div

class="box4"align="Center">

<label for="firstname">Search: </label>

<input type="text"

name="search" required pattern="[A-Za-z]{1,20}"

placeholder = "search"><br><br>

</div>

</div>

<div id="inner">

<div id="sidebar">

<ul>

<li><a href="#">Home</a></li>

<li><a

href="#">Profil Anggota</a></li>

<li><a href="#">Foto</a></li>

<li><a href="#">Video</a></li>

<li><a href="#">Prestasi</a></li>

<li><a href="#">Event</a></li>

<li><a

href="#">Materi Lagu</a></li>

</ul>

</div>

<div id="content">

<div id="topcontent">

<img src="1.jpg"

width="725" height="500"></img>

</div>

<div id="maincontent">

</div>

</div>

</div>

<div id="footer">

<div

class="box5"align="center">

PSM_UM Swara Satata ktiǡ

"Sehati Sejiwa Seroh" </div>

<div

class="box6"align="left">

Copyright &copy; 2015 by Ananda Putri Syaviri

</br>FB : Swara Satata kti Choir

ǡ

</br>Twitter : @PSM_UM </br>Ig :

@swara_satata_cakti </div>

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


(31)

Hasil Tampilan Web :

Penjelasan :

- Program diatas menggunakan pendekatan linked. file CSS dan html dibedakan. Pada bagian header, menggunakan 4 box untuk mendesain header seperti yang tampak pada hasil. Box 1 digunakan untuk meletakkan logo, box 2 digunakan untuk meletakkan tulisan, box 3 untuk content link , dan box 4 untuk lebel search, jika ingin menacri sesuatu yang berkaitan dengan informasi yang ada pada halaman web tersebut. Pengaturan-pengaturan margin, padding, height, width, font-size dll, dideklarasikan pada file css yang bernama mystyle1 pada program ini. Kemudian untuk pemanggilan setiap aturan agar dapat ditampilkan seperti pada hasil adalah dengan mencantumkan setiap class atau id yang digunakan pada file css, pada setiap bagian yang ada pada body. Seperti pada table header maka class box1,2,3,4 harus dicantumkan agar dapat tampil seperti pada hasil. pada file css juga dapat membuat warna background dengan warna gradasi atau warna biasa dengan format berikut : background-image: -moz-linear-gradient(bottom, #FFDBFB 0%, #FF3366 50%, #FF4848 100%);

Yang artinya untuk pengaturan gambar background dengan menggunakan type moz linier gradient dengan nilai parameter kode-kode warna dan besar persentase untuk pengaturan warna tersebut.


(32)

G.

Kesimpulan

a) Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.

b) Untuk meberikan style pada header, sidebar, content, maupun footer, pendeklarasian desain dapat dituliskan pada file css, sehingga lebih mudah untuk memahami alur pembuatan halam web.

c) Pendekatan Embedded dilakukan dengan meletakkan properti style di dalam satu blok di dokumen HTML. Pendekatan Inline dilakukan dengan meletakkan properti style secara langsung per baris atau per elemen HTML. Pendekatan Linked dilakukan dengan meletakkan properti style di file berekstensi css dan dikaitkan dengan dokumen HTML( file css dan html dipisah menjadi 2 file berbeda).

d) Untuk mendesain layout dengan margin padding, border dapat diatur sesuai dengan keinginan, satuan untuk penggunaan margin, padding, border adalah px.

e) Untuk meletakkan suatu box dapat menggunakan float. Float berfungsi meletakkan objek sesuai dengan arah yang diinginkan , left/right. Untuk mereset letak box dapat menggunakan fungsi clear right/left/both.

H. Daftar Pustaka

Modul Praktikum.2012 . Cascading Style Sheet. Universitas Negeri Malang Fakultas Teknik Jurusan Teknik Elektro.


(1)

#menusearch {

float: right;

margin : 25px 60px 0 0;

width: 250px;

height : 30px;

font-family: "Monotype Corsiva" }

.link a:hover{

text-decoration: underline;

}

- Dokumen HTML <!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" xml:lang="en" lang="en">

<head>

<title>Studi Kasus 1</title>

<link rel="stylesheet" href="box.css" type="text/css" />

</head> <body>

<div id="header">

<div class="box1"align="left">

<img src="um.png" align="right" height="100" width="100"></img>

</div>

<div class="box2"align="left">

<div id="textheader">

Teknik Elektro

</div>

</div>

<div class="box3"align="center">

<div class="link">

<a href="Link1.html">Home </a>| <a href="Link2.html"> Sitemap </a> | <a href="Link3.html"> RSS </a>| <a href="Link4.html">Contact </a>| <a href="Link5.html">About us </a>

</div>

</div>

<div class="box4"align="right">

<div id="menusearch">

<label for="firstname">Search: </label>

<input type="text" name="search" required

pattern="[A-Za-z]{1,20}" placeholder = "search"><br><br>

</div>

</body> </html>


(2)

3

0

Hasil Tampilan Web:

Penjelasan :

- Program diatas menggunakan 4box untuk mendesain header agar dapat tampil seperti pada hasil. Box 1 digunakan untuk meletakkan logo, box 2 digunakan untuk meletakkan tulisan, box 3 untuk content link , dan box 4 untuk lebel search, jika ingin menacri sesuatu yang berkaitan dengan informasi yang ada pada halaman web tersebut. Menggunakan pendekatan linked sehingga pada bagian head dicantumkan halaman html yang akan di link-an. Menggunakan file css bernama box yang isinya pengaturan dari desain penyusun header. Kemudian pada bagian body, hanya ada id header, karena hanya akan membuat sebuah header web. Pada bagian header, dicantumkan pemanggilan class box1,2,3,4 untuk dapat menampilkan pengaturan yang dideklarasikan pada file css. Untuk field search menggunakan fungsi required sehingga nantinya akan di link-an jika mengklik button atau meneka enter pada keyboard.

F. TUGAS CHALENGE Source Code HTML :

- File css

#wrapper {

margin: auto;

width: 900px; }

#header{

height: 110px;

background-image: -moz-linear-gradient(bottom, #FFDBFB 0%, #FF3366 50%, #FF4848 100%);

border-bottom: 10px solid black;

}

#inner{

float: left;

margin: auto;

background-image: -moz-linear-gradient(bottom, #FF7575 0%, #DBDBFF 50%, #6755E3 100%); }

#sidebar {

float: left;

margin-right: 20px;

width: 148px;

height: 330px; }

#sidebar ul {

margin: 0px -40px;

width: 150px;

height: 330;

list-style-type:none;

padding: 10px, 10px, 10px, 10px;

margin: 5px, 5px, 5px, 5px;

}

#sidebar a:link, #sidebar a:visited, #sidebar a:active {

text-decoration: underline;

}

#sidebar a{

padding: 15px 15px 15px 15px;


(3)

background-image: -moz-linear-gradient(bottom, #FF7575 0%, #DBDBFF 50%, #8C8CFF 100%);

color: black;

font-family: Jokerman;

font-size: 15px;

} #content {

float: left;

width: 732px; height: 500px; } #footer { clear: both; height: 70px; background-image: -moz-linear-gradient(bottom, #FFDBFB 0%, #FF3366 50%, #FF4848 100%); border-top: 10px solid black; } .box1 { float: left; margin: 10px; width: 100px; height: 100px; } .box2 { float: left; width: 500px; height: 100px; } .box3 { float: right; width: 280px; height: 50px; } .box4 { float: right; width: 280px; height: 30px;

font-family: "Monotype Corsiva" }

.box5 {

float: right; width: 294px; height: 50px;

font-family: "Bauhaus 93"; font-size: 19px; } .box6 { float: left; width: 290px; height: 100px;

font-family: "Bauhaus 93"; font-size: 12px; } #textheader { float: left; margin: auto; height: 60px;

padding: 20px 0px 20px 20px; font-size: 24px;

font-weight: bold; text-align : left;

font-family: "Imprint MT Shadow"; color: black; } .link a:hover{ text-decoration: underline; }

- File html <!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/xht ml" xml:lang="en" lang="en"> <head>

<title>Chalenge</title>

<link rel="stylesheet" href="mystyle1.css"

type="text/css" /> </head>

<body>

<div id="wrapper">

<div id="header">

<div


(4)

3

0

<img src="psm.jpeg"

align="right" height="80" width="80"></img>

</div>

<div

class="box2"align="left">

<div id="textheader">

UKPSM Universitas Negeri Malang -Swara Satata kti-ǡ </div> </div> <div class="box3"align="left"> <div class="link"> <a

href="Link1.html">Home </a>|

<a

href="Link2.html"> Sitemap </a> |

<a

href="Link3.html"> RSS </a>|

<a

href="Link4.html">Contact </a>|

<a

href="Link5.html">About us </a>

</div>

</div>

<div

class="box4"align="Center">

<label

for="firstname">Search: </label>

<input type="text" name="search" required

pattern="[A-Za-z]{1,20}"

placeholder = "search"><br><br>

</div>

</div>

<div id="inner">

<div id="sidebar">

<ul>

<li><a

href="#">Home</a></li>

<li><a

href="#">Profil Anggota</a></li>

<li><a

href="#">Foto</a></li>

<li><a

href="#">Video</a></li>

<li><a

href="#">Prestasi</a></li>

<li><a

href="#">Event</a></li>

<li><a

href="#">Materi Lagu</a></li>

</ul>

</div>

<div id="content">

<div id="topcontent">

<img src="1.jpg" width="725" height="500"></img>

</div> <div id="maincontent"> </div> </div> </div>

<div id="footer">

<div

class="box5"align="center">

PSM_UM Swara Satata ktiǡ

"Sehati Sejiwa Seroh" </div>

<div

class="box6"align="left">

Copyright &copy; 2015 by

Ananda Putri Syaviri

</br>FB : Swara Satata kti Choir

ǡ

</br>Twitter : @PSM_UM </br>Ig :

@swara_satata_cakti </div>

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


(5)

Hasil Tampilan Web :

Penjelasan :

- Program diatas menggunakan pendekatan linked. file CSS dan html dibedakan. Pada bagian header, menggunakan 4 box untuk mendesain header seperti yang tampak pada hasil. Box 1 digunakan untuk meletakkan logo, box 2 digunakan untuk meletakkan tulisan, box 3 untuk content link , dan box 4 untuk lebel search, jika ingin menacri sesuatu yang berkaitan dengan informasi yang ada pada halaman web tersebut. Pengaturan-pengaturan margin, padding, height, width, font-size dll, dideklarasikan pada file css yang bernama mystyle1 pada program ini. Kemudian untuk pemanggilan setiap aturan agar dapat ditampilkan seperti pada hasil adalah dengan mencantumkan setiap class atau id yang digunakan pada file css, pada setiap bagian yang ada pada body. Seperti pada table header maka class box1,2,3,4 harus dicantumkan agar dapat tampil seperti pada hasil. pada file css juga dapat membuat warna background dengan warna gradasi atau warna biasa dengan format berikut : background-image: -moz-linear-gradient(bottom, #FFDBFB 0%, #FF3366 50%, #FF4848 100%);

Yang artinya untuk pengaturan gambar background dengan menggunakan type moz linier gradient dengan nilai parameter kode-kode warna dan besar persentase untuk pengaturan warna tersebut.


(6)

G.

Kesimpulan

a) Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.

b) Untuk meberikan style pada header, sidebar, content, maupun footer, pendeklarasian desain dapat dituliskan pada file css, sehingga lebih mudah untuk memahami alur pembuatan halam web.

c) Pendekatan Embedded dilakukan dengan meletakkan properti style di dalam satu blok di dokumen HTML. Pendekatan Inline dilakukan dengan meletakkan properti style secara langsung per baris atau per elemen HTML. Pendekatan Linked dilakukan dengan meletakkan properti style di file berekstensi css dan dikaitkan dengan dokumen HTML( file css dan html dipisah menjadi 2 file berbeda).

d) Untuk mendesain layout dengan margin padding, border dapat diatur sesuai dengan keinginan, satuan untuk penggunaan margin, padding, border adalah px. e) Untuk meletakkan suatu box dapat menggunakan float. Float berfungsi meletakkan

objek sesuai dengan arah yang diinginkan , left/right. Untuk mereset letak box dapat menggunakan fungsi clear right/left/both.

H. Daftar Pustaka

Modul Praktikum.2012 . Cascading Style Sheet. Universitas Negeri Malang Fakultas Teknik Jurusan Teknik Elektro.