ຮຽນຮູ້ HTML

ກະວີ: Christy White
ວັນທີຂອງການສ້າງ: 7 ເດືອນພຶດສະພາ 2021
ວັນທີປັບປຸງ: 1 ເດືອນກໍລະກົດ 2024
Anonim
ຂຽນ code ໄວ້ຂຶ້້ນ 10 ເທົ່າ ຖ້າເຂົ້າໃຈ Emmet | ຮຽນຮູ້ 10 Emmet ທີ່ໃຊ້ຕະຫຼອດ
ວິດີໂອ: ຂຽນ code ໄວ້ຂຶ້້ນ 10 ເທົ່າ ຖ້າເຂົ້າໃຈ Emmet | ຮຽນຮູ້ 10 Emmet ທີ່ໃຊ້ຕະຫຼອດ

ເນື້ອຫາ

HTML ແມ່ນຕົວຫຍໍ້ ສຳ ລັບ ພາສາ hyper Text Markup, ມັນແມ່ນລະຫັດຫລື ພາສາ ເຊິ່ງຖືກ ນຳ ໃຊ້ໃນການສ້າງເວບໄຊທ໌. ມັນອາດເບິ່ງຄືວ່າສັບສົນຖ້າທ່ານບໍ່ເຄີຍຕັ້ງໂຄງການມາກ່ອນ, ແຕ່ການທົດລອງໃຊ້ທັງ ໝົດ ທີ່ທ່ານຕ້ອງການແມ່ນໂປແກຼມປຸງແຕ່ງ ຄຳ ທີ່ງ່າຍດາຍແລະໂປແກຼມທ່ອງເວັບອິນເຕີເນັດ. ທ່ານອາດຈະຮັບຮູ້ບາງ HTML ຈາກກອງປະຊຸມ, ໂປຼໄຟລ໌ online, ຫຼືບົດຄວາມຂອງ wikiHow. HTML ແມ່ນຊັບພະຍາກອນທີ່ມີປະໂຫຍດ ສຳ ລັບທຸກໆຄົນທີ່ ນຳ ໃຊ້ອິນເຕີເນັດ, ແລະການຮຽນຮູ້ HTML ອາດຈະໃຊ້ເວລາ ໜ້ອຍ ກວ່າທີ່ທ່ານຄາດໄວ້.

ເພື່ອກ້າວ

