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!

Advertisements

1 Comment

  1. Pingback: Kegunaan Tag dalam HTML? Komponen HTML | DIY IT

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s