ບົດທີ 1 ຄວາມຮູ້ທົ່ວໄປກ່ຽວກັບເວບໄຊທ໌

ບົດຮຽນບົດນີ້ ຈະເປັນການນໍາສະເໜີ ຄວາມຮູ້ທົ່ວໄປກ່ຽວກັບເວບໄຊ

Transcript

1. ຕອນທີ 1 ເລີ້ມຕົ້ນສ້າງເວບເພຈດ້ວຍHTML ື້ ່ ິ ີ „ ພືນຖານກ່ຽວກ ັບອິນເຕີເນັດ „ ກ່ອນລົງມືຂຽນ HTML „ ເລີ້ມຕົ້ນສ້າງເວບເພຈ 1 Web Technology ບົດທີ 1 ພື້ນຖານກ່ຽວກ ັບອິນເຕີເນັດ 1.1. ອິນເຕີເນັດ (Internet) ິ ີ ັ ¾ ອິນເຕີເນັດ ¾ ໂຄງສ້າງຂອງອິນເຕີເນັດ 1.2. ເວີໄວເວບ (World Wide Web) ¾ ເວີໄວເວບ ¾ ຄ ໍາສັບທີ່ ຄວນຮູ້ກ່ຽວກ ັບເວບ ິ ີ ັ ົ່ ໍ້ ໃ ໍ ິ 2 Web Technology 1.3. ວິທີການຮັບສົງຂໍມູນໃນບໍລິການເວບ ¾ ໂຄງສ້າງຂອງ WWW
2. 1.1. ອິນເຕີເນັດ (Internet) ອິນເຕີເນັດ (Internet) ໃ ້ ໄ ້ ້ ່ ໃ ່ໃ „ ການໃຊ້ງານອິນເຕີເນັດໄດ້ເຂົາມາເປັນສ່ວນໃຫຍ່ໃນ ຊີວິດປະຈ ໍ າວັນ. „ ອິນເຕີເນັດແມ່ນລະບົບເຄືອຂ່າຍຄອມພິວເຕີທີ່ ເຊື່ອມ ຕໍ່ກ ັນທົ່ວໂລກ. 3 Web Technology „ ຈະມີວິທີການ ແລະ ຂໍ້ກ ໍ າຫນ ົດໃນການເຊື່ອມຕໍ່ເຮັດ ໃຫ້ສາມາດແລກປ່ຽນຂໍ້ມູນ ແລະ ສື່ສານກ ັນໄດ້. ອິນເຕີເນັດ (Internet) „ ພາຍໃນເຄືອຂ່າຍອິນເຕີເນັດມີການໃຫ້ບໍລິການ … World Wide Web : www … World Wide Web : www “ໃຊ້ໂປຣແກຣມເວບບຣາວເຊີເຊື່ອມຕໍ່ໄປໃຊ້ງານເວບໄຊຕ່າງໆ” … Electronic Mail : E-mail “ການສົ່ງຈ ົດຫມາຍໂດຍໃຊ້ເຄື່ອງຄອມພິວເຕີສົ່ງຜ່ານທາງອິນເຕີ ເນັດ” … File Transfer Protocol : FTP “ໃຊ້ໃນການສ ໍາເນົາຂໍ້ມູນຜ່ານອິນເຕີເນັດລະຫວ່າງເຄື່ອງທີ່ ເປັນຜູ້ໃຫ້ ບໍລິການ Server ກ ັບເຄື່ອງຂໍໃຊ້ບໍລິການ Client” 4 Web Technology ບລການ Server ກບເຄອງຂໃຊບລການ Client … Internet Relay Chat : IRC “ການສົນທະນາຜ່ານອິນເຕີເນັດ ຫລື ຫ້ອງສົນທະນາ Chat Room” … ແລະ ອື່ນໆ . . .
3. ໂຄງສ້າງຂອງອິນເຕີເນັດ „ ໂຄງສ້າງຂອງອິນເຕີເນັດຈະຢູ່ໃນຮູບແບບທີ່ ເອີ້ນວ່າ: Cli t S Client – Server. „ Client ເຄື່ອງທີ່ ເປັນຜູ້ຂໍໃຊ້ບໍລິການ „ Server ເຄື່ອງທີ່ ເປັນຜູ້ໃຫ້ບໍລິການ 5 Web Technology 1.2. ເວີໄວເວບ (World Wide Web) ເວີໄວເວບ ໄ ້ ້ ່ „ ເວີໄວເວບ ຫລື ເອີນຫຍໍໆວ່າ www, web, ແລະ w3. „ ຄວາມຫມາຍຂອງແຕ່ລະຄ ໍາສັບຈະຫມາຍເຖິງເຄືອຂ່າຍໄຍ ແມງມຸມທົ່ວໂລກ. „ www ເປັນວິທີການທີ່ ບໍລິການເຜີຍແພ່ ແລະ ເກັບລວບ 6 Web Technology ລວມຂໍ້ມູນຂ່າວສານທີ່ ຄ້າຍຄືກ ັບປຶ້ມເຫລັ້ມຫນຶ່ງ. „ www ປະກອບມີ web site, Homepage ແລະ Web page.
4. ຄ ໍາສັບທີ່ ຄວນຮູ້ກ່ຽວກ ັບເວບ „ ເວບເພຈ (Web Page) ແມ່ນຫນ້າທີ່ ເຮົາເຫັນເມື່ອໃຊ້ໂປຣແກຣມເວບບຣາວເຊີເປີດເວບໄຊ ແມນຫນາທເຮາເຫນເມອໃຊໂປຣແກຣມເວບບຣາວເຊເປດເວບໄຊ ຂື້ນມາ. „ ເວບໄຊ (Web Site) ປະກອບດ້ວຍເວບເພຈຫລາຍໆຫນ້າເວບເພຈແຕ່ລະຫນ້າຈະຢູ່ພາຍ ໄຕ້ຊື້ຫນຶ່ງ ເຊັ່ ນ : www.yahoo.com „ ໂຮມເພຈ (Homepage) 7 Web Technology „ ໂຮມເພຈ (Homepage) ແມ່ນເວບເພຈຫນ້າທ ໍ າອິດຂອງເວບໄຊນ ັ້ນໆ ແຕ່ມ ັກຈະເອີ້ນກ ັນວ່າ ໂຮມເພຈ ກໍ່ຄື ເວບໄຊ. ຕົວຢ່າງ http://www.yahoo.com ຕວຢາງ http://launch.yahoo.com http://travel.yahoo.com Homepage Web Site 8 Web Technology Web Page
5. ຄ ໍາສັບທີ່ ຄວນຮູ້ກ່ຽວກ ັບເວບ „ ເວບເຊີເວີ (Web Server) ຫນ້າທີ່ ເກັບເວບໄຊ ແລະ ໃຫ້ບໍລິການກ່ຽວກ ັບເວບ ຕາມທີ່ ເວບບຣາວເຊີຮ້ອງ ້ ຂໍຂໍ້ມູນ. „ ເວບບຣາວເຊີ (Web Browser) ແມ່ນໂປຣແກຣມທີ່ ໃຊ້ເປີດເວບເພຈ ຫລື ເອີ້ນວ່າ ບຣາວເຊີ ມີຫນ້າທີ່ ຕິດຕໍ່ກ ັບ ເວບເຊີເວີ ເພື່ ອຂໍຂໍ້ມູນທີຕ້ອງການມາສະແດງທີ່ ຫນ້າຈໍຂອງໂປຣແກຣມ ຕົວຢ່າງ ຂອງໂປຣແກຣມ ປະເພດນີ້ Microsoft Internet Exporler (IE), ໂປຣແກຣມ N t N i t ື່ 9 Web Technology Netscape Navigator ແລະ ອນໆ. „ URL ຫຍໍ້ມາຈາກ (Uniform Resource ຄ ໍາສັບທີ່ ຄວນຮູ້ກ່ຽວກ ັບເວບ Locator) ຄືຊື່ທີ່ ໃຊ້ອ້າງອີງເຖິງໄຟລໃນ ອິນ ເຕີເນັດ. „ ໂດເມັນແນມ (Domain Name) ເປັນຊື່ສະເພາະຂອງເວບໄຊ ຕົວຢ່າງ yahoo.com. 10 Web Technology URL
6. ຄ ໍາສັບທີ່ ຄວນຮູ້ກ່ຽວກ ັບເວບ „ ລິງ (Link) ຄືສ່ວນເຊື່ອມໂຍງຂອງເວບເພຈ ທີ່ ເຮົາສາມາດຄລິກເພື່ອເປີດເວບເພຈ ຫລື ເວບ ຄສວນເຊອມໂຍງຂອງເວບເພຈ ທເຮາສາມາດຄລກເພອເປດເວບເພຈ ຫລ ເວບ ໄຊ ໂດຍລິງສາມາດເປັນໄດ້ທັງຕົວອັກສອນ ຂໍ້ຄວາມ ຫລື ຮູບພາບ. „ HTML (HyperText Markup Language) ເປັນຊື່ຂອງພາສາທີ່ ໃຊ້ສ້າງເວບເພຈ ຢູ່ພາຍໃນໄຟລເປັນຕົວອັກສອນທີ່ ຖືກຂຽນຂື້ນ ດ້ວຍພາສາ HTML ເຮົາເອີ້ນວ່າ ໄຟລ html ຫລື ເອີ້ນວ່າ: ເວບເພຈ. HTML is an evolving standard (as new technology/tools are added) 11 Web Technology HTML is an evolving standard (as new technology/tools are added) ƒ HTML 1 (Berners-Lee, 1989): very basic, limited integration of multimedia in 1993, Mosaic added many new features (e.g., integrated images) ƒ HTML 2.0 (IETF, 1994): tried to standardize these & other features, but late in 1994-96, Netscape & IE added many new, divergent features ƒ HTML 3.2 (W3C, 1996): attempted to unify into a single standard but didn't address newer technologies like Java applets & streaming video ƒ HTML 4.0 (W3C, 1997): current standard attempts to map out future directions for HTML, not just react to vendors ຄ ໍາສັບທີ່ ຄວນຮູ້ກ່ຽວກ ັບເວບ „ ເວບມາສເຕີ (Web Master) ເປັນຊື່ເອີ້ນຂອງຜ້ດແລເວບໄຊ Banner ເປນຊເອນຂອງຜູດູແລເວບໄຊ. „ ດາວໂລດ (Download) ເປັນການສ ໍາເນົາຂໍ້ມູນຈາກເຊີເວີມາ ທີ່ ເຄື່ອງຄອມພິວເຕີຂອງເຮົາ. „ ອັບໂລດ (Upload) ເປັນການສ ໍາເນົາຂໍ້ມນຈາກເຄື່ອງ 12 Web Technology ເປນການສາເນາຂມູນຈາກເຄອງ ຄອມພິວເຕີຂອງເຮົາໄປທີ່ ເຊີເວີ. „ ແບນເນີ (Banner) ເປັນຮູບພາບທີ່ ປະກ ົດຢູ່ໃນເວບເພຈ
7. ຄ ໍາສັບທີ່ ຄວນຮູ້ກ່ຽວກ ັບເວບ „ ລົງທະບຽນ (Register) ຄືການໃສ່ຂໍ້ມູນລົງໄປໃນແບບຟອມທີ່ ໄດ້ກ ໍ າຫນ ົດມາໃນເວບ ເພື່ ອໃຫ້ໄດ້ຊິດທິພິເສດ. „ Bookmark/Favorites „ Bookmark/Favorites ເປັນຊື່ຂອງຄ ໍາສັ່ງໃນເວບບຣາວເຊີ ຊື່ງໃຊ້ສ ໍາຫລັບເກັບຊື່ເວບໄຊ ຫລື ເວບເພຈທີ່ ຕ້ອງ ການເພື່ ອທີ່ ຈະໄດ້ເປີດມາໃຊ້ຢ່າງວ່ອງໄວໃນພາຍຫລັງ. 13 Web Technology 1.3. ວິທີການຮັບສົ່ງຂໍ້ມູນໃນບໍລິການເວບ ວິທີການຮັບສົ່ງຂໍ້ມູນ „ ວິທີການຮັບສູງຂໍ້ມູນໃນບໍລິການເວບຈະມີລັກຊະນະເຊັ່ນດຽວກ ັນກ ັບ ໂຄງສ້າງ ່ ຂອງລະບົບອິນເຕີເນັດ ທີ່ ເປັນແບບ Client – Server. „ ແຕ່ເນື່ອງຈາກໃນລະບົບອິນເຕີເນັດມີເຊີເວີຢູ່ຫລາກຫລາຍຊຶ່ງມີບັນຫາຂຶ້ນມາວ່າ ບຣາວເຊີຈະຮູ້ໄດ້ແນວໃດວ່າຈະຕ້ອງຕິດຕໍ່ກ ັບເຊີເວີໃດເພື່ອຂໍໄຟລໃດແລະຈະ ໃຊ້ ວິທີໃດໃນການຕິດຕໍ່ „ ເພື່ ອເປັນການແກ້ປັນຫານີ້ຈິ່ງເກີດມີວິທີການໃຊ້ອ້າງອີງເຖິງເຊີເວີໄຟລໃນເຊີເວີ ່ ້ 14 Web Technology ລວມທັງວິທີການຕິດຕໍກ ັບເຊີເວີຂຶນມາ. „ ວິທີການຮັບສົ່ງຂໍ້ມູນທີ່ມີການຮັບສົ່ງໃນບໍລິການເວບ ສ່ວນໃຫຍ່ກໍ່ແມ່ນ ເວບເພຈ.
8. ທີຢູ່ໃນເວີໄວເວບ „ ສ ໍາຫລັບຄົນທີ່ ເຄີຍໃຊ້ງານເວບມາກ່ອນແລ້ວອາດຈະຄຸ້ນເຄີຍກ ັນດີ ກ ັບ ຸ ການປ້ອນ ຊື່ທີ່ ເປັນທີ່ ຢູ່ຂອງເວບໄຊ. „ ທີ່ ຫ້ອງ Address ຖ້າໃຊ້ Internet Explorer. 15 Web Technology „ ທີ່ ຫ້ອງ Location ທີຢູ່ໃນເວີໄວເວບ „ ສິ່ງທີ່ ຢູ່ໃນຫ້ອງ Address ແມ່ນ http://www.yahoo.com http: HyperText Transfer Protocol 16 Web Technology http://www.yahoo.com ວິທີໃນການຮັບສົ່ງຂໍ້ມູນ Directory ທີ່ ເກັບ ໄຟລຕ່າງໆ ຂອງ ເວບໄຊ Domain Name
9. ທີຢູ່ໃນເວີໄວເວບ „ ຫລັງຈາກທີ່ ເຮົາປ້ອນຊື່ໃສ່ທີ່ URL ເປັນ http://www.yahoo.com ແລ້ວບຣາວ ເຊີກໍ່ຈະຕິດຕໍ່ໄປຫາເວບເຊີເວີທີ່ ເກັບເວບໄຊທີ່ ຕ້ອງການໃຫ້ ມີ ຂະບວນດັ່ງນີ້ 17 Web Technology ວິທີທີ່ ບຣາວເຊີໃຊ້ຈ ັດການກ ັບໄຟລ HTML „ ເມື່ອບຣາວເຊີໄດ້ຂໍ້ມູນຈາກເວບເຊີເວີ ບຣາວເຊີກໍ່ຈະນ ໍາຂໍ້ມູນ ູ ູ ດັ່ງກ່າວມາປະມວນຜົນ ເພື່ ອສະແດງ ໃຫ້ຜູ້ໃຊ້ເຫັນ. „ ຖ້າຂໍ້ມູນທີ່ ບຣາວເຊີໄດ້ຮັບມາເປັນໄຟລ HTML ບຣາວເຊີກໍ່ຈະ ສະແດງຜົນຂໍ້ມູນຕາມທີ່ ກ ໍ າຫນ ົດໄວ້ໃນໄຟລ HTML ຊື່ງເປັນ ໄປຕາມທີ່ ຜູ້ຂຽນເວບເພຈກ ໍ າຫນ ົດໄວ້ດ້ວຍພາສາ HTML. 18 Web Technology ູ ຽ
10. ວິທີທີ່ ບຣາວເຊີໃຊ້ຈ ັດການກ ັບໄຟລ HTML 19 Web Technology ໂຄ້ດ HTML ຈາກເຊີເວີ ເວບເພຈທີ່ ເຮົາເຫັນ ເອກກະສານ HyperText „ ເປັນເອກະສານທີ່ ມີລັກຊະນະເດັ່ນກ່ວາເອກະສານທົ່ວໄປ. „ ສາມາດເຊື່ອມໂຍງໄປຍັງເອກະສານອື່ນໆ ຫລື ແມ້ແຕ່ໃນເອ „ ສາມາດເຊອມໂຍງໄປຍງເອກະສານອນໆ ຫລ ແມແຕໃນເອ ກະສານດຽວກ ັນໄດ້. „ ສາມາດທີ່ ຈະເປີດເອກະສານ HyperText ໄດ້ ໂດຍທີ່ ບໍ່ຕ້ອງ ລຽງລ ໍາດັບ. ີ່ ຮັ ໃຫ້ສ ິ ໄປຫ ສ່ ື່ ຫ ື ໃ 20 Web Technology „ ແລະ ຈຸດທເຮດໃຫສາມາດລງໄປຫາສວນອນໆ ຫລ ພາຍໃນ ເອກະສານໄດ້ນ ັ້ນ ຈະເອີ້ນວ່າ HyperLink.
11. ເອກກະສານ HyperText „ ເອກະສານ HyperText vs. ເອກະສານທົ່ວໄປ. ້ ີ 1 ້ ີ 12 ້ ີ 20 ້ ີ „ Markup ເອກະສານ HyperText ເອກະສານທົ່ວໄປ ຫນາທ 1 ຫນາທ 12 ຫນາທ 20 ຫນ້າທີ 50 21 Web Technology ເປັນຕົວຂະຫຍາຍຄວາມດ້ວຍສັນຍາລັກພິເສດ (tags) ຊື່ງມີຮູບແບບຂອງ ໂຄງສ້າງສະເພາະ. ໂຄງສ້າງຂອງ WWW „ ເວບເຊີເວີ (Web Server). „ ເວບໄຊ (Web Site) „ ເວບໄຊ (Web Site). „ ເວບເພຈ (Web Page). „ ເວບບຣາວເຊີ (Web Browser). „ HTTP (HyperText Transfer Protocol) ເປັນຊື່ຂອງຂໍ້ ົ ົ ໃ ື່ ່ ິ ີໃ ື ່ ໃ ້ ົ້ 22 Web Technology ຕົກລົງໃນການສືສານລະຫວາງຄອມພິເຕີໃນເຄືອຂາຍໃຫເຂົາ ໃຈກ ັນ ຫລື ເບິ່ງຂໍ້ມູນໃນເວບໄດ້.
12. ໂຄງສ້າງຂອງ WWW PC PC 23 Web Technology