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.

 

Advertisements

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. 😉

Apa itu HTML? Pengenalan

Salam Hari Jumaat Semua!

Post pertama untuk tahun 2017! Yeah, azam baru walaupun dah tengah bulan 2. Sorry sangat kalau ada yang tunggu post since 2014 😐 (Buat muka sekupang).

Tanpa cakap banyak, kita fokus pada topik kita pada hari ni. HTML, apa tu? Nama panjang dia Hyper Text Markup Language so jadilah HTML. HTML ni Bahasa Markup atau paling mudah cara kita bagitau macam mana kita nak text kosong kita nampak samada tebal (bold) ka, senget (italic) dan lain2 lagi. Sekian. (Takkan habis dah? Buang masa aku mai sini 😕 ) .

Sorry2, cuma nak bagi korang trill sikit nak belajarkan. Sebelum belajar, aku nak hampa download satu software nama dia Notepad++, hampa boleh pakai Notepad yang standard dalam window tu tak da masalah tapi yang aku suggest ni warna-warni, lagi cantik. Sebetulnya bukan pasai cantik la 😉 , tapi nak bagi hampa senang tengok, sebab nanti lecey nak tukar code HTML tu. Boleh muat turn (download) kat sini dan of course free of charge!

capture1

Contoh Screen Shot

Fahamkan pasai pa aku suruh hampa download?, kalau pakai yang ni hampa pun senang nak tengok dan tak sakit mata. Kita akan bincangkan 4 komponen asas yang aku dah point dekat atas.

Sebelum mula, sila tekan (dalam Notepad++) ‘Language‘ lepas tu amik ‘HTML’. Ini bagi memudahkan colouring tu ikut jenis bahasa yang kita nak belajar ni.

  1. <!DOCTYPE html>- Tudia! 😯 apa ni? Jangan risau! , benda ni by default kita letak kat atas sebelum kita mula taip code yang lain. Cuma penanda untuk kita nak suruh pelayar (browser) tu pakai HTML5 dan bukan HTML4 ke bawah. Sekarang ni dah HTML5 tau, take note! ❗ Kalau ada permintaan nak aku terangkan beza HTML5 dan yang HTML yang versi lama, cuma komen/email dan inshaAllah aku akan post pada entry akan datang.
  2. <html></html>- Kalau korang sedar, <html> ni ada pembuka dan penutup. Maksud dia kita suruh pelayar ni baca kandungan dalam tu sebagai komponen HTML. Tapi kalau hampa taip merapu-rapu pun dia keluaq jugak kat pelayar cuma tak ikut standard la. Pastikan hampa taip natang ni dulu tau!
  3. <head></head> – Macam manusia, komponen HTML ada kepala dan badan, analoginya kalau orang nak perkenal diri kita tengok muka dulu kan? Sama la fungsi <head> ni, kita boleh letak tajuk, boleh letak laman web kita ni pasai pa dan lain2. Bila orang cari laman web kita dari enjin carian contohnya google atau bing dia akan periksa ni, nak tengok apa kandungan laman web kita. Itulah serba sikit kegunaan dia. Untuk makluman tambahan, bila pelayar baca laman web kita, dia baca <head> dulu baru <body> umpama kita baca buku la, kita baca dari atas ke bawah kan? Sama la pelayar dan kebanyakkan bahasa lain.
  4.  <body></body> – Yang ni la asas (core/foundation), semua code kita letak dalam . Kita nak buat borang, nak letak gambaq, nak bubuh video dan banyak lagi boleh buat.

Macam mana? Boleh catchup tak? Kita baru nak masuk gear 1, tadi tu baru mukhadimah/pengenalan tau! 😆

Jom! Kita buat latihan santai, apa korang kena buat?

Langkah2nya: (Nak pandai dak? Nak pandai kena follow elok… Hahaha :mrgreen: )

  1. Dalam <head> aku nak korang taip “<title>Latihan Bersama DIY IT</title>“.
  2. Dalam <body> plak, korang taip “<h1>Aku nak Pandai!</h1>“.
  3. Dalam  <head> selepas <h1> korang taip “<p>Kenapa aku kena buat menda hampeh ni?</p>“.

Lepas tu korang simpan (save) pastikan dalam format .html tau. (Kalau aku, malas sikit nak tukar nama (selalu rajin k… 😡 ), jadi nama fail aku “new 1.html“).

capture1

Contoh HTML

Korang jangan malas2 nak taip, aku habaq betui. Kalau hampa malas nak taip nanti lambat pandai, sebab bila hampa taip hampa belajar dan praktis dalam masa yang sama. Hampa tau pasai pa lepas diploma/ijazah ada praktikal? Pasai belajar tanpa praktis tu takdak hasil (Nampak bijak tak? 😎 ). Wasiat Imam Ghazali, dia kata “Ilmu tanpa amal umpama orang gila“. Hampa nak gila ka? lekaih taip. Kah3x… 😆

Lepas tu nanti dia simpan dia akan keluar ikon pelayar hampa. Cer tekan, jadi pa?

capture1

Lepas aku buka dalam Pelayar

Kalau hampa keluaq macam aku tahniah! Hampa dah satu tapak nak jadi Pereka Web (Web Designer). “Pasai pa hampa kena buat menda hampeh ni? ” Pasai hampa nak jadi pandai… Hahaha 😉

Nampak dak dekat tab atas dalam pelayar tu? Ada keluar nama kan? Tu la fungsi <head>, tu cuma fungsi kecik dalam <head> yang hampa boleh guna.

Aku sampai sini dulu, hampa hadam betui2 dulu. Ada apa2 penambahan atau salah kat mana2 boleh email atau letak kat ruang komen no.

Kalau hampa rasa boleh pergi lagi atau semangat berkobar-kobar sampai tak menyempat nak tunggu minggu depan cuba follow tutorial ni. Dan bagi korang yang nak belajaq hardware boleh mula belajar dari sini.

Salam. Semoga ilmu diberkati. Jumpa Jumaat minggu depan plak!