Tutorial 2: Buat website guna notepad

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.


Tiada ulasan:

Catat Ulasan

Related Posts Plugin for WordPress, Blogger...