Dah rasa teruja nak buat website bila belajar kat sini. Ok…kali ni aku nak sambung
tutorial kedua buat website guna notepad (for beginners). Sebelum aku dah ajar
cara nak buat title dan kandungan dalam website, hari ni aku nak ajr pulak
macam mana nak mencantikan sikit website membosankan hitam putih yang orang
buat tu. Kita akan tambah warna latar belakang dan besarkan tulisan serta susun
tulisan. Oh….kali ni aku ajar Bahasa CSS untuk cantikkan website ni. Ok,let’s begin.
First sekali, buka notepad yang korang dah isi kod
html tu. Lepas tu tambah kod berikut:
Nampak tak kod apa yang lain daripada entri sebelum ni? Kali ni yang paling penting tambah kod <style>….</style> tu dulu. Ni la kod CSS yang korang akan guna untuk cantikkan website.
Ok.dah faham? Kita teruskan dengan h{font-size:40px;}. Ini ialah elemen
dalam kod CSS. Maksud kod tersebut ialah
h{font-size:40px;}
bermaksud h merujuk kepada header, font-size merujuk kepada elemen tulisan
tersebut iaitu saiz tulisan.
color:white;
bermaksud tulisan untuk header akan jadi warna putih.
body{background-color;} bermasud
warna latar belakang isi kandungan website. body merujuk kepada isi kandungan website. background-color merujuk kepada warna latar belakang. Cuba korang
masukkan kod ni dan lihat hasilnya.
Ok…sekarang tambah sikit lagi. Kita akan tambah paragraph. Tambah kod seperti berikut:
Nampak <p1>…..</p1> dan <p2>….</p2> tu? Tu pulak kod html unutk paragraph. Jadi, p1 ialah perenggan satu dan p2 ialah perenggan dua. Ingat….! Setiap kali nak tambah elemen pada kod html sebaiknya tambah <br>. <br> bermaksud break. Jadi, tak adalah tulisan tu nanti bertindih ke serabut ke…
p1{position:relative;}
bermaksud kedudukan paragrapah tersebut boeh berubah-ubah. Ini penting kalau
orang nak ubah kedudukan paragraph.
{top:40px;}
menentukan kedudukan paragraph pada isi kandungan website. Ingat perlu tambah
kod {position:relative;} dulu, baru
kedudukan paragraph akan berubah.
Manakala p2{….}
adalah sama seperti p1{…} Cuma aku
tuar waran tulisan shaaja menjadi hitam.Ingat sebelum tambah paragraph, letak
kod <br> dulu pada kod
paragraph sebelumnya seperti gambar di atas. Dah siap masukkan semua kod, lihat
hasilnya:
Senang kan? Sekarang website korang nampak la cantik sikit.Korang boleh la buat warna latar belakang lain ke ikut citarasa masing2. Selamat mencuba. Ada apa2 boleh tanya di ruangan komen.
Lihat tutorial seterusnya.
Lihat juga tutorial pertama.
selamat petang.Yang style tu nak letak di akhir kan?
BalasPadamstyle kena ada dua2 tempat. Pada awal sebelum code untuk style tu, dan selepas habis coding utk style kena letak penutup.
PadamCamtu lah. Nak tunjuk lebih2 kat komen payah sikit bro.
@Unknown
PadamUntuk tag ’style’ lebih elok letak di bahagian atas atau dalam ruangan tag ‘head’. Ini sebab website bila loading style css dulu, user akan nampak website kita laju.
Maaf di entri yang lepas sy tak tekankan perkara ini. Dan contoh kat atas ni dibuat hanya untuk lebih senang memahamkan pembaca sahaja.