ການນໍາໃຊ້ Tag HTML IMG ສໍາລັບຮູບພາບແລະຈຸດປະສົງ
ຮູບ HTML IMG ປົກຄອງການໃສ່ຮູບພາບແລະວັດຖຸກາຟິກອື່ນໆໃນຫນ້າເວັບ. ປ້າຍໂຄສະນາທົ່ວໄປນີ້ສະຫນັບສະຫນູນຄຸນລັກສະນະບັງຄັບແລະບັງຄັບຈໍານວນຫຼາຍທີ່ເພີ່ມຄວາມອຸດົມສົມບູນໃຫ້ກັບຄວາມສາມາດຂອງທ່ານໃນການອອກແບບເວັບໄຊທ໌ທີ່ມີຄວາມສົນໃຈແລະຮູບພາບ.
ຕົວຢ່າງຂອງ tag HTML ທີ່ສ້າງຕັ້ງຂຶ້ນຢ່າງເຕັມທີ່ຄ້າຍຄືນີ້:
ຄຸນລັກສະນະ Tag IMG ທີ່ຈໍາເປັນ
SRC ຄຸນລັກສະນະດຽວທີ່ທ່ານຈໍາເປັນຕ້ອງໄດ້ຮັບຮູບພາບທີ່ສະແດງໃນຫນ້າເວັບແມ່ນຄຸນສົມບັດ SRC. attribute ນີ້ລະບຸຊື່ແລະສະຖານທີ່ຂອງໄຟລ໌ຮູບພາບທີ່ຈະສະແດງ.
ALT ຂຽນ XHTML ແລະ HTML4 ທີ່ຖືກຕ້ອງ, ຄຸນລັກສະນະ ALT ແມ່ນຕ້ອງການ. Attribute ນີ້ຖືກນໍາໃຊ້ເພື່ອສະຫນອງຕົວທ່ອງເວັບທີ່ບໍ່ມີທາງເລືອກທີ່ມີຂໍ້ຄວາມທີ່ອະທິບາຍຮູບພາບ. ຕົວທ່ອງເວັບສະແດງຂໍ້ຄວາມທາງເລືອກໃນຮູບແບບຕ່າງໆ. ບາງຄົນສະແດງວ່າມັນເປັນ pop-up ເວລາທີ່ທ່ານໃສ່ຫນູໃນຮູບພາບ, ຄົນອື່ນສະແດງມັນໃນຄຸນສົມບັດເມື່ອທ່ານຄລິກຂວາໃສ່ຮູບ, ແລະບາງຄົນບໍ່ສະແດງມັນເລີຍ.
ໃຊ້ ຂໍ້ຄວາມ alt ເພື່ອໃຫ້ລາຍລະອຽດເພີ່ມເຕີມກ່ຽວກັບຮູບພາບທີ່ບໍ່ກ່ຽວຂ້ອງຫຼືສໍາຄັນກັບຂໍ້ຄວາມຂອງຫນ້າເວັບ. ແຕ່ຈື່ໄວ້ວ່າໃນຜູ້ອ່ານຫນ້າຈໍແລະຕົວທ່ອງເວັບພຽງແຕ່ຂໍ້ຄວາມເທົ່ານັ້ນ, ຂໍ້ຄວາມຈະຖືກອ່ານເຂົ້າໃນສ່ວນທີ່ເຫຼືອຂອງຂໍ້ຄວາມໃນຫນ້າ. ເພື່ອຫຼີກເວັ້ນການສັບສົນ, ໃຫ້ນໍາໃຊ້ຂໍ້ຄວາມ alt describing (ຕົວຢ່າງ), "ກ່ຽວກັບ Web Design ແລະ HTML" ແທນ "logo".
ໃນ HTML5, ຄຸນລັກສະນະ ALT ບໍ່ຈໍາເປັນຕ້ອງສະເຫມີເພາະວ່າທ່ານສາມາດໃຊ້ຄໍາບັນຍາຍເພື່ອເພີ່ມຄໍາອະທິບາຍຕື່ມອີກ. ນອກນັ້ນທ່ານຍັງສາມາດໃຊ້ເອກະສານ ARIA-DESCRIBEDBY ເພື່ອລະບຸ ID ທີ່ມີຄໍາອະທິບາຍຢ່າງເຕັມທີ່.
ຍັງບໍ່ຕ້ອງການຂໍ້ຄວາມທີ່ປ່ຽນແທນຖ້າຮູບພາບແມ່ນອອກແບບຢ່າງດຽວ, ເຊັ່ນວ່າຮູບພາບຢູ່ເທິງຫນ້າເວັບຫຼືໄອຄອນ. ແຕ່ຖ້າທ່ານບໍ່ແນ່ໃຈວ່າ, ໃຫ້ຂຽນຂໍ້ຄວາມ alt ໃນກໍລະນີ.
IMG ຄຸນສົມບັດທີ່ແນະນໍາ
WIDTH ແລະ HEIGHT . ທ່ານຄວນເຂົ້າໄປໃນນິໄສຂອງການນໍາໃຊ້ຄຸນລັກສະນະ WIDTH ແລະ HEIGHT ສະເຫມີ. ແລະທ່ານຄວນໃຊ້ຂະຫນາດທີ່ແທ້ຈິງແລະບໍ່ປັບຂະຫນາດຮູບພາບຂອງທ່ານກັບຕົວທ່ອງເວັບ.
ຄຸນລັກສະນະເຫລົ່ານີ້ເລັ່ງການສະແດງຜົນຂອງຫນ້າເພາະວ່າຕົວທ່ອງເວັບສາມາດຈັດສັນພື້ນທີ່ໃນການອອກແບບສໍາລັບຮູບພາບ, ແລະຫຼັງຈາກນັ້ນສືບຕໍ່ດາວໂຫລດສ່ວນທີ່ເຫຼືອຂອງເນື້ອຫາ, ແທນທີ່ຈະລໍຖ້າຮູບພາບທັງຫມົດທີ່ຈະດາວໂຫລດ.
ຄຸນສົມບັດ IMG ອື່ນໆທີ່ມີປະໂຍດ
TITLE . attribute ເປັນ attribute ທົ່ວໂລກທີ່ສາມາດຖືກນໍາໃຊ້ກັບ ອົງປະກອບ HTML ໃດໆ. ຍິ່ງໄປກວ່ານັ້ນ, ຄຸນລັກສະນະ TITLE ຊ່ວຍໃຫ້ທ່ານສາມາດເພີ່ມຂໍ້ມູນເພີ່ມເຕີມກ່ຽວກັບຮູບພາບ.
ຕົວທ່ອງເວັບສ່ວນໃຫຍ່ສະຫນັບສະຫນູນຄຸນລັກສະນະ TITLE, ແຕ່ພວກເຂົາເຮັດມັນໃນວິທີທີ່ແຕກຕ່າງກັນ. ບາງຄົນສະແດງຂໍ້ຄວາມເປັນປ໊ອບອັບໃນຂະນະທີ່ຄົນອື່ນສະແດງໃນຫນ້າຈໍຂໍ້ມູນໃນເວລາທີ່ຜູ້ໃຊ້ສິດຄລິກໃສ່ຮູບພາບ. ທ່ານສາມາດໃຊ້ຄຸນລັກສະນະຂອງ TITLE ເພື່ອຂຽນຂໍ້ມູນເພີ່ມເຕີມກ່ຽວກັບຮູບພາບແຕ່ບໍ່ໄດ້ຖືກນັບໄວ້ໃນຂໍ້ມູນນີ້ຖືກເຊື່ອງໄວ້ ຫຼື ເບິ່ງເຫັນ. ທ່ານຄວນຈະປະຕິບັດຫຼາຍທີ່ສຸດບໍ່ໃຊ້ນີ້ເພື່ອຊ່ອນຄໍາສໍາລັບເຄື່ອງຈັກຊອກຫາ. ການປະຕິບັດນີ້ແມ່ນຖືກລົງໂທດໂດຍເຄື່ອງຈັກຊອກຫາຫລາຍທີ່ສຸດ.
USEMAP ແລະ ISMAP . ເຫຼົ່ານີ້ສອງຄຸນລັກສະນະກໍານົດ ແຜນທີ່ຮູບພາບ ຂອງລູກຄ້າຂ້າງ () ແລະເຊີຟເວີຂ້າງ (ISMAP) ກັບຮູບພາບຂອງທ່ານ.
LONGDESC attribute ສະຫນັບສະຫນູນ URLs ເພື່ອຄໍາອະທິບາຍຕໍ່ໄປອີກແລ້ວຂອງຮູບພາບ. ຄຸນນະສົມບັດນີ້ເຮັດໃຫ້ຮູບພາບຂອງທ່ານສາມາດເຂົ້າເຖິງໄດ້ງ່າຍຂຶ້ນ
ຄຸນະລັກສະນະ IMG ທີ່ຖືກປະຕິເສດແລະລ້າສະໄຫມ
ຄຸນລັກສະນະຫຼາຍໆຖືກລ້າສະໄຫມໃນ HTML5 ຫຼືຖືກປະຕິເສດໃນ HTML4. ສໍາລັບ HTML ທີ່ດີທີ່ສຸດ, ທ່ານຄວນຊອກຫາຄໍາແກ້ໄຂອື່ນໆແທນທີ່ຈະໃຊ້ຄຸນລັກສະນະເຫຼົ່ານີ້.
BORDER attribute ກໍານົດ width ໃນ pixels ຂອງຂອບໃດໆທີ່ອ້ອມຮອບຮູບພາບ. ມັນໄດ້ຮັບການສະຫນັບສະຫນູນໃນ HTML4 ແລະຖືກລຶບລ້າງໃນ HTML5.
ALIGN ຄຸນລັກສະນະນີ້ອະນຸຍາດໃຫ້ທ່ານວາງຮູບພາບພາຍໃນຂໍ້ຄວາມແລະມີການໄຫຼຂໍ້ຄວາມປະມານ. ທ່ານສາມາດຈັດຮູບພາບໄປທາງຂວາຫຼືຊ້າຍ. ມັນໄດ້ຮັບການສະຫນັບສະຫນູນໃນຊັບສົມບັດ CSS float ໃນ HTML4 ແລະຖືກໃຊ້ໃນ HTML5.
HSPACE ແລະ VSPACE . The HSPACE ແລະ VSPACE ຄຸນລັກສະນະເພີ່ມພື້ນທີ່ສີຂາວຕາມແນວນອນ (HSPACE) ແລະແນວຕັ້ງ (VSPACE). ພື້ນທີ່ສີຂາວຈະຖືກເພີ່ມເຂົ້າໄປໃນທັງສອງດ້ານຂອງຮູບພາບ (ດ້ານເທິງແລະດ້ານລຸ່ມ, ຊ້າຍແລະຂວາ), ດັ່ງນັ້ນຖ້າທ່ານຕ້ອງການພື້ນທີ່ຢູ່ຂ້າງຫນຶ່ງ, ທ່ານຄວນໃຊ້ CSS. ຄຸນລັກສະນະເຫຼົ່ານີ້ໄດ້ຮັບການຍອມຮັບໃນເອກະສານ HTML4 ໃນແງ່ຂອງຄຸນສົມບັດ CSS ຂອບໃບບີນ, ແລະພວກເຂົາແມ່ນຫມົດເວລາໃນ HTML5.
LOWSRC ຄຸນລັກສະນະ LOWSRC ສະຫນອງຮູບພາບທາງເລືອກໃນເວລາທີ່ແຫຼ່ງຮູບພາບຂອງທ່ານມີຂະຫນາດໃຫຍ່ດັ່ງນັ້ນມັນໄດ້ດາວໂຫລດຢ່າງຊ້າໆ. ຕົວຢ່າງ, ທ່ານອາດຈະມີຮູບພາບທີ່ເປັນ 500KB ທີ່ທ່ານຕ້ອງການສະແດງໃນຫນ້າເວັບຂອງທ່ານ, ແຕ່ 500KB ຈະໃຊ້ເວລາດົນທີ່ຈະດາວໂຫລດ. ດັ່ງນັ້ນ, ທ່ານສ້າງສໍາເນົາຂອງຮູບພາບທີ່ມີຂະຫນາດນ້ອຍກວ່າ, ບາງທີອາດມີສີດໍາແລະສີຂາວຫຼືພຽງແຕ່ເພີ່ມປະສິດທິພາບສູງສຸດ, ແລະໃສ່ໃນລັກສະນະ LOWSRC. ຮູບພາບຂະຫນາດນ້ອຍຈະດາວໂຫລດແລະສະແດງຫນ້າທໍາອິດ, ແລະຫຼັງຈາກນັ້ນຮູບພາບຂະຫນາດໃຫຍ່ຈະປາກົດວ່າມັນຈະປ່ຽນແທນທີ່ແຫຼ່ງຂໍ້ມູນທີ່ມີປະໂຫຍດຫນ້ອຍ.
ຄຸນລັກສະນະ LOWSRC ໄດ້ຖືກເພີ່ມເຂົ້າໃນ Netscape Navigator 2.0 ກັບ IMG tag. ມັນແມ່ນສ່ວນຫນຶ່ງຂອງລະດັບ DOM ແຕ່ວ່າມັນຖືກລຶບອອກມາຈາກລະດັບ DOM 2. ການສະຫນັບສະຫນູນຂອງເບົາເຊີໄດ້ສະຫຼຸບສໍາລັບຄຸນລັກສະນະນີ້, ເຖິງແມ່ນວ່າຫລາຍສະຖານທີ່ອ້າງວ່າມັນຖືກສະຫນັບສະຫນູນໂດຍຕົວທ່ອງເວັບທີ່ທັນສະໄຫມທັງຫມົດ. ມັນບໍ່ໄດ້ຖືກ deprecated ໃນ HTML4 ຫຼືລ້າສຸດໃນ HTML5 ເນື່ອງຈາກວ່າມັນບໍ່ເຄີຍເປັນພາກສ່ວນທີ່ເປັນທາງການຂອງຂໍ້ກໍານົດໃດຫນຶ່ງ.
ຫຼີກເວັ້ນການນໍາໃຊ້ຄຸນລັກສະນະນີ້ແລະແທນທີ່ຈະເພີ່ມປະສິດທິພາບຮູບພາບຂອງທ່ານເພື່ອໃຫ້ພວກເຂົາໂຫລດໄດ້ໄວ. ຄວາມໄວໃນການໂຫລດຫນ້າເວັບແມ່ນສ່ວນຫນຶ່ງທີ່ສໍາຄັນຂອງການອອກແບບເວັບທີ່ດີແລະຮູບພາບຂະຫນາດໃຫຍ່ຊ້າລົງຢ່າງຫຼວງຫຼາຍ - ເຖິງແມ່ນວ່າທ່ານໃຊ້ຄຸນລັກສະນະຂອງ LOWSRC.