1210651097 css

Laporan Praktikum Pemrograman Beroriantasi objek

Pemrograman Berbasis Web

Oleh

Nama :Ardyansyah Ahmad

Nim :1210651097

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH JEMBER

of 18


1. Tujuan Instruksional Khusus (TIK)

• Memahami konsep dasar CSS dan penggunaannya pada web.

2. Teori

Apa itu css ?

• CSS adalah singkatan dari Cascading Style Sheets.

• CSS adalah aliran dari suatu kode ke kode lain yang saling berhubungan.

• CSS merupakan kumpulan kode-kode berurutan dan saling berhubungan

untuk mengatur format / tampilan suatu halaman HTML.

Keuntungan css

• Memudahkan dalam penggantian format secara keseluruhan.

• Lebih praktis.

• Untuk mengubah tampilan web, tanpa mengubah layout utamanya.

Syntax css

• Terdiri dari beberapa set peraturan yang memiliki: selector, property,

value.

selector {property: value;}

• Selector menunjukkan bagian mana yang hendak diatur/diformat.

• Property bagian dari selector yang hendak diatur.

• Value adalah nilai dari pengaturannya.

Contoh sintaks CSS:

h1 {color: red;}

• Keterangan:

Selector: h1

Property: color

Value: red

of 18

MATAKULIAH : Pemrograman Berbasis WebJUDUL : css


• Terjemahan bahasa manusia: mengatur color dari h1 ke red (warna

merah)

Pengelompokan selector

• Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan

cara menggunakan pemisah koma.

• Misalkan mengatur tag-tag h1, h2, h3 menggunakan warna merah, maka

CSSnya menjadi:

h1, h2, h3 {color: red;}

Penggunaan multi property

• Untuk mengatur lebih dari satu property gunakan pemisah titik koma ( ; )

• Contoh:

h1, h2, h3 {

color: red;

font-family: arial;

font-size: 150%;

}

Css comment

• Menggunakan syntax pembuka /* dengan penutup */ untuk menuliskan

komentar di CSS.

• Contoh:

/* tulis komentar anda disini */

p {

text-align: justify;

/* tulis lagi komentar anda disini */

color: blue;

font-family: arial;

}

Pemasangan css ke dalam html

• Ada 3 cara memasang CSS ke dalam HTML:

1. Inline CSS

of 18


2. Embedded CSS

3. Import CSS file

Inline CSS

• Kode CSS dituliskan langsung ke dalam tag HTML.

• Penulisan cara ini tidak memerlukan selector dalam kode CSS.

• Cara ini sebaiknya hanya digunakan jika memformat suatu elemen hanya

satu kali.

• Contoh:

<p style=“color:blue;”>

isi paragraf.

</p>

Embedded CSS

• Menempelkan kode CSS diantara tag <head> dan </head> atau dapat

juga diantara tag <body> dan </body>

• Contoh:

<head> <style type=“text/css”> p {color:blue;} </style> </head>

Import CSS file

• Kode CSS dituliskan pada file tersendiri berekstensi .css

• Kemudian file .css tersebut diimport diantara tag <head> dan </head>

• Contoh:

<head>

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

media="screen" />

</head>

of 18


• Pada kode href itulah yang merujuk pada file CSS, yaitu berada pada

folder css dengan nama file style.css

Class dan ID selector

• Pada contoh sebelumnya, penggunaan tag HTML sebagai selector.

• Misalkan membuat kode CSS untuk tag <h1>, sintaks CSSnya h1 {color:

red;}

• Sehingga ketika menggunakan tag <h1> maka teksnya berwarna merah.

• Jika membutuhkan format tersendiri untuk elemen tertentu bagaimana?

Maka dibutuhkan penentuan Class dan ID Selector.

Class selector

• Class selector adalah penulisan selector untuk sekelompok elemen yang

sering digunakan pada beberapa elemen.

• Format penulisan class selector:

.nama_class_selector {property: value;}

• Deklarasi di HTML menggunakan atribut class.

• Contoh: <div class="nama_class_selector"> dan diakhiri dengan tag

</div>

• Penulisan kode CSS:

.tengah {text-align: center;}

p.tengah {color: red;}

h1.kiri {color:blue;}

h1.tengah {color:black;}

• Pemakaian kode CSS ke HTML:

<p class=“tengah”>Teks tengah akan berwarna merah</p>

<div class="tengah">

<h1>Tag h1 tengah akan berwarna hitam</h1>

</div>

<h1 class="kiri">Tag h1 kiri akan berwarna biru</h1>

ID selector

of 18


• ID selector digunakan untuk menentukan format style pada elemen

tunggal yang unik.

• Menggunakan atribut id pada HTML, dan didefinisikan dengan tanda #

pada sintaks CSS.

• Contoh:

3. ALAT DAN BAHAN

o Modul Pemrograman Berbasis Webo LCD & KOMPUTER

o Notepad++o Kertas dan alat tulis

of 18


4. Tugas

Silahkan dibuka folder css

1. Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis font,

ukurannya sama dengan paragraf pertama)

2. Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor,

warna teks dan background-nya berubah.

3. Isilah bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten

(misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS anda (tidak ada

CSS berarti juga TIDAK ADA NILAI)

of 18


4. Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman

5. Dibuat laporan ya, upload di slideshare.net dan URLnya disubmit di elearning.

Hasilnya

of 18


Syntax

<html>

<head>

<style type="text/css">

table{

border-colapse:colapse;

border:2px solid black;

}

#menu{

height:40px;

width:980px;

background:url(bg-nav.jpg) repeat-x;

}

#menu table{

border:none;

}

#menu a{

color:white;

text-decoration:none;

}

#menu a:hover{

background-color:#030afc;

of 18


color:#fd0222;

}

#label a{

color:#130000;

text-decoration:none;

}

#label a:hover{

background-color:#f80750;

color:#f9f206;

}

#menu td{

height:40px;

text-align:center;

vertical-align:middle;

color:#fff;

font: bold 14px Candara, Arial, Tahoma;

}

.judul{

text-shadow: 5px 5px 5px #fe0107;

font-family:Harlow Solid Italic;

font-size:60;

color:#060600;

}

.img{

boder: 1px solid black;

width:290;

height:210;

}

of 18


.isi{

padding: 11 11 11 11 ;

}

.paragraf{

color:black;

background:#13a6f4;

border:3px solid #CE0063;

font-family:Arial;

padding:25px;

text-align:justify;

text-indent:40px;

}

.table-menu{

vertical-align: top;

border-colapse: colapse;

border: 1px solid black;

background-color: #0066cc;

}

.footer{

background-color:#2dffdf;

}

.bayangJam{

text-shadow: 5px 5px 5px #02fd09;

font-family:Chiller;

font-size:50;

color:#43cbfe;

of 18


}

.postingan{

font-family:Calibri (Body);

font-size:20;

color:black;

}

.made{

color:black;

background:#13a6f4;

border:3px solid #CE0063;

font-family:Arial;

padding:30px;

text-align:justify;

text-indent:40px;

text-align: center;

}

.label{

font-family:Chiller;

font-size:25;

color:#00070b;

}

</style>

</head>

<body>

<table width="70%" align="center">

<tr>

<div style="position: absolute; width: 223px; height: 187px; z-index: 1; left: 271px; top: 22px" id="layer1">

<p align="center"><font color="#2cfeba" face="Algerian">

of 18


Sesuatu sangat berharga ketika dia telah pergi meninggalkan kita, jadi syukurilah kesehatan sebelum kesehatan itu pergi meninggalkan kita</font></div>

<td colspan=2 ><img src="header.jpg" width="980" height="200"></td>

</tr>

<tr style="background:blue;">

<td colspan=2 style="text-shadow: 5px 5px 5px #02fd09;" height="40" style="color:white;"><b><font face="Goudy Stout">

<marquee>"MARI BELAJAR"</marquee></font></b></td>

</tr>

<tr>

<td colspan=2>

<div id="menu">

<table width="100%">

<tr>

<td align="center"><a href="http://google.com" target="_blank">Depan</a></td>

<td align="center"><a href="http://google.com" target="_blank">Profil</a></td>

<td align="center"><a href="http://google.com" target="_blank">Produk</a></td>

<td align="center"><a href="http://google.com" target="_blank">Kontak</a></td>

<td align="center"><a href="http://google.com" target="_blank">Forum</a></td>

</tr>

</table>

</div>

</td>

</tr>

<tr>

<td width="70%" style='background:#00CCFF;'>

<div class="isi">

<div class="judul">

<p align="center">Ayo Minum Susu</p>

</div>

<div class="img">

of 18


<img src="susu.jpg"/>

</div>

<div class="paragraf">

<p>Susu adalah sebuah cairan bergizi yang dihasilkan oleh kelenjar susu dari mamalia betina.

Susu adalah sumber gizi utama bagi bayi sebelum mereka dapat mencerna makanan padat. Susu binatang (biasanya sapi) juga diolah menjadi berbagai produk seperti mentega, yoghurt, es krim, keju, susu kental manis, susu bubuk dan lain-lainnya untuk konsumsi manusia.Semua orang di dunia ini membutuhkan susu untuk menopang kehidupannya. Baik dari bayi sampai orang yang sudah lanjut usia.</p>

<p>Khasiat susu sapi ternyata banyak sekali. Susu yang banyak digemari anak-anak ini disebut juga darah putih bagi tubuh karena mengandung banyak viatmin dan berbagai macam asam amino yang baik bagi kesehatan tubuh.

Dalam segelas susu terdapat antara lain:

<ul>

<li>Potasium, yang menggerakkan pembuluh darah agar tetap stabil, menghindarkan Anda dari penyakit darah tinggi dan jantung.</li>

<li>Zat besi, mempertahankan kulit tetap bersinar.</li>

<li>Tyrosine, mendorong hormon kegembiraan dan membuat tidur lebih nyenyak.</li>

<li>Kalsium, menguatkan tulang.</li>

<li>Magnesium, menguatkan jantung dan sistem saraf sehingga tidak mudah lelah.</li>

<li>Yodium, meningkatkan kerja otak cepat.</li>

<li>Seng, menyembuhkan luka dengan cepat.</li>

<li>Vitamin B2, meningkatkan ketajaman penglihatan.</li>

</ul>

</p>

</div>

</div>

</td>

<td width="30%" class="table-menu">

<div class="bayangJam">

Saat ini waktu menunjukan pukul <br>

</div>

<hr>

of 18


<div class="label">

<ul>

<li><a href="http://google.com" target="_blank">Cara instal PC/laptop</a></li>

<li><a href="http://google.com" target="_blank">mempercepat kinerja PC/laptop</a></li>

<li><a href="http://google.com" target="_blank">Memasan PESEDIT di PES 2013</a></li>

<li><a href="http://google.com" target="_blank">Instal PES 2013</a></li>

<li><a href="http://google.com" target="_blank">Cara mudah memberi jam pada blog</a></li>

<li><a href="http://google.com" target="_blank">Membuat header di blog</a></li>

<li><a href="http://google.com" target="_blank">Mempercantik tampilan blog</a></li>

<li><a href="http://google.com" target="_blank">Mengatasi virus trojan</a></li>

<li><a href="http://google.com" target="_blank">Upgrade hp samsung</a></li>

</ul>

<p style="font-family:Rosewood Std Regular;">Teknologi</p>

<ul>

<li><a href="http://google.com" target="_blank">Robot pembantu rumah tangga</a></li>

<li><a href="http://google.com" target="_blank">Pesawat tanpa awak</a></li>

<li><a href="http://google.com" target="_blank">Mobil pintar</a></li>

<li><a href="http://google.com" target="_blank">Rumah pintar</a></li>

<li><a href="http://google.com" target="_blank">Teknologi parkir area</a></li>

<li><a href="http://google.com" target="_blank">Perkembangan teknologi</a></li>

</ul>

<p style="font-family:Rosewood Std Regular;">Photoshop</p>

<ul>

<li><a href="http://google.com" target="_blank">Membuat bayangan</a></li>

<li><a href="http://google.com" target="_blank">Mempercantik tulisan</a></li>

<li><a href="http://google.com" target="_blank">Membuat gambar 3D</a></li>

</ul>

of 18


</div>

</div>

</td>

</tr>

<tr>

<td colspan=2 height=50 class="footer">

<div class="made">

WEBSITE Oleh: Ardiansyah Ahmad - 1210651097

<br>Untuk Memnuhi Syarat Penilaian Matakuliah Pemrograman Web <br>

JEMBER<br>

</div>

</td>

</tr>

</table>

</body></html>

of 18


Korektor

(…………………………………..)

of 18

1210651097 css

Education

Transcript of 1210651097 css