Assalamualaikum Wr.Wb
Pada kesempatan kali ini saya akan berbagi sedikit ilmu yaitu membuat layuot HTML.Layot merupkan sebuah gambaran atau desain untuk membut sebuah tampilan web yang kita inginkan.Dalam pembuatan layout kali ini saya menggunakan atribut Style HTML.Layout yang saya buat kali ini terdiri dari : Header,Sidebar,Content,dan Footer.Oke, mari kita mulai.
Kita mulai dari menuliskan tag untuk style layout kita.Letakkan tag style di antara atribut <style> dan </style>.
- Style untuk Div,ini di gunakan untuk menampung semua element - element yang akan kita buat pada layout.
div.container{
width: 100%;
border: 1px solid gray;
}
- Style untuk Header dan Footer.Header di gunakan untuk meletakkan logo atau judul pada tampilan,sedangkan Footer biasa di gunakan untuk menandai tampilan dari akhir web yang kita buat selain itu footer juga bisa di gunakan untuk meletakkan keterangan web yang kita buat.
header, footer{
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
- Style untuk Nav / menu yang akan saya letakkan di sidebar.Selain di sidebar Nav juga bisa diletakkan di tempat lain,di bawah element header misalnya.Tapi kai ini akan saya letakkan di sidebar kiri seperti gambar di atas.
nav{
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul{
list-style-type: none;
padding: 0;
}
nav ul a{
text-decoration: none;
}
- Style untuk Artikel,ini merupakan tempat di mana kita meletakkan isi dari web kita.
article{
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
Sekali lagi tag di atas haru di letakkan di antara atribut <style> dan </style>
untuk lebih jelasnya lihat gambar di bawah ini
Oke itu tadi bagian dari tag Style sekarang mari kita lanjutkan ke tag HTML.
Letakkan tag di antara atribut <body> dan </body>.Saya sarankan untuk menggunakan tag <div> untuk menampung element yang akan kita buat agar tampilannya bisa tertata,mari kita mulai.
- tag Div untuk membuat tampilan layout kita supaya bisa lebih tertata
<div class="container">
- tag header untuk meletakkan logo atau judul web yang kita buat
<header>Bagian Header</header>
- tag Nav untuk menampilkan dan mengatur menu pada web yang kita buat
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Article</a></li>
<li><a href="#">Tutorial</a></li>
</ul>
</nav>
- tag Article di gunakan untuk meletakkan isi dari web yang kita buat
<article>Silahkan di isi sesuai keinginan</article>
- tag Footer di gunakan untuk menampilkan keterangan atau sedikit informasi mengenai web yang kita buat,misalnya kita bisa meletakkan alamat atau informasi singkat di bagian footer ini
<footer>Ini Bagian Footer</footer>
Letakkan semua tag tadi di antara <div> dan </div> dan harus berurutan dari Header sampai Footer,untuk yang masih bingung silahkan copy script yang saya kasih di bawah untuk di pelajari sendiri yang nanti hasilnya akan sama dengan gambar layout yang sudah jadi di atas
<!DOCTYPE html>
<html>
<head>
<style>
div.container{
width: 100%;
border: 1px solid gray;
}
header, footer{
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
nav{
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul{
list-style-type: none;
padding: 0;
}
nav ul a{
text-decoration: none;
}
article{
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
<title></title>
</head>
<body>
<div class="container">
<header>Bagian Header</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Article</a></li>
<li><a href="#">Tutorial</a></li>
</ul>
</nav>
<article>
<h1>Ini Artikel</h1>
<p>Responsive web desain ini mungkin mengingatkan kita pada desain web liquid jaman dulu (sebelum populernya fixed width). Pada artikel ini, Jeffrey Zeldman menulis: It’s what some of us were going for with “liquid†web design back in the 1990s, only it doesn’t suck. (Beberapa diantara kita menuju penggunaan liquid webdesign, kembali sebagaimana tahun 1990an, hanya saja tidak lagi jelek). Ya, responsive web desain memang bukan liquid desain, tetapi lebih tepat liquid with style :D.</p>
<p>Responsive web desain ini mungkin mengingatkan kita pada desain web liquid jaman dulu (sebelum populernya fixed width). Pada artikel ini, Jeffrey Zeldman menulis: It’s what some of us were going for with “liquid†web design back in the 1990s, only it doesn’t suck. (Beberapa diantara kita menuju penggunaan liquid webdesign, kembali sebagaimana tahun 1990an, hanya saja tidak lagi jelek). Ya, responsive web desain memang bukan liquid desain, tetapi lebih tepat liquid with style :D.</p>
<footer>Ini Bagian Footer</footer>
</article>
</div>
</body>
</html>
Sekian dulu mengenai layout sederhana HTML semoga bisa bermanfaat dibalik banyaknya kekurangan pada postingan kali ini,sampai jumpa di postingan berikutnya.Sekian
Referensi:http://w3schools.com/
Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb
