Membuat Website dengan Teknik CSS
Secara umum, sebuah halaman web terdiri dari beberapa blok. Blok ini dikenal dengan division yang disimbolkan dengan kode tag <div> dan </div>. Mengapa kita harus membagi halaman menjadi beberapa blok, hal ini supaya halaman dapat ditata dengan rapi dan menarik..Teknik desain halaman web dengan menggunakan tag <div> dan </div> disebut teknik CSS.
Beberapa desainer masih menggunakan teknik tabel (tag <table> dan </table>) untuk menata halaman web, namun cara ini tidak direkomendasikan oleh standar web internasional mengingat teknik ini boros halaman kode yang akan mengakibatkan halaman semakin lama dimuat, selain itu teknik ini sulit di-index oleh mesin pencari google. Menggunakan teknik CSS akan menampilkan halaman web yang lebih menarik dan lebih mudah disusun dengan rapi..
Bagaimana Memulainya..??
Pertama buka dulu program Notepad dari Start-Program-Accessories-Notepad dan mulai dengan ini (well, saya selalu menggunakan rumus seperti ini kalo membuat website):
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Website Dermawansyah</title> <meta name="description" content="Webpage ini menjelaskan bagaimana membuat website dari dasar"/> <meta name="keywords" content="website, css, membuat website" /> <meta name="robots" content="index,follow" /> <style type="text/css" media="all">@import "my_css.css";</style> </head>
<body>
</body>
</html>
Keterangan:
Simpan file tersebut dengan nama index.html. Pastikan file of type terpilih adalah all files.
tag meta adalah sesuatu yang boleh dikatakan wajib digunakan untuk “memperkenalkan” websitemu, diletakkan di dalam pasangan tag <head> dan </head>
Di dalam tag “description” masukkanlah penjelasan mengenai websitemu, jangan terlalu panjang, yang penting jelas.
Keywords adalah kata kunci yang digunakan yang dapat membantu google meng-index websitemu.
Kemudian ada juga tag ini:
<meta name="robots" content="index,follow" />
Apabila orang mengklik title web kita di google, maka akan diarahkan ke file bernama index.
Dan tag ini:
<style type="text/css" media="all">@import "my_css.css";</style>
Apabila kita memiliki file CSS, silakan masukan kode seperti itu untuk memuatnya. File CSS berisi penataan halaman web agar tampi menarik. Kita dapat mengatur letak, ukuran dan warna elemen-elemen web di dalam sebuah file CSS.
Mulai menggunakan tag <div>
Masukkan tag-tag ini di antara blok <body></body>:
<body>
<div id=”header”>
</div>
<div id=”main”>
</div>
<div id=”footer”>
</div>
</body>
Membuat File CSS
Ketikkan di Notepad:
body
{
background-color: #000000;
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 14px;
color: #666666;
}
#header
{
background-color:#ffffff;
height: 120px;
}
#main
{
background-color:#303030;
line-height: 25px;
}
#footer
{
background-color:#505050;
}
Simpan file dengan nama my_css.css. File ini bersama dengan index.html diletakkan di dalam sebuah folder. Kemudian bukalah browsermu, hasilnya seperti ini:
Selamat mencoba dan semoga sukses ya..
6 Comments »
Leave a reply to algentar Cancel reply
-
Recent
-
Links
-
Archives
- June 2010 (1)
- February 2010 (7)
-
Categories
-
RSS
Entries RSS
Comments RSS
Dermawansyah's Blog 
maaf ya, baru ini belajar css. jadi gak dong sama sekali..
<html xmlns=”http://www.w3.org/1999/xhtml”
di atas tu kan ada "www.w3.org/TR/xhtml…………
http://www.w3.org itu mksd nya apa?
Begitulah
DOCTYPE adalah deklarasi yang wajib ditulis untuk halaman web, sementara atribut berupa xmlns=… adalah xml namespace, ini boleh tidak ditulis. Adapun w3.org adalah sebuah validator, yang memeriksa kebenaran tag-tag html kita..
Selama ini saya menggunakan teknik table untuk membangun web site. Satu halaman depan sampe 5 table. hehehe. Pantes loadnya berat. Padahal saya pake VPS Indonesia. Ok dech. Thanks berat pencerahannya. Mudah2an segera bisa di terapkan di website saya… Tq
nice inpoh… 🙂
E