ສ່ວນທີ 1 ຂອງ 2: ການຮຽນຮູ້ພື້ນຖານຂອງ HTML

  1. ເປີດເອກະສານ HTML. ໂປແກຼມປຸງແຕ່ງ ຄຳ ສັບສ່ວນໃຫຍ່, ລວມທັງ Notepad ຫລື Word ສຳ ລັບ Windows ແລະ Text Editor ສຳ ລັບ Mac, ສາມາດໃຊ້ເພື່ອສ້າງເອກະສານ HTML. ເປີດເອກະສານ ໃໝ່ ແລະເລືອກ File → Save As ຈາກລາຍການດ້ານເທິງເພື່ອບັນທຶກເອກະສານຂອງທ່ານໃຫ້ເປັນ ໜ້າ ເວບໄຊທ໌, ຫຼືປ່ຽນເອກະສານຂະຫຍາຍຈາກ ".doc", ".rtf" ຫຼືສິ່ງອື່ນໆໃຫ້ ".html" ຫຼື ".htm ".
    • ຕອນນີ້ທ່ານອາດຈະເຫັນ ຄຳ ເຕືອນທີ່ລະບຸວ່າເອກະສານຂອງທ່ານ ກຳ ລັງປ່ຽນຈາກຮູບແບບຂໍ້ຄວາມທີ່ອຸດົມສົມບູນ (RTF) ມາເປັນຮູບແບບ "ຂໍ້ຄວາມ ທຳ ມະດາ", ແລະຕົວເລືອກແລະຮູບພາບບາງຮູບແບບບໍ່ໄດ້ຖືກບັນທຶກຢ່າງຖືກຕ້ອງ. ທ່ານສາມາດບໍ່ສົນໃຈ ຄຳ ເຕືອນນີ້; ເອກະສານ HTML ບໍ່ໃຊ້ຕົວເລືອກເຫຼົ່ານີ້.
    • ໄຟລ໌ .html ແລະ .htm ແມ່ນຄືກັນ. ມັນທັງສອງເຮັດວຽກ.
  2. ເບິ່ງເອກະສານຂອງທ່ານດ້ວຍໂປແກຼມທ່ອງເວັບ. ບັນທຶກເອກະສານເປົ່າຂອງທ່ານ, ປິດມັນ, ແລະຈາກນັ້ນກົດສອງຄັ້ງໃນເອກະສານສະຖານທີ່ບ່ອນທີ່ມັນຖືກບັນທຶກເພື່ອເປີດມັນອີກຄັ້ງ. ເອກະສານຂອງເຈົ້າຄວນເປີດໂດຍຕົວທ່ອງເວັບຂອງເຈົ້າເປັນ ໜ້າ ເວບເປົ່າ. ຖ້າມັນບໍ່ເຮັດວຽກ, ລາກຮູບສັນຍາລັກຂອງແຟ້ມໃສ່ແຖບທີ່ຢູ່ຂອງ browser ຂອງທ່ານ. ຕໍ່ມາ, ຖ້າທ່ານແກ້ໄຂເອກະສານ HTML ຂອງທ່ານຕາມຂັ້ນຕອນໃນບົດຄວາມນີ້, ທ່ານຈະສືບຕໍ່ກັບໄປທີ່ browser ເພື່ອກວດເບິ່ງວ່າການປ່ຽນແປງຂອງລະຫັດດັ່ງກ່າວມີລັກສະນະແນວໃດ.
    • ໝາຍ ເຫດ: ເວບໄຊທ໌ຂອງທ່ານຍັງບໍ່ທັນ online. ຫນ້າເວັບບໍ່ສາມາດເຂົ້າເຖິງຄົນອື່ນໄດ້ແລະທ່ານບໍ່ຕ້ອງການການເຊື່ອມຕໍ່ອິນເຕີເນັດທີ່ເຮັດວຽກເພື່ອທົດສອບມັນ. ທ່ານພຽງແຕ່ໃຊ້ຕົວທ່ອງເວັບຂອງທ່ານເພື່ອ "ອ່ານ" ເອກະສານ HTML ຄືກັບວ່າມັນເປັນເວບໄຊທ໌.
  3. ເຂົ້າໃຈວ່າ "ປ້າຍ" ແມ່ນຫຍັງ. ປ້າຍຊື່ບໍ່ສາມາດເບິ່ງເຫັນໄດ້ໃນ ໜ້າ ເວັບສຸດທ້າຍ, ຄືກັບຂໍ້ຄວາມ ທຳ ມະດາ. ແທັກບອກຕົວທ່ອງເວັບຂອງທ່ານກ່ຽວກັບວິທີການສະແດງຫນ້າແລະເນື້ອຫາໃນຫນ້າ. ປ້າຍເລີ່ມຕົ້ນມີ ຄຳ ແນະ ນຳ. ຕົວຢ່າງ, ມັນສາມາດບອກຕົວທ່ອງເວັບໃຫ້ສະແດງຂໍ້ຄວາມເປັນ ຄຳ ເວົ້າທີ່ກ້າຫານ. ປ້າຍຊື່ທີ່ ຈຳ ເປັນຕ້ອງບອກຕົວທ່ອງເວັບທີ່ ຄຳ ແນະ ນຳ ນຳ ໃຊ້: ໃນຕົວຢ່າງນີ້, ຂໍ້ຄວາມທັງ ໝົດ ລະຫວ່າງປ້າຍເລີ່ມຕົ້ນແລະສິ້ນສຸດແມ່ນກ້າຫານ. ປ້າຍຊື່ສຸດທ້າຍກໍ່ຖືກໃສ່ໄວ້ພາຍໃນວົງເລັບ, ແຕ່ປ້າຍຕິດຕາມວົງເລັບ ທຳ ອິດ.
    • ຂຽນ tags ເລີ່ມຕົ້ນໃນວົງເລັບ: ນີ້ແມ່ນມື້ເລີ່ມຕົ້ນ>
    • ຂຽນປ້າຍ ຄຳ ສັບທ້າຍໃສ່ວົງເລັບ, ແຕ່ໃສ່ເຄື່ອງ ໝາຍ ຫຼັງຈາກໃສ່ວົງເລັບ ທຳ ອິດ: /ນີ້ແມ່ນປ້າຍປິດ>)
    • ອ່ານຕໍ່ມາໃນບົດຂຽນວິທີການຂຽນ tags ທີ່ມີປະໂຫຍດ. ໃນຂັ້ນຕອນນີ້, ທ່ານພຽງແຕ່ຕ້ອງຈື່ວ່າວິທີໃດທີ່ຈະຂຽນ tags:> ແລະ />.
    • ໃນຫລັກສູດ HTML ອື່ນໆ, tags ຍັງຖືກເອີ້ນວ່າ "ອົງປະກອບ" ແລະຂໍ້ຄວາມລະຫວ່າງການເປີດແລະປິດ tags ກໍ່ຖືກເອີ້ນວ່າ "ເນື້ອໃນຂອງອົງປະກອບ".
  4. ຂຽນແທັກ html ທຳ ອິດຂອງທ່ານ. ທຸກໆເອກະສານ HTML ເລີ່ມຕົ້ນດ້ວຍ a html>tag ແລະສິ້ນສຸດລົງດ້ວຍ a / html>ແທັກ. ນີ້ບອກຕົວທ່ອງເວັບວ່າທຸກສິ່ງທຸກຢ່າງລະຫວ່າງປ້າຍເຫຼົ່ານີ້ຖືກຂຽນເປັນ HTML. ເພີ່ມແທັກເຫລົ່ານີ້ໃສ່ໃນເອກະສານຂອງທ່ານ:
    • ຂຽນ html> ຢູ່ເທິງສຸດຂອງເອກະສານຂອງທ່ານ.
    • ກົດເຂົ້າຫລືສົ່ງຄືນຫຼາຍໆຄັ້ງເພື່ອໃຫ້ພື້ນທີ່ຕົວທ່ານເອງ, ແລ້ວຂຽນ / html>
    • ຈືຂໍ້ມູນການທ່ານ ທຸກສິ່ງທຸກຢ່າງ ໃນບົດຄວາມນີ້ລະຫວ່າງສອງແທັກນີ້.
  5. ເຮັດໃຫ້ຫົວ ໜ້າ> ສ່ວນ ໜຶ່ງ ຂອງເອກະສານຂອງທ່ານ. ລະຫວ່າງ tags html> ແລະ / html> ທ່ານຂຽນ a ຫົວ>tag ເລີ່ມຕົ້ນແລະ a / ຫົວ>-end tag. ເຮັດບາງບ່ອນອີກເທື່ອ ໜຶ່ງ ລະຫວ່າງແທັກເຫຼົ່ານີ້. ສິ່ງໃດກໍ່ຕາມທີ່ຂຽນລະຫວ່າງປ້າຍເຫຼົ່ານີ້ຈະບໍ່ສາມາດເບິ່ງເຫັນໄດ້ໃນ ໜ້າ ເວັບເອງ. ລອງເຮັດຕາມຂັ້ນຕອນຕໍ່ໄປນີ້ແລະເບິ່ງວ່າທ່ານສາມາດເຫັນຂໍ້ມູນທີ່ສະແດງຢູ່ບ່ອນໃດ:
    • ຂຽນລະຫວ່າງຫົວເລື່ອງ> ແລະ / ຫົວ> tags: ຫົວຂໍ້> ແລະ / title>
    • ລະຫວ່າງຫົວຂໍ້ tags> ແລະ / title> ທ່ານຂຽນ: ວິທີການຮຽນຮູ້ HTML (ມີຮູບພາບ) - wikiHow.
    • ບັນທຶກເອກະສານແລະເປີດມັນໄວ້ໃນ browser (ຫລືເກັບຮັກສາເອກະສານແລະໂຫຼດ ໜ້າ ຈໍຄືນ ໃໝ່ ໃນ browser ຖ້າ ໜ້າ ຍັງເປີດຢູ່). ທ່ານເຫັນສິ່ງທີ່ທ່ານພຽງແຕ່ຂຽນຢູ່ເທິງສຸດຂອງ ໜ້າ, ຢູ່ ເໜືອ ແຖບທີ່ຢູ່ບໍ?
  6. ສ້າງຮ່າງກາຍ> ສ່ວນ. ທຸກຢ່າງອື່ນໃນເອກະສານຂອງຜູ້ເລີ່ມຕົ້ນນີ້ແມ່ນຖືກຈັດໃສ່ໃນສ່ວນຂອງຮ່າງກາຍ>, ແລະມັນຖືກສະແດງຢູ່ໃນ ໜ້າ ເວັບ. ຫລັງຈາກ tag / head>, ແຕ່ວ່າ ຕໍ່​ຫນ້າ tag / html> ທີ່ທ່ານຂຽນ ຮ່າງກາຍ> ແລະ / ຮ່າງກາຍ>. ທຸກຢ່າງທີ່ພວກເຮົາປຶກສາຫາລືກັນຕື່ມໃນບົດຄວາມນີ້, ພວກເຮົາວາງລະຫວ່າງປ້າຍຊື່ຂອງຮ່າງກາຍ. ດຽວນີ້ທ່ານຄວນມີເອກະສານທີ່ມີລັກສະນະນີ້ (ບໍ່ມີລູກປືນ):
    • html>
    • ຫົວ>
    • title> ຮຽນຮູ້ HTML - wikiHow / title>
    • / ຫົວ>
    • ຮ່າງກາຍ>
    • / ຮ່າງກາຍ>
    • / html>
  7. ເພີ່ມຂໍ້ຄວາມໃນຮູບແບບທີ່ແຕກຕ່າງກັນ. ດຽວນີ້ເຖິງເວລາແລ້ວທີ່ທ່ານຈະເລີ່ມຕົ້ນຂຽນບາງສິ່ງທີ່ຈະສາມາດເບິ່ງເຫັນໃນຕົວທ່ອງເວັບ! ທຸກສິ່ງທຸກຢ່າງທີ່ທ່ານຂຽນພາຍໃນປ້າຍຊື່ຂອງຮ່າງກາຍຈະສາມາດເຫັນໄດ້ໃນເບົາເຊີຫຼັງຈາກທີ່ທ່ານບັນທຶກການປ່ຽນແປງແລະໂຫຼດ ໜ້າ ຈໍຄືນພາຍໃນ browser. ຂຽນ ບໍ່ ບາງສິ່ງບາງຢ່າງທີ່ມີອາການ ແລະ >ເພາະວ່າໂປແກຼມທ່ອງເວັບຂອງທ່ານຈະຕີຄວາມ ໝາຍ ວ່າ ຄຳ ແນະ ນຳ HTML ແທນທີ່ຈະເປັນຂໍ້ຄວາມ ທຳ ມະດາ. ຂຽນເປັນຕົວຢ່າງ ສະ​ບາຍ​ດີ​ຊາວ​ໂລກ! (ພາສາອັງກິດ ສຳ ລັບ "ສະບາຍດີໂລກ!", ນີ້ແມ່ນຕົວ ໜັງ ສືມາດຕະຖານທົ່ວໂລກເປັນຕົວຢ່າງ ທຳ ອິດໃນຫຼັກສູດການຂຽນໂປແກຼມໃດ ໜຶ່ງ ໃນພາສາການຂຽນໂປແກຼມໂດຍສະເພາະ) ຫຼືສິ່ງອື່ນໆ, ແລະໃສ່ປ້າຍຕໍ່ໄປນີ້ກ່ອນແລະຫລັງຂໍ້ຄວາມແລະເບິ່ງວ່າມີຫຍັງເກີດຂື້ນ:
    • em> ສະບາຍດີໂລກ! </em> ເບິ່ງຄືກັບຕົວ ໜັງ ສືທີ່ຂຽນດ້ວຍໂຕເລກ: ສະ​ບາຍ​ດີ​ຊາວ​ໂລກ!
    • </strong>> ສະບາຍດີໂລກ! </strong> ເບິ່ງຄືກັບຂໍ້ຄວາມທີ່ກ້າຫານ: ສະ​ບາຍ​ດີ​ຊາວ​ໂລກ!
    • s> ສະບາຍດີໂລກ! / s> ເບິ່ງຄືກັບຂໍ້ຄວາມທີ່ໂດດເດັ່ນ: ສະ​ບາຍ​ດີ​ຊາວ​ໂລກ!
    • sup> ສະບາຍດີໂລກ! / sup> ຄ້າຍຄືຂໍ້ຄວາມຫຍໍ້:
    • sub> ສະບາຍດີໂລກ! / sub> ເບິ່ງຄືກັບ ຄຳ ບັນຍາຍ: ສະ​ບາຍ​ດີ​ຊາວ​ໂລກ!
    • ທົດລອງໃຊ້ການປະສົມປະສານ: ວິທີການເບິ່ງ em> ສະບາຍດີໂລກ! </strong> </em> ອອກ​ໄປ?
  8. ແບ່ງຂໍ້ຄວາມຂອງທ່ານອອກເປັນຫລາຍວັກ. ຖ້າທ່ານໃສ່ແຖວຂອງຂໍ້ຄວາມທີ່ແຕກຕ່າງກັນໃນເອກະສານຂອງທ່ານ, ທ່ານຈະເຫັນວ່າທຸກສາຍແມ່ນຖືກຈັດໃສ່ເປັນແຖວຫຼັງຈາກແຖວນັ້ນ. ທ່ານຕ້ອງວາງແຜນເສັ້ນ ໃໝ່ ແລະສາຍເປົ່າຕົວທ່ານເອງ:
    • p> ນີ້ແມ່ນພາກສ່ວນແຍກຕ່າງຫາກ ./p>
    • ປະໂຫຍກນີ້ຢູ່ໃນເສັ້ນ ທຳ ອິດແລະປະໂຫຍກນີ້ຕໍ່ໄປ.
      ນີ້ແມ່ນປ້າຍ ທຳ ອິດທີ່ພວກເຮົາມາເຫັນເຊິ່ງບໍ່ ຈຳ ເປັນຕ້ອງສິ້ນສຸດ! ພວກເຮົາເອີ້ນປ້າຍດັ່ງກ່າວ tag ເປົ່າ.
    • ສ້າງຫົວຂໍ້ເພື່ອເຮັດໃຫ້ຊື່ຂອງພາກສ່ວນທີ່ຈະແຈ້ງ:
      h1> ຫົວ / h1>: ຫົວທີ່ເປັນໄປໄດ້ທີ່ໃຫຍ່ທີ່ສຸດ
      h2> ຫົວ / h2> (ຫົວລະດັບ 2 ລະດັບ)
      h3> ຫົວ / h3> (ຫົວ 3 ລະດັບ)
      h4> ຫົວ / h4> (ຫົວ 4 ລະດັບ)
      h5> ຫົວ / h5> (ສ່ວນຫົວທີ່ນ້ອຍທີ່ສຸດ)
  9. ຮຽນຮູ້ວິທີການສ້າງລາຍການ. ມີຫລາຍວິທີໃນການສ້າງລາຍຊື່ໃນ ໜ້າ ເວັບ. ລອງໃຊ້ວິທີການດັ່ງຕໍ່ໄປນີ້ເພື່ອຊອກຫາສິ່ງທີ່ທ່ານມັກທີ່ດີທີ່ສຸດ. ໃຫ້ສັງເກດວ່າຄູ່ຄູ່ຂອງແທັກຖືກຈັດເຂົ້າຮອບບັນຊີລາຍຊື່ທັງ ໝົດ (ເຊັ່ນ: ul> ແລະ / ul> ແທັກ ສຳ ລັບລາຍຊື່ທີ່ບໍ່ມີຂອບເຂດ) ແລະວ່າແທັກທີ່ແຕກຕ່າງກັນແມ່ນຖືກຈັດໃສ່ໃນແຕ່ລະລາຍການພາຍໃນລາຍຊື່ເຊັ່ນ: li> ແລະ / li> .
    • ໃຊ້ລະຫັດຕໍ່ໄປນີ້ເພື່ອສ້າງລາຍການທີ່ມີຈຸດລວມ:
      ul> li> ໜຶ່ງ ລາຍການ / li> li> ອີກລາຍການ ໜຶ່ງ / li> li> ອີກລາຍການ ໜຶ່ງ / li> / ul>
    • ຫຼືລະຫັດນີ້ເພື່ອສ້າງບັນຊີລາຍຊື່ນັບ:
      ol> li> ລາຍການທີ 1 / li> li> ລາຍການທີ 2 / li> li> ລາຍການທີ 3 / li> / ol>
    • ຫຼືລະຫັດນີ້ເພື່ອສ້າງລາຍຊື່ ຄຳ ນິຍາມທີ່ເອີ້ນວ່າ:
      dl> dt> ກາເຟ / ວັນທີ> dd> - ເຄື່ອງດື່ມຮ້ອນ / dd> dt> ນົມ / dt> dd> - ເຄື່ອງດື່ມເຢັນ / dd> / dl>
  10. ເຮັດໃຫ້ ໜ້າ ເວັບຂອງທ່ານມີຄວາມ ໜ້າ ສົນໃຈຫຼາຍຂື້ນດ້ວຍສາຍ ໃໝ່, ສາຍນອນແລະຮູບພາບ. ດຽວນີ້ເຖິງເວລາແລ້ວທີ່ຈະເລີ່ມຕົ້ນເພີ່ມສິ່ງອື່ນໆເຂົ້າໃນຫນ້າຂອງທ່ານ. ທົດລອງໃຊ້ແທັກຕໍ່ໄປນີ້ (ຮູບພາບຕ້ອງຖືກລົງໃນ online ເພື່ອໃຫ້ທ່ານສາມາດໃຊ້ລິ້ງກັບຮູບ):
    • ໃສ່ເສັ້ນ: br> ຫຼື hr>
    • ໃສ່ຮູບພາບ: img src = "the_url_of_your_image">
  11. ໃສ່ລິ້ງໄປຫາສະຖານທີ່ອື່ນໃນ ໜ້າ. ທ່ານຍັງສາມາດໃຊ້ລະຫັດນີ້ເພື່ອເຊື່ອມໂຍງກັບ ໜ້າ ອື່ນໆແລະເວັບໄຊທ໌ຕ່າງໆ, ແຕ່ວ່າທ່ານບໍ່ມີເວັບໄຊທ໌້ເທື່ອ, ພວກເຮົາຈະສຸມໃສ່ "ມໍມໍ", ເຊິ່ງແມ່ນສະຖານທີ່ສະເພາະໃນ ໜ້າ ທີ່ທ່ານສາມາດເຊື່ອມຕໍ່ໄດ້:
    • ກ່ອນອື່ນ ໝົດ, ສ້າງສະມໍທີ່ມີແທັກ> ຢູ່ຈຸດໃນ ໜ້າ ທີ່ທ່ານຕ້ອງການເຊື່ອມໂຍງ. ໃຫ້ຊື່ສະມໍຂອງທ່ານເປັນທີ່ຈະແຈ້ງທີ່ງ່າຍຕໍ່ການຈື່:

      a name = "ຄຳ ແນະ ນຳ"> ນີ້ແມ່ນຕົວ ໜັງ ສືອ້ອມຮອບທີ່ທ່ານວາງສະມໍ ./a>
    • ໃຊ້ແທັບ href> ເພື່ອເຊື່ອມໂຍງກັບສະມໍຂອງທ່ານຫຼືໄປທີ່ ໜ້າ ເວັບອື່ນ:

      a href = "url ຂອງ ໜ້າ ເວບໄຊທ໌ຫລືຊື່ສະມໍຢູ່ໃນ ໜ້າ ນີ້"> ຂຽນຂໍ້ຄວາມຫລືຮູບພາບທີ່ສະແດງເປັນ link ຢູ່ທີ່ນີ້ ./a>
    • ເພື່ອເຊື່ອມໂຍງກັບສະມໍຢູ່ ໜ້າ ອື່ນ, ຕື່ມໃສ່ໂຕອັກສອນ # ຫຼັງຈາກ url, ຕິດຕາມດ້ວຍຊື່ຂອງສະມໍຂອງທ່ານ. ຕົວຢ່າງ http://www.wikihow.com/HTML-leren#Tips ຈະພາທ່ານໄປຫາສ່ວນ "ຄຳ ແນະ ນຳ" ໃນ ໜ້າ ນີ້.

ສ່ວນທີ 2 ຂອງ 2: ຮຽນຮູ້ກ້າວ ໜ້າ HTML

  1. ຮຽນຮູ້ກ່ຽວກັບຄຸນລັກສະນະຕ່າງໆ. ຄຸນລັກສະນະແມ່ນຖືກຈັດໃສ່ໃນແທັກແລະຖືກໃຊ້ເພື່ອປັບຕົວເພີ່ມເຕີມໃຫ້ກັບ "ເນື້ອໃນຂອງອົງປະກອບ" ລະຫວ່າງແທັກເລີ່ມຕົ້ນແລະສິ້ນສຸດ. ພວກເຂົາບໍ່ເຄີຍຢືນຢູ່ຄົນດຽວ. ເຂົາເຈົ້າໄດ້ຖືກລາຍລັກອັກສອນໃນວິທີການດັ່ງຕໍ່ໄປນີ້: ຊື່ = "ມູນຄ່າ". ຊື່ ເປັນຕົວແທນຊື່ຂອງຄຸນລັກສະນະ (ຕົວຢ່າງ: "ສີ") ແລະ ມູນຄ່າ ອະທິບາຍກໍລະນີສະເພາະນີ້ (ເຊັ່ນ: ສີແດງ).
    • ຖ້າທ່ານໄດ້ເບິ່ງໃກ້ໆໃນສ່ວນກ່ອນ ໜ້າ ຂອງບົດຂຽນນີ້, ທ່ານໄດ້ພົບກັບຄຸນລັກສະນະຕ່າງໆແລ້ວ. ແທັກ img> ໃຊ້ຄຸນລັກສະນະ src, ສະມໍໃຊ້ຄຸນລັກສະນະ ຊື່ ແລະການເຊື່ອມຕໍ່ໃຊ້ຄຸນລັກສະນະ href. ທ່ານສາມາດບອກໄດ້ວ່າພວກເຂົາມີຂະ ໜາດ ທັງ ໝົດ ___='___’ ຕິດ​ຕາມ.
  2. ທົດລອງຕາຕະລາງ HTML. ເພື່ອສ້າງຕາຕະລາງຫຼືກາຟທ່ານຕ້ອງການຫລາຍ tags:
    • ເລີ່ມຕົ້ນດ້ວຍແທັກຕາຕະລາງ ("ຕາຕະລາງ" ໃນພາສາອັງກິດ) ຮອບຕາຕະລາງທັງ ໝົດ:ຕາຕະລາງ> / ຕາຕະລາງ>
    • ໃສ່ປ້າຍຊື່ປະມານເນື້ອໃນຂອງແຕ່ລະແຖວ: tr>
    • ວາງຫົວ ຕຳ ແໜ່ງ ຢູ່ໃນແຖວ ທຳ ອິດ:
    • ວາງຈຸລັງເປັນແຖວຕິດຕໍ່ກັນ: td>
    • ນີ້ແມ່ນຕົວຢ່າງຂອງວິທີການທັງ ໝົດ ນີ້ມາລວມກັນ:

      ຕາຕະລາງ> tr> ທີ> ຖັນ 1: ເດືອນ / ທີ> ທີ> ຖັນທີ 2: ເງິນທ້ອນ / ທີ> / tr> tr> td> ເດືອນມັງກອນ / ວັນທີ> td> € 100 / td> / tr> / ຕາຕະລາງ>
  3. ຮຽນຮູ້ປ້າຍອື່ນໆທີ່ໃຊ້ໃນສ່ວນຫົວ. ທ່ານໄດ້ຮຽນຮູ້ຫົວ ໜ້າ tag ແລ້ວ, ເຊິ່ງທ່ານວາງຢູ່ໃນຕອນຕົ້ນຂອງແຕ່ລະເອກະສານ. ນອກ ເໜືອ ໄປຈາກຫົວຂໍ້> tag, ມັນອາດຈະມີແທັກອື່ນໆໃນສ່ວນຫົວ:
    • ແທໍກ Meta ຖືກໃຊ້ໃນການສ້າງ metadata ກ່ຽວກັບ ໜ້າ ເວັບ. ຂໍ້ມູນນີ້ຖືກໃຊ້ໂດຍເຄື່ອງຈັກຊອກຫາເພື່ອຈັດປະເພດເວບໄຊທ໌. ເພື່ອເຮັດໃຫ້ ໜ້າ ເວັບຂອງທ່ານສາມາດເບິ່ງເຫັນໄດ້ໃນເຄື່ອງຈັກຊອກຫາທ່ານສາມາດໃສ່ແທັກ meta ໜຶ່ງ ຫຼືຫຼາຍຂໍ້ (ປ້າຍຊື່ທີ່ບໍ່ ຈຳ ເປັນ), ແຕ່ລະແທັກຕ້ອງມີຄຸນລັກສະນະຊື່ແລະຄຸນລັກສະນະຂອງເນື້ອຫາຢ່າງແນ່ນອນ, ຕົວຢ່າງ: ຊື່ເມຕາ = "ຄຳ ອະທິບາຍ" ເນື້ອຫາ = "ໃສ່ທີ່ນີ້ ລາຍລະອຽດ ">; ຫຼືຊື່ meta = "ຄຳ ສຳ ຄັນ" ເນື້ອຫາ = "ຂຽນລາຍຊື່ ຄຳ ສຳ ຄັນຢູ່ບ່ອນນີ້, ແຍກກັນສະ ເໝີ ໂດຍເຄື່ອງ ໝາຍ ຈຸດ">
    • link> tags ຖືກໃຊ້ເພື່ອເຊື່ອມໂຍງກັບເອກະສານອື່ນເຂົ້າໃນ ໜ້າ ເວັບ. ໃຊ້ໂດຍປົກກະຕິໃນການເຊື່ອມໂຍງເອກະສານແບບ CSS ກັບ HTML page, ໜ້າ ເຫຼົ່ານີ້ຖືກສ້າງຂຶ້ນດ້ວຍລະຫັດປະເພດທີ່ແຕກຕ່າງກັນແລະຖືກ ນຳ ໃຊ້ເພື່ອ ກຳ ນົດຮູບແບບລວມຂອງ ໜ້າ.
    • script> tags ຖືກໃຊ້ເພື່ອເຊື່ອມໂຍງກັບໄຟລ໌ javascript ກັບ ໜ້າ HTML. Javascript ອະນຸຍາດໃຫ້ຫນ້າປ່ຽນແປງຖ້າຜູ້ໃຊ້ເຮັດບາງສິ່ງບາງຢ່າງໃນຫນ້າ.
  4. ຫລິ້ນກັບ HTML ຈາກ ໜ້າ ຕ່າງໆທີ່ມີຢູ່. ການເບິ່ງລະຫັດແຫຼ່ງຂອງ ໜ້າ ເວັບແມ່ນວິທີທີ່ດີທີ່ຈະຂະຫຍາຍຄວາມຮູ້ HTML ຂອງທ່ານ. ກົດຂວາໃສ່ ໜ້າ ແລະເລືອກ "ເບິ່ງແຫຼ່ງຂໍ້ມູນ", "ສະແດງແຫຼ່ງ ໜ້າ ເວັບ" ຫຼືຄ້າຍຄືກັນ. ຊອກຫາປ້າຍຊື່ໃດ ໜຶ່ງ ທີ່ທ່ານບໍ່ຮູ້ເຮັດຫຼືຄົ້ນຫາ ຄຳ ຕອບ online.
    • ທ່ານບໍ່ສາມາດດັດແກ້ເວັບໄຊທ໌ຂອງຜູ້ອື່ນ, ແຕ່ທ່ານສາມາດຄັດລອກລະຫັດ HTML ເຂົ້າໃນເອກະສານຂອງທ່ານເອງແລະຫຼີ້ນຮອບກັບມັນເພື່ອເບິ່ງວ່າມີການປັບປ່ຽນຫຍັງແດ່. ໝາຍ ເຫດ: ຍ້ອນວ່າຫລາຍໆເວບໄຊທ໌ໃຊ້ແຜ່ນສະໄຕ CSS, ທ່ານອາດຈະບໍ່ເຫັນຫລາຍສີຫລືຫລາຍແບບ.
  5. ຮຽນຮູ້ກ່ຽວກັບ HTML ໂດຍການອ່ານບົດຄວາມເລິກເຊິ່ງ. ມີຫລາຍໆແຫລ່ງທີ່ມີຢູ່ໃນອິນເຕີເນັດເພື່ອເປັນເຈົ້າຂອງ tags HTML ຫລາຍຂື້ນເຊັ່ນ W3Schools ຫລື Codecademy. ນອກນັ້ນຍັງມີປື້ມ HTML ທີ່ມີຢູ່, ແຕ່ໃຫ້ແນ່ໃຈວ່າທ່ານ ກຳ ລັງ ນຳ ໃຊ້ສະບັບທີ່ຜ່ານມາຍ້ອນວ່າມາດຕະຖານ HTML ໄດ້ປ່ຽນແປງໄປເລື້ອຍໆ. ເມື່ອທ່ານໄດ້ແຕ້ມ HTML ໃນລະດັບທີ່ດີ, ທ່ານສາມາດຫັນໄປຫາ CSS ເພື່ອຄວບຄຸມການອອກແບບແລະຮູບແບບຂອງ ໜ້າ ເວັບຂອງທ່ານຫຼາຍຂື້ນ. ຫລັງຈາກນັ້ນ, ຂັ້ນຕອນຕໍ່ໄປແມ່ນປົກກະຕິແລ້ວແມ່ນ javascript.

ຄຳ ແນະ ນຳ

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

ຄຳ ເຕືອນ

  • ບາງແທັກແມ່ນບໍ່ຖືກ ນຳ ໃຊ້ອີກຕໍ່ໄປແລະຖືກປ່ຽນແທນດ້ວຍແທັກອື່ນໆທີ່ເຮັດເຊັ່ນດຽວກັນ, ແຕ່ມັກຈະສະ ເໜີ ທາງເລືອກຫລາຍຂື້ນ.
  • ຖ້າທ່ານຕ້ອງການໃຫ້ແນ່ໃຈວ່າ ໜ້າ ເວັບຂອງທ່ານປະຕິບັດຕາມມາດຕະຖານ HTML, ໃຫ້ໄປທີ່ເວັບໄຊທ໌ W3 ເພື່ອທົດສອບລະຫັດຂອງທ່ານກັບມາດຕະຖານປັດຈຸບັນ. ຫລາຍແທັກໄດ້ກາຍເປັນເຄື່ອງໃຊ້ທີ່ລ້າສະໄຫມແລະຖືກປ່ຽນແທນດ້ວຍແທັກທີ່ເຮັດວຽກໄດ້ດີຂື້ນໃນຕົວທ່ອງເວັບທີ່ທັນສະ ໄໝ.

ຄວາມ ຈຳ ເປັນ

  • ໂປແກຼມປະມວນຜົນ ຄຳ ສັບເຊັ່ນ: Notepad (Windows) ຫລື Text Editor (Mac).
  • ແຜ່ນເຈັ້ຍຫລືປື້ມບັນທຶກ (ທາງເລືອກ)
  • ເປັນໂປແກຼມທີ່ຖືກອອກແບບມາເປັນພິເສດ ສຳ ລັບການຂຽນ HTML, ເຊັ່ນ Notepad ++ ສຳ ລັບ Windows ຫລື TextWrangler ສຳ ລັບ Mac (ທາງເລືອກ)