Tutorial belajar dasar HTML Cara Membuat tampilan web / layout di HTML
Membuat layout atau tampilan web yang kita butuhkan adalah
membuat kelas-kelas atau bagian-bagian .dengan menggunakan tag <div>
seperti yang sudah kita pelajari pada tutorial sebelum nya. Dan menggunakan
syntax css sederhana.Seperti pada umum nya web mempunyai head, body, footer dan
sidebar.
Perlu di ingat di asumsikan untuk membuat tampilan web atau
layout web kita harus terlebih dahulu memahami tentang kelas html seperti pada
tutorial sebelum nya agar memudahkan dalam membuat layout.
syntax css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
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;
}
|
syntax html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<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>
|
Seperti pada tutorial sebelum nya saya menggunakan EXTERNAL CSS STYLE sebagai pengatur ukuran dan warna. Kira- kira tampilan nya seperti ini:
Hasilnya:
Membuat tampilan web / layout di HTML
Sahabat CARIKODE bisa mengembangkan
sendiri warna dan tata letak nya sesuai keinginan. Karena pada tutorial ini
kita hanya menjelaskan dasar nya, dengan warna yang berbeda-beda agar pemula
yang ingin belajar bisa lebih mudah memaham fungsi dan letak nya. dan pastikan
anda selalu mempraktekkan nya langsung agar lebih cepat memahami setiap baris
perintah pada html.
