1 2 Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS Oleh: Ardie Jocong pada tutorial ini saya akan mencoba menjelaskan Bagaimana Membuat Desain Layo...
Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS Oleh: Ardie Jocong
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 ..
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 :
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 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; font-style:normal; font-size:18px; /* ukuran huruf */ padding:50px 0 5px 25px; color:#FC0; /* warna text */ }
/* Jenis Huruf */
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 , lalu ganti dengan code berikut , <article> <section id="article1">
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.. :)
Tentang Penulis
Ardie Jocong let's we learn coding together ,.. Learning by doing.. cause the best way of learning about anything is by doing. explore your brain ..
