ມາຮູ້ຈັກກັບ HTML: ຈິກຊໍຊິ້ນທຳອິດສຳລັບຄົນຢາກສ້າງເວັບໄຊ ພ້ອມລອງຂຽນໂຄດຕົວຈິງ

ສະບາຍດີເພື່ອນໆຊາວ LaoTechGuru ທຸກຄົນ! ມື້ນີ້ແອັດມິນມີຮູບພາບຈິກຊໍສີຂຽວທີ່ຂຽນຄຳວ່າ "HTML" ມາຝາກ (ຄືກັບໃນຮູບພາບປະກອບຂອງບົດຄວາມນີ້ເລີຍ). ສຳລັບໃຜທີ່ເຄີຍມີຄວາມຝັນຢາກສ້າງເວັບໄຊເປັນຂອງຕົນເອງ ແຕ່ຮູ້ສຶກວ່າມັນເປັນເລື່ອງຍາກ ແລະ ບໍ່ຮູ້ຈະເລີ່ມຕົ້ນຈາກຈຸດໃດ, ຂໍບອກເລີຍວ່າ HTML ນີ້ແຫຼະຄື "ຈິກຊໍຊິ້ນທຳອິດ" ທີ່ທຸກຄົນໃນວົງການໄອທີຕ້ອງໄດ້ຈັບມາຕໍ່ກ່ອນໝູ່ໝົດ. ມື້ນີ້ເຮົາຈະມາລົມກັນແບບສະບາຍໆວ່າ HTML ແມ່ນຫຍັງ ແລະ ທີ່ພິເສດສຸດໆຄື ເຮົາຈະມາລອງຂຽນໂຄດ HTML ຕົວຈິງໄປພ້ອມກັນເລີຍ ຮັບຮອງວ່າງ່າຍຄືປອກກ້ວຍເຂົ້າປາກແນ່ນອນ!

HTML ແມ່ນຫຍັງກັນແທ້?

HTML ຫຍໍ້ມາຈາກຄຳຍາວໆວ່າ HyperText Markup Language ເຊິ່ງເຮົາບໍ່ຈຳເປັນຕ້ອງຈື່ກໍໄດ້! ໃຫ້ຈື່ພຽງແຕ່ວ່າ ມັນຄື "ພາສາພື້ນຖານທີ່ສຸດ" ທີ່ໃຊ້ໃນການສ້າງໜ້າເວັບໄຊຂຶ້ນມາ. ມັນບໍ່ແມ່ນພາສາໂປຣແກຣມທີ່ໃຊ້ຄິດໄລ່ເລກຍາກໆ ແຕ່ມັນເປັນຄືກັບ "ປ້າຍບອກທາງ" ທີ່ບອກໃຫ້ເວັບບຣາວເຊີ (ເຊັ່ນ Chrome, Safari, Edge) ຮູ້ວ່າ: ຕົວໜັງສືບ່ອນນີ້ຄືຫົວຂໍ້ເດີ້, ບ່ອນນີ້ຄືວັກທຳມະດາ, ແລະ ບ່ອນນີ້ຄືການໃສ່ຮູບພາບ. ທຸກໆເວັບໄຊໃນໂລກນີ້ ລ້ວນແລ້ວແຕ່ຕ້ອງມີໜ້າຕາພື້ນຖານມາຈາກ HTML ທັງນັ້ນ.

ປຽບທຽບການສ້າງເວັບໄຊ ຄືກັບການປຸກເຮືອນ

ເພື່ອໃຫ້ເຫັນພາບງ່າຍຂຶ້ນ ລອງນຶກພາບວ່າການສ້າງເວັບໄຊໜຶ່ງເວັບ ຄືກັບການປຸກເຮືອນໜຶ່ງຫຼັງ. HTML ກໍປຽບເໝືອນ "ໂຄງສ້າງເຮືອນ" ທີ່ປະກອບມີເສົາ, ຄານ, ຫຼັງຄາ ແລະ ຝາບ້ານ ເຊິ່ງມັນຈະກຳນົດວ່າເຮືອນຫຼັງນີ້ມີຈັກຫ້ອງ ມີປະຕູບ່ອນໃດແດ່. ແນ່ນອນວ່າເຮືອນທີ່ມີແຕ່ໂຄງສ້າງອາດຈະຍັງບໍ່ງາມ ເຮົາຈຶ່ງຕ້ອງມີການທາສີ ແລະ ຕົບແຕ່ງ (ເຊິ່ງໃນທາງເວັບໄຊເຮົາຈະເອີ້ນວ່າ CSS) ແລະ ຕ້ອງມີການຍ່າງສາຍໄຟ ຕໍ່ທໍ່ນ້ຳໃຫ້ເຮືອນໃຊ້ງານໄດ້ຈິງ (ເຊິ່ງເອີ້ນວ່າ JavaScript). ແຕ່ກ່ອນຈະໄປຮອດຂັ້ນຕອນອື່ນໆ ເຮົາຕ້ອງລົງເສົາເຂັມດ້ວຍ HTML ກ່ອນສະເໝີ.

ມາລອງຂຽນໂຄດ HTML ທຳອິດນຳກັນ!

ອ່ານມາຮອດນີ້ ຫຼາຍຄົນອາດຈະຄັນໄມ້ຄັນມືຢາກລອງແລ້ວ. ຕາມຄຳຂໍເລີຍ! ມື້ນີ້ເຮົາຈະມາລອງຂຽນໂຄດເວັບໄຊແບບງ່າຍໆ. ໂຄດຂອງ HTML ຈະໃຊ້ສັນຍາລັກວົງເລັບແຫຼມ < > ທີ່ເອີ້ນວ່າ Tag (ແທັກ) ມາເບິ່ງຕົວຢ່າງໂຄດນີ້ເລີຍ:

