ບົດຮຽນພາສາ HTML
HTML(Hyper Text Markup Language) ພັດທະນາໂດຍທ່ານ ທີມ ເບີເນີ ລີ(Tim Berners Lee) ເປັນພາສາໃຊ້ຂຽນເອກະສານ ເພື່ອສະແດງຜົນໃນໜ້າຈໍຄອມພິວເຕີຜ່ານໂປຣແກຣມປະເພດ Web Browser, ພາສາ HTML ເປັນພາສາຄຳສັ່ງຊະນິດຄວບຄຸມການສະແດງຂໍ້ມູນແບບກຣາບຟິກ ແລະມີນາມສະກຸນເປັນ *.html
ໃນປະຈຸບັນເຮົາຈະເຫັນວ່າ ມີເຄື່ອງມືຈຳນວນຫຼວງຫຼາຍໃຫ້ເລືອກໃຊ້ເພື່ອສ້າງ ເວັບເພຈ ໂດຍບໍ່ຈຳເປັນຕ້ອງມີຄວາມຮູ້ກ່ຽວກັບພາສາໃດພາສາໜຶ່ງກໍ່ສາມາດສ້າງເວັບເພຈໄດ້ ແນວໃດກໍ່ຕາມ ເຄື່ອງມືສຳເລັດຮູບຕ່າງໆນັ້ນ ຈະສາມາດເຮັດໄດ້ເທົ່າທີ່ໂປຣແກຣມມີໄວ້ໃຫ້ເທົ່ານັ້ນ ແຕ່ຖ້າເຮົາຕ້ອງການປັບປຸງ ຫຼືປ່ຽນແປງລັກສະນະຕ່າງໆນອກເໜືອຈາກທີ່ໂປຣແກຣມມີນັ້ນເຮົາກໍ່ບໍ່ສາມາດເຮັດໄດ້ຖ້າບໍ່ຮູ້ພາສາທີ່ໃຊ້ຂຽນເວັບເພຈ ຫຼືເຮັດໄດ້ກໍ່ຄົງລຳບາກສົມຄວນ.
ພາຍໃນໂຄງສ້າງຂອງເອກະສານ HTML ຈະບໍ່ມີໃດໆມາກຳນົດຍ້ອນວ່າ ໂປຣແກຣມປະເພດ ເວັບບຣາວເຊີຈະເຫັນອົງປະກອບທຸກຢ່າງໃນໂປຣແກຣມພາສາ HTML ທີ່ຂຽນຂຶ້ນເປັນເນື້ອຫາທັງໝົດ ຍົກເວັ້ນໃນສ່ວນຫົວຈະມີການກຳນົດພິເສດ.
ບົດທີ 1 ພື້ນຖານກ່ຽວກັບອິນເຕີເນັດ
ອິນເຕີເນັດ(Internet) ຫຍໍ້ມາຈາກຄຳວ່າ Inter Connection Network ໝາຍເຖິງເຄືອຂ່າຍຄອມພິວເຕີທີ່ມີການເຊື່ອມໂຍງກັນທົ່ວໂລກ ໂດຍມີລັກສະນະຄືກັບໃຍແມງມຸມ
ການເຮັດວຽກຂອງລະບົບເຄືອຂ່າຍອິນເຕີເນັດຈະມີ ໂປຣໂຕຄອລ(Protocol) ເຊິ່ງເປັນລະບຽບ ຫຼືວິທີການສື່ສານທີ່ເປັນ
ມາດຕະຖານຂອງການເຊື່ອມຕໍ່, ມາດຕະຖານດັ່ງກ່າວເອີ້ນວ່າ TCT/IP (Transmission Control Protocol/
Internet Protocol) ໂດຍຄອມພິວເຕີທຸກໜ່ວຍທີ່ເຊື່ອມຕໍ່ເຂົ້າກັບເຄືອຂ່າຍອິນເຕີເນັດ ຈະຕ້ອງມີໝາຍເລກປະຈຳຕົວ
ຫຼື IP address ເພື່ອໃຊ້ອ້າງອີງ ຫຼືຕິດຕໍ່ກັບຄອມພິວເຕີໜ່ວຍອື່ນໃນເຄືອຂ່າຍ.
1.1 ບັນດາຄຳສັບທີ່ກ່ຽວກັບອິນເຕີເນັດ
- ເວັບເພຈ( webpage ): ແມ່ນເອກະສານທີ່ໃຊ້ໃນການນຳສະເໜີ ຫລື ເຜີຍແພ່ຂໍ້ມູນ ທີ່ປະກອບດ້ວຍຂໍ້ມູນແບບສື່ປະສົມ ເຊັ່ນ: ຂໍ້ຄວາມ,ຮູບພາບ,ພາບເຄື່ອນໄຫວ,ສຽງ ແລະ ວີດີໂອ ເປັນຕົ້ນ ໂດຍການນຳສະເໜີຜ່ານເຄືອລະບົບເຄືອຂ່າຍອິນເຕີເນັດ ເຊິ່ງແຕກຕ່າງກັນໄປຕາມຈຸດປະສົງຂອງແຕ່ລະເວັບໄຊ.
- ເວັບໄຊ( website ): ການບ່ອນລວມບັນດາໜ້າເວັບເພຈທຸກໆໜ້າໄວ້ດ້ວຍກັນ ໃນນັ້ນມີ 1 ໜ້າຖືກກຳນົດໃຫ້ເປັນ ໜ້າຫລັກ ຫລື ໜ້າທຳອິດ ຫລື ໂຮມເພຈ ປົກກະຕິຈະຕັ້ງຊື່ເປັນ index .
- ເວັບຮັອສຕິງ( Web hosting ): ແມ່ນການບໍລິການເນື້ອທີ່ຄວາມຈຳຂອງຄອມພິວເຕີທີ່ເປັນ web server
ເພື່ອເກັບຮັກສາຂໍ້ມູນເວັບໄຊ ໂດຍທົ່ວໄປຜູ້ນຳໃຊ້ຈະສາມາດຂໍເຊົ່ານຳຜູ້ໃຫ້ບໍລິການ web hosting.
- ສູນໃຫ້ບໍລິການອິນເຕີເນັດ(ISP : Internet Service Provider) : ແມ່ນໜ່ວຍງານທີ່ບໍລິການໃຫ້ຄອມພິວເຕີສ່ວນບຸກຄົນ ຫລື ເຄືອຂ່າຍຄອມພິວເຕີຂອງອົງກອນ ເຊື່ອມຕໍ່ເຂົ້າກັບລະບົບເຄືອຂ່າຍອິນເຕີເນັດ ເພື່ອໃຫ້ສາມາດໃຊ້ອິນເຕີເນັດໄດ້.
- ຊື່ໂດເມນ( Domain name ): ແມ່ນຊື່ຂອງເວັບໄຊ ເຊິ່ງຊື່ເວັບໄຊຄືສິ່ງທີ່ສະແດງ ຫລື ປະກາດຄວາມມີຕົວຕົນໃນອິນເຕີເນັດ ເຮັດໃຫ້ຄົນທົ່ວໄປໄດ້ຮູ້ຈັກ ໂດຍຊື່ຂອງເວັບໄຊຈະບໍ່ຊ້ຳກັນ ເຊັ່ນ www.moe.gov.la ເປັນຕົ້ນ.
- ເວັບເຊີບເວີ( Web server ): ແມ່ນຄອມພິວເຕີທີ່ມີການຕິດຕັ້ງໂປຣແກຣມກ່ຽວກັບການໃຫ້ບໍລິການ ເຮັດໜ້າ
ໜ້າທີ່ບໍລິການ ແລະສົ່ງຂໍ້ມູນໃຫ້ຜູ້ນຳໃຊ້ທີ່ຮ້ອງຂໍມາ ໂດຍສ່ວນຫຼາຍໂປຣແກຣມທີ່ມັກໃຊ້ເຊັ່ນ: IIS(Internet
Information Service),Apache ຫຼືອື່ນໆ.
- ເວັບບຣາວເຊີ( Web browser ): ແມ່ນໂປຣແກຣມສຳລັບເປີດເບິ່ງຂໍ້ມູນໃນຮູບແບບເວັບເພຈ ຫລື ເອກະສານ HTML ຫລື ເວັບເພຈທີ່ສ້າງຈາກພາສາອື່ນໆ.
- ດາວໂຫລດ( download ): ແມ່ນການສຳເນົາເອົາຂໍ້ມູນຈາກ web server ມາໄວ້ໃນຄອມພິວເຕີຂອງຜູ້ໃຊ້.
- ອັບໂຫລດ( Upload ): ແມ່ນການສົ່ງໂອນຍ້າຍຂໍ້ມູນຈາກຄອມພິວເຕີຜູ້ໃຊ້ໄປໄວ້ໃນ web server.
- ການເຊື່ອມໂຍງ( link ): ແມ່ນການເຊື່ອມໂຍງລະຫວ່າງເວັບເພຈພາຍໃນເວັບໄຊ,ນອກເວັບໄຊ,ເອກະສານ ຕ່າງໆ
ບົດທີ 2 ພື້ນຖານກ່ອນການຂຽນພາສາ HTML
HTML(Hyper Text Markup Language) ພັດທະນາໂດຍທ່ານ ທີມ ເບີເນີ ລີ(Tim Berners Lee) ເປັນພາສາໃຊ້ຂຽນເອກະສານ ເພື່ອສະແດງຜົນໃນໜ້າຈໍຄອມພິວເຕີຜ່ານໂປຣແກຣມປະເພດ Web Browser, ພາສາ HTML ເປັນພາສາຄຳສັ່ງຊະນິດຄວບຄຸມການສະແດງຂໍ້ ມູນແບບກຣາບຟິກ ແລະມີນາມສະກຸນເປັນ *.html
ໃນປະຈຸບັນເຮົາຈະເຫັນວ່າ ມີເຄື່ອງມືຈຳນວນຫຼວງຫຼາຍໃຫ້ເລືອກໃຊ້ເພື່ອສ້າງ ເວັບເພຈ ໂດຍບໍ່ຈຳເປັນຕ້ອງມີຄວາມຮູ້ກ່ຽວກັບພາສາໃດພາສາໜຶ່ງກໍ່ສາມາດສ້າງເວັບເພຈໄດ້ ແນວໃດກໍ່ຕາມ ເຄື່ອງມືສຳເລັດຮູບຕ່າງໆນັ້ນ ຈະສາມາດເຮັດໄດ້ເທົ່າທີ່ໂປຣແກຣມມີໄວ້ໃຫ້ເທົ່ານັ້ນ ແຕ່ຖ້າເຮົາຕ້ອງການປັບປຸງ ຫຼືປ່ຽນແປງລັກສະນະຕ່າງໆນອກເໜືອຈາກທີ່ໂປຣແກຣມມີນັ້ນ ເຮົາກໍ່ບໍ່ສາມາດເຮັດໄດ້ຖ້າບໍ່ຮູ້ພາສາທີ່ໃຊ້ຂຽນເວັບເພຈ ຫຼືເຮັດໄດ້ກໍ່ຄົງລຳບາກສົມຄວນ.
ພາຍໃນໂຄງສ້າງຂອງເອກະສານ HTML ຈະບໍ່ມີໃດໆມາກຳນົດຍ້ອນວ່າ ໂປຣແກຣມປະເພດ ເວັບບຣາວເຊີຈະເຫັນອົງປະກອບທຸກຢ່າງໃນໂປຣແກຣມພາສາ HTML ທີ່ຂຽນຂຶ້ນເປັນເນື້ອຫາທັງໝົດ ຍົກເວັ້ນໃນສ່ວນຫົວຈະມີການກຳນົດພິເສດ.
1. ເວັບໄຊ (Web Site).
ໝາຍເຖິງ ເວັບເພຈ ຫຼາຍໆໜ້າທີ່ມີການເຊື່ອມໂຍງຫາກັນ ສ່ວນຫຼາຍເວັບໄຊມັກຈະສ້າງຂຶ້ນເພື່ອນຳສະເໜີຂໍ້ມູນຜ່ານຄອມພິວເຕີ ໂດຍຖືກກັບຮັກສາໄວ້ໃນເຄືອຂ່າຍອິນເຕີເນັດ,ເວັບໄຊທົ່ວໄປຈະໃຫ້ບໍລິການຟຣີຕໍ່ຜູ້ໃຊ້ ແຕ່ບາງເວັບໄຊກໍ່ຈຳເປັນຕ້ອງມີການສະໝັກສະມາຊິກ ແລະເສຍຄ່າໃຊ້ຈ່າຍຈຳນວນໜຶ່ງເພື່ອຂໍເບິ່ງຂໍ້ມູນ. ການສ້າງເວັບໄຊມີຫຼາຍລະດັບຕັ້ງແຕ່ເວັບໄຊສ່ວນຕົວ ຈົນເຖິງລະດັບເວັບໄຊສຳລັບທຸລະກິດ ຫຼືອົງການຕ່າງໆ ການຂໍ້ເບິ່ງຂໍ້ມູນເວັບໄຊຈະໃຊ້ໂປຣແກຣມປະເພດ ເວັບບຣາວເຊີ.
2. ເວັບບຣາວເຊີ (Web Browser).
ເປັນໂປຣແກຣມຄອມພິວເຕີທີ່ໃຊ້ເປີດເບິ່ງເວັບໄຊ ເພື່ອເບິ່ງຂໍ້ມູນ ແລະສາມາດໂຕ້ຕອບກັບຂໍ້ມູນຂ່າວສານໃນໜ້າເວັບທີ່ສ້າງດ້ວຍພາສາສະເພາະທີ່ມີການເກັບຮັກສາໄວ້ໃນລະບົບບໍລິການເວັບ ຫຼືເວັບເຊິບເວີ(Web Server) ຫຼືລະບົບຄັງຂໍ້ມູນອື່ນໆ ໂດຍໂປຣແກຣມ ເວັບບຣາວເຊີ ຈະເປັນຄືກັບສື່ໃນການຕິດຕໍ່ກັບເຄືອຂ່າຍອິນເຕີເນັດ ຕົວຢ່າງໂປຣແກຣມປະເພດ ເວັບບຣາວເຊີ ໄດ້ແກ່:
1) ອິນເຕີເນັດເອັກສໂປຣເລີ(Internet Explorer) ໂດຍບໍລິສັດ ໄມໂຄຣຊອບ(Microsoft).
2) ມໍຊິລາ ໄຟຟັອກ(Mozilla Firefox) ໂດຍ ມູນລະນິທິ ມໍຊິລາ.
3) ເນັດສເຄັບ ນາວີເກເຕີ(Netscape Navigator) ໂດຍບໍລິສັດ ນາວີເກເຕີ.
4) ຊາຟາຣິ(Safari) ໂດຍບໍລິສັດ ແອັບເປິ້ນ ຄອມພິວເຕີ.
5) ໂອເປຣາ(Opera) ໂດຍບໍລິສັດ ໂອເປຣາ.
3. ການສະແດງຜົນໃນໂປຣແກຣມ ເວັບບຣາວເຊີ.
ເອກະສານພາສາ HTML ເປັນຂໍ້ຄວາມ(Text) ທຳມະດາທີ່ມີນາມສະກຸນ .html ເວລາເຮົາຂຽນຄຳສັ່ງຕ່າງໆໃນໂປຣແກຣມ Notepad ແລ້ວບັນທຶກໃຫ້ເປັນນາມສະກຸນດັ່ງກ່າວ ຖ້າບໍ່ດັ່ງນັ້ນຈະບໍ່ສາມາດສະແດງຜົນໄດ້.
4. URL(Uniform Resource Locator).
ເປັນລະບົບມາດຕະຖານທີ່ໃຊ້ກຳນົດຕຳແໜ່ງບ່ອນຢູ່ຂອງເວັບເພຈແຕ່ລະໜ້າ ເຊິ່ງຈະຢູ່ໃນຮູບແບບເຊັ່ນ: http://www.vihatec.edu.la
http(Hyper Text Transfer Protocol) ເປັນການກຳນົດລັກສະນະການສື່ສານລະວ່າງໂປຣແກຣມ ເວັບບຣາວເຊີ ແລະ ເວັບເຊິບເວີ.
www(World Wide Web) ໝາຍເຖິງ ບ່ອນທີ່ເກັບຮັກສາຂໍ້ມູນຂ່າວສານທີ່ເຊື່ອມໂຍງກັນໃນອິນເຕີເນັດ.
Vihatec.edu.la ໝາຍເຖິງ ຊື່ໂດເມນ ທີ່ໃຊ້ແທນໝາຍເລກທີ່ຢູ່ໃນເຄືອຂ່າຍອິນເຕີເນັດ.
.edu.la ສຳລັບອົງການດ້ານການສຶກສາທີ່ຈົດຖຸບຽນໃນປະເທດລາວ.
.com ຫຍໍ້ມາຈາກ commercial ໝາຍເຖິງ ການຄ້າ,ບໍລິສັດ,ອົງກອນ.
.net ຫຍໍ້ມາຈາກ network ສຳລັບອົງກອນທີ່ກ່ຽວຂ້ອງກັບລະບົບເຄືອຂ່າຍຄອມພິວເຕີ.
.org ຫຍໍ້ມາຈາກ organization ສຳລັບອົງກອນທີ່ບໍ່ຫວັງຜົນກຳໄລ.
.gov ສຳລັບອົງການລັດຖະບານ.
.com.laອົງກອນທາງທຸລະກິດທີ່ຂຶ້ນຖະບຽນໃນປະເທດລາວ.
5. ສິ່ງທີ່ຕ້ອງກະກຽມເມື່ອຕ້ອງການຂຽນເວັບໄຊ.
ກ່ອນຈະລົງມືຂຽນໂປຣແກຣມພາສາ HTML ເພື່ອສ້າງເວັບເພຈໄດ້ນັ້ນຕ້ອງກວດກາຄວາມ ພ້ອມດ້ານອຸປະກອນ,ເຄື່ອງມືສຳລັບການສ້າງວ່າມີຄົບຫຼືບໍ່ ເຊັ່ນ:
- ຄອມພິວເຕີ CPU 486 ຫຼື Pentium ຂຶ້ນໄປ.
- ໜ່ວຍຄວາມຈຳຫຼັກຫຼາຍກວ່າ 8 MB.ເນື້ອທີ່ຂອງ Harddisk ຫຼາຍກວ່າ 20 MB.
- ໂປຣແກຣມປະເພດ ເວັບບຣາວເຊີ.
- ໂປຣແກຣມ Notepad,EditPus,Microsoft Office FrontPage,Macromedia Dreamweaver,ອື່ນໆທີ່ກ່ຽວຂ້ອງ ແລະເໝາະສົມ.
ບົດທີ 3 ເລີ່ມຕົ້ນຄຳສັ່ງພາສາ HTML
1. ແທັກ(Tag)
ແທັກແມ່ນລັກສະນະສະເພາະຂອງພາສາ HTML ທີ່ໃຊ້ໃນການກຳນົດຮູບແບບຄຳສັ່ງ ຫຼືລະຫັດຄຳສັ່ງ ໂດຍລະຄຳສັ່ງຈະຖືກກຳນົດໄວ້ພາຍໃນເຄື່ອງໝາຍນ້ອຍກວ່າ( < ) ແລະເຄື່ອງໝາຍໃຫຍ່ກວ່າ(> ) ເຊິ່ງແທັກຄຳສັ່ງພາສາ HTML ແບ່ງອອກເປັນ 2 ລັກສະນະຄື:
- ແທັກດ່ຽວ: ເປັນແທັກທີ່ບໍ່ມີແທັກປິດ ເຊັ່ນ: <br /> , <hr /> .
- ແທັກຄູ່: ແທັກຄຳສັ່ງໜຶ່ງຈະປະກອບດ້ວຍແທັກເປີດ ແລະເທັກປິດ ໂດຍພາຍໃນແທັກປິດຈະມີເຄື່ອງໝາຍ/ ນຳໜ້າຄຳສັ່ງ ເຊັ່ນ:<b> ຂໍ້ຄວາມ </b>
ຄຸນລັກສະນະ(Attributes).
ເປັນສ່ວນທີ່ໃຊ້ຂະຫຍາຍຄວາມສາມາດຂອງແທັກຄຳສັ່ງ ເຊິ່ງຈະຕ້ອງໃສ່ໄວ້ພາຍໃນເຄື່ອງໝາຍໃຫຍ່ກວ່າ ແລະນ້ອຍກວ່າ ແລະໃນສ່ວນແທັກເປີດເທົ່ານັ້ນ, ໂດຍແຕ່ລະແທັກຄຳສັ່ງຈະມີຄຸນລັກສະນະແຕກຕ່າງກັນໄປ ແລະມີຈຳນວນບໍ່ເທົ່າກັນ ເຊັ່ນ: ຄຸນລັກສະນະຂອງແທັກ <p>ມີດັ່ງນີ້:
<p align="left">ຂໍ້ຄວາມໃດໆກໍ່ໄດ້</p>
<p align="center">ຂໍ້ຄວາມໃດໆກໍ່ໄດ້</p>
<p align="right">ຂໍ້ຄວາມໃດໆກໍ່ໄດ້</p>
<p align="justify">ຂໍ້ຄວາມໃດໆກໍ່ໄດ້</p>
3. ໂຄງສ້າງຂອງພາສາ HTML.
- ແທັກຄຳສັ່ງ ແມ່ນແທັກເປີດ ເຊິ່ງເປັນຄຳສັ່ງກຳນົດຈຸດເລີ່ມຕົ້ນໃນການຂຽນໂປຣແກຣມ ແລະຄຳສັ່ງ ແມ່ນແທັກປິດ ເຊິ່ງເປັນແທັກກຳນົດຈຸດສິ້ນສຸດການຂຽນໂປຣແກຣມ.
- ແທັກຄຳສັ່ງ …. ແມ່ນແທັກເປີດ ເຊິ່ງເປັນຄຳສັ່ງສຳລັບໃສ່ຂໍ້ຄວາມທີ່ເປັນຊື່ເນື້ອໃນຂໍ້ມູນໃນໜ້າເວັບເພຈນັ້ນ ແລະມີແທັກຍ່ອຍອີກຄຳສັ່ງໜຶ່ງຄື: …. .
- ແທັກຄຳສັ່ງ …. ເປັນແທັກຄຳສັ່ງທີ່ໃຊ້ສະແດງຊື່ ຫຼື ຂໍ້ຄວາມທີ່ອະທິບບາຍເນື້ອຫາໃນໜ້າເວັບເພຈນັ້ນ ແລະຂໍ້ຄວາມທີ່ກຳນົດພາຍໃນແທັກຄຳສັ່ງນີ້ຈະສະແດງໃນ Title Bar ຂອງໂປຣແກຣມ ເວັບບຣາວເຊີ.
- ແທັກຄຳສັ່ງ …. ເປັນສ່ວນທີ່ສຳຄັນໃນການສະແດງຜົນໃນໜ້າຈໍຄວາມ ຫຼືໃນໂປຣແກຣມເວັບບຣາວເຊີ ເຊິ່ງພາຍໃນຈະປະກອບດ້ວຍຫຼາຍແທັກຄຳສັ່ງ ເຊັ່ນ: ກ່ຽວກັບຕົວອັກສອນ,ຮູບພາບ,ຕາຕະລາງ,ວິດີໂອ ແລະ ອື່ນໆ.
ບົດທີ 4 ຂັ້ນຕອນການສ້າງເອກະສານ HTML
- ຂັ້ນຕອນທີ1: ເປີດໂປຣແກຣມ Notepad.
ກົດປຸ່ມ Start > All Programs > Accessories > Notepad ແລ້ວພິມຄຳສັ່ງຕ່າງໆ.
- ຂັ້ນຕອນທີ2: ບັນທຶກເອກະສານ HTML ທີ່ຂຽນ.
1) ເລືອກເມນູ File > Save As.
2) ຈະປະກົດໜ້າຈໍສຳລັບກຳນົດລັກສະນະ ແລະຮູບແບບການບັນທຶກຂຶ້ນມາ.ໃນຫ້ອງ File name ແມ່ນໃຫ້ຕັ້ງຊື່ເອກະສານ ໂດຍຈະຕ້ອງກຳນົດນາມສະກຸນເປັນ .html ຕໍ່ທ້າຍ ໂດຍບໍ່ຕ້ອງມີກາຍຍະວ່າງ.
3) ໃນຫ້ອງ Save as type ໃຫ້ເລືອກເປັນ All files (*.*)
4) ກົດປຸ່ມ Save
- ຂັ້ນຕອນທີ3: ສະແດງຜົນຮັບຜ່ານໂປຣແກຣມເວັບບຣາວເຊີ.
1) ເປີດໂປຣແກຣມ Internet Explorer
ກົດປຸ່ມ Start > All Programs > Internet Explorer
2) ເລືອກເມນູ File>Open.
3) ກົດປຸ່ມ Browse.. ແລ້ວເລືອກເອກະສານ HTML ທີ່ບັນທຶກໄວ້.
4) ກົດປຸ່ມ Open
5) ກົດປຸ່ມ OK
ຜົນໄດ້ຮັບ
ບົດທີ 5 ຄຳສັ່ງທີ່ໃຊ້ໃນການຈັດເອກະສານ
1. ຄຳສັ່ງລົງແຖວ.
ຂໍ້ຄວາມທີ່ພິມໃນເອກະສານ HTML ນັ້ນຈະມີລັກສະນະຕໍ່ກັນໄປເປັນແຖວດຽວ ແລະຈະລົງແຖວກໍ່ເມືອສຸດຂອບໜ້າຈໍຄອມດັ່ງນັ້ນຖ້າຕ້ອງການລົງແຖວໃໝ່ເຮົາຈະຕ້ອງກຳນົດເອງດ້ວຍການໃຊ້ແທັກຄຳສັ່ງ<br /> (break line) ຄຳສັ່ງນີ້ຈະໃຫ້ຜົນຮັບຄືກັບການກົດປຸ່ມ Enter ໃນແປ້ນພິມ
ຕົວຢ່າງ:
basic HTML
1. ການລົງແຖວໃໝ່ <br /> ຂໍ້ຄວາມທີ່ພິມໃນເອກະສານ HTML ນັ້ນຈະມີລັກສະນະຕໍ່ກັນໄປ ເປັນແຖວດຽວ ແລະຈະລົງແຖວກໍ່ເມືອສຸດຂອບໜ້າຈໍຄອມ
2. ການຈັດຕຳແໜ່ງຂໍ້ມູນໃຫ້ຢູ່ເຄິ່ງກາງໜ້າເວັບເພຈ.
ແມ່ນໃຊ້ແທັກຄຳສັ່ງ <center> ..... </center>
ຕົວຢ່າງ: <center> ຂໍ້ຄວາມນີ້ຈະຢູ່ເຄິ່ງກາງໜ້າເວັບເພຈ</center>
3. ການຈັດພາຣາກຣາບ(paragraph).
ພາຣາກຣາບ ຈະເປັນສ່ວນທີ່ເຫັນກັນທົ່ວໄປໃນໜັງສື ຫຼືວາລະສານຕ່າງໆ ເປັນສ່ວນທີ່ຊ່ວຍໃຫ້ການແບ່ງເນື້ອຫານັ້ນໃຫ້ເປັນສັດສ່ວນ ແລະເບິ່ງງ່າຍຂຶ້ນ ການຈັດຂໍ້ຄວາມໃຫ້ເປັນພາຣາກຣາບຈະໃຊ້ແທັກຄຳສັ່ງ <p> ເຊິ່ງມີຮູບແບບການຈັດດັ່ງນີ້:
ຮູບແບບ
ຄຳອະທິບາຍ
Left ຕິດຂອບເບື້ອງຊ້າຍ
Center ຢູ່ເຄິ່ງກາງ
Right ຕິດຂອບເບື້ອງຂວາ
ຮູບແບບ: <p align="right">ຂໍ້ຄວາມທີ່ຈັດຢູ່ໃນພາຣາກຣາບ</p>
ຕົວຢ່າງ:
ການຈັດພາຣາກຣາບ
<p align=left> ຂໍ້ຄວາມທີ່ຢູ່ຕິດດ້ານຊ້າຍ </p>
<p align=center> ຂໍ້ຄວາມທີ່ຢູ່ເຄິ່ງກາງ </p>
<p align=right> ຂໍ້ຄວາມທີ່ຢູ່ເບື້ອງຂວາ </p>
4. ການຈັດຮູບແບບເອກະສານຕາມທີ່ກຳນົດ.
ເປັນການກຳນົດຕຳແໜ່ງການະແດງຜົນຕາມຮູບແບບທີ່ເຮົາພິມໃນໂປຣແກຣມ Notepad ເຊິ່ງເຮົາສາມາດເຮັດໄດ້ຕາມທີ່ເຮົາຕ້ອງການ ໂດຍຈະໃຊ້ແທັກຄຳສັ່ງ<pre> …. </pre>
ຕົວຢ່າງ:
<pre>
ລາຍຮັບ:
ຂາຍເຄື່ອງ 20000 ກີບ
ດອກເບ້ບ 30000 ກີບ
ລາຍຈ່າຍ:
ຄ່ານໍ້າ 5000 ກີບ
ຄ່າໄຟ 2000 ກີບ
ລວມ 7000 ກີບ
</pre>
5. ການໃສ່ເສັ້ນຂັ້ນໃນເອກະສານຕາມລວງນອນ(horizontal rule).
<hr /> ເປັນຄຳສັ່ງສະແດງເສັ້ນຂັ້ນຕາມລວງນອນ ໂດຍຈະໃຊ້ເປັນເສັ້ນແບ່ງເນື້ອຫາລະຫວ່າງບົດ ຫຼືເປັນເສັ້ນຂັ້ນເພື່ອຄວາມສວຍງາມ ແລະເປັນລະບົບລະບຽບຂອງເນື້ອຫາ ເຊິ່ງເປັນຄຳສັ່ງບໍ່ຕ້ອງມີຄຳສັ່ງປິດ ນອກຈາກນັ້ນຍັງສາມາດກຳນົດຄຸນລັກສະນະໄດ້ອີກດ້ວຍ ເຊິ່ງມີຮູບແບບດັ່ງລຸ່ມນີ້:
<hr color="ຊື່ສີ ຫຼືລະຫັດສີ" width="ຄວາມກວ້າງ" align="ຊ້າຍ,ຂວາ,ເຄິ່ງກາງ" noshade />
size ຂະໜາດຂອງເສັ້ນຂັ້ນ
align ຕຳແໜ່ງສະແດງເສັ້ນຂັ້ນ ເຊັ່ນ: ຊ້າຍ,ຂວາ,ເຄິ່ງກາງ
color ສີເສັ້ນຂັ້ນ
width ຄວາມກວ້າງຂອງເສັ້ນຂັ້ນ
noshade ກຳນົດໃຫ້ເສັ້ນຂັ້ນເປັນເສັ້ນໜ້າ ຫຼືເຂັ້ມກວ່າປົກກະຕິ
ຕົວຢ່າງ:
ການຈັດພາຣາກຣາບ ຍິນດີຕ້ອນຮັບ
<hr color="red" width="500" hieght="1" align="center" noshade />
ບົດຮຽນທີ 3 ການຈັດການກັບຂໍ້ຄວາມ
6. ການໃສ່ໝາຍເຫດ(comment)ໃນເອກະສານ.
ການໃສ່ໝາຍເຫດໃນເອກະສານ html ແມ່ນຕ້ອງການໃສ່ຂໍ້ຄວາມ ຫຼືຂໍ້ມູນໄວ້ໃນເອກະສານແຕ່ບໍ່ຕ້ອງການໃຫ້ສະແດງທາງໜ້າຈໍ ເຊິ່ງມີຮູບແບບຄຳສັ່ງດັ່ງນີ້:
<! ຂໍ້ຄວາມທີ່ເປັນໝາຍເຫດ >
7. ການຍະຫວ່າງໃນເອກະສານ.
ການພິມຂໍ້ມູນໃນເອກະສານ HTML ຈະມີການຍະວ່າງຫຼາຍປານໃດກໍ່ຕາມ ເວລານຳໄປສະແດງໃນໜ້າຈໍບຣາວເຊີ ກໍ່ຈະສະແດງຄືວ່າຍະວ່າງພຽງ 1 ຕົວອັກສອນເທົ່ານັ້ນ ດັ່ງນັ້ນຖ້າເຮົາຕ້ອງການຍະວ່າງຫຼາຍໆ ໃນພາສາ HTML ຈະມີຄຳສັ່ງໄວ້ໃຫ້ ຄື: ຄຳສັ່ງນີ້ຈະເທົ່າກັບການເຄາະຍະວ່າງ 1 ບາດ ໃນແປ້ນພິມ.
ຕົວຢ່າງ:
ການຈັດພາຣາກຣາບ ຍິນດີຕ້ອນຮັບ
<! ຂໍ້ຄວາມທີ່ເປັນນີ້ ຄືໝາຍເຫດ>
<hr color="red" width="500" hieght="1" align="center" noshade />
ບົດຮຽນທີ 3 ການຈັດການກັບຂໍ້ຄວາມ
</!>
ບົດທີ 6 ການກຳນົດລັກສະນະຕົວອັກສອນ
1. ຮູບແບບການກຳນົດັກສະນະຕົວອັກສອນ.
ຄຳສັ່ງ
ຄຳອະທິບາຍ
<b> ….. </b> ຕົວໜາ
<i> …… </i> ຕົວເນື້ງ
<u> …. </u> ຂີດກ້ອງຕົວໜັງສື
<tt> …. </tt> ຕົວອັກສອນພິມດິດ
<s> ….. </s> ຕົວອັກສອນຂີດຂ້າ
<sup> ….. </sup> ຕົວອັກສອນຂຶ້ນກຳລັງ
<sub> ….. </sub> ຕົວອັກສອນຫ້ອຍ
ຕົວຢ່າງ:
ກຳນົດລັກສະນະຕົວອັກສອນ
<b>ຕົວອັກສອນເຂັ້ມ</b><br />
<i>ຕົວເນີ້ງ</i><br />
<u>ຕົວອັກສອນຂີດກ້ອງ</u><br />
<tt>ຕົວພິມດີ</tt><br />
<s>ຕົວອັກສອນຂີດຂ້າ</s><br />
<sup>ຂຶ້ນກຳລັງ</sup><br />
<sub>ຕົວຫ້ອຍ</sub><br />
2. ກຳນົດຮູບແບບຕົວອັກສອນ.
ເຮົາສາມາດກຳນົດຮູບແບບຕົວອັກສອນໄດ້ດ້ວຍຄຸນສົມບັດຊື່ວ່າ face ແລ້ວກຳນົດຄ່າໃຫ້ເທົ່າກັບຮູບແບບຕົວອັກສອນທີ່ເຮົາຕ້ອງການ ເອກະສານໃນເວັບອະນຸຍາດໃຫ້ກຳນົດແບບຕົວອັກ ສອນໄດ້ຫຼາຍແບບ ໂດຍບຣາວເຊີຈະມີການກວດສອບໃຫ້ອັດຕະໂນມັດ.
§ ຮູບແບບຕົວອັກສອນພາສາລາວທີ່ເໝາະສົມໄດ້ແກ່: saysettha OT
§ ຮູບແບບຕົວອັກສອນພາສາອັງກິດທີ່ເໝາະສົມຄື: Arial,Helvetica,..
ຮູບແບບຄຳສັ່ງ: <font face="ຮູບແບບອັກສອນ">welcome to my site</font>
ຕົວຢ່າງ:
ການກຳນົດຮູບແບບອັກສອນ
<center>ການກຳນົດແບບຕົວອັກສອນ</center>
<font face="Arial">Arial Font</font><br />
<font face="saysettha OT"> ຕົວອັກສອນພາສາລາວໃນແບບsaysetthaOT</font><br />
3. ການກຳນົດຕົວອັກສອນເປັນຫົວຂໍ້ເລື່ອງ(Heading).
ມີຮູບແບບຄຳສັ່ງ: <hn> ຂໍ້ຄວາມ </hn>
ຂໍ້ຄວາມລັກສະນະຫົວເລື່ອງຈະຄວບຄຸມດ້ວຍແທັກ <hn>ໂດຍ
n ແມ່ນຕົວເລກສະແດງຂະໜາດຂອງຕົວອັກສອນ ເຊິ່ງຄ່າຂອງ n ຈະມີຄ່າແຕ່ 1 – 6
ຕົວຢ່າງ:
<h1> ຕົວອັກສອນຫົວເລື່ອງມີຂະໜາດ-H1</h1>
<h2>ຕົວອັກສອນຫົວເລື່ອງມີຂະໜາດ-H2</h2>
<h3>ຕົວອັກສອນຫົວເລື່ອງມີຂະໜາດ-H3</h3>
<h4>ຕົວອັກສອນຫົວເລື່ອງມີຂະໜາດ-H4</h4>
<h5>ຕົວອັກສອນຫົວເລື່ອງມີຂະໜາດ-H5</h5>
<h6>ຕົວອັກສອນຫົວເລື່ອງມີຂະໜາດ-H6</h6>
4. ການກຳນົດຂະໜາດຕົວອັກສອນ.
ຖ້າເຮົາຕ້ອງການກຳນົດຂະໜາດຕົວອັກສອນ ກໍ່ຈະມີ 7 ຂະໜາດ ຄື: 1 – 7 ໂດຍລຽງຈາກນ້ອຍໄປຫາໃຫຍ່ ມີຮູບແບບການຂຽນດັ່ງນີ້:
ຮູບແບບການຂຽນ: <font size="ຂະໜາດຕົວອັກສອນທີ່ຕ້ອງການ">ຂໍ້ຄວາມ</font>
5. ການກຳນົດສີຕົວອັກສອນທັງໝົດໃນເວັບເພຈ.
ການກຳນົດສີຕົວອັກສອນທັງໝົດໃນໜ້າເວັບນີ້ຈະເຮັດໄດ້ດ້ວຍການກຳນົດຄຸນລັກສະນະ text ໄວ້ພາຍໃນ ມີຮູບແບບການຂຽນດັ່ງນີ້:
6. ການກຳນົດສີຕົວອັກສອນສະເພາະ.
ໝາຍເຖິງ ຄຳສັ່ງທີ່ເຮົາໃຊ້ໃນການປ່ຽນສີຂອງຕົວອັກສອນໃນສ່ວນທີ່ເຮົາຕ້ອງການໃຫ້ເກີດສີສັນແຕກຕ່າງຈາກຕົວອັກສອນອື່ນໆ
ຮູບແບບຄຳສັ່ງ: <font color="ຊື່ສີ ຫຼືລະຫັດສີ">ຂໍ້ຄວາມ</font>
7. ການກຳນົດສີຕົວອັກສອນທີ່ເປັນຈຸດການເຊື່ອມໂຍງ.
ແມ່ນເຮົາຈະກຳນົດໃນສ່ວນຂອງ ໂດຍເພີ່ມຄຸນລັກສະນະ link=ຊື່ສີ ຫຼືລະຫັດສີ, alink=ຊື່ສີ ຫຼືລະຫັດສີ, vlink= ຊື່ສີ ຫຼືລະຫັດສີ
ຕົວຢ່າງ:
ການກຳນົດຕົວອັກສອນເປັນຫົວເລື່ອງ
<marquee bgcolor="cyan"><font size="4">welcome</font></marquee>
<hr color="red" />
<a href="#">Home</a> | <a href="#">About us</a> |
<a href="#">Services</a> | <a href="#">Contact us</a>
<br /><br /><br />ບົດຮຽນພື້ນຖານໃນການສ້າງເວັບດ້ວຍໂປຣແກຣມພາສາ HTML
<h3>ບົດທີ 1</h3><font color="green">ພື້ນຖານ HTML</font>
<h3>ບົດທີ 1</h3><font color="purple">ຄຳສັ່ງເລີ່ມຕົ້ນ</font>
<h3>ບົດທີ 1</h3><font color="blue">ຮູບແບບຕົວໜັງສື</font>
ຕົວຢ່າງລະຫັດສີ
ໝາຍເຫດ: ການໃສ່ລະຫັດສີທຸກໆຄ່າຈະຕ້ອງຂຶ້ນຕົ້ນດ້ວຍເຄື່ອງໝາຍ #
ບົດທີ 7 ການເຮັດໃຫ້ຂໍ້ຄວາມໜ້າສົນໃຈ
1. ການກຳນົດຕົວອັກສອນກະພິບ.
ໃຊ້ແທັກຄຳສັ່ງ <blink> .......... </blink> ສຳລັບແທັກຄຳສັ່ງເຮັດໃຫ້ຕົວອັກສອນກະພິບນີ້ຈະສະແດງຜົນໄດ້ສະເພາະໂປຣແກຣມບຣາວເຊີ Netscape ເທົ່ານັ້ນ.
ຮູບແບບ: <blink> ຂໍ້ຄວາມກະພິບ </blink>
2. ການເຮັດໃຫ້ຕົວອັກສອນເລື່ອນ.
ຮູບແບບ: <marquee> …. </marquee>
ແທັກຄຳສັ່ງ <marquee> ຈະເຮັດໃຫ້ຕົວອັກສອນ ແລະຂໍ້ຄວາມເລື່ອນ ເຊິ່ງຈະເຮັດໃຫ້ໜ້າເວັບມີຄວາມໜ້າສົນໃຈ ໂດຍປົກກະຕິການເລື່ອນຈະເລື່ອນຈາກຂວາຫາຊ້າຍ ຄຳສັ່ງນີ້ຈະສະແດງຜົນໄດ້ຢ່າງຖືກຕ້ອງໃນໂປຣແກຣມ Internet Explorer ເທົ່ານັ້ນ.
ຄຸນລັກສະນະການເລື່ອນຂອງຕົວອັກສອນມີດັ່ງນີ້:
<marquee bgcolor="ຊື່ສີ" direction="ທິດທາງການເລື່ອນ" width="ຄວາມກວ້າງ" height="ຄວາມສູງ" >
ເຊິ່ງທິດທາງການເລື່ອນສາມາດກຳນົດໄດ້ຄື:
ທິດທາງ
ຄຳອະທິບາຍ
Up ເລື່ອນຈາກລຸ່ມຂຶ້ນເທິງ
Down ເລື່ອນຈາກເທິງລົງລຸ່ມ
Left ເລື່ອນຈາກຂວາຫາຊ້າຍ
Right ເລື່ອນຈາກຊ້າຍຫາຂວາ
ນອກຈາກນັ້ນຍັງສາມາດກຳນົດໃຫ້ຕົວອັກສອນ ຫຼືຂໍ້ຄວາມເລື່ອນກັບໄປກັບມາໄດ້ ດ້ວຍການເພີ່ມຄຸນລັກສະນະ behavior=alternate ໄວ້ພາຍໃນ<marquee> ເຊັ່ນ:
<marquee bgcolor="yellow" behavior="alternate" width="200" height="20"> ຂໍ້ຄວາມເລື່ອນ</marquee>
ຕົວຢ່າງ:
ການກຳນົດຕົວອັກສອນເປັນຫົວເລື່ອງ
<marquee bgcolor="yellow" behavior="alternate" width="200" height="20">ຂໍ້ຄວາມເລື່ອນ </marquee>
<hr color="red" />
<a href="#">Home</a> |
<a href="#">About us</a> |
<a href="#">Services</a> |
<a href="#">Contact us</a>
ບົດທີ 8 ການກຳນົດສີພື້ນຫຼັງ ແລະການໃສ່ຮູບໃນໜ້າເວັບ
1. ການກຳນົດພື້ນຫຼັງໜ້າເວັບ.
ການກຳນົດສີພື້ນຫຼັງຂອງເວັບເພຈ ຈະກຳນົດຄຸນສົມບັດຊື່ bgcolor ໄວ້ພາບໃນແທັກ ແລ້ວກຳນົດຄ່າໃຫ້ເທົ່າກັບ ຊື່ສີ ຫຼືລະຫັດສີ ເຊິ່ງມີຮູບແບບການຂຽນດັ່ງນີ້:
ຕົວຢ່າງ:
ການໃສ່ສີພື້ນຫຼັງໃຫ້ກັບໜ້າເວັບສີພື້ນຫຼັງໜ້າເວັບຈະເປັນສີເຫຼືອງການໃສ່ຮູບພາບເປັນພື້ນຫຼັງຂອງໜ້າເວັບເພຈ ແມ່ນຈະໃຊ້ຄຸນສົມບັດ background ໄວ້ພາຍໃນແລ້ວກຳນົດຄ່າເປັນຊື່ຫຼືທີ່ຢູ່ຮູບ ເຊິ່ງມີຮູບແບບການຂຽນດັ່ງນີ້
ຕົວຢ່າງ:
ກຳນົດຮູບພາບເປັນພື້ນຫຼັງໜ້າເວັບ
ພື້ນຫຼັງໜ້າເວັບຈະເປັນຮູບພາບ
2. ການນຳໃຊ້ຮູບພາບ.
ຮູບພາບທີ່ນຳມາໃຊ້ໃນອິນເຕີເນັດຄວນເປັນພາບທີ່ມີນາມສະກຸນ .GIF ຫຼື .JPG ເທົ່ານັ້ນ ໂດຍມີຫຼັກການພິຈາລະນາເລືອກຄື: ພາບທີ່ມີສີນ້ອຍ ຫຼືພາບທີ່ຕ້ອງການເຮັດໃຫ້ພື້ນຫຼັງໂປ່ງໃສຄວນ ບັນທຶກເປັນນາມສະກຸນ .GIF ແລະ ກຳນົດຄ່າເພີ່ມເຕີມ(Option) ເປັນ Interlaced ໝາຍຄວາມວ່າ ໃນການສະແດງພາບຈະຄ່ອຍໆຊັດເຈນຂຶ້ນມາ. ແຕ່ຖ້າຕ້ອງການພາບທີ່ມີຄວາມລະອຽດ,ຊັດເຈນຄວນເລືອກພາບທີ່ມີນາມສະກຸນ .JPG ການນຳຮູບພາບມາປະກອບໃນໜ້າເວັບມີຮູບແບບ
ການຂຽນດັ່ງນີ້:
<img src="ຊື່ຮູບທີ່ເປັນນາມສະກຸນ .GIF ຫຼື .JPG" />
ນອກຈາກນັ້ນເຮົາຍັງສາມາດກຳນົດຄຸນລັກສະນະໃຫ້ກັບຮູບພາບໄດ້ ເພື່ອໃຫ້ຮູບພາບສາ ມາດສະແດງຮ່ວມກັບຂໍ້ຄວາມ ແລະເຮັດໃຫ້ໜ້າເວັບມີຄວາມໜ້າສົນໃຈຂຶ້ນຕື່ມດ້ວຍການເພີ່ຄຸນລັກສະນະຕ່າງໆດັ່ງລຸ່ມນີ້ໄວ້ພາຍໃນ <img />.
align=top ເປັນການກຳນົດໃຫ້ຂໍ້ຄວາມສະແດງຢູ່ເທິງຮູບ.
align=middle ເປັນການກຳນົດຂໍ້ຄວາມສະແດງຢູ່ເຄິ່ງກາງຂອງຮູບ.
align=bottim ເປັນການກຳນົດຂໍ້ຄວາມສະແດງຢູ່ດ້ານລຸ່ມຂອງຮູບ.
align=left ເປັນການກຳນົດຂໍ້ຄວາມສະແດງຢູ່ເບື້ອງຊ້າຍຂອງຮູບ.
align=right ເປັນການກຳນົດຂໍ້ຄວາມສະແດງຢູ່ເບື້ອງຂວາຂອງຮູບ.
width ກຳນົດຂະໜາດຄວາມກວ້າງຂອງຮູບ ມີຄ່າເປັນຕົວເລກ.
height ກຳນົດຄວາມສູງຂອງຮູບ ມີຄ່າເປັນຕົວເລກ.
hspace ເປັນການກຳນົດໄລຍະຫ່າງລະວ່າງຂອບດ້ານຊ້າຍຂອງຮູບກັບຂໍ້ຄວາມ.
vspace ເປັນການກຳນົດໄລຍະຫ່າງລະວ່າງຂອບດ້ານເທິງຂອງຮູບກັບຂໍ້ຄວາມ.
border ເປັນການກຳນົດເສັ້ນຂອບຂອງຮູບ.
ຕົວຢ່າງ:
Test HTML 2
<marquee behavior="alternate" scrolldelay="500">ສະບາຍດີ</marquee>
<hr color="red" />
<img src="koala.jpg" width="200" border="1" align="left" hspace="10" />
align=top ເປັນການກຳນົດໃຫ້ຂໍ້ຄວາມສະແດງຢູ່ເທິງຮູບ.<br />
align=middle ເປັນການກຳນົດຂໍ້ຄວາມສະແດງຢູ່ເຄິ່ງກາງຂອງຮູບ.<br />
align=bottim ເປັນການກຳນົດຂໍ້ຄວາມສະແດງຢູ່ດ້ານລຸ່ມຂອງຮູບ.
<a>ໂດຍເພີ່ມຄຳສັ່ງ(Attribute) ທີ່ຊື່ວ່າ name ແລ້ວກຳນົດຄ່າເປັນຊື່ປາຍທາງຂອງການ
ເຊື່ອມໂຍງ
<a name="ຊື່ປາຍທາງຂອງການເຊື່ອມໂຍງ">
9.1.2 ການສ້າງຕົ້ນທາງຂອງການເຊື່ອມໂຍງ.
ແມ່ນເຮົາຈະໃຊ້ແທັກ<a>ໂດຍການເພີ່ມຄຳສັ່ງ href ແລ້ວກຳນົດຄ່າເປັນຊື່ປາຍທາງຂອງການເຊື່ອມໂຍງພ້ອມກັບ
ພິມເຄື່ອງໝາຍ # ນຳໜ້າ
<a href="#ຊື່ປາຍທາງຂອງການເຊື່ອມໂຍງ">ຂໍ້ຄວາມທີ່ເປັນຈຸດການເຊື່ອມໂຍງ</a>
ຕົວຢ່າງ:
<p>
<a href="#html">HTML ແມ່ນຫຍັງ?</a><br />
<a href="#structure">ໂຄງສ້າງຂອງພາສາ HTML ມີຄືແນວໃດ?</a><br />
<a href="#tag">Tag ຄຳສັ່ງພາສາ HTML ມີຫຍັງແດ່?</a>
</p>
<p>HTML<a name="html"></a></p>
<p>ພາສາ HTML ຫຍໍ້ມາຈາກ HyperText Markup Language ເປັນພາສາຄອມພິວເຕີອີກພາສາໜຶ່ງທີ່ມີໂຄງ
ສ້າງການຂຽນໂດຍອາໃສຕົວກຳກັບ(Tag) ເປັນຕົວຄວບຄຸມການສະແດງຜົນຂໍ້ຄວາມ,ຮູບພາບ,ອົງປະກອບອື່ນໆ
ຜ່ານໂປຣແກຣມປະເພດ ເວັບບຣາວເຊີ. ໃນແຕ່ລະ Tag ອາດຈະມີສ່ວນຂະຫຍາຍ(Attribute) ສຳລັບກຳນົດ
ຫລື ຄວບຄຸມການສະແດງຜົນຂອງເວັບໃຫ້ເປັນໄປຕາມທີ່ຜູ້ອອກແບບເວັບໄຊກຳນົດໄວ້.</p>
<p>ໂຄງສ້າງຂອງພາສາ HTML<a name="structure"></a></p>
<p>ສຳລັບຄຳສັ່ງ ຫຼື Tag ໃນພາສາ HTML ປະກອບດ້ວຍເຄື່ອງໝາຍນ້ອຍກວ່າ “< ” ຕາມດ້ວຍຄຳສັ່ງ
ແລະ ປິດທ້າຍດ້ວຍເຄື່ອງໝາຍໃຫຍ່ກວ່າ “ > ” ເປັນສ່ວນທີ່ເຮັດໜ້າທີ່ຕົບແຕ່ງຂໍ້ຄວາມເພື່ອສະແດງຜົນ,
ໂດຍທົ່ວໄປຄຳສັ່ງພາສາ HTML ຈະຢູ່ເປັນຄູ່,ມີພຽງບາງຄຳສັ່ງເທົ່ານັ້ນທີ່ມີພຽງຄຳສັ່ງດຽວ,ໃນແຕ່ລະຄູ່ຄຳສັ່ງ
ຈະມີຄຳສັ່ງເປີດ(Tag ເປີດ) ແລະ ຄຳສັ່ງປິດ(Tag ປິດ) ມີຮູບແບບເໝືອນກັນ ຕ່າງແຕ່ໃນສ່ວນຂອງ
ຄຳສັ່ງປິດຈະມີເຄື່ອງໝາຍ / ນຳໜ້າຄຳສັ່ງ ແລະ ໃນແຕ່ລະຄຳສັ່ງເປີດອາດຈະມີສ່ວນຂະຫຍາຍທີ່ຂຽນດ້ວຍ
ຄຳສັບພາສາອັງກິດຕົວພິມນ້ອຍ ຫຼື ພິມໃຫຍ່ກໍ່ໄດ້</p>
<p>ບັນດາ Tag ຄຳສັ່ງພື້ນຖານຂອງພາສາ HTML.<a name="tag"></a></p>
<p>ກຳນົດຫົວຂໍ້ເລື່ອງ(Headings).</p>
<p>Heading ເປັນການກຳນົດຫົວຂໍ້ເລື່ອງ ໂດຍໃຊ້ Tag <h1> ເຖິງ <h6> ເຊິ່ງ <h1>
ມີຂະໜາດໃຫຍ່ສຸດ <h6> ມີຂະໜາດນ້ອນສຸດ ມີຮູບແບບການຂຽນດັ່ງນີ້:<br />
<h1>This is a heading</h1><br />
ຜົນໄດ້ຮັບ
ບົດທີ 9 ການເຊື່ອມໂຍງເວັບເພຈ(ຕໍ່)
9.2 ການເຊື່ອມໂຍງໄປຍັງເວັບເພຈອື່ນ ຫຼືເວັບໄຊອື່ນ.
ເຮົາຈະໃຊ້ແທັກຄຳສັ່ງ<a>ແລ້ວເພີ່ມຄຳສັ່ງ href ໄວ້ພາຍໃນ,ຈາກນັ້ນກຳນົດຄ່າ href ໃຫ້ເທົ່າກັບຊື່ ແລະບ່ອນຢູ່
ຂອງເວັບເພຈ ຫຼືເວັບໄຊນັ້ນໆ ສັງເກດຮູບແບບການຂຽນດັ່ງລຸ່ມນີ້:
<a href="ຊື່ ຫຼືບ່ອນຢູ່ຂອງເວັບເພຈ">ຂໍ້ຄວາມທີ່ເປັນຈຸດການເຊື່ອມໂຍງ</a>
ຕົວຢ່າງ:
<p>
<strong>ເມນູຫຼັກ</strong><br />
<a href="history.html">history</a><br />
<a href="http://www.moe.gov.la">ເວັບໄຊກະຊວງສຶກສາທິການ ແລະກິລາ</a><br />
</p>
9.3 ການເຊື່ອມໂຍງໄປຍັງອີເມລ.
ເຮົາຈະໃຊ້ແທັກຄຳສັ່ງ<a>ແລ້ວເພີ່ມຄຳສັ່ງ href ໄວ້ພາຍໃນ,ຈາກນັ້ນກຳນົດຄ່າ href ໃຫ້ເທົ່າກັບ mailto:ທີ່ຢູ່ອີເມລ
ທີ່ຕ້ອງການສົ່ງເມລໄປເຖິງ ສັງເກດຮູບແບບການຂຽນດັ່ງລຸ່ມນີ້:
<a href="mailto:ngaviseth@live.com">ສອບຖາມເພີ່ມເຕີມ</a>
9.3 ການເຊື່ອມໂຍງໄປຍັງເອກະສານອື່ນໆ.
ເຮົາຈະໃຊ້ແທັກ<a>ຄືກັບການເຊື່ອມໂຍງແບບອື່ນໆ ຕ່າງແຕ່ເຮົາຈະກຳນົດຄ່າຂອງຄຳສັ່ງ href ເທົ່າກັບຊື່ເອກະສານ
ທີ່ເຮົາຕ້ອງການເຊື່ອມໂຍງໄປເຖິງ
ຕົວຢ່າງ:
<p>
<strong>ດາວໂຫຼດ</strong><br />
<a href="chapter1.doc">ບົດຮຽນຍົດທີ 1</a><br />
<a href="homework.pdf">ວຽກບ້ານ</a><br />
</p>
ຜົນໄດ້ຮັບ
ບົດທີ 10 ການສ້າງລາຍການ
10.1 ການສ້າງລາຍການແບບມີເລກລຳດັບ(OL: Ordered List).
ການສ້າງລາຍການແບບນີ້ຈະໃຊ້ Tag <ol> ຄູ່ກັບ <li> ເພື່ອສະແດງຜົນລາຍການ ເຊິ່ງເຮົາສາມາດກຳນົດເລກລຳດັບເປັນ ຕົວເລກ,ຕົວອັກສອນ ຫຼື ເລກໂລແມັງ ໄດ້ດັ່ງນີ້:
10.2 ການສ້າງລາຍການໂດຍມີສັນຍາລັກນຳໜ້າ(Unordered List ຫຼື Bullet List).
ການສ້າງລາຍການແບບນີ້ ແມ່ນເຮົາຈະໃຊ້ Tag<ul> ຄູ່ກັບ <li> ເຊິ່ງເຮົາສາມາດກຳນົດສັນຍາລັກຢູ່ໜ້າລາຍການໄດ້ໂດຍໃຊ້ attribute Type ແລະ ກຳນົດຄ່າ type ເທົ່າກັບ disc, circle ແລະ square ໃຫ້ສັງເກດຕົວຢ່າງລຸ່ມນີ້:
Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest
ບົດທີ 11 ການສ້າງຕາຕະລາງຂໍ້ມູນ
ຄຳສັ່ງທີ່ໃຊ້ສຳລັບສ້າງຕາຕະລາງມີຢູ່ຫຼາຍຄຳສັ່ງຄື
ຊື່ Tag ຄວາມໝາຍ
<table></table> ສຳລັບກຳນົດຂອບເຂດການສ້າງຕາຕະລາງ
<th></th> ສຳລັບຂໍ້ຄວາມທີ່ເປັນຫົວເລື່ອງຂອງຖັນຕາຕະລາງຂໍ້ມູນ
<tr></tr> ກຳນົດຈຳນວນແຖວຂອງຕາຕະລາງ
<td></td> ກຳນົດຈຳນວນຖັນຂອງຕາຕະລາງ
ມີຮູບແບບໂຄງສ້າງການຂຽນດັ່ງນີ້:
<table>
<tr><th>….</th> ….</tr>
<tr><td>……</td>…..</tr>
</table>
ຕົວຢ່າງ:
<table>
<tr>
<th>ລະຫັດພະນັກງານ</th>
<th>ຊື່ ແລະ ນາມສະກຸນ</th>
<th>ເງິນເດືອນ (ກີບ)</th>
</tr>
<tr>
<td>001</td>
<td>ທ່ານ ທອງດີ ມີໄຊ</td>
<td>2,000,000 </td>
</tr>
<tr>
<td>002</td>
<td>ນາງ ຄຳສອນ ມີໂຊກ</td>
<td>1,500,00</td>
</tr>
</table>
ຜົນໄດ້ຮັບ
ນອກຈາກນັ້ນ ເຮົາຍັງສາມາດກຳນົດຄຸນສົມບັດໃຫ້ກັບຕາຕະລາງໄດ້ ໂດຍໃຊ້ attribute ຕ່າງໆຄື:
1) Attribute ທີ່ໃຊ້ໃນ Tag <table>ມີຄື:
- align ສຳລັບຈັດຕຳແໜ່ງຊອງຕາຕະລາງ ໂດຍມີຄ່າເທົ່າກັບ left,center,right.
- border ສຳລັບກຳນົດຄວາມໜາຂອງເສັ້ນຂອບຕາຕະລາງ ມີຄ່າເທົ່າກັບຕົວເລກ(ມີຫົວໜ່ວຍ ເປັນpixel ຫຼື %).
- bordercolor ສຳລັບກຳນົດສີເສັ້ນຕາຕະລາງ ມີຄ່າເປັນ ລະຫັດສີ ຫຼື ຊື່ສີ(ພາສາອັງກິດ).
- width ສຳລັບກຳນົດຄວາມກວ້າງຂອງຕາຕະລາງ ມີຄ່າເປັນຕົວເລກ(ຫົວໜ່ວຍເປັນ pixel ຫຼື %)
- bgcolor ສຳລັບກຳນົດສີພື້ນຫລັງຂອງຕາຕະລາງ ມີຄ່າເປັນ ລະຫັດສີ ຫຼື ຊື່ສີ.
- background ສຳລັບກຳນົດພື້ນຫຼັງຂອງຕາຕະລາງໃຫ້ເປັນຮູບພາບ ມີຄ່າເປັນ ຊື່ ແລະ ນາມສະກຸນຂອງຮູບນັ້ນໆ.
- cellspacing ກຳນົດຊ່ອງວ່າງລະຫວ່າງຫ້ອງຂອງຕາຕະລາງ ມີຄ່າເປັນຕົວເລກ.
- cellpadding ກຳນົດໄລຍະຫ່າງລະຫວ່າງຂໍ້ຄວາມກັບເສັ້ນຂອບໃນຫ້ອງຕາຕະລາງ ມີຄ່າເປັນຕົວເລກ(ຫົວໝ່ວຍເປັນ pixel ຫຼື %).
2) Attribute ທີ່ໃຊ້ໃນ Tag<tr> ມີຄື:
- align ສຳລັບຈັດຕຳແໜ່ງຂໍ້ຄວາມໃນຫ້ອງຕາຕະລາງຕາມລວງນອນມີຄ່າເປັນ left,center,right.
- valign ສຳລັບຈັດຕຳແໜ່ງຂໍ້ມູນໃນຫ້ອງຕາຕະລາງຕາມລວງຕັ້ງມີຄ່າເປັນ top,middle,bottom.
- bgcolor ສຳລັບກຳນົດສີພື້ນຂອງແຖວຕາຕະລາງ ມີຄ່າເປັນ ລະຫັດສີ ຫຼື ຊື່ສີ.
3) Attribute ທີ່ໃຊ້ໃນ Tag<td> ມີຄື:
- align ສຳລັບຈັດຕຳແໜ່ງຂໍ້ຄວາມໃນຫ້ອງຕາຕະລາງຕາມລວງນອນມີຄ່າເປັນ left,center,right.
- valign ສຳລັບຈັດຕຳແໜ່ງຂໍ້ມູນໃນຫ້ອງຕາຕະລາງຕາມລວງຕັ້ງມີຄ່າເປັນ top,middle,bottom.
- width ກຳນົດຄວາມກວ້າງຂອງຫ້ອງຕາຕະລາງ ມີຄ່າເປັນຕົວເລກ(ຫົວໜ່ວຍ pixel ຫຼື %).
- height ກຳນົດຄວາມສູງຂອງຫ້ອງຕາຕະລາງ ມີຄ່າເປັນຕົວເລກ(ຫົວໜ່ວຍ pixel ຫຼື %).
- colspan ການລວມຫ້ອງຕາຕະລາງຫຼາຍຫ້ອງເປັນຫ້ອງດຽວຕາມຖັນ ມີຄ່າເປັນຕົວເລກ.
- rowspan ການລວມຫ້ອງຕາຕະລາງຫຼາຍຫ້ອງເປັນຫ້ອງດຽວຕາມແຖວ ມີຄ່າເປັນຕົວເລກ.
- bgcolor ກຳນົດສີພື້ນຫຼັງຂອງຫ້ອງຕາຕະລາງ.
ຕົວຢ່າງ:
<table align="center" border="1" width="80%" bgcolor="#FFFF99">
<tr>
<th width="131">ລະຫັດພະນັກງານ</th>
<th width="186">ຊື່ ແລະ ນາມສະກຸນ</th>
<th width="135">ເງິນເດືອນ (ກີບ)</th>
</tr>
<tr>
<td>001</td>
<td>ທ່ານ ທອງດີ ມີໄຊ</td>
<td>2,000,000 </td>
</tr>
<tr>
<td>002</td>
<td>ນາງ ຄຳສອນ ມີໂຊກ</td>
<td>1,500,00</td>
</tr>
</table>
ບົດທີ 12 ການສ້າງແບບຟອມ(Form)
ແບບຟອມທີ່ສ້າງຂຶ້ນໃນເວັບໄຊແມ່ນເພື່ອໃຊ້ສຳລັບການຮັບ-ສົ່ງຂໍ້ມູນຈາກລະຫວ່າງຜູ້ໃຊ້ ແລະເຈົ້າຂອງເວັບໄຊ
ແບບຟອມຕ່າງໆທີ່ພົບເຫັນໃນເວັບໄຊ ເຊັ່ນ ແບບສອບຖາມ,ໃບສັ່ງຊື້,ການລົງຖະບຽນເປັນສະມາຊິກ,
ສະໝຸດຢ້ຽມຢາມ,ສະແດງຄວາມຄິດເຫັນ ເປັນຕົ້ນ.
ໂດຍປົກກະຕິແລ້ວ ການບັນທຶກຂໍ້ມູນຈາກແບບຟອມຈະໃຊ້ໂປຣແກຣມປະເພດ Server Script
ເຊັ່ນ APS,PHP, ອື່ນໆ.
Tag ຄຳສັ່ງໃນການສ້າງ form ມີດັ່ງນີ້:
<form name= “ຊື່ແບບຟອມ” method= “post/get” action= “url” target= “ການສະແດງ”>
ຊ່ອງຮັບຂໍ້ມູນປະເພດຕ່າງໆ...
......
</form>
ເຊິ່ງພາຍໃນ form ຈະມີອົງປະກອບທີ່ເປັນຊ່ອງຮັບຂໍ້ມູນຢູ່ 3 ປະເພດ ຄື:
12. ຊ່ອງຮັບຂໍ້ມູນປະເພດ Input.
ເປັນຮູບແບບທີ່ມີໄວ້ສຳລັບກຳນົດຮູບແບບຂອງຊະນິດຂໍ້ມູນທີ່ຈະນຳເຂົ້າໄປໃນແບບຟອມ ເຊິ່ງມີຮູບແບບການນຳໃຊ້
6 ຮູບແບບ ຄືດັ່ງຕໍ່ໄປນີ້:
12.1 ຊ່ອງຮັບຂໍ້ມູນແບບ text.
ເປັນຮູບແບບທີ່ມີລັກສະນະເປັນຂໍ້ຄວາມ ມີຮູບແບບການຂຽນດັ່ງນີ້:
<form>ຂໍ້ມູນທີ່ຕ້ອງການສະແດງຜົນ
<input name="ຊື່ຊ່ອງຮັບຂໍ້ມູນ" type="ຮູບແບບຊ່ອງຮັບຂໍ້ມູນ" size="ຄວາມຍາວຂອງຊ່ອງຮັບຂໍ້ມູນ"
maxlength="ຈຳນວນຕົວອັກສອນ" value="ຊື່ຫຍໍ້ຂອງຂໍ້ມູນ" />
</form>
ຕົວຢ່າງ:
<form>
username:<input type="text" name="user" size="25" maxlength="12" />
</form>
ຜົນໄດ້ຮັບ
12.2 ຊ່ອງຮັບຂໍ້ມູນແບບ password.
ເປັນການຮັບຂໍ້ມູນຄ້າຍຄືກັບ text ແຕ່ຈະສະແດງຂໍ້ຄວາມເປັນລະຫັດແທນຕົວອັກສອນ ເຊິ່ງມີຮູບແບບການຂຽນດັ່ງນີ້:
ຕົວຢ່າງ:
<form>
password:<input type="password" name="pwd" size="24" maxlength="12" />
</form>
ຜົນໄດ້ຮັບ
12.3 ຊ່ອງຮັບຂໍ້ມູນແບບ checkbox.
ເປັນຂໍ້ມູນທີ່ມີລັກສະນະເປັນຕົວເລືອກ ຈະສະແດງຜົນເປັນບັອກສີ່ຫຼ່ຽມ ແລະສາມາດເລືອກໄດ້ຫຼາຍຕົວເລືອກດ້ວຍການ
ໃຊ້ເມົ້າຄລິກໃສ່ລາຍການທີ່ຕ້ອງການ ເຊິ່ງມີຮູບແບບການຂຽນດັ່ງນີ້:
<form>
<input type="checkbox" name="ຊື່ຂອງຂໍ້ມູນທີ1" value="ຄ່າຂໍ້ມູນທີ1ທີ່ຈະສົ່ງໄປ" />ຂໍ້ມູນທີ່ຕ້ອງການສະແດງ
<input type="checkbox" name="ຊື່ຂອງຂໍ້ມູນທີ2" value="ຄ່າຂໍ້ມູນທີ2ທີ່ຈະສົ່ງໄປ" />ຂໍ້ມູນທີ່ຕ້ອງການສະແດງ
</form>
ຕົວຢ່າງ:
<form>ລະດັບການສຶກສາ:
<input type="checkbox" name="tech" value="technical" />ວິຊາຊີບຊັ້ນກາງ
<input type="checkbox" name="high" value="higher" />ວິຊາຊີບຊັ້ນສູງ
</form>
ຜົນໄດ້ຮັບ
12.4 ຊ່ອງຮັບຂໍ້ມູນແບບ radio.
ຂໍ້ມູນທີ່ມີລັກສະນະເປັນຕົວເລືອກ ໂດຍຈະສະແດງເປັນຮູບວົງມົນນ້ອຍໆ ເພື່ອໃຫ້ເລືອກແລະສາມາດເລືອກໄດ້ພຽງ
ຕົວເລືອກດຽວ ສັງເກດຮູບແບບການຂຽນດັ່ງລຸ່ມນີ້:
<form>
<input type="radio" name="ຊື່ຂໍ້ມູນ1" value="ຄ່າຂອງຂໍ້ມູນທີ່ຈະສົ່ງ" />ຂໍ້ມູນທີ່ຕ້ອງການສະແດງ
<input type="radio" name="ຊື່ຂໍ້ມູນ2" value="ຄ່າຂອງຂໍ້ມູນທີ່ຈະສົ່ງ" />ຂໍ້ມູນທີ່ຕ້ອງການສະແດງ
</form>
ຕົວຢ່າງ:
<form>ເລືອກເພດ:
<input type="radio" name="f" value="female" />ແມ່ຍິງ
<input type="radio" name="m" value="male" />ຜູ້ຊາຍ
</form>
ຜົນໄດ້ຮັບ
12.5 ຊ່ອງຮັບຂໍ້ມູນແບບ submit ແລະ reset.
ແມ່ນຊ່ອງຮັບຂໍ້ມູນທີ່ເປັນປຸ່ມ ໃຊ້ໄວ້ສຳລັບກົດເພື່ອສົ່ງຂໍ້ມູນ(submit)ໄປຍັງ ເຊີບເວີ ແລະເປັນປຸ່ມເພື່ອລຶບຂໍ້ມູນ
ທັງໝົດທີ່ປ້ອນໄວ້ໃນແບບຟອມ(reset) ໂດຍມີຮູບແບບການຂຽນດັ່ງລຸ່ມນີ້:
<form>
<input type="submit" value="ຄ່າຂອງຂໍ້ມູນທີ່ປະກົດເທິງປຸ່ມ" />
<input type="reset" value="ຄ່າຂອງຂໍ້ມູນທີ່ປະກົດເທິງປຸ່ມ" />
</form>
ຕົວຢ່າງ:
<form>
username:<input type="text" name="user" size="25" maxlength="12" /><br />
password:<input type="password" name="pwd" size="24" maxlength="12" /><br />
<input type="submit" value="ສົ່ງຂໍ້ມູນ" />
<input type="reset" value="ຍົກເລີກ" />
</form>
ຜົນໄດ້ຮັບ
ບົດທີ 12 ການສ້າງແບບຟອມ(ຕໍ່)
13.ຊ່ອງຮັບຂໍ້ມູນປະເພດ textarea.
ເປັນຮູບແບບໃນການສ້າງຊ່ອງຮັບຂໍ້ມູນແບບຫຼາຍແຖວດ້ວຍແທັກຄຳສັ່ງ<textarea></textarea>
ຕົວຢ່າງ:
<form>
ສະແດງຄຳເຫັນ:<br />
<textarea name="text1" rows="5" cols="40">
ຂໍ້ມູນທີ່ຕ້ອງການສະແດງຜົນໄວ້ໃນຊ່ອງຮັບຂໍ້ມູນ
</textarea>
</form>
ຜົນໄດ້ຮັບ
14. ຊ່ອງຮັບຂໍ້ມູນປະເພດ select.
ໃນການສ້າງຕົວເລືອກດ້ວຍແທັກຄຳສັ່ງ<select>ແມ່ນການສ້າງລາຍການແບບ drop-down ເຊິ່ງມີຮູບແບບການຂຽນ
ດັ່ງນີ້:
<form>
<select name="ຊື່ຂໍ້ມູນ">
<option value="ຄ່າຕົວເລືອກທີ1" />ຕົວເລືອກທີ1
<option value="ຄ່າຕົວເລືອກທີ2" />ຕົວເລືອກທີ2
<option value="ຄ່າຕົວເລືອກທີ3" />ຕົວເລືອກທີ3
..............
</select>
</form>
ຕົວຢ່າງ:
<form>ປະເທດ:
<select name="country">
<option value="laos" />ສ.ປ.ປ ລາວ
<option value="vietnam" />ຫວຽດນາມ
<option value="japan" />ຢີ່ປຸ່ນ
..............
</select>
</form>
ຜົນໄດ້ຮັບ</select></td></tr></table></li></ul></li></ol></a></a></a></p></a></a></a></marquee></marquee></marquee></hn></!></p></p>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น