ວິທີການໃຊ້ເຄື່ອງຈັກຕົ້ມເຄືອບແບບ HTML

ເນື້ອຫາ

• ເຄື່ອງຈັກຕົ້ມເຄືອບແບບ HTML ແມ່ນຫຍັງ?
• ແມ່ແບບເຕົາອົບ HTML ທີ່ນິຍົມ
• ການ ນຳ ໃຊ້ HTML5 Boilerplate
• CSS ແກ້ໄຂ

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

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

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

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

ເຄື່ອງຈັກຕົ້ມເຄືອບແບບ HTML ແມ່ນຫຍັງ?

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

ເຄື່ອງແມ່ແບບໂດຍທົ່ວໄປມີຫຼາຍປະເພດເອກະສານທີ່ກ່ຽວຂ້ອງກັບການສ້າງເວບໄຊທ໌, ລວມທັງເອກະສານ HTML, ເອກະສານແບບ CSS ຂັ້ນພື້ນຖານ, JavaScript ທີ່ ຈຳ ເປັນ, ຮູບພາບຂອງສະຖານທີ່ແລະເອກະສານກ່ຽວກັບວິທີການ ນຳ ໃຊ້ສິ່ງທີ່ທ່ານຫາກໍ່ດາວໂຫລດມາ.

ແມ່ແບບເຕົາອົບ HTML ທີ່ນິຍົມ

ເພື່ອໃຫ້ຕົວທ່ານເອງຢູ່ໃນເສັ້ນທາງສູ່ສະຫວັນ HTML, HTMLplate Boilerplate ແມ່ນບ່ອນທີ່ດີທີ່ຈະເລີ່ມຕົ້ນ. ມັນອະທິບາຍຕົວເອງວ່າ "ແມ່ແບບ frontend ທີ່ນິຍົມທີ່ສຸດຂອງເວັບໄຊທ໌້ 'ແລະເປັນແມ່ແບບ HTML ທີ່ລຽບງ່າຍແລະລຽບງ່າຍເຊິ່ງມີທຸກເອກະສານແລະຊັບສິນທີ່ ຈຳ ເປັນທີ່ທ່ານຕ້ອງການເລີ່ມຕົ້ນສ້າງທັນທີ.

ສະບັບຫລ້າສຸດຂອງ HTML5 Boilerplate (v7) ມາພ້ອມກັບເອກະສານ index.html ເຊິ່ງປະກອບມີ tags ເພື່ອຮອງຮັບຕົວເລືອກມືຖືທີ່ ສຳ ຄັນ, Google Analytics ແລະການເຊື່ອມຕໍ່ກັບ Normalize.css, ເຊິ່ງຊ່ວຍໃຫ້ທາດເຫຼັກອອກຈາກຄວາມບໍ່ສອດຄ່ອງຂອງ browser. ເພື່ອໃຫ້ໄດ້ຄວາມຄິດກ່ຽວກັບວິທີການເຮັດວຽກຂອງ HTML5 Boilerplate ກວດເບິ່ງວິດີໂອທີ່ພວກເຂົາວາງລົງໃນຊ່ອງ YouTube ຂອງພວກເຂົາ. ມັນມີອາຍຸສອງສາມປີ, ແຕ່ໃຫ້ຄວາມຄິດທົ່ວໄປກ່ຽວກັບວິທີການເຮັດວຽກຂອງເຄື່ອງປັ້ນດິນເຜົາ.

ທາງເລືອກອື່ນທີ່ມີຄວາມນິຍົມຫຼາຍໃນການ ສຳ ຫຼວດແມ່ນ Bootstrap. ນີ້ແມ່ນ "ຫ້ອງສະ ໝຸດ ສ່ວນປະກອບ frontend", ແລະເປັນການສະ ເໜີ ທີ່ສົມບູນແບບຫຼາຍກ່ວາກອບ HTML5 Boilerplate.ມັນມີຕົວເລືອກ ສຳ ລັບການຈັດຮູບແບບ, ເນື້ອຫາ, ແບບອັກສອນຕົວອັກສອນ, ການພິມແລະສ່ວນປະກອບດ້ານ ໜ້າ ເຊັ່ນ: ປຸ່ມ, carousel, tooltips ແລະອື່ນໆ.

ແຕ່, ຖ້າທ່ານບໍ່ຕ້ອງການທຸກຢ່າງທີ່ທ່ານສາມາດດາວໂຫລດອົງປະກອບທີ່ທ່ານຕ້ອງການ ສຳ ລັບການກໍ່ສ້າງຂອງທ່ານ. ຄຳ ເຕືອນ, Bootstrap ແມ່ນທາງເລືອກທີ່ນິຍົມ ສຳ ລັບນັກອອກແບບແລະນັກພັດທະນາເວັບຫຼາຍໆຄົນ, ສະນັ້ນລອງຄິດເບິ່ງແດ່ໃນເວລາທີ່ ນຳ ໃຊ້ແມ່ແບບຂອງມັນ. ທ່ານບໍ່ຕ້ອງການທີ່ຈະເບິ່ງຄືກັບທຸກໆເວັບໄຊທ໌ອື່ນ.

ການ ນຳ ໃຊ້ HTML5 Boilerplate

ເມື່ອດາວໂຫລດມາແລ້ວ, ປື້ມແບບນີ້ທີ່ເປີດໂດຍບໍ່ເສຍຄ່າ, ສະ ໜອງ ຂໍ້ມູນພື້ນຖານໃຫ້ກັບທ່ານໂດຍມີພື້ນຖານຂອງ ໜ້າ ເວັບໄຊທ໌ html (index.html), CSS ແບບສອງສາມແບບ, ເອກະສານ JavaScript ສຳ ຄັນ, ໂຟນເດີ img ເພື່ອວາງຮູບ, 404 ໜ້າ, ໄຟລ໌ການຕັ້ງຄ່າແລະທີ່ກ່ຽວຂ້ອງ ເອກະສານ.

ໃນການດາວໂຫລດຄັ້ງ ທຳ ອິດມັນເປັນຄວາມຄິດທີ່ດີທີ່ຈະເຮັດ ສຳ ເນົາ, ດັ່ງນັ້ນທ່ານຈຶ່ງມີເອກະສານທີ່ບໍ່ມີເອກະສານອ້າງອີງທີ່ສະອາດ, ເປັນເອກະສານອ້າງອີງ.

ເພື່ອເລີ່ມຕົ້ນກ່ອນອື່ນ ໝົດ favicon.ico ແລະ icon.png ໄຟລ໌ທີ່ມີໂລໂກ້ຂອງທ່ານ - ສິ່ງເຫລົ່ານີ້ຈະປາກົດເປັນທີ່ໂປດປານຂອງເວັບໄຊທ໌ຂອງທ່ານແລະເປັນໄອຄອນເມື່ອເວັບໄຊທ໌ຂອງທ່ານຖືກບັນທຶກໄວ້ໃນ ໜ້າ ຈໍ iOS ຂອງຜູ້ໃດຜູ້ ໜຶ່ງ ເຄື່ອງປັ່ນໄຟອອນລາຍສາມາດຊ່ວຍທ່ານສ້າງພາບພົດ ໃໝ່.

ໃນ HTML, ມີການລວບລວມແທັກຕ່າງໆທີ່ທ່ານຈະຄຸ້ນເຄີຍແລະບາງສິ່ງທີ່ທ່ານບໍ່ຄຸ້ນເຄີຍ. ຍົກຕົວຢ່າງ, Modernizr ອາດຈະແມ່ນສິ່ງທີ່ເຈົ້າບໍ່ຄຸ້ນເຄີຍ. ນີ້ແມ່ນ 'ລະຫັດ JavaScript ທີ່ກວດພົບໂດຍອັດຕະໂນມັດກ່ຽວກັບເຕັກໂນໂລຢີເວັບໄຊຕ໌ລຸ້ນຕໍ່ໄປ'. ນີ້ຊ່ວຍໃຫ້ແນ່ໃຈວ່າເວັບໄຊທ໌້ຂອງທ່ານຍັງຄົງເປັນມື້ທີ່ດີທີ່ສຸດເທົ່າທີ່ຈະເປັນໄປໄດ້. ສ່ວນປະກອບອັກສອນສຸດທ້າຍແມ່ນ ສຳ ລັບ Google Analytics, ສິ່ງນີ້ສາມາດຖອດອອກໄດ້, ແຕ່ຖ້າທ່ານໃຊ້ມັນພຽງແຕ່ເພີ່ມລະຫັດ Google Analytics ຂອງທ່ານເອງ.

ໂດຍຫລັກການແລ້ວ, ປ່ອຍໃຫ້ທຸກສິ່ງທີ່ເຈົ້າພົບເຫັນແລະສຸມໃສ່ສິ່ງຂອງ ຮ່າງກາຍ> tag ນີ້ແມ່ນບ່ອນທີ່ເນື້ອຫາໄປ. ຕື່ມເນື້ອໃນຫຼັງຈາກເປີດ ຮ່າງກາຍ> tag ແລະໂດຍສະເພາະກ່ອນທີ່ຈະ script> tags ທີ່ມາທັນທີຫຼັງຈາກ p> tags. ໃຫ້ແນ່ໃຈວ່າຫນ້າເວັບມີ ຫົວຂໍ້> ແລະຕື່ມຂໍ້ມູນໃສ່ໃນ 'ເນື້ອຫາ' ມູນຄ່າໃນ 'ຄຳ ອະທິບາຍ' ແທັກ meta. ນີ້ຈະໃຫ້ຄໍາແນະນໍາກ່ຽວກັບສິ່ງທີ່ເວັບໄຊທ໌້ເວົ້າກ່ຽວກັບ, ທີ່ດີສໍາລັບ SEO.

ໃຫ້ສັງເກດອີກວ່າການເຊື່ອມຕໍ່ທັງ ໝົດ ແມ່ນມີຄວາມກ່ຽວຂ້ອງຢູ່ໃນເອກະສານນີ້, ແລະດັ່ງນັ້ນທ່ານອາດຈະຕ້ອງປ່ຽນພວກມັນໄປເປັນລິ້ງທີ່ກ່ຽວຂ້ອງກັບຮາກຫລືເຊື່ອມໂຍງຢ່າງແທ້ຈິງຖ້າທ່ານເລີ່ມຕົ້ນຮວບຮວມ ໜ້າ ເວັບຕ່າງໆໃນໂຟນເດີຕ່າງໆ. ຍົກ​ຕົວ​ຢ່າງ, script src = "js / plugins.js"> ອາດຈະຕ້ອງກາຍເປັນ script src = "http://www.mysitename.com/js/plugins.js">. ນອກຈາກນີ້, ມັນເປັນການປະຕິບັດທີ່ດີທີ່ຈະປະກອບ ຄຳ ເຫັນຖ້າທ່ານເຮັດການປ່ຽນແປງທີ່ ສຳ ຄັນຕໍ່ HTML. ສະນັ້ນເມື່ອທ່ານກັບມາທ່ານສາມາດເຕືອນທ່ານເອງວ່າມີການປ່ຽນແປງຫຍັງແດ່.

CSS ແກ້ໄຂ

ເມື່ອທ່ານໄດ້ຮັບປະສົບການແລ້ວ, ມັນຄວນຈະເປັນການພິຈາລະນາການກໍ່ສ້າງແບບ ກຳ ນົດເອງໂດຍໃຊ້ Initializr, ເກັບສ່ວນປະກອບທີ່ທ່ານຕ້ອງການແລະຖີ້ມສິ່ງທີ່ທ່ານບໍ່ຕ້ອງການ. ເຊັ່ນດຽວກັນ, ຖ້າທ່ານ ກຳ ລັງສ້າງເວບໄຊທ໌ WordPress, ສຳ ຫຼວດຫົວຂໍ້ທີ່ບໍ່ມີຫົວຂໍ້ໂດຍສະເພາະຕໍ່ WordPress, ເຊັ່ນວ່າ HTML5 ເປົ່າ. ການດາວໂຫລດແລະການບໍລິການເຫຼົ່ານີ້ແມ່ນບໍ່ໄດ້ເສຍຄ່າ, ສະນັ້ນທ່ານສາມາດກວດສອບແລະທົດລອງກັບພວກມັນໄດ້ໃນເວລາຫວ່າງຂອງທ່ານ.

ເຖິງຢ່າງໃດກໍ່ຕາມ, ສິ່ງໃດກໍ່ຕາມທີ່ທ່ານເຮັດ, ການເຮັດວຽກເລັກໆນ້ອຍໆແລະການສືບສວນຕອນນີ້ຄວນຊ່ວຍທ່ານປະຫຍັດເວລາທັງ ໝົດ ໃນເວລາຕໍ່ມາ, ເມື່ອທ່ານພຽງແຕ່ດຶງເຕົາໄຟຂອງທ່ານອອກ (ເກັບມ້ຽນໄວ້ໃນບ່ອນເກັບມ້ຽນຢ່າງປອດໄພ) ເພື່ອຈະໄດ້ຮັບການແຕກໃນເວັບໄຊທ໌ ໃໝ່.

ເນື້ອໃນນີ້ໃນເບື້ອງຕົ້ນມີຢູ່ໃນວາລະສານສຸດທິ.