Misnandi Blog

Selalu ada hari indah untuk belajar

Membuat Layout Web Dengan HTML

Untuk membuat layout atau tampilan web, yang kita butuhkan adalah membuat kelas atau bagian-bagian dengan menggunakan tag <div> dan menggunakan syntax css sederhana. (yang belum paham dengan CSS klik disini)

Seperti pada umum nya web mempunyai mempunyai bagian-bagian yang sering disebut head, body, footer dan sidebar, Jadi untuk membuat tampilan web atau layout web kita harus terlebih dahulu memahami tentang bagian-bagian html agar memudahkan dalam membuat layout. (Yang belum paham dengan bagian-bagian HTML klik disini).

Disini saya hanya memberi contoh membuat layout sederhana saja, silahkan teman-temen untuk merubahnya sendiri.

Contoh syntax CSS

body{
background:yellow;
text-align:center;
}
#kotak{
width:750px;
height:650px;
margin:0px auto;
}
#kepala{
width:750px;
height:100px;
background:red;
}
#badan{
width:750px;
height:450px;
background:white;
float:left;
}
#sidebar{
width:200px;
height:450px;
background:green;
float:left;
}
#kaki{
width:750px;
height:100px;
background:blue;
float:left;
}

Contoh HTML

<html>
<head>
<title>JUDUL WEBSITE</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>

<div id=”kotak”>
<div id=”kepala”>
<h1>Judul Website</h1>
</div>
<div id=”badan”>
<div id=”sidebar”>
<h3>SIDEBAR</h3>
</div>
<h1>BODY</h1>
</div>
<div id=”kaki”>
<h1>FOOTER</h1>
</div>

</div>

</body>

</html>

Pada contoh ini saya menggunakan 4 kelas atau bagian, pada bagian header saya memberi nama kepala, pada bagian body dengan nama badan, sidebar, dan footer dengan nama kaki, dan ke empat kelas tersebut saya letakkan di dalam kelas kotak sebagai dasar letak nya.

Dan Kira- kira tampilan nya seperti ini:

Membuat tampilan web / layout di HTML

Pastikan anda selalu mempraktekkan nya langsung agar lebih cepat memahami setiap baris perintah pada html.

Advertisements

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

Information

This entry was posted on 10 May 2015 by in Programing, web and tagged , .
%d bloggers like this: