RSS

Membuat Kerangka Web

04 Mar

Segala sesuatu, akan baik hasilnya jika dikonsep. begitu kuga dengan web. Kita dapat membuat kerangkanya terlebih dahulu, seperti ini:

Hal ini dilakukan dengan menggunakan CSS code:

#wrapper { margin:auto; width:980px; border:2px solid black;}

#header { height:80px; border:2px solid green}

#inner { float:left; margin:10px 0; border:1px solid green}

#footer { clear:both; height:50px; border:1px solid blue}

#sidebar { float:left; margin-right:10px; width:200px; height:400px; border:1px solid blue;}

#content { float:left; width:760px; height:400px; border:1px solid green;}

#content-top { clear:both; margin:auto; width:760px; height:120px; border:1px dotted blue;}

#content-main { float:left; margin:auto; width:480px; height:260px; border:1px dotted blue;}

#content-right { float:right; margin:auto; width:260px; height:180px; border:1px dotted blue;}

Sedangkan kode HTMLnya:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; lang=”en” xml:lang=”en”>

<head>

<title>Task 1</title>

<link type=”text/css” rel=”stylesheet” href=”css1.css” />

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

Header

</div>

<div id=”inner”>

<div id=”sidebar”>

sidebar

</div>

<div id=”content”>

<div id=”content-top”>

Top Content

</div>

<div id=”content-main”>

Main Content

</div>

<div id=”content-right”>

Right Content

</div>

</div>

</div>

<div id=”footer”>

Footer

</div>

</div>

</body>

selamat mencoba 🙂

Advertisements
 
1 Comment

Posted by on March 4, 2010 in PTI478

 

One response to “Membuat Kerangka Web

  1. Arashi

    January 20, 2013 at 3:49 pm

    keren Om…, ijin nyoba…, :B

     

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

 
The Way I Am

Live everyday as if it was your last

Some Good Eats

Eat and don't worry about it

Anggriani

Bacalah! Tulislah !

Padepokan Budi Rahardjo

belajar untuk menjadi manusia ...

Catatanku

Ini adalah album yang berisi catatan yang saya tulis dalam perjalanan waktu hidup. Catatan yang terinspirasi dari apa yang saya lihat, saya baca, saya dengar, dan saya rasakan.

Catatan Bang Akrie

Simplicity.Humble.Joyfull

%d bloggers like this: