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
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 :
Kemudian Masukan kode berikut untuk menambahkan menu navigasi, letakkan sesudah tag </header>
sehingga kode lengkap nya seperti 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.
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>
setelah itu kita akan melakukan pengaturan pada header , dengan menambahkan kode berikut ke dalam style.css :
tambahkan lagi code css berikut untuk melakukan pengaturan pada menu navigasi :
langkah selanjutnya ,kita buka kembali file index.html, kemudian kita hapus dulu <article> sampai dengan </article> , lalu ganti dengan code berikut
tambahkan lagi code css berikut untuk melakukan pengaturan pada footer :
tambahkan kode css berikut untuk melakukan pengaturan pada gambar
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..
Sumber: http://jagocoding.com/tutorial/574/Tutorial_CSS_Desain_Layout_1_Dengan_HTML5_dan_CSS
0 Komentar untuk "Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS"