ເບິ່ງຫນ້າເວັບໃດໆອອນໄລນ໌ໃນມື້ນີ້ແລະທ່ານຈະສັງເກດເຫັນວ່າພວກເຂົາແບ່ງປັນສິ່ງທີ່ມີຢູ່ຮ່ວມກັນ. ຫນຶ່ງໃນລັກສະນະທີ່ແບ່ງປັນເຫຼົ່ານັ້ນແມ່ນຮູບພາບຕ່າງໆ. ຮູບພາບທີ່ຖືກຕ້ອງເພີ່ມຂຶ້ນຫຼາຍຕໍ່ການນໍາສະເຫນີຂອງເວັບໄຊທ໌. ຮູບພາບຕ່າງໆເຫຼົ່ານີ້, ເຊັ່ນສັນຍາລັກຂອງບໍລິສັດ, ຊ່ວຍໃຫ້ແບເວັບໄຊທ໌ແລະເຊື່ອມຕໍ່ກັບຫນ່ວຍງານດິຈິຕອນກັບບໍລິສັດດ້ານຮ່າງກາຍຂອງທ່ານ.
ເພື່ອເພີ່ມຮູບພາບ, ຮູບສັນຍາລັກ, ຫຼືຮູບພາບໃສ່ຫນ້າເວັບຂອງທ່ານ, ທ່ານຈໍາເປັນຕ້ອງໃຊ້ແທັກໃນລະຫັດ HTML ຂອງຫນ້າ. ທ່ານວາງ tag IMG ໃນ HTML ຂອງທ່ານບ່ອນທີ່ທ່ານຕ້ອງການຮູບພາບທີ່ຈະສະແດງ. ຕົວທ່ອງເວັບຂອງເວັບທີ່ກໍາລັງສະແດງລະຫັດຂອງຫນ້າຈະປ່ຽນແທັກນີ້ກັບຮູບພາບທີ່ເຫມາະສົມເມື່ອຫນ້າຖືກເບິ່ງ. ກັບໄປທີ່ຕົວຢ່າງໂລໂກ້ບໍລິສັດຂອງພວກເຮົາ, ນີ້ແມ່ນວິທີທີ່ທ່ານສາມາດເພີ່ມຮູບພາບທີ່ຢູ່ໃນເວັບໄຊຂອງທ່ານ:
ຮູບພາບຄຸນລັກສະນະ
ຊອກຫາຢູ່ໃນລະຫັດ HTML ຂ້າງເທິງ, ທ່ານຈະເຫັນວ່າອົງປະກອບມີສອງຄຸນລັກສະນະ. ພວກເຂົາແຕ່ລະແມ່ນຕ້ອງການສໍາລັບຮູບພາບ.
attribute ທໍາອິດແມ່ນ "src". ນີ້ແມ່ນຂ້ອນຂ້າງແທ້ໆໄຟລ໌ຮູບພາບທີ່ທ່ານຕ້ອງການສະແດງຢູ່ໃນຫນ້າ. ໃນຕົວຢ່າງຂອງພວກເຮົາແມ່ນພວກເຮົາໃຊ້ໄຟລ໌ທີ່ເອີ້ນວ່າ "logo.png". ນີ້ແມ່ນຮູບພາບທີ່ຕົວທ່ອງເວັບຂອງເວັບຈະສະແດງເມື່ອມັນສະແດງເວັບໄຊທ໌.
ທ່ານຍັງຈະສັງເກດເຫັນວ່າກ່ອນທີ່ຈະຊື່ໄຟລ໌ນີ້, ພວກເຮົາໄດ້ເພີ່ມຂໍ້ມູນເພີ່ມເຕີມ, "/ images /". ນີ້ແມ່ນເສັ້ນທາງໄຟລ໌. ແຖວຫນ້າເບື້ອງຕົ້ນບອກໃຫ້ເຄື່ອງແມ່ຂ່າຍເບິ່ງເຂົ້າໄປໃນຮາກຂອງໄດເລກະທໍລີ. ມັນຈະຊອກຫາໂຟເດີທີ່ເອີ້ນວ່າ "ຮູບພາບ" ແລະສຸດທ້າຍໄຟລ໌ທີ່ເອີ້ນວ່າ "logo.png". ການນໍາໃຊ້ໂຟເດີທີ່ເອີ້ນວ່າ "ຮູບພາບ" ເພື່ອຈັດເກັບຮູບພາບຂອງເວັບໄຊທ໌໌ທັງຫມົດແມ່ນເປັນການປະຕິບັດທີ່ສວຍງາມ, ແຕ່ເສັ້ນທາງໄຟລ໌ຂອງທ່ານຈະຖືກປ່ຽນໄປເປັນສິ່ງທີ່ກ່ຽວຂ້ອງກັບເວັບໄຊທ໌ຂອງທ່ານ.
ຂໍ້ກໍານົດທີ່ຕ້ອງການທີສອງແມ່ນຂໍ້ຄວາມ "alt". ນີ້ແມ່ນ "ຂໍ້ຄວາມສະແດງ" ທີ່ສະແດງໃຫ້ເຫັນຖ້າຮູບພາບບໍ່ສາມາດໂຫລດໄດ້ເພາະເຫດຜົນບາງຢ່າງ. ຂໍ້ຄວາມນີ້, ເຊິ່ງໃນຕົວຢ່າງຂອງພວກເຮົາຈະອ່ານ "Logo ບໍລິສັດ" ຈະຖືກສະແດງຖ້າຮູບພາບບໍ່ສາມາດໂຫລດໄດ້. ເປັນຫຍັງມັນຈຶ່ງເກີດຂຶ້ນ? ມີເຫດຜົນຫຼາຍຢ່າງ:
- ເສັ້ນທາງໄຟລ໌ທີ່ບໍ່ຖືກຕ້ອງ
- ຊື່ໄຟລ໌ທີ່ບໍ່ຖືກຕ້ອງຫຼືການປະກົດຕົວຜິດພາດ
- ການສົ່ງຂໍ້ຜິດພາດ
- ໄຟລ໌ຖືກລຶບອອກຈາກເຄື່ອງແມ່ຂ່າຍ
ເຫຼົ່ານີ້ແມ່ນມີພຽງແຕ່ຄວາມເປັນໄປໄດ້ທີ່ຈະເປັນບາງຢ່າງສໍາລັບຮູບພາບທີ່ກໍານົດໄວ້ຂອງພວກເຮົາອາດຈະຫາຍໄປ. ໃນກໍລະນີເຫຼົ່ານີ້, ຂໍ້ຄວາມ alt ຂອງພວກເຮົາຈະສະແດງແທນ.
ຂໍ້ຄວາມປ່ຽນແປງແມ່ນຖືກນໍາໃຊ້ໂດຍຊອບແວຜູ້ອ່ານຫນ້າຈໍເພື່ອ "ອ່ານ" ຮູບພາບໃຫ້ກັບຜູ້ເຂົ້າຊົມຜູ້ທີ່ມີວິໄສທັດ. ເນື່ອງຈາກພວກເຂົາບໍ່ສາມາດເຫັນຮູບພາບທີ່ພວກເຮົາເຮັດໄດ້, ຂໍ້ຄວາມນີ້ເຮັດໃຫ້ພວກເຂົາຮູ້ວ່າຮູບພາບຂອງມັນແມ່ນຫຍັງ. ນີ້ແມ່ນເຫດຜົນທີ່ຕ້ອງການຂໍ້ຄວາມ alt ແລະເປັນຫຍັງມັນຄວນຈະແຈ້ງວ່າຮູບພາບແມ່ນຫຍັງ?
ການເຂົ້າໃຈຜິດທົ່ວໄປຂອງຂໍ້ຄວາມ alt ແມ່ນວ່າມັນຫມາຍຄວາມວ່າສໍາລັບຈຸດປະສົງຂອງເຄື່ອງຈັກຊອກຫາ. ນີ້ບໍ່ແມ່ນຄວາມຈິງ. ໃນຂະນະທີ່ Google ແລະເຄື່ອງມືຄົ້ນຫາອື່ນໆອ່ານຂໍ້ຄວາມນີ້ເພື່ອກໍານົດວ່າຮູບພາບແມ່ນຫຍັງ (ຈົ່ງຈໍາໄວ້ວ່າພວກເຂົາບໍ່ສາມາດ "ເບິ່ງ" ຮູບພາບຂອງທ່ານໄດ້), ທ່ານບໍ່ຄວນຂຽນຂໍ້ຄວາມ alt ເພື່ອຂໍອຸທອນກັບເຄື່ອງຈັກຊອກຫາ. ຜູ້ຂຽນຂໍ້ຄວາມ alt alt ທີ່ຫມາຍຄວາມວ່າສໍາລັບມະນຸດ. ຖ້າທ່ານຍັງສາມາດເພີ່ມຄໍາບາງຄໍາໃນແທັບທີ່ອຸດົມສົມບູນກັບເຄື່ອງຈັກຊອກຫາທີ່ດີ, ແຕ່ໃຫ້ແນ່ໃຈວ່າຂໍ້ຄວາມ alt ເຮັດຫນ້າທີ່ຕົ້ນຕໍຂອງມັນໂດຍກໍານົດວ່າຮູບພາບແມ່ນໃຜສໍາລັບຜູ້ທີ່ບໍ່ສາມາດເບິ່ງໄຟລ໌ຮູບພາບ.
ຄຸນລັກສະນະອື່ນໆ
IMG tag ຍັງມີຄຸນລັກສະນະອື່ນໆອີກສອງຢ່າງທີ່ທ່ານອາດຈະເຫັນໃນເວລາທີ່ທ່ານນໍາໃຊ້ຮູບພາບໃນຫນ້າເວັບຂອງທ່ານ - ຄວາມກວ້າງແລະຄວາມສູງ. ຕົວຢ່າງເຊັ່ນຖ້າທ່ານໃຊ້ຕົວແກ້ໄຂ WYSIWYG ເຊັ່ນ Dreamweaver, ມັນຈະເພີ່ມຂໍ້ມູນນີ້ໃຫ້ທ່ານໄດ້ໂດຍອັດຕະໂນມັດ. ນີ້ແມ່ນຕົວຢ່າງ:
ຄຸນລັກສະນະ WIDTH ແລະ HEIGHT ບອກຕົວທ່ອງເວັບຂະຫນາດຂອງຮູບພາບ. ຕົວທ່ອງເວັບຫຼັງຈາກນັ້ນຮູ້ແທ້ໆຊ່ອງໃນຮູບແບບການຈັດສັນ, ແລະມັນສາມາດຍ້າຍໄປຫາອົງປະກອບຕໍ່ໄປໃນຫນ້າໃນຂະນະທີ່ການດາວໂຫຼດຮູບພາບ. ບັນຫາທີ່ມີການນໍາໃຊ້ຂໍ້ມູນນີ້ໃນ HTML ຂອງທ່ານແມ່ນວ່າທ່ານອາດຈະບໍ່ຢາກໃຫ້ຮູບພາບຂອງທ່ານສະແດງຢູ່ໃນຂະຫນາດທີ່ແນ່ນອນ. ຕົວຢ່າງ: ຖ້າທ່ານມີ ເວັບໄຊທ໌ຕອບສະຫນອງ ທີ່ມີການປ່ຽນແປງຂະຫນາດທີ່ອີງໃສ່ຫນ້າຈໍຂອງນັກທ່ອງທ່ຽວແລະຂະຫນາດອຸປະກອນ, ທ່ານກໍ່ຈະຕ້ອງການຮູບພາບຂອງທ່ານໃຫ້ມີຄວາມຍືດຫຍຸ່ນ. ຖ້າທ່ານຂຽນໃນ HTML ຂອງທ່ານວ່າຂະຫນາດຄົງທີ່ໃດກໍ່ຕາມ, ທ່ານຈະພົບວ່າມັນຍາກຫຼາຍທີ່ຈະລອກເອົາຄໍາຕອບຂອງ CSS ທີ່ ຕອບສະຫນອງໄດ້. ສໍາລັບເຫດຜົນນີ້, ແລະເພື່ອຮັກສາການແຍກຮູບແບບ (CSS) ແລະໂຄງສ້າງ (HTML), ແນະນໍາໃຫ້ທ່ານບໍ່ເພີ່ມຄຸນສົມບັດຄວາມກວ້າງແລະຄວາມສູງກັບລະຫັດ HTML ຂອງທ່ານ.
ຫນຶ່ງໃນບັນທຶກ: ຖ້າທ່ານຕ້ອງການໃຫ້ຄໍາແນະນໍາການວາງຂະຫນາດເຫຼົ່ານີ້ປິດແລະບໍ່ກໍານົດຂະຫນາດໃນ CSS, ຕົວທ່ອງເວັບຈະສະແດງຮູບພາບໃນຄ່າເລີ່ມຕົ້ນຂອງມັນ, ຂະຫນາດພື້ນເມືອງຢ່າງໃດກໍ່ຕາມ.
ແກ້ໄຂໂດຍ Jeremy Girard