ເນື້ອຫາ

• ຂັ້ນຕອນ
• ວິທີທີ່ 1 ຈາກ 1: ການຂຽນ ໜ້າ HTML
• ຄໍາແນະນໍາ
• ຄຳ ເຕືອນ
• ເຈົ້າ​ຕ້ອງ​ການ​ຫຍັງ

ພາສາ HTML (Hypertext Markup Language) ເປັນພາສາການຂຽນໂປຣແກມຫຼັກໃນການພັດທະນາ ໜ້າ ເວັບ. ສ້າງເປັນພາສາການຂຽນໂປຣແກມທີ່ລຽບງ່າຍແລະສະດວກ. ໜ້າ ເວັບສ່ວນໃຫຍ່ຢູ່ໃນອິນເຕີເນັດໄດ້ຖືກພັດທະນາໂດຍໃຊ້ຮູບແບບໃດນຶ່ງຂອງພາສານີ້ (ColdFusion, XML, XSLT). ຫຼັງຈາກອ່ານບົດຄວາມນີ້, ເຈົ້າສາມາດສືບຕໍ່ການtrainingຶກອົບຮົມຂອງເຈົ້າໂດຍນໍາໃຊ້ຊັບພະຍາກອນອື່ນຢູ່ໃນອິນເຕີເນັດ. ພະຍາຍາມຄົ້ນຫາອິນເຕີເນັດສໍາລັບບົດຄວາມອື່ນທີ່ກ່ຽວຂ້ອງກັບຫົວຂໍ້ນີ້.

ຂັ້ນຕອນ

ວິທີທີ່ 1 ຈາກ 1: ການຂຽນ ໜ້າ HTML

1. 1 ກ່ອນທີ່ເຈົ້າຈະເລີ່ມຄຸ້ນເຄີຍກັບຂັ້ນຕອນໃດນຶ່ງທີ່ນໍາສະ ເໜີ ຢູ່ທີ່ນີ້, ເບິ່ງພາກ“ ສິ່ງທີ່ເຈົ້າຈະຕ້ອງການ”.
2. 2 ສິ່ງທີ່ເຈົ້າຄວນຮູ້ກ່ອນທີ່ເຈົ້າຈະເລີ່ມເຂົ້າໃຈບັນຫານີ້:
3. 3 ພື້ນຖານ. ເຈົ້າເຄີຍໄດ້ຍິນເລື່ອງແທັກບໍ? ແທັກຖືກອ້ອມດ້ວຍວົງເລັບມຸມ, ມີ ຄຳ ຢູ່ທາງໃນ. ໂຄດທ້າຍຖືກຂຽນໄວ້ໃນຮູບແບບດຽວກັນ, ແຕ່ມີການເພີ່ມເຄື່ອງafterາຍທັບຫຼັງຈາກວົງເລັບມຸມ ທຳ ອິດ. ຄຸນລັກສະນະເປັນ ຄຳ ສັບທາງເລືອກໃນແທັກທີ່ໃຊ້ເພື່ອເພີ່ມລາຍລະອຽດໃສ່ແທັກ.
4. 4 ຈຸດເລີ່ມຕົ້ນຂອງເອກະສານ. ໃນຕົວແກ້ໄຂຂໍ້ຄວາມອັນໃດກໍ່ຕາມທີ່ເຈົ້າ ກຳ ລັງໃຊ້ຢູ່, ວາງລົງໄປໃນສິ່ງຕໍ່ໄປນີ້:
   html> head> title> wikiHow / title> / head> body> Hello World / body> / html> ໃຫຍ່> / ໃຫຍ່>
   ແທັກຕ້ອງຖືກປິດດ້ວຍແທັກອັນດຽວກັນ, ແຕ່ມີເຄື່ອງslາຍທັບຫຼັງຈາກວົງເລັບມຸມ ທຳ ອິດ. ມີຂໍ້ຍົກເວັ້ນເຊັ່ນ: ແທັກ META ຫຼື DOCTYPE.
5. 5 DOCTYPE
   • ໂດຍປົກກະຕິແລ້ວ, ໜ້າ ເວັບສ່ວນໃຫຍ່ຖືກຕັ້ງ DOCTYPE”. ອັນນີ້ຊ່ວຍກໍານົດການເຂົ້າລະຫັດຄືກັນກັບວ່າມັນຈະຖືກຮັບຮູ້ໄດ້ແນວໃດໂດຍຕົວທ່ອງເວັບເວັບ. ໜ້າ ເກືອບທັງwillົດຈະເຮັດວຽກໂດຍບໍ່ມີມັນ,“ ແຕ່ອັນນີ້ແມ່ນມີຄວາມ ຈຳ ເປັນຖ້າເຈົ້າຕ້ອງການຈັບຄູ່ (ພວກມັນຄວບຄຸມປະເພດຂອງການເຂົ້າລະຫັດໃນອິນເຕີເນັດແລະວິທີໃຊ້ມັນ)... DOCTYPE ສຳ ລັບ HTML 4.01 ແມ່ນໄດ້ ນຳ ສະ ເໜີ ຢູ່ລຸ່ມນີ້: DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> ອັນນີ້ ຂອງທົ່ວໄປທີ່ສຸດ DOCTYPE ໃຊ້ຢູ່ໃນ ໜ້າ ຕ່າງ over ທັງoverົດຢູ່ໃນອິນເຕີເນັດ.ກ່ອນອື່ນitົດ, ມັນຊີ້ໄປຫາປະເພດຂອງ ໜ້າ ທີ່ອະທິບາຍ 'html', ຈາກນັ້ນມັນໄດ້ເນັ້ນໃຫ້ເຫັນປະເພດຂອງການເຂົ້າລະຫັດ, ແລະສຸດທ້າຍ, ທີ່ຕັ້ງຂອງ DOCTYPE, ເຊິ່ງຜົນໄດ້ຮັບ, ອະທິບາຍ ໜ້າ ເວັບຂອງຕົວທ່ອງເວັບ.
   • ມີປະເພດທີ່ແຕກຕ່າງກັນຂອງ HTML (ສະບັບທີ່ແຕກຕ່າງກັນພັດທະນາໃນໄລຍະປີ), ສໍາລັບການຍົກຕົວຢ່າງການນໍາໃຊ້ tags ໃຫມ່, ຫຼື tags ສະເພາະ. ແທັກບາງອັນຖືກຍົກເລີກການ ນຳ ໃຊ້ (ແທັກທີ່ມີປະໂຫຍດກວ່າອື່ນແມ່ນໃຊ້ແທນ).
   • b> ແລະ ຂ້ອຍ> - ອັນນີ້ແມ່ນສິ່ງທີ່ຖືກກໍານົດໄວ້ໃນປະຈຸບັນຕໍ່ກັບແທັກ, ເພາະວ່າພວກມັນຖືກໃຊ້ເພື່ອຫັນປ່ຽນຂໍ້ຄວາມ, ແຕ່ບໍ່ແມ່ນສະເພາະ, ດັ່ງນັ້ນ, ແທັກອື່ນ come ຈຶ່ງເຂົ້າມາແທນທີ່ພວກມັນ. ແທັກ ເຂັ້ມແຂງ> ເປັນການທົດແທນສໍາລັບການ ຂ>, ແລະ ພວກເຂົາເຈົ້າ>, ການທົດແທນສໍາລັບການ ຂ້ອຍ>.
   • ມັນເປັນສິ່ງ ສຳ ຄັນທີ່ແທັກກ່ອນ ໜ້າ ນີ້ຖືກແທນທີ່ດ້ວຍແທັກທີ່ຫຼາຍກວ່າການຈັດຮູບແບບ. ຖ້າຂໍ້ຄວາມຖືກແປ, ຫຼັງຈາກນັ້ນບໍ່ພຽງແຕ່ການຈັດຮູບແບບ, ແຕ່ຄວາມitsາຍຂອງມັນຍັງຄືເກົ່າ. ອັນນີ້ຖືກຕ້ອງທາງດ້ານຄວາມາຍ.
   • ໃນ XHTML ເວີຊັນ 2.0, b> ແລະ ຂ້ອຍ> ບໍ່ໄດ້ໃຊ້, ຄືກັນກັບຢູ່ໃນເວີຊັນ HTML 3+.
6. 6 HTML "ກົດລະບຽບການຫຸ້ມຫໍ່".
   • ຂໍໃຫ້ພິຈາລະນາເບິ່ງແທັກທີ່ ສຳ ຄັນກວ່າທີ່ໃຊ້ຢູ່ໃນປະຈຸບັນ. ໃນລະຫວ່າງການສ້າງ ໜ້າ, ໂຄງສ້າງອັນງ່າຍດາຍໄດ້ຖືກ ນຳ ໃຊ້. ຖ້າແທັກຖືກເປີດ, ດັ່ງນັ້ນ, ມັນຄວນຈະຖືກປິດ... ອັນນີ້ໃຊ້ໄດ້ກັບໂຄງສ້າງທັງົດ. ນີ້ແມ່ນຕົວຢ່າງທີ່ຖືກຕ້ອງຂອງໂຄງສ້າງແຜນຜັງ XHTML:
   • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 ເຂັ້ມງວດ // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   • html xmlns = "http://www.w3.org/1999/xhtml">
   • ຫົວ>
   • meta http-equiv = "ປະເພດເນື້ອຫາ" ເນື້ອຫາ = "ຂໍ້ຄວາມ / html; ຊຸດຂໍ້ມູນ = utf-8" />
   • title> ສະບາຍດີຊາວໂລກ! / title>
   • / ຫົວ>
   • ຮ່າງກາຍ>
   • h1> ສະບາຍດີຊາວໂລກ! / h1>
   • / ຮ່າງກາຍ>
   • / html>
   • ລະຫັດຕົວຢ່າງທີ່ອອກຂໍ້ຄວາມ ສະ​ບາຍ​ດີ​ຊາວ​ໂລກ... ອັນນີ້ເອີ້ນວ່າການທົດສອບ ສະ​ບາຍ​ດີ​ຊາວ​ໂລກ.
7. 7 ຫົວ​ຂໍ້
   • ຫົວຂໍ້ ໜ້າ ເວັບແມ່ນເນື້ອໃນລະຫວ່າງແທັກ ຫົວ>... ຜູ້ໃຊ້ບໍ່ສາມາດເບິ່ງເນື້ອໃນນີ້ໄດ້ (ພຽງແຕ່ຫົວຂໍ້ທີ່ສະແດງຢູ່ໃນຫົວຂໍ້ຂອງ ໜ້າ). ຂໍ້ມູນລະຫວ່າງແທັກ ຫົວ>, ສາມາດໃສ່ເຄື່ອງotherາຍອື່ນໃສ່ໄດ້ເຊັ່ນ:
     
     
     • ແທັກ META ແມ່ນໃຊ້ສໍາລັບຂໍ້ມູນທີ່ເປັນປະໂຫຍດຕໍ່ກັບເຄື່ອງຈັກຊອກຫາແລະສາທາລະນູປະໂພກອື່ນ.
     • ແທັກ LINK ທີ່ສ້າງການເຊື່ອມໂຍງລະຫວ່າງເອກະສານ, ຕົວຢ່າງສໍາລັບ Styles (CSS).
     • ແທັກ SCRIPT, ອັນນີ້ລວມມີເກືອບທຸກລະຫັດເວັບ, ມີຄວາມສາມາດເຂົ້າຫາໄດ້ຈາກທາງໄກ (ຈາກເອກະສານອື່ນ).
     • ໂຄດຄໍາສັ່ງ STYLE, ທີ່ສໍາຄັນເປັນຮູບແບບທີ່ສາມາດນໍາໃຊ້ກັບຫນ້າໃດຫນຶ່ງ.
     • ແທັກ TITLE ແມ່ນຫົວຂໍ້ທີ່ປາກົດເປັນຊື່ຂອງ ໜ້າ ເວັບໃນໂປຣແກຣມທ່ອງເວັບຂອງເຈົ້າ.
   • Semalt ເບິ່ງຕົວຢ່າງຂອງບາງອັນເຫຼົ່ານີ້ຢູ່ໃນຕົວຢ່າງຫົວຂໍ້ທີ່ເອົາມາຈາກເວັບໄຊທນີ້ (ມັນໄດ້ຖືກຫຍໍ້ລົງ):
     • ຫົວ>
     • title> ... / ຕຳ ແໜ່ງ>
     • ຊື່ meta = "ຄໍາອະທິບາຍ" ເນື້ອໃນ = "... " />
     • link rel = "stylesheet" type = "text / css" href = "... " /> ການເຊື່ອມຕໍ່
     • meta http-equiv = "ປະເພດເນື້ອໃນ" ເນື້ອຫາ = "ຂໍ້ຄວາມ / html; ຊຸດຕົວອັກສອນ = UTF-8" />
     • style type = "text / css" media = "all"> ... / style>
     • script type = "text / javascript" src = "... "> / script>
     • / ຫົວ>
       
       ໃນກໍລະນີທີ່ເຈົ້າບໍ່ໄດ້ສັງເກດເຫັນ, ແທັກແຕ່ລະອັນໄດ້ຖືກເນັ້ນໃຫ້ເຫັນ, ໂດຍມີການລຶບຂໍ້ມູນຕົວຈິງອອກ. ຕົວຢ່າງແມ່ນສັ້ນຫຼາຍ, ສະແດງເກືອບທຸກແທັກທີ່ສາມາດພົບໄດ້ຢູ່ໃນ ຫົວ>ຍົກເວັ້ນ ຄຳ ເຫັນ HTML (ພວກເຮົາຈະເວົ້າກ່ຽວກັບເລື່ອງນີ້ໃນແທັກງ່າຍ simple).
8. 8 ແທັກງ່າຍ Simple ຢູ່ທົ່ວທຸກບ່ອນ
   • ໃຫ້ຂອງຍ້າຍອອກໄປແລະເບິ່ງ tags ອື່ນ. ຈົ່ງລະມັດລະວັງການຕິດປ້າຍຂອງເຈົ້າແລະຈື່ກົດລະບຽບຂອງຫົວໂປ້ມື, "ການຫຸ້ມຫໍ່."
     
     
     • ເຂັ້ມແຂງ> ເນັ້ນຂໍ້ຄວາມ ສຳ ຄັນ.
     • small> ເຮັດໃຫ້ຕົວ ໜັງ ສືນ້ອຍລົງ. ຂະ ໜາດ ຕົວອັກສອນແມ່ນວັດແທກໃນຫົວ ໜ່ວຍ ມາດຕະຖານຈາກ 1 ຫາ 7, 3 ແມ່ນຂະ ໜາດ ຕົວ ໜັງ ສືເລີ່ມຕົ້ນ. ...
     • pre> ກໍານົດຕັນຂອງຂໍ້ຄວາມທີ່ອຸດົມສົມບູນ. ຍ້ອນວ່າມັນຖືກຕ້ອງ, ຂໍ້ຄວາມດັ່ງກ່າວໄດ້ພິມຢູ່ໃນຕົວອັກສອນທີ່ມີຂະ ໜາດ ເທົ່າກັນແລະມີຍະຫວ່າງທັງbetweenົດລະຫວ່າງຄໍາ.
     • em> ສະແດງຂໍ້ຄວາມເປັນປະໂຫຍກ.
     • del> ຕີຂໍ້ຄວາມອອກ.
     • ins> ກໍານົດຂໍ້ຄວາມທີ່ໄດ້ແຊກເຂົ້າໄປໃນເອກະສານ.
     • h1> ໜຶ່ງ ໃນແທັກຫົວຂໍ້ຫຼາຍອັນ. ປ້າຍ ກຳ ກັບຊະນິດນີ້ເລີ່ມຕົ້ນດ້ວຍ 'h', ດ້ວຍຕົວເລກທີ່ຕ່າງກັນ. ໃຫ້ແນ່ໃຈວ່າປິດແທັກດ້ວຍຕົວເລກດຽວກັນ.
     • p> ກໍານົດວັກ.
     • ! --- ... ---> ຕ່າງຈາກແທັກອື່ນ,, ຄຳ ເຫັນຕ້ອງຢູ່ພາຍໃນແທັກມັນເອງ. ຂໍ້ມູນນີ້ແມ່ນສາມາດເບິ່ງເຫັນໄດ້ສະເພາະເມື່ອມີການເບິ່ງລະຫັດເທົ່ານັ້ນ.
     • blockquote> ສະແດງລາຄາ, ສາມາດໃຊ້ໄດ້ກັບ cite> tag.
     • ບາງຕົວຢ່າງຂ້າງເທິງບໍ່ແມ່ນລາຍຊື່ທີ່ສົມບູນຂອງແທັກທີ່ມີຢູ່. ເພື່ອຊອກຮູ້ກ່ຽວກັບຄົນອື່ນ, ເຂົ້າເບິ່ງ.
9. 9 ການສ້າງໂຄງສ້າງທີ່ຊັດເຈນ
   • ໜ້າ ເວັບຕ່າງ designed ໄດ້ຖືກອອກແບບເພື່ອເກັບຂໍ້ມູນໄວ້ໃນຊຸດຂອງແທັກງ່າຍ simple ເພື່ອໃຫ້ພວກເຮົາສາມາດແຍກຂໍ້ມູນເປັນວັກ. ຄອມພິວເຕີຮັບຮູ້ຂໍ້ມູນ; ມັນບໍ່ຮູ້ກ່ຽວກັບສະພາບການຫຼືການເຊື່ອມຕໍ່ແນວຄິດ. ພວກເຮົາຕ້ອງສ້າງ ໜ້າ HTML ທີ່ເປັນມິດກັບຄອມພິວເຕີ. ອັນນີ້ແມ່ນບັນລຸໄດ້ໂດຍການໃຊ້ແທັກ div. ມັນຊ່ວຍສ້າງ ຈຳ ນວນ ໜ້າ ຫຼາຍ. ມັນສາມາດເປັນຮູບແບບດ້ວຍ CSS ແລະງ່າຍກວ່າການສ້າງຕາຕະລາງລະຫັດໃຫຍ່ສໍາລັບໂຄງຮ່າງ.
     • div> ແທັກນີ້ແມ່ນພິເສດເພາະວ່າມັນສາມາດໃສ່ຮູບແບບແລະໃຊ້ຂໍ້ມູນແຍກຕ່າງຫາກທີ່ທັງຜູ້ໃຊ້ແລະຄອມພິວເຕີສາມາດເຂົ້າໃຈໄດ້.
   • ຂໍໃຫ້ພິຈາລະນາຮູບແບບ HTML ແບບງ່າຍ simple ທີ່ໃຊ້ແທັກ div.
     • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 ເຂັ້ມງວດ // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     • html xmlns = "http://www.w3.org/1999/xhtml">
     • ຫົວ>
     • meta http-equiv = "ປະເພດເນື້ອຫາ" ເນື້ອຫາ = "ຂໍ້ຄວາມ / html; ຊຸດຂໍ້ມູນ = utf-8" />
     • title> ສະບາຍດີຊາວໂລກ! / title>
     • / ຫົວ>
     • ຮ່າງກາຍ>
     • h1> ສະບາຍດີຊາວໂລກ! / h1>
     • div id = "contentOne">
     • p> ນີ້ແມ່ນຂໍ້ຄວາມບາງສ່ວນໃນ div # contentOne. / p>
     • div>
     • p> ຫຍໍ້ ໜ້າ ຢູ່ໃນສ່ວນຍ່ອຍຂອງ div # contentOne / p>
     • / div>
     • / div>
     • / ຮ່າງກາຍ>
     • / html>
   • ການໃຊ້ div> tags ຊ່ວຍໃນການຊອກຫາແລະດັດແກ້ຮູບແບບໃນຂະນະທີ່ເຮັດວຽກກັບ CSS ແລະ Javascript. HTML ຈະໃຊ້ການເຂົ້າລະຫັດທີ່ແຕກຕ່າງກັນເພື່ອເຮັດວຽກຮ່ວມກັບຮູບແບບ CSS ແລະ Javascript ເພື່ອສ້າງປະສົບການຂອງຜູ້ໃຊ້ທີ່ດີແລະຕອບສະ ໜອງ ໄດ້ຫຼາຍຂຶ້ນ.

ຄໍາແນະນໍາ

• ຫຼັງຈາກອ່ານບົດຄວາມນີ້, ຢ່າຢຸດແລະຄິດວ່າເຈົ້າໄດ້ຮຽນຮູ້ທຸກຢ່າງທີ່ເຈົ້າຕ້ອງການຮູ້. ມີບາງສິ່ງບາງຢ່າງສະເີທີ່ຈະຮຽນຮູ້, ໂດຍສະເພາະໃນເທັກໂນໂລຍີນີ້.
• ຮຽນຮູ້, ເຂົ້າໃຈ, ແລະຂຽນລະຫັດ.
• ໃຫ້ສັງເກດວ່າບາງແທັກພຽງແຕ່ໃຊ້>. Para ແລະ br ແມ່ນບາງຕົວຢ່າງ. ແທັກອື່ນ opened ເປີດດ້ວຍ> ຈໍາເປັນຕ້ອງໄດ້ປິດຕໍ່ໄປ. ຕົວຢ່າງ, "div> / div>".
• ປະຊາຊົນຄາດຫວັງວ່າການຄົ້ນພົບໃnew່, ສະນັ້ນການບູລະນະ, ການອອກແບບ, ຫຼືລະຫັດ.
• ເມື່ອເຈົ້າໄດ້ຮຽນຮູ້ຫຼາຍ, ລອງຮຽນການຂຽນໂປຣແກຣມເຊີບເວີ.
• ຮຽນຮູ້ການເຮັດວຽກກັບ CSS ຄືກັນກັບ Javascript.

ຄຳ ເຕືອນ

• ຈືຂໍ້ມູນການ, HTML ແມ່ນທັງຫມົດກ່ຽວກັບການດັດແກ້ເນື້ອໃນ. ນີ້meansາຍຄວາມວ່າ HTML ຖືກໃຊ້ເພື່ອເກັບຮັກສາເນື້ອໃນໃນຮູບແບບທີ່ຮັບຮູ້ໄດ້ເທົ່ານັ້ນ. ການປ່ຽນແປງອັນອື່ນຕ້ອງເຮັດໂດຍໃຊ້ເຕັກໂນໂລຍີອື່ນ,, ເຊັ່ນ CSS. ມັນຍັງmeansາຍເຖິງການເຮັດ“ ຖືກຕ້ອງຕາມຄວາມາຍເຖິງແມ່ນວ່າຄົນອື່ນບໍ່ຍອມຮັບມັນ. ພາສາການຂຽນໂປຣແກມອື່ນ help ຊ່ວຍສ້າງ ໜ້າ ເວັບ (CSS, Javascript, ແລະ XML). HTML ແມ່ນຜູ້ສ້າງເນື້ອຫາ.

ເຈົ້າ​ຕ້ອງ​ການ​ຫຍັງ

• ຕົວແກ້ໄຂຂໍ້ຄວາມທີ່ຮອງຮັບການເຂົ້າລະຫັດ ANSI
• ໂປຣແກຣມທ່ອງເວັບເຊັ່ນ Internet Explorer ຫຼື Mozilla Firefox
• (ຕົວເລືອກເສີມ) wysiwyg ຫຼື wykiwyg HTML editor ເຊັ່ນ Adobe Dreamweaver, Aptana Studio, ຫຼື Microsoft Expression Web