pada tutorial ini saya akan mencoba menjelaskan Bagaimana Membuat Desain Layout Website dengan Menggunakan HTML5 dan CSS.. Okeh Langsung saja pada Step by step nya ..
sebelum nya kita buat dulu file dan folder nya yaitu
- index.html (File) untuk membangun halaman Website dengan HTML5
- style.css(File) untuk mendefinisikan pengaturan style (gaya) dari halaman html.
- gbr (Folder) untuk menyimpan file gambar
Step By Step ..
Step 1. Buka file index.html, masukan kode HTML berikut :
<!doctype html> <html> <head> </head> <body> <div id="wrapper"> <header><h1>JagoCoding (Layout HTML5 dan CSS)</h1></header> <nav></nav> <article><h2>JUDUL ARTIKEL 1</h2> <section id="article1"></section> <section id="article2"></section> <section id="article3"></section> </article> <aside> ASIDE </aside> <div id="footer"><b> Copyright © 2014 By : Ardie Jocong </b></div> </div> </body> </html>
Kemudian Masukan kode berikut untuk menambahkan menu navigasi, letakkan sesudah tag </header>
<nav> <a href="#">Home</a> | <a href="#">About</a> | <a href="#">FAQ</a> | <a href="#">Contact </a> </nav>
sehingga kode lengkap nya seperti berikut
<!doctype html> <html> <head> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="wrapper"> <header><h1>JagoCoding (Layout HTML5 dan CSS)</h1></header> <nav> <a href="#">Home</a> | <a href="#">About</a> | <a href="#">FAQ</a> | <a href="#">Contact </a> </nav> <nav></nav> <article><h2>JUDUL ARTIKEL 1</h2> <section id="article1"></section> <section id="article2"></section> <section id="article3"></section> </article> <aside> ASIDE </aside> <div id="footer"><b> Copyright © 2014 By : Ardie Jocong </b></div> </div> </body> </html>
Step selanjutnya Buka file style.css , kemudian masukan kode CSS berikut untuk melakukan pengaturan pada wrapper , dan tambahkan code css untuk background di dalam tag body.
body { background-color:#515151; } #wrapper{ background-color:#333; float:inherit; width:900px; position:relative; margin:0 auto 0 auto; color:#f0f0f0; }
kemudian sebelum melakukan pengaturan dan pendefinisian CSS pada komponen yang lainnya .. untuk memanggil file CSS tersebut, kita panggil file style.css tersebut pada file index.html dengan cara memasukan code berikut ke dalam tag <header>
<link href="style.css" rel="stylesheet" type="text/css"/>
setelah itu kita akan melakukan pengaturan pada header , dengan menambahkan kode berikut ke dalam style.css :
header{ float:left; width:875px; /* lebar header */ height:70px; /* tinggi header */ background-color:#333; font-family:Arial, Helvetica, sans-serif; /* Jenis Huruf */ font-style:normal; font-size:18px; /* ukuran huruf */ padding:50px 0 5px 25px; color:#FC0; /* warna text */ }
tambahkan lagi code css berikut untuk melakukan pengaturan pada menu navigasi :
nav { float:left; width:875px; height:30px; background-color:#FC0; font-family:Tahoma, Geneva, sans-serif; font-weight: bold; font-size:12px; color:#333; padding:17px 0 3px 25px; /* posisi text yang berada di dalam tas nav dengan posisi (atas kiri bawah kanan)*/ }
langkah selanjutnya ,kita buka kembali file index.html, kemudian kita hapus dulu <article> sampai dengan </article> , lalu ganti dengan code berikut ,
<article> <section id="article1"><h2>JUDUL ARTIKEL 1</h2> <div class="t_images"> <div align="center">judul1<br> <img src="gbr/gbr1.png"height="90px" width="100px"/> </div> <strong><center><a href="#" target="_blank">Link Judul 1</a></strong> </div> </section> <section id="article2"> <div class="t_images"> <div align="center">judul 2<br> <img src="gbr/gbr2.png"height="90px" width="100px"/> </div> <strong><center><a href="#" target="_blank">Link Judul 2</a></strong> </div> </section> <section id="article3"> <div class="t_images"> <div align="center">judul 3<br> <img src="gbr/gbr3.jpg"height="90px" width="100px"/> </div> <strong><center><a href="#" target="_blank">Link Judul 3</a></strong> </div> </section> <section id="article4"> <div class="t_images"> <div align="center">judul 4<br> <img src="gbr/gbr4.jpg"height="90px" width="100px"/> </div> <strong><center><a href="#" target="_blank">Link Judul 4</a></strong> </div> </section> </article>
setelah itu jangan lupa tambahkan gambarnya ke dalam folder gbr , agar terlihat menarik .
kemudian untuk melakukan pengaturan pada artikel dan aside ( menu vertikal ) , tambahkan code css berikut :
article{ float:left; width:650px; background-color:#333; font-family:Arial, Helvetica, sans-serif; font-style:normal; font-size:12px; line-height:21px; color:#CCC; padding:25px 25px 5px 25px; } aside{ float:left; width:170px; background-color:#666; font-family:Arial, Helvetica, sans-serif; font-style:normal; font-size:12px; color:#CCC; padding:25px 15px 10px 15px; line-height:16px; }
tambahkan lagi code css berikut untuk melakukan pengaturan pada footer :
#footer { clear:both; width:875px; height:30px; background-color:#FC0; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:12px; color:#333; padding:20px 0 0 25px; }
tambahkan kode css berikut untuk melakukan pengaturan pada gambar
.t_images { float: left; width: 155px; border: 1px solid #999; margin: 0 15px 25px 15px; padding: 5px; }
lalu langkah terakhir masukan code css berikut , untuk pengaturan pada text heading , dan pengaturan pada link :
h1,h2,h3{ font-family:Arial, Helvetica, sans-serif; line-height:21px; } nav a{ color:#000; text-decoration:none; } nav a:hover{ color:#919191; text-decoration:underline; } a{ color:#FC0; text-decoration:none; } a:hover{ text-decoration:underline; }
Berikut adalah tampilan Hasil Akhir dari Layout yang telah dibuat....
cukup sekian tutorial dari saya.. nanti saya akan bagikan teknik-teknik pembuatan layout yang lainnya.. Thanks..