Untuk dasar cara membuat tampilan web atau layout menggunakan CSS ,
kita perlu mengetahui apa-apa saja yang ada pada layout sebuah web
sehingga terbentuk sebuah web seperti yang kita inginkan.
Di dalam sebuat web terdapat 4 urutan atau kerangka web yaitu, Header, Sidebar, Section (body), Footer.
Header : Kepala website. Tempat letak judul web, logo web dan lain sebagainya.
Sidebar : Tempat letaknya menu, konten, dan lain sebagainya.
Section (Body) : Merupakan bagian tubuh dari sebuah website, tempat dimana artikel atau postingan akan tampil.
Footer : Merupakan bagian untuk penulisan sebuah Hak Cipta sebuah website.
Berikut Syntax CSS dasar untuk membuat tampilan web atau layout :
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPEhtml>
<html>
<head>
<style>
#wrapper{
width:100%;
margin:0auto;
}
#header {
background-color:#1abc9c;
color:#2c3e50;
text-align:left;
padding:10px;
font-family:Century;
}
#sidebar {
line-height:30px;
background-color:#16a085;
height:500px;
width:200px;
float:right;
padding:5px;
text-align:center;
}
#body{
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:#1abc9c;
color:#2c3e50;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Cari Kode</h1>
</div>
<div id="sidebar">
Home<br>
About<br>
</div>
<div id="body">
<h2>Posting</h2>
<p>
(Body)Isi dari postingan
</p>
</div>
<div id="footer">
Copyright Carikode.com
</div>
<body>
<html>
Untuk penulisan syntax di atas gunakan Internal Style, Bagi teman –
teman cari kode yang belum tahu silahkan baca artikel sebelumnya tentang
“Menghubungkan HTML dengan CSS”.
ini hasil outputnya :
membuat tampilan web atau layout menggunakan CSS
Sekian untuk tutorial “Cara membuat tampilan web atau layout menggunakan CSS”.
Tidak ada komentar:
Posting Komentar