Dermawansyah's Blog

Just another WordPress.com weblog

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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<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:

Klik ini

Selamat mencoba dan semoga sukses ya..

About these ads

February 22, 2010 - Posted by | Uncategorized

6 Comments »

  1. 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?

    Comment by jack | June 3, 2010 | Reply

  2. 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..

    Comment by dermawansyah | June 21, 2010 | Reply

  3. 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

    Comment by algentar | September 1, 2011 | Reply

  4. nice inpoh… :)

    Comment by Company Profile - warna | December 12, 2011 | Reply

  5. E

    Comment by Wnkcankul | November 24, 2012 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: