Untuk membuat template website ini ada beberapa hal yang harus disiapkan.
Pertama
Tentukan folder tempat menyimpan rancangan, gambar yang kan digunakan.
Kedua
Untuk membuat HTML dan CSS, kita bisa gunakan teks editor seperti Notepad, Notepad++ yang lebih mudah digunakan, CoffeeCup dan lain-lain untuk pengguna Windows. Kalau seperti saya pengguna ubuntu bisa menggunakan Gedit, Bluefish dan lain-lain.
Oke. Langsung lanjut aja ya!
Pertama kita buat dulu rancangan HTML-nya. Ketikkan kode HTML seperti di bawah ini :
<html>
<head>
<title>JockerDT</title>
<meta name="author" content="Jocker" />
<link rel="stylesheet" href="gaya.css" type="text/css" />
</head>
<body>
</body>
</html>
Simpan kode ini dengan format .html. Kalau bingung simpan saja dengan nama index.html
Kedua kita buat gaya.css. Ketik saja kode di bawah ini.
body {
}
Simpan dengan nama gaya.css.
Catatan :
Index.html dan gaya.css disimpan dalam satu folder. Gunanya agar gaya.css dapat langsung diakses oleh index.html saat kita buka dengan browser. Gaya.css bisa kita ganti namanya dengan syarat kita juga harus merubah kode htmlnya, tepatnya pada tag link. Pada href="gaya.css", gaya kita ubah namanya sama seperti file css yang kita simpan.
Beberapa lagi yang perlu kita gunakan untuk memudahkan kita yaitu menggunakan tag div untuk memberi nama id atau class. Id dan class digunakan untuk memudahkan kita mengatur gaya template website dengna css. Bedanya untuk id hanya bisa dipanggil sekali sedangkan class dapat dipanggil berkali-kali di file css-nya.
Contohnya :
Id dengan nama lappet. Pada file css kita penggil denan menggunakan tanda "#". Maka pada file cssnya kita panggil dengan format :
#lappet {
}
Untuk class kita gunakan tanda titik. contoh :
.lappet {
}
Untuk mempermudah kita dalam mengingat bagian dari file html kita kita bisa membuat komentar dengan format :
<!--komentar-->
Untuk komentar file css, format komentar yang bisa kita pakai yaitu :
/*komentar*/
Oke kita langsung Lanjut ke bagian 2 ya! Silahkan klik Tutorial-merancang-template-website bag 2.html.
0 komentar:
Posting Komentar