Membuat Layout Web Dengan HTML

by 07.10.00 0 komentar

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 disebuthead, 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

Unknown

Pelajar SMk

Nama saya Aisatul Muthoharoh,Saya bisa dipanggil Aisatul..Kadang-kadang teman saya juga suka memanggil saya Sutul (mungkin panggilan kesayangan).Saya bersekolah di SMK Umar Fatah Rembang.

0 komentar:

Posting Komentar