Tutorial Membuat Layout Pada HTM & CSS
Dengan kesempatan ini saya akan membuat sebuah tutorial dalam
membuat Layout Website sederhana menggunakan HTML & CSS
Jadi disini saya akan menjelaskan tentang Layout yang paling
standart dan paling umum. Bisa teman-teman susun kerangka website sederhana
sepeerti gambar dibawah ini :
Coba teman-teman perhatikan pada contoh layout web pada
gambar diatas. Gambar diatas adalah gambar tampilan sebuah website. Dimana terdapat
sebuah header pada bagian atas , menu navigasi bagian tengah, dan footer bagian
paling bawah.
Nah sekarang kita akan membuat
sebuah layout website yang paling sederhana seperti pada gambar diatas . untuk
bisa mudah memahami tentang cara membuat template website. Teman-teman harus
memahami dulu dasar-dasar dari HTML
dan CSS disini saya membuat sebuah
file dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>SEMANGATBISA</title>
</head>
<style>
header, footer {
color:
white;
background:
black;
clear: left;
padding:
1em;
text-align:
center;
}
article{
margin-right: 50px;
border-right: 3px;
padding: 2em;
overflow: hidden;
}
</style>
<body>
<header>
<h1><span
style="color:red">SEMANGAT </span> BISA</h1>
</header>
<div
style="background-color: 006600; color: green;padding: 1px">
<p
align="center"><a href=""> Halaman
|</a><a href=""> Buku |</a><a href="">
Belajar |</a><a href=""> Kontak</p>
</div>
<footer>Copyright
©WellyOktavianus</footer>
</body>
</html>
Nah kalian bisa coba menggunakan sourcode yang ada diatas dan
dijalankan.
Baiklah sekian dulu tutorial web tentang membuat
tampilan layout website sederhana dengan menggunakan html dan css.
Tidak ada komentar:
Posting Komentar