Membuat Template index Web Statis 1
advertisement
Membuat Template index Web Statis 1
Membuat website harus dengan ketekunan dan pengembangan pada diri sendiri serta jam terbang yang
banyak, itu lah syaratnya, itu sederhana kalau yakin ingin belajar, di harapkan pengembangan pada diri sendiri
dan jangan bergantung dengan apa yang di pelajari, kembali ke awal bahwa jam terbang lah yang akan
menuntun. Saya sendiri belajar web ini dengan rentan waktu 3 bulan, itu adalah waktu angin-anginan. Jika
ingin cepat bisa dalam waktu 1 bulan pun saya rasa bisa. Itu semua sudah termasuk membuat web dinamisnya
yang menggunakan engine php. Untuk sekarang kita akan memulai membuat templatenya dahulu seperti
gambar di atas. Siapkan Xampp. Install xampp di disk D: . buka folder xampp ->htdocs dan Buatlah folder
“DocWebstatis”. Buka Dreamweaver atau software sejenisnya. Buat file dengan nama dan extensi
“index.html” dan buat juga file cssnya dengan nama dan extensi “style.css”.
File Index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DocWebstatis</title>
<!-- ini bawah dinamakan attach, kegunaan untuk memanggil file css yang bernama "style"-->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- id nampan adalah sebuah container-->
<div id="nampan">
<div id="kepala">kepala</div><!-- penutup kepala/header digunakan untuk menruh judul web-->
<div id="kiri">
<p>kiri</p>
<p>kiri</p>
<p>kiri</p>
<p>kiri</p>
</div><!-- penutup kiri, kiri sebagai Artikel, nanti div ini akan digunakan untuk menaruh artikel-->
<div id="kanan">
<p>kanan</p>
<p>kanan</p>
<p>kanan</p>
<p>kanan</p>
</div><!-- penutup kanan, kanan adalah sebagai sidebar-->
<div style="clear:both;">
<div id="kaki">kaki</div><!-- penutup kaki, kaki dikenal sebagai footer, biasanya digunakan untuk penciptaab misal, © listsoftmedia.com |
2015.-->
</div><!-- penutup div style="clear:both;" -->
</div><!-- penutup div, bedanya ada pada slice </div> -->
</body>
</html>
File style.css
@charset "utf-8";
/* CSS Document */
/*
A.body adalah tag yang ada pada file html <body>.
1.margin, adalah kode css yang berguna mengatur jarak pada elemen elemen yang ada pada html. misal div.table dll.
2.padding, adalah kode css yang berguna mengatur jarak pada elemen elemen yang ada pada html tetapi berada dibawah border.
B.mengapa pada tag body menggunakan margin:0 & padding:0 ? Untuk meperjelaskanya coba cara berikut:
1.Hapus margin-top:20px; pada tag nampan, save, dan lihat hasilnya di browser.
2.Biarkan margin-top:20px; terhapus dulu, dan yang kedua hapus margin:0 & padding:0 pada body.
3.kembalikan ke awal/undo.
"Kesimpulanya. margin-top:20px; berguna untuk mengtur jarak nampan sebesar 20pixel ke atas.
dan pada saat margin:0 & padding:0 di hapus maka nampan dengan sendirinya mengatur jaraknya. ini di karnakan
bukan karna nampan yang secara otomatis mengatur jaraknya tetapi pada body itu sendiri yang otomatis mengaturnya.
maka dari itu kita harus mengatur body pada titik 0. ini berguna untuk mengatur elemen dengan mudah."
C.Margin:auto; ? kode css untuk mengatur tata letak nampan ke tengah & width:100px; adalah lebar nampanya.
*/
body{
margin:0;
padding:0;
}
#nampan{
width:1000px;
margin:auto;
margin-top:20px;
}
/*
D.kepala, width:100%; untuk mengatur lebar div id="kepala" mengikuti lebar div nampan.
*/
#kepala{
width:100%;
height:80px;
background:#06C;
}
/*
E.Lebar Kiri & Kanan itu adalah hasil pembagian lebar nampan 1000pixel. untuk kiri saya atur 700pixel dan kanan 300pixel.
F.Kiri & kanan menggunakan kode css float:left, agar susunan div tersusun sesuai mengikuti div sebelumnya.
*/
#kiri{
width:700px;
background:#CCC;
float:left;
}
#kanan{
width:300px;
background:#666;
float:left;
}
#kaki{
width:100%;
background:#999;
height:20px;
}
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Setelah di Copy kode program di atas silahkan jalankan di localhost anda. kira kira mendisain template web
tanpa menggunakan table seperti ini.
TIPS
1. Berlatihlah selama 3 kali. Pada yang pertama anda mengetik kode dengan melihatnya.
2. Kedua, cobalah menghapal kodenya, lalu ketiklah ulang kodenya dengan syarat hanya boleh
mencontek 3 kali.
3. Yang terakhir. ketik ulang kembali kodenya tanpa melihat sedikit pun.
Terus lah berlatih cara di atas adalah cara saya belajar 3 tahun yang lalu , sekian tips dari saya semoga
bermanfaat.
