Panduann Lengkap HTML Dan CSS Bagian 2
-
Upload
wahyu-setiyono -
Category
Documents
-
view
84 -
download
0
description
Transcript of Panduann Lengkap HTML Dan CSS Bagian 2
-
Panduan HTML dan CSS bagian 2
A. Apa itu CSS
CSS (Cascading Style Sheets) merupakan kode pemrograman untuk membuat tampilan pada
HTML. Selain menggunakan HTML para programer website sering menggunakan kode CSS
untuk mengedit sebuah halaman website. Faktor kemudahanlah yang di gunakan para
programer. Hanya mengedit CSS pada satu file maka seluruh konten yang ditampilkan akan
berubah.
CSS digunakan untuk mendefinisikan tampilan HTML di layar monitor. Dari konten
gambar, teks, bilah sisi, warna, backgorund, spasi penulisan, dan lain-lain. Pembuatan
CSS ini mendukung semua browser.
B. Struktur Kode CSS
Kode CSS dituliskan dengan struktur sebagai berikut:
menggunakan variable
body{ isi kode css}
konten { isi kode css}
nilai properti tidak menggunakan tanda petik
body{
background:#eee;
font-family:Arial Arial Arial;
color:#fff;
margin:0 auto;
}
nama properti bersifat cas atau sensitif
Penjelasan kode CSS di atas:
variable/selector : body
properti : background, font-family, margin, color
value : #eee, Arial, #fff, 0 auto
C. Cara Memanggil CSS
Untuk membuat halaman HTML agar tersusun rapih dan tidak terlalu panjang, simpan
kode/script yang telah dibuat dalam satu folder yang sama dengan file HTML tersebut. Hal
ini memudahkan untuk pemanggilan kode CSS pada halaman HTML. Kode yang digunakan
adalah sebagai berikut:
Panduan Lengkapp HTML dan CSS bagian 2 | Wahyu Setiyono
-
Penempatann kode pemanggila CSS diantara kode dan . Ada cara lain
untuk memanggil kode CSS pada HTML yakni:
Belajar CSS
body{
background:#eee;
font-family:Geneva, Arial;
dont-size:12px;
color:#fff;
}
Isi Konten
D. Beberepa Penulisan CSS
Ada beberapa cara penulisan CSS pada dokumen HTML, antara lin sebagai berikut:
1. Penulisan CSS bebas
Maksud dari penulisan bebas adalah penempatan CSS berada di antara berbagai kode tag
yang diinginkan. Sebagai contoh, perhatikan penulisan CSS di bawah ini.
Belajar CSS
body{
background:#eee;
font-family:Geneva, Arial;
dont-size:12px;
color:#fff;}
gbawah{
text-decoration:underline;}
Isi Konten yang bergaris bawah
Panduan Lengkapp HTML dan CSS bagian 2 | Wahyu Setiyono
-
2. Penggunaan CLASS pada CSS
Belajar CSS
body{
background:#eee;
font-family:Geneva, Arial;
dont-size:12px;
color:#fff;}
.paragraf{
text-align:center;
color:#ffae00;
}
Isi Konten rata tengah dan
berwarna
3. Penggunaan ID pada CSS
Belajar CSS
body{
background:#eee;
font-family:Geneva, Arial;
font-size:12px;
color:#fff;}
#content{
widht:970px;
background:#fff;
border:4px solid #2b2b2b;
margin:0 auto;
color:#ffa000;
Panduan Lengkapp HTML dan CSS bagian 2 | Wahyu Setiyono
-
}
Isi Konten rata tengah dan berwarna
Apabila file CSS terpisah dengan kode HTML maka perlu kode untuk memanggil script
CSS tersebut. Sebagai contoh perhatiakan script di bawah ini.
Belajar CSS
Isi Konten rata tengah dan berwarna
Simpan script di atas dengan nama file index.html dan buat dokumen baru seperti
berikut.body{
background:#eee;
font-family:Geneva, Arial;
font-size:12px;
color:#fff;}
#content{
widht:970px;
background:#fff;
border:4px solid #2b2b2b;
margin:0 auto;
color:#ffa000;
}
Simpan kode CSS di atas dengan nama file style.css. File ini di simpan/berlokasi pada
satu folder dengan dokumen HTML yang telah dibuat.
Panduan Lengkapp HTML dan CSS bagian 2 | Wahyu Setiyono
-
4. Format margin untuk mengatur tata letak halaman web
Untuk mengatur tata letak web dapat menggunakan margin dalam pixel maupun em.
Penggunaan masing-masing ukuran margin maupun yang lainnya tergantung pada si
pembuat halaman website.
Penggunaan pixel sering digunakan untuk pembuatan halaman web. Pixel merupakan
ukuran dari panjang dan lebar 1 pixe layar. Keakuratan ini membuat bentuk dan ukuran
yang tetap saat merubah ukuran halaman web. Namun untuk pengaturan teks,
penggunaan pixel tidak akurat. Ketika spasi yang dibuat untuk memisahkan paragraf
pertama dan kedua tetapi akan ada perubahan ukuran huruf seperti dari 8px ke 14px.
Secara otomatis huruf berganti ukuran namun pemisah paragraf tetap pada ukurannya.
Penggunaan em ini adalah ukuran yang dipengaruhi oleh ukuran sekitar. Ukuran em
pada umumnya 1 em adalah 16 pixel. Peruntukan ukuran ini bisa dirubah ketika default
ukuran juga diganti. Sebagai contoh ukuran default pemisah antar baris teks adalah
30px, secara otomatis 1 em juga bernilai 30 pixel. Keuntungan penggunaan em pada
aturan teks sangat baik. Perubahan ukuran huruf yang dirubah dan spasi antar paragraf
yang diatur pada ukuran em akan mengikuti secara default. Sehingga spasi antar
paragraf berubah tidak tetap seperti penggunaan ukuran pixel.
E. Latihan
Untuk memperlancar dan paham tentang kode CSS, seringlah membuat dan eksperimen
untuk menghasilkan tampilan pada halaman web. Jangan menghafalkan kode CSS karena
akan menjadi beban, biarkanlah mngalir dengan sendirinya.
Buatlah menu sebuat halaman web.
Belajar Membuat Web
Home
Blog
Panduan Lengkapp HTML dan CSS bagian 2 | Wahyu Setiyono
-
Tentang
Kontak
Dari gambar di atas akan dibuat kode CSS untuk merubah tampilan agar lebih menarik pada
halaman web. Simpan dengan file nama style.css.menu_nav {
background: #1b1b1b;
margin:0 auto;
float: left;
padding:0 0 0 20px;
height: 200px;
width:200px;
overflow: hidden;
}
.menu_nav ul {
list-style:none;
width:50px;
float:left;
padding:0 10px 10px 10px;
Panduan Lengkapp HTML dan CSS bagian 2 | Wahyu Setiyono
-
}.menu_nav ul li {
margin:0;
padding:0 0 0 0;
float:none;
}
.menu_nav ul li a {
display:block;
margin:0;
padding:10px 15px;
color:#ffffff;
text-decoration:none;
font:normal 13px Arial, Helvetica, sans-serif;
}
.menu_nav ul li.active a, .menu_nav ul li a:hover {
display: block;
height: 10px;
width: 200px;
color:#1b1b1b;
text-decoration:none;
}
.menu_nav ul li a:hover {
background: #23aef3;
height: 15px;
}
Hasil dari tampilan yang telah di buah dengan kode CSS di atas adalah:
Panduan Lengkapp HTML dan CSS bagian 2 | Wahyu Setiyono
-
Tentang Penulis
Nama : WAHYU SETIYONO
Kelahiran tahun : 1993
Bidang pekerjaan : Desain Grafis
Facebook : www.facebook.com/wahyuninggusti
Twitter : www.twitter.com/why_usetiyono
Website : http://www.webwahyu.web.id
http://webwahyu.wordpress.com
Deskripsi lain : Kesukaan dan hobi pada pemrograman website membuat saya bisa
mengutak-atik. Bukannya saya bisa namun karena suka.
Panduan Lengkapp HTML dan CSS bagian 2 | Wahyu Setiyono