Pertemuan ke -7 Dan ke-8

LAPORAN pengenalan webPERTEMUAN KE 7 dan 8

Disusun Oleh :Nama : Mohamad Hanafi

Nim : 095410134Jurusan : TEKNIK INFORMATIKA

LABOROTARIUM TERPADUSEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

AKAKOMYOGYAKARTA

2011

PERTEMUAN KE-7PENGENALAN CSS

A. DASAR TEORIPada praktek pertemuan ke-7 ini kita belajar mengenai CSS. Pada praktikum kali ini kita akan dikenalkan tentang CSS. CSS sendiri adalah singkatan dari (Cascading Style Sheet) yang digunakan dalam kode HTML untuk menciptakan suatu kumpulan style yang terkadang dapat digunakan untuk memperluas kemampuan HTML.Tag yang digunakan untuk mendefinisikan style sheet menggunakan CSS adalah tag <style> dan </style>. Dalam tag <style> masih terdapat atribut type dengan nilai berupa “teks/css”. Pasangan tag tersebut harus diletakkan dalam pasanagan <head>dan </head>.

B. PEMBAHASANMengenali kode Css:1. Pasangan tag <STYLE> dan </STYLE> digunakan untuk mendefinisikan style sheet

menggunakan Css. Oleh karena itu, dalam tag <style> terdapat atribut TYPE dengan nilaiberupa ―teks/CSS‖. Pasangan tag tersebut harus diletakkan dalam pasangan tag <HEAD>dan </HEAD>. Umumnya setelah tag <TITLE> dan </TITLE>.

2. Pasangan <!— dan --> merupakan komentar dalam HTML. Biasa digunakan dengantujuan agar sekiranya browser tidak mendukung atau tidak mengenali style sheet makayang terdapat dalam pasangan tersebut akan diabaikan, tetapi penulisan pasangan initidak diharuskan. Dan yang berada dalam pasangan ini adalah definisi style.

Praktikum:body {background-color: yellow}h1 {font-size: 36pt}h2 {color: blue}p {margin-left: 50px}

Scrip diatas disimpan dalam nama ex1.css. Script diatas merupakan kode dari CSS dalam pengaturan yang ada di dalam tag <body> dengan memberikan background atau warna latar belakang dengan warna kuning. pada tag h1 dengan mengatur ukuran hurufnya yang diberi ukuran 36pt. pada tag h2, dengan mengatur warna hurufnya, dengan memberi warna biru pada hurufnya. dan pada tag p dengan mengatur garis tepi dengan rata kiri yang berjarak 50px(pixels). Scrip diatas ini tidak untuk dijalankan ke browser langsung melainkan untuk dipanggil ke scrip html berikutnya.

<html><head><link rel="stylesheet"type="text/css" href="ex1.css" /></head><body><h1>Tulisan ini berukuran 36</h1><h2>Tulisan ini berwarna biru</h2><p>Ini paragraf dengan left margin 50 pixels</p></body></html>

Scrip diatas disimpan dalam nama file.html. stylesheet merupakan pengaturan untuk teksnya, kemudian type yang digunakan adalah teks/css, selanjutnya href="ex1.css" artinya nanti pada saat program ini dipanggil, maka file akan mengarah pada file ex1.css yang telah kita buat diatas tadi. Sebuah teks dengan tag h1 yang nanti akan ditampilkan pada web browser dengan pengaturan yang sudah diatur pada kode css diatas, yaitu dengan memberikan ukuran huruf dengan ukuran 36. pada tag h2 yang nanti akan ditampilkan pada web browser dengan pengaturan yang sudah diatur pada kode css diatas, yaitu dengan mengubah warna tulisan menjadi warna biru. Sebuah teks dengan tag h1 yang nanti akan ditampilkan pada web browser dengan pengaturan yang sudah diatur pada kode css diatas, yaitu dengan memberikan garis tepi dengan rata kiri yang berjarak 50px(pixels).Hasilnya :

<html><head><style type="text/css">h1{background-color:#FF0000;}p{background-color:#e0ffff;}div{background-color:#b0c4de;}</style></head><body><h1>Contoh Background Css</h1><div>Ini tag yang menggunakan tag div<p>Ini paragraf yang mempunyai backgroud</p>Ini masih ditag div

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

Script diatas untuk mendefinisikan style sheet bahwa kode yang digunakan adalah teks/css. pada tag h1 pengaturan dengan memberikan warna background menggunakan warna RGB(red green blue) yaitu warna merah. Merupakan pengaturan pada tag p dengan memberikan warna background menggunakan warna RGB(red green blue) yaitu warna biru muda. pada tag div dengan memberikan warna background menggunakan warna RGB(red green blue) yaitu warna aqua. Pada tag h1 yang nanti akan ditampilkan di web browser kemudian disertakan dengan pengaturan pada kode css diatas yaitu dengan memberikan warna background dengan warna merah. pada tag div yang nanti akan ditampilkan di web browser kemudian disertakan dengan pengaturan pada kode css diatas yaitu dengan memberikan warna background dengan warna drag blue/biru muda. Pada tag p yang nanti akan ditampilkan di web browser kemudian disertakan dengan pengaturan pada kode css diatas yaitu dengan memberikan warna background dengan warna aqua. dari tag div diatas yang nanti juga akan ditampilkan di web browser kemudian disertakan dengan pengaturan pada kode css ditas yaitu dengan memberikan warna background dengan warna drag blue/biru muda.Hasilnya :

Pada praktek no.3 yaitu kita memodifikasi pada praktek no-2 untuk mengubah warna text menjadi putih dengan menambahkan perintah color:white; pada script css-nya. maka scip yang dituliskan adalah seperti berikut :

<html><head><style type="text/css">h1{background-color:#FF0000;color:white;}p{

background-color:#e0ffff;color:white;}div{background-color:#b0c4de;color:white;}</style></head><body><h1>Contoh Background Css</h1><div>Ini tag yang menggunakan tag div<p>Ini paragraf yang mempunyai backgroud</p>Ini masih ditag div</div></body></html>

Hasilnya :

<html><head><style type="text/css">p.normal {font-style:normal}p.italic {font-style:italic}</style></head><body><p class="normal">Ini paragraf, dengan font normal.</p><p class="italic">Ini paragraf, dengan font miring.</p></body></html>

Script diatas untuk mendefinisikan style sheet bahwa kode yang digunakan adalah teks/css.Merupakan pengaturan pada tag p.normal dengan mengatur jenis huruf/sytle yaitu menggunakan normal. pada tag p.italic dengan mengatur jenis huruf/style huruf-nya yaitu menggunakan italic atau huruf miring. Untuk <p Class=”normal”> akan ditampilkan di web browser kemudian disertakan dengan pengaturan pada kode css ditas yaitu dengan

memberikan jenis huruf/sytle huruf-nya yaitu menggunakan normal, karena pada script diatas yang digunakan sama-sama tag p, untuk membedakan dengan menggunakan perintah <p class="normal">. pengaturan pada kode css diatas yaitu dengan memberikan jenis huruf/sytle huruf-nya yaitu menggunakan italic atau huruf miring, karena pada script diatas yang digunakan sama-sama tag p, untuk membedakan dengan menggunakan perintah <p class="italic">. Hasilnya :

<html><head><style>h1 {font-size:40px}h2 {font-size:30px}p {font-size:14px}</style></head><body><h1>Ini heading ukuran 40</h1><h2>Ini heading ukuran 30</h2><p>Ini paragraf ukuran 14</p></body></html>

Scrip diatas Merupakan pengaturan pada tag h1 dengan pengaturan mengubah ukuran hurufnya yaitu 40px, sehingga ukuran teks pada tag h1 nanti pada web browser berukuran 40px. pada tag h2 dengan pengaturan mengubah ukuran hurufnya yaitu 30px, sehingga ukuran teks pada tag h1 nanti pada web browser berukuran 30px. pada tag p dengan pengaturan mengubah ukuran hurufnya yaitu 14px, sehingga ukuran teks pada tag h1 nanti pada web browser berukuran 14px. Pada <h1>Ini heading ukuran 40</h1> yang nanti akan ditampilkan di web browser kemudian disertakan dengan pengaturan pada kode css diatas yaitu dengan memberikan ukuran hurufnya 40px. Pada <h2>Ini heading ukuran 30</h2> yang nanti akan ditampilkan di web browser kemudian disertakan dengan pengaturan pada kode css diatas yaitu dengan memberikan ukuran hurufnya 30px. Pada <p>Ini paragraf

ukuran 14</p> yang nanti akan ditampilkan di web browser kemudian disertakan dengan pengaturan pada kode css diatas yaitu dengan memberikan ukuran hurufnya 14px.Hasilnya :

Pada praktikum yang ke enam penjelasannya sama dengan script no 5, karena ini hanya modifikasi dari script no 5.hanya saja di sini pada tulisan masing-masing tag dibrikan warna yang berbeda-beda. Dengan menggunakan perintah {color:aqua}. Untuk tag h1 diberi warna aqua, tag h2 diberi warna merah dan pada tag p diberi warna hijau.Scrip yang dituliskan :

<html><head><style>h1 {font-size:40px;color:aqua;}h2 {font-size:30px;color:red;}p {font-size:14px;color:green;}</style></head><body><h1>Ini heading ukuran 40</h1><h2>Ini heading ukuran 30</h2><p>Ini paragraf ukuran 14</p></body></html>

Dengan tampilan seperti berikut :

LATIHAN

<html><head><style type="text/css">h1{font-size:30px;color:blue;text-align:center;}p.kanan{text-align:right;}p.kiri{text-align:justify;}</style></head><body><h1>Contoh Text Align dengan CSS</h1><p class="kanan">September, 2009</p><p class="kiri">Ada seseorang berkata kepada saya bahwa, 'Setiap kali Anda merasa ingin mengkrotik siapapun,<br/>"katanya kepada saya, Ingatlah, bahwa semua orang di dunia memiliki kelebihan yang sama<br/>seperti yang Anda miliki'.ingatlah selalu kata-kata itu.oke.oke.oke.oke</p>

Script diatas untuk mendefinisikan style sheet bahwa kode yang digunakan adalah teks/css.pada tag h1 dengan pengaturan mengubah ukuran hurufnya yaitu 30px, sehingga ukuran teks pada tag h1 nanti pada web browser berukuran 30px, kemudian memberikan warna pada teksnya menjadi warna biru serta pengaturan untuk teksnya diberi rata tengah. Merupakan pengaturan pada tag p.kanan dengan pengaturan untuk teksnya diberi rata kanan. pada tag p.kanan dengan pengaturan pengaturan untuk teksnya diberi rata kanan kiri. Pada <h1>Contoh Text Align dengan CSS</h1>yang nantinya akan ditampilkan di web

browser kemudian disertakan dengan pengaturan pada kode css diatas yaitu dengan memberikan ukuran hurufnya 30px, teksnya berwarna biru serta rata tengah. Pada <p class=”kanan”>September, 2009</p> yang nantinya akan ditampilkan di web browser kemudian disertakan dengan pengaturan pada kode css diatas yaitu dengan memberikan rata kanan pada teks. Pada <p class="kiri"> yang nantinya akan ditampilkan di web browser kemudian disertakan dengan pengaturan pada kode css ditas yaitu dengan memberikan rata kanan kiri pada teks.Hasilnya :

C. KESIMPULANDari praktek dan pembahasan diatas maka dapat diambil kesimpulan bahwa css merupakan bagian dai script html yang berfungsi untuk memperluas kemampuan html. Dengan css kita memperindah dan mengatur halaman web secara praktis. Sehingga dari praktek pertemuan kali ini kita bisa mengenal mengenai script-script css, serta kita bisa membaut sebuah web dimana didalamnya terdapat script html juga scrit css.

D. LISTING Terlampir

E. TUGASScript

<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link href="style.css" type="text/css" rel="stylesheet" /><title>Tugas Modul 7</title></head><body background="super.jpg"><caption><center><h1> Daftar Warga </h1></center></caption><table width="900" align="center" border="1" bgcolor="aqua">

<tr> <th rowspan="2" colspan="2"> Warga </th> <th colspan="6"> Kota </th></tr>

<tr> <th> Klaten </th> <th> Yogya </th> <th> Solo </th> <th> Wonogiri </th> <th> Ponorogo </th> <th> Malang </th></tr>

<tr> <th rowspan="2"> Jenis Kelamin </th> <th> Pria </th> <td> 30 </td> <td> 20 </td> <td> 30 </td> <td> 22 </td> <td> 19 </td> <td> 9 </td></tr>

<tr> <th> Wanita </th> <td> 20 </td> <td> 8 </td> <td> 18 </td> <td> 10 </td> <td> 15 </td> <td> 18 </td></tr> </table></body></html>

Hasilnya :

PERTEMUAN KE-8CSS LANJUT

A. DASAR TEORIPada praktek pertemuan ke-8 ini kita masih membahas mengenai css. Hanya saja pada pertemuan ini kita membahas lebih banyak mengenai css misalnya mengenai mengatur font dan teks dengan menggunakan properties yang berbeda, memberikan background gambar memberikan link dan sebagainya.

B. PEMBAHASANMengatur font dan teksBerkaitan dengan pengaturan font dan teks, css mendukung sejumlah properti seperti fontsize,font-family, text-decoration Properti font-size

Properti font-size berguna untuk menentukan ukuran font. Ada empat cara untukmemberikan nilai ke properti ini, yaitu melalui nilai absolut, relatif, ukuran plus satuan,dan presentase.

Mengatur tepiUntuk melakukan pengaturan tebal tepi (margin), bisa menggunakan properti bernamamargin. ada dua cara yang bisa dilakukan.Pertama, dengan memberikan suatu angka diikuti dengan satuan yang dapat berupa em, ex,px, pt, pc, in, mm, cm.

Memberi jarakUntuk memeberi jarak antara tepi dari suatu tag terhadap isi di dalam tag, anda bisa menggunakan properti padding.

Mengatur warna Fungsi rgb()

Berguna untuk membentuk warna didasarkan pada nilai komponen pembentuk warna.Sebagaimana diketahui, setiap warna bisa dibentuk dengan mengatur komposisi warnamerah, hijau, biru. Bentuk fungsi:rgb (komponen_merah, komponen_hijau, komponen_biru);

praktikum:<html><head><style type="text/css">a.one:link {color: #ff0000}a.one:visited {color:#0000ff}a.one:hover {color:#3300CC}

a.two:link {color: #ff0000}a.two:visited {color: #0000ff}a.two:hover {font-size: 150%}

a.three:link {color: #ff0000}a.three:visited {color: #0000ff}a.three:hover {background: #66ff66}

a.four:link {color: #ff0000}a.four:visited {color: #0000ff}a.four:hover {font-family: monospace}

a.five:link {color: #ff0000; text-decoration: none}a.five:visited {color: #0000ff; text-decoration: none}a.five:hover {text-decoration: underline}</style></head>

<body> <p>Arahkam kursor pada link untuk melihat perubahannya</p> <p><b><a class="one" href="help.htm" target="_blank"> link berubah warna</a></b></p> <p><b><a class="two" href="help.htm" target="_blank"> link berubah ukuran</a></b></p> <p><b><a class="three" href="help.htm" target="_blank"> link berubah warna background</a></b></p> <p><b><a class="four" href="help.htm" target="_blank"> link berubah font nya</a></b></p> <p><b><a class="five" href="help.htm" target="_blank"> link garis bawah</a></b></p></body></html>

Script diatas untuk mendefinisikan style sheet bahwa kode yang digunakan adalah teks/css. script dari css yang mengatur pada tag a.one dengan memberikan settingan untuk warna link, warna link setelah diklik dan warna link jika cursor diarahkan pada link tersebut dengan menggunkan warna RGB(red green blue). Pada tag a.two yaitu memberikan pengaturan memberikan warna link, memberikan pengaturan warna link sesudah diklik dan memberikan ukuran font menjadi 150% apabila kursor diarahkan pada teks tersebut, maka untuk ukuran font menjadi besar. Pada tag a.three yaitu memberikan pengaturan warna link, sesudah diklik dan memberikan background, sehingga apabila kursor diarahkan pada teks tersebut, maka akan terdapat background pada text

tersebut yang diberi warna menggunakan warna RGB(red green blue). Pada tag a.four yaitu memberikan pengaturan warna link, sesudah diklik dan memberikan untuk mengubah jenis fontnya, sehingga apabila kursor diarahkan pada teks tersebut, maka untuk font atau jenis fonrnya akan berubah. Pada tag a.four yaitu memberikan pengaturan memberikan warna link, sesudah diklik dan memberikan pengaturan untuk memberi garis bawah pada textnya, sehingga apabila kursor diarahkan pada teks tersebut, maka pada text tersebut akan muncul untuk garis bawah. pada tag <p>Arahkam kursor pada link untuk melihat perubahannya</p>yang mana text ini nanti akan ditampilkan pada web browser. Script <p><b><a class="one" href="help.htm" target="_blank"> sebuah text yang ditampilkan pada web browser dimana untuk text ini terdapat pengaturan pada script css diatas yaitu ada tag a.one, kemudian untuk tujuan link adalah hel.htm targetnya adalah blank. Script <p><b><a class="two" href="help.htm" target="_blank"> merupakan sebuah text yang ditampilkan pada web browser dimana untuk text ini terdapat pengaturan pada script css diatas yaitu ada tag a.two, kemudian untuk tujuan link adalah hel.htm targetnya adalah blank. Script <p><b><a class="three" href="help.htm" target="_blank"> merupakan sebuah text yang ditampilkan pada web browser dimana untuk text ini terdapat pengaturan pada script css diatas yaitu ada tag a.three, kemudian untuk tujuan link adalah hel.htm targetnya adalah blank. Script <p><b><a class="four" href="help.htm" target="_blank"> merupakan sebuah text yang ditampilkan pada web browser dimana untuk text ini terdapat pengaturan pada script css diatas yaitu ada tag a.four, kemudian untuk tujuan link adalah hel.htm targetnya adalah blank. Script <p><b><a class="five" href="help.htm" target="_blank"> merupakan sebuah text yang ditampilkan pada web browser dimana untuk text ini terdapat pengaturan pada script css diatas yaitu ada tag a.five, kemudian untuk tujuan link adalah hel.htm targetnya adalah blank.Hasilnya :

<html><head><style type="text/css">ul{list-style-type:none;margin:0;padding:0;overlow:hidden;

}li{float:left;}h1{font-size:30px;color:#ffffff;}table{border:1px solid black;}td{text-align:center;background-color:#9999FF;}td.atas{text-align:center;backgound-position:center;background-image:url(gambar.jpg);}a:link,a:visited{display:block;width:120px;font-weight:bold;color:#FFFFFF;background-color:#9966FF;text-align:center;padding:4px;text-decoration:none;text-transform:uppercase;}a:hover,a:active{background-color:#990099;}</style></head><body><table> <tr> <td class="atas"><h1>WEBSITEKU</h1> </td> </tr> <tr> <td> <ul> <li><a href="home.html">Home</a></li> <li><a href="profil.html">Profil</a></li> <li><a href="friends.html">Friends</a></li> <li><a href="Inbox.html">Inbox</a></li> </ul> </td> </tr> <tr>

<td height="300">Selamat datang di website kami</td> </tr> <tr> <td>Copy@right by hanafi<br>2011</td> </tr></table></body></html>

Script diatas untuk mendefinisikan style sheet bahwa kode yang digunakan adalah teks/css. Script css untuk tag ul yaitu memberikan pengaturan untuk list-style-type tidak diberi apa-apa, untuk margin dan paddingnya juga 0, kemudian untuk overflow diberi hidden artinya pada link tersebut sub-sub filenya disembunyikan. Script untuk tag li yaitu memberikan pengaturan untuk floatnya diletakkan pada rata kiri. Script untuk tag h1 yaitu memberikan pengaturan untuk ukuran hurufnya diberi ukuran 30px serta warna tulisanya menggunakan warna RGB yaitu warna putih. Script untuk tag table yaitu memberikan pengaturan untuk bordernya diberi nilai 1 dan backgroung tablenya diberi warna black. Script untuk tag td yaitu memberikan pengaturan untuk tulisanya diberi rata tengah, serta background untuk link apabila kursor diarahkan kelink maka akan terdapat background berwarna ungu. Script untuk tag td.atas yaitu memberikan pengaturan untuk tulisanya diberi rata tengah, untuk posisinya juga rata tengah, dan backgroungnya diberi sebuah gambar. Script untuk link, yaitu lebarnya diberi nilai 120px, diberi tebal atau cetak tebal, warna hurufnya adalah putih, diletakkan di tengah, jarak antara tepi dari suatu tag terhadap isi di dalam tag adalah 4px, teks tidak di apa-apakan, sedangkan hurufnya dijadikan huruf capital semua. Script a:hover artinya adalah untuk merubah tampilan sebuah link pada saat link tersebut disentuh oleh sebuah kursor, biasanya akan berubah warna, disini diberi untuk backgroundnya barwarna ungu tua. Script <tr><td class="atas"><h1>WEBSITEKU</h1></td></tr> merupakan sebuah text yang ditampilkan pada web browser dimana untuk text ini terdapat pengaturan pada script css diatas yaitu ada tag h1,sehingga nanti untuk text yang ada pada tag h1 akan tampil sesuai pengaturan diatas. Lalu pada Script dibawah ini : <tr><td> <ul> <li><a href="home.html">Home</a></li> <li><a href="profil.html">Profil</a></li> <li><a href="friends.html">Friends</a></li> <li><a href="inbox.html">Inbox</a></li> </ul> </tr></td> merupakan sebuah link yang ditampilkan pada web browser dimana untuk text link terdapat pengaturan pada script css diatas yaitu ada tag ul dan li,sehingga nanti untuk link-link diatas yang ada pada tag ul dan li akan tampil sesuai pengaturan diatas.Script <tr><td height="300">Selamat datang di Website kami</td></tr> <tr><td>Copy@right by hanafi<br>2010</td></tr> merupakan sebuah text yang ditampilkan pada web browser dimana untuk text ini terdapat pengaturan pada script css diatas yaitu ada tag td,sehingga nanti untuk text yang ada pada tag td akan tampil sesuai pengaturan diatas. Sehingga hasilnya terlihat pada listing. Hasilnya :

LATIHAN <html><head><style type="text/css">ul{list-style-type:none;margin:0;padding:0;overlow:hidden;}li{float:left;}h1{font-size:30px;color:#FF0000;}table{border:1px solid black;}td{text-align:center;

background-color:#008000;}td.atas{text-align:center;backgound-position:center;background-image:url(pemandangan.jpg);}a:link,a:visited{display:block;width:120px;font-weight:bold;color:#00FFFF;background-color:#FFFF00;text-align:center;padding:4px;text-decoration:none;text-transform:uppercase;}a:hover,a:active{background-color:#C0C0C0;}</style></head><body><table border="0" width="90%" height="50%"> <tr> <td class="atas"><h1>WEBSITEKU</h1> </td> </tr> <tr> <td> <a href="home.html">Home</a> </td> <tr> <td> <a href="profil.html">Profil</a> </td> <tr> <td> <a href="friends.html">Friends</a> </td> <tr> <td> <a href="Inbox.html">Inbox</a> </td> </tr> <tr> <td height="300">Selamat datang di website kami</td> </tr> <tr> <td>Copy@right by hanafi<br>2011</td> </tr></table></body></html>

Hasilnya :

C. KESIMPULANDari pratek dan pembahasan diatas maka dpata diambil kesimpulan bahawa property-properti dalam css itu terdapat banyak macamnya. Untuk pertemuan ke8 ini script-script css masih sama dengan modul sebelumnya, hnya saja dipertemuan ini untuk scriptnya lebih banyak karena disini kita membahas css lanjut. Untuk css lanjut ini terdapat penambahan diantaranya property untuk mengatur background dengan gambar, terdapat link, pengaturan pada table dengan member border dan backgroung pada table dan sebagainya. Dari praktek ini kita bisa mengatur text, link dengan propert-properti

D. LISTINGTerlampir

E. TUGAS<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Pertemuan ke -7 Dan ke-8

Documents

Transcript of Pertemuan ke -7 Dan ke-8