Mungkin untuk pada master web
page, hal ini sangat mudah.... tapi bagi saya dan teman2 OPS yang baru Kenal
namanya Pembuatan web page atau bloger sangat susah dimengerti apasih CSS itu...??
Tutorial ini saya buat
berdasarkan ilmu yang saya dapat saat berkenalan dengan CSS.
CSS (Casading Style Sheet) itu
adalah Script yang digunakan untuk mengatur peletakan atau bentuk dari sebuah
bagian web page... dimana kita ketahui sebuah halaman web itu terbagi atau
terpotong – potong menjadi beberapa bagian... nah CSS ini yang akan
menyusunnya..
Dimana letak CSS itu....???
CSS itu berdasarkan letaknya
terbagi menjadi 3 yaitu :
1. EksternalCSS
Adalah CSS yang
terpisah dengan halaman web. Berbentuk File dengan ekstensi *.css... biasanya
css ini oleh pemilik akan ditaruh di internet dulu seperti google Drive. Lalu akan
dipanggil dari halaman web yang dibuat.. contoh pemanggilan CSS eksternal:
<head>
<link rel=”stylesheet” type=”text/css” href=”http://google.drive/id=129934/header.css”/>
</head>
<link rel=”stylesheet” type=”text/css” href=”http://google.drive/id=129934/header.css”/>
</head>
*Tulisan
berwarna kuning itu menandakan file tipe yang di panggil
*tulisan berwarna
biru adalah Alamat file yang di unggah di google drive (Url file css)
*script
memanggil css eksternal harus menggunakan “<link .........../>” tanpa
kutip.
2. InternalCSS
Adalah CSS yang
menjadi satu dengan halaman web dan letaknya harus berada di antara pembuka head
“<head>..... dan sebelum penutup head </head> dalam HTML... sebagai
contoh :
<head>
<style type = "text/css">
#header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
</style>
</head>
<style type = "text/css">
#header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
</style>
</head>
Nah diatas ada perbedaan bukan dengan
eksternal CSS...?? CSS seperti ini akan langsung dibaca, bukan lagi di panggil.
Dalam penulisannya ada perbedaan antara “#header” dengan “.headerleft” apa
fungsi perbedaan tersebut....? nanti akan kita jelaskan...
*warna biru adalah kode CSS yang
akan mengatur tampilan sesuai dengan yang tertulis di CSS.
*warna kuning adalah script untuk
memulai CSS dan Mengakhiri CSS
3. Inline
CSS
Adalah CSS yang
langsung dituliskan bersamaan dengan penulisan HTML nya.. biasanya ada dalam
kode <div>. Sebagai contoh
<div
style="background-color:#999999;
text-align:center;">Inline CSS</div>
*warna kuning adalah script untuk
memulai CSS dan Mengakhiri CSS
*warna biru adalah kode CSS yang akan
mengatur tampilan sesuai dengan yang tertulis di CSS.
*warna merah
adalah tulisan yang akan tampil saat halaman dibuka.
CSS seperti
ini biasanya berada pada <div> setelah <body> dan sebelum penutup
</body>
Kenapa ada perbedaan
antara “ #header ” dengan “ .headerleft “.....?
Tanda pagar (#) dan titik (.)
membedakan cara pemanggilan css pada <div> nantinya. Kode CSS yang
menggunakan (#) hanya berlaku sekali dalam sebuah <div>. Sedangkan kode
CSS dengan tanda titik (.) bisa digunakan berulang kali dalam <div>. Jika
anda ingin membuat 3 buah <div> dengan ukuran yang sama dan tipe model
sama, maka anda harus menggunakan titik(.) dalam CSS nya... pemanggilannya pun
berbeda jika ingin memanggil CSS dengan kode pagar, maka pada <div> harus
ditulis seperti ini “
<div id=”header”>...</div>
jika ingin memanggil CSS dengan kode titik maka penulisannya
seperti ini
<div class=”headerleft”>.....</div>
Contoh :
1.
Taruh kode css ini antara diatas kode
</head>
<style type =
"text/css">
#header {
width:900px;
height:50px;
border: 1px solid #640404;
border-bottom:medium;
background-color:#006;
}
.headerLeft {
width:300px;
background-color:#CCCCCC;
height:50px;
text-align:center;
position:
}
</style>
Kemudian taruh kode ini dibawah kode
<body>
<div id="header"
align="center">ini CSS dengan Pagar</div><br/>
<div class="headerLeft"
align="left">ini CSS dengan Titik</div>
<div class="headerLeft"
align="center">ini CSS dengan Titik</div>
<div class="headerLeft"
align="right">ini CSS dengan Titik</div>
Maka TAMPILAN akan jadi seperti ini :
·
3 buah Kotak akan sama ukurannya dan sama
bentuknya karena <div> yang menggunakan CSS dengan tanda titik “.headerleft”
ada 3.
·
Dan 1 kotak menggunakan css dengan tanda pagar “
#header” maka tampilannya akan sama dengan pengaturan yang ada di CSS.
·
Tinggi kotak header dengan Headerleft
sama, karena sama sama diatur 50px..
·
Lebarnya beda karena header menggunakan 900px dan headerleft
hanya 300px.
Jika pada kode CSS background-color:#006; diganti dengan background:url(alamatgambar); maka yang
tampil di kotak pertama bukan warna biru, tetapi gambar dari url yang
dimasukkan tadi “(alamatgambar)”....
Agar Pembacaan halaman saat
online tidak berat lebih baik gunakan background-color:#006;
dari pada URL. Hanya saja kekurangannya tampilan tidak bisa lebih gaya
dengan motif gambar. Terserah anda memilih cepat terbuka atau model web dengan
gambar yang keren tapi lama banget terbukanya...
JADI
INTINYA :
MODEL HALAMAN WEB ANDA
DIATUR OLEH CSS. LETAK MENU,
JUDUL, POSTINGAN,
BACKGROUND, DAN LAIN – LAIN DIATUR
PADA CSS.
Carilah kode CSS sesuai yang anda
inginkan. Contoh warna halaman
transparant, setiap pojokan tidak
lancip tapi melengkung, ukuran header
ingin di perbesar. Semua diatur melalui CSS.
Di google.co.id Banyak tutorial
pengaturan (kode) CSS yang mungkin anda minati. Agar web anda tambah cantik.
Semoga Bermanfaat. Salam Satu Data..!!!
0 komentar:
Posting Komentar