Simpe Web Page (Part 2)
Ini adalah lanjutan dari post sebelumnya. Kalo di sebelumnya kita udah bikin semacam templatenya dan nguprek nguprek soal HTML, sekarang giliran CSS-nya.
CSS atau Cascading Style Sheet berguna untuk memberikan style pada web page, mengecilkan ukuran file sehingga lebih menghemat bandwidth. Lebih jauh mengenai CSS bisa dilihat di W3School CSS Tutorial dan EchoEcho CSS Tutorial
Di atas tag </head> kita sisipin <style> </style>. Terus, kita coba tulisin ini di antara tag <style> tadi
<style>
body {
background-color: #d1d1d1;
font-family: Tahoma;
color: #333;
}
tr, td {
font-size: 11px;
line-height: 16px;
text-align: justify;
}
</style>
1. Bagian Selector body
background-color: #d1d1d1; gunanya untuk memberi warna pada background, diisi dengan kode warna
font-family: Tahoma; untuk mengatur jenis font, lebih baik gunakan font standar seperti Arial, Tahoma, Verdana, dst.
color: #333; untuk mengatur warna font, diisi dengan kode warna
Karena ketiga properti di atas berada dalam selector body { } maka ia berlaku untuk semua yang berada di dalam tag <body></body>
* PS: kode warna bisa dicari dari photoshop, menggunakan Eyedropper Tool (I) dan cek kodenya di Color Picker
2. Bagian Selector tr, td
font-size: 11px; untuk mengatur besarnya font, bisa dalam pixel (px) maupun point (pt)
line-height: 16px; untuk mengatur jarak dari tiap-tiap baris, untuk kenyamanan membaca, lebih baik nilainya lebih besar dari property font-size
text-align: justify; untuk mengatur teks rata kanan dan kiri
Ini berlaku untuk semua yang berada dalam <tr></tr> dan <td></td>
Nah sekarang kita buat teks sembarang di bagian Content dan Menu nya. Oia, coba sisipkan header di atas kolom content dan menu dengan cara menulis <h1>This is Header</h1> dan sisipkan link di bagian menu dengan cara mengetik <a href="http://yahoo.com">Links</a>.
Sekarang, halamannya udah hampir jadi, tapi CSSnya masih belum sempurna. Headernya ("This is Header") terlihat biasa, Link nya juga berwarna biru dan kurang menarik. Untuk mengatur tampilannya, sekarang balik ke <style></style> yang berada di atas tag </head>. Sekarang coba tulis ini di dalamnya
h1 { font-family: Georgia;
color: #e71f58;
font-size: 23px;
font-style:italic;
line-height: 27px;
border-bottom: double;
border-bottom-color:#67c8ee;
}
Dengan menuliskan code seperti di atas pada stylesheet, maka tampilan header <h1></h1> pun akan berubah.
font-style: italic; membuat teks menjadi miring
border-bottom: double; memberikan border di bawah teks, value double bisa diganti dengan dotted atau solid, etc.
border-bottom-color: #67c8ee; memberikan warna pada border-bottom, jika tidak dicantumkan, maka warna border-bottom akan mengikuti warna teks
Selanjutnya tuliskan ini di bawahnya
a {
color: #89a631;
font-weight:bold;
text-decoration: none;
}
font-weight: bold; akan mengubah teks menjadi tebal
text-decoration: none; akan menghilangkan garis bawah pada link
Code di atas akan mengubah tampilan link yang ada di menu bar kita. Lalu sisipkan lagi ini di bawahnya
a:hover {
color: #46ddef;
}
a:hover gunanya untuk memberikan style khusus ketika mouse kita berada pada element <a></a>
Maka tampilan teks "Links" ketika kita hover akan berubah warna. Nah sekarang tinggal cek keseluruhan codenya
<style>
body {
background-color: #d1d1d1;
font-family: Tahoma;
color: #333;
}
tr, td {
font-size: 11px;
line-height: 16px;
text-align: justify;
}
h1 { font-family: Georgia;
color: #e71f58;
font-size: 23px;
font-style:italic;
line-height: 27px;
border-bottom: double;
border-bottom-color:#67c8ee;
}
a {
color: #89a631;
font-weight:bold;
text-decoration: none;
}
</style>
Nah, sekarang tampilan web kita udah jadi, walaupun masih agak mentah ^^. Paling enggak itu dasar-dasarnya udah jadi.
Untuk bahan-bahan yang dipake buat artikel kali ini, silahkan di download di sin (112 Kb). Sekian dulu dari saya. Semoga bisa memberikan gambaran ^^
* PS: Tanggal 25-27 Juni bakaln hengkang dulu dari internet nih, mau ada acara di SMA semacam kemah PTB di Kalidadap, Jogja. Doain sukses ya :D
Popularity: 35% [?]
The Making of RTB
Photomanipulation: Runaway
Photomanipulation: See the Light
Photography Feature: Vintage
Tags
Change Theme
Categories
Popular Post
- 75% Ramadhan, Bulan Penuh Berkah
- 52% 10 Kota Mati di Dunia
- 47% The Making of RTB
- 38% Photomanipulation: Runaway
- 35% Simpe Web Page (Part 2)
- 34% Sarang Ulat di Otak Penggemar Sushi
- 29% Photomanipulation: See the Light
- 22% Free Wordpress Theme: "Vintage Dream"
- 19% Cinta
- 15% Photography Feature: Vintage
Banner
Ads
Friends
Meta
Powered by Wordpress • © Theme by Vina Sectiana • All rights reserved
13 Comments so far
Leave a comment
[...] Lanjut ke Part 2 (CSS)» Filed in: Articles Tags: Basic, Berbagi Ilmu, CSS, HTML, Inspiration — [...]
By ra tau beres (dot) com » Blog Archive » Simple Web Page (Part 1) on 06.24.09 4:45 am | Permalink
Hadeh, aku malah gak dong e kode kode kayak gitu
tapi bagus ilmu nya :wink:
[Reply]
By Khan on 06.24.09 7:57 am | Permalink
Wow.. keren….
diriku juga belajar begini kk
semoga tutorialnya dilanjutkan sampe membuat sebuah aplikasi berupa website utuh
:)
[Reply]
By aNGga Labyrnth™ on 06.24.09 12:00 pm | Permalink
@Khan: tp situ jago programing, :x mau dng diajarinnnnn
@angga: tp ni basic bgt :P buat yg udah punya blog/site mungkin bakalan useless ^^ pengen ngenalin supaya enggak terbiasa make wizard aja, skrg bkn kbykn css pake wizard, zapp, langsung jd :P
[Reply]
By Vai on 06.24.09 2:43 pm | Permalink
Whaa.. hebat sekali..
*ngiler…*
Bisa minta bikinin nih.. Hehehe..
[Reply]
By Idub on 06.25.09 2:57 am | Permalink
akhirnyaaa aku bisa membuka blog ini setelah beberapa kali gagal
huehehhee
[Reply]
By julie on 06.25.09 5:54 am | Permalink
ayo ikut baca
[Reply]
By dblogger on 06.25.09 5:56 am | Permalink
duh serem… anak SMA skrg diajarinnya canggih2 ya…
beda ama jaman SMA gue dulu
gue paling males dah kalo urusannya udah ama codingnya XDDD
[Reply]
By macangadungan on 06.25.09 2:31 pm | Permalink
Anak2 SMA sekarang udah hebat2 pemograman ya! Jadi minder nih..! :D
[Reply]
By Tongkonan on 07.08.09 4:36 pm | Permalink
wow
gmn tuh ya cara bikinnya ? :p
pke framework yah :D
[Reply]
Vai Reply:
July 18th, 2009 at 12:54 pm
wah, kalo buat yg udah pro kyk kk ntar malah rewind deh, lol :P
[Reply]
By bernadsatriani on 07.13.09 10:09 pm | Permalink
bahas css3 donk…..pengen cepat2 semua broswer compatible ama css3…biar web lebih mantabs…..
[Reply]
Vai Reply:
September 7th, 2009 at 11:04 pm
saya masih blum pernah bc CSS3 :P T_T
[Reply]
By turnboy on 08.30.09 12:20 pm | Permalink
Leave a comment
Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>