Untuk membuat website kita harus
memiliki pemikiran tentang bagaimana layout dari sebuah website tersebut. Maka
dari itu tutorial ini sangatlah penting bagi kawan pembaca yang baru mengenal
HTML dan CSS. Mau tahu bagaimana cara membuat layout sederhana website? Simak
langkah-langkah selanjutnya.
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:
body{
background:gray;
text-align:center;
font-family:Arial;
}
#kepala{
width:auto;
padding:20px;
background:#09c;
color:#fff;
}
#badan{
width:72%;
background:#ff9;
padding:2%;
height:400PX;
float:right;
}
#sidebar{
width:20%;
height:400px;
background:#6f9;
padding:2%;
float:left;
}
#kaki{
width:1350px;
height:50px;
background:#333;
color:#fff;
float:left;
}
Syntax
html:
<html>
<head>
<title>JUDUL
WEBSITE</title>
<link href="layout.css"
rel="stylesheet" type="text/css">
</head>
<body>
<div id="kepala">
<h1>Judul
Website</h1>
</div>
<div id="sidebar">
<h3>SIDEBAR</h3>
</div>
<div id="badan">
<h1>BODY</h1>
</div>
<div id="kaki">
FOOTER
</div>
</body>
</html>
Pada contoh ini saya menggunakan 5
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.
Seperti pada tutorial sebelum nya saya
menggunakan EXTERNAL CSS STYLE sebagai pengatur ukuran dan warna. Kira- kira
tampilan nya seperti ini:
Sahabat
Cari kode bisa mengembangkan sendiri warna dan leteknya sesuai keinginan.
Karena pada tutorial ini kita hanya menjelasakan dasarnya, dengan warna yang
berbeda-beda agar pemula yang ingin belajar bisa lebih mudah memahami fungsi
dan letaknya. Dan pastikan anda selalu mempraktekkannya langsung bisa mudah
untuk memahami setiap baris dari kode html.
1 Comments
mantap dah artikelnya
ReplyDeletehttp://aromaessen.com