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…

Reka Bentuk HTML menggunakan HTML dan CSS

Assalamualaikum dan Salam Sejahtera,

Ok, aku dah skip beberapa minggu untuk posting ni. Mungkin minggu ni agak kalut dengan aktiviti2 berorganisasi mungkin sebab tu penat sangat kot. Tapi maaf bagi yang menunggu (Bajet2 mcm blog orang follow la). Tanpa buang masa, eloklah kita mulakan perkongsian kita kali ni. Macam minggu ke berapa aku x ingat, aku janji nak ajar pasal reka bentuk laman web kan?

Untuk pengetahuan hampa, ada beberapa cara nak reka laman web seperti :

  • <Table> HTML (cara yang paling aku tak cadangkan, disebabkan banyak formatting dalam table akan merumitkan hampa nak maintance. Dulu2 waktu ‘muda’2 aku guna table la, ya la noob tp lepas lama2 baru aku faham rupanya tak praktikal langsung)
  • CSS Framework (cara kebanyakkan web designer guna cara ni nak reka laman web, antara css framework yang paling terkenal adalah Bootstrap. InshaAllah klu ada kesempatan aku kongsi macammana nak guna. Aku pun slalu guna dan mudah)
  • CSS “Style : float” (pernah guna sekali, tapi sebab ang kena ada pemahaman yang agak mendalam dalam CSS, aku dah skip part ni dan guna CSS Framework)
  • CSS Flexbox (jujurnya x pernah pakai, tapi baca2 review ada kata tak berapa serasi (compatible) dengan IE (suka buat standard sendiri aku rasa, sebab tu x berapa nak ngamm) ).

Jadi perkongsian yang agak singkat ni aku nak kongsi macammana nak reka laman web menggunakan cara CSS “Style : float”

img_sem_elements

  • <header> – Defines a header for a document or a section
  • <nav> – Defines a container for navigation links
  • <section> – Defines a section in a document
  • <article> – Defines an independent self-contained article
  • <aside> – Defines content aside from the content (like a sidebar)
  • <footer> – Defines a footer for a document or a section
  • <details> – Defines additional details
  • <summary> – Defines a heading for the <details> element

Aku copy dan paste direct dari sini, sangat mudah dan aku harap hampa dapat faham.

Paling mudah nak aku terangkan ialah guna cara praktikal.

Macam biasa, buka sublime text suma dan tulis code ni.

code

Code aku ambil dari W3School

Bagi yang x nampak boleh muat turun gambar, aku faham hampa x masuk bab CSS lagi. Cuba hampa just go through dulu code ni, minggu depan mungkin kita akan mula dengan CSS jadi hampa boleh kaitkan dengan CSS yang kita buat ni.

Hampa akan dapat output macam ni nanti :

Capture

Contoh output Chrome

Sampai sini dulu ya, minggu ni jadual aku agak pack jadi mungkin aku tak sempat nak buat penerangan yang jelas. Kalau hampa x berapa faham sangat boleh komen kat bawah, nanti aku akan buat post yang khas untuk soalan2 hampa tu.

Sekian buat masa ni… 😉

 

Kegunaan Tag dalam HTML? Komponen HTML – Siri 2 (Pengukuhan-jawapan)

Assalam dan Salam Sejahtera Semua,

Macammana soalan minggu lepas, dapat buat x? Aku harap korang buat la ya, harini sibuk skit kat pejabat so lambat la sikit posting.

Sila rujuk contoh HTML yang aku dah buat kat bawah :

contoh_sourcecode

Contoh HTML soalan minggu lepas

Macam biasa, aku bagi gambar nak bagi korang taip sikit baru pandai. Orang kedah kata “hampa jangan main kecoh sngt”.

Bagi korang yang terpinga-pinga menda apa ni, sila rujuk balik posting minggu lepas tapi tak aci la korang dah tengok jawapan 😀 .

Ni contoh HTML yang keluar dekat Chrome :

contoh_printscreen

Contoh paparan HTML

Memang tak berapa sama la aku mengaku, kalau nak sama kena masuk kelas css dah tu. Tapi lebih kurang ni, kira halal la 😆 .

Yang mana tag yang korang x faham boleh rujuk sini, dan bagi yang baru nak belajar harap dapat ikut dari posting pertama tentang Pengenalan kepada HTML. Ini saja untuk kali ni, nanti aku post pasal macammana nak reka laman web asas guna HTML saja.

Kalau korang ada soalan yang nak aku terangkan apa2, sila komen yer atau hantar email kat aku.

Itu saja, Salam. 😎

Kegunaan Tag dalam HTML? Komponen HTML – Siri 2 (Pengukuhan)

Selamat Pagi dan Salam Jumaat Semua,

Macam mana minggu lepas, suma ok x? Aku harap korang boleh ikut posting2 sebelum ni. Kali ni cuma posting untuk latihan atau pengukuhan kepada posting2 lepas. Bagi yang baru nak mula, aku cadangkan mula pada posting pertama, boleh klik sini.

Aku nak buat sesi QnA dan sesi latihan saja. Korang boleh guna html editor ni untuk latihan yang aku nak assign ni. Jawapan kepada latihan ni, aku akan post pada posting minggu depan, kalau korang nak cepat2, korang boleh request kat bahagian komen, kalau x aku fikir korang nak amik masa korang nak buat buat dan belajar.

Sila rujuk gambar bawah untuk latihan.

capture

Contoh Laporan

Laporan atas cuma rekaan semata-mata, tak ada kaitan antara hidup dan mati ya. Aku mau latihan ni korang ikut betul2 bentuk aku bagi tu, nanti minggu depan kita periksa sama2. (Bajet2 cikgu 😆 )

Sampai situ dulu, kita jumpa minggu depan dengan jawapan dan tajuk baru.

Assalam.

Kegunaan Tag dalam HTML? Komponen HTML

Salam dan Selamat Pagi Jumaat Semua 😀 ,

Alhamdulillah diberi peluang nak update blog, jadi kita proceed ke perkongsian yang seterusnya. Dalam post lepas kita dah bincang pasal asas HTML dan harap hampa faham dan hadam inshaAllah.

Jadi kita akan sambung berdasarkan contoh sebelum ni, harap hampa simpan fail lepas (tak simpan tak pa, taip la lain 😆 ). Kita akan bincang apa itu tag. Minggu lepas kita ada sentuh kegunaan tag kan? Ingat dak? Hampa jangan buat2 tak ingat aku cepuk kang 😀 , contoh tag yang kita bincang minggu lepas contohnya macam <title> dan <html>.

Seterusnya, soalan simple nak tanya hampa, kenapa tag ada pembuka dan penutup? Fikir lekaih,………………………… (Ok lambat 😛 )……….
Jawapannya sebab kalau tak dak penutup macam mana kita nak tau kita nak apply menda tu sampai mana, contohnya kita nak tebalkan (baca : bold) tulisan dari mana ke mana. Faham dak? tak faham kita kenalah proceed ke praktikal, teori saja tanpa praktikal mmg xkan faham.

Langkah-langkah :

  1. Dari projek lepas, aku nak korang kosongkan <body> dan jangan usik <head>.
  2. Dalam <h1> taip “Kegunaan Tag dalam HTML
  3. Dalam <b> taip “Kita dah masuk minggu kedua bro, nak pandai jgn malas
  4. taip <br>
  5. Dalam <i> taip “senget”
  6. taip <br>
  7. Dalam <u> taip “ada garisan”
  8. Siap! Save dan cuba buka dalam pelayar hampa.
  9. Tak faham? Tengok gambar kat bawah. (Saja aku bagi gambar, kalau dak hampa copy paste. 😛 ).
capture

Contoh HTML

Amacam? Dapat x? Cuba buka jadi camna? Gambar bawah contoh paparan Chrome.Dapat x? Wah! tahniah, hampa memang power dan padu. Tahniah2.

capture

Contoh Paparan

Macam perkongsian lepas, kan aku kata analogi paling senang nak cakap hampa ada teks kosong dan hampa nak ada simple formatting jadi kat sini la fungsi tag ni.

Berbalik kepada contoh yang hampa taip tu, aku akan terangkan satu2.

  1. <title> yang minggu lepas punya, yang ni kita nak cakap kat pelayar. Berkata HTML kepada pelayar Chrome “Woi chrome! tajuk web aku “Latihan Bersama DIY IT” “. jadi dia pun baca tag tu dan dia letak kat tab tu.
  2. <h1> yang minggu lepas jugak, yang ni kita habaq tulisan dalam tag tu heading kita punya karangan/content/isi laman web.
  3. <b> paling mudah nak tengok, nampak dah tau kan, kita nak tebalkan (baca : bold) tulisan.
  4. <br> eh? b = bold? br? maksud <br> = break… Fungsi macam enter jugak, kita suruh dia buat line baru.
  5. <u> underline, jelaskan?

Yang lebih2 tu? <html> 🙄 (sambil garu kepada)? Haaa! Kantoi, hampa skip kelas eh? Yang lain2 tu boleh refer sini. Lain kali jangan ponteng kelas… Ha3

Tu baru sikit fungsi yang kita boleh guna, aku takkan bincang panjang2 dalam ni, hampa boleh buat latihan lagi, DIY la kawan. Refer dekat sini (w3schools.com). Laman web ni sangat banyak membantu tau. Sampai sini dulu untuk minggu ni, tunggu minggu depan plak. Aku nak tunjuk kat hampa macam mana nak reka laman web kosong paling senang.

Jumpa Jumaat depan plak k. Semoga aku diberi kekuatan. Jangan cemuih belajar. Salam. 😉