Important Announcement
PubHTML5 Scheduled Server Maintenance on (GMT) Sunday, June 26th, 2:00 am - 8:00 am.
PubHTML5 site will be inoperative during the times indicated!
EN
Home Explore web_Development

web_Development

Published by Luangprabang TTC, 2019-07-11 23:57:30

Description: web_Development

Search

Read the Text Version

ເອກະສານປະກອບການສອນ ການພດັ ທະນາເວັບໄຊ ICT - ພ້ນຶ ຖານວິຊາຊີບ ປທີ 2 ກະຊວງສກຶ ສາທກິ ານ ແລະ ກລິ າ ວິທະຍາໄລຄຫວຼ ງພະບາງ 2018

ຄານາ ຫຼັກສດສາງຄມັດທະຍົມລະບົບ 12+4 ໄດຮັບການພັດທະນາໃຫທັນກັບສະພາບການພັດທະນາ ເສດຖະກດິ -ສງັ ຄົມຂອງ ສ.ປ.ປ ລາວ ໃນປດຈບັນໄດຫນັ ຈາກການຜະລິດແບບທາມະຊາດໄປສການຜະລິດເປນ ສນິ ຄາ ແລະ ເພືອ່ ກາວໄປສການຫນັ ເປນອດສາຫະກາ ແລະ ທນັ ສະໄໝເທອື່ ລະກາວ. ດງັ ນັ້ນ, ທາງຜຮຽບຮຽງຈ່ຶງໄດຂຽນຫຼັກສດການພດັ ທະນາເວບັ ໄຊ ເຊງ່ິ ເປນປະໂຫຍດໃຫແກນັກສຶກສາ ເມ່ືອຮຽນວິຊານີ້ແລວນັກສຶກສາຄສາມາດໄດນາໃຊດງັ ນີ້: 1. ຕດິ ຕັ້ງ Web Server ເພື່ອສາງເວບັ ໄຊ. 2. ສາງເວັບໄຊໂດຍນາໃຊພາສາ HTML/CSS/JavaScript. 3. ສາງເວັບໄຊໂດຍນາໃຊລະບບົ ຈັດການເນອ້ື ໃນ CMS. 4. ອະທບິ າຍໄດເຖິງຫັຼກການອອກແບບເວັບໄຊ. ຜຮຽບຮຽງຫຼັກສດປມແບບຮຽນເຫຼັ້ມນີ້ ຫວັງວາປມດັງກາວຈະເປນປະໂຫຍດຕໍນັກສຶກສາຄຢາງ ຫຼວງຫຼາຍ ຫາກທານນາໄປໃຊແລວມີຄວາມຄິດເຫັນ, ຂໍສະເໜີ ຫຼື ຄາແນະນາ ຈົງກະລນາສົງໄປຍັງຜຄົ້ນຄວາ ຮຽບຮຽງ ເພື່ອພິຈາລະນາປບປງໃນໂອກາດຕໍໄປ, ຜຄົ້ນຄວາຮຽບຮຽງຈະຖືວາທກຄາຕິຊົມຂອງທານເປນການ ປະກອບສວນເຂ້ົາໃນການປບປງຄນນະພາບການສຶກສາໃຫສງຂຶ້ນ. ຜຄນ້ົ ຄວາຮຽບຮຽງ

ສາລະບານ ໜາ້ 1 ຫວົ ຂໍ້ ພາກທີ 1 ເລ່ ມີ ຕນົ້ ພດັ ທະນາເວບັ ໄຊ (Part 1 Beginning Website Development)………. ບດົ ທີ 1 ແນະນໍາກ່ ຽວກບັ ການພດັ ທະນາເວບັ ໄຊ (Introduction to Website Development)…………………………………………………………………………………………….. 1 1.1. ເວບັ ໄຊແມ່ ນຫຍງັ ? (What is a Website?)…………………………………………………… 1 1.2. ຄວາມສໍາຄນັ ຂອງເວບັ ໄຊ (Important of Websites)……………………………………….. 2 1.3. ວວິ ດັ ທະນາການຂອງການສາ້ ງເວບັ ໄຊ (Evolution of Websites)………………………….. 3 1.4. ອງົ ປະກອບພນື້ ຖານຂອງການພດັ ທະນາເວບັ ໄຊ (Basic Elements of Website Development)…………………………………………………………………………………………….. 4 6 1.5. ການຕດິ ຕງັ້ HTTP Server (Installing HTTP Server)…………………………………….. 10 1.6. ເຄ່ ອື ງມໃື ນການພດັ ທະນາເວບັ ໄຊ (Website Development Tools)………………….. 12 ບດົ ທີ 2 ພນື້ ຖານການອອກແບບເວບັ ໄຊ (Web Design Basics)………………………………… 12 2.1. ການກຽມຂໍມ້ ນູ ເວບັ ໄຊ (Preparing Website Content)………………………………….. 2.2. ການອອກແບບເວບັ ໄຊ (Designing Website)………………………………………………... 14 2.3. ການຈດັ ແບ່ ງສດັ ສ່ ວນຂອງໜາ້ ເວບັ (Website Layout)……………………………………….. 16 2.4. ການເລອື ກສີ (Coloring)……………………………………………………………………………. 19 ບດົ ທີ 3 ແນະນາໍ ພາສາການສາ້ ງເວບັ ໄຊ HTML (Introduction to HTML)……………………. 22 3.1. HTML ແມ່ ນຫຍງັ ? (What is HTML?)………………………………………………………… 22 3.2. ໂຄງຮາ້ ງພນື້ ຖານຂອງໜາ້ ເວບັ ທ່ ສີ າ້ ງໂດຍ HTML (Basic Webpage Structure with HTML)………………………………………………………………………………………………………… 22 3.3. ລກັ ສະນະຄໍາສ່ ງັ ຂອງພາສາ HTML (HTML Syntax)………………………………………….. 23 3.4. ການໃສ່ Heading (Inserting Headings)…………………………………………………… 26 3.5. ການໃສ່ Paragraph (Inserting Paragraphs)……………………………………………. 26 3.6. ການຈດັ ຮູບແບບຕວົ ໜງັ ສື (Text Formatting)………………………………………………… 27 3.7. ການສາ້ ງລາຍການ (Creating List)………………………………………………………………... 28 3.8. ການໃສ່ ສີ (Web Coloring)……………………………………………………………………….. 32 3.9. ການໃສ່ ຮູບພາບ (Inserting Images)…………………………………………………………… 34

3.10. ການໃສ່ Link (Inserting Link)………………………………………………………………….. 41 3.11. ການສາ້ ງຕາຕະລາງ (Creating Table)…………………………………………………………. 43 3.12. ຄາໍ ສ່ ງັ ພາຍໃນ <head> (HTML Head)……………………………………………………… 51 3.13. ການແບ່ ງສດັ ສ່ ວນເວບັ ໄຊໂດຍນໍາໃຊ້ <div>ແລະ <span> (HTML Blocks)……….. 52 3.14. ການສາ້ ງ Form (Creating Form)…………………………………………………………….. 72 3.15. ຄາໍ ສ່ ງັ Iframe (HTML Iframe)………………………………………………………………. 75 3.16. ແນະນາໍ HTML5 (Introduction to HTML5)……………………………………………. 77 ບດົ ທີ 4 ແນະນໍາການຕບົ ແຕ່ ງເວບັ ໄຊ ໂດຍນໍາໃຊ້ CSS (Introduction to CSS)………………. 79 4.1. CSS ແມ່ ນຫຍງັ ? (What is CSS?)……………………………………………………………….. 79 4.2. ລກັ ສະນະຄໍາສ່ ງັ CSS (CSS Syntax)……………………………………………………………… 79 4.3. id ແລະ class (CSS id & class Selector)…………………………………………………… 81 4.4. ຕວົ ຢ່ າງການສາ້ ງ CSS (CSS Examples)…………………………………………………………. 84 ບດົ ທີ 5 ແນະນໍາພາສາ JavaScript (Introduction to JavaScript)…………………………… 86 5.1. JavaScript ແມ່ ນຫຍງັ ? (What is JavaScript?)……………………………………………. 86 5.2. ລກັ ສະນະຄໍາສ່ ງັ JavaScript (JavaScript Syntax)………………………………………….. 86 90 5.3. ຕວົ ຢ່ າງການນໍາໃຊ້ JavaScript (JavaScript Examples)…………………………………… ບດົ ທີ 6 ແນະນາໍ ພາສາ PHP ແລະ ການເຊ່ ອື ມຕ່ ຖໍ ານຂໍມ້ ນູ MySQL (Introduction to PHP and MySQL Connect)…………………………………………………………………………………. 93 6.1. PHPແມ່ ນຫຍງັ ? (What is PHP?)……………………………………………………………….. 93 6.2. ລກັ ສະນະຄໍາສ່ ງັ PHP (PHP Syntax)…………………………………………………………….. 93 6.3. ຕວົ ຢ່ າງການນໍາໃຊ້ PHP ເຊ່ ອື ມຕ່ ໍຖານຂໍມ້ ນູ MySQL (PHP/MySQL Examples)…….. 98 ພາກທີ 2 ລະບບົ ຈດັ ການເນອື້ ໃນ (Part 2 Content Management System)………………. 111 ບດົ ທີ 7 ແນະນາໍ ກ່ ຽວກບັ Joomla (Introduction to Joomla)………………………………… 111 7.1. ລະບບົ ຈດັ ການເນອື້ ໃນແມ່ ນຫຍງັ ? (What is Content Management System?)…. 111 7.2. ກລໍ ະນສີ ກຶ ສາກ່ ຽວກບັ ການນາໍ ໃຊລ້ ະບບົ ຈດັ ການເນອື້ ໃນ (Case Study of Using Content Management System)………………………………………………………………….. 112 7.3. Joomlaແມ່ ນຫຍງັ ? (What is Joomla?)……………………………………………………… 113 7.4. ການຕດິ ຕງັ້ Joomla (Installing Joomla)……………………………………………………. 114

7.5. ການຕງັ້ ຄ່ າເວບັ ໄຊ (Site Settings)……………………………………………………………….. 119 7.6. ການຈດັ ການເນອື້ ໃນ (Managing Content)………………………………………………….. 123 7.7. ການສາ້ ງລາຍການ (Creating Menu)……………………………………………………………. 127 7.8. ການຈດັ ໂຄງຮ່ າງເວບັ ໄຊ (Module and Template)…………………………………………. 128 7.9. ການຕດິ ຕງັ້ ລະບບົ ເສມີ (Installing Components)………………………………………….. 132 ບດົ ທີ 8 ແນະນໍາກ່ ຽວກບັ WordPress (Introduction to WordPress)…………………….. 134 8.1. WordPressແມ່ ນຫຍງັ ? (What is WordPress?)…………………………………………... 134 8.2. ການຕດິ ຕງັ້ WordPress (Installing WordPress)…………………………………………. 135 8.3. ການຕງັ້ ຄ່ າເວບັ ໄຊ (Website Settings)……………………………………………………….. 141 8.4. ການຈດັ ການເນອື້ ໃນ (Managing Articles)…………………………………………………… 146 ບດົ ທີ 9 ແນະນໍາກ່ ຽວກບັ SMF (Introduction to SMF)…………………………………………. 156 9.1. SMFແມ່ ນຫຍງັ ? (What is SMF?)………………………………………………………………. 156 9.2. ການຕດິ ຕງັ້ SMF (Installing SMF)……………………………………………………………… 156 9.3. ການຕງັ້ ຄ່ າເວບັ ໄຊ (Site Settings)………………………………………………………………. 162

ພາກທີ 1 ເລ່ ມີ ຕນົ້ ພດັ ທະນາເວບັ ໄຊ (Part 1 Beginning Website Development) ບດົ ທີ 1 ແນະນາໍ ກ່ ຽວກບັ ການພດັ ທະນາເວບັ ໄຊ (Introduction to Website Development) 1.1. ເວບັ ໄຊແມ່ ນຫຍງັ ? (What is a Website?) ເວັບໄຊ ແມ່ ນສ່ ືສໍາລັບນໍາສະເໜີຂໍມ້ ູນເທງິ ເຄ່ ືອງຄອມພິວເຕີ ເຊ່ ິງຕອ້ ງເປີດດວ້ ຍໂປຣແກຣມ ສະເພາະທາງທ່ ເີ ອນີ້ ວ່ າ: Web Browser. ເວບັ ໄຊນນັ້ ສາ້ ງຂນຶ້ ມາດວ້ ຍພາສາຄອມພວິ ເຕທີ ່ ເີ ອນີ້ ວ່ າ: HTML (Hyper Text Markup Language) ແລະ ໄດມ້ ກີ ານພດັ ທະນານໍາພາສາຄອມພວິ ເຕີ ພາສາອ່ ນື ໆ ມາ ຮ່ ວມພດັ ທະນາເວບັ ໄຊ ທງັ ນເີ້ ພ່ ອື ໃຫເ້ ວບັ ໄຊມຄີ ວາມສາມາດເພ່ ມີ ຫຼາຍຂນຶ້ ເຊ່ ນັ : ພາສາ PHP, ພາສາ SQL ເປນັ ຕນົ້ . ເວັບໄຊ ນນັ້ ມຄີ ໍາສບັ ສະເພາະທາງຫຼາຍຄໍາເຊ່ ນັ : ເວັບເພຈ (Web page), ໂຮມເພຈ (Home page) ແລະ ລິງ້ (Hyperlink) ເປັນຕົນ້ . ປະຈຸບັນການອອກແບບເວັບໄຊບ່ ໍແມ່ ນເລ່ ືອງຍາກອີກຕ່ ໍໄປ ເນ່ ອື ງຈາກມເີ ຄ່ ອື ງມໃື ນການອອກແບບເວບັ ໄຊ ໃຫເ້ ລອື ກຫາຼ ກຫາຼ ຍ ບ່ ໍວ່ າຈະເປນັ ໂປຣແກຣມສໍາເລດັ ຮູບ ຫຼື ແ ມ່ ນ ແ ຕ່ CMS (Content Management System) ຢ່ າ ງ Joomla, Wordpress, Drupal ເປັນຕນົ້ . (ຮູບທີ 1.1 ພາສາຕ່ າງໆ ທ່ ໃີ ຊໃ້ ນການພດັ ທະນາເວບັ ໄຊ) ເວບັ ໄຊ ຖກື ສາ້ ງຂນຶ້ ດວ້ ຍວດັ ຖຸປະສງົ ທ່ ແີ ຕກຕ່ າງກນັ ເຊ່ ນັ : ເພ່ ອື ສະແດງຂໍມ້ ນູ ຂ່ າວສານຂອງບໍລສິ ດັ ຫາ້ ງຮາ້ ນ ຫຼື ອງົ ກອນຕ່ າງໆ ຫຼື ອາດຈະອອກແບບເວບັ ໄຊເພ່ ອື ຂາຍສນິ ຄາ້ ອອນລາຍ. ເວບັ ໄຊປະເພດນຈີ້ ະມີ 1

ຄວາມຊບັ ຊອ້ ນໃນການອອກແບບເວບັ ໄຊ ຫາຼ ຍກວ່ າເວບັ ໄຊປະເພດສະແດງຂໍມ້ ູນຂ່ າວສານ ເນ່ ອື ງຈາກຈະ ຕອ້ ງມລີ ະບບົ ຕ່ າງໆ ເຂາົ້ ມາກ່ ຽວຂອ້ ງເຊ່ ນັ : ລະບບົ ກະຕ່ າສນິ ຄາ້ , ລະບບົ ການຊໍາລະເງນິ ເປນັ ຕນົ້ . ປະຈບຸ ນັ ການອອກແບບເວບັ ໄຊທ່ ດີ ນີ ນັ້ ຈະຕອ້ ງສະແດງຜນົ ໄດດ້ ໃີ ນຫາຼ ຍອຸປະກອນ ບ່ ໍວ່ າຈະເປນັ ເຄ່ ືອງຄອມພວິ ເຕ,ີ ສະມາດໂຟນ ຫຼື ແທບັ ເລດັ . ທງັ ນີເ້ ພາະວ່ າເວບັ ໄຊບ່ ໍໄດຈ້ າໍ ກດັ ຢ່ ູເທງິ ເຄ່ ອື ງຄອມພວິ ເຕີ ພຽງຢ່ າງດຽວ ຫາກແຕ່ ເວບັ ໄຊສາມາດເປີດໄດເ້ ທງິ ອຸປະກອນທ່ ຫີ າຼ ກຫາຼ ຍ ຫາຼ ຍຂນຶ້ . 1.2. ຄວາມສໍາຄນັ ຂອງເວບັ ໄຊ (Important of Websites) ໃນປະຈບຸ ນັ ເວບັ ໄຊເຂາົ້ ມາມບີ ດົ ບາດ ແລະ ມຄີ ວາມສໍາຄນັ ຕ່ ໍຊວີ ດິ ປະຈາໍ ວນັ ຂອງເຮາົ ຫາຼ ຍ ໂດຍສະ ເພາກ່ ຸມຄນົ ຫຸນຼ້ ໃໝ່ ເປັນກ່ ຸມຄນົ ທ່ ເີ ຕບີ ໃຫຍ່ ມາພອ້ ມກບັ ຄອມພວິ ເຕ,ີ ອນິ ເຕເີ ນດັ ແລະ ເທກັ ໂນໂລຍໄີ ອທີ ເຮັດໃຫວ້ ຖິ ີຊີວດິ ຕອ້ ງການຄວາມທນັ ສະໄໝ ແລະ ທນັ ຕ່ ໍເຫດການຢ່ ູສະເໝ.ີ ເວັບໄຊຈ່ ງຶ ເປັນແຫ່ ຼງສາລະ ສນົ ເທດທ່ ສີ ໍາຄນັ ສໍາລບັ ທຸກຄນົ ເພາະສາມາດເຂາົ້ ເຖງິ ຂໍມ້ ູນໄດຢ້ ່ າງວ່ ອງໄວ ບ່ ໍວ່ າຈະເປັນການຕດິ ຕ່ ໍສ່ ສື ານ, ການປະຊາສໍາພັນຂ່ າວ, ການໂຄສະນາສ່ ືຕ່ າງໆ ຜ່ ານທາງເວັບໄຊ ຫຼແື ມ່ ນແຕ່ ສ່ ືສັງຄມົ ອອນລາຍ Social Network ເຊ່ ນັ : Facebook, Google+ ຫຼື Twitter ທ່ ສີ າມາດຕອບໂຈດການຕດິ ຕ່ ໍສ່ ສື ານໄດເ້ ປນັ ຢ່ າງ ດ.ີ (ຮູບທີ 1.2 ບນັ ດາສ່ ສື ງັ ຄມົ ອອນລາຍຕ່ າງໆໃນປັດຈບຸ ນັ Social Network) ດ່ ງັ ນນັ້ ເວບັ ໄຊຈ່ ງຶ ມບີ ດົ ບາດສໍາຄນັ ຫຼາຍ ທຸກອງົ ກອນທງັ ພາກລດັ ແລະ ເອກະຊນົ ໄດໃ້ ຫຄ້ ວາມ ສໍາຄນັ ຂອງເວບັ ໄຊເພ່ ມີ ຫາຼ ຍຍ່ ງິ ຂນຶ້ ໂດຍມຈີ ດຸ ປະສງົ ເພ່ ອື ການປະຊາສໍາພນັ ຫຼື ເພ່ ອື ການຄາ້ ຂາຍ ແລະ ຫາກ ມກີ ານນໍາສະເໜເີ ວບັ ໄຊໃນຮູບແບບສວຍງາມ, ຄນົ້ ຫາຂໍມ້ ູນງ່າຍ, ມຄີ ວາມໜາ້ ເຊ່ ອື ຖື ກ່ ໍຈະໄດຮ້ ບັ ຄວາມ ນຍິ ມົ ຢ່ າງວ່ ອງໄວ ຊ່ ວຍເພ່ ມີ ຈາໍ ນວນຜູເ້ ຂາົ້ ເບ່ ງິ ຫຼື ລູກຄາ້ ສ່ ປື ະເພດອ່ ນື ໆໄດອ້ ກີ ດວ້ ຍ. ປະໂຫຍດຂອງເວບັ ໄຊມຫີ າຼ ຍຢ່ າງດ່ ງັ ນ:ີ້ 1) ຊ່ ວຍສ່ ງົ ເສມີ ສກັ ກະຍະພາບການແຂ່ ງຂນັ ໃນດາ້ ນທຸລະກດິ 2) ຊ່ ວຍສາ້ ງພາບລກັ ທ່ ດີ ີ ແລະ ຄວາມທນັ ສະໄໝ, ຄວາມໜາ້ ເຊ່ ອື ຖືໃຫກ້ ບັ ອງົ ກອນ, ບໍລສິ ດັ ແລະ ທຸລະກດິ ຕ່ າງໆ 2

3) ຊ່ ວຍເຜີຍແຜ່ ຂໍມ້ ູນຂ່ າວສານ ແລະ ບໍລກິ ານຕ່ າງໆ ໃຫເ້ ປັນທ່ ຮີ ູຈ້ ກັ ຢ່ າງແຜ່ ຫາຼ ຍ ແລະ ຊ່ ວຍຫຸດຼ ຄ່ າ ໃຊຈ້ ່ າຍໃນການໂຄສະນາປະຊາສໍາພນັ 4) ຊ່ ວຍເຮດັ ໜາ້ ທ່ ເີ ປນັ ທ່ ປີ ກຶ ສາ, ໃຫຄ້ ໍາແນະນໍາຕ່ າງໆ ກ່ ຽວກບັ ສນິ ຄາ້ ແລະ ບໍລກິ ານໃຫແ້ ກ່ ລູກຄາ້ ໄດຕ້ ະຫອຼ ດ 24 ຊ່ ວົ ໂມງ ໂດຍບ່ ໍຕອ້ ງລໍຮາ້ ນເປີດໃຫບ້ ໍລກິ ານ. 5) ສາມາດໃຫບ້ ໍລິການຕ່ າງໆ ຂອງທຸລະກດິ ຫຼື ອງົ ກອນແບບອອນລາຍ ເປັນການອໍານວຍຄວາມ ສະດວກແກ່ ລູກຄາ້ 6) ເປັນການເພ່ ມີ ຊ່ ອງທາງໃນການຂາຍສນິ ຄາ້ ແລະ ບໍລກິ ານຂອງບໍລສິ ດັ ອກີ ຊ່ ອງທາງໜ່ ງຶ , ຊ່ ວຍໃຫ ້ ເຂົາ້ ເຖງິ ກ່ ຸມລູກຄາ້ ແລະ ຜູໃ້ ຊບ້ ໍລກິ ານເປົາ້ ໝາຍໄດທ້ ຸກມື້ ຈ່ ງຶ ສາມາດຊ-ື້ ຂາຍສນິ ຄາ້ ຫຼື ບໍລກິ ານ ຜ່ ານເວບັ ໄຊໄດຕ້ ະຫອຼ ດ 24 ຊ່ ວົ ໂມງ ແລະ ສາມາດເຂາົ້ ເຖງິ ໄດຈ້ າກທຸກທ່ ທີ ່ ວົ ໂລກ. 7) ຊ່ ວຍຂາຍສນິ ຄາ້ ທາງອນິ ເຕເີ ນດັ , ສາ້ ງລາຍໄດໂ້ ດຍບ່ ໍຕອ້ ງມໜີ າ້ ຮາ້ ນ ຫຼື ສໍານກັ ງານ, ສາມາດເພ່ ມີ ຍອດຂາຍໃຫກ້ ບັ ທຸລະກດິ ໄດຢ້ ່ າງມປີ ະສດິ ທພິ າບ. 8) ເປນັ ການຍກົ ລະດບັ ມາດຕະຖານການຊ-ື້ ຂາຍ ທງັ ພາຍໃນປະເທດ ແລະ ຕ່ າງປະເທດ. 1.3. ວວິ ດັ ທະນາການຂອງການສາ້ ງເວບັ ໄຊ (Evolution of Websites) ໃນປະຈບຸ ັນເທກັ ໂນໂລຍເີ ວບັ ໄຊ ມຄີ ວາມກາ້ ວໜາ້ ໄປຫຼາຍ ເມ່ ອື ທຽບກບັ ຍຸ ກທໍາອດິ ຂອງການ ພດັ ທະນາເວບັ ໄຊ ຈະເຫນັ ໄດວ້ ່ າຜູສ້ ກຶ ສາທາງດາ້ ນນຈີ້ ະຕອ້ ງໃຊຄ້ ວາມພະຍາຍາມຫາຼ ຍ, ຕອ້ ງໃຊເ້ ວລາດນົ ແລະ ເຄ່ ືອງມຫື ຼາຍໂຕໃນການພດັ ທະນາເວັບໄຊຂຶນ້ ມາແຕ່ ລະເວັບໄຊ. ແຕ່ ໃນປະຈບຸ ັນສາມາດເຮດັ ໄດ້ ວ່ ອງໄວຫຼາຍຂນຶ້ ແລະ ສາມາດຮຽນຮູໄ້ ດງ້ ່າຍ ແລະ ມເີ ຄ່ ອື ງມຊື ່ ວຍສາ້ ງທ່ ງີ ່ າຍ ແລະ ສະດວກ, ສໍາລບັ ຍຸ ກ ຕ່ າງໆ ຂອງເທກັ ໂນໂລຍເີ ວບັ ໄຊ ສາມາດແບ່ ງໄດເ້ ປນັ 3 ຍຸ ກໃຫຍ່ ໆ ດ່ ງັ ນ:ີ້ (ຮູບທີ 1.3 ວວິ ດັ ທະນາການຂອງການສາ້ ງເວບັ ໄຊ)  ຍຸ ກທ່ ີ 1 Static Web ເປັນການຂຽນເວບັ ໄຊໂດຍໃຊພ້ າສາ HTML ລວ້ ນໆ ຢ່ າງຫາຼ ຍກ່ ໍມກີ ານໃຊ້ ສະຄຣິບຝ່ ງັ client ເຊ່ ັນ: JavaScript, VBScript ຫຼື Java Applet ສ່ ວນໃຫຍ່ ຈະນຍິ ມົ ໃຊ ້ ໃນໝ່ ູນກັ ຮຽນ ແລະ ໃຊສ້ າ້ ງໂຮມເພຈສ່ ວນຕວົ , ບດົ ຄວາມທາງວຊິ າການ ເປນັ ຕນົ້ . 3

 ຍຸ ດທ່ ີ 2 Dynamic Web ໄດຮ້ ັບການພດັ ທະນາມາຈາກຍຸ ກທ່ ີ 1 ມກີ ານໃຊສ້ ະຄຣິບທາງຝ່ ັງ Server ມາຊ່ ວຍໃນການເພ່ ມີ ຄວາມສາມາດຂອງ HTML ໃນການຕດິ ຕ່ ໍກນັ ລະຫວ່ າງເຊີເວີ ຢ່ າງ ຖານຂໍມ້ ູນ ຫຼື ອາໄສພະລັງໃນການປະມວນຜົນຂອງເວັບເຊີເວີເພ່ ືອເຮັດວຽກບາງຢ່ າງເຊ່ ັນ: Search, Web board, Guestbook, Chat room, Webmail ໂດ ຍທ່ ີເທັກໂ ນໂລຍີໃນ ການພດັ ທະນາເວບັ ໃນຊ່ ວງຕນົ້ ໆຄື CGI ພາສາທ່ ໃີ ຊຂ້ ຽນສະຄຣບິ ນເີ້ ຊ່ ນັ : C Perl ຕ່ ໍມາໄດມ້ ກີ ານ ພດັ ທະນາເທກັ ໂນໂລຍທີ ່ ມີ ກີ ານເຮດັ ວຽກຄາ້ ຍໆ CGI ເພ່ ືອເຮັດວຽກທາງຝ່ ັງເຊີເວີເຊ່ ນັ : ASP, PHP, JSP ເປນັ ຕນົ້ .  ຍຸ ກທ່ ີ 3 Web Services ເປນັ ຮູບແບບບໍລກິ ານຍຸກໃໝ່ ໃນສງົ ການເວບັ ຕວົ ຢ່ າງ Web service ທ່ ເີ ຫນັ ເດ່ ນັ ແຈງ້ ເຊ່ ັນ: Microsoft Passport ທ່ ໃີ ຊບ້ ໍລິການກວດສອບຄວາມເປັນຕວົ ຕນົ ຈງິ ຜ່ ານເວບັ , ພາສາທ່ ໃີ ຊເ້ ປັນຕວົ ກາງໃນການພດັ ທະນາເວບັ ເຊວີ ດິ ຄື XML ນນັ້ ເອງ. IBM ໄດນ້ ຍິ າມ ຄວາມໝາຍຢ່ າງເປັນທາງການຂອງເວບັ ເຊວີ ດິ ວ່ າແມ່ ນ Web Application ຍຸ ກໃໝ່ ທ່ ປີ ະກອບ ດວ້ ຍສ່ ວນຍ່ ອຍໆ ມຄີ ວາມສມົ ບູນໃນຕວົ ເອງ, ສາມາດຕດິ ຕງັ້ , ຄນົ້ ຫາ, ເລ່ ມີ ເຮດັ ວຽກໄດຜ້ ່ ານເວບັ ເຊວີ ດິ , ສາມາດເຮດັ ຫຍງັ ກ່ ໄໍ ດຕ້ ງັ້ ແຕ່ ວຽກງ່າຍໆເຊ່ ນັ : ດງຶ ຂໍມ້ ນູ ຈນົ ເຖງິ ຂະບວນການທາງທຸລະກດິ ທ່ ຊີ ບັ ຊອ້ ນ. ເມ່ ອື Web service ໂຕໃດໂຕໜ່ ງຶ ເລ່ ມີ ເຮດັ ວຽກ Web service ໂຕອ່ ນື ກ່ ສໍ າມາດ ຮບັ ຮູ ້ ແລະ ເລ່ ມີ ເຮດັ ວຽກໄດອ້ ກີ ດວ້ ຍ. 1.4. ອງົ ປະກອບພນື້ ຖານຂອງການພດັ ທະນາເວບັ ໄຊ (Basic Elements of Website Development) ຫຼກັ ການສາ້ ງ ແລະ ພດັ ທະນາເວບັ ໄຊສາມາດແບ່ ງອອກເປນັ ຂນັ້ ຕອນຕ່ າງໆ ເພ່ ອື ໃຫເ້ ໝາະສມົ ກບັ ຜູເ້ ລ່ ມີ ຕນົ້ ໃຊເ້ ປນັ ແນວທາງ ໃນການສາ້ ງ ແລະ ພດັ ທະນາເວບັ ໄຊ, ການທ່ ຈີ ະສາ້ ງ, ພດັ ທະນາເວບັ ເພຈ ແລະ ນໍາເວບັ ໄຊເຂາົ້ ສ່ ູລະບບົ www ໃຫຄ້ ນົ ອ່ ນື ເຂາົ້ ມາຍຽ້ ມຊມົ ໄດນ້ ນັ້ ມຂີ ະບວນການທ່ ຜີ ູພ້ ດັ ທະນາເວບັ ໄຊຈະ ຕອ້ ງສກຶ ສາ ແລະ ປະຕບິ ດັ ຕາມດ່ ງັ ນ:ີ້ (ຮູບທີ 1.4 ຂະບວນການໃນການພດັ ທະນາເວບັ ໄຊ) 1) ການວາງແຜນການເຮດັ ວຽກ ການວາງແຜນການເຮດັ ວຽກ ປຽບເໝອື ນເຂມັ ທດິ ທ່ ຈີ ະຊທີ້ າງໃຫເ້ ຮາົ ຮູວ້ ່ າຄວນຈະເດນີ ທາງໄປໃນ ທດິ ທາງໃດເພ່ ອື ບ່ ໍໃຫຫ້ ງຼົ ທາງ, ການສາ້ ງເວັບໄຊກ່ ຄໍ າ້ ຍຄກື ນັ ເຮາົ ຈາໍ ເປນັ ຕອ້ ງມກີ ານວາງແຜນການ 4

ເຮັດວຽກໃຫຮ້ ອບດາ້ ນກ່ ອນທ່ ຈີ ະເລ່ ີມລົງມປື ະຕບິ ດັ ໂດຍມຫີ ຼກັ ການທ່ ຕີ ອ້ ງກໍານດົ ໃນການວາງ ແຜນດ່ ງັ ນ:ີ້ 1. ໄລຍະເວລາການເຮດັ ວຽກ ເປນັ ການກາໍ ນດົ ຊ່ ວງເວລາທ່ ຈີ ະໃຊໃ້ ນການສາ້ ງເວບັ 2. ທມີ ງານ ຫຼື ຜູຮ້ ່ ວມງານ ປກົ ກະຕກິ ານສາ້ ງເວບັ ຕອ້ ງເຮດັ ວຽກເປນັ ທມີ ຢ່ າງນອ້ ຍຕອ້ ງມຜີ ູ ້ ຊ່ ຽວຊານ 3 ຝ່ າຍຄື: ຜູຊ້ ່ ຽວຊານດາ້ ນພາສາ HTML ຫຼື ໂປຣແກຣມສາ້ ງເວບັ ເພຈ, ຜູ ້ ຊ່ ຽວຊານດາ້ ນການອອກແບບ ແລະ ການແຕ່ ງພາບ ແລະ ຜູຊ້ ່ ຽວຊານທາງດາ້ ນເນອື້ ໃນ ຫຼື ບນັ ນາທກິ ານ. 3. ງບົ ປະມານ ເປັນການກາໍ ນດົ ຄ່ າໃຊຈ້ ່ າຍ 4. ອຸ ປະກອນ ຫຼື ເຄ່ ືອງມຊື ່ ວຍງານເຊ່ ນັ : ເຄ່ ອື ງຄອມພວິ ເຕີ, ເຄ່ ອື ງສະແກນ ແລະ ຮູບພາບ ປະກອບເວບັ ເພຈ ເປນັ ຕນົ້ . 5. ປນັ ຫາ ແລະ ອຸ ປະສກັ 2) ການຮວບຮວມ ແລະ ວເິ ຄາະໂຄງສາ້ ງ ເປັນຂນັ້ ຕອນໜ່ ງຶ ທ່ ຕີ ່ ໍຈາກການວາງແຜນ, ເປນັ ການນໍາແຜນງານໄປປະຕບິ ດັ ໂດຍການຮວບຮວມຂໍ ້ ມູນທ່ ຈີ ໍາເປັນຕອ້ ງໃຊໃ້ ນການສາ້ ງເວບັ ຕາມຫວົ ຂໍທ້ ່ ເີ ລືອກໄວ ້ ທງັ ເນອື້ ໃນ, ຮູບພາບ, ສຽງ ແລະ ພາບເຄ່ ອື ນໄຫວ, ເກບັ ຮວບຮວມເປັນຟາບຍຂໍມ້ ູນ ຫຼື ໃສ່ ແຟມ້ ແຍກເປັນໝວດໝ່ ູ ເພ່ ືອຄວາມ ສະດວກໃນການນໍາມາໃຊງ້ ານ. 3) ການອອກແບບ ແລະ ການສາ້ ງເວບັ ໄຊ ເປນັ ຂນັ້ ຕອນການນາໍ ຂໍມ້ ນູ ທງັ ໝດົ ມາສາ້ ງເປນັ ເວບັ ໄຊດວ້ ຍພາສາ HTML ຫຼື ເຄ່ ອື ງມໃື ນການສາ້ ງ ເວບັ ອ່ ນື ໆ ຫກຼັ ການສໍາຄນັ ໃນການອອກແບບ ແລະ ສາ້ ງເວບັ ຄ:ື 1. ກາໍ ນດົ ຈດຸ ປະສງົ ເວບັ ໄຊ ໂດຍການວາງເປົາ້ ໝາຍຂອງຜູເ້ ຂາົ້ ເບ່ ງິ ວ່ າເປນັ ກ່ ຸມໃດ. 2. ເລອື ກເວບັ ບຣາວເຊີ ເປນັ ການເລອື ກເວບັ ບຣາວເຊທີ ່ ໃີ ຊສ້ ະແດງຜນົ ເວບັ ໄຊ ຈະໄດກ້ າໍ ນດົ ຂະໜາດກວາ້ ງ, ຍາວ ແລະ ລກັ ສະນະການວາງອງົ ປະກອບເວບັ ຝຫສ້ ວຍງາມ ແລະ ສະແດງຜນົ ໄດໄ້ ວ. 3. ວາງໂຄງຮ່ າງຂອງເວບັ ໄຊ ກາໍ ນດົ ໂຄງຮ່ າງວ່ າມທີ ງັ ໝດົ ຈກັ ເວບັ ເພຈ, ແຕ່ ລະເວບັ ເພຈມີ ເນອື້ ໃນຫຍງັ ແດ່ ຄວນຂຽນເປນັ ແຜນຜງັ ເວບັ ໄຊອອກມາໃນໜາ້ ເຈຍ້ 4. ອອກແບບໜາ້ ຕາເວບັ ເປນັ ຂນັ້ ຕອນໃນການລງົ ມສື າ້ ງເວບັ ເພຈແຕ່ ລະໜາ້ ຕາມທ່ ໄີ ດອ້ ອກ ແບບໄວ ້ ພອ້ ມກບັ ທດົ ສອບຜ່ ານເວບັ ບຣາວເຊີ (ແບບ offline) 4) ທດົ ສອບ ແລະ ປບັ ປຸງເວບັ ໄຊ ໝາຍເຖງິ ການທດົ ສອບແບບ offline ໂດຍທ່ ຍີ ງັ ບ່ ໍໄດນ້ ໍາເວບັ ໄຊເຂາົ້ ສ່ ູອນິ ເຕເີ ນດັ ແຕ່ ກ່ ສໍ າມາດ ສະແດງຜນົ ໄດເ້ ໝອື ນຈງິ ຜ່ ານເວບັ ບຣາວເຊເີ ຊ່ ນັ : IE ເພ່ ອື ກວດສອບຕວົ ຢ່ າງເວບັ ທ່ ສີ າ້ ງໄວເ້ ຊ່ ນັ : 5

ຂະໜາດຕວົ ອກັ ສອນ, ຂະໜາດຮູບພາບ, ການໃຊສ້ ,ີ ການໃຊຕ້ າຕະລາງ ແລະ ອ່ ນື ໆ ວ່ າເໝາະສມົ ຫບຼື ່ ໍ ພອ້ ມກບັ ການປບັ ປຸງເປນັ ທ່ ໜີ າ້ ພໍໃຈ. 5) ເຜຍີ ແຜ່ ຜ່ ານເວບັ ໄຊ ເປນັ ການເຜຍີ ແຜ່ ໃຫຄ້ ນົ ທ່ ວົ ໄປໄດຮ້ ູຈ້ ກັ ຫຼື ເອນີ້ ວ່ າການອບັ ໂຫດຼ (Upload) ໂດຍເຈາົ້ ຂອງເວບັ ໄຊຈະຕອ້ ງຈດົ ທະບຽນໂດເມນເນມ ແລະ ເຊ່ າົ ພນື້ ທ່ ໂີ ຮດ ກ່ ສໍ າມາດນາໍ ເວບັ ເພຈອບັ ໂຫດຼ ຂນຶ້ ສ່ ູອນິ ເຕເີ ນດັ ແລະ ປະຊາສໍາພນັ ໃຫຄ້ ນົ ທ່ ວົ ໄປໄດຮ້ ູຈ້ ກັ . ການທ່ ຈີ ະເຮດັ ໃຫຄ້ ນົ ຮບັ ຮູ ້ ແລະ ເຂາົ້ ມາໃຊ້ ບລໍ ກິ ານເວບັ ໄຊໄດຫ້ າຼ ຍນນັ້ ຈະຕອ້ ງມກີ ານປະຊາສໍາພນັ ຢ່ າງຕ່ ໍເນ່ ອື ງ ແລະ ໃຊເ້ ວລາພໍສມົ ຄວນ ແລະ ຖາ້ ຈະໃຫດ້ ຄີ ວນມີ Counter ຫຼື ໂຕຈດົ ສະຖຕິ ຜິ ູເ້ ຂາົ້ ເບ່ ງິ ກ່ ຈໍ ະຊ່ ວຍໃຫປ້ ະເມນີ ໄດວ້ ່ າເວບັ ໄຊຂອງເຮາົ ໄດຮ້ ບັ ຄວາມສນົ ໃຈຫາຼ ຍໜອ້ ຍປານໃດ. 6) ການພດັ ທະນາເວບັ ໄຊ ເປນັ ການປບັ ປຸງເນອື້ ໃນ, ຮູບພາບປະກອບ ຫຼື ອບັ ເດດເວບັ ໄຊ ຖເື ປນັ ຂນັ້ ຕອນສໍາຄນັ ເພາະໃນ ໂລກຂອງອນິ ເຕເີ ນດັ ມກີ ານປ່ ຽນແປງຢ່ າງວ່ ອງໄວ ຢ່ ູຕະຫອຼ ດເວລາ ຜູເ້ ບ່ ງິ ເວບັ ມກັ ຈະໃຊເ້ ວລາໃນ ການຄນົ້ ຫາ ແລະ ເປດີ ຜ່ ານເວບັ ໄຊຕ່ າງໆ ຢ່ າງວ່ ອງໄວ, ຫາກພບົ ວ່ າເວບັ ໄຊຂອງເຮາົ ບ່ ປໍ ່ ຽນແປງ ຫຼື ມຂີ ໍມ້ ນູ ໃໝ່ ໆ ເພ່ ມີ ຂນຶ້ ເລຍີ ຜູເ້ ຂາົ້ ເບ່ ງິ ເວບັ ກ່ ໍຈະລດົ ຈາໍ ນວນລງົ ໄປເລອື້ ຍໆ ຈນົ ກາຍເປນັ ເວບັ ທ່ ບີ ່ ໍມີ ຄນົ ເຂາົ້ ມາເລຍີ ຫຼື ເປນັ ເວບັ ທ່ ຕີ າຍແລວ້ . 1.5. ການຕດິ ຕງັ້ HTTP Server (Installing HTTP Server) ການກະກຽມໂປຣແກຣມເພ່ ອື ຕດິ ຕງັ້ ໃຫໄ້ ປດາວໂຫດຼ ໂປຣແກຣມ AppServ ຈາກເວບັ ໄຊ http://www.appserv.org/ ໂດຍເລອື ກເອາົ ເວຊີ ນັ ທ່ ຕີ ອ້ ງການຈະຕດິ ຕງັ້ . ຂນັ້ ຕອນການຕດິ ຕງັ້ 1) ດບັ ເບນິ້ ຄກິ ຟາຍ appserv-win32-x.x.x.exe ເພ່ ອື ເລ່ ມີ ການຕດິ ຕງັ້ ຈະປະກດົ ໜາ້ ຈຕໍ າມ ຮູບທີ 1.5 (ຮູບທີ 1.5 ຂນັ້ ຕອນການຕດິ ຕງັ້ ໂປຣແກຣມ AppServ) 6

2) ເຂາົ້ ສ່ ູຂນັ້ ຕອນເງ່ອື ນໄຂການໃຊງ້ ານໂປຣແກຣມ ໂດຍໂປຣແກຣມ AppServ ໄດແ້ ຈກຈ່ າຍໃນ ຮູບແບບ GNU License ຫາກຜູຕ້ ດິ ຕງັ້ ອ່ ານເງ່ອື ນໄຂຕ່ າງໆ ສໍາເລດັ ແລວ້ ຫາກຍອມຮບັ ເງ່ອື ນໄຂ ໃຫກ້ ດົ ປ່ ຸມ I Agree ເພ່ ອື ເຂາົ້ ສ່ ູຂນັ້ ຕອນການຕດິ ຕງັ້ ຕ່ ໄໍ ປ ແຕ່ ຫາກວ່ າບ່ ໍຍອມຮບັ ເງ່ອື ນໄຂໃຫກ້ ດົ ປ່ ຸມ Cancel ເພ່ ອື ອອກຈາກການຕດິ ຕງັ້ ໂປຣແກຣມ AppServ ດ່ ງັ ຮູບທີ 1.6 (ຮູບທີ 1.6 ສະແດງລາຍລະອຽດເງ່ອື ນໄຂ GNU License) 3) ເຂາົ້ ສ່ ູຂນັ້ ຕອນການເລອື ກປາຍທາງທ່ ຕີ ອ້ ງການຕດິ ຕງັ້ ໂດຍຄ່ າເລ່ ມີ ຕນົ້ ປາຍທາງທ່ ຕີ ດິ ຕງັ້ ຈະ ເປນັ C:AppServ ຫາກຕອ້ ງການປ່ ຽນປາຍທາງທ່ ຕີ ດິ ຕງັ້ ໃຫກ້ ດົ ປ່ ຸມ Browse… ແລວ້ ເລອື ກປາຍທາງທ່ ຕີ ອ້ ງການ ຕາມຮູບທີ 1.7 ເມ່ ອື ເລອື ກປາຍທາງສໍາເລດັ ແລວ້ ໃຫກ້ ດົ ປ່ ຸມ Next ເພ່ ອື ເຂາົ້ ສ່ ູຂນັ້ ຕອນການຕດິ ຕງັ້ ຂນັ້ ຕ່ ໍໄປ (ຮູບທີ 1.7 ເລອື ກປາຍທາງການຕດິ ຕງັ້ ໂປຣແກຣມ AppServ) 7

4) ເລອື ກ Package Components ທ່ ຕີ ອ້ ງການຕດິ ຕງັ້ ໂດຍຄ່ າເລ່ ມີ ຕນົ້ ນນັ້ ຈະໃຫເ້ ລອື ກລງົ ທຸກ Package ແຕ່ ຫາກວ່ າຜູໃ້ ຊງ້ ານຕອ້ ງການເລອື ກລງົ ສະເພາະບາງ Package ກ່ ສໍ າມາດ ເລອື ກຕາມຂທໍ້ ່ ຕີ ອ້ ງການອອກ ໂດຍລາຍລະອຽດແຕ່ ລະ Package ມດີ ່ ງັ ນີ້  Apache HTTP Server ຄື ໂປຣແກຣມທ່ ເີ ຮດັ ໜາ້ ທ່ ເີ ປນັ Web Server  MySQL Database ຄື ໂປຣແກຣມທ່ ເີ ຮດັ ໜາ້ ທ່ ເີ ປນັ Database Server  PHP Hypertext Preprocessor ຄື ໂປຣແກຣມທ່ ເີ ຮດັ ໜາ້ ທ່ ປີ ະມວນຜນົ ການເຮດັ ວຽກ ຂອງພາສາ PHP  phpMyAdmin ຄື ໂປຣແກຣມທ່ ໃີ ຊໃ້ ນການບໍລຫິ ານຈດັ ການຖານຂໍມ້ ນູ MySQL ຜ່ ານ ເວບັ ໄຊ ເມ່ ອື ເລອື ກ Package ຕາມຮູບທີ 1.8 ຮຽບຮອ້ ຍແລວ້ ໃຫກ້ ດົ ປ່ ຸມ Next ເພ່ ອື ເຂາົ້ ສ່ ູຂນັ້ ຕອນ ການຕດິ ຕງັ້ ຕ່ ໄໍ ປ (ຮູບທີ 1.8 ເລອື ກ Package Components ທ່ ຕີ ອ້ ງການຕດິ ຕງັ້ ) 5) ກໍານດົ ຄ່ າ Config ຂອງ Apache Web Server ມຢີ ່ ູດວ້ ຍກນັ ທງັ ໝດົ 3 ສ່ ວນ ຕາມຮູບທ່ ີ ຄື Server Name ຄຊື ່ ອງສໍາລບັ ປອ້ ນຂໍມ້ ູນຊ່ ື Web Server ຂອງເຮາົ ເຊ່ ນັ : localhost. Admin Email ຄຊື ່ ອງສໍາລບັ ປອ້ ນຂໍມ້ ນູ ອເີ ມວຜູເ້ ບ່ ງິ ແຍງລະບບົ ເຊ່ ນັ : root@localhost. HTTP Port ຄື ຊ່ ອງສໍາລບັ ໃສ່ Port ທ່ ຈີ ະເອນີ້ ໃຊງ້ ານ Apache Web Server ໂດຍທ່ ວົ ໄປແລວ້ Protocol HTTP ຈະມຄີ ່ າເລ່ ີມຕຄົ້ ື 80 ຫາກວ່ າເຮົາຕອ້ ງການຫຼກີ ລຽ້ ງການໃຊ້ Port 80 ກ່ ໍສາມາດແກໄ້ ຂ ໄດ.້ ຫາກມກີ ານປ່ ຽນແປງ Port ການເຂາົ້ ໃຊງ້ ານ Web Server ແລວ້ ທຸກຄງັ້ ທ່ ເີ ອນີ້ ໃຊງ້ ານເວບັ ໄຊ ຈາໍ ເປັນທ່ ຈີ ະຕອ້ ງລະບຸໝາຍເລກ Port ດວ້ ຍເຊ່ ນັ : ຫາກເລອື ກໃຊ້ Port 99 ໃນການເຂາົ້ ເວບັ ໄຊທຸກຄງັ້ ຕອ້ ງໃຊ້ http://localhost:99 ຈ່ ງຶ ຈະສາມາດເຂາົ້ ໃຊງ້ ານໄດ.້ 8

(ຮູບທີ 1.9 ສະແດງການການດົ ຄ່ າຄອນຟກິ ຂອງ Apache Web Server) 6) ກໍານົດຄ່ າ Config ຂອງ MySQL Database ມຢີ ່ ູດວ້ ຍກັນທງັ ໝົດ 3 ສ່ ວນ ຕາມຮູບທ່ ີ ຄື Root Password ຄຊື ່ ອງສໍາລັບປອ້ ນລະຫດັ ຜ່ ານການເຂາົ້ ໃຊງ້ ານຖານຂໍມ້ ູນຂອງ Root ຫຼື ຜູ ້ ເບ່ ງິ ແຍງລະບບົ ທຸກຄງັ້ ທ່ ເີ ຂາົ້ ໃຊາ້ ນຖານຂໍມ້ ູນໃນລກັ ສະນະທ່ ເີ ປນັ ຜູເ້ ບ່ ງິ ແຍງລະບບົ ໃຫໃ້ ສ່ user ຄື root. Character Sets ໃຊໃ້ ນການກໍານດົ ຄ່ າລະບບົ ພາສາທ່ ໃີ ຊໃ້ ນການຈດັ ເກບັ ຖານຂໍມ້ ູນ, ລຽງລໍາດັບຖານຂໍມ້ ູນ, Import ຖານຂໍມ້ ູນ, Export ຖານຂໍມ້ ູນ, ຕິດຕ່ ໍຖານຂໍມ້ ູນ. Old Password ຫາກມປີ ັນຫາກ່ ຽວກບັ ການໃຊງ້ ານ PHP ກບັ MySQL API ເວີຊນັ ເກ່ າົ ໂດຍພບົ Error Client does not support authentication protocol requested by server; consider upgrading MySQL client ໃຫເ້ ລອື ກໃນສ່ ວນຂອງ Old Password ເພ່ ອື ຫຼກີ ລຽ້ ງປັນຫານີ້ Enable InnoDB ຫາກຕອ້ ງການໃຊຖ້ ານຂໍມ້ ູນໃນຮູບແບບ InnoDB ໃຫເ້ ລອື ກ ໃນສ່ ວນນດີ້ ວ້ ຍ (ຮູບທີ 1.10 ສະແດງການກາໍ ນດົ ຄ່ າຄອນຟກິ ຂອງ MySQL Database) 9

7) ສນິ້ ສຸດຂນັ້ ຕອນການຕດິ ຕງັ້ ໂປຣແກຣມ AppServ ສໍາລບັ ຂນັ້ ຕອນສຸ ດທາ້ ຍນຈີ້ ະມໃີ ຫເ້ ລອື ກວ່ າ ຕອ້ ງການສ່ ັງໃຫມ້ ກີ ານເປີດ Apache ແລະ MySQL ທນັ ທຫີ ຼບື ່ ໍ ຈາກນນັ້ ກດົ ປ່ ຸມ Finish ເພ່ ອື ສໍາເລດັ ການຕດິ ຕງັ້ ໂປຣແກຣມ AppServ (ຮູບທີ 1.11 ສະແດງງໜາ້ ຈຂໍ ນັ້ ຕອນສນິ້ ສຸດການຕດິ ຕງັ້ ໂປຣແກຣມ AppServ) 1.6. ເຄ່ ອື ງມໃື ນການພດັ ທະນາເວບັ ໄຊ (Website Development Tools) ການທ່ ເີ ຮາົ ຈະສາ້ ງເວບັ ໄຊໃຫເ້ ປນັ ລະບບົ ນນັ້ ຈະຕອ້ ງອາໄສກນົ ໄກການເຮດັ ວຽກ ຕງັ້ ແຕ່ ຄນົ ເຮາົ , ຕວົ ກາງ ແລະ ລະບບົ ປະມວນຜນົ ຂໍມ້ ນູ ຈ່ ງຶ ຈະສາມາດສາ້ ງເວບັ ໄຊ ໜ່ ງຶ ໄດ ້ ເຮາົ ມາເບ່ ງິ ຂນັ້ ຕອນການ ພດັ ທະນາເວບັ ໄຊວ່ າມໂີ ປຣແກຣມທ່ ເີ ຮາົ ຈາໍ ເປນັ ຕອ້ ງໃຊແ້ ນວໃດແດ່ ? (ຮູບທີ 1.12 ສະແດງການປະມວນຜນົ ລະຫວ່ າງ Client ແລະ Server) 1) ຕວົ ເວບັ ເຊເີ ວຄີ ື ຈະເປນັ ຕວົ ຄວບຄຸມການເຮດັ ວຽກ ແລະ ຈດັ ການຂະບວນການເຮດັ ວຽກຂອງເຮາົ ທງັ ໝດົ ຈ່ ງຶ ຖວື ່ າເປນັ ຕວົ ຫກຼັ ໆທ່ ຕີ ອ້ ງໃຊເ້ ລຍີ 10

2) ຕວົ ພາສາທ່ ເີ ຮາົ ຕອ້ ງໃຊໃ້ ນການປະມວນຜນົ ກ່ ຄໍ ື ຕວົ ພາສາທ່ ເີ ຮາົ ໃຊຂ້ ຽນໂປຣແກຣມນນັ້ ເອງ, ປະຈຸ ບນັ ຕວົ ພາສາມຫີ າຼ ຍພາສາເຊ່ ນັ : ພາສາ PHP, ພາສາ HTML, ພາສາ ASP ເປັນຕນົ້ . 3) ຕວົ ຖານຂໍມ້ ນູ ສໍາລບັ ຖານຂໍມ້ ນູ ນຈີ້ ະເປນັ ຕວົ ທ່ ຊີ ່ ວຍເສມີ ໃຫເ້ ວບັ ໄຊຊ່ ວຍໃນການເກບັ ຂໍມ້ ນູ , ໃນ ສ່ ວນນກີ້ ່ ແໍ ລວ້ ແຕ່ ວ່ າເຮາົ ຈະເລອື ກໃຊໂ້ ຕໃດໂຕໜ່ ງຶ ເຊ່ ນັ : ຖານຂໍມ້ ູນ MySQL, ຖານຂໍມ້ ນູ Data ເປນັ ຕນົ້ . 4) ຕວົ ໂປຣແກຣມທ່ ເີ ຮາົ ຈະໃຊງ້ ານ ປດັ ຈບຸ ນັ ມຕີ ວົ ໂປຣແກຣມທ່ ເີ ຮາົ ຈະໃຊງ້ ານຫາຼ ກຫາຼ ຍໃຫເ້ ລອື ກ ໃຊ ້ ມທີ ງັ ຂອງທ່ ຟີ ີ ແລະ ເສຍເງນິ ເຊ່ ນັ : Notepad, Adobe Dreamweaver, Editor ເປນັ ຕນົ້ . ເຊ່ ງິ ໃນປດັ ຈບຸ ນັ ຕວົ ໂປຣແກຣມທງັ ຫາຼ ຍທ່ ໄີ ດກ້ ່ າວມາຂາ້ ງຕນົ້ ແຕ່ ລະໂຕເປນັ ອດິ ສະຫະຼ ແຍກກນັ ເຮາົ ກ່ ໂໍ ຫຼດມາເທ່ ອື ລະໂຕ ແລະ ໃຫຕ້ ງັ້ ຄ່ າຮ່ ວມກນັ . ເຊ່ ງິ ໃນຍຸກນຖີ້ ວື ່ າເປນັ ເລ່ ອື ງທ່ ຫີ ຍຸ ງ້ ຍາກພໍ ສມົ ຄວນ ດ່ ງັ ນນັ້ ຈ່ ງຶ ມຜີ ູຄ້ ດິ ຄນົ້ ເຄ່ ອື ງມທື ່ ຈີ ະເຮດັ ໃຫເ້ ຮາົ ສະດວກສະບາຍເວລາສາ້ ງເວບັ ໄຊຄ:ື ຈະ ມຊີ ຸດເຄ່ ອື ງມທື ່ ຊີ ່ ວື ່ າ AppServ ທ່ ເີ ຮາົ ສາມາດດາວໂຫດຼ ມາຕດິ ຕງັ້ ໄດເ້ ລຍີ ແລະ ກ່ ສໍ າມາດໃຊງ້ ານ ທຸກໂປຣແກຣມຕ່ າງໆ ຜ່ ານຊຸດເຄ່ ອື ງມນື ໄີ້ ດ.້ 11

ບດົ ທີ 2 ພນື້ ຖານການອອກແບບເວບັ ໄຊ (Web Design Basics) 2.1. ການກຽມຂໍມ້ ນູ ເວບັ ໄຊ (Preparing Website Content) 1) ວດັ ຖຸປະສງົ ໃນການສາ້ ງເວບັ ໄຊ ການສາ້ ງເວບັ ໄຊກ່ ໍຄາ້ ຍຄກື ບັ ການເປີດບໍລສິ ດັ ຂອງຕນົ ເອງ ເຊ່ ິງປັດຈບຸ ນັ ກ່ ໍມກີ ານແຂ່ ງຂນັ ກນັ ຢ່ າງ ຫຼວງຫຼາຍ ການກໍານົດວດັ ຖຸປະສງົ ຫງຼື ດັ ກນົ ລະຍຸ ດຕ່ າງໆ ເພ່ ອື ທ່ ຈີ ະສາ້ ງຈດຸ ເດ່ ນັ ກວ່ າຄ່ ູແຂ່ ງ ເຮົາຈ່ ງຶ ຄວນ ກຽມຄວາມພອ້ ມກ່ ອນການລງົ ຕວົ ຈງິ ດ່ ງັ ນ:ີ້ 1.1) ກໍານດົ ກ່ ຸມເປາົ້ ໝາຍທ່ ຊີ ດັ ເຈນ 1.2) ສ່ ງິ ທ່ ຕີ ອ້ ງການນໍາສະເໜຕີ ່ ໍກ່ ຸມລູກຄາ້ 1.3) ສກຶ ສາເວບັ ໄຊຄ່ ູແຂ່ ງເພ່ ອື ເຕມີ ເຕມັ ຊ່ ອງວ່ າງທາງການຕະຫາຼ ດ 1.4) ສາ້ ງຈດຸ ເດ່ ນັ ແລະ ສາ້ ງພາບລກັ ຕ່ ອໍ ງົ ກອນໄດແ້ ນວໃດ 01 02 ກາໍ ນດົ ກ່ ຸມ ສ່ ງິ ທ່ ຕີ ອ້ ງການ ເປາົ້ ໝາຍທ່ ຊີ ດັ ນາໍ ສະເໜຕີ ່ ໍ ກ່ ຸມລກູ ຄາ້ ເຈນ ວດັ ຖຸປະສງົ ໃນການສາ້ ງເວບັ ໄຊ 04 03 ສາ້ ງຈດຸ ເດ່ ນັ ສກຶ ສາເວບັ ຄ່ ແູ ຂ່ ງ ສາ້ ງພາບລກັ ຕ່ ໍ ເພ່ ອື ເຕມີ ເຕມັ ຊ່ ອງວ່ າງທາງ ອງົ ກອນ ການຕະຫາຼ ດ ຮູບທີ 2.1. ສະແດງແຜນຜງັ ຂອງວດັ ຖຸປະສງົ ໃນການສາ້ ງເວບັ ໄຊ 2) ການກະກຽມຂມໍ້ ນູ ເພ່ ອື ຈດັ ສາ້ ງເວບັ ໄຊ ເມ່ ອື ເຮາົ ກາໍ ນດົ ວດັ ຖຸປະສງົ ໄດແ້ ລວ້ ເຮາົ ກ່ ຈໍ ະເລ່ ມີ ກະກຽມຂໍມ້ ນູ ໃນການຈດັ ສາ້ ງເວບັ ໄຊດ່ ງັ ນ:ີ້ 2.1) ຈດັ ສາ້ ງເມນພູ າຍໃນເວບັ ໄຊ 2.2) ກະກຽມຂໍມ້ ູນ ແລະ ຮູບພາບທ່ ໃີ ຊໃ້ ນແຕ່ ລະເມນໂູ ດຍຈດັ ການແຍກເປນັ Folders ເຊ່ ນັ : Folder Products ຈ ະ ມີຂໍ້ມູນ ທ່ ີພິມ ກ່ ຽ ວກັບ ສິນ ຄ າ້ ແ ຕ່ ລ ະ ຊ ະນິດ ອ າ ດ ຈ ະພິມໃ ສ່ ໃນ Notepad ຫຼື Microsoft Word ກ່ ໍໄດ້ ຈາກນນັ້ ກ່ ໍໃສ່ ຮູບພາບສນິ ຄາ້ ໂດຍຕງັ້ ຊ່ ືໃຫສ້ ອດຄ່ ອງ ກບັ ຂໍມ້ ູນຂອງສນິ ຄາ້ ນນັ້ ໆ 12

Menu1 Menu2 Menu3 Menu4 ...... Submenu1 Submenu1 Submenu2 Submenu2 ......... Submenu3 Submenu4 ຮູບທີ 2.2. ສະແດງຮູບແບບເມນພູ າຍໃນເວບັ ໄຊ ຮູບທີ 2.3. ການກະກຽມຂໍມ້ ນູ ປະກອບເຂາົ້ ໃນເວບັ ໄຊ 3) ຈດົ ຊ່ ໂື ດເມນຂອງເວບັ ໄຊ ການຕງັ້ ຊ່ ເື ວບັ ໄຊມຫີ ກຼັ ການງ່າຍໆຄ:ື 3.1) ຖາ້ ເປັນບໍລສິ ດັ ໃຫຕ້ ງັ້ ຊ່ ຕື າມບລໍ ສິ ດັ . 3.2) ຕງັ້ ຊ່ ສື ນັ້ ແລະ ມຄີ ວາມໝາຍ ຈະເຂາົ້ ເຖງິ ເວບັ ໄຊໄດງ້ ່າຍຂນຶ້ . 3.3) ຕງັ້ ໃຫສ້ ອດຄ່ ອງກບັ ຕວົ ສນິ ຄາ້ ການຕງັ້ ແບບນຈີ້ ະເໝາະສມົ ຕ່ ກໍ ານຄນົ້ ຫາໃນ Search engine. 3.4) ຕງັ້ ຊ່ ຄື ກັ ໆ ເທ່ ໆ ຈະເຮດັ ໃຫຈ້ ດົ ຈາໍ ໄດງ້ ່າຍ. ຮູບທີ 2.4. ຮູບແບບຕວົ ຢ່ າງຂອງການຕງັ້ ຊ່ ໃື ຫກ້ ບັ ເວບັ ໄຊ 13

2.2. ການອອກແບບເວບັ ໄຊ (Designing Website) 2.2.1. ຫກຼັ ການອອກແບບເວບັ ໄຊ ເວບັ ໄຊເປັນສ່ ທື ່ ໄີ ດຮ້ ບັ ຄວາມນຍິ ມົ ຫາຼ ຍໃນໂລກອນິ ເຕເີ ນດັ ເຊ່ ງິ ເວບັ ໄຊເປນັ ສ່ ທື ່ ຢີ ່ ູໃນຄວາມຄວບ ຄຸມຂອງຜູໃ້ ຊໂ້ ດຍສມົ ບູນ ເວາົ້ ຄື ຜູໃ້ ຊສ້ າມາດຕດັ ສນິ ໃຈເລອື ກໄດວ້ ່ າຈະເບ່ ງິ ເວບັ ໄຊໃດ ແລະ ຈະບ່ ໍເລອື ກ ເບ່ ງິ ເວບັ ໄຊໃດ ໄດຕ້ າມຕອ້ ງການ ຈ່ ງຶ ເຮດັ ໃຫຜ້ ູໃ້ ຊບ້ ່ ໍມຄີ ວາມອດົ ທນົ ຕ່ ໍອຸ ປະສກັ ແລະ ປັນຫາທ່ ເີ ກດີ ຈາກ ການອອກແບບເວັບໄຊທ່ ຜີ ິດພາດ ຖາ້ ຜູໃ້ ຊເ້ ຫນັ ວ່ າເວັບກໍາລງັ ເບ່ ງິ ຢ່ ູນນັ້ ບ່ ໍມປີ ະໂຫຍດຕ່ ໍໂຕຂອງເຂົາ ຫຼບື ່ ໍ ເຂາົ້ ໃຈວ່ າເວັບໄຊນຈີ້ ະໃຊງ້ ານແນວໃດ ເຂາົ ກ່ ໍສາມາດທ່ ຈີ ະປ່ ຽນໄປເຂາົ້ ເບ່ ງິ ເວບັ ໄຊອ່ ນື ໆ ໄດຢ້ ່ າງວ່ ອງໄວ ເນ່ ອື ງຈາກປັດຈບຸ ນັ ມເີ ວບັ ໄຊຢ່ ູຫວຼ ງຫາຼ ຍ ແລະ ຍງັ ມເີ ວບັ ໄຊທ່ ເີ ກດີ ຂນຶ້ ໃໝ່ ໆ ທຸກມື້ ຜູໃ້ ຊຈ້ ່ ງຶ ມທີ າງເລອື ກ ຫາຼ ຍຂນຶ້ ແລະ ສາມາດປຽບທຽບຄຸນນະພາບຂອງເວບັ ໄຊຕ່ າງໆ ໄດເ້ ອງ ຮູບທີ 2.5. ສະແດງແຜນຜງັ ຂອງຫກຼັ ການອອກແບບເວບັ ໄຊທ່ ດີ ີ ເວັບໄຊທ່ ີໄດຮ້ ັບການອອກແບບຢ່ າງສວຍງາມ, ມກີ ານໃຊງ້ ານທ່ ີສະດວກ ຍ່ ອມໄດຮ້ ບັ ຄວາມ ສນົ ໃຈຈາກຜູໃ້ ຊ້ ຫາຼ ຍກວ່ າເວບັ ໄຊທ່ ເີ ບ່ ງິ ສບັ ສນົ ວຸນ້ ວາຍ ມຂີ ໍມ້ ູນຫາຼ ກຫາຼ ຍແຕ່ ຫາຫຍງັ ບ່ ໍໄດ ້ ນອກຈາກນຍີ້ ງັ ໃຊເ້ ວລາໃນການສະແດງຜນົ ແຕ່ ລະໜາ້ ຫຼາຍເກນີ ໄປ ເຊ່ ງິ ປັນຫາເຫ່ ຼາົ ນລີ້ ວ້ ນເປນັ ຜນົ ມາຈາກການອອກແບບ ເວບັ ໄຊບ່ ໍດທີ ງັ ນນັ້ ດ່ ງັ ນນັ້ ການອອກແບບເວບັ ໄຊຈ່ ງຶ ເປນັ ຂະບວນການສາໍ ຄນັ ໃນການສາ້ ງເວບັ ໄຊ ໃຫປ້ ະທບັ ໃຈຜູໃ້ ຊ ້ ເຮັດໃຫເ້ ຂົາຢາກກບັ ເຂາົ້ ມາເວັບໄຊເດີມອີກໃນອະນາຄົດ ເຊ່ ິງນອກຈາກຕອງ້ ພດັ ທະນາເວັບໄຊທ່ ດີ ີມີ ປະໂຫຍດແລວ້ ຍງັ ຕອ້ ງຄໍານງຶ ເຖງິ ການແຂ່ ງຂນັ ກບັ ເວບັ ໄຊອ່ ນື ໆ ອກີ ດວ້ ຍ. 2.2.2. ອງົ ປະກອບຂອງການອອກແບບເວບັ ໄຊ ການອອກແບບເວບັ ໄຊທ່ ມີ ປີ ະສດິ ທພິ າບນນັ້ ຕອ້ ງຄໍານງຶ ເຖງິ ອງົ ປະກອບທ່ ສີ ໍາຄນັ ດ່ ງັ ຕ່ ໍໄປນ:ີ້ 1) ຄວາມລຽບງ່າຍ (Simplicity) ໝາຍເຖງິ ການຈາໍ ກດັ ອງົ ປະກອບເສມີ ໃຫເ້ ຫອຼື ສະເພາະອງົ ປະກອບ ຫກຼັ ຄື ໃນການສ່ ສື ານເນອື້ ໃນກບັ ຜູໃ້ ຊນ້ ນັ້ ເຮາົ ຕອ້ ງເລອື ກສະເໜສີ ່ ງິ ທ່ ເີ ຮາົ ຕອ້ ງການນາໍ ສະເໜແີ ທໆ້ 14

ອອກມາໃນສ່ ວນຂອງກຣາຟກິ , ສສີ ນັ , ຕວົ ອກັ ສອນ ແລະ ພາບເຄ່ ອື ນໄຫວ. ຕອ້ ງເລອື ກໃຫພ້ ເໍ ໝ າະ ຖາ້ ຫາກມຫີ ຼາຍເກນີ ໄປຈະລບົ ກວນສາຍຕາ ແລະ ສາ້ ງຄວາມລໍາຄານຕ່ ໍຜູໃ້ ຊ,້ ຕວົ ຢ່ າງເວບັ ໄຊທ່ ີ ໄດຮ້ ັບການອອກແບບທ່ ີດີໄດແ້ ກ່ ເວັບໄຊຂອງບໍລິສັດໃຫຍ່ ໆ ຢ່ າງເຊ່ ັນ: Apple, Adobe, Microsoft ຫຼື Nokia ທ່ ມີ ກີ ານອອກແບບເວບັ ໄຊໃນຮູບແບບທ່ ລີ ຽບງ່າຍ, ບ່ ໍຊບັ ຊອ້ ນ ແລະ ໃຊ ້ ງານຢ່ າງສະດວກ. 2) ຄວາມສະໝ່ ໍາສະເໝີ (Consistency) ໝາຍເຖງິ ການສາ້ ງຄວາມສະໝ່ ໍາສະເໝໃີ ຫເ້ ກດີ ຂນຶ້ ຕະ ຫດຼຶ ທງັ ເວບັ ໄຊ ໂດຍອາດຈະເລອື ກໃຊຮ້ ູບແບບດຽວກນັ ຕະຫອຼ ດທງັ ເວບັ ໄຊກ່ ໄໍ ດ ້ ເພາະຖາ້ ຫາກວ່ າ ແຕ່ ລະໜາ້ ໃນເວບັ ໄຊນນັ້ ມຄີ ວາມແຕກຕ່ າງກນັ ຫຼາຍຈນົ ເກນີ ໄປ ອາດຈະເຮດັ ໃຫຜ້ ູໃ້ ຊເ້ ກດີ ຄວາມ ສບັ ສນົ ແລະ ບ່ ໍແນ່ ໃຈວ່ າກໍາລງັ ຢ່ ູໃນເວບັ ໄຊເດມີ ຫຼບື ່ ໍ ເພາະສະນນັ້ ການອອກແບບເວບັ ໄຊໃນແຕ່ ລະໜາ້ ຄວນຈະມຮີ ູບແບບ, ສະໄຕຂອງກຣາຟກິ , ລະບບົ ການນໍາທາງ (Navigation) ແລະ ໂທນ ສທີ ່ ມີ ຄີ ວາມຄາ້ ຍຄກື ນັ ຕະຫຼອດທງັ ເວບັ ໄຊ. 3) ຄວາມເປັນເອກະລກັ (Identity) ໃນການອອກແບບເວບັ ໄຊຕອ້ ງຄໍານງຶ ເຖິງລັກສະນະຂອງອົງ ກອນເປັນຫຼກັ ເນ່ ອື ງຈາກເວບັ ໄຊຈະສະທອ້ ນເຖງິ ເອກະລກັ ແລະ ລກັ ສະນະຂອງອງົ ກອນ, ການ ເລອື ກໃຊຕ້ ວົ ອກັ ສອນ, ຊຸດສ,ີ ຮູບພາບ ຫຼື ກຣາຟກິ ຈະມຜີ ນົ ຕ່ ໍຮູບແບບຂອງເວບັ ໄຊຫາຼ ຍ ຕວົ ຢ່ າງ ເຊ່ ນັ : ຖາ້ ເຮາົ ຕອ້ ງອອກແບບເວບັ ໄຊຂອງທະນາຄານ ແຕ່ ເຮາົ ກບັ ເລອື ກສສີ ນັ ແລະ ກຣາຟກິ ຫາຼ ກ ຫາຼ ຍ ອາດຈະເຮດັ ໃຫຜ້ ູໃ້ ຊຄ້ ດິ ວ່ າເປນັ ເວບັ ໄຊຂອງສວນສະນຸກ ເຊ່ ງິ ສ່ ງົ ຜນົ ຕ່ ໍຄວາມເຊ່ ອື ຖຂື ອງອງົ ກອນໄດ.້ 4) ເນອື້ ໃນ (Useful Content) ຖເື ປັນສ່ ງິ ສໍາຄນັ ທ່ ສີ ຸ ດໃນເວບັ ໄຊ ເນອື້ ໃນຂອງເວບັ ໄຊຕອ້ ງສມົ ບູນ ແລະ ໄດຮ້ ບັ ການປັບປຸງພດັ ທະນາໃຫທ້ ນັ ສະໄໝຢ່ ູສະເໝ,ີ ຜູພ້ ດັ ທະນາຕອ້ ງກະກຽມຂໍມ້ ູນ ແລະ ເນອື້ ໃນທ່ ຜີ ູໃ້ ຊຕ້ ອ້ ງການໃຫຖ້ ກື ຕອ້ ງ ແລະ ສມົ ບູນ. ເນອື້ ໃນທ່ ສີ ໍາຄັນທ່ ສີ ຸ ດຄືເນອື້ ໃນທ່ ມີ ທີ ມີ ຜູ ້ ພດັ ທະນາສາ້ ງສນັ ຂນຶ້ ມາເອງ ແລະ ບ່ ໍໄປຊໍາ້ ກບັ ເວບັ ອ່ ນື ເພາະຈະຖເື ປນັ ສ່ ງິ ທ່ ດີ ງຶ ດູດຜູໃ້ ຊໃ້ ຫເ້ ຂາົ້ ມາ ເວັບໄຊໄດສ້ ະເໝີ ແຕ່ ຖາ້ ເປັນເວບັ ທ່ ລີ ງິ້ ກບັ ຂໍມ້ ູນເວບັ ໄຊອ່ ນື ໆ ມາເມ່ ອື ໃດກ່ ໍຕາມທ່ ຜີ ູໃ້ ຊຮ້ ູວ້ ່ າ ຂໍ ້ ມນູ ນນັ້ ມາຈາກເວບັ ໃດ ຜູໃ້ ຊກ້ ່ ບໍ ່ ໍຈາໍ ເປັນຕອ້ ງກບັ ມາໃຊງ້ ານລງິ້ ເຫ່ າຼົ ນນັ້ ອກີ . 5) ລະບບົ ການນໍາທາງ (User-Friendly Navigation) ເປນັ ສ່ ວນປະກອບທ່ ມີ ຄີ ວາມສໍາຄນັ ຕ່ ເໍ ວບັ ໄຊຫຼາຍ ເພາະຈະຊ່ ວຍບ່ ໍໃຫຜ້ ູໃ້ ຊເ້ ກດີ ຄວາມສບັ ສນົ ລະຫວ່ າງເບ່ ງິ ເວບັ ໄຊ, ລະບບົ ການນາໍ ທາງຈ່ ງຶ ປຽບເໝອື ນປາ້ ຍບອກທາງ ດ່ ງັ ນນັ້ ການອອກແບບລະບບົ ການນາໍ ທາງ ຈ່ ງຶ ຄວນໃຫເ້ ຂາົ້ ໃຈງ່ າຍ, ໃຊ ້ ງານສະດວກ ຖາ້ ມກີ ານໃຊກ້ ຣາຟກິ ກ່ ຄໍ ວນສ່ ຄື ວາມໝາຍ ຕໍາແໜ່ ງຂອງການວາງ Navigation ກ່ ໍ ຄວນວາງໃຫສ້ ະໝ່ ໍາສະເໝເີ ຊ່ ນັ : ຢ່ ູຕໍາແໜ່ ງເທງິ ສຸ ດຂອງທຸກໜາ້ ເປັນຕນົ້ ຊ່ ຶງຖາ້ ຈະໃຫດ້ ີເມ່ ອື ມີ ລະບບົ ການນາໍ ທາງທ່ ເີ ປນັ ກຣາຟກິ ກ່ ຄໍ ວນເພ່ ມີ ລະບບົ ການນໍາທາງທ່ ມີ ຕີ ວົ ອກັ ສອນໄວທ້ າງລ່ ຸມດວ້ ຍ ເພ່ ືອຊ່ ວຍອໍານວຍຄວາມສະດວກໃຫກ້ ັບຜູໃ້ ຊທ້ ່ ີຍົກເລີກການສະແດງຜົນພາບກຣາຟິກເທງິ ເວບັ ບຣາວເຊ.ີ 6) ຄຸນນະພາບຂອງສ່ ງິ ທ່ ປີ ະກດົ ໃຫເ້ ຫນັ ໃນເວບັ ໄຊ (Visual Appeal) ລກັ ສະນະທ່ ໜີ າ້ ສນົ ໃຈຂອງ ເວບັ ໄຊນນັ້ ຂນຶ້ ຢ່ ູກບັ ຄວາມມກັ ສ່ ວນບຸກຄນົ ເປນັ ສໍາຄນັ ແຕ່ ໂດຍລວມແລວ້ ກ່ ໍສາມາດສະຫຸບຼ ໄດວ້ ່ າ ເວບັ ໄຊທ່ ໜີ າ້ ສົນໃຈນນັ້ ສ່ ວນປະກອບຕ່ າງໆຄວນມຄີ ຸນນະພາບເຊ່ ນັ : ກຣາຟກິ ຄວນສມົ ບູນບ່ ໍມີ 15

ຮອຍຫຼຂື ອບຂັນ້ ໃຫເ້ ຫນັ , ຊະນິດຕວົ ອັກສອນອ່ ານງ່ າຍສະບາຍຕາ, ມກີ ານເລືອກໃຊໂ້ ທນສີທ່ ີ ເຂາົ້ ກນັ ຢ່ າງສວຍງາມ ເປນັ ຕນົ້ . 7) ຄວາມສະດວກຂອງການໃຊງ້ ານໃນສະພາບຕ່ າງໆ (compatibility) ການໃຊງ້ ານຂອງເວບັ ໄຊນນັ້ ບ່ ໍຄວນມຂີ ອບຈາໍ ກດັ ຄື ຕອ້ ງສາມາດຝຊງ້ ານໄດໃ້ ນສະພາບແວດລອ້ ມທ່ ຫີ າຼ ກຫາຼ ຍ, ບ່ ໍມກີ ານບງັ ຕບັ ໃຫຜ້ ູໃ້ ຊຕ້ ອ້ ງຕດິ ຕງັ້ ໂປຣແກຣມອ່ ນື ໃດເພ່ ມີ ເຕມີ ນອກເໜອື ຈາກເວບັ ບຣາວເຊ,ີ ຄວນເປັນເວບັ ທ່ ີ ສະແດງຜນົ ໄດດ້ ໃີ ນທຸກລະບບົ ປະຕບິ ດັ ການ, ສາມາດສະແດງຜນົ ໄດດ້ ໃີ ນທຸກຄວາມລະອຽດຂອງ ໜາ້ ຈໍ ເຊ່ ງິ ຫາກເປນັ ເວບັ ໄຊທ່ ມີ ຜີ ູໃ້ ຊບ້ ໍລກິ ານຫາຼ ຍ ແລະ ກ່ ຸມເປົາ້ ໝາຍຫຼາກຫຼາຍຄວນໃຫຄ້ ວາມ ສໍາຄນັ ກບັ ເລ່ ອື ງນໃີ້ ຫຫ້ າຼ ຍ. 8) ຄວາມຄງົ ທ່ ໃີ ນການອອກແບບ (Design Stability) ຖາ້ ຕອ້ ງການໃຫຜ້ ູໃ້ ຊງ້ ານຮູສ້ ກຶ ວ່ າເວບັ ໄຊມີ ຄຸນນະພາບ, ຖືກຕອ້ ງ ແລະ ເຊ່ ອື ຖໄື ດ ້ ຄວນໃຫຄ້ ວາມສໍາຄນັ ກບັ ການອອກແບບເວບັ ໄຊຫຼາຍທ່ ີ ສຸ ດ. ຕອ້ ງອອກແບບວາງແຜນ ແລະ ຮຽບຮຽງເນອື້ ໃນຢ່ າງຮອບຄອບ, ຖາ້ ເວບັ ທ່ ຈີ ດັ ສາ້ ງຂນຶ້ ບ່ ໍມີ ມາດຕະຖານການອອກແບບ ແລະ ລະບບົ ການຈດັ ການຂໍມ້ ນູ , ຖາ້ ມປີ ັນຫາຫາຼ ຍຂນຶ້ ອາດຈະສ່ ງົ ຜນົ ໃຫເ້ ກດີ ປນັ ຫາ ແລະ ເຮດັ ໃຫຜ້ ູໃ້ ຊງ້ ານໝດົ ຄວາມເຊ່ ອື ຖ.ື 9) ຄວາມຄງົ ທ່ ຂີ ອງການເຮດັ ວຽກ (Function Stability) ລະບບົ ການເຮດັ ວຽກຕ່ າງໆ ໃນເວບັ ໄຊ ຄວນມຄີ ວາມຖກື ຕອ້ ງແນ່ ນອນ ເຊ່ ງິ ຕອ້ ງໄດຮ້ ບັ ການອອກແບບສາ້ ງສນັ ແລະ ກວດສອບຢ່ ູສະເໝີ ຕວົ ຢ່ າງເຊ່ ນັ : ລງິ້ ຕ່ າງໆ ໃນເວັບໄຊ ຕອ້ ງກວດສອບວ່ າຍງັ ສາມາດລງິ້ ຂໍມ້ ູນໄດຖ້ ກື ຕອ້ ງຫບຼື ່ ໍ ເພາະ ເວັບໄຊອ່ ນື ອາດຈະມກີ ານປ່ ຽນແປງໄດຕ້ ະຫຼອດເວລາ, ປັນຫາທ່ ເີ ກດີ ຈາກລງິ້ ກ່ ໍຄື ລງິ້ ຂາດຫາຍ ເຊ່ ງິ ພບົ ເຫນັ ເປນັ ປະຈາໍ ທ່ ເີ ປນັ ປນັ ຫາສາ້ ງຄວາມລໍາຄານໃຫກ້ ບັ ຜູໃ້ ຊຫ້ າຼ ຍທ່ ສີ ຸດ. 2.3. ການຈດັ ແບ່ ງສດັ ສ່ ວນຂອງໜາ້ ເວບັ (Website Layout) ການຈດັ ແບ່ ງສດັ ສ່ ວນໜາ້ ເວບັ ໄຊ ຄກື ານກາໍ ນດົ ໂຄງຮ່ າງ ຫຼື ໂຄງສາ້ ງຂອງໜາ້ ເວບັ ເພຈ, ຂນັ້ ຕອນນີ້ ຈະເປນັ ຂນັ້ ຕອນທາໍ ອດິ ຂອງການເລ່ ມີ ອອກແບບເວບັ ເພຈ ເນ່ ອື ງຈາກວ່ າທຸກເວບັ ເພຈທ່ ດີ ຕີ ອ້ ງມໂີ ຄງຮ່ າງ ຫຼື ໂຄງສາ້ ງ ປຽບເໝອື ນບາ້ ນຫຼອື າຄານທ່ ດີ ຕີ ອ້ ງມໂີ ຄງສາ້ ງທ່ ດີ ີ ແລະ ໝນັ້ ຄງົ . ເວບັ ເພຈກ່ ຊໍ ້ ່ ນັ ກນັ ເວບັ ເພຈທ່ ດີ ີ ກ່ ຕໍ ອ້ ງມກີ ານກໍານດົ ໂຄງສາ້ ງລງົ ໄປໃຫແ້ ນ່ ນອນເຊ່ ນັ ດຽວກນັ . 2.3.1. ແນວຄດິ ແລະ ຂນັ້ ຕອນການຈດັ ແບ່ ງສດັ ສ່ ວນຂອງໜາ້ ເວບັ ໄຊ ສໍາລບັ ບດົ ຄວາມນີ້ ຈະແນະນາໍ ການອອກແບບ Layout ເພ່ ອື ໃຫມ້ ໃື ໝ່ ໄດເ້ ຂາົ້ ໃຈໂຄງສາ້ ງຂອງໜາ້ ເວບັ ໄຊ ອາດຈະບ່ ໍເໝາະກບັ ຜູທ້ ່ ເີ ຄີຍຜ່ ານວຽກງານການອອກແບບເວບັ ໄຊມາແລວ້ ເຊ່ ິງບດົ ຄວາມນຈີ້ ະນໍາ ສະເໜກີ ານໃຊຕ້ າຕະລາງ ຫຼື Tables ໃນການຈດັ ແບ່ ງສດັ ສ່ ວນ. ທງັ ນີ້ ເພ່ ອື ໃຫມ້ ໃື ໝ່ ໄດເ້ ຂາົ້ ໃຈ ແລະ ເບ່ ງິ ພາບຂອງໂຄງສາ້ ງເວບັ ເພຈໄດຢ້ ່ າງຊດັ ເຈນ ແລະ ກ່ ອນຈະລງົ ມປື ະຕບິ ດັ ການ Layout ເວັບໄຊກນັ ສ່ ງິ ທ່ ີ ຄວນຮູກ້ ່ ອນໃນເບອື້ ງຕນົ້ ມດີ ່ ງັ ນ:ີ້ 1) ໃຫຄ້ ດິ ແລະ ຈນິ ຕະນາການໜາ້ ເວບັ ເພຈຂອງເຮາົ ວ່ າຕອ້ ງການໃຫມ້ ຮີ ູບແບບລກັ ສະນະແນວໃດ? 2) ຫຼັງຈາກນັນ້ ໃຫເ້ ລ່ ີມການ Layout ຕາມຈິນຕະນາການຂອງເຮົາ ໂດຍການ Layout ຈະມີ ລກັ ສະນະເປນັ ການໃຊຕ້ າຕະລາງໃນການຈດັ ວາງອງົ ປະກອບຕ່ າງໆ 3) ການ Layout ທ່ ົວໆ ໄປ ໃຫເ້ ຮົາແບ່ ງການວາງອົງປະກອບໜາ້ ເວັບອອກເປັນ 4 ສ່ ວນຄື: Header, Menu, Contents ແລະ Footer 4) ຈາກນນັ້ ກ່ ໍເລ່ ມີ ລງົ ມຈື ດັ ແບ່ ງສດັ ສ່ ວນຂອງໜາ້ ເວບັ ເພຈໄດເ້ ລຍີ . 16

ຮູບທີ 2.6. ການຈດັ ແບ່ ງສດັ ສ່ ວນຂອງໜາ້ ເວບັ ໄຊ 2.3.2. ອງົ ປະກອບຂອງໜາ້ ເວບັ ເພຈ ເວບັ ໄຊໂດຍທ່ ວົ ໄປຈະປະກອບດວ້ ຍອງົ ປະກອບຫກຼັ ຢ່ ູ 4 ສ່ ວນຄ:ື 1) Header ຄສື ່ ວນທ່ ອີ າດຈະເປນັ Title ຫຼື Logo ຂອງເວບັ ໄຊ 2) Menu ຄສື ່ ວນທ່ ຈີ ະເປນັ ຈດຸ Link ເພ່ ອື ເຊ່ ອື ມຕ່ ໍໄປຫາເພຈໃນເນອື້ ເລ່ ອື ງອ່ ນື ໆ ທ່ ເີ ຮົາແບ່ ງອອກ ໄວເ້ ປນັ ໝວດໝ່ ູ (Category) 3) Contents ຄສື ່ ວນທ່ ສີ ໍາຄນັ ທ່ ສີ ຸ ດ ເປັນສ່ ວນທ່ ຈີ ະໄດນ້ ໍາສະເໜຂີ ໍມ້ ູນ ຫຼອື ່ ນື ໆ ໃຫແ້ ກ່ ຜູເ້ ຂາົ້ ເບ່ ງິ ເວບັ ໄຊໄດອ້ ່ ານ 4) Footer ຄສື ່ ວນສະຫຸບຼ ຈບົ ທາ້ ຍຂອງເວບັ ເພຈ ໃນສ່ ວນນອີ້ າດຈະເປັນ E-mail ຂອງ Website ຫກຼື ານອາ້ ງອງີ ສດິ ທກິ ານເປນັ ເຈາົ້ ຂອງ ຫອຼື ່ ນື ໆ. ໃນແຕ່ ລະສ່ ວນປະກອບຂາ້ ງຕນົ້ ກ່ ຈໍ ະມໜີ າ້ ທ່ ໃີ ນການສະແດງຜນົ ທ່ ແີ ຕກຕ່ າງກນັ ອອກໄປ ດ່ ງັ ທ່ ໄີ ດ້ ອະທບິ າຍໄວແ້ ລວ້ ນນັ້ 17

2.3.3 ກາໍ ນດົ ໂຄງສາ້ ງໃຫແ້ ກ່ ໜາ້ ເວບັ ໄຊ ເມ່ ອື ເລ່ ມີ ກາໍ ນດົ ໂຄງສາ້ ງອອກເປນັ 4 ສ່ ວນແລວ້ ຈາກນນັ້ ກ່ ໍຈະເລ່ ມີ ທາໍ ການກາໍ ນດົ ໂຄງສາ້ ງໜາ້ ເວບັ ໄຊຈງິ ກນັ ໃຊຕ້ າຕະລາງກາໍ ນດົ ໂຄງສາ້ ງ ການກາໍ ນດົ ໂຄງສາ້ ງເບອື້ ງຕນົ້ ໃຫເ້ ຮາົ ໃຊຕ້ າຕະລາງ (Table) ໃນການກາໍ ນດົ ໂຄງສາ້ ງໜາ້ ເວບັ ທງັ ນີ້ ເພ່ ອື ໃຫງ້ ່າຍຕ່ ໍການທໍາຄວາມເຂາົ້ ໃຈ ແລະ ເບ່ ງິ ເຫນັ ພາບລວມໄດງ້ ່າຍ ຈາກຕວົ ຢ່ າງຂາ້ ງຕນົ້ ຖາ້ ເຮາົ ນໍາຕາຕະລາງມາໃຊ້ໃນການວິເຄາະໂຄງສາ້ ງ ຈະໄດເ້ ປັນຕາຕະລາງທ່ ີມີ 3 Rows ກັບ 2 Columns (3 x 2) ດ່ ງັ ຮູບ ຮູບທີ 2.7. ສະແດງການໃຊຕ້ າຕະລາງໃນການກາໍ ນດົ ໂຄງສາ້ ງຂອງເວບັ ໄຊ ກາໍ ນດົ ຄວາມກວາ້ ງໜາ້ ເວບັ ໄຊ ຈາກນນັ້ ທໍາການກໍານດົ ຄວາມກວາ້ ງຂອງໜາ້ ເວບັ ໄຊຕາມທ່ ເີ ຮາົ ຕອ້ ງການ ເຊ່ ງິ ການກໍານດົ ຄວາມ ກວາ້ ງນີ້ ຕອ້ ງເບ່ ງິ ຄວາມເໝາະສມົ ຕ່ າງໆ ປະກອບເຊ່ ນັ :  ຂະໜາດຄວາມກວາ້ ງໜາ້ ຈໍ ຂອງຜູເ້ ຂາົ້ ເບ່ ງິ ເວບັ ໄຊ  ປະລມິ ານເນອື້ ໃນຂໍມ້ ູນຂອງເວບັ ໄຊເຮາົ  ອ່ ນື ໆ ໃຫພ້ ຈິ າລະນາຕາມຄວາມເໝາະສມົ 18

ຕວົ ຢ່ າງເຊ່ ນັ :  ຂະໜາດຄວາມກວາ້ ງໜາ້ ຈໍ (Resolution) ຂອງຜູເ້ ຂາົ້ ເບ່ ງິ ເວບັ ໄຊປດັ ຈບຸ ນັ (ປີ 2017) ນຍິ ມົ ໃຊງ້ ານໜາ້ ຈຂໍ ະໜາດ 1,6000 x 900px  ປະລມິ ານເນອື້ ໃນຂໍມ້ ູນຂອງເວບັ ໄຊ ປານກາງ ຈາກຂໍມ້ ູນຂາ້ ງຕນົ້ ເຮາົ ກ່ ອໍ າດຈະກາໍ ນດົ ຄວາມກວາ້ ງຂອງໜາ້ ເວບັ ໄຊທ່ ຂີ ະໜາດ 900 px ກ່ ໍ ໜາ້ ຈະເບ່ ງິ ເໝາະສມົ (ຫບຼື ່ ໍຄວນເກນີ 1,565 px) ເປນັ ຕນົ້ ຮູບທີ 2.8. ສະແດງການກາໍ ນດົ ຄວາມກວາ້ ງຂອງໜາ້ ເວບັ ໄຊໃນປດັ ຈບຸ ນັ 2.4. ການເລອື ກສີ (Coloring) ການສາ້ ງສສີ ນັ ເທງິ ໜາ້ ເວບັ ໄຊ ເປນັ ສ່ ງິ ທ່ ສີ ່ ຄື ວາມໝາຍຂອງເວບັ ໄຊໄດຢ້ ່ າງຊດັ ເຈນ, ການເລອື ກໃຊ້ ສີໃຫເ້ ໝາະສມົ , ກມົ ກນື ບ່ ໍພຽງແຕ່ ຈະສາ້ ງຄວາມເພ່ ງິ ພໍໃຈໃຫກ້ ບັ ຜູໃ້ ຊ້ ແຕ່ ຍງັ ສາມາດເຮດັ ໃຫເ້ ຫນັ ເຖງິ ຄວາມແຕກຕ່ າງລະຫວ່ າງເວບັ ໄຊໄດ.້ ສເີ ປນັ ອງົ ປະກອບຫກຼັ ສໍາຫບຼັ ການຕບົ ແຕ່ ງເວບັ ໄຊ ຈ່ ງຶ ຈາໍ ເປນັ ຢ່ າງຍ່ ງິ ທ່ ີ ຈະຕອ້ ງທາໍ ຄວາມເຂາົ້ ໃຈກ່ ຽວກບັ ການໃຊສ້ .ີ ລະບບົ ສທີ ່ ສີ ະແດງເທງິ ຈຄໍ ອມພວິ ເຕີ ມລີ ະບບົ ການສະແດງຜນົ ຜ່ ານຫຼອດລໍາແສງທ່ ເີ ອນີ້ ວ່ າ CRT (Cathode ray tube) ໂດຍມລີ ກັ ສະນະລະບບົ ສແີ ບບບວກ, ອາໄສການປະສມົ ຂອງແສງສແີ ດງ, ສຂີ ຽວ ແລະ ສີຟາ້ ຫຼື ລະບບົ RGB ສາມາດກາໍ ນດົ ຄ່ າສຈີ າກ 0 ເຖງິ 255 ໄດ.້ ຈາກການລວມສຂີ ອງແມ່ ສຫີ ກຼັ ຈະ ເຮດັ ໃຫເ້ ກດີ ແສງສຂີ າວ, ມລີ ກັ ສະນະເປນັ ຈດຸ ນອ້ ຍໆ ເທງິ ໜາ້ ຈເໍ ຊ່ ງິ ບ່ ໍສາມາດເບ່ ງິ ເຫນັ ດວ້ ຍຕາເປ່ ົາໄດ.້ ຈະ ເບ່ ິງເຫນັ ເປັນສີທ່ ີຖືກປະສົມເປັນເນືອ້ ສີດຽວກນັ ແລວ້ , ຈຸດແຕ່ ລະຈຸດ ຫຼື ພກິ ເຊວ (Pixel) ເປັນສ່ ວນ 19

ປະກອບຂອງພາບເທິງໜາ້ ຈໍຄອມພິວເຕີ ໂດຍຈໍານວນບິດທ່ ີໃຊໃ້ ນການກໍານົດຄວາມສາມາດຂອງ ການສະແດງສີຕ່ າງໆ ເພ່ ືອສາ້ ງພາບເທງິ ຈໍນນັ້ ເອີນ້ ວ່ າ: ບິດເດັບ (Bit-depth) ໃນພາສາ HTML ມກີ ານ ກໍານດົ ສດີ ວ້ ຍລະບບົ ເລກຖານ 16 ເຊ່ ງິ ມເີ ຄ່ ອື ງໝາຍ (#) ຢ່ ູດາ້ ນໜາ້ ແລະ ຕາມດວ້ ຍເລກຖານ 16 ຈາໍ ນວນ ອັກສອນອີກ 6 ຫຼກັ ໂດຍແຕ່ ລະໄບ້ (byte) ຈະມີຕົວອັກສອນ 2 ໂຕແບ່ ງອອກເປັນ 3 ກ່ ຸມເຊ່ ັນ: #FF12AC ການໃຊໂ້ ຕອກັ ສອນແຕ່ ລະໄບນ້ ີ້ ເພ່ ອື ກໍານດົ ລະດບັ ຄວາມເຂັມ້ ຂອງແມ່ ສີແຕ່ ລະສີຂອງຊຸດສີ RGB ໂດຍ 2 ຫຼກັ ທໍາອິດ ສະແດງເຖິງຄວາມເຂມັ້ ຂອງສີແດງ, 2 ຫຼກັ ຕ່ ໍມາສະແດງເຖິງຄວາມເຂມັ້ ຂອງ ສຂິ ຽວ ແລະ 2 ຫກຼັ ສຸດທາ້ ຍສະແດງເຖງິ ຄວາມເຂມັ້ ຂອງສຟີ າ້ ຮູບທີ 2.9. ສະແດງຕວົ ຢ່ າງຄ່ າຂອງສຕີ ່ າງໆ ສມີ ອີ ດິ ທພິ ນົ ໃນເລ່ ອື ງຂອງອາລມົ ການສ່ ຄື ວາມໝາຍທ່ ຊີ ດັ ເຈນ, ກະຕຸນ້ ການຮບັ ຮູທ້ າງດາ້ ນຈດິ ໃຈ ມະນຸດ, ສີແຕ່ ລະສີໃຫຄ້ ວາມຮູສ້ ກຶ , ອາລົມທ່ ບີ ່ ໍເໝອື ນກນັ . ສີບາງສີໃຫຄ້ ວາມຮູສ້ ກຶ ສະຫງບົ , ບາງສໃີ ຫ ້ ຄວາມຮູສ້ ກຶ ຕ່ ນື ເຕນັ້ ຮຸ ນແຮງ, ສີຈ່ ງຶ ເປນັ ປດັ ໄຈສໍາຄນັ ຢ່ າງຍ່ ງິ ຕ່ ໍການອອກແບບເວບັ ໄຊ. ດ່ ງັ ນນັ້ ການເລອື ກ ໃຊໂ້ ທນສີພາຍໃນເວບັ ໄຊເປນັ ການສະແດງເຖງິ ຄວາມແຕກຕ່ າງຂອງສທີ ່ ສີ ະແດງອອກທາງອາລມົ , ມຊີ ວີ ດິ ຊວີ າ ຫໂຼື ສກເສາົ້ , ຮູບແບບຂອງສທີ ່ ສີ າຍຕາຂອງມະນຸດເບ່ ງິ ເຫນັ ສາມາດແບ່ ງອອກເປນັ 3 ກ່ ຸມຄ:ື 1) ສໂີ ທນຮອ້ ນ (Warm Colors) ເປັນກ່ ຸມສທີ ່ ສີ ະແດງເຖງິ ຄວາມສຸ ກ, ຄວາມອ່ ອນໂຍນ, ຄວາມອບົ ອ່ ຸນ ແລະ ດງຶ ດູດໃຈ, ສກີ ່ ຸມນເີ້ ປນັ ກ່ ຸມສທີ ່ ຊີ ່ ວຍໃຫຫ້ າຍຈາກຄວາມເບ່ ອື ໜ່ າຍ, ມຊີ ວີ ດິ ຊວີ າຫາຼ ຍຂນຶ້ . 2) ສໂີ ທນເຍນັ (Cool Colors) ສະແດງເຖງິ ຄວາມທ່ ເີ ບ່ ງິ ສຸ ພາບ, ອ່ ອນໂຍນ, ຮຽບຮອ້ ຍ ເປັນກ່ ຸມສີ ທ່ ມີ ຄີ ນົ ມກັ ຫາຼ ຍທ່ ສີ ຸດ ສາມາດໂນມ້ ນາ້ ວໃນໄລຍະໄກໄດ.້ 3) ສໂີ ທນກາງ (Neutral Colors) ສທີ ່ ເີ ປນັ ກາງ ປະກອບດວ້ ຍສດີ ໍາ, ສຂີ າວ, ສເີ ທາົ ແລະ ສນີ າໍ້ ຕານ ກ່ ຸມສເີ ຫ່ າຼົ ນຄີ້ ສື ກີ າງທ່ ສີ າມາດນໍາໄປປະສມົ ກບັ ສອີ ່ ນື ໆ ເພ່ ອື ໃຫເ້ ກດີ ສກີ າງຂນຶ້ ມາ. 20

ຮູບທີ 2.10. ສະແດງກ່ ຸມຂອງໂທນສທີ ່ ສີ າຍຕາມະນຸດເບ່ ງິ ເຫນັ ສ່ ິງທ່ ີສໍາຄັນຕ່ ໍຜູອ້ ອກແບບເວັບໄຊ ຄືການເລືອກໃຊສ້ ີສໍາລັບເວັບໄຊ, ນອກຈາກຈະມີຜົນຕ່ ໍ ການສະແດງອອກຂອງເວບັ ໄຊແລວ້ ຍງັ ເປັນການສາ້ ງຄວາມຮູສ້ ກຶ ທ່ ດີ ຕີ ່ ໍຜູໃ້ ຊບ້ ໍລກິ ານ. ດ່ ງັ ນນັ້ ຈະເຫນັ ວ່ າສີ ແຕ່ ລະສສີ າມາດສ່ ຄື ວາມໝາຍຂອງເວບັ ໄຊໄດຢ້ ່ າງຊດັ ເຈນ, ຄວາມແຕກຕ່ າງ, ຄວາມສໍາພນັ ທ່ ເີ ກດີ ຂນຶ້ ຍ່ ອມ ສ່ ງົ ຜນົ ໃຫເ້ ວບັ ໄຊມຄີ ວາມໜາ້ ເຊ່ ອື ຖຫື ຼາຍຍ່ ງິ ຂນຶ້ . ຊຸດສແີ ຕ່ ລະຊຸດມຄີ ວາມສໍາຄນັ ຕ່ ໍເວບັ ໄຊ ຖາ້ ເລອື ກໃຊສ້ ບີ ່ ໍ ກງົ ກບັ ວດັ ຖຸ ປະສງົ ຫຼເື ປົາ້ ໝາຍອາດຈະເຮັດໃຫເ້ ວັບໄຊບ່ ໍໜາ້ ສົນໃຈ, ຜູໃ້ ຊບ້ ໍລິການຈະບ່ ໍກບັ ມາໃຊອ້ ີກ ພາຍຫງຼັ ສະນນັ້ ການໃຊສ້ ຢີ ່ າງເໝາະສມົ ເພ່ ອື ສ່ ຄື ວາມໝາຍຂອງເວບັ ໄຊຕອ້ ງເລອື ກໃຊສ້ ີທ່ ມີ ຄີ ວາມກມົ ກນື ກນັ . 21

ບດົ ທີ 3 ແນະນາໍ ພາສາການສາ້ ງເວບັ ໄຊ HTML (Introduction to HTML) 3.1. HTML ແມ່ ນຫຍງັ ? (What is HTML?) ຕນົ້ ກາໍ ເນດີ ຂອງພາສາ HTML ເກດີ ຈາກເມ່ ອື ປີ 1989 ນກັ ຟຊີ ກິ ຊ່ ື Tim Berners-Lee ແຫ່ ງສະ ຖາບນັ CERN ສະເໜງີ ານວໄິ ຈເລ່ ອື ງ prototyped ENQUIRE ແລະ Hypertext system ໃຊສ້ ໍາລບັ ນກັ ວໄິ ຈຂອງສະຖາບນັ ເພ່ ອື ແບ່ ງຂໍມ້ ນູ ກນັ ແລະ ຖກື ພດັ ທະນາມາເລ່ ອື ຍໆ ຈນົ ເຖງິ ປດັ ຈບຸ ນັ HTML ຕົ ວ ຫ ຍໍ້ມ າ ຈ າ ກ Hyper Text Markup Language ເ ປັ ນ ພ າ ສ າ ຫຼັກ ທ່ ີໃ ຊ້ໃ ນ ການສະແດງຜນົ ເທງິ ເວບັ ບຣາວເຊໃີ ນອນິ ເຕເີ ນດັ ໂດຍສາມາດນາໍ ສະເໜຂີ ໍມ້ ູນຕວົ ອກັ ສອນ ລວມທງັ ເຊ່ ອື ມຕ່ ໍ ເພ່ ອື ສະແດງພາບ, ສຽງ ແລະ ຟາຍໃນຮູບແບບອ່ ນື ໆໄດ້ ປັດຈະບັນ HTML ໄດພ້ ດັ ທະນາມາເຖິງເວີຊັນ HTML5 ພາສາ HTML ຈະແບ່ ງອອກເປັນ 2 ສ່ ວນຄື 1. ສ່ ວນຂອງຄໍາສ່ ງັ (tag) ເປນັ ສ່ ວນທ່ ກີ າໍ ນດົ ຮູບແບບຂອງຂໍຄ້ ວາມທ່ ສີ ະແດງ ເຊ່ ງິ ເຮາົ ເອນີ້ ວ່ າ Tag ໂດຍຈະ ຢ່ ູໃນເຄ່ ອື ງໝາຍ < … > 2. ສ່ ວນຂອງບດົ ຄວາມທ່ ວົ ໆໄປ ເປນັ ສ່ ວນຂອງຂໍຄ້ ວາມທ່ ເີ ຮາົ ຕອ້ ງການສະແດງຜນົ ຕວົ ຢ່ າງທ່ ີ 3.1 ຮູບແບບຂອງ HTML5 <!doctype html> <html> <head> <title> Title of This page </title> </head> <body> Content to display in web browser </body> </html> 3.2. ໂຄງສາ້ ງພນື້ ຖານຂອງໜາ້ ເວບັ ທ່ ສີ າ້ ງໂດຍ HTML (Basic Webpage Structure with HTML) 1. ຄໍາສ່ ງັ ຫຼື Tag Tag ເປັນລັກສະນະສະເພາະຂອງພາສາ HTML ໃຊໃ້ ນການລະບຸ ຮູບແບບຄໍາສ່ ັງ ຫຼື ການລົງ ລະຫດັ ຄໍາສ່ ງັ HTML ພາຍໃນເຄ່ ືອງໝາຍນອ້ ຍກວ່ າ (<) ແລະ ເຄ່ ືອງໝາຍໃຫຍ່ ກວ່ າ (>) ໂດຍທ່ ີ Tag HTML ແບ່ ງໄດ້ 2 ລກັ ສະນະຄື 22

1.1. Tag ດ່ ຽວເປັນ Tag ທ່ ບີ ່ ໍຕອ້ ງການມກີ ານປດິ ລະຫດັ ເຊ່ ນັ : <HR>, <BR> ເປນັ ຕນົ້ 1.2. Tag ເປີດ/ປດິ ຮູບແບບຂອງ tag ນຈີ້ ະເປນັ ແບບ <tag> … </tag> ໂດຍທ່ ີ <tag> ເຮາົ ເອນີ້ ວ່ າ tag ເປີດ </tag> ເຮາົ ເອນີ້ ວ່ າ tag ປດິ 2. Attributes Attributes ເປັນຕົວບອ ກລາຍລະອຽດ ຂອງ tag ນັນ້ ເຊ່ ັນ: <span align = ‘left’> … </span> ເປນັ ການບອກວ່ າໃຫອ້ ກັ ສອນທ່ ຢີ ່ ູໃນ tag ນຕີ້ ດິ ຂອບດາ້ ນຊາ້ ຍ ຂຄໍ້ ວນຮູ ້ span ຄື ອເີ ລເມນັ (element) ຕວົ ໜ່ ງຶ ໃນພາສາ HTML align ຄື ແອດັ ທບິ ວິ ຕວົ ໜ່ ງຶ ໃນພາສາ HTML left ຄື ວາລູ (value) ຫຼື ຄ່ າຂອງແອດັ ທບິ ວິ 3. not case sensitive ໝາຍເຖງິ ເຮາົ ຈະພມິ <BR> ຫຼື <br> ກ່ ໄໍ ດຜ້ ນົ ຮບັ ອອກມາບ່ ໍຕ່ າງກນັ 3.3. ລກັ ສະນະຄາໍ ສ່ ງັ ຂອງພາສາ HTML (HTML Syntax) ຄາໍ ສ່ ງັ ພນື້ ຖານ <!- ຂຄໍ ້ ວາມ -> ຄາໍ ສ່ ງັ ໝາຍເຫດ ໃຊອ້ ະທບິ າຍຄວາມໝາຍ, ຊ່ ຜື ູຂ້ ຽນ, ໂປຣ ແກຣມ ແລະ ອ່ ນື ໆ <br> ຄາໍ ສ່ ງັ ລງົ ແຖວໃໝ່ <p> ຂຄໍ້ ວາມ </p> <hr width=”50%” size = “3”> ຄໍາສ່ ງັ ຫຍໜໍ້ າ້ ໃໝ່ &nbsp; ຄາໍ ສ່ ງັ ຂດີ ເສນັ້ , ກາໍ ນດົ ຂະໜາດເສນັ້ ຄາໍ ສ່ ງັ ເພ່ ມີ ຊ່ ອງຫວ່ າງ <IMG SRC = “PHOTO.GIF”> ຄໍາສ່ ງັ ສະແດງຮູບພາບຊ່ ື PHOTO.GIF <CENTER> ຂໍຄ້ ວາມ </CENTER> ຄາໍ ສ່ ງັ ຈດັ ໃຫຂ້ ໍຄ້ ວາມຢ່ ູເຄ່ ງິ ກາງ <HTML> </HTML> ຄໍາສ່ ງັ <HTML> ຄຄື ໍາສ່ ງັ ເລ່ ມີ ຕນົ້ ໃນການຂຽນໂປຣແກຣມ HTML ແລະ ມຄີ ໍາສ່ ງັ </HTML> ເພ່ ອື ບອກຈດຸ ສນິ້ ສຸດ <HEAD> </HEAD> ຂອງໂປຣແກຣມ <TITLE> </TITLE> ຄໍາສ່ ງັ <HEAD> ຄຄື ໍາສ່ ງັ ບອກສ່ ວນທ່ ເີ ປນັ ຊ່ ເື ລ່ ອື ງ ໂດຍມຄີ ໍາ ສ່ ງັ ຍ່ ອຍ <TITLE> ຢ່ ູພາຍໃນ ຄໍາສ່ ງັ <TITLE> ຄຄື ໍາສ່ ງັ ບອກຊ່ ເື ລ່ ອື ງ ຈະໄປປະກດົ ທ່ ີ Title Bar 23

<BODY> </BODY> ຄາໍ ສ່ ງັ <BODY> ຄຄື ໍາສ່ ງັ ບອກສ່ ວນເນອື້ ເລ່ ອື ງ ທ່ ຈີ ະຖກື <font size = “3”> ຂຄໍ ້ ວາມ ສະແດງຜນົ ໃນເວບັ ບຣາວເຊີ ປະກອບດວ້ ຍຮູບພາບ, ຕວົ ອກັ ສອນ, ຕາຕະລາງ ເປນັ ຕນົ້ ຮູບແບບຕວົ ອກັ ສອນ ຂະໜາດຕວົ ອກັ ສອນ </font> ສຕີ ວົ ອກັ ສອນ <font color = “red”> ຂຄໍ້ ວາມ </font> ຮູບແບບຕວົ ອກັ ສອນ <font face = “Arial”> ຂຄໍ ້ ວາມ </font> ກາໍ ນດົ ຄ່ າເລ່ ມີ ຕນົ້ ຂອງຂະໜາດຕວົ ອກັ ສອນ <besefont size = “2”> ຂຄໍ້ ວາມ </font> ຕວົ ອກັ ສອນເຂມັ້ <b> ຂຄໍ້ ວາມ </b> ຕວົ ອກັ ສອນເນງີ້ <i> ຂຄໍ້ ວາມ </i> ຕວົ ອກັ ສອນຂດີ ກອ້ ງ <u> ຂໍຄ້ ວາມ </u> ຕວົ ອກັ ສອນແບບພມິ ດດີ <tt> ຂຄໍ ້ ວາມ </tt> ຈດຸ ເຊ່ ອື ມຕ່ ຂໍ ໍມ້ ນູ <a href =”#news”> Hot News ກາໍ ນດົ ຈດຸ ເຊ່ ອື ມຕ່ ໍໃນເອກະສານໜາ້ ດຽວກນັ </a> , <a name =”news”> ສາ້ ງລງິ້ ໄປຫາເອກະສານຊ່ ື “news.html” <a href =”news.html”> Hot News </a> <a href=”http://www.thai.com”> ສາ້ ງລງິ້ ໄປຫາເວບັ ໄຊອ່ ນື Thai </a> <a href =”http://www.thai.com” target ສາ້ ງລງິ້ ໄປຫາເວບັ ໄຊອ່ ນື ແລະ ເປດີ ໜາ້ ຕ່ າງໃໝ່ = “_blank” > Thai </a> 24

<a href ສາ້ ງລງິ້ ໂດຍໃຊຮ້ ູບພາບຊ່ ື photo.gif ເປນັ ໂຕເຊ່ ອື ມຕ່ ໍ =”http://www.thai.com”> <img src = “photo.gif”> </a> <a href ສາ້ ງລງິ້ ໄປຫາອເີ ມວ =”mailto:[email protected]”> Email </a> <UL type = “square”> ການສະແດງຜນົ ແບບລາຍການ ໃຊຄ້ ໍາສ່ ງັ <OL> ເພ່ ອື ເລ່ ມີ <LI> ລາຍການທີ 1 ແລະ ປດິ ທາ້ ຍດວ້ ຍ </OL> ສ່ ວນຄໍາສ່ ງັ <LI> ເປນັ ຕໍາແໜ່ ງ <LI> ລາຍການທີ 2 ຂອງລາຍການ ທ່ ຕີ ອ້ ງການນາໍ ສະເໜີ ເຮາົ ສາມາດກາໍ ນດົ ໃຫ ້ </UL> ສະແດງຜນົ ລາຍການແບບຕ່ າງໆ ດ່ ງັ ຕ່ ໍໄປນີ້ <TABLE BORDER = “2” > - ຮູບວງົ ມນົ ດໍາ “disc” <CAPTION> การสร้างตาราง </CAPTION> - ຮູບວງົ ມນົ ແບບໃສ “circle” <TR> <TH> หวั เรือง 1 </TH> - ຮູບສ່ ຫີ ່ ຽຼ ມ “square” <TH> หวั เรือง 2 </TH> </TR> ໄດ້ ທງັ ນຈີ້ ະຕອ້ ງເພ່ ມີ ຄາໍ ສ່ ງັ ເຂາົ້ ໄປທ່ ີ <UL type = <TR> <TD> ขอ้ มูล 1 </TD> “square”> ເປນັ ຕນົ້ <TD> ขอ้ มลู 2 </TD> </TR> </TABLE> ການສາ້ ງຕາຕະລາງ ການສາ້ ງຕາຕະລາງ ໃຊຄ້ ໍາສ່ ງັ <TABLE> ເປນັ ຈດຸ ເລ່ ມີ ຕນົ້ ແລະ ປດິ ທາ້ ຍດວ້ ຍ </TABLE> ສ່ ວນ BORDER ເປນັ ຄໍາ ສ່ ງັ ຍ່ ອຍເພ່ ອື ໃຊກ້ າໍ ນດົ ຂະໜາດຂອງເສນັ້ ຕາຕະລາງ ຖາ້ ກາໍ ນດົ = “0” ຈະໝາຍເຖງິ ບ່ ໍມເີ ສນັ້ - ຄາໍ ສ່ ງັ <CAPTION> ແລະ </CAPTION> ເປນັ ຄໍາສ່ ງັ ສະແດງຂໍຄ້ ວາມອະທບິ າຍຊ່ ຕື າຕະລາງ - ຄໍາສ່ ງັ <TR> ແລະ </TR> ເປນັ ຄໍາສ່ ງັ ເພ່ ອື ກາໍ ນດົ ແຖວໃນ ຕາຕະລາງ - ຄາໍ ສ່ ງັ <TH> ແລະ </TH> ເປນັ ຄໍາສ່ ງັ ເພ່ ອື ກາໍ ນດົ ຫວົ ເລ່ ອື ງ ຜນົ ຮບັ ທ່ ໄີ ດຄ້ ຕື ວົ ອກັ ສອນຈະໜາກວ່ າປກົ ກະຕິ - ຄໍາສ່ ງັ <TD> ແລະ </TD> ເປນັ ຄໍາສ່ ງັ ສະແດງຂມໍ້ ນູ ປກົ ກະຕິ 25

3.4. ການໃສ່ Heading (Inserting Headings) ໃນ HTML ມແີ ທກັ ທ່ ໃີ ຊໃ້ ນການກາໍ ນດົ ຂໍຄ້ ວາມສ່ ວນທ່ ເີ ປນັ ຫວົ ຂໃໍ້ ຫເ້ ລອື ກໃຊໄ້ ດເ້ ຖງິ 6 ລະດບັ ຄື ຕວົ ຢ່ າງທ່ ີ 3.2 h1-h6.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Heading h1-h6</title> <style> body { font-family: 'Phetsarath OT'; } </style> </head> <body> <h1>ຫວົ ຂໍລ້ ະດບັ h1</h1> <h2>ຫວົ ຂໍລ້ ະດບັ h2</h2> <h3>ຫວົ ຂໍລ້ ະດບັ h3</h3> <h4>ຫວົ ຂລໍ້ ະດບັ h4</h4> <h5>ຫວົ ຂລໍ້ ະດບັ h5</h5> <h6>ຫວົ ຂລໍ້ ະດບັ h6</h6> </body> </html> 3.5. ການໃສ່ Paragraph (Inserting Paragraphs) ການຈດັ ຫຍໍໜ້ າ້ ຈະໃຊ້ Properties text-indent ເພ່ ືອກໍານົດໄລຍະຂອງການຫຍໍໜ້ າ້ ດ່ ັງ ຕວົ ຢ່ າງ 26

ຕວົ ຢ່ າງທ່ ີ 3.3 text-indent.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>text-indent</title> <style> body { font-family: 'Phetsarath OT'; } p { background-color: #cdf; } #p1 { text-indent: 20px; } #p2 { text-indent: 50px; } </style> </head> <body> <p> ວທິ ະຍາໄລຄູຫລວງພະບາງ ແມ່ ນສະຖາບນັ ສາ້ ງຄແູ ຫ່ ງໜ່ ງື ທ່ ຖີ ກື ສາ້ ງຕງັ້ ແລະ ມປີ ະຫວດັ ອນັ ຍາວ ນານພໍສມົ ຄວນ ໂດຍມກີ ານປ່ ຽນແປງໄປຕາມ ວວິ ດັ ທະນາການແຫ່ ງການກ່ ສໍ າ້ ງ ແລະ ພດັ ທະນາ ເສດຖະກດິ -ສງັ ຄມົ ຂອງປະເທດຊາດ </p> <p id=\"p1\"> ວທິ ະຍາໄລຄູຫວຼ ງພະບາງ ມພີ າລະບດົ ບາດໃນການປະຕບິ ດັ ຕາມຍຸດທະສາດ ແລະ ນະໂຍບາຍຂອງ ການສກຶ ສາໃນ ໄລຍະໃໝ່ ທ່ ີ ກະຊວງສກຶ ສາແຫ່ ງ ສ ປ ປ ລາວ ວາງອອກໂດຍສະເພາະກ່ ຽວກບັ ການກ່ ໍສາ້ ງ ແລະ ການບໍາລຸງຍກົ ລະດບັ ຄູໃຫມ້ ຄີ ຸນະພາບດເີ ພ່ ອື ຮບັ ໃຊແ້ ກ່ 6 ແຂວງພາກເໜອື </p> <p id=\"p2\"> ມໜີ າ້ ທ່ ກີ ່ ສໍ າ້ ງຄູຊນັ້ ປະຖມົ ສກຶ ສາ ແລະ ອະນຸບານໃນລະບບົ 1 1 + 1 ແລະ 1 1 + 2 ໃຫແ້ ກ່ 2 ແຂວງ ຫວຼ ງພະບາງ ແລະ ໄຊຍະບູລ,ີ ສາ້ ງຄູຊນັ້ ສູງສອນ ໃນຊນັ້ ມດັ ທະຍມົ ສກຶ ສາ 5 ສາຍ ແລະ ບໍາລຸງຍກົ ລະດບັ ຄູທ່ ຮີ ຽນຈບົ ລະບບົ 1 1 + 3 ໃນ ລະດບັ ປະລນິ ຍາຕຕີ ່ ໍເນ່ ອື ງໃນ 6 ແຂວງພາກເໜື ອ. </p> </body> </html> 3.6. ການຈດັ ຮູບແບບຕວົ ໜງັ ສື (Text Formatting) ມຫີ ຼາຍຮູບແບບເຊ່ ນັ : ຕດິ ຂອບເບອື້ ງຊາ້ ຍ, ຢ່ ູເຄ່ ງິ ກາງ, ຕດິ ຂອບເບອື້ ງຂວາ, ໂຕຫອ້ ຍ, ຍກົ ກໍາລງັ ເປນັ ຕນົ້ ດ່ ງັ ຕວົ ຢ່ າງ 27

ຕວົ ຢ່ າງທ່ ີ 3.4 vertical-align.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>vertical-align</title> <style> #p1 { text-align:center;} #p2 { text-align:right};} .sub { vertical-align: sub; } .super { vertical-align: super;} .sub, .super { font-size: small; } </style> </head> <body> <p>1<span class=\"super\">st</span> July 2013</p> <p id=\"p1\" >2<span class=\"super\">3</span> + 3<span class=\"super\">2</span> = 17</p> <p id=\"p2\">O<span class=\"sub\">2</span> => Oxygen</p> <p> <span class=\"super\">1<span>/<span class=\"sub\">10</span> + <span class=\"super\">90</span>/<span class=\"sub\">100</span> = ? </p> </body> </html> 3.7. ການສາ້ ງລາຍການ (Creating List) ລໍາດບັ ລາຍການ ຫຼື List ກ່ ໍຄກື ານແບ່ ງຂໍມ້ ູນອອກເປັນຂໍຍ້ ່ ອຍໆ ສໍາລບັ ການສາ້ ງ List ດວ້ ຍ CSS ມຫີ າຼ ຍຮູບແບບດ່ ງັ ຕວົ ຢ່ າງຕ່ ໍໄປນີ້ 28

ຕວົ ຢ່ າງທ່ ີ 3.5 unordered-list.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Unordered List</title> <style> body { font-family: 'Phetsarath OT'; } </style> </head> <body style=\"font-size:16px\"> <h5>ສນັ ຍາລກັ ຂອງ Unordered List ມີ 3 ແບບຄື </h5> <ul style=\"list-style-type: disc;\"> <li>disc</li> <li style=\"list-style-type: circle;\">circle</li> <li style=\"list-style-type: square;\">square</li> </ul> <h5>ການສາ້ ງ List ຊອ້ ນກນັ </h5> <ul> <li>Fruit</li> <ul> <li>Apple</li> <li>Orange</li> </ul> <li>Flower</li> <ul> <li>Rose</li> <li>Orchid</li> </ul> </ul> </body> </html> 29

ຕວົ ຢ່ າງທ່ ີ 3.6 ordered-list-image.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Unordered List Image</title> <style> h3 { color:blue; } ul { list-style-image: url(Office-icon.png); } </style> </head> <body> <h3>Microsoft Office 2016</h3> <ul> <li>Microsoft Access 2016</li> <li>Microsoft Excel 2016</li> <li>Microsoft PowerPoint 2016</li> <li>Microsoft Word 2016</li> </ul> </body> </html> 30

ຕວົ ຢ່ າງທ່ ີ 3.7 unordered-list1.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Ordered List</title> <style> body { font-family: 'Phetsarath OT'; } </style> </head> <body> <h4>Ordered List ແບບ decimal:</h4> <ol style=\"list-style-type: decimal;\"> <li>One</li> <li>Two</li> <li>Three</li> </ol> <hr> <h4>Ordered List ແບບ decimal ເລ່ ມີ ຕນົ້ ທ່ ີ 2013:</h4> <ol style=\"list-style-type: decimal;\" start=\"2013\"> <li>ກ່ ຕໍ ງັ້ ບລໍ ສິ ດັ </li> <li>ຈດົ ທະບຽນວສິ າຫະກດິ </li> <li>ເລ່ ມີ ກດິ ຈະການ</li> </ol> <hr> <h4>Ordered List ແບບ decimal-leading-zero:</h4> <ol style=\"list-style-type: decimal-leading-zero;\"> <li>One</li> <li>Two</li> <li>Three</li> </ol> <hr> <h4>Ordered List ແບບ lower-alpha:</h4> <ol style=\"list-style-type: lower-alpha;\"> <li>ant</li> <li>dog</li> <li>cat</li> </ol> <hr> <h4>Ordered List ແບບ upper-alpha ເລ່ ມີ ຕນົ້ ທ່ ີ 4:</h4> <ol style=\"list-style-type: upper-alpha;\" start=\"4\"> <li>Lion</li> <li>Horse</li> <li>Fox</li> </ol> </body> </html> 31

ຕວົ ຢ່ າງທ່ ີ 3.8 definition-list.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Definition List</title> <style> body { font-family: 'Phetsarath OT'; } </style> </head> <body> <h4>ເທກັ ໂນໂລຍທີ ່ ກີ ່ ຽວຂອ້ ງກບັ ເວບັ ໄຊ</h4> <dl> <dt>HTML</dt> <dd> ຫຍມໍ ້ າຈາກ HyperText Markup Language ເປນັ ພາສາທ່ ໃີ ຊໃ້ ນການກໍາ ນດົ ໂຄງຮ່ າງຂອງເອກະສານທ່ ຈີ ະສະແດງຜນົ ດວ້ ຍ Web Browser </dd><br> <dt>CSS</dt> <dd> ຫຍໍມ້ າຈາກ Cascading Style Sheets ເປນັ ພາສາທ່ ໃີ ຊໃ້ ນການກໍານດົ ຮູບ ແບບ ຫຼື ປບັ ແຕ່ ງຂໍຄ້ ວາມໃນເວບັ ເພຈໂດຍຕອ້ ງໃຊຮ້ ່ ວມກບັ ພາສາ HTML </dd><br> <dt>JavaScript</dt> <dd> ເປັນພາສາທ່ ໃີ ຊໃ້ ນການຂຽນສະຄຣບິ ເພ່ ອື ຄວບຄຸມການເຮດັ ວຽກຂອງເວບັ ເພຈໃຫມ້ ີ ການຕອບສະໜອງແບບໄດນາມກິ ໂດຍໃຊຮ້ ່ ວມກບັ HTML ແລະ CSS </dd> </dl> </body> </html> 3.8. ການໃສ່ ສີ (Web Coloring) ສໃີ ນຄອມພວິ ເຕເີ ກດີ ຂນຶ້ ຈາກການປະສມົ ຄ່ າສໂີ ໝດ RGB ເຊ່ ງິ ປະກອບດວ້ ຍ 3 ສຄີ :ື Red (ແດງ), Green (ຂຽວ) ແລະ Blue (ຟາ້ ) ເຮາົ ສາມາດການດົ ຄ່ າສໄີ ດ້ 2 ແບບຄ:ື 1) ຊ່ ສື ີ ຄໃື ສ່ ຊ່ ສື ລີ ງົ ໄປເລຍີ ເຊ່ ນັ : AQUA, BLUE, GRAY, LIME, NAVY, PURPLE, SILVER, WHITE, BLACK, FUCHSIA, GREEN, MAROON, RED, YELLOW 32

2) ຄ່ າສີ ເປນັ ການໃສ່ ເປນັ ເລກຖານ 16 (0-9 ຫຼື A-F ໂດຍ 0 ມຄີ ່ ານອ້ ຍທ່ ສີ ຸດ ແລະ F ມຄີ ່ າສທີ ່ ຫີ າຼ ຍ ທ່ ສີ ຸ ດ) ທງັ ໝດົ 3 ຊຸດ 1 ຊຸດແທນດວ້ ຍໂຕອກັ ສອນ 2 ໂຕ ສະແດງຄ່ າຂອງແມ່ ສີ ແດງ, ຂຽວ, ຟາ້ (RGB) ໂດຍການໃຊຄ້ ່ າສໃີ ນເວບັ ເພຈຈະຕອ້ ງຂຽນຄ່ າສຕີ າມຫງຼັ ເຄ່ ອື ງໝາຍ # ເຊ່ ນັ : #FFFFFF ຈະໄດສ້ ຂີ າວ, #000000 ຈະໄດສ້ ດີ ໍາ. ການໃສ່ ສພີ ນື້ ຫງຼັ ແລະ ສຕີ ວົ ອກັ ສອນ ເຮາົ ສາມາດກາໍ ນດົ ສພີ ນື້ ຫງຼັ ຂອງໜາ້ ເວບັ ເພຈ ແລະ ສຕີ ວົ ອກັ ສອນໄດດ້ ວ້ ຍການກາໍ ນດົ ຄ່ າສໃີ ຫ້ ກບັ ແອດັ ທບິ ວິ bgcolor (ສພີ ນື້ ຫງຼັ ເວບັ ເພຈ) ແລະ text (ສຕີ ວົ ອກັ ສອນ) ເຊ່ ງິ ມຮີ ູບແບບດ່ ງັ ນີ້ <body bgcolor=\"#FFE4A4\" text=\"blue\"> ການທດົ ລອງໃສ່ ສພີ ນື້ ຫງຼັ ແລະ ສຕີ ວົ ອກັ ສອນ </body> ຜນົ ຮບັ ທ່ ໄີ ດ້ ການກາໍ ນດົ ສຕີ ວົ ອກັ ສອນສະເພາະສ່ ວນ ນອກຈາກການກາໍ ນດົ ສຂີ ອງຕວົ ອກັ ສອນທງັ ໜາ້ ໂດຍການໃຊແ້ ອດັ ທບິ ວິ text ແລວ້ ຖາ້ ເຮາົ ຕອ້ ງການຈະໃສ່ ສຕີ ວົ ອກັ ສອນ ສະເພາະສ່ ວນໃດສ່ ວນໜ່ ງຶ ພາຍໃນໜາ້ ເວບັ ເພຈໃຫມ້ ສີ ແີ ຕກຕ່ າງກນັ ສາມາດໃຊຄ້ ໍາສ່ ງັ ທ່ ມີ ຮີ ູບແບບດ່ ງັ ນ:ີ້ <body> <font color=\"#ooooFF\"> ກາໍ ນດົ ສຕີ າມລະຫດັ ສີ </font> <br> <font color=\"red\"> ກາໍ ນດົ ສຕີ າມຊ່ ສື ີ </font> </body> ຜນົ ຮບັ ທ່ ໄີ ດ້ 33

3.9. ການໃສ່ ຮູບພາບ (Inserting Images) 1. ການຈດັ ຂໍຄ້ ວາມໄວຂ້ າ້ ງຮູບພາບ ໃນ CSS ຈະໃຊ້ Properties float ກາໍ ນດົ ຕໍາແໜ່ ງຂອງຮູບພາບດ່ ງັ ຕວົ ຢ່ າງຕ່ ໄໍ ປນີ້ ຕວົ ຢ່ າງທ່ ີ 3.9 float.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>float</title> <style> body { font-family: 'Phetsarath OT'; } img { width: 100px; margin-right: 15px; margin-left:15px; } </style> </head> <body> <img src=\"New_LOGOTTC.png\" style=\"float: left\"> <span> ກາໝາຍສນັ ຍາລກັ ປະຈາໍ ວທິ ະຍາໄລຄູຫວຼ ງພະບາງ <br> ຂອບກງົ ຈກັ ໝາຍເຖງິ ປມື້ ແບບຮຽນ ໝາຍເຖງິ ແຫ່ ງຼ ຄວາມຮູສ້ ະຕປິ ນັ ຍາ ທ່ ທີ ຸກຄນົ ກຄໍ ື ຄູອາຈານ ແລະ ນກັ ສກຶ ສາຄຕູ ອ້ ງ ສະແຫວງຫາຢ່ າງບ່ ໍຢຸດຢງັ້ . ຮູບທາດພູສີ ໝາຍເຖງິ ປູສະນຍິ ະສະຖານທ່ ບີ ່ ງົ ບອກຄວາມເປນັ ເອກະລກັ ຂອງຫຼວງພະບາງ </span> <hr> <img src=\"green.jpg\" style=\"float: right\"> <span> ສປີ ະຈາໍ ວທິ ະຍາໄລຄູ <br> ສີ ປະຈາໍ ວທິ ະຍາໄລຄູຫຼວງພະບາງ ຄສື ຂີ ຽວ ເຊ່ ງີ ມໝີ າຍເຖງິ ຄວາມອຸດມົ ສມົ ບູນໄປດວ້ ຍຄຸນນະທາໍ , ຈະລຍິ ະທາໍ , ສລິ ະປະວດັ ທະນະທໍາ ແລະ ສະພາບແວດລອ້ ມ ອນັ ຂຽວງາມຕະການຕາ. </span> </body> </html> 34

2. ການໃຊຮ້ ູບພາບເປນັ ພນື້ ຫງຼັ ການໃຊຮ້ ູ ບພາບເປັນພືນ້ ຫຼັງຈະຕອ້ ງກໍານົດຜ່ ານ Properties background-image ດ່ ັງ ຕວົ ຢ່ າງ ຕວົ ຢ່ າງທ່ ີ 3.10 background-image.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>background-image</title> <style> body { background-image: url(bg/green.png); } div { background-image: url(bg/wood.jpg); text-align: center; font-size: 40px; } </style> </head> <body> <div>HTML5 & CSS3 Tutorial</div> </body> </html> 35

3. ການກາໍ ນດົ ຕໍາແໜ່ ງພນື້ ຫງຼັ ຕາມປົກກະຕແິ ລວ້ ຮູບພາບພນື້ ຫຼງັ ຈະຖືກຈດັ ວາງເລ່ ມີ ຈາກມູມເທງິ ຊາ້ ຍຂອງພນື້ ທ່ ອີ ເີ ລເມນັ ແຕ່ ເຮາົ ສາມາດກາໍ ນດົ ໄດວ້ ່ າຈະເລ່ ມີ ຈດັ ວາງພນື້ ຫງຼັ ທ່ ຕີ ໍາແໜ່ ງໃດ ດ່ ງັ ຕວົ ຢ່ າງ ຕວົ ຢ່ າງທ່ ີ 3.11 background-position.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>background-position</title> <style> button { font: 20px Phetsarath OT; padding: 5px; padding-left: 30px; background-repeat: no-repeat; /* ໃຫຮ້ ູບພາບຢ່ ູເຄ່ ງິ ກາງຊາ້ ຍມື */ background-position: left center; } #ok { background-image: url(bg/check.gif); } #cancel { background-image: url(bg/cancel.png); } #add{ background-image: url(bg/plus.png); } #delete { background-image: url(bg/minus.png); } </style> </head> <body> <button id=\"ok\">ຕກົ ລງົ </button> <button id=\"cancel\">ຍກົ ເລກີ </button> <button id=\"add\">ເພ່ ມີ </button> <button id=\"delete\">ລບົ </button> </body> </html> 36

ຕວົ ຢ່ າງທ່ ີ 3.12 background-position2.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>background-position</title> <style> body { font-family: 'Phetsarath OT'; } a.menu:hover { background-color: #fcc; } a.menu { display: block; width: 150px; font-size: 18px; padding: 5px; margin: 2px; background-color: #cdf; } a.has-submenu { background-image: url(bg/arrow.png); background-repeat: no-repeat; background-position: right center; } </style> </head> <body> <a class=\"menu\" href=\"#\">ໜາ້ ທໍາອດິ </a> <a class=\"menu has-submenu\" href=\"#\">ກ່ ຽວກບັ ວຄຫບຼ </a> <a class=\"menu has-submenu\" href=\"#\">ການເຂາົ້ ສກຶ ສາ</a> <a class=\"menu has-submenu\" href=\"#\">ຂະແໜງແລະຫຼກັ ສູດ<a> <a class=\"menu\" href=\"#\">ຕດິ ຕ່ ໍພວົ ພນັ </a> </body> </html> 37

4. ການຄງົ ຕາໍ ແໜ່ ງຮູບພາບພນື້ ຫງຼັ ຕາມປົກກະຕແິ ລວ້ ຮູບພາບພນື້ ຫງຼັ ຈະຖກື ເລ່ ອື ນໄປຕາມສະກບໍ າຂອງເວບັ ບຣາວເຊີ ແຕ່ ເຮາົ ສາມາດ ຄງົ ຕໍາແໜ່ ງຮູບພາບພນື້ ຫງຼັ ເດມີ ໄວໃ້ ຫຢ້ ່ ູກບັ ທ່ ໄີ ດ້ ດ່ ງັ ຕວົ ຢ່ າງ ຕວົ ຢ່ າງທ່ ີ 3.13 background-position3.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>background-attachment</title> <style> body { font-family: 'Phetsarath OT'; background-image: url(bg/html5.png); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; } </style> </head> <body> <h4> HTML5 ໄດຮ້ ບັ ການພດັ ທະນາຂນຶ້ ໂດຍກ່ ຸມ WHATWG <br><br><br> ເຊ່ ງິ ໄດຮ້ ບັ ການສະໜບັ ສະໜນູ ຈາກອງົ ກອນ W3C <br><br><br> ເພ່ ອື ສາ້ ງມາດຕະຖານໃໝ່ ໃຫກ້ ບັ ພາສາ HTML <br><br><br><br><br><br><br><br> </h4> </body> </html> 38

5. ການຫນຼິ້ ຟາຍວດິ ໂີ ອ ໃນ HTML5 ມແີ ທກັ ໃໝ່ ຄື <video> ສາໍ ລບັ ໃຊຫ້ ນຼິ້ ຟາຍປະເພດວດິ ໂີ ອໂດຍກງົ ແຕ່ ຈະຮບັ ຮອງ ຟາຍໄດພ້ ຽງບາງປະເພດ ທ່ ຮີ ອງຮບັ ເຊ່ ນັ : MP4, WebM, Ogg ເປນັ ຕນົ້ ດ່ ງັ ຕວົ ຢ່ າງ ຕວົ ຢ່ າງທ່ ີ 3.14 video.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Video</title> <style> body { font-family: 'Phetsarath OT'; } </style> </head> <body> <h3>ຫຼນິ້ ຟາຍ video/mp4</h3> <video src=\"multimedia/social.mp4\" width=\"320\" height=\"240\" preload=\"auto\" poster=\"multimedia/poster.png\" controls> </video> </body> </html> 39

6. ການຫນຼິ້ ຟາຍສຽງ ໃນ HTML5 ໄດເ້ ພ່ ມີ ແທກັ <audio> ສໍາລັບໃຊຫ້ ຼນິ້ ຟາຍປະເພດສຽງໂດຍກງົ ແຕ່ ຈະຮອງຮບັ ຟາຍໄດພ້ ຽງແຕ່ ບາງປະເພດເຊ່ ນັ : MP3, Wave, Ogg ເປນັ ຕນົ້ ດ່ ງັ ຕວົ ຢ່ າງ ຕວົ ຢ່ າງທ່ ີ 3.15 audio.html <!doctype html> <html> <head> <meta charset=\"utf-8\"> <title>Audio</title> <style> body { font-family: 'Phetsarath OT'; } </style> </head> <body> <h3>ຫຼນິ້ ຟາຍສຽງ audio</h3> <audio src=\"multimedia/kalimba.mp3\" preload=\"auto\" controls loop> </audio> </body> </html> 40

3.10. ການໃສ່ Link (Inserting Link) ເ ປັ ນ ທ່ ີຮູ ້ກັນຢ່ ູ ແ ລ້ວ ໃນ ເ ວັບ ໄຊ ໜ່ ຶງ ຈ ະ ມີໜ້າ ເ ພ ຈ ຫຼາ ຍ ກ ວ່ າ ໜ່ ຶງໜາ້ ຢ່ າ ງ ເຊ່ ນັ ຈາ ກໜາ້ Homepage ກ່ ໍສາມາດຄິກເຂາົ້ ໄປເບ່ ິງຂໍມ້ ູນໃນໜາ້ ອ່ ືນໆໄດ ້ ເຊ່ ິງເຮາົ ເອີນ້ ວ່ າການເຊ່ ອື ມຕ່ ໍເວັບເພຈ ຫຼື ການລງິ້ ເຊ່ ງິ ກ່ ອນທ່ ເີ ຮາົ ຈະຄກິ ລງິ້ ໜາ້ ເວບັ ເພຈ ເຮາົ ຈະຕອ້ ງມເີ ວບັ ເພຈຢ່ າງນອ້ ຍ 2 ໜາ້ ຂນຶ້ ໄປ ເຊ່ ງິ ການ ເຊ່ ືອມຕ່ ໍນີນ້ ອກຈາກເຊ່ ອື ມຕ່ ໍເວບັ ເພຈເຂົາ້ ດວ້ ຍກນັ ແລວ້ ຍງັ ມກີ ານເຊ່ ອື ມຕ່ ໍອີກຫຼາຍຮູບແບບ ເຊ່ ິງການ ເຊ່ ອື ມຕ່ ໍກນັ ນເີ້ ອງເຮດັ ໃຫເ້ ກດີ ເປນັ ເຄອື ຂ່ າຍອນິ ເຕເີ ນດັ ທ່ ເີ ຮາົ ສາມາດເຂາົ້ ໄປຫາຂໍມ້ ູນຕ່ າງໆໄດ້ ບ່ ໍວ່ າຂໍມ້ ນູ ນນັ້ ຈະຢ່ ູອກີ ຝ່ ງັ ຂອງໂລກກ່ ຕໍ າມ ການເຊ່ ອື ມຕ່ ນໍ ສີ້ າມາດແບ່ ງໄດທ້ ງັ ໝດົ 4 ປະເພດຄ:ື 1. ການເຊ່ ອື ມຕ່ ໍລະຫວ່ າງເວບັ ເພຈ <a href=\"ຟາຍເວບັ ເພຈ\">...ສ່ ງິ ທ່ ຈີ ະລງິ້ ...</a> 2. ການເຊ່ ອື ມຕ່ ນໍ ອກເວບັ ໄຊ <a href=\"URL\">...ສ່ ງິ ທ່ ຈີ ະລງິ້ ...</a> 3. ການເຊ່ ອື ມຕ່ ພໍ າຍໃນໜາ້ ເວບັ ເພຈ <a name=\"ກາໍ ນດົ ຊ່ ປື າຍທາງ\"></a> ແລະ <a href=\"#ຊ່ ື ປາຍທາງ\">...ສ່ ງິ ທ່ ຈີ ະລງິ້ ...</a> 4. ການເຊ່ ອື ມຕ່ ແໍ ບບອເີ ມວ <a href=\"mailto: E-mail address ທ່ ຕີ ອ້ ງການສ່ ງົ ເຖງິ \">...ສ່ ງິ ທ່ ຈີ ະ ລງິ້ ...</a> ໃນການເຊ່ ອື ມຕ່ ໍ (ລງິ້ ) ເຮາົ ສາມາດທ່ ຈີ ະລງິ້ ໂດຍໃຊຮ້ ູບພາບ ຫຼື ຂຄໍ ້ ວາມກ່ ໄໍ ດ້ ໂດຍເມ່ ອື ຮູບພາບ ຫຂຼື ໍຄ້ ວາມຖກື ລງິ້ ເມ່ ອື ເຮາົ ທດົ ສອບຜ່ ານເວບັ ບຣາວເຊີ ສນັ ຍາລກັ ເມາົ້ ຂອງເຮາົ ຈະປ່ ຽນຈາກຮູບລູກສອນ ເປນັ ຮູບມແື ທນ ເມ່ ອື ເມາົ້ ຖກື ເລ່ ອື ນໄປຢ່ ູບລໍ ເິ ວນທ່ ເີ ຮາົ ໄດລ້ ງິ້ ໄວ.້  ຮູບແບບການເຊ່ ອື ມຕ່ ລໍ ະຫວ່ າງເວບັ ເພຈ <html> <head><title> ....ການເຊ່ ອື ມຕ່ ລໍ ະຫວ່ າງເວບັ ເພຈ....</title></head> <body> <a href=\"index.html\">ຄກິ ທ່ ນີ ເີ້ ພ່ ອື ກບັ ໄປໜາ້ ທາໍ ອດິ </a><p> <!--ລງິ້ ໂດຍໃຊ້ ຂຄໍ້ ວາມ -> <a href=\"index.html\"><img src=\"home.gif\"></a> <!--ລງິ້ ໂດຍໃຊຮ້ ູບ ພາບ -> </body> </html> 41

 ຮູບແບບການເຊ່ ອື ມຕ່ ນໍ ອກເວບັ ໄຊ <html> <head><title> ....ການເຊ່ ອື ມຕ່ ນໍ ອກເວບັ ໄຊ....</title></head> <body><!--ລງິ້ ໂດຍໃຊຂ້ ໍຄ້ ວາມ -> <a href=\"http://www.nextstepdev.com\">ລງິ້ ໄປທ່ ເີ ວບັ ໄຊ Nextstepdev.com</a><p> <!--ລງິ້ ໂດຍໃຊຮ້ ູບພາບ -> <a href=\"http://www.nextstepdev.com\"><img src=\"nextstpdev.gif\"></a> </body> </html>  ຮູບແບບການເຊ່ ອື ມຕ່ ພໍ າຍໃນໜາ້ ເວບັ ເພຈ ສໍາລບັ ເວບັ ໄຊບາງເວບັ ທ່ ມີ ຂີ ໍມ້ ູນໃນແຕ່ ລະໜາ້ ຫຼາຍໆ ຕ່ ອງເລ່ ອື ນລງົ ໄປທາງດາ້ ນລ່ ຸມຫາຼ ຍ ເຊ່ ງິ ວທິ ີ ການແກໄ້ ຂປັນຫາເຫ່ ຼາົ ນີ້ ກ່ ໍຄືການເພ່ ີມລິງ້ ເພ່ ອື ລິງ້ ເອກະສານໃນໜາ້ ເທ່ າົ ນນັ້ ໂດຍເຮົາອາດຈະແບ່ ງຕາມ ຫວົ ຂໍຍ້ ່ ອຍໆ ກ່ ໍໄດ້ ເຊ່ ິງອາດຈະເບ່ ິງວ່ າເປັນລກັ ສະນະຂອງເມນຍູ ່ ອຍກ່ ໍໄດ້ ນອກຈາກນກີ້ ່ ໍສາມາດໃຊໃ້ ນ ກລໍ ະນທີ ່ ລີ ງົ ໄປເບ່ ງິ ຂໍມ້ ູນດາ້ ນລ່ ຸມແລວ້ ຢາກຈະເລ່ ອື ນມາທ່ ດີ າ້ ນເທງິ ຂອງເວບັ ໃນສ່ ວນທາ້ ຍຂອງເພຈ ເຮາົ ກ່ ໍ ອາດຈະສາ້ ງລງິ້ ໃຫຄ້ ກິ ເພ່ ອື go to top ໄດຢ້ ່ າງວ່ ອງໄວ <html> <head> <title> ....ການເຊ່ ອື ມຕ່ ພໍ າຍໃນໜາ້ ເວບັ ເພຈ ໂດຍຄກິ ທ່ ດີ າ້ ນລ່ ຸມ ແລວ້ ເລ່ ອື ນຂນຶ້ ມາດາ້ ນເທງິ .... </title> </head> <body> <!--ກໍານດົ ຊ່ ປື າຍທາງ ຂຽນໂຄດນໄີ້ ວບ້ ໍລເິ ວນດາ້ ນເທງິ ຂອງເພຈ-> <a name=\"top\"></a> <!--ຊ່ ວງລະຫວ່ າງນຕີ້ ອ້ ງມຂີ ໍມ້ ູນຫາຼ ຍໆ ເກນີ ໜ່ ງຶ ໜາ້ ເພຈສະກນີ ຈ່ ງຶ ຈະເຫນັ ຜນົ ການເຮດັ ວຽກ- > <!--ລງິ້ ໂດຍໃຊຂ້ ໍຄ້ ວາມ ຂຽນໂຄດນໄີ້ ວບ້ ໍລເິ ວນດາ້ ນລ່ ຸມຂອງເພຈ -> <a href=\"#top\">Go to Top</a><p> <!--ລງິ້ ໂດຍໃຊຮ້ ູບພາບ ຂຽນໂຄດນໄີ້ ວບ້ ໍລເິ ວນດາ້ ນລ່ ຸມຂອງເພຈ -> <a href=\"#top\"><img src=\"top.gif\"></a> </body> </html> 42

 ຮູບແບບການເຊ່ ອື ມຕ່ ແໍ ບບອເີ ມວ ສໍາລບັ ການເຊ່ ອື ມຕ່ ໍແບບນີ້ ມກັ ຈະເຫນັ ຫຼາຍໃນເວບັ ເພຈ ເຊ່ ງິ ເປັນສ່ ວນລງິ້ ສໍາລບັ ໃຫຜ້ ູເ້ ຂາົ້ ເບ່ ງິ ສ່ ງົ ອີເມວມາຫາຜູເ້ ບ່ ິງແຍງລະບົບເວັບໄຊໂດຍໃຊ້ E-mail ຕາມທ່ ີຜູຂ້ ຽນໄດລ້ ະບຸ ໄວໃ້ ນແທກັ ສໍາລັບລິງ້ ການລງິ້ ແບບນີນ້ ນັ້ ເມ່ ອື ຜູໃ້ ຊງ້ ານຄກິ ທ່ ລີ ງິ້ ຈະມກີ ານເຊ່ ອື ມຕ່ ໍໄປຫາໂປຣແກຣມ Microsoft Outlook ເຊ່ ງິ ເປນັ ໂປຣແກຣມສໍາລບັ ສ່ ງົ ອເີ ມວໂຕໜ່ ງຶ ໂດຍທ່ ຊີ ່ ອງ Address To ຈະປະກດົ E-mail Address ທ່ ີ ລະບຸ ໄວທ້ ່ ແີ ທກັ ລງິ້ ປະກດົ ຢ່ ູ <html> <head><title> ....ການເຊ່ ອື ມຕ່ ໍແບບອເີ ມວ....</title></head> <body> <!--ລງິ້ ໂດຍໃຊຂ້ ໍຄ້ ວາມ -> <a href=\"mailto:[email protected]\">ລງິ້ ອເີ ມວສ່ ງົ ອເີ ມວໄປທ່ ີ [email protected]</a><p> <!--ລງິ້ ໂດຍໃຊຮ້ ູບພາບ -> <a href=\"mailto:[email protected]\"><img src=\"contact.gif\"></a> </body> </html> 3.11. ການສາ້ ງຕາຕະລາງ (Creating Table) ການສາ້ ງເວບັ ເພຈໃນປດັ ຈບຸ ນັ ມກີ ານນາໍ ຕາຕະລາງເຂາົ້ ມາກ່ ຽວຂອ້ ງກບັ ຫາຼ ຍໆສ່ ວນ ຕງັ້ ແຕ່ ການສາ້ ງ ຕາຕະລາງເພ່ ອື ສະແດງຄວາມສໍາພນັ ໃນລກັ ສະນະແຖວ (Row) ແລະ ຖນັ (Column) ລວມເຖງິ ການແບ່ ງ ຂອບເຂດໃຫກ້ ບັ ຂຄໍ້ ວາມເພ່ ອື ການຈາໍ ກດັ ແລະ ຄວບຄຸມຂຄໍ້ ວາມໃຫຢ້ ່ ູໃນສ່ ວນທ່ ເີ ຮາົ ຕອ້ ງການ 1. ຄໍາສ່ ງັ ສາໍ ລບັ ການສາ້ ງຕາຕະລາງ Tag ຄາໍ ອະທບິ າຍ <table> … </table> ຄາໍ ສ່ ງັ ໃນການສາ້ ງຕາຕະລາງ <caption> … </caption> ຄາໍ ສ່ ງັ ໃນການກາໍ ນດົ ຂໍຄ້ ວາມກາໍ ກບັ ຕາຕະລາງ <tr> … </tr> ຄໍາສ່ ງັ ໃນການກໍານດົ ແຖວຂອງຕາຕະລາງ 1 ແຖວ <th> … </th> ຄາໍ ສ່ ງັ ໃນການກາໍ ນດົ ສ່ ວນຫວົ ຂອງຕາຕະລາງແຖວທາໍ ອດິ <td> … </td> ຄໍາສ່ ງັ ໃນການກໍານດົ ສ່ ວນຂອງຂໍມ້ ນູ ໃນແຕ່ ລະແຖວ 43

ໂຄງສາ້ ງຂອງຕາຕະລາງ <table> <caption> ຊ່ ຕື າຕະລາງ </caption> <tr> <th> ຂໍມ້ ນູ ສ່ ວນຫວົ </th> </tr> <tr> <td> ຂມໍ້ ນູ </td> </tr> <tr> <td> ຂມໍ້ ນູ </td> </tr> </table> ຕວົ ຢ່ າງທີ 3.16 ການສາ້ ງຕາຕະລາງ <!doctype html> <html> <head> <title> Create Table </title> </head> <body> <table> <caption>New Movie this Week</caption> <tr> <th>Name</th> <th>Time</th> <th>Time</th> <th>Time</th> </tr> <tr> <td>Fast and Furious 7</td> <td>12:00</td> <td>15:00</td> <td>18:00</td> </tr> <tr> <td>Ice Age 5</td> <td>12:00</td> <td>15:00</td> <td>18:00</td> </tr> <tr> <td>Step Up 4</td> <td>12:00</td> <td>15:00</td> <td>18:00</td> </tr> </table> </body> </html> 44

2. ຄາໍ ສ່ ງັ ຕ່ າງໆທ່ ໃີ ຊໃ້ ນການປບັ ແຕ່ ງຕາຕະລາງຂອງພາສາ HTML 2.1. ຄາໍ ສ່ ງັ Border ໃຊກ້ າໍ ນດົ ຄວາມໜາໃຫກ້ ບັ ເສນັ້ ຂອບຂອງຕາຕະລາງ ມໜີ ່ ວຍເປນັ Pixel ຖາ້ ບ່ ໍ ໃສ່ ຄໍາສ່ ງັ ນໄີ້ ວດ້ ວ້ ຍ Border ກ່ ຈໍ ະມຄີ ່ າເທ່ າົ ກບັ 1 ເຊ່ ງິ ເປນັ ຄ່ າປົກກະຕິ ຄຈື ະບ່ ເໍ ຫນັ ເສນັ້ ຂອບຂອງ ຕາຕະລາງ ຕວົ ຢ່ າງທີ 3.17 ການໃຊຄ້ າໍ ສ່ ງັ Border <!doctype html> <html> <head> <title> Create Table </title> </head> <body> <table border=4> <caption>New Movie this Week</caption> <tr> <th>Name</th> <th>Time</th> <th>Time</th> <th>Time</th> </tr> <tr> <td>Fast and Furious 7</td> <td>12:00</td> <td>15:00</td> <td>18:00</td> </tr> <tr> <td>Ice Age 5</td> <td>12:00</td> <td>15:00</td> <td>18:00</td> </tr> <tr> <td>Step Up 4</td> <td>12:00</td> <td>15:00</td> <td>18:00</td> </tr> </table> </body> </html> 45


Luangprabang TTC

web_Development
Share
Like this book? You can publish your book online for free in a few minutes!
Create your own flipbook

TOP SEARCH

business design fashion music health life sports home marketing children

RELATED PUBLICATIONS