Kali ini kita akan merancang template dasar menggunakan CSS, sebuah tutorial sederhana yang paaaaaaling dasar buat
kamu yang masih awal belajar membuat website. Hal dasar dalam tampilan sebuah
website adalah template. Nah Merancang template sederhana menggunakan CSS adalah hal yang mudah dan menyenangkan loh. Kita bermain dengan warna dan kotak-kotak yah. Haish kotak kotak......
CSS itu apa si? Mungkin yang baru menghadapi
perkuliahan di pertemuan pertama belum diajarkan CSS ya, paling baru
dasar-dasar HTML, PHP dan lainnya. CSS atau kepanjangan dari Cascading Style
Sheet yang merupakan rangkaian pengendali beberapa komponen dalam sebuah web supaya
lebih terstruktur dan seragam. Bahasa mudahnya itu semacam sebagai make-up buat
website kamu, suapay lebih cantik, bentuknya sesuai keinginan, warna dan
ukuran-ukurannya tertata dengan rapi dan indah.
Langsung saja yukk kita akan membuat template dasar
menggunakan CSS dengan hasil sebagai berikut ini nih :
Berikut kita mulai merancang dari NOL ya.
1. Buka notepad ++ kamu atau Dreamweaver atau
jendela editor yang biasa kamu gunakan untuk belajar membuat website.
2. Buat folder dengan nama template_dasar di htdocs kamu. Kemudian dalam folder, buat 2 (dua )
File dengan nama :
a. Index.php
b. Style.css
3.
Pertama kita buat CSS nya dulu. Buka file style.css
kemudian isikan dengan code sbb :
#toko {
width:
1000px;
}
#header {
background
:linear-gradient(to bottom, #03C, #4776E2);
margin:
5px;
padding:
5px;
color:#fff;
clear:
left;
height:
150px;
border:
2px solid #FFF;
}
#menu {
background
: linear-gradient(to bottom, #03C, #4776E2);
margin:
5px;
padding:
5px;
float:
left;
width:
250px;
min-height:200px;
}
#content {
margin:
5px;
padding:
5px;
float:
right;
width:
700px;
border:
5px solid #00F;
min-height:200px;
}
#footer {
background
:linear-gradient(to bottom, #03C, #4776E2); ;
margin:
5px;
padding:
5px;
padding-top:30px;
color:#fff;
clear:
both;
height:
40px;
border:
5px solid #FFF;
}
4. Kemudian kita panggil div dan class yang telah
kita buat di style.css ke dalam index.php dengan code sebagai berikut :
<div id="toko">
<div
id="header">ini untuk
Header
</div>
<div
id="menu">Ini adalah
kolom untuk menu
</div>
<div
id="content">ini adalah kolom untuk isi web / konten
</div>
<div
id="footer">ini adalah kolom untuk footer
</div>
</div>
Kenapa id Header, menu, content, dan footer berada di dalam id toko?
Ibaratkan saja id toko adalah sebagai kotak pembungkus. kalau dilihat di code CSS id toko hanya berisi width : 1000px. Berarti pembungkusnya itu memiliki lebar 1000px, jadi semua yang ada didalam id toko tidak akan keluar dari kotak 1000px tersebut.
5. Kalau sudah lalu simpan keduanya. Apakah sudha
bisa dicoba? Belum, kita tambahkan code untuk memanggil file style.css ke dalam
index ya. Letakkan code berikut di bagian paling atas code di index.php :
<link href="style.css"
rel="stylesheet" type="text/css"> <!--kode panggil
css-->
6.
Nah, kalau begini sudah dapat dicoba di
localhost dengan mengetikkan localhost/template_dasar
Bagaimana hasilnya? Sesuai dengan desain di atas?
Ups, tetapi kenapa tampilannya berada di sebelah kiri layar. Kan bagusnya
kalau ditengah. Kita tambahkan code lagi yuk di file style.css letakkan di
bagian paling atas ya. Kita buat supaya desain template yang kita buat tampil
di tengah layar bukan di kiri layar.
* {
margin:5px
auto 5px auto;
}
Kenapa simbolnya * (bintang) karena simbol * berarti membaca semuanya.
Ingat sebuah code SQL “SELECT * FROM..... “ itu bukankah berarti menampilkan
semua data dari tabel yang disebutkan. Sama saja di CSS juga seperti itu. Kalau
sudah ditambahkan lalu disimpan. Apakah sudah cantik sesuai dengan harapanmu
desain template sederhana ini?
Sudah
jadi, untuk mengaplikasikan penambahan menu kemudian perubahan tata letak dan
lainnya akan kita bahas di posting selanjutnya yaa. Silahkan di coba-coba code
CSS nya. Ini masih sangat dasar, Mudah kan J Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar