HTML

1. ບົດທີ 1 ພື້ນຖານກ່ຽວກັບອິນເຕີເນັດ
ອິນເຕີເນັດ(Internet) ຫຍໍ້ມາຈາກຄຳວ່າ Inter Connection Network
ໝາຍເຖິງເຄືອຂ່າຍຄອມພິວເຕີທີ່ມີການ
ເຊື່ອມໂຍງກັນທົ່ວໂລກ ໂດຍມີລັກສະນະຄືກັບໃຍແມງມຸມ
ການເຮັດວຽກຂອງລະບົບເຄືອຂ່າຍອິນເຕີເນັດຈະມີ ໂປຣໂຕຄອລ(Protocol)
ເຊິ່ງເປັນລະບຽບ ຫຼືວິທີການສື່ສານທີ່ເປັນ
ມາດຕະຖານຂອງການເຊື່ອມຕໍ່, ມາດຕະຖານດັ່ງກ່າວເອີ້ນວ່າ TCT/IP
(Transmission Control Protocol/
Internet Protocol)
ໂດຍຄອມພິວເຕີທຸກໜ່ວຍທີ່ເຊື່ອມຕໍ່ເຂົ້າກັບເຄືອຂ່າຍອິນເຕ
ີເນັດ ຈະຕ້ອງມີໝາຍເລກປະຈຳຕົວ
ຫຼື IP address ເພື່ອໃຊ້ອ້າງອີງ
ຫຼືຕິດຕໍ່ກັບຄອມພິວເຕີໜ່ວຍອື່ນໃນເຄືອຂ່າຍ.
1.1 ບັນດາຄຳສັບທີ່ກ່ຽວກັບອິນເຕີເນັດ
- ເວັບເພຈ( webpage ): ແມ່ນເອກະສານທີ່ໃຊ້ໃນການນຳສະເໜີ ຫລື ເຜີຍ
ແພ່ຂໍ້ມູນ ທີ່ປະກອບດ້ວຍຂໍ້ມູນແບບສື່ປະສົມ ເຊັ່ນ:
ຂໍ້ຄວາມ,ຮູບພາບ,ພາບເຄື່ອນໄຫວ,ສຽງ ແລະ ວີດີໂອ ເປັນຕົ້ນ ໂດຍການ
ນຳສະເໜີຜ່ານເຄືອລະບົບເຄືອຂ່າຍອິນເຕີເນັດ ເຊິ່ງແຕກຕ່າງກັນໄປ
ຕາມຈຸດປະສົງຂອງແຕ່ລະເວັບໄຊ.
- ເວັບໄຊ( website ): ການບ່ອນລວມບັນດາໜ້າເວັບເພຈທຸກໆໜ້າໄວ້ດ້ວຍ
ກັນ ໃນນັ້ນມີ 1 ໜ້າຖືກກຳນົດໃຫ້ເປັນ ໜ້າຫລັກ ຫລື ໜ້າທຳອິດ
ຫລື ໂຮມເພຈ ປົກກະຕິຈະຕັ້ງຊື່ເປັນ index .

2. - ເວັບຮັອສຕິງ( Web hosting ):
ແມ່ນການບໍລິການເນື້ອທີ່ຄວາມຈຳຂອງຄອມພິວເຕີທີ່ເປັນ web
server
ເພື່ອເກັບຮັກສາຂໍ້ມູນເວັບໄຊ
ໂດຍທົ່ວໄປຜູ້ນຳໃຊ້ຈະສາມາດຂໍເຊົ່ານຳຜູ້ໃຫ້ບໍລິການ web hosting.
- ສູນໃຫ້ບໍລິການອິນເຕີເນັດ(ISP : Internet Service Provider) : ແມ່ນໜ່ວຍ
ງານທີ່ບໍລິການໃຫ້ຄອມພິວເຕີສ່ວນບຸກຄົນ ຫລື ເຄືອຂ່າຍຄອມ
ພິວເຕີຂອງອົງກອນ ເຊື່ອມຕໍ່ເຂົ້າກັບລະບົບເຄືອຂ່າຍອິນເຕີ
ເນັດ ເພື່ອໃຫ້ສາມາດໃຊ້ອິນເຕີເນັດໄດ້.
- ຊື່ໂດເມນ( Domain name ): ແມ່ນຊື່ຂອງເວັບໄຊ ເຊິ່ງຊື່ເວັບໄຊຄື
ສິ່ງທີ່ສະແດງ ຫລື ປະກາດຄວາມມີຕົວຕົນໃນອິນເຕີເນັດ ເຮັດໃຫ້
ຄົນທົ່ວໄປໄດ້ຮູ້ຈັກ ໂດຍຊື່ຂອງເວັບໄຊຈະບໍ່ຊ້ຳກັນ ເຊັ່ນ www.
moe.gov.la ເປັນຕົ້ນ.
- ເວັບເຊີບເວີ( Web server ):
ແມ່ນຄອມພິວເຕີທີ່ມີການຕິດຕັ້ງໂປຣແກຣມກ່ຽວກັບການໃຫ້ບໍລ
ິການ ເຮັດໜ້າ
ໜ້າທີ່ບໍລິການ ແລະສົ່ງຂໍ້ມູນໃຫ້ຜູ້ນຳໃຊ້ທີ່ຮ້ອງຂໍມາ

3. ໂດຍສ່ວນຫຼາຍໂປຣແກຣມທີ່ມັກໃຊ້ເຊັ່ນ: IIS(Internet
Information Service),Apache ຫຼືອື່ນໆ.
- ເວັບບຣາວເຊີ( Web browser ): ແມ່ນໂປຣແກຣມສຳລັບເປີດເບິ່ງຂໍ້ມູນໃນ
ຮູບແບບເວັບເພຈ ຫລື ເອກະສານ HTML ຫລື ເວັບເພຈທີ່ສ້າງຈາກພາສາ
ອື່ນໆ.
- ດາວໂຫລດ( download ): ແມ່ນການສຳເນົາເອົາຂໍ້ມູນຈາກ web server ມາໄວ້
ໃນຄອມພິວເຕີຂອງຜູ້ໃຊ້.
- ອັບໂຫລດ( Upload ): ແມ່ນການສົ່ງໂອນຍ້າຍຂໍ້ມູນຈາກຄອມພິວເຕີຜູ້
ໃຊ້ໄປໄວ້ໃນ web server.
- ການເຊື່ອມໂຍງ( link ): ແມ່ນການເຊື່ອມໂຍງລະຫວ່າງເວັບເພຈພາຍໃນເວັບ
ໄຊ,ນອກເວັບໄຊ,ເອກະສານ ຕ່າງໆ
1.2 ການເຊື່ອມຕໍ່ອິນເຕີເນັດ
1.2.1 ການເຊື່ອມຕໍ່ອິນເຕີເນັດແບບໃຊ້ສາຍ(Wire Internet)
- ການເຊື່ອມຕໍ່ອິນເຕີເນັດລາຍບຸກຄົນ(Individual Connection):
ແມ່ນການເຊື່ອມຕໍ່ຄອມພິວເຕີທີ່ຢູ່ໃນເຮືອນ
ເຂົ້າກັບລະບົບເຄືອຂ່າຍອິນເຕີເນັດເພື່ອໃຊ້ອິນເຕີເນັດໂດຍຜ່ານ
ສານໂທລະສັບ ໂດຍຜູ້ໃຊ້ຈະຕ້ອງສະໝັກ
ເປັນສະມາຊິກກັບຜູ້ໃຫ້ບໍລິການອິນເຕີເນັດເສຍກ່ອນ
ຈາກນັ້ນຈະໄດ້ຊື່ ແລະລະຫັດເພື່ອເຂົ້າໃຊ້
ອົງປະກອບໃນການເຊື່ອມຕໍ່ອິນເຕີເນັດລາຍບຸກຄົນມີຄື:
1) ໂທລະສັບ
2)ຄອມພິວເຕີ
3)ຜູ້ໃຫ້ບໍລິການອິນເຕີເນັດ
4)ໂມເດມ
- ການເຊື່ອມຕໍ່ອິນເຕີເນັດຂອງອົງກອນ( Coperate Connection):
ການເຊື່ອມຕໍ່ອິນເຕີເນັດປະເພດນີ້ມັກເຫັນຢູ່
ຕາມອົງກອນ,ໜ່ວຍງານຕ່າງໆ
ເຊິ່ງພາຍໃນອົງກອນຈະມີລະບົບເຄືອຂ່າຍທີ່ເຊື່ອມຕໍ່ກັບອິນເຕີ
ເນັດດ້ວຍສາຍເຊົ່າ

4. ຕະຫຼອດເວລາ
ດັ່ງນັ້ນບຸກຄົນທີ່ຢູ່ໃນອົງກອນກໍ່ສາມາດໃຊ້ອິນເຕີເນັດໄດ້ຕະ
ຫຼອດເວລາເຊັ່ນກັນ
1.2.2 ການເຊື່ອມຕໍ່ອິນເຕີເນັດແບບບໍ່ໃຊ້ສາຍ(Wireless Network)
ບົດທີ 2 ພື້ນຖານກ່ອນການຂຽນພາສາ HTML

5. HTML(Hyper Text Markup Language) ພັດທະນາໂດຍທ່ານ ທີມ ເບີເນີ
ລີ(Tim Berners Lee) ເປັນພາສາໃຊ້ຂຽນເອກະສານ ເພື່ອສະແດງຜົນໃນໜ້າຈໍ
ຄອມພິວເຕີຜ່ານໂປຣແກຣມປະເພດ Web Browser, ພາສາ HTML ເປັນພາສາຄຳ
ສັ່ງຊະນິດຄວບຄຸມການສະແດງຂໍ້ ມູນແບບກຣາບຟິກ ແລະມີນາມສະກຸນ
ເປັນ *.html
ໃນປະຈຸບັນເຮົາຈະເຫັນວ່າ ມີເຄື່ອງມືຈຳນວນຫຼວງຫຼາຍໃຫ້
ເລືອກໃຊ້ເພື່ອສ້າງ ເວັບເພຈ ໂດຍບໍ່ຈຳເປັນຕ້ອງມີຄວາມຮູ້ກ່ຽວ
ກັບພາສາໃດພາສາໜຶ່ງກໍ່ສາມາດສ້າງເວັບເພຈໄດ້ ແນວໃດກໍ່ຕາມ
ເຄື່ອງມືສຳເລັດຮູບຕ່າງໆນັ້ນ ຈະສາມາດເຮັດໄດ້ເທົ່າທີ່ໂປຣ
ແກຣມມີໄວ້ໃຫ້ເທົ່ານັ້ນ ແຕ່ຖ້າເຮົາຕ້ອງການປັບປຸງ ຫຼືປ່ຽນ
ແປງລັກສະນະຕ່າງໆນອກເໜືອຈາກທີ່ໂປຣແກຣມມີນັ້ນ ເຮົາກໍ່ບໍ່
ສາມາດເຮັດໄດ້ຖ້າບໍ່ຮູ້ພາສາທີ່ໃຊ້ຂຽນເວັບເພຈ ຫຼືເຮັດໄດ້ກໍ່
ຄົງລຳບາກສົມຄວນ.
ພາຍໃນໂຄງສ້າງຂອງເອກະສານ HTML ຈະບໍ່ມີໃດໆມາກຳນົດຍ້ອນວ່າ ໂປຣ
ແກຣມປະເພດ ເວັບບຣາວເຊີຈະເຫັນອົງປະກອບທຸກຢ່າງໃນໂປຣແກຣມພາສາ
HTML ທີ່ຂຽນຂຶ້ນເປັນເນື້ອຫາທັງໝົດ ຍົກເວັ້ນໃນສ່ວນຫົວຈະມີ
ການກຳນົດພິເສດ.
1. ເວັບໄຊ (Web Site).
ໝາຍເຖິງ ເວັບເພຈ ຫຼາຍໆໜ້າທີ່ມີການເຊື່ອມໂຍງຫາກັນ
ສ່ວນຫຼາຍເວັບໄຊມັກຈະສ້າງຂຶ້ນເພື່ອນຳສະເໜີຂໍ້ມູນຜ່ານຄອມ
ພິວເຕີ ໂດຍຖືກກັບຮັກສາໄວ້ໃນເຄືອຂ່າຍອິນເຕີເນັດ,ເວັບໄຊທົ່ວໄປ
ຈະໃຫ້ບໍລິການຟຣີຕໍ່ຜູ້ໃຊ້ ແຕ່ບາງເວັບໄຊກໍ່ຈຳເປັນຕ້ອງມີການ
ສະໝັກສະມາຊິກ ແລະເສຍຄ່າໃຊ້ຈ່າຍຈຳນວນໜຶ່ງເພື່ອຂໍເບິ່ງຂໍ້
ມູນ. ການສ້າງເວັບໄຊມີຫຼາຍລະດັບຕັ້ງແຕ່ເວັບໄຊສ່ວນຕົວ ຈົນເຖິງ
ລະດັບເວັບໄຊສຳລັບທຸລະກິດ ຫຼືອົງການຕ່າງໆ ການຂໍ້ເບິ່ງຂໍ້ມູນ
ເວັບໄຊຈະໃຊ້ໂປຣແກຣມປະເພດ ເວັບບຣາວເຊີ.
2. ເວັບບຣາວເຊີ (Web Browser).
ເປັນໂປຣແກຣມຄອມພິວເຕີທີ່ໃຊ້ເປີດເບິ່ງເວັບໄຊ ເພື່ອ
ເບິ່ງຂໍ້ມູນ ແລະສາມາດໂຕ້ຕອບກັບຂໍ້ມູນຂ່າວສານໃນໜ້າເວັບທີ່
ສ້າງດ້ວຍພາສາສະເພາະທີ່ມີການເກັບຮັກສາໄວ້ໃນລະບົບບໍລິການເວັບ
ຫຼືເວັບເຊິບເວີ(Web Server) ຫຼືລະບົບຄັງຂໍ້ມູນອື່ນໆ ໂດຍໂປຣ
ແກຣມ ເວັບບຣາວເຊີ ຈະເປັນຄືກັບສື່ໃນການຕິດຕໍ່ກັບເຄືອຂ່າຍອິນ
ເຕີເນັດ ຕົວຢ່າງໂປຣແກຣມປະເພດ ເວັບບຣາວເຊີ ໄດ້ແກ່:

6. 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 ໝາຍເຖິງ ຊື່ໂດເມນ ທີ່ໃຊ້ແທນໝາຍເລກທີ່ຢູ່ໃນ
ເຄືອຂ່າຍອິນເຕີເນັດ.

7. .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,ອື່ນໆທີ່ກ່ຽວຂ້ອງ ແລະເໝາະສົມ.

8. ບົດທີ 3 ເລີ່ມຕົ້ນຄຳສັ່ງພາສາ HTML
1. ແທັກ(Tag)

9. ແທັກແມ່ນລັກສະນະສະເພາະຂອງພາສາ HTML ທີ່ໃຊ້ໃນການກຳນົດ
ຮູບແບບຄຳສັ່ງ ຫຼືລະຫັດຄຳສັ່ງ ໂດຍລະຄຳສັ່ງຈະຖືກກຳນົດໄວ້ພາຍໃນ
ເຄື່ອງໝາຍນ້ອຍກວ່າ( < ) ແລະເຄື່ອງໝາຍໃຫຍ່ກວ່າ(> ) ເຊິ່ງແທັກຄຳ
ສັ່ງພາສາ HTML ແບ່ງອອກເປັນ 2 ລັກສະນະຄື:
- ແທັກດ່ຽວ: ເປັນແທັກທີ່ບໍ່ມີແທັກປິດ ເຊັ່ນ: <br> , <hr> .
- ແທັກຄູ່: ແທັກຄຳສັ່ງໜຶ່ງຈະປະກອບດ້ວຍແທັກເປີດ ແລະເທັກປິດ
ໂດຍພາຍໃນແທັກປິດຈະມີເຄື່ອງໝາຍ / ນຳໜ້າຄຳສັ່ງ ເຊັ່ນ: <b>
ຂໍ້ຄວາມ </b>
2. ຄຸນລັກສະນະ(Attributes).
ເປັນສ່ວນທີ່ໃຊ້ຂະຫຍາຍຄວາມສາມາດຂອງແທັກຄຳສັ່ງ ເຊິ່ງຈະ
ຕ້ອງໃສ່ໄວ້ພາຍໃນເຄື່ອງໝາຍໃຫຍ່ກວ່າ ແລະນ້ອຍກວ່າ ແລະໃນສ່ວນ
ແທັກເປີດເທົ່ານັ້ນ, ໂດຍແຕ່ລະແທັກຄຳສັ່ງຈະມີຄຸນລັກສະນະແຕກ
ຕ່າງກັນໄປ ແລະມີຈຳນວນບໍ່ເທົ່າກັນ ເຊັ່ນ: ຄຸນລັກສະນະຂອງແທັກ
<p> ມີດັ່ງນີ້:
<p align="left">ຂໍ້ຄວາມໃດໆກໍ່ໄດ້</p>
<p align="center">ຂໍ້ຄວາມໃດໆກໍ່ໄດ້</p>
<p align="right">ຂໍ້ຄວາມໃດໆກໍ່ໄດ້</p>
<p align="justify">ຂໍ້ຄວາມໃດໆກໍ່ໄດ້</p>
3. ໂຄງສ້າງຂອງພາສາ HTML.

10. - ແທັກຄຳສັ່ງ <html> ແມ່ນແທັກເປີດ ເຊິ່ງເປັນຄຳສັ່ງກຳນົດຈຸດເລີ່
ມຕົ້ນໃນການຂຽນໂປຣແກຣມ ແລະຄຳສັ່ງ </html> ແມ່ນແທັກປິດ
ເຊິ່ງເປັນແທັກກຳນົດຈຸດສິ້ນສຸດການຂຽນໂປຣແກຣມ.
- ແທັກຄຳສັ່ງ <head> ….</head> ແມ່ນແທັກເປີດ ເຊິ່ງເປັນຄຳສັ່ງສຳລັບ
ໃສ່ຂໍ້ຄວາມທີ່ເປັນຊື່ເນື້ອໃນຂໍ້ມູນໃນໜ້າເວັບເພຈນັ້ນ ແລະ
ມີແທັກຍ່ອຍອີກຄຳສັ່ງໜຶ່ງຄື: <title>….</title> .
- ແທັກຄຳສັ່ງ <title> …. </title> ເປັນແທັກຄຳສັ່ງທີ່ໃຊ້ສະແດງຊື່ ຫຼື
ຂໍ້ຄວາມທີ່ອະທິບບາຍເນື້ອຫາໃນໜ້າເວັບເພຈນັ້ນ ແລະຂໍ້ຄວາມ
ທີ່ກຳນົດພາຍໃນແທັກຄຳສັ່ງນີ້ຈະສະແດງໃນ Title Bar ຂອງໂປຣແກຣມ ເວັບ
ບຣາວເຊີ.
- ແທັກຄຳສັ່ງ <body> …. </body> ເປັນສ່ວນທີ່ສຳຄັນໃນການສະແດງຜົນໃນ
ໜ້າຈໍຄວາມ ຫຼືໃນໂປຣແກຣມເວັບບຣາວເຊີ ເຊິ່ງພາຍໃນຈະປະກອບດ້ວຍ
ຫຼາຍແທັກຄຳສັ່ງ ເຊັ່ນ: ກ່ຽວກັບຕົວອັກສອນ,ຮູບພາບ,ຕາຕະລາງ,ວິດີ
ໂອ ແລະ ອື່ນໆ.

11. ບົດທີ 4 ຂັ້ນຕອນການສ້າງເອກະສານ HTML
- ຂັ້ນຕອນທີ1: ເປີດໂປຣແກຣມ Notepad.
ກົດປຸ່ມ Start > All Programs > Accessories > Notepad ແລ້ວພິມຄຳສັ່ງ
ຕ່າງໆ.

12. - ຂັ້ນຕອນທີ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

13. ຜົນໄດ້ຮັບ

14. ບົດທີ 5 ຄຳສັ່ງທີ່ໃຊ້ໃນການຈັດເອກະສານ
1. ຄຳສັ່ງລົງແຖວ.
ຂໍ້ຄວາມທີ່ພິມໃນເອກະສານ HTML ນັ້ນຈະມີລັກສະນະຕໍ່ກັນໄປ
ເປັນແຖວດຽວ ແລະຈະລົງແຖວກໍ່ເມືອສຸດຂອບໜ້າຈໍຄອມ ດັ່ງນັ້ນ
ຖ້າຕ້ອງການລົງແຖວໃໝ່ເຮົາຈະຕ້ອງກຳນົດເອງດ້ວຍການໃຊ້ແທັກຄຳ
ສັ່ງ <br> (break line) ຄຳສັ່ງນີ້ຈະໃຫ້ຜົນຮັບຄືກັບການກົດປຸ່ມ
Enter ໃນແປ້ນພິມ
ຕົວຢ່າງ:
<html>
<head>
<title>basic HTML</title>
</head>
<body>
1. ການລົງແຖວໃໝ່ <br> ຂໍ້ຄວາມທີ່ພິມໃນເອກະສານ HTML
ນັ້ນຈະມີລັກສະນະຕໍ່ກັນໄປ ເປັນແຖວດຽວ
ແລະຈະລົງແຖວກໍ່ເມືອສຸດຂອບໜ້າຈໍຄອມ
</body>
</html>
2. ການຈັດຕຳແໜ່ງຂໍ້ມູນໃຫ້ຢູ່ເຄິ່ງກາງໜ້າເວັບເພຈ.
ແມ່ນໃຊ້ແທັກຄຳສັ່ງ <center> ..... </center>
ຕົວຢ່າງ:< center> ຂໍ້ຄວາມນີ້ຈະຢູ່ເຄິ່ງກາງໜ້າເວັບເພຈ</center>
3. ການຈັດພາຣາກຣາບ(paragraph).
ພາຣາກຣາບ ຈະເປັນສ່ວນທີ່ເຫັນກັນທົ່ວໄປໃນໜັງສື
ຫຼືວາລະສານຕ່າງໆ ເປັນສ່ວນທີ່ຊ່ວຍໃຫ້ການແບ່ງເນື້ອຫານັ້ນ
ໃຫ້ເປັນສັດສ່ວນ ແລະເບິ່ງງ່າຍຂຶ້ນ ການຈັດຂໍ້ຄວາມໃຫ້ເປັນ
ພາຣາກຣາບຈະໃຊ້ແທັກຄຳສັ່ງ <p> ເຊິ່ງມີຮູບແບບການຈັດດັ່ງນີ້:
ຮູບແບບ ຄຳອະທິບາຍ

15. Left ຕິດຂອບເບື້ອງຊ້າຍ
Center ຢູ່ເຄິ່ງກາງ
Right ຕິດຂອບເບື້ອງຂວາ
ຮູບແບບ: <p align="right">ຂໍ້ຄວາມທີ່ຈັດຢູ່ໃນພາຣາກຣາບ</p>
ຕົວຢ່າງ:
<html>
<head>
<title>ການຈັດພາຣາກຣາບ </title>
</head>
<body>
<p align=left> ຂໍ້ຄວາມທີ່ຢູ່ຕິດດ້ານຊ້າຍ </p>
<p align=center> ຂໍ້ຄວາມທີ່ຢູ່ເຄິ່ງກາງ </p>
<p align=right> ຂໍ້ຄວາມທີ່ຢູ່ເບື້ອງຂວາ </p>
</body>
</html>
4. ການຈັດຮູບແບບເອກະສານຕາມທີ່ກຳນົດ.
ເປັນການກຳນົດຕຳແໜ່ງການະແດງຜົນຕາມຮູບແບບທີ່ເຮົາພິມໃນ
ໂປຣແກຣມ Notepad ເຊິ່ງເຮົາສາມາດເຮັດໄດ້ຕາມທີ່ເຮົາຕ້ອງການ ໂດຍຈະ
ໃຊ້ແທັກຄຳສັ່ງ <pre> …. </pre>
ຕົວຢ່າງ:
<pre>
ລາຍຮັບ:
ຂາຍເຄື່ອງ 20000 ກີບ
ດອກເບ້ບ 30000 ກີບ
ລາຍຈ່າຍ:
ຄ່ານໍ້າ 5000 ກີບ
ຄ່າໄຟ 2000 ກີບ
ລວມ 7000 ກີບ
</pre>
5. ການໃສ່ເສັ້ນຂັ້ນໃນເອກະສານຕາມລວງນອນ(horizontal rule).
<hr> ເປັນຄຳສັ່ງສະແດງເສັ້ນຂັ້ນຕາມລວງນອນ ໂດຍຈະໃຊ້ເປັນ
ເສັ້ນແບ່ງເນື້ອຫາລະຫວ່າງບົດ ຫຼືເປັນເສັ້ນຂັ້ນເພື່ອຄວາມສວຍ
ງາມ ແລະເປັນລະບົບລະບຽບຂອງເນື້ອຫາ ເຊິ່ງເປັນຄຳສັ່ງບໍ່ຕ້ອງມີຄຳ

16. ສັ່ງປິດ ນອກຈາກນັ້ນຍັງສາມາດກຳນົດຄຸນລັກສະນະໄດ້ອີກດ້ວຍ
ເຊິ່ງມີຮູບແບບດັ່ງລຸ່ມນີ້:
<hr color="ຊື່ສີ ຫຼືລະຫັດສີ" width="ຄວາມກວ້າງ"
align="ຊ້າຍ,ຂວາ,ເຄິ່ງກາງ" noshade>
size ຂະໜາດຂອງເສັ້ນຂັ້ນ
align ຕຳແໜ່ງສະແດງເສັ້ນຂັ້ນ ເຊັ່ນ: ຊ້າຍ,ຂວາ,ເຄິ່ງກາງ
color ສີເສັ້ນຂັ້ນ
width ຄວາມກວ້າງຂອງເສັ້ນຂັ້ນ
noshade ກຳນົດໃຫ້ເສັ້ນຂັ້ນເປັນເສັ້ນໜ້າ ຫຼືເຂັ້ມກວ່າ
ປົກກະຕິ
ຕົວຢ່າງ:
<html>
<head>
<title>ການຈັດພາຣາກຣາບ </title>
</head>
<body>
ຍິນດີຕ້ອນຮັບ
<hr color="red" width="500" hieght="1" align="center" noshade>
ບົດຮຽນທີ 3 ການຈັດການກັບຂໍ້ຄວາມ
</body>
</html>
6. ການໃສ່ໝາຍເຫດ(comment)ໃນເອກະສານ.
ການໃສ່ໝາຍເຫດໃນເອກະສານ html ແມ່ນຕ້ອງການໃສ່ຂໍ້ຄວາມ ຫຼື
ຂໍ້ມູນໄວ້ໃນເອກະສານແຕ່ບໍ່ຕ້ອງການໃຫ້ສະແດງທາງໜ້າຈໍ
ເຊິ່ງມີຮູບແບບຄຳສັ່ງດັ່ງນີ້:
<! ຂໍ້ຄວາມທີ່ເປັນໝາຍເຫດ >
7. ການຍະຫວ່າງໃນເອກະສານ.
ການພິມຂໍ້ມູນໃນເອກະສານ HTML ຈະມີການຍະວ່າງຫຼາຍປານໃດ
ກໍ່ຕາມ ເວລານຳໄປສະແດງໃນໜ້າຈໍບຣາວເຊີ ກໍ່ຈະສະແດງຄືວ່າຍະວ່າງ
ພຽງ 1 ຕົວອັກສອນເທົ່ານັ້ນ ດັ່ງນັ້ນຖ້າເຮົາຕ້ອງການຍະ
ວ່າງຫຼາຍໆ ໃນພາສາ HTML ຈະມີຄຳສັ່ງໄວ້ໃຫ້ ຄື: &nbsp; ຄຳສັ່ງນີ້ຈະ
ເທົ່າກັບການເຄາະຍະວ່າງ 1 ບາດ ໃນແປ້ນພິມ.
ຕົວຢ່າງ:
<html>

17. <head>
<title>ການຈັດພາຣາກຣາບ </title>
</head>
<body>
ຍິນດີຕ້ອນຮັບ
<! ຂໍ້ຄວາມທີ່ເປັນນີ້ ຄືໝາຍເຫດ>
<hr color="red" width="500" hieght="1" align="center" noshade>
ບົດຮຽນທີ 3 &nbsp; &nbsp; &nbsp; &nbsp; ການຈັດການກັບຂໍ້ຄວາມ
</body>
</html>
ບົດທີ 6 ການກຳນົດລັກສະນະຕົວອັກສອນ
1. ຮູບແບບການກຳນົດັກສະນະຕົວອັກສອນ.
ຄຳສັ່ງ ຄຳອະທິບາຍ
<b> ….. </b> ຕົວໜາ
<i> …… </i> ຕົວເນື້ງ
<u> …. </u> ຂີດກ້ອງຕົວໜັງສື
<tt> …. </tt> ຕົວອັກສອນພິມດິດ
<s> ….. </s> ຕົວອັກສອນຂີດຂ້າ

18. ^….. ຕົວອັກສອນຂຶ້ນກຳລັງ
_….. ຕົວອັກສອນຫ້ອຍ
ຕົວຢ່າງ:
<html>
<head>
<title>ກຳນົດລັກສະນະຕົວ
ອັກສອນ</title>
</head>
<body>
<b>ຕົວອັກສອນເຂັ້ມ</b><br>
<I>ຕົວເນີ້ງ</I><br>
<u>ຕົວອັກສອນຂີດກ້ອງ</u><br>
<tt>ຕົວພິມດີ</tt><br>
<s>ຕົວອັກສອນຂີດຂ້າ</s><br>
^{ຂຶ້ນກຳລັງ}<br>
_{ຕົວຫ້ອຍ}<br>
</body>
</html>

19. 2. ກຳນົດຮູບແບບຕົວອັກສອນ.
ເຮົາສາມາດກຳນົດຮູບແບບຕົວອັກສອນໄດ້ດ້ວຍຄຸນສົມບັດ
ຊື່ວ່າ face ແລ້ວກຳນົດຄ່າໃຫ້ເທົ່າກັບຮູບແບບຕົວອັກສອນທີ່
ເຮົາຕ້ອງການ ເອກະສານໃນເວັບອະນຸຍາດໃຫ້ກຳນົດແບບຕົວອັກ ສອນໄດ້
ຫຼາຍແບບ ໂດຍບຣາວເຊີຈະມີການກວດສອບໃຫ້ອັດຕະໂນມັດ.
§ ຮູບແບບຕົວອັກສອນພາສາລາວທີ່ເໝາະສົມໄດ້ແກ່: saysettha OT
§ ຮູບແບບຕົວອັກສອນພາສາອັງກິດທີ່ເໝາະສົມຄື: Arial,Helvetica,..
ຮູບແບບຄຳສັ່ງ: <font face="ຮູບແບບອັກສອນ">welcome to my site</font>
ຕົວຢ່າງ:
<html>
<head>
<title>ການກຳນົດຮູບແບບອັກສອນ</title>
</head>
<body>
<center>ການກຳນົດແບບຕົວອັກສອນ</center>
<font face="Arial">Arial Font</font><br>
<font face="saysettha OT"> ຕົວອັກສອນພາສາລາວໃນແບບ
saysetthaOT</font><br>
</body>
</html>
3. ການກຳນົດຕົວອັກສອນເປັນຫົວຂໍ້ເລື່ອງ(Heading).
ມີຮູບແບບຄຳສັ່ງ:< Hn> ຂໍ້ຄວາມ </Hn>
ຂໍ້ຄວາມລັກສະນະຫົວເລື່ອງຈະຄວບຄຸມດ້ວຍແທັກ <Hn> ໂດຍ
n ແມ່ນຕົວເລກສະແດງຂະໜາດຂອງຕົວອັກສອນ ເຊິ່ງຄ່າຂອງ n ຈະມີຄ່າ
ແຕ່ 1 – 6
ຕົວຢ່າງ:
<H1>
ຕົວອັກສອນຫົວເລື່ອງມີຂະໜາດ-

20. 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 ໄວ້ພາຍໃນ <body> ມີຮູບແບບການຂຽນ
ດັ່ງນີ້:
<body text="ຊື່ສີ ຫຼືລະຫັດສີ">
6. ການກຳນົດສີຕົວອັກສອນສະເພາະ.
ໝາຍເຖິງ ຄຳສັ່ງທີ່ເຮົາໃຊ້ໃນການປ່ຽນສີຂອງຕົວອັກສອນໃນ
ສ່ວນທີ່ເຮົາຕ້ອງການໃຫ້ເກີດສີສັນແຕກຕ່າງຈາກຕົວອັກສອນ
ອື່ນໆ
ຮູບແບບຄຳສັ່ງ: <font color="ຊື່ສີ ຫຼືລະຫັດສີ">ຂໍ້ຄວາມ</font>
7. ການກຳນົດສີຕົວອັກສອນທີ່ເປັນຈຸດການເຊື່ອມໂຍງ.
ແມ່ນເຮົາຈະກຳນົດໃນສ່ວນຂອງ <body> ໂດຍເພີ່ມຄຸນລັກສະນະ
link=ຊື່ສີ ຫຼືລະຫັດສີ, alink=ຊື່ສີ ຫຼືລະຫັດສີ, vlink= ຊື່ສີ
ຫຼືລະຫັດສີ
<body text="#F0F0F0" link="#FFFF00" alink="#0077FF" vlink="#22AA22">

21. ຕົວຢ່າງ:
<HTML>
<HEAD><TITLE>ການກຳນົດຕົວອັກສອນເປັນຫົວເລື່ອງ</TITLE></HEAD>
<body bgcolor="#000000" text="orange" link="red" vlink="green"alink="yellow">
<marquee bgcolor="cyan"><font size="4">welcome</font></marquee>
<hr color="red">
<a href="#">Home</a>&nbsp;|&nbsp<a href="#">About us</a>&nbsp;|&nbsp;
<a href="#">Services</a>&nbsp;|&nbsp;<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>
</BODY>
</HTML>
ຕົວຢ່າງລະຫັດສີ
ໝາຍເຫດ: ການໃສ່ລະຫັດສີທຸກໆຄ່າຈະຕ້ອງຂຶ້ນຕົ້ນດ້ວຍ
ເຄື່ອງໝາຍ #

22. ບົດທີ 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>
ຕົວຢ່າງ:
<HTML>
<HEAD>
<TITLE>ການກຳນົດຕົວອັກສອນເປັນຫົວເລື່ອງ</TITLE>

23. </HEAD>
<BODY bgcolor="#000000" text="orange" link="red" vlink="green" alink="yellow">
<marquee bgcolor="yellow" behavior="alternate" width="200" height="20">
ຂໍ້ຄວາມເລື່ອນ </marquee>
<hr color="red">
<a href="#">Home</a>&nbsp;|&nbsp;
<a href="#">About us</a>&nbsp;|&nbsp;
<a href="#">Services</a>&nbsp;|&nbsp;
<a href="#">Contact us</a>
</BODY>
</HTML>

24. ບົດທີ 8 ການກຳນົດສີພື້ນຫຼັງ ແລະການໃສ່ຮູບໃນໜ້າເວັບ
1. ການກຳນົດພື້ນຫຼັງໜ້າເວັບ.
ການກຳນົດສີພື້ນຫຼັງຂອງເວັບເພຈ ຈະກຳນົດຄຸນສົມບັດຊື່
bgcolor ໄວ້ພາບໃນແທັກ <body> ແລ້ວກຳນົດຄ່າໃຫ້ເທົ່າກັບ ຊື່ສີ
ຫຼືລະຫັດສີ ເຊິ່ງມີຮູບແບບການຂຽນດັ່ງນີ້:
<body bgcolor="ຊື່ສີ ຫຼືລະຫັດສີ">
ຕົວຢ່າງ:
<html>
<head><title>ການໃສ່ສີພື້ນຫຼັງໃຫ້ກັບໜ້າເວັບ</title></head>

25. <body bgcolor="yellow">
ສີພື້ນຫຼັງໜ້າເວັບຈະເປັນສີເຫຼືອງ
</body>
</html>
ການໃສ່ຮູບພາບເປັນພື້ນຫຼັງຂອງໜ້າເວັບເພຈ ແມ່ນຈະໃຊ້ຄຸ
ນສົມບັດ background ໄວ້ພາຍໃນ <body> ແລ້ວກຳນົດຄ່າເປັນຊື່ຫຼື
ທີ່ຢູ່ຮູບ ເຊິ່ງມີຮູບແບບການຂຽນດັ່ງນີ້:
<body background="ຊື່ທີ່ຢູ່ຂອງຮູບ">
ຕົວຢ່າງ:
<html>
<head><title>ກຳນົດຮູບພາບເປັນພື້ນຫຼັງໜ້າເວັບ</title></head>
<body background="bg_1.jpg">
ພື້ນຫຼັງໜ້າເວັບຈະເປັນຮູບພາບ
</body>
</html>
2. ການນຳໃຊ້ຮູບພາບ.
ຮູບພາບທີ່ນຳມາໃຊ້ໃນອິນເຕີເນັດຄວນເປັນພາບທີ່ມີນາ
ມສະກຸນ .GIF ຫຼື .JPG ເທົ່ານັ້ນ ໂດຍມີຫຼັກການພິຈາລະນາເລືອກຄື:
ພາບທີ່ມີສີນ້ອຍ ຫຼືພາບທີ່ຕ້ອງການເຮັດໃຫ້ພື້ນຫຼັງໂປ່ງໃສ
ຄວນ ບັນທຶກເປັນນາມສະກຸນ .GIF ແລະ ກຳນົດຄ່າເພີ່ມເຕີມ(Option)
ເປັນ Interlaced ໝາຍຄວາມວ່າ ໃນການສະແດງພາບຈະຄ່ອຍໆຊັດເຈນຂຶ້ນມາ.
ແຕ່ຖ້າຕ້ອງການພາບທີ່ມີຄວາມລະອຽດ,ຊັດເຈນຄວນເລືອກພາບທີ່
ມີນາມສະກຸນ .JPG ການນຳຮູບພາບມາປະກອບໃນໜ້າເວັບມີຮູບແບບ
ການຂຽນດັ່ງນີ້:
<img src="ຊື່ຮູບທີ່ເປັນນາມສະກຸນ .GIF ຫຼື .JPG">
ນອກຈາກນັ້ນເຮົາຍັງສາມາດກຳນົດຄຸນລັກສະນະໃຫ້ກັບຮູບພາບໄດ້
ເພື່ອໃຫ້ຮູບພາບສາ ມາດສະແດງຮ່ວມກັບຂໍ້ຄວາມ ແລະເຮັດໃຫ້ໜ້າ

26. ເວັບມີຄວາມໜ້າສົນໃຈຂຶ້ນຕື່ມດ້ວຍການເພີ່ຄຸນລັກສະນະຕ່າງໆ
ດັ່ງລຸ່ມນີ້ໄວ້ພາຍໃນ <img>.
align=top ເປັນການກຳນົດໃຫ້ຂໍ້ຄວາມສະແດງຢູ່ເທິງຮູບ.
align=middle ເປັນການກຳນົດຂໍ້ຄວາມສະແດງຢູ່ເຄິ່ງກາງຂອງຮູບ.
align=bottim ເປັນການກຳນົດຂໍ້ຄວາມສະແດງຢູ່ດ້ານລຸ່ມຂອງຮູບ.
align=left ເປັນການກຳນົດຂໍ້ຄວາມສະແດງຢູ່ເບື້ອງຊ້າຍຂອງຮູບ.
align=right ເປັນການກຳນົດຂໍ້ຄວາມສະແດງຢູ່ເບື້ອງຂວາຂອງຮູບ.
width ກຳນົດຂະໜາດຄວາມກວ້າງຂອງຮູບ ມີຄ່າເປັນຕົວເລກ.
height ກຳນົດຄວາມສູງຂອງຮູບ ມີຄ່າເປັນຕົວເລກ.
hspace ເປັນການກຳນົດໄລຍະຫ່າງລະວ່າງຂອບດ້ານຊ້າຍຂອງຮູບກັບ
ຂໍ້ຄວາມ.
vspace ເປັນການກຳນົດໄລຍະຫ່າງລະວ່າງຂອບດ້ານເທິງຂອງຮູບກັບ
ຂໍ້ຄວາມ.
border ເປັນການກຳນົດເສັ້ນຂອບຂອງຮູບ.
ຕົວຢ່າງ:
<html>
<head><title>Test HTML 2</title></head>
<body leftmargin="0" topmargin="0">
<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 ເປັນການກຳນົດຂໍ້ຄວາມສະແດງຢູ່ດ້ານລຸ່ມຂອງຮູບ.
</body>
</html

27. ບົດທີ 9 ການເຊື່ອມໂຍງເວັບເພຈ
ການເຊື່ອມໂຍງເວັບເພຈ(Hyperlink) ແມ່ນການກຳນົດຂໍ້ຄວາມ
ຫຼືຮູບພາບໃຫ້ເປັນຈູດຂອງການເຊື່ອມໂຍງໄປຍັງ
ເນື້ອຫາຕ່າງໆ
ເຊິ່ງເນື້ອຫານັ້ນອາດຈະຢູ່ໃນໜ້າເວັບເພຈດຽວກັນໃນເວັບໄຊດຽວ
ຫຼືເວັບເພຈທີ່ຢູ່ເວັບໃຊ້ອື່ນກໍ່ໄດ້
ໂດຍການເຂື່ອມໂຍງເວັບເພຈຈະມີ 2 ແບບຄື:
ການເຊື່ອມໂຍງພາຍໃນເວັບເພຈດຽວກັນ,ການເຊື່ອມໂຍງພາຍໃນ
ເວັບໄຊດຽວກັນ,ການເຊື່ອມໂຍງໄປຍັງເວັບໄຊອື່ນ,ການເຊື່ອມໂຍງເພື່ອສ
ົ່ງອີເມລ,ການເຊື່ອມໂຍງເພື່ອດາວໂຫຼດ
9.1 ການເຊື່ອມໂຍງພາຍໃນໜ້າເວັບເພຈດຽວກັນ.
ໃນໜ້າເວັບເພຈທີ່ມີການນຳສະເໜີຂໍ້ມູນເປັນຈຳນວນຫຼວງຫຼາຍໃນໜ
້າເວັບດຽວ ເຮັດໃຫ້ໜ້າເວັບມີຄວາມຍາວ ແລະ
ເວລາເບິ່ງຂໍ້ມູນກໍ່ຕ້ອງໃຊ້ເມົ້າເລື່ອນແຖບເລື່ອນເພື່ອເບິ່
ງຂໍ້ມູນ.
ນອກຈາກການໃຊ້ເມົ້າເລື່ອນແຖບເລື່ອນແລ້ວ
ນັກອອກແບບເວັບເພຈອາດຈະສ້າງຈຸດການເຊື່ອມໂຍງໄວ້ໃນໜ້າເວັບ
ບ່ອນໃດບ່ອນໜຶ່ງທີ່ເໝາະສົມ ໂດຍການສ້າງຈະຕ້ອງກຳນົດ 2 ຢ່າງຄື:
ຈຸດຕົ້ນທາງຂອງການເຊື່ອມໂຍງແລະປາຍທາງ
ການເຊື່ອມໂຍງເຊິ່ງມີວິທີການສ້າງດັ່ງນີ້:
9.1.1 ການສ້າງປາຍທາງຂອງການເຊື່ອມໂຍງ.
ເຮົາຈະໃຊ້ແທັກ(Tag) <a> ໂດຍເພີ່ມຄຳສັ່ງ(Attribute) ທີ່ຊື່ວ່າ name
ແລ້ວກຳນົດຄ່າເປັນຊື່ປາຍທາງຂອງການ
ເຊື່ອມໂຍງ
<a name="ຊື່ປາຍທາງຂອງການເຊື່ອມໂຍງ">
9.1.2 ການສ້າງຕົ້ນທາງຂອງການເຊື່ອມໂຍງ.
ແມ່ນເຮົາຈະໃຊ້ແທັກ <a> ໂດຍການເພີ່ມຄຳສັ່ງ href
ແລ້ວກຳນົດຄ່າເປັນຊື່ປາຍທາງຂອງການເຊື່ອມໂຍງພ້ອມກັບ
ພິມເຄື່ອງໝາຍ # ນຳໜ້າ

28. <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 ປະກອບດ້ວຍເຄື່ອງໝາຍນ້ອຍ
ກວ່າ “&lt; ” ຕາມດ້ວຍຄຳສັ່ງ
ແລະ ປິດທ້າຍດ້ວຍເຄື່ອງໝາຍໃຫຍ່ກວ່າ “ &gt; ” ເປັນສ່ວນທີ່ເຮັດ
ໜ້າທີ່ຕົບແຕ່ງຂໍ້ຄວາມເພື່ອສະແດງຜົນ,
ໂດຍທົ່ວໄປຄຳສັ່ງພາສາ HTML ຈະຢູ່ເປັນຄູ່,ມີພຽງບາງຄຳສັ່ງເທົ່າ
ນັ້ນທີ່ມີພຽງຄຳສັ່ງດຽວ,ໃນແຕ່ລະຄູ່ຄຳສັ່ງ
ຈະມີຄຳສັ່ງເປີດ(Tag ເປີດ) ແລະ ຄຳສັ່ງປິດ(Tag ປິດ) ມີຮູບແບບ
ເໝືອນກັນ ຕ່າງແຕ່ໃນສ່ວນຂອງ
ຄຳສັ່ງປິດຈະມີເຄື່ອງໝາຍ / ນຳໜ້າຄຳສັ່ງ ແລະ ໃນແຕ່ລະຄຳສັ່ງເປີດ
ອາດຈະມີສ່ວນຂະຫຍາຍທີ່ຂຽນດ້ວຍ
ຄຳສັບພາສາອັງກິດຕົວພິມນ້ອຍ ຫຼື ພິມໃຫຍ່ກໍ່ໄດ້</p>
<p>ບັນດາ Tag ຄຳສັ່ງພື້ນຖານຂອງພາສາ HTML.<a name="tag"></a></p>
<p>ກຳນົດຫົວຂໍ້ເລື່ອງ(Headings).</p>

29. <p>Heading ເປັນການກຳນົດຫົວຂໍ້ເລື່ອງ ໂດຍໃຊ້ Tag &lt;h1&gt; ເຖິງ
&lt;h6&gt; ເຊິ່ງ &lt;h1&gt;
ມີຂະໜາດໃຫຍ່ສຸດ &lt;h6&gt; ມີຂະໜາດນ້ອນສຸດ ມີຮູບແບບການຂຽນ
ດັ່ງນີ້:<br />
&lt;h1&gt;This is a heading&lt;/h1&gt;<br />
ຜົນໄດ້ຮັບ

30. 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 ການເຊື່ອມໂຍງໄປຍັງເອກະສານອື່ນໆ.

31. ເຮົາຈະໃຊ້ແທັກ <a> ຄືກັບການເຊື່ອມໂຍງແບບອື່ນໆ
ຕ່າງແຕ່ເຮົາຈະກຳນົດຄ່າຂອງຄຳສັ່ງ href ເທົ່າກັບຊື່ເອກະສານ
ທີ່ເຮົາຕ້ອງການເຊື່ອມໂຍງໄປເຖິງ
ຕົວຢ່າງ:
<p>
<strong>ດາວໂຫຼດ</strong><br>
<a href="chapter1.doc">ບົດຮຽນຍົດທີ 1</a><br>
<a href="homework.pdf">ວຽກບ້ານ</a><br>
</p>
ຜົນໄດ້ຮັບ

32. ບົດທີ 10 ການສ້າງລາຍການ
10.1 ການສ້າງລາຍການແບບມີເລກລຳດັບ(OL: Ordered List).
ການສ້າງລາຍການແບບນີ້ຈະໃຊ້ Tag <ol> ຄູ່ກັບ <li> ເພື່ອສະແດງ
ຜົນລາຍການ ເຊິ່ງເຮົາສາມາດກຳນົດເລກລຳດັບເປັນ ຕົວເລກ,ຕົວອັກສອນ
ຫຼື ເລກໂລແມັງ ໄດ້ດັ່ງນີ້:

33. 10.2 ການສ້າງລາຍການໂດຍມີສັນຍາລັກນຳໜ້າ(Unordered List ຫຼື Bullet
List).
ການສ້າງລາຍການແບບນີ້ ແມ່ນເຮົາຈະໃຊ້ Tag <ul> ຄູ່ກັບ <li>
ເຊິ່ງເຮົາສາມາດກຳນົດສັນຍາລັກຢູ່ໜ້າລາຍການໄດ້ໂດຍໃຊ້ attribute

34. Type ແລະ ກຳນົດຄ່າ type ເທົ່າກັບ disc, circle ແລະ square ໃຫ້ສັງເກດ
ຕົວຢ່າງລຸ່ມນີ້:

35. ບົດທີ 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>

36. <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.

37. - 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>

38. <td>1,500,00</td>
</tr>
</table>

39. ບົດທີ 12 ການສ້າງແບບຟອມ(Form)
ແບບຟອມທີ່ສ້າງຂຶ້ນໃນເວັບໄຊແມ່ນເພື່ອໃຊ້ສຳລັບການຮັບ-
ສົ່ງຂໍ້ມູນຈາກລະຫວ່າງຜູ້ໃຊ້ ແລະເຈົ້າຂອງເວັບໄຊ
ແບບຟອມຕ່າງໆທີ່ພົບເຫັນໃນເວັບໄຊ ເຊັ່ນ ແບບສອບຖາມ,ໃບສັ່ງ
ຊື້,ການລົງຖະບຽນເປັນສະມາຊິກ,
ສະໝຸດຢ້ຽມຢາມ,ສະແດງຄວາມຄິດເຫັນ ເປັນຕົ້ນ.
ໂດຍປົກກະຕິແລ້ວ ການບັນທຶກຂໍ້ມູນຈາກແບບຟອມຈະໃຊ້ໂປຣ
ແກຣມປະເພດ Server Script
ເຊັ່ນ APS,PHP, ອື່ນໆ.
Tag ຄຳສັ່ງໃນການສ້າງ form ມີດັ່ງນີ້:
<form name= “ຊື່ແບບຟອມ” method= “post/get” action= “URL” target= “ການສະ
ແດງ”>
ຊ່ອງຮັບຂໍ້ມູນປະເພດຕ່າງໆ...
......
</form>
ເຊິ່ງພາຍໃນ form ຈະມີອົງປະກອບທີ່ເປັນຊ່ອງຮັບຂໍ້ມູນຢູ່ 3 ປະ
ເພດ ຄື:
12. ຊ່ອງຮັບຂໍ້ມູນປະເພດ Input.

40. ເປັນຮູບແບບທີ່ມີໄວ້ສຳລັບກຳນົດຮູບແບບຂອງຊະນິດຂໍ້ມູນທີ່ຈະ
ນຳເຂົ້າໄປໃນແບບຟອມ ເຊິ່ງມີຮູບແບບການນຳໃຊ້
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>
ຜົນໄດ້ຮັບ

41. 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.
ຂໍ້ມູນທີ່ມີລັກສະນະເປັນຕົວເລືອກ
ໂດຍຈະສະແດງເປັນຮູບວົງມົນນ້ອຍໆ
ເພື່ອໃຫ້ເລືອກແລະສາມາດເລືອກໄດ້ພຽງ
ຕົວເລືອກດຽວ ສັງເກດຮູບແບບການຂຽນດັ່ງລຸ່ມນີ້:

42. < 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>
ຕົວຢ່າງ:

43. <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>
ຜົນໄດ້ຮັບ
13.ຊ່ອງຮັບຂໍ້ມູນປະເພດ textarea.
ເປັນຮູບແບບໃນການສ້າງຊ່ອງຮັບຂໍ້ມູນແບບຫຼາຍແຖວດ້ວຍແທັກຄຳສ
ັ່ງ <textarea> ເຊິ່ງມີຮູບແບບການຂຽນດັ່ງນີ້:
< form>
< textarea name="ຊື່ຂໍ້ມູນ" rows="ຈຳນວນແຖວ" cols="ຈຳນວນຖັນ">
ຂໍ້ມູນທີ່ຕ້ອງການສະແດງຜົນໄວ້ໃນຊ່ອງຮັບຂໍ້ມູນ
</textarea>
< /form>
ຕົວຢ່າງ:
<form>
ສະແດງຄຳເຫັນ:<br>
<textarea name="text1" rows="5" cols="40">
ຂໍ້ມູນທີ່ຕ້ອງການສະແດງຜົນໄວ້ໃນຊ່ອງຮັບຂໍ້ມູນ
</textarea>
</form>
ຜົນໄດ້ຮັບ

44. 14. ຊ່ອງຮັບຂໍ້ມູນປະເພດ select.
ໃນການສ້າງຕົວເລືອກດ້ວຍແທັກຄຳສັ່ງ <select>
ແມ່ນການສ້າງລາຍການແບບ drop-down ເຊິ່ງມີຮູບແບບການຂຽນ
ດັ່ງນີ້:
<form>
<select name="ຊື່ຂໍ້ມູນ">
<option value="ຄ່າຕົວເລືອກທີ1">ຕົວເລືອກທີ1</option>
<option value="ຄ່າຕົວເລືອກທີ2">ຕົວເລືອກທີ2</option>
<option value="ຄ່າຕົວເລືອກທີ3">ຕົວເລືອກທີ3</option>
..............
</select>
</form>
ຕົວຢ່າງ:
<form>ປະເທດ:
<select name="country">
<option value="laos">ສ.ປ.ປ ລາວ</option>
<option value="vietnam">ຫວຽດນາມ</option>
<option value="japan">ຢີ່ປຸ່ນ</option>
..............

45. </select>
</form>
ຜົນໄດ້ຮັບ