ຫນຶ່ງໃນແທັກທີ່ທ່ານຈະໄດ້ຮຽນຮູ້ໃນຕົ້ນປີໃນການສຶກສາການອອກແບບເວັບໄຊຕ໌ຂອງທ່ານແມ່ນຄູ່ tags ທີ່ເອີ້ນວ່າ "ແທໍກເນັ້ນ". ຂໍໃຫ້ພິຈາລະນາເບິ່ງສິ່ງທີ່ tags ເຫຼົ່ານີ້ແມ່ນແລະວິທີການທີ່ເຂົາເຈົ້າໄດ້ຖືກນໍາໃຊ້ໃນການອອກແບບເວັບໄຊທ໌໌ໃນມື້ນີ້.
ກັບໄປ XHTML
ຖ້າທ່ານໄດ້ຮຽນຮູ້ HTML ປີກ່ອນ, ດີກ່ອນທີ່ຈະເພີ່ມຂຶ້ນຂອງ HTML5, ທ່ານອາດຈະນໍາໃຊ້ທັງແທັກທີ່ຫນາແລະມັນ. ຕາມທີ່ທ່ານຄາດຫວັງວ່າ, ແທັບເຫລົ່າເຫຼົ່ານີ້ຈະປ່ຽນອົງປະກອບເປັນຂໍ້ຄວາມທີ່ຫນາແຫນ້ນຫຼືຕົວອັກສອນທີ່ເປັນຕົວອັກສອນຕາມລໍາດັບ. ບັນຫາທີ່ມີບັນດາແທັບເຫຼົ່ານີ້ແລະເຫດຜົນທີ່ພວກມັນຖືກຫລີກໄປທາງຫນຶ່ງໃນເງື່ອນໄຂຂອງອົງປະກອບໃຫມ່ (ທີ່ພວກເຮົາຈະເບິ່ງໃນສັ້ນ) ແມ່ນວ່າພວກເຂົາບໍ່ແມ່ນອົງປະກອບທີ່ກ່ຽວຂ້ອງກັນ. ນີ້ແມ່ນຍ້ອນວ່າພວກເຂົາກໍານົດວິທີການເບິ່ງຂໍ້ຄວາມແທນທີ່ຈະເປັນຂໍ້ມູນກ່ຽວກັບຂໍ້ຄວາມ. ຈືຂໍ້ມູນການ, HTML (ບ່ອນທີ່ tags ເຫຼົ່ານີ້ຈະໄດ້ຮັບການລາຍລັກອັກສອນ) ແມ່ນທັງຫມົດກ່ຽວກັບໂຄງປະກອບການ, ບໍ່ແມ່ນແບບຕາ! ພາບທີ່ຖືກຈັດການໂດຍ CSS ແລະການອອກແບບເວັບໄຊຕ໌ທີ່ດີທີ່ສຸດໄດ້ຖືວ່າທ່ານຄວນຈະມີການແບ່ງແຍກຢ່າງຈະແຈ້ງຂອງແບບແລະໂຄງສ້າງໃນຫນ້າເວັບຂອງທ່ານ. ນີ້ຫມາຍຄວາມວ່າບໍ່ນໍາໃຊ້ອົງປະກອບທີ່ບໍ່ກ່ຽວຂ້ອງແລະມີລາຍລະອຽດແທນທີ່ຈະເປັນໂຄງສ້າງ. ນີ້ແມ່ນຍ້ອນວ່າແທັກທີ່ກ້າຫານແລະກາຕູນໄດ້ຖືກແທນທີ່ດ້ວຍຄວາມເຂັ້ມແຂງ (ສໍາລັບຄວາມຫນາແຫນ້ນ) ແລະເນັ້ນຫນັກ (ສໍາລັບມັນ).
& lt strong & gt ແລະ & lt; em & gt;
ອົງປະກອບທີ່ເຂັ້ມແຂງແລະເນັ້ນຫນັກໃສ່ຂໍ້ມູນຂ່າວສານຂອງທ່ານ, ລາຍລະອຽດກ່ຽວກັບເນື້ອຫາທີ່ຄວນໄດ້ຮັບການປະຕິບັດທີ່ແຕກຕ່າງກັນແລະເນັ້ນຫນັກໃນເວລາທີ່ເນື້ອຫາເວົ້າ. ທ່ານໃຊ້ອົງປະກອບເຫຼົ່ານີ້ຫຼາຍຢ່າງເຊັ່ນດຽວກັນທ່ານອາດຈະໃຊ້ bold ແລະ italics ໃນອະດີດ. ພຽງແຕ່ໃສ່ຂໍ້ຄວາມຂອງທ່ານດ້ວຍແທັບເປີດແລະປິດ ( ແລະ ເພື່ອເນັ້ນຫນັກແລະ ແລະ ສໍາລັບຄວາມສໍາຄັນຢ່າງແຂງແຮງ) ແລະຂໍ້ຄວາມທີ່ປິດໄວ້ຈະເນັ້ນຫນັກ.
ທ່ານສາມາດຮວບຮວມເຫຼົ່ານີ້ tags ແລະມັນບໍ່ສໍາຄັນແມ່ນຫຍັງຄືແທັບພາຍນອກ. ນີ້ແມ່ນບາງຕົວຢ່າງ.
ຂໍ້ຄວາມນີ້ຖືກເນັ້ນຫນັກໃສ່ ແລະຕົວທ່ອງເວັບສ່ວນໃຫຍ່ຈະສະແດງວ່າມັນເປັນຕົວຈິງ. ຂໍ້ຄວາມນີ້ຖືກເນັ້ນຫນັກໃສ່ ແລະຕົວທ່ອງເວັບສ່ວນໃຫຍ່ຈະສະແດງວ່າມັນເປັນປະເພດກ້າຫານ.ໃນທັງສອງຕົວຢ່າງເຫຼົ່ານີ້, ພວກເຮົາບໍ່ໄດ້ກໍານົດເບິ່ງຮູບພາບທີ່ມີ HTML. ແມ່ນແລ້ວຮູບລັກສະນະຂອງ ຈະຖືກຕົວຈິງແລະ ຈະມີຄວາມຫນາແຫນ້ນ, ແຕ່ຮູບລັກສະນະທີ່ສາມາດປ່ຽນໄດ້ງ່າຍໃນ CSS. ນີ້ແມ່ນສິ່ງທີ່ດີທີ່ສຸດຂອງທັງສອງໂລກ. ທ່ານສາມາດໃຊ້ມາດຕະຖານຂອງຕົວທ່ອງເວັບໃນເບື້ອງຕົ້ນເພື່ອໃຫ້ໄດ້ຮັບຂໍ້ຄວາມມັນຫຼືຂໍ້ຄວາມທີ່ຫນາແຫນ້ນຢູ່ໃນເອກະສານຂອງທ່ານໂດຍບໍ່ມີການຂ້າມເສັ້ນແລະການປະສົມປະສານແລະຮູບແບບ. ບອກວ່າທ່ານຕ້ອງການຢາກໃຫ້ຂໍ້ຄວາມທີ່ ບໍ່ເທົ່າທຽມກັນ, ແຕ່ວ່າມັນຍັງເປັນສີແດງ, ທ່ານສາມາດເພີ່ມນີ້ໄປຍັງ CSS
strong {
ສີ: ສີແດງ;
}
ໃນຕົວຢ່າງນີ້, ທ່ານບໍ່ຈໍາເປັນຕ້ອງເພີ່ມຄຸນສົມບັດສໍາລັບຕົວອັກສອນຕົວຫນາທີ່ຫນາແຫນ້ນເນື່ອງຈາກວ່າມັນເປັນຄ່າເລີ່ມຕົ້ນ. ຖ້າທ່ານບໍ່ຕ້ອງການທີ່ຈະປ່ອຍໃຫ້ໂອກາດ, ຢ່າງໃດກໍຕາມ, ທ່ານກໍ່ສາມາດເພີ່ມມັນໃນ:
strong {
font-weight: bold
ສີ: ສີແດງ;
}
ໃນປັດຈຸບັນທ່ານຈະໄດ້ຮັບການຮັບປະກັນທັງຫມົດທີ່ຈະມີຫນ້າທີ່ມີຂໍ້ຄວາມຫນາແຫນ້ນ (ແລະສີແດງ) ບ່ອນທີ່ແທັກ ຖືກນໍາໃຊ້.
Double Up on Emphasis
ສິ່ງຫນຶ່ງທີ່ຂ້າພະເຈົ້າໄດ້ສັງເກດເຫັນໃນປີນີ້ແມ່ນສິ່ງທີ່ເກີດຂື້ນຖ້າທ່ານພະຍາຍາມເພີ່ມຂີດຄວາມສໍາຄັນ. ຍົກຕົວຢ່າງ:
ຂໍ້ຄວາມນີ້ຄວນມີ text bolded ແລະ italicized ພາຍໃນມັນ.ທ່ານຈະຄິດວ່າເສັ້ນນີ້ຈະຜະລິດພື້ນທີ່ທີ່ມີຂໍ້ຄວາມທີ່ຫນາແຫນ້ນແລະຄວາມຫນາແຫນ້ນ. ບາງຄັ້ງມັນກໍ່ເກີດຂຶ້ນແທ້ໆ, ແຕ່ຂ້ອຍໄດ້ເຫັນບາງຕົວທ່ອງເວັບພຽງແຕ່ໃຫ້ກຽດສັກສີສອງຂອງຄໍເຕົ້າໄຂ່ທີ່ເນັ້ນສອງຢ່າງ, ຫນຶ່ງທີ່ໃກ້ຊິດກັບຂໍ້ຄວາມຕົວຈິງ, ແລະພຽງແຕ່ສະແດງວ່າມັນເປັນຕົວຈິງ. ນີ້ແມ່ນຫນຶ່ງໃນເຫດຜົນທີ່ວ່າຂ້ອຍບໍ່ໄດ້ເພີ່ມຂື້ນໃສ່ແທັບເນັ້ນ.
ເຫດຜົນອີກຢ່າງຫນຶ່ງທີ່ຈະຫຼີກເວັ້ນການ "ເພີ່ມຂຶ້ນສອງເທົ່ານີ້" ແມ່ນເພື່ອຈຸດປະສົງ stylistic. ຫນຶ່ງໃນຮູບແບບການເນັ້ນຫນັກຖ້າຫາກວ່າປົກກະຕິແລ້ວພຽງພໍທີ່ຈະຖ່າຍທອດສຽງທີ່ທ່ານຕ້ອງການກໍານົດ. ທ່ານບໍ່ຈໍາເປັນຕ້ອງຂຽນ, ພິມ, ສີ, ຂະຫຍາຍແລະເນັ້ນຂໍ້ຄວາມເພື່ອໃຫ້ມັນໂດດເດັ່ນ. ຂໍ້ຄວາມນັ້ນ, ທັງຫມົດທີ່ແຕກຕ່າງກັນທີ່ແຕກຕ່າງກັນທີ່ຈະເນັ້ນຫນັກ, ຈະກາຍເປັນ garish. ດັ່ງນັ້ນຈົ່ງລະມັດລະວັງໃນເວລາທີ່ໃຊ້ແທັບເນັ້ນຫລືຄໍເຕົ້າໄຂ່ທີ່ CSS ໃຫ້ຄວາມເນັ້ນຫນັກແລະບໍ່ເຮັດໃຫ້ມັນຫຼາຍເກີນໄປ.
ຫມາຍເຫດກ່ຽວກັບຄວາມກ້າຫານແລະຕົວຈິງ
ຄວາມຄິດສຸດທ້າຍ - ໃນຂະນະທີ່ແທັບ ແລະ italics () ບໍ່ຖືກແນະນໍາໃຫ້ໃຊ້ເປັນອົງປະກອບເນັ້ນ, ມີບາງນັກອອກແບບເວັບທີ່ໃຊ້ແທັບເຫຼົ່ານີ້ໃຫ້ສອດຄ່ອງກັບເນື້ອໃນຂອງເນື້ອໃນ. ໂດຍພື້ນຖານແລ້ວ, ພວກມັນໃຊ້ມັນຄື ອົງປະກອບ. ນີ້ແມ່ນງາມເພາະວ່າແທັກມີສັ້ນຫຼາຍ, ແຕ່ການນໍາໃຊ້ອົງປະກອບເຫຼົ່ານີ້ໃນລັກສະນະນີ້ແມ່ນບໍ່ແນະນໍາໂດຍທົ່ວໄປ. ຂ້າພະເຈົ້າໄດ້ກ່າວເຖິງໃນກໍລະນີທີ່ທ່ານເຫັນມັນຢູ່ໃນບາງເວັບໄຊທ໌ຖືກນໍາໃຊ້ບໍ່ໃຫ້ສ້າງຂໍ້ຄວາມທີ່ກ້າວລ້າວຫຼືຂໍ້ອັກສອນ, ແຕ່ສ້າງ CSS hook ສໍາລັບບາງຮູບແບບອື່ນໆຂອງຮູບພາບ.
ບົດສະບັບຕົ້ນໂດຍ Jennifer Krynin. Edited by Jeremy Girard on 12/2/16