LAPORAN PEMOGRAMAN BERBASIS WEB
Nama : Nur Anita
NIM : 1110651094
PROGRAM
STUDI TEKNIK INFORMATIKA
FAKULTAS
TEKNIK
UNIVERSITAS
MUHAMMADIYAH JEMBER
1.
Tujuan
a. Mahaiswa dapat memahami HTML dan CSS
b. Mahaiswa mampu mengimplementasikan CSS dalam HTML
2.
Dasar Teori
Ø Pengenalan CSS
CSS
merupakan singkatan dari Cascading Style Sheets yaitu suatu bahasa lembar gaya
yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa
markah. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web
yang ditulis dengan HTML,yang menggunakan Style untuk menampilkan elemen-elemen
HTML. Style mendefinisikan bagaimana elemen-elemen HTML ditampilkan di browser.
CSS dapat digunakan pada satu atau lebih halaman HTML. Untuk mendefinisikan
Style beberapa halaman HTML, biasanya CSS disimpan didalam satu file tersendiri
di luar file HTML. Hal ini memudahkan web desainer untuk melakukan
perubahan style. Sehingga untuk merubah tampilan beberapa halaman HTML cukup
dengan merubah satu file CSS. CSS biasanya digunakan oleh penulis maupun pembaca
halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek
tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen
(yang ditulis dengan HTML atau bahasa markah lainnya) dengan presentasi dokumen
(yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi,
memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan
mengurangi kompleksitas serta pengulangan pada stuktur isi.
Ø
Menurut penulisannya CSS dapat dibagi menjadi 3
jenis, yaitu :
1. Internal
Style Sheet
CSS didefinisikan di dalam
file HTML, yaitu dalam elemen <head>
2. External
Style sheet
CSS didefinisikan di dalam
satu file tersendiri di luar file HTML
3. Inline
Style Sheet
CSS didefinisikan di dalam
setiap elemen/tag HTML
Ø Sintaks
CSS terdiri atas tiga bagian, yaitu : selector, property, dan value selector {property: value}
Selector merupakan tag yang
ingin diberikan style atau tag HTML yang akan didefinisikan (body,h1,link,dll).
Property merupakan atribut yang ingin didefinisikan atau yang akan diubah dan
value merupakan nilai dari atribut. Antara property dan value dipisahkan oleh
tanda titik dua (:).
Contoh :Body { color: black}
Jika value terdiri atas beberapa kata, maka value
tersebut diapit dengan tanda kutip (“ “)
Contoh : P {font-family: “sans serif”}
Ø Cara
mendeklarasikan kelompok : (tanda koma serta &)
a. H1, H2 {color
: green};
b. H3, H4 &
H5 {color : red};
Ø Cara
menuliskan komentar :
a. Menggunakan tanda : /* ….. */
b. Menggunakan
tanda : <!-- - - >
Ø Bentuk Ukuran
a. Em: untuk
menentukan ukuran yang pecahan atau desimal
b. Ex: digunakan
untuk menentukan ukuran yang sifatnya vertikal
c. Px:menentukan
ukuran yang bersifat pixel(layar monitor) seperti ukuran huruf.
Berikut contoh
scrip dengan menggunakan CSS,HTML,PHP
<html>
<head>
<style type="text/css">
table{
border-colapse:colapse;
border:1px
solid black;
}
#menu{
height:40px;
width:960px;
background:url(bg-nav.jpg)
repeat-x;
}
#menu table{
border:none;
}
#menu a{
color:white;
text-decoration:none;
}
#menu a:hover{
background-color:white;
color:black;
}
#menu td{
height:40px;
text-align:center;
vertical-align:middle;
color:#fff;
font: bold
14px Candara, Arial, Tahoma;
}
#isi{
padding: 10
10 10 10;
}
#isi p{
color:black;
text-align:justify;
font: 14px
Candara, Arial, Tahoma;
padding-bottom:5px;
}
#isi ul{
color:black;
text-align:justify;
font: 14px
Candara, Arial, Tahoma;
padding-bottom:5px;
}
#isi img{
boder: 1px
solid black;
width: 80px;
height:
100px;
}
.table-menu{
vertical-align:
top;
border-colapse:
colapse;
border: 1px
solid black;
background-color:
#0066cc;
}
.footer{
background-color:#0066cc;
}
</style>
</head>
<body>
<table width="70%"
align="center">
<tr>
<td colspan=2><h2
align="center" style="color:blue; font:bold 25px Candara, Arial,
Tahoma;">SELAMAT DATANG DI PRODUK SUSU SAPI<img
src="header.jpg"></td>
</tr>
<tr>
<td
colspan=2>
<div
id="menu">
<table
width="100%">
<tr>
<td
align="center"><a
href="">Depan</a></td>
<td
align="center"><a
href="">Profil</a></td>
<td
align="center"><a
href="">Produk</a></td>
<td
align="center"><a
href="">Kontak</a></td>
<td
align="center"><a href="">Forum</a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="70%">
<div
id="isi">
<h1
style="color:black; font:bold 18px Candara, Arial, Tahoma;"> Ayo
Minum Susu</h1>
<img
src="susu.jpg"/>
<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>
</td>
<h1><td
width="30%" class="table-menu" align="left"
style="color:white; font:bold 16px Candara, Arial,
Tahoma;">Categories</h1>
<ul>
<li><a
href="" style="color:white;">Ayo Minum
Susu</a></li>
<li><a
href="" style="color:white;">Khasiat Susu
Sapi</a></li>
<li><a
href="" style="color:white;">Artikel Mengenai Susu Yang
Baik Untuk Dikonsumsi</a></li>
</ul>
<p>Tip dan
Trik</p>
<ul>
<li><a
href=""
style="color:white;">Kesehatan</a></li>
<li><a
href="" style="color:white;">Penyimpanan Susu Yang
Benar</a></li>
</ul>
<p>Contact</p>
PT Susu Sapi
Pancoran Barat-Jakarta
Selatan
<p><a
href=""
style="color:white;">sususapi@yahoo.com</p>
</td>
</tr>
<tr>
<td colspan=2
height=50 class="footer"><p style="color:white; font:bold
12px candara, arial, tahoma; text-align:center;">www.sususapi.com</p>
</td>
</tr>
</table>
</body>
</html>
Tugas
- Ubahlah teks dalam list
(kandungan susu) sehingga property font (warna, jenis font, ukurannya sama
dengan paragraf pertama)
- Ubahlah teks dalam panel menu
atas menjadi link dan ketika disorot dengan kursor, warna teks dan
background-nya berubah.
- 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)
- Tambahkanlah teks/ tulisan
yang proporsional di bagian header halaman
Penyelesaian :
1.
Keterangan : script di atas ini untuk mengubah tesk dalam list dengan
propety font yang sama antara paragraf pertama dan kedua sehingga ukurannya
akan sama. Dengan menggunakan style berikut:
Padding: fungsinya untuk membuat batasan-batasan pada konten web lain
seperti tabel,disamping pengaturan batas halaman.
Color: untuk menentkan warna font.
Text: untuk mengatur posisi teks bisa menggunakan align dan valign.
2.
Keterangan : script di atas ini
digunakan untuk mengubah tesk menu menjadi link ketika disorot akan berubah
teks dan backgroundnya.
<td>: memiliki atribut colspan untuk merge kolom dan rowspan untuk
merge baris.
<a> : untuk menentukan hyperlink dalam dokumen
Href : berfungsi untuk menentukan tujuan dari hyperlink.
Align : memformat perataan text.3.
Keterangan : Pada class tabel menu tersebut dalam pemodelan huruf ini menggunakan candara,arial dan tahoma dengan menggunakan bold untuk menebalkan huruf.Sedangkan fungsi fitur lainnya seperti:
Width : untuk menentukan panjang garis horizontal default 100%
<ul> : Unordered List (daftar tak beraturan)”, dalam artian, sebuah daftar yang isinya tidak bernomor.
<li> : adalah awal dari “List Item (Item dari daftar)
<p> : untuk paragraf
<style> : untuk mengatur karakter kode tag dokumen
4.
Keterangan :
script di atas untuk menambahkan teks dalam header halaman,untuk lebih mempercantik
digunakannya fitur-fitur dari CSS seperti:
Colspan :
berfungsi untuk menggabungkan satu atau lebih dalam baris.
Font : untuk menentukan
format tampilan font seperti model huruf,ukuran huruf .
Color : untuk menentukan
warna font.
Align :
digunakan untuk mengatur posisi pada text
Img src: untuk
menginsertkan image ke dalam dokumen.
Hasil Tampilannya :