<!DOCTYPE html>
<html>
<head>
    <title>ເວັບໄຊທຳອິດຂອງຂ້ອຍ</title>
</head>
<body>
    <h1>ສະບາຍດີ LaoTechGuru!</h1>
    <p>ນີ້ຄືການຂຽນເວັບໄຊຄັ້ງທຳອິດຂອງຂ້ອຍ ມັນງ່າຍກວ່າທີ່ຄິດຫຼາຍເລີຍ.</p>
</body>
</html>

ໂຄດແຕ່ລະແຖວໝາຍຄວາມວ່າແນວໃດ?

ບໍ່ຕ້ອງຕົກໃຈກັບພາສາອັງກິດເດີ້ ມັນງ່າຍຫຼາຍ ມາເບິ່ງຄວາມໝາຍຂອງມັນນຳກັນ:

<html> ກັບ </html>: ແມ່ນການບອກຄອມພິວເຕີວ່າ "ເລີ່ມຕົ້ນ" ແລະ "ສິ້ນສຸດ" ການຂຽນໜ້າເວັບ HTML. (ສັງເກດວ່າອັນປິດຕ້ອງມີເຄື່ອງໝາຍທັບ / ສະເໝີ).
<head>: ປຽບເໝືອນສະໝອງຂອງເວັບໄຊ ໃຊ້ເກັບຂໍ້ມູນຕ່າງໆ ເຊັ່ນ ຊື່ເວັບໄຊ.
<title>: ຄືຊື່ແຖບເວັບໄຊທີ່ຈະໄປໂຊຢູ່ເທິງສຸດຂອງບຣາວເຊີ.
<body>: ອັນນີ້ສຳຄັນທີ່ສຸດ! ມັນຄື "ຮ່າງກາຍ" ຂອງເວັບໄຊ ທຸກຢ່າງທີ່ເຮົາຢາກໃຫ້ຄົນອື່ນເຫັນໃນໜ້າຈໍ ແມ່ນຕ້ອງຂຽນໃສ່ໃນບ່ອນນີ້.
<h1>: ຫຍໍ້ມາຈາກ Heading 1 ໃຊ້ສຳລັບຂຽນ "ຫົວຂໍ້ໃຫຍ່" ຕົວໜັງສືຈະອອກມາໃຫຍ່ແລະເຂັ້ມ.
<p>: ຫຍໍ້ມາຈາກ Paragraph ໃຊ້ສຳລັບຂຽນ "ວັກຕົວໜັງສື" ທຳມະດາ.

ຈະລອງເອົາໂຄດນີ້ໄປຫຼິ້ນໄດ້ຢູ່ໃສ?

ວິທີທີ່ງ່າຍທີ່ສຸດສຳລັບຜູ້ເລີ່ມຕົ້ນ ໂດຍບໍ່ຕ້ອງຕິດຕັ້ງໂປຣແກຣມຫຍັງໃຫ້ຫຍຸ້ງຍາກ ຄືການເຂົ້າໄປທີ່ເວັບໄຊສອນຂຽນໂຄດອອນລາຍຟຣີ ເຊັ່ນ: CodePen.io ຫຼື W3Schools.com. ພຽງແຕ່ເອົາໂຄດທາງເທິງທີ່ແອັດມິນໃຫ້ ໄປກ໊ອບປີ້ແລ້ວວາງ (Paste) ໃສ່ໃນຊ່ອງ HTML ຂອງເວັບນັ້ນ, ຜົນລາຍງານກໍຈະສະແດງໜ້າຕາເວັບໄຊຂຶ້ນມາໃຫ້ເຫັນທັນທີເລີຍ. ເຈົ້າສາມາດລອງປ່ຽນຄຳວ່າ "ສະບາຍດີ LaoTechGuru!" ເປັນຊື່ຂອງເຈົ້າເອງກໍໄດ້ ມ່ວນດີໃດ໋!

ເຫັນບໍ່ວ່າການເລີ່ມຕົ້ນຂຽນເວັບໄຊບໍ່ໄດ້ໜ້າຢ້ານເລີຍ! ພຽງແຕ່ເຮົາກ້າທີ່ຈະຕໍ່ຈິກຊໍຊິ້ນທຳອິດທີ່ຊື່ວ່າ HTML ນີ້, ປະຕູສູ່ໂລກຂອງການສ້າງເວັບໄຊກໍເປີດອອກແລ້ວ. ມັນເປັນທັກສະທີ່ຮຽນຮູ້ໄດ້ໄວ ແລະ ເຫັນຜົນງານທັນຕາ ເຮັດໃຫ້ເຮົາມີກຳລັງໃຈຮຽນຕໍ່ໄປໄດ້ສະບາຍ. ລອງເອົາໂຄດນີ້ໄປຫຼິ້ນກັນເບິ່ງເດີ້ ແລະ ຖ້າໃຜລອງແລ້ວຮູ້ສຶກມັກ ໃນອະນາຄົດເຮົາຈະມີບົດຄວາມສອນຕົບແຕ່ງເວັບໄຊໃຫ້ງາມໆມາຝາກອີກແນ່ນອນ. ຂໍໃຫ້ມ່ວນກັບການຂຽນໂຄດເດີ້ທຸກຄົນ!