Pengenalan Kepada CSS – Pengukuhan-Jawapan

Assalamualaikum dan Salam Jumaat semua,

Tak berkesempatan nak post untuk minggu2 lepas, akhirnya aku dapat luangkan kejap masa nak buat jawapan untuk pengukuhan minggu2 lepas punya post(dah x ingat minggu ke berapa).

Tapi untuk minggu ni, aku sempat buat jawapan saja, untuk pengenalan untuk PHP nampak gaya x sempat aku nak siapkan, minta maaf sebab aku dah janji nak post sekali kan 😦 .

Jadi, berbalik kepada topik, hampa dah cuba belum? Mcmmana? Jadi x? Aku dah buat, walaupun x sama sngt tapi hampir2 la, klu nak bagi sama takut satgi nampak code tu rumit sangat plak.

Result

Jeng3x, Amacam?

Aku dah buat contoh code, aku dah bahagi kepada dua bahagian iaitu head dan body. Code hampa x semestinya kena sama dengan aku, kalau hampa dapat lebih kurang tu tahniah dan selagi mana code hampa jalan kira ok la tu, itu namanya kreativiti.

Head

bahagian head

Body

bahagian body

Itu saja, kalau ada soalan apa2 sila komen kat ruang bawah atau email aku saja. Nanti kita boleh berbincang.

InshaAllah ada masa aku akan post untuk pengenalan kepada PHP plak.

Wallahualam.

 

Pengenalan Kepada CSS – Pengukuhan

Assalamualaikum,

Jeng3x, penat aku fikir akhirnya dah siap, kat sini aku lampirkan contoh reka bentuk web yang aku nak. Kerja hampa cuba tiru balik reka bentuk ni guna pemahaman hampa dalam html dan css yang aku dah ajar sebelum ni. Ni kira open book test la, minggu depan aku bagi jawapan na, bagi sapa2 yang blur tu mungkin boleh refer tutorial HTML aku kat sini dan CSS kat sini.

 

Capture

Contoh Reka Bentuk Laman Web

InshaAllah, kalau tak ada aral melintang minggu depan aku akan post jawapan dan pengenalan kepada PHP pula k.

Sebelum tu kalau ada apa2 cadangan hampa leh PM aku atau komen nanti. Bubye.

Sampai sini dulu yer, Sekian.

Pengenalan kepada CSS

Salam Jumaat semua,

Hari ni kita masuk topik baru iaitu CSS. Jadi apa itu CSS? Nama panjang CSS adalah Cascading Style Sheets (aku pun tak tau nak terjemah bahasa macam mana), fungsi utamanya untuk menterjemah/mentafsir HTML yang kita buat dalam bentuk yang kita mau contohnya untuk laman web kita nak header <h1> warna merah dan font type times new roman.

Ada beberapa cara nak buat CSS samada kita nak :

1. Inline (Satu baris dengan tag)

contoh : <h1 style="color:red">TAJUK APA-APA</h1>

2. Internal (Kita letak setempat dalam satu tag sendiri)

contoh : 
<style>
  h1 {
     color : red;
  }
</style>

3. External (Buat fail lain kat luar, lepas tu kita import masuk dalam HTML, dalam kes aku fail aku nama “styleAku.css”)

contoh : <link rel="stylesheet" type="text/css" href="styleAku.css">

Korang dah nmpkkan contoh yang aku bagi, tapi dalam kes kita aku nak fokus pada penggunaan Internal punya CSS style. Nanti dah maju hampa boleh la nak cuba guna external yang mana aku sngat2 sarankan.

Macam biasa, kita mula dengan sublime text atau notepad++ kita (kalau nak muat turun, tekan link).

Rujuk gambar bawah :

Source_Code

Contoh mudah cara penggunaan CSS

Macam yang kita boleh tengok, aku dah set body dia kena ada warna latar mcm biru2 sikit, hampa mesti x fahamkan awat dengan kod warna tu. Tu nama dia kod warna untuk HTML, kalau warna biasa2 hampa boleh letak truih ja lagutu, kalau ada warna yang khusus hampa boleh rujuk kat sini.

Aku dah set semua <h1> (header) warna merah, <b> (bold) warna biru, dan <p> (paragraph) saiz 30px. Kat bawah contoh paparan dalam pelayar :

Dengan

Contoh paparan pelayar Firefox

Cantikkan? 😆  (perasan)

Ok la fine, x berapa cantik tapi aku rasa elok la sikit daripada kosong ja kalau tak dak CSS. Kat bawah contoh kalau tak letak CSS

Tanpa

Contoh paparan tanpa CSS

Nampak?

Hampa cuba dulu kat komputer hampa boleh dak. Kalau boleh tahniah!

Sebenarnya bukan tu saja fungsi CSS, sebenarnya banyak lagi. Contohnya hampa boleh set kalau arrow/mouse hover (lalu ataih) dekat mana2 bahagian dalam HTML hampa dia boleh tukar2 warna. Menarik kan????

Untuk minggu ni hampa main2 dulu sambil2 hampa rujuk sumber ni.

Minggu depan kita buat latihan sikit sambil sentuh semua bahagian asas CSS termasuk fungsi yang aku cakap boleh tukar2 warna tuh.

Lepas saja latihan kita akan mula masuk PHP… nantikan!!! 😉

Hingga berjumpa lagi minggu depan. Wassalam…