Pada kesempatan kali ini saya mau bagikan contoh dasar pembuatan template suatu WEBSITE dengan mengunakan CSS dan Html. Semua Website beda tapi punya persamaan dalam bagian-bagian yang ada dalam website tersebut yaitu header, content dan footer dan bagi pemula dalam website harus mengerti juga bagian-bagian tersebut. saya pemula juga ne.hehe
Ini yang saya bagikan sederhana anda ketik aja kode-kodenya di Notepad atau Sublime text kodenya separti dibawah ini.
Sebelum anda mengetikkan kode, terlebih dahulu buatlah sebuah folder di partisi leptop anda terserah mau buat apa nama folder tersebut.
Berikut adalah Kode HTML dan simpan ke dalam folder yang anda buat dengan index.html
<!DOCTYPE html><html><head><title>Membagun Website Dengan CSS</title><link rel="stylesheet" href="style.css"></head><body><div id="wrapper"><div id="header"></div><div id="main"></div><div id="sidebar"></div><div id="footer"></div></div></body></html>
Dan buat satu lagi CSS nya simpan dengan nama style.css kedalam folder tersebut kodenya seperti dibawah ini.
body {background-color: #ccc;}#wrapper {width: 980px;min-height: 500;background: maroon;margin:0px auto;padding: 10px;}#header {height: 220px;width: 100%;background: white;}#main {width: 670px;height: 500px;margin: 10px 0px;background: yellow;float: left;margin-left: 0px;}#sidebar {width: 300px;height: 500px;background: orange;float: left;margin: 10px 0px;margin-left: 10px}#footer {width: 100%;height: 150px;background: blue;clear: both;}
Keterangan :
<link rel="stylesheet" href="nama.css"> ini adalah nama dari CSS yang anda buat
Warna sesuaikan dengan oleh anda masing-masing di Css dan ubahnya di background:
Sekarang setelah selesai semua coba anda jalankan index.html yang anda buat di folder tadi dan tampilannya akan jadi separti dibawah ini. Selamat Mencoba.
Untuk memudahkan anda dalam mengetikkan kode Html dan CSS bisa anda pakek SUBLIME TEXT.
No comments:
Post a Comment