บทที่02 เริ่มต้นสร้างเว็บเพจด้วยภาษาเอชทีเอ็มแอล

แผนบริหารการสอนประจาบทที่ 2หวั ข้อเนื้อหาประจาบท บทที่ 2 เริ่มตน้ สร้างเว็บเพจด้วยภาษาเอชทีเอ็มแอล มหี ัวข้อเนื้อหาดังน้ี 1. เกี่ยวกับภาษาเอชทีเอม็ แอล 2. การเตรียมสภาพแวดล้อมสาหรับการพัฒนา 3. การใชง้ านภาษาเอชทีเอม็ แอลเบือ้ งตน้ 4. การจดั การเนื้อหาข้อความและภาพบนเอกสารเอชทีเอ็มแอล 5. การจดั ลาดับช้ันเน้ือหาในเอกสารเอชทีเอ็มแอลและการสร้างลิงค์ 6. สรปุวัตถปุ ระสงคเ์ ชิงพฤติกรรม หลงั จากจบการเรียนการสอนบทนีแ้ ล้ว ผเู้ รียนมีความสามารถดังนี้ 1. บอกบทบาทหนา้ ที่และความเปน็ มาของเอกสารเอชทีเอม็ แอลได้ 2. บอกโครงสรา้ งและการทางานของภาษาเอชทีเอ็มแอลได้ 3. สามารถจาลองของเวบ็ เซิร์ฟเวอร์และทดสอบการทางานได้ 4. สามารถการจดั การเนือ้ หาข้อความในเอกสารเอชทีเอ็มแอลได้ 5. สามารถการจัดการเนือ้ หาภาพ ตาราง และ ลิงค์ในเอกสารเอชทีเอม็ แอลได้วธิ ีสอนและกิจกรรมการเรียนการสอนประจาบท 1. วิธีการสอน 1.1 บรรยายประกอบโดยใช้โปรแกรมนาเสนอ 1.2 บรรยายเชงิ ปฏิบตั ิการการเขียนคาส่ังหรอื แท็กภาษาเอชทีเอม็ แอล 1.3 สาธิตการจาลองเวบ็ เซิรฟ์ เวอร์และทดสอบการทางาน 2. กิจกรรมการเรียนการสอน 2.1 ให้ผู้เรยี นตั้งคาถามจากการอภิปรายและค้นหาคาตอบร่วมกัน ในหัวข้อ “ข้อจากัดในการพฒั นาเวบ็ ไซต์ดว้ ยภาษาเอชทีเอ็มแอลคืออะไร” 2.2 แบ่งกลุ่มศกึ ษาประเด็นเกี่ยวกับข้อง เรือ่ ง “กับภาษาที่ใชส้ าหรับการพฒั นา เว็บไซต์” ตามหัวข้อทีก่ าหนด และให้นาเสนอผลการศกึ ษา

2 2.3 สรุปเนือ้ หาการใชค้ าสงั่ พืน้ ฐานหรือแท็กในการนาเสนอข้อมูลในรูปแบบเอกสาร เอชทีเอ็มแอล และข้อจากดั ของภาษาเอชทีเอ็มแอล 2.4 ทาแบบฝกึ หัดท้ายบท 2.5 ทาแบบฝกึ ปฏิบตั ิท้ายบทสอ่ื การเรียนการสอน 1. เอกสารประกอบการสอน บทที่ 2 2. เอกสารนาเสนอ เรือ่ ง “การสร้างเว็บไซต์ดว้ ยภาษาเอชทีเอ็มแอล ตอนที่ 1” 3. เอกสารนาเสนอ เรือ่ ง “การสร้างเวบ็ ไซต์ดว้ ยภาษาเอชทีเอ็มแอล ตอนที่ 2” 4. สื่อเน้ือหาบนอินเทอร์เน็ตเกีย่ วโครงสรา้ งคาสง่ั เอชทีเอม็ แอล 5. โปรแกรมฟรีสาหรบั เป็นตัวแก้ไขเอกสารเว็บ 6. โปรแกรมฟรีสาหรับจาลองเวบ็ เซิรฟ์ เวอร์ 7. โปรแกรมเว็บเบราว์เซอร์ 8. แบบฝกึ หดั ท้ายบท 9. แบบปฏิบตั ิท้ายบทการวัดผลและประเมินผล 1. ประเมินผลจากความสนใจในการฟงั บรรยาย 2. การเข้าช้ันเรยี นของนกั ศึกษา 3. การมสี ่วนรว่ มในการอภปิ ราย การซักถาม และการตอบคาถาม 4. ประเมินผลจากแบบฝกึ หัดท้ายบท 5. ประเมินผลจากแบบฝกึ ปฏิบัติท้ายบท

3 บทที่ 2 เริ่มตน้ สร้างเวบ็ เพจดว้ ยภาษาเอชทีเอม็ แอล การสร้างเว็บเพจต้องอาศัยความรู้พื้นฐานเกี่ยวกับภาษาเอชทีเอ็มแอล (HTML) และเข้าใจเกี่ยวกับรูปแบบการบริการเอกสารดังกล่าวซึ่งใช้หลักการการทางานแบบเว็บเซิร์ฟเวอร์และเว็บไครเอ็นท์ โดยในบทเรียนนี้ จะอธิบายเกี่ยวกบั วิธีจาลองเว็บเซิร์ฟเวอร์และการทดสอบระบบด้วยโปรแกรมเว็บเบราว์เซอร์ซึ่งทาหน้าที่เป็นเว็บไครเอ็นท์ รวมท้ังความรู้เกี่ยวกับโครงสร้างการเขียนเว็บเพจและการเขียนคาสั่งหรือแท็กด้วยภาษาเอชทีเอ็มแอล ซึ่งจะใช้เป็นความรู้พื้นฐานสาหรับใช้ในการจัดการเน้ือหาบนเอกสารบนเว็บในหลายรูปแบบ รวมทั้งการสร้างลงิ ค์เพื่อเชอ่ื มโยงเอกสารเว็บบนเว็บ และใช้สาหรบั ทางานรวมกบั ภาษาคอมพิวเตอร์อ่นืเกี่ยวกบั ภาษาเอชทเี อม็ แอล ปจั จุบันภาษาเอชทีเอม็ แอล (HTML) เป็นภาษาประเภทสร้างเอกสารบนเว็บ ซึง่ มีองค์กรที่ใช้ชื่อว่า “W3C” (World Wide Web Consortium) ก่อตั้งประมาณ ปี พ.ศ. 2539 ตามความร่วมมือของบริษัทผู้พัฒนาเว็บเบราว์เซอร์ในยุคนั้น เพื่อพัฒนาภาษาเอชทีเอ็มแอลที่เป็นมาตรฐานเดียวกนั สาหรับประวตั ิความเปน็ มาจะขออธิบายโดยสงั เขป ดงั น้ี ปี พ.ศ. 2533 ภาษาเอชทีเอ็มแอล (HTML) ได้รับการดัดแปลงมาจากภาษาเอสจีเอ็มแอล (SGML) โดยการตดั ความซบั ซ้อนบางส่วนออกเพือ่ ความสะดวกในการใชง้ านภาษา ปี พ.ศ. 2536 ทิม เบอร์เนอร์ส-ลี (Tim Berners-Lee) และ เดป แรคเก็ต (DaveRaggett) ได้กาหนดให้ภาษาเอชทีเอ็มแอลดังกล่าวถูกใช้มาเป็นภาษาที่ใช้สร้างเอกสารบนเว็บถือได้ว่าเป็นภาษาเอสทีเอ็มแอล 1.0 ปี พ.ศ. 2538 ตามข้อตกลงในการพัฒนาโปรแกรมเว็บเซิร์ฟเวอร์และโปรแกรมแสดงผลเว็บเบราว์เซอร์ ในที่สุดภาษาเอชทีเอ็มแอลก็ได้พัฒนาจนประกาศออกมาให้เปน็ ภาษาเอชทีเอม็ แอล 2.0 ฉบับสมบูรณ์ พฒั นาโดย “IETF” (International Engineering Task ForceX) ปี พ.ศ. 2538-2539 ตามข้อตกลงในการพัฒนาของผู้ผลิตโปรแกรมเว็บเบราว์เซอร์ด้านการเพิ่มศักยภาพในการแสดงข้อมูลบนเว็บเบราว์เซอร์ให้มีความสามารถสูงสุด ภาษาเอชทีเอ็มแอลได้รับการพัฒนาจนเป็นภาษาเอชทีเอ็มแอล 3.0 ฉบับสมบูรณ์ ตามมาด้วย ปีพ.ศ. 2539 ภาษาเอชทีเอ็มแอลได้รับการพัฒนาความสามารถเพิ่มเติมเกี่ยวกับการแสดงผล

4รูปแบบตารางบนเว็บเบราว์เซอร์ซึ่งถือได้ว่าเป็นการพัฒนาที่สาคัญ ดังนั้น ภาษาเอชทีเอ็มแอล3.0 จงึ เป็นรุ่นที่ได้รับการยอมรบั อย่างกว้างขวาง ปี พ.ศ. 2539-2540 ได้เกิดปัญหาในเร่ืองความเป็นมาตรฐานของการใช้ภาษาเอชทีเอ็มแอลขึ้น เนื่องจากผู้พัฒนาโปรแกรมเว็บเบราว์เซอร์ต่างพัฒนาความสามารถในการแสดงผลของเว็บเบราว์เซอร์ของตนเองไปตามแนวทางการทาการตลาดของตนเอง เป็นผลทาให้ภาษาเอชทีเอ็มแอลขาดความเป็นมาตราฐาน ด้วยเหตุนี้ กลุ่มบริษัทผู้พัฒนาโปรแกรมเว็บเบราว์เซอร์ผู้ซึ่งมีส่วนได้ส่วนเสีย จึงได้ตั้งองค์กรร่วมภายใต้ชื่อ “เวิลด์ไวด์เว็บ-คอนซอเทียม”หรือองค์กร W3C (WWWC: World Wide Web Consortium ) พัฒนาภาษาเอชทีเอ็มแอล 3.2(ฉบับร่าง) ร่วมกัน และ ได้มีการจัดพิมพ์เป็นคู่มืออ้างอิง (HTML Reference Specification)มาตรฐานโดยใช้ชือ่ รุ่นภาษาเอชทีเอ็มแอล 3.2 ปี พ.ศ. 2540-2541 ภาษาเอชทีเอ็มแอลได้รับการพัฒนาให้มีความสามารถเพิ่มข้ึนโดยมีการพัฒนาที่สาคัญคือการเพิ่มส่วนแท็กแบบเฟรมเซ็ท และเพิ่มประสิทธิภาพในการทางานด้วยภาษาซีเอสเอส (CSS) ใช้รุ่นภาษาเอชที่เอ็มแอล 4.0 และ ต่อมา ปี พ.ศ. 2542-2543ภาษาเอชทีเอ็มแอลได้รับการพัฒนารูปแบบใหม่ที่เรียกว่าเอ็กซ์เอชทีเอ็มแอล (XHTML) ซึ่งรองรับการทางานของภาษาเอ็กซ์เอ็มแอล (XML) เพื่อขยายการทางานของเว็บเพจไปยังอุปกรณ์ต่าง ๆ โดยได้ประกาศให้เป็นรุ่นภาษาเอชที่เอ็มแอล 4.01 ถือว่าเป็นรุ่นที่ใช้ระยะเวลานานกว่าจะประกาศรนุ่ ภาษาเอชทีเอ็มแอล 5.0 ออกมาอย่างเปน็ ทางการ ปี พ.ศ. 2557-2560 ภาษาเอชทีเอ็มแอลได้รบั การพัฒนารปู แบบครั้งสาคญั โดยมีการปรับเพิ่มให้มีชุดคาส่ังและหรือแท็กอานวยความสะดวกในการพัฒนามากขึ้น มีชนิดของการป้อนข้อมูลแบบใหม่ โดยองค์กร W3C ประกาศให้เป็นรุ่นภาษาเอชที่เอ็มแอล 5.0 จากการปรับปรุงรุ่นคร้ังใหม่ทาให้การใช้งานยังพบปัญหาอยู่ ทาให้ ปี พ.ศ. 2559 ภาษาเอชทีเอ็มแอลได้รับการปรับปรุงแก้ไขเป็นรุ่นภาษาเอชทีเ่ อ็มแอล 5.1 และ ปี พ.ศ. 2560 ภาษาเอชทีเอ็มแอลก็ได้รับการปรบั ปรุงแก้ไขอีกรอบโดยประกาศใชเ้ ปน็ รุ่นภาษาเอชที่เอม็ แอล 5.2

5การเตรียมสภาพแวดล้อมสาหรบั การพฒั นา การเตรียมสภาพแวดล้อม จะเริ่มจากการจาลองเวบ็ เซิร์ฟเวอร์ซึ่งถือว่าเปน็ ส่วนสาคัญของการพัฒนาเว็บไซต์ จากนั้นจึงทาการทดสอบ เตรียมพื้นที่จัดเก็บเว็บไซต์ และ ติดตั้งเครือ่ งมือต่าง ๆ อาทิ ตวั แก้ไขเพื่อใชใ้ นการเขียนโปรแกรม การจาลองเวบ็ เซิร์ฟเวอร์ การจาลองเว็บเซิรฟ์ เวอร์ คือ การกาหนดให้เครอ่ื งที่ใชใ้ ห้มสี ภาพแวดล้อมมสี ถานะเป็นท้ังเว็บเซิร์ฟเวอร์และเว็บไคร์เอ็นท์เพื่อความสะดวกในการทดสอบระบบเว็บแอพลิเคชัน ในทีน่ ้ีขอยกตัวอย่างการจาลองเว็บเซิร์ฟเวอร์ด้วยการติดตั้งชุดโปรแกรมที่ชื่อว่า “XAMPP” ซึ่งเป็นโปรแกรมสาหรับจาลองเว็บเซิร์ฟเวอร์และเคร่ืองมือที่เกี่ยวข้องในการพัฒนา สามารถดาวน์โหลดฟรีได้ที่ https://www.apachefriends.org/index.html แสดงดงั ภาพที่ 2.1 คลิกเพื่อดาวน์โหลด XAMPP 7.2.2ภาพที่ 2.1 ลิงค์สาหรับดาวน์โหลดโปรแกรม XAMPP จากภาพที่ 2.1 ให้ดาวน์โหลดรุ่นที่ตรงกับระบบปฏิบัติการของเคร่ือง ในที่นี้ จะใช้รุ่นXAMPP สาหรับระบบปฏิบัติการวินโดวส์ เมื่อดาวน์โหลดไฟล์สาหรบั ติดต้ังเสร็จเรียบร้อย จะได้ไฟล์ที่ชื่อว่า “xampp-win32-7.2.2-0-VC15-installer.exe” ให้ทาการเปิดไฟล์ดังกล่าวและดาเนนิ การตดิ ต้ังโปรแกรมตามขั้นตอนที่ได้แสดงไว้ ตามดังภาพ 2.2

6 1. คลิก Next 2.1 เลือกรายการ Components 2.2 คลิก Next หนา้ ต่างแรก Setup – XAMMP หนา้ ต่างเลือกติดต้ัง Components 3.1 กาหนดห้องที่ติดตงั้ 4. คลิก Next 3.2 คลิก Next หนา้ ต่างกาหนดห้องสาหรับการตดิ ต้ัง หนา้ ต่างเรียนรเู้ พิ่มเติมเกีย่ วกบั XAMPP 5. คลิก Next หนา้ ต่างพรอ้ มเพือ่ ตดิ ต้ัง หนา้ ต่างแสดงผลขณะติดต้ังภาพที่ 2.2 ขั้นตอนการตดิ ต้ังโปรแกรม XAMPP

7กรณีตดิ ไฟร์วอลล์ คลิก Allow access 6.1 คลิกเพื่อเปิดแผงควบคมุ เดี่ยวนี้ 6.2 คลกิ Finishหนา้ ต่างแจง้ เตอื น apache ของไฟร์วอลล์ หนา้ ต่างเสร็จสนิ้ การติดตง้ั 7.1 คลิก Start Apache6.3 เลือกภาษา 6.4 คลิก Svae 7.2 คลิก Start MySQLหนา้ ต่างเลือกภาษา หนา้ ต่างแผงควบคุม XAMPPกรณีตดิ ไฟร์วอลล์ คลิก Allow Apache และ MySQL อยู่ในสถานะใหบ้ รกิ าร access หนา้ ต่างแผงควบคุม XAMPP ทีพ่ รอ้ มทางานหนา้ ต่างแจง้ เตอื น mysql ของไฟร์วอลล์ภาพที่ 2.2 ข้ันตอนการตดิ ต้ังโปรแกรม XAMPP (ต่อ) ภาพที่ 2.2 แสดงขนั้ ตอนการจาลองเซิรฟ์ เวอร์ดว้ ยชุดติดตั้งโปรแกรม XAMPP โดยมีลาดบั ข้ันตอนการตดิ ต้ังทางาน ดงั นี้

8 1. เม่ือเปิดไฟล์ติดต้ังที่ได้แล้ว จะปรากฏหน้าต่าง “Setup – XAMPP” แสดงข้อความ“Welcome to the XAMPP Setup Wizard” ให้คลิกปุ่ม “Next” เพื่อดาเนินการต่อไปจะปรากฏหนา้ ต่าง “Select Conponents” 2. หน้าต่าง “Select Conponents” ให้เลือกรายการที่ต้องการติดต้ัง ในที่นี้ จะติดตั้งตามที่ระบบเลือกไว้ให้ (ไม่ต้องเปลี่ยนแปลง) จากนั้น ให้คลิกปุ่ม “Next” จะปรากฏหน้าต่างให้กาหนดตาแหน่งหอ้ งสาหรบั ติดตงั้ ชดุ โปรแกรม “Installation floder” 3. หน้าต่าง “Installation floder” ให้เลือกตาแหน่งห้องที่ต้องการติดตั้งชุดโปรแกรมXAMPP ในที่นี้ จะติดต้ังตามที่ระบบเลือกไว้ให้ คือ “c:\xampp” จากน้ัน ให้คลิกปุ่ม “Next” จะปรากฏหน้าต่าง “bitnami for XAMPP” สาหรับการเลือกเรียนรู้เกี่ยวกบั XAMPP เพิ่มเติม 4. หน้าต่าง “bitnami for XAMPP” เป็นหน้าต่างสาหรับให้เลือกเรียนรู้ข้อมูลเพิ่มเติมเกี่ยวกับชุดติดตั้ง XAMPP ให้คลิกปุ่ม “Next” เพื่อดาเนินการต่อ จะปรากฏหน้าต่างพร้อมสาหรับการตดิ ตั้ง “Ready to Install” (ในกรณีเลอื กเรียนรเู้ พิ่มเติม จะมีหน้าต่างเว็บเบราว์เซอร์สาหรับเรียนรขู้ ้อมูลเพิ่มเตมิ ปรากฏขึน้ ด้วย) 5. หน้าต่าง “Ready to Install” ให้คลิกปุ่ม “Next” ระบบจะดาเนินการติดตั้งชุดโปรแกรม XAMPP โดยจะปรากฏหน้าต่างการ “Installing” ให้รอจนกระท่ังระบบติดตั้งดาเนินการติดตั้งเสร็จสิ้น จะปรากฏหน้าต่าง “Completting the XAMPP Setup Wizard” ในกรณี ปรากฏหน้าต่างแจ้งเตือนป้องกันการเข้าถึงจาก “Apache HTTP Server” ของโปรแกรมป้องกนั ไฟร์วอลล์ใหค้ ลิกเลือกปุ่ม “Allow access” 6. หน้าต่าง “Completting the XAMPP Setup Wizard” จะปรากฏรายการให้เลือกเปิดแผงควบคุม “XAMPP control panel” เดี่ยวนี้ (ไม่ต้องเปลี่ยน) จากนั้นให้คลิกปุ่ม “Finish” จะปรากฏหน้าจอให้เลือกภาษา “Language” ให้เลือกภาษาที่ระบบกาหนดมาให้ จากนั้นจึงคลิกปุ่ม “Save” เพือ่ บันทึก จะปรากฏหน้าต่างของแผงควบคุม “XAMPP control panel” 7. หน้าต่างของแผงควบคุม “XAMPP control panel” ให้คลิกปุ่ม “Strat” ดงั น้ี 7.1 คลิกปุ่ม “Start” ในแถว “Apache” เพื่อสั่งให้อาปาเช่เว็บเซอร์วิส (Apacheweb service) ให้บริการเว็บไซต์ 7.2 คลิกปุ่ม “Start” ในแถว “MySQL” เพื่อส่ังให้ระบบบริหารจัดการฐานข้อมูล“MySQL” ให้บริการ ในกรณี ปรากฏหน้าจอแจ้งเตือนป้องกันการเข้าถึงจาก “MySQL” ของโปรแกรมไฟร์วอลล์ใหค้ ลิกเลือกปุ่ม “Allow access”

9 8. เม่ือส่ังให้ “Apache” และ “MySQL” อยู่ในสถานะให้บริการเรียบร้อยแล้ว หน้าจอ“XAMPP control panel” จะแสดงข้อมูลที่สาคัญ ตัวอย่าง เช่น พอร์ทที่ใช้บริการ โดยท่ัวไปApache web service จะใช้พอรท์ “80433” ส่วน MySQL จะใช้พอรท์ “3306” เป็นต้น การทดสอบการทางานของเว็บเซิรฟ์ เวอร์ หลังจากการเมือ่ ส่ังให้อาปาเชเ่ วบ็ เซอร์วสิ (Apache web service) และ มายเอสคิวแอล(MySQL) ให้บริการแลว้ ในส่วนการทดสอบการทางาน จะทดสอบท้ังสองส่วน ดังน้ี 1. ทดสอบการทางานของการให้บริการของอาปาเช่เว็บเซอร์วิส (Apache webservice) ด้วยการเปิดโปรแกรมเว็บเบราเซอร์ ในทีน่ ้ีจะใช้โปรแกรมกูเกิลโครม (Google Chrome)โดยพิมพ์ลิงค์ “http://localhost/” ไปในช่องยูอาร์แอลแอดเดรส เพื่อส่ังการเรียกใช้บริการเวบ็ ไซต์จากเครื่องที่ได้ตดิ ต้ังชดุ จาลองเชริ ์ฟเวอร์ “XAMPP” จะปรากฏตามภาพ 2.3 พิมพ์ลิงค์ http://localhost/ภาพที่ 2.3 หนา้ เว็บเพจ “Welcome to XAMPP for Windows 7.2.2” ภาพที่ 2.3 เม่ือเรียกใช้ลิงค์ยูอาร์แอล “http://localhost/” ไปที่ช่องยูอาร์แอลแอดเดรสของเว็บเบราว์เซอร์ จะปรากฏหน้าโฮมเพจ โดยหน้าเว็บเพจดังกล่าวถูกส่ังให้มีการเชื่อมโยง

10มายังลิงค์ “http://localhost/dashboard/” โดยอัตโนมัติ ดังปรากฏให้เห็นเป็นหน้าเว็บเพจระบุข้อความว่า “Welcome to XAMPP for Windows 7.2.2” 2. ทดสอบทางานของภาษาพีเอชพี (PHP Language) ร่วมกับฐานข้อมูลมายเอสคิวแอล (MySQL) ในทีน่ ้ี จะทดสอบผา่ นการเรียกใช้แอพลิเคชัน่ พีเอชพีมายแอดมิน (PHPmyAdmin)ที่ได้ติดตั้งมาพร้อมกับชุดจาลองเว็บเซิร์ฟเวอร์ “XAMMP” โดยทาการพิมพ์ลิงค์“http://localhost/phpmyadmin/” ไปในช่องยูอาร์แอลแอดเดรสของเว็บเบราว์เซอร์เพื่อสั่งการเรียกใช้บริการ แสดงดงั ภาพที่ 2.4 พิมพ์ลิงค์ http://localhost/phpmyadmin/ภาพที่ 2.4 หนา้ เวบ็ เพจหลกั ของแอพลิคัน่ พีเอชพีมายแอดมิน (PHPmyAdmin) ภาพที่ 2.4 แสดงหน้าเว็บเพจหลักของพีเอชพีมายแอดมิน (PHPmyAdmin) เป็นระบบบริหารจัดการฐานข้อมูลในส่วนของผู้ดูแลระบบฐานข้อมูลหรือนักพัฒนาเว็บไซต์ จากภาพแสดงให้เห็นเบื้องต้นว่าการทางานของภาษาพีเอชพี (PHP Language) ร่วมกับฐานข้อมูลมายเอสคิวแอล (MySQL) ทางานได้ปกติ เนื่องจากแอพลิเคช่ันพีเอชพีมายแอดมิน (PHPmyAdmin)นี้ ทางานด้วยภาษาพีเอชพี (PHP Language) ติดตอ่ กบั ฐานขอ้ มูลของมายเอสคิวแอล (MySQL)โดยใช้ภาษาสอบถามเชิงโครงสรา้ งเอสคิวแอล (SQL)

11 โครงสร้างหอ้ งและไฟลข์ องเว็บไซต์ หลังจากติดตั้งชุดจาลองเว็บเซิร์ฟเวอร์เสร็จสิ้น ในส่วนนี้ จะอธิบายเกี่ยวกับโครงสร้างหอ้ งและไฟล์ของเวบ็ ไซต์ ให้ไปทีห่ ้องที่ตดิ ตั้งโปรแกรม “XAMPP” ในที่น้ี ได้ตดิ ต้ังโปรแกรมไปที่ตาแหน่ง “c:\xampp\” ตามภาพที่ 2.5 ตาแหนง่ ทีต่ ิดตงั้ คือ C:\xampp ตาแหนง่ รทู คือ C:\xampp\htdocs\ภาพที่ 2.5 หนา้ ต่างแสดงหอ้ งและไฟล์ของ “XAMPP” จากภาพที่ 2.5 จะขออธิบายเฉพาะห้องที่เกี่ยวข้องกับการจาลองเว็บเซิร์ฟเวอร์ และเครื่องมือทีส่ าคญั ดังน้ี 1. หอ้ งสาหรับติดตง้ั บริการเวบ็ เซอร์วสิ คือ หอ้ ง “apache” 2. หอ้ งสาหรับติดตงั้ บริการโอนย้ายไฟล์แบบเอฟทีพี คือ หอ้ ง “FileZillaFTP” 3. หอ้ งสาหรับการจดั เก็บเอกสารเวบ็ ไซต์ คือ หอ้ ง “htdocs” 4. หอ้ งสาหรบั ติดตงั้ บริการอเี มลล์ คือ หอ้ ง “MercuryMail” 5. หอ้ งสาหรับติดตงั้ บริการฐานข้อมูล คือ หอ้ ง “mysql” 6. หอ้ งสาหรบั ติดตงั้ บริการเวบ็ เซอร์วสิ อีกตวั ซึง่ รองรบั ภาษาจาวา คือ หอ้ ง “tomcat” 7. ห้องสาหรับติดต้ังแอพลิเคชน่ั พเี อชพีมายแอดมิน คือ หอ้ ง “phpmyadmin”

12 จากห้องที่ได้กล่าวมา ในเบื้องต้น สิ่งที่นักพัฒนาเว็บไซต์ต้องทราบ คือ ตาแหน่งแรกสาหรับการเรียกใช้เอกสารเว็บเพจ หรือ การเรียกใช้งานเว็บไซต์ ท่ัวไปเรียกตาแหน่งนี้ว่าตาแหน่ง “รูท” (root) สาหรับตัวติดตั้ง “XAMPP” จะเตรียมห้องรูทสาหรับจัดเก็บเว็บไซต์ในหอ้ งที่ชือ่ วา่ “httpdocs” แสดงดงั ภาพที่ 2.6 ตาแหนง่ รูท คือ C:\xampp\htdocs\ ตาแหนง่ ห้อง dashboard ที่ index.php ส่ังให้ลงิ ค์ไป ไฟลแ์ รกทีถ่ กู เรียก คือ index.phpภาพที่ 2.6 หนา้ ต่างแสดงหอ้ งแสดงตาแหน่งรูท ภาพที่ 2.6 แสดงตาแหน่งรูท คือ “c:\xampp\htdocs” ซึ่งเป็นตาแหน่งจัดเก็บเว็บไซต์ภายในห้องนี้จะปรากฏไฟล์ที่ทาหน้าที่เป็นโฮมเพจ (Home page) หรือ ไฟล์เริ่มต้นเม่ือมีการเรียกใช้บริการเว็บไซต์ ชือ่ วา่ “index.php” ซึ่งมีโครงสรา้ งคาสง่ั ภายใน ดังโปรแกรมที่ 2.1โปรแกรมท่ี 2.1 แสดงคาส่ังในไฟล์ “htdocs\index.php” 01: <?php 02: if (!empty($_SERVER['HTTPS']) && ('on' == $_SERVER['HTTPS'])) { 03: $uri = 'https://';

13โปรแกรมท่ี 2.1 (ต่อ) 04: } else { 05: $uri = 'http://'; 06: } 07: $uri .= $_SERVER['HTTP_HOST']; 08: header('Location: '.$uri.'/dashboard/'); 09: exit; 10: ?> 11: Something is wrong with the XAMPP installation :-( จากโปรแกรมที่ 2.1 เป็นคาส่ังในไฟล์ “index.php” โดยเม่ือเรียกด้วยลิงค์เว็บไซต์“http://localhost” ในฝ่ังไครเอ็นท์ผ่านเว็บเบราว์เซอร์ ในฝั่งของเว็บเซอร์วิสให้บริการไฟล์โฮมเพจซึง่ ก็คือไฟล์ที่ชอ่ื ว่า “index.php” แตเ่ นือ่ งจากคาส่งั ภายในไฟล์ดังกล่าวสง่ั ให้ลงิ ค์ไปที่ยัง“http://localhost/dashboard/” โดยอัตโนมัติ ทาให้ได้ผลลพั ธ์ดงั ปรากฏตามภาพที่ 2.3 ส า ห รั บ ใ น ส่ ว น ผู้ พั ฒ น า เ ว็ บ ไ ซ ต์ ที่ ใ ช้ โ ป ร แ ก ร ม จ า ล อ ง เ ว็ บ เ ซิ ร์ ฟ เ ว อ ร์ ชุ ด ที่ ชื่ อ ว่ า“AppServe” ระบบจะกาหนดตาแหน่งเวบ็ ไซต์หรอื หอ้ งที่เปน็ ตาแหน่งรทู ไว้ที่หอ้ ง “www” การสร้างหอ้ งสาหรบั พฒั นาเวบ็ ไซต์ โดยท่ัวไปแล้วเคร่ืองที่จาลองเว็บเซิร์ฟเวอร์จะใช้สาหรับการพัฒนาเว็บไซต์ โดยผู้พัฒนาสามารถพัฒนาได้ในหลาย ๆ ระบบภายในเคร่ืองเดียว ดังน้ัน เม่ือทราบตาแหน่งรูทแล้ว ตัวอย่าง เช่น ชุดติดต้ัง “XAMPP” ได้กาหนดห้องไว้ที่ “c:\xampp\htdocs” ข้ันตอนต่อไปเป็นการเตรียมห้องสาหรับการพัฒนาเวบ็ ไซต์ระบบงานต่าง ๆ เช่น ต้องการพัฒนาเว็บไซต์ขายสินค้า ให้ทาการสร้างห้องภายใต้ตาแหน่งรูทดังกล่าว เพื่อจัดเก็บเอกสารเว็บไซต์ที่จะพัฒนาตัวอย่าง เช่น “c:\xampp\htdocs\chandrashop\” หลังจากน้ันจึงทาการสร้างไฟล์แรกของระบบโดยใหใ้ ช้ใช้ชือ่ วา่ “index.php” ไว้ภายในหอ้ งที่สร้างข้นึ แสดงรายละเอียด ดังภาพที่ 2.7

14 ตาแหนง่ เว็บไซต์ คือ C:\xampp\htdocs\chandrashop\ไฟลโ์ ฮมเพจระบบ index.php คาส่งั ภายในไฟล์ index.phpภาพที่ 2.7 ตาแหน่งหอ้ งสาหรบั การพฒั นาเว็บไซต์ “chandrashop” ภาพที่ 2.7 แสดงตาแหน่งห้องสาหรับการพัฒนาเว็บไซต์ “chandrashop” ซึ่งอยู่ที่ตาแหน่ง “C:\xampp\htdocs\chandrashop\” ซึ่งภายในมีไฟล์โฮมเพจ ชื่อว่า “index.php” โดยภายในไฟล์ได้เขียนคาสัง่ ทดสอบการทางานของภาษาพีเอชพี (PHP) ไว้ ดังโปรแกรมที่ 2.2โปรแกรมท่ี 2.2 แสดงคาสงั่ ในไฟล์ “htdocs\chandrashop\index.php” 01: <?php 02: echo \"Hello PHP\"; 03: ?> จากคาส่ังภายในไฟล์ เม่ือทาการเรียกใช้บริการเว็บไซต์ดังกล่าวผ่านเว็บเบราว์เซอร์คตามลิงค์ “http://localhost/chandrashop/” จะได้ผลลพั ธ์ ดังภาพที่ 2.8 เว็บไซต์ คือ http://localhost/chandrashop/ภาพที่ 2.8 ผลลพั ธ์ของโปรแกรมที่ 2.2

15 การเตรยี มโปรแกรมตวั แก้ไขเอกสาร นอกจากการจาลองเว็บเซิร์ฟเวอร์ ส่วนที่ต้องเตรียมสาหรับการพัฒนาโปรแกรมอีกส่วน คือ โปรแกรมแก้ไขเอกสารเว็บ โดยทั่วไป เรียกโปรแกรมเหล่านี้ว่า “ไอดีอี” (IDE:Integrated Development Environment) ไอดีอีเป็นโปรแกรมที่จะช่วยอานวยความสะดวกให้ผู้พัฒนาในการเขียนคาส่ัง โดยที่โปรแกรมเหล่านี้ จะมีความสามารถในการรับรู้ตัวโครงสร้างของภาษาคอมพิวเตอร์ในหลายภาษา ในที่นี้จะใช้โปรแกรมที่ชื่อว่า “Notepad++” ซึ่งมีความสามารถครอบคลุมการเขียนคาส่ังภาษาคอมพิวเตอร์ต่าง ๆ ที่ใช้ในเอกสารประกอบการสอนชุดนี้ ได้แก่ ภาษาเอชทีเอ็มแอล (HTML) ซีเอสเอส (CSS) จาวาสคลิปท์ (JAVA Script) และพีเอชพี (PHP) สามารถดาวน์โหลดตัวติดตั้งโปรแกรมใช้งานได้ฟรีจากลิงค์ “https://notepad-plus-plus.org/download/v7.5.4.html” แสดงดังภาพที่ 2.8 คลิกเพือ่ ดาวน์โหลดไฟลต์ ิดตงั้ Notepad++ 7.5.4ภาพที่ 2.8 ลิงค์สาหรบั ดาวน์โหลดโปรแกรม Notepad++ ภาพที่ 2.8 ให้ดาวน์โหลด โดยคลิกปุ่ม “Download” เม่ือดาวน์โหลดไฟล์สาหรับติดตั้งเสร็จเรียบร้อย จะได้ไฟล์ชื่อ “npp.7.5.4.Installer.exe” ให้ทาการเปิดไฟล์ดังกล่าว และดาเนนิ การตดิ ตั้งโปรแกรม ตามข้ันตอนทีไ่ ด้แสดงไว้ตามดงั ภาพที่ 2.10

16 1.1 เลอื กภาษา1.2 คลิกปุ่ม “OK” 2 คลกิ ป่ มุ “ตอ่ ไป” หนา้ ต่างเลือกภาษา หนา้ ต่างแสดงข้อความยินดีตอนรบั 3. คลิกปมุ่ “ตกลง” 4.1 เลือกตาแหนง่ ที่จะติดตง้ั โปรแกรม 4.2 คลิกปุ่ม “ต่อไป”หนา้ ต่างขอ้ ตกลงเรื่องสทิ ธิ์ หนา้ ต่างกาหนดตาแหนง่ ทีจ่ ะติดตง้ั5.1 เลือกส่วนประกอบ 6.1 เลือก “Create Shortcut on Desktop”5.2 คลิกปมุ่ “ต่อไป” 6.2 คลิกปุ่ม “ตดิ ตั้ง”หนา้ ต่างเลือกส่วนประกอบทีจ่ ะติดตงั้ หนา้ ต่างตดิ ต้ังภาพที่ 2.10 ขั้นตอนการตดิ ต้ังโปรแกรมเอกสาร Notepad++

177.1 เลอื ก “รัน Notepad++v7.5.4” 7.2 คลิกปุ่ม “เสร็จสิน้ ” หนา้ ต่างเสร็จสนิ้ การติดตงั้ภาพที่ 2.10 ขั้นตอนการตดิ ต้ังโปรแกรมเอกสาร Notepad++ (ต่อ) ภาพที่ 2.10 แสดงข้ันตอนการติดตั้งโปรแกรมแก้ไขเอกสาร Notepad++ มีลาดับการติดตง้ั ทางาน ดังน้ี 1. เมอ่ื เปิดไฟล์ตดิ ต้ังทีไ่ ด้แลว้ จะปรากฏหน้าต่างเลือกภาษา ให้เลือกภาษา “ไทย” แล้วคลิกปุ่ม “OK” จะปรากฏหน้าต่างแสดงข้อความยินดีต้อนรับ 2. หน้าต่างแสดงข้อความ “ยินดีต้อนรับสู่การติดตั้งโปรแกรม Notepad++ v.7.5.4”ให้คลิกปุ่ม “ต่อไป” จะปรากฏหนา้ ต่างขอ้ ตกลงเรื่องสทิ ธิ์ 3. หนา้ ต่างขอ้ ตกลงเร่อื งสทิ ธิ์ ให้คลิกปุ่ม “ตกลง” จะปรากฏหน้าต่างหน้าต่างกาหนดตาแหน่งที่จะติดตง้ั 4. หน้าต่างกาหนดตาแหน่งที่จะติดต้ังหน้า ให้กาหนดตามที่ระบบกาหนดให้ (ไม่ต้องเปลี่ยนแปลง) จากนั้นคลิกปุ่ม “ต่อไป” จะปรากฏหนา้ ต่างเลือกส่วนประกอบที่จะติดตง้ั 5. หน้าต่างเลือกส่วนประกอบทีจ่ ะติดตั้ง ให้เลือกส่วนประกอบตามที่ระบบกาหนดให้(ไม่ต้องเปลีย่ นแปลง) จากนั้นคลิกปุ่ม “ต่อไป” จะปรากฏหน้าจอเลือกส่วนประกอบหนา้ ที่สอง 6. หน้าจอเลือกส่วนประกอบหน้าที่สอง หรือ หน้าติดตั้ง ให้คลิกที่ “Create Shortcuton Desktop” เพื่อสร้างทางลัดเข้าสู่โปรแกรมบนหน้าจอเดสก์ท็อป จากนั้นให้คลิกปุ่ม “ติดต้ัง”เพือ่ ดาเนนิ การตดิ ต้ังโปรแกรม 7. เม่ือติดตั้งโปรแกรมสาเร็จเรียบร้อย จะพบกับหน้าต่างสุดท้าย ให้คลิกปุ่ม “รันNotepad++v7.5.4” จากน้ันให้คลิกปุ่ม “เสร็จสิน้ ” ถือว่าการตดิ ต้ังเสรจ็ สิน้ สมบรู ณ์ เม่ือติดต้ังเสร็จสิ้นสมบูรณ์ โปรแกรมตัวแก้ไขเอกสาร “Notepad++” จะถูกเปิดขึ้นมาพร้อมสาหรบั การพฒั นาโปรแกรม ดงั ภาพที่ 2.11

18 1. แถบหวั เรื่อง 2. แถบเมนูคาสงั่ 3. แถบเครือ่ งมือ 5. สว่ นพืน้ ที่ทางาน 4. แถบสถานะภาพที่ 2.11 ส่วนประกอบหนา้ จอโปรแกรม Notepad++ ภาพที่ 2.11 แสดงหนา้ จอโปรแกรม Notepad++ ซึง่ มีสว่ นประกอบหลัก ดงั น้ี 1. แถบหัวเร่ือง จะแสดงชื่อไฟล์ต้นฉบับโปรแกรมที่กาลังทางาน โดยแถบหัวเร่ืองสามารถที่จะย่อ ขยาย และปิดโปรแกรม แบบเดียวกบั หนา้ ต่างวินโดวส์ท่ัวไป 2. แถบเมนูคาส่ัง ใช้สาหรับการเรียกใช้งานคาสั่งต่าง ๆ โดยมีรายการเมนูที่สาคัญเช่น เมนู “ไฟล์” ใช้สาหรับการสร้าง เปิด และบันทึกไฟล์เอกสารต้นฉบับโปรแกรม ส่วนเมนู“แก้ไข” ใช้สาหรับการคัดลอก ย้าย หรอื แทรกข้อความ เปน็ ต้น 3. แถบเคร่ืองมือ ใช้สาหรับเรียกใช้งานคาสั่งลัดต่าง ๆ ที่สาคัญ เช่น คาสั่งลัดการสร้าง เปิด และการบันทึกไฟล์ เป็นต้น 4. แถบสถานะ ใช้สาหรับแสดงสถานะการทางานในขณะเขียนโปรแกรม เช่น การแสดงหมายเลขของเลขบรรทดั และหลักที่กาลงั ดาเนนิ การแก้ไขโปรแกรมขณะน้ัน เปน็ ต้น 5. ส่วนพื้นที่ทางาน เป็นส่วนที่ใช้ในการเขียนและแก้ไขโปรแกรม โดยสามารถรองรับการเปิดไฟล์ต้นฉบับโปรแกรมได้พร้อม ๆ กันได้หลายไฟล์ในรูปของแถบงาน โดยด้านซ้ายสุดของแถบงานจะแสดงหมายเลขบรรทัดกากบั เพื่อให้งานในการลาดบั คาสั่ง

19การใชง้ านภาษาเอชทีเอม็ แอลเบื้องต้น การพัฒนาเว็บแอพลิเคชั่นเพื่อประยุกต์ใช้งานด้านต่าง ๆ ในเบื้องต้นจะต้องทาความเข้าใจเกี่ยวกับโครงสร้างและหลักของภาษาเอชทีเอ็มแอล (HTML) ก่อนเป็นอันอับแรกเนือ่ งจากเปน็ ภาษาพืน้ ฐานสาหรับรูปแบบการแสดงผลเอกสารเวบ็ ไซต์ หลกั ภาษาเอชทเี อม็ แอล ภาษาเอชทีเอ็มแอล (HTML) เป็นภาษาคอมพิวเตอร์ที่ใช้โครงสร้างคาส่ังที่อาศัยการควบคุมการทางานด้วยป้ายระบุที่เรียกว่า “แท็ก” (Tag) เพื่อทาหน้าที่เป็นคาส่ังสาหรับควบคุมการแสดงผลเน้ือหาของเอกสารเว็บเพจ มีสว่ นโครงสรา้ งทีส่ าคญั ดงั น้ี 1. ป้ายระบุ หรอื แทก็ (Tag) จะใช้สัญลกั ษณ์ใน 2 รปู แบบ ได้แก่ 1.1 ป้ายระบุ หรอื แท็ก (Tag) แบบเปิด-ปิด มโี ครงสรา้ ง ดังน้ี<ชือ่ ป้าย>........</ชือ่ ปา้ ย>1.2 ป้ายระบุ หรอื แทก็ (Tag) แบบเดีย่ ว มโี ครงสรา้ ง ดงั น้ี<ชือ่ ปา้ ย> ในที่นี้ขอยกตัวอย่างแท็ก (Tag) ของภาษาเอสทีเอ็มแอล (HTML) บางส่วน แสดงรายละเอียด ดังตารางที่ 2.1ตารางที่ 2.1 ตวั อย่างแท็ก (Tag) ของภาษาเอสทีเอ็มแอล (HTML)คาส่งั หรอื ป้ายระบุ รายละเอียด<HTML>…</HTML> ระบุว่าเป็นส่วนเอกสารเอชทีเอม็ แอล (HTML)<HEAD>...</HEAD> ระบุว่าเปน็ ส่วนหัว (Head)<BODY>...</BODY> ระบวุ ่าเปน็ ส่วนตัว (Body)<P>…</P> กาหนดขอ้ ความเป็นพารากราฟ (Paragraph)<BR> ขนึ้ บรรทดั ใหม่ (Newline)

20 2. แอตทริบิวต์ (Attribute) เป็นคุณสมบัติเพิ่มเติมของแท็ก (Tag) ที่ใช้สาหรับบอกคุณสมบัติพิเศษเพิ่มเติม อาจจะมีหรือไม่มีก็ได้แตกกันออกไปตามลักษณะของการใช้งานแท็ก(Tag) นนั้ ๆ ตวั อย่าง เชน่<BODY bgcolor=\"red\">........</BODY> จากตัวอย่างข้างต้น ในส่วนแท็กเปิดของคาสั่ง BODY ได้กาหนดให้แอทริบิวต์ bgcolorมีค่าเท่ากับ \"red\" ไว้ภายใน หมายถึง การระบุคุณสมบัติเพิ่มเติมโดยให้พื้นหลังของเว็บเพจมีคณุ สมบัติเปน็ พื้นหลังสีแดง 3. คอมเมนท์ (Comment) เป็นส่วนการอธิบายของเอกสาร ซึ่งจะไม่กระทบกับการแสดงผลเนือ้ หาของเว็บเพจ มีรูปแบบการใชง้ าน ดังน้ี<!-- ข้อความอธิบาย --> โครงสร้างภาษาเอชทเี อม็ แอล การสร้างเอกสารเว็บเพจด้วยภาษาเอชทีเอ็มแอล (HTML) จะเริ่มต้นด้วยการเปิดและปิดโดยใช้แทก็ <HTML>...</HTML> และมีสว่ นประกอบภายใน 2 สว่ นหลกั ดังภาพที่ 2.8<HTML> 1. ส่วนหัว<HEAD> 2. สว่ นบอดี้</HEAD><BODY></BODY></HTML>ภาพที่ 2.12 โครงสร้างการเขียนโปรแกรมภาษาเอชทีเอ็มแอล (HTML) ภาพที่ 2.12 แสดงโครงสร้างการเขียนโปรแกรมภาษาเอชทีเอ็มแอล (HTML) โดยให้ดูตวั อย่างโปรแกรมที่ 2.3 ประกอบ มโี ครงสรา้ ง 2 สว่ น ได้แก่

21 1. ส่วนหัว คือ ส่วนของการกาหนดรายละเอียดของเอกสารเว็บเพจ ท่ัวไปมีการใช้แทก็ ภายในที่สาคัญ 2 คาสัง่ ได้แก่ 1.1 แท็ก <TITLE>…</TITLE> บอกชื่อเร่ืองของเอกสารเว็บ ซึ่งข้อความที่ระบุไว้ภายในแทก็ จะปรากฏทีแ่ ถบหัวเรื่องด้านบนสุดของเวบ็ เบราว์เซอร์ 1.2 แท็ก <META…/> เป็นส่วนคาส่ังที่ใช้ในการจัดทาคลังบัญชีเน้ือหาของเว็บเพจสาหรบั ใหโ้ ปรแกรมจาพวกการสบื ค้นเว็บเพจ (Search Engine) ใช้งาน 2. ส่วนบอดี้ คือ ส่วนของการกาหนดรายละเอียดเนื้อหาที่ต้องการแสดงผลบนหน้าเว็บเพจ โดยท่ัวไปภายในมีการใช้แท็กสาหรับแสดงเน้ือหาในรูปแบบต่าง ๆ เช่น ข้อความรูปภาพ ตาราง และ ลิงค์เช่อื มโยงเอกสารเว็บเพจ เป็นต้นโปรแกรมท่ี 2.3 แสดงขอ้ ความ “Hello HTML” ด้วยภาษาเอชทีเอม็ แอล 01: <HTML> 02: <HEAD> 03: <TITLE>Hello HTML</TITLE> 04: <META name=\"keywords\" content=\"Hello, HTML\"/> 05: </HEAD> 06: <BODY> 07: <P><B>Hello HTML</B></P> 08: </BODY> 09: </HTML> จากโปรแกรมที่ 2.3 เม่ือเขียนโปรแกรมด้วยโปรแกรมด้วย Notepad++ และเรียกใช้บริการเอกสารผา่ นเว็บเบราว์เซอร์จะได้ผลลัพธ์ ดังภาพ 2.13 ผลลพั ธ์บนเวบ็ เบราว์เซอร์ แสดงคาสงั่ HTML ที่เขียนบน Notepad++ภาพที่ 2.13 แสดงจอภาพบนตัวแก้ไข Notepad++ และ ผลลัพธ์บนเวบ็ เบราว์เซอร์

22การจัดการเนื้อหาข้อความและภาพบนเอกสารเอชทีเอ็มแอล การจัดการเน้ือหาบนเอกสารเอชทีเอ็มแอล (HTML) โดยท่ัวไป จะจัดการภายใต้ป้ายคาสั่งหรือแท็ก (Tag) เพื่อทาการควบคุมการแสดงผลของเน้ือหา โดยในหัวข้อนี้ จะขอยกตัวอย่างคาสงั่ หรอื แทก็ ภาษาเอชทีเอม็ แอลเบือ้ งตน้ ดังน้ี แทก็ สว่ นหัวขอ้ สาหรับการจัดการส่วนหัวข้อ สามารถสร้างหัวข้อในลาดับต่าง ๆ โดยใช้แท็กแสดงรายละเอียด ดังตารางที่ 2.2ท่ี 2.2 แท็กหวั ข้อของภาษาเอสทีเอม็ แอลคาสง่ั หรอื ปา้ ยระบุ รายละเอียด<H1>...</H1> กาหนดเปน็ หัวข้อระดบั ที่ 1<H2>...</H2> กาหนดเป็นหัวข้อระดบั ที่ 2<H3>...</H3> กาหนดเป็นหวั ข้อระดบั ที่ 3<H4>...</H4> กาหนดเป็นหวั ข้อระดบั ที่ 4<H5>...</H5> กาหนดเป็นหัวข้อระดับที่ 5<H6>...</H6> กาหนดเป็นหัวข้อระดบั ที่ 6หมายเหตุ: ตวั เลขด้านหลังน้อยจะมีขนาดหัวข้อใหญ่ที่สดุ จากแทก็ กาหนดหัวข้อของภาษาเอสทีเอ็มแอลข้างต้น ขอแสดงตวั อย่างการใช้งานแท็กดังกล่าว ตามลาดับ ด้วยโปรแกรมที่ 2.4โปรแกรมท่ี 2.4 การใชง้ านแทก็ หัวข้อของภาษาเอชทีเอ็มแอล 01: <HTML> 02: <HEAD> 03: <TITLE>เปรียบขนาดของหวั ข้อ</TITLE> 04: <META charset=\"UTF-8\"> 05: </HEAD> 06: <BODY> 07: <H1>หัวขอ้ </H1>

23โปรแกรมท่ี 2.4 (ต่อ) 08: <H2>หวั ขอ้ </H2> 09: <H3>หัวข้อ</H3> 10: <H4>หัวข้อ</H4> 11: <H5>หัวข้อ</H5> 12: <H6>หวั ขอ้ </H6> 13: </BODY> 14: </HTML> จากโปรแกรมที่ 2.4 จะได้ผลลัพธ์ปรากฏบนจอภาพ ดังน้ีภาพที่ 2.14 ผลลัพธ์เปรียบเทียบการใชง้ านแทก็ หัวข้อของภาษาเอชทีเอ็มแอล ภาพที่ 2.4 แสดงให้เหน็ ว่าการใชแ้ ท็กหวั ข้อแท็ก <H1>..........</H1> จะมีขนาดตัวอักษรที่ใหญี่ที่สุด ส่วน <H6>..........</H6> จะมีขนาดเล็กสุด โดยที่การใช้แท็กหัวข้อนั้นจะมีการแสดงผลลัพธ์ข้ึนบรรทัดใหม่ให้อตั โนมตั ิ

24 แทก็ จัดการเนื้อหา ในการจัดการเน้ือหาที่เป็นข้อความและภาพ บางครั้งต้องมีการกาหนดรูปแบบที่มีความแตกต่างหลากหลายเพือ่ เน้นจุดที่น่าสนใจทีแ่ ตกต่างกนั ไป ในภาษาเอสทีเอม็ แอลสามารถจัดการเน้ือหาดงั กล่าวได้โดยการใช้งานแท็กพืน้ ฐาน ตามรายละเอียดในดังตารางที่ 2.32.3 แท็กกาหนดสว่ นเนือ้ หาข้อความและภาพของภาษาเอสทีเอ็มแอลคาสัง่ หรอื ปา้ ยระบุ รายละเอียด<FONT>...</FONT> กาหนดรูปแบบตามโครงสรา้ งฟอ้ นท์ (Font)<B>...</B> กาหนดเปน็ ตัวหนา (Bold)<STRONG>...</ STRONG > กาหนดเป็นตวั หนกั (Strong) มีลกั ษณะแบบตัวหนา<I>...</I> กาหนดเปน็ ตัวเอียง (Ittalic)<U>...</U> กาหนดเปน็ ตวั ขีดเส้นใต้ (Underline)<SUP>...</SUP> กาหนดเปน็ ตัวยก (Superscript)<SUB>...</SUB> กาหนดเป็นตวั ห้อย (Subscript)<HR> กาหนดเส้นคัน่<IMG> กาหนดเป็นภาพ ตารางที่ 2.3 แสดงคาส่ังหรือแท็กของภาษาเอสทีเอ็มแอลเพื่อใช้สาหรับกาหนดส่วนรายละเอียดเน้ือหาของเอกสารเวบ็ เพจ ในทีน่ ้ขี อยกตวั อย่างการใช้งานเบือ้ งตน้ ดงั น้ี 1. การใช้แทก็ <FONT>......</FONT> มีรปู แบบพืน้ ฐาน ดังน้ี<FONT face=\"ชือ่ ฟอ้ นท์\" size=\"ขนาด\" color=\"ส\"ี >...</FONT>โดยที่ แอทริบิวต์ face เปน็ การกาหนดแบบของตัวอกั ษร (ชื่อฟ้อนท์) แอทริบิวต์ size เป็นการกาหนดขนาดของตวั อกั ษร (เลขขนาด) แอทริบิวต์ color เป็นการกาหนดสีของตัวอกั ษร (ชื่อสี/รหสั สี)

25 การการใช้งานแท็ก <FONT>...</FONT> ไม่จาเป็นต้องกาหนดแอทริบิวต์ครบทั้ง 3ส่วนกไ็ ด้ ในทีน่ ้ี ขอยกตวั อย่างตามโปรแกรมที่ 2.5โปรแกรมท่ี 2.5 การใชง้ านแทก็ <FONT>...</FONT> 01: <HTML> 02: <HEAD> 03: <TITLE>FONT Tag</TITLE> 04: <META charset=\"UTF-8\"> 05: </HEAD> 06: <BODY> 07: <FONT size=\"-1\" color=\"red\">size= -1 color = red</FONT><BR> 08: <FONT size=\"-2\" color=\"red\">size= -1 color = red</FONT><BR> 09: <FONT size=\"1\" color = \"green\">size = 1 color = green</FONT><BR> 10: <FONT size=\"2\" color = \"green\">size = 2 color = green</FONT><BR> 11: <FONT size=\"3\" color = \"green\">size = 3 color = green</FONT><BR> 12: <FONT size=\"4\" color = \"green\">size = 4 color = green</FONT><BR> 13: <FONT size=\"5\" color = \"green\">size = 5 color = green</FONT><BR> 14: <FONT size=\"6\" color = \"green\">size = 6 color = green</FONT><BR> 15: <FONT size=\"7\" color = \"green\">size = 7 color = green</FONT><BR> 16: <FONT size=\"8\" color = \"green\">size = 8 color = green</FONT><BR> 17: <FONT size=\"+1\" color=\"blue\">size = +1 color = blue</FONT><BR> 18: <FONT size=\"+2\" color=\"blue\">size = +2 color = blue</FONT><BR> 19: <FONT size=\"+3\" color=\"blue\">size = +3 color = blue</FONT><BR> 20: <FONT size=\"+4\" color=\"blue\">size = +4 color = blue</FONT><BR> 21: <FONT face=\"Comic Sans MS\" >face = Comic Sans MS</FONT><BR> 22: <FONT size=\"3\" color=\"#FF0000\">size = 3 color = #FF0000</FONT><BR> 23: <FONT color = \"#00FF00\">color = #00FF00</FONT><BR> 24: <FONT size=\"3\" color=\"#0000FF\">size = 3 color = #0000FF</FONT> 25: </BODY> 26: </HTML> จากตวั อย่างที่ 2.5 ได้ผลลัพธ์ดังภาพที่ 2.14

26ภาพที่ 2.14 ผลลัพธ์การใช้งานแท็ก <FONT>...</FONT> 2. การใชแ้ ทก็ จัดรูปแบบข้อความ แสดงตวั อย่างการใช้งานตามโปรแกรมที่ 2.6โปรแกรมท่ี 2.6 จดั รปู แบบข้อความด้วยแท็กเอชทีเอ็มแอล 01: <HTML> 02: <HEAD> 03: <TITLE>FONT Tag</TITLE> 04: <META charset=\"UTF-8\"> 05: </HEAD> 06: <BODY> 07: <div>ตวั ธรรมดา</div>

27โปรแกรมท่ี 2.6 (ต่อ) 08: <div><B>ตัวหนา</B></div> 09: <div><STRONG>ตวั สตรอง</ STRONG></div> 10: <div><I>ตัวเอง</I></div> 11: <div><U>ตวั ขดี เส้นใต<้ /U></div> 12: <div><B><I>ตัวหนาและเอยี ง</I></B></div> 13: <div>X<SUP>10</SUP></div> 14: <div>H<SUB>2</SUB>O</div> 15: </BODY> 16: </HTML> จากตัวอย่างที่ 2.6 ได้ผลลัพธ์ดงั ภาพที่ 2.15ภาพที่ 2.16 ผลลพั ธ์ตัวอย่างการใช้แท็กจัดรูปแบบข้อความของภาษาเอชทีเอม็ แอล 3. การกาหนดเส้นคั่นด้วยแท็ก <HR> มีรปู แบบพืน้ ฐาน ดังน้ี <HR width=\"ขนาด\" align=\"การจดั วาง\" size=\"ขนาด\" color=\"ส\"ี > โดยที่ แอทริบิวต์ width เป็นการกาหนดขนาดความยาวของเส้นคั่น (ร้อยละ/พอยน์) แอทริบิวต์ align เปน็ การกาหนดรปู แบบการจดั วาง (left/center/right) แอทริบิวต์ size เปน็ การกาหนดขนาดของเส้นคั่น (พอยน์) แอทริบิวต์ color เป็นการกาหนดสีของเส้นคนั่ (ชือ่ ส/ี รหัสสี)

28 การกาหนดรปู แบบของแท็ก <HR> เพื่อสร้างเส้นคั่น ไม่จาเปน็ ต้องกาหนดแอทริบิวต์ทกุ ส่วนก็ได้ โดยในที่นี้ ขอยกตวั อย่างการใช้งานตามโปรแกรมที่ 2.7โปรแกรมท่ี 2.7 การใชง้ านแท็ก <HR> 01: <HTML> 02: <HEAD> 03: <TITLE>HR Tag</TITLE> 04: <META charset=\"UTF-8\"> 05: </HEAD> 06: <BODY> 07: <HR> 08: <HR width=\"10%\" align=\"center\" size=\"10\" color=\"#CCCCCC\"> 09: <HR width=\"20%\" align=\"center\" size=\"10\" color=\"#AAAAAA\"> 10: <HR width=\"30%\" align=\"center\" size=\"10\" color=\"#888888\"> 11: <HR width=\"40%\" align=\"center\" size=\"10\" color=\"#666666\"> 12: <HR width=\"50%\" align=\"center\" size=\"10\" color=\"#444444\"> 13: <HR width=\"100%\" align=\"center\" size=\"10\" color=\"#222222\"> 14: <HR> 15: </BODY> 16: </HTML> จากตัวอย่างที่ 2.7 ได้ผลลัพธ์ดังภาพที่ 2.16ภาพที่ 2.16 ผลลัพธ์ตัวอย่างการใช้งานแทก็ <HR>

29 4. การใชแ้ ทก็ แสดงรปู ภาพ <IMG> มีรูปแบบพืน้ ฐาน ดังน้ี <IMG src=\"ลิงค์ภาพ\" width=\"กว้าง\" hiegth=\"สงู \" border=\"ขนาดขอบ\"> โดยที่ แอทริบิวต์ src เป็นลิงค์ภาพอ้างองิ รูปภาพทีจ่ ะแสดงบนหนา้ เว็บเพจ แอทริบิวต์ width เปน็ การกาหนดขนาดความกว้าง (ร้อยละ/พอยน์) แอทริบิวต์ height เปน็ การกาหนดขนาดความสูง (ร้อยละ/พอยน์) แอทริบิวต์ border เป็นการกาหนดขนาดเส้นขอบ (พอยน์) การกาหนดรูปแบบของแท็ก <IMG> เพื่อแสดงภาพ สามารถกาหนดแอทริบิวต์ได้หลายรปู แบบ โดยในที่นี้ ขอยกตวั อย่างการใช้งานตามโปรแกรมที่ 2.8โปรแกรมท่ี 2.8 การใชง้ านแทก็ <IMG> 01: <HTML> 02: <HEAD> 03: <TITLE>IMG Tag</TITLE> 04: <META charset=\"UTF-8\"> 05: </HEAD> 06: <BODY> 07: <IMG src=\"bcom.jpg\" height=\"50%\"><BR> 08: <IMG src=\"bcom.jpg\" width=\"50\" height=\"50\" border=\"1\"> 09: <IMG src=\"bcom.jpg\" width=\"100\" height=\"100\" border=\"1\"> 10: <IMG src=\"bcom.jpg\" width=\"200\" height=\"200\" border=\"1\"> 11: </BODY> 12: </HTML> จากโปรแกรมที่ 2.8 บนั ทัดที่ 07-10 การระบุ src=\"bcom.jpg\" หมายถึง ให้อ้างอิงชื่อไฟล์รปู ภาพดังกล่าวซึ่งจดั เก็บอยู่ ณ ตาแหนง่ เดียวกันกบั เอกสารเว็บเพจทีอ่ า้ งองิ นี้ โดยเมือ่เรียกใช้ผ่านเวบ็ เบราว์เซอร์จะได้ผลลพั ธ์ดังภาพที่ 2.17

30 height=\"50%\" 50 x 50 100 x 100 200 x 200ภาพที่ 2.17 ผลลัพธ์ตัวอย่างการใช้งานแท็ก <IMG> ภาพที่ 2.17 แสดงให้เห็นว่าการกาหนดความสูงของภาพโดยใช้หน่วยร้อยละ การแสดงผลของภาพจะมีขนาดไม่คงที่ โดยจะย่อ-ขยายขนาดตามแนวความสูงของหน้าต่างแสดงผลเว็บเบราว์เซอร์ ในอัตรารอ้ ยละ 50 ส่วนการกาหนดด้วยค่าพอยน์จากมีขนาดคงที่การจัดลาดับชนั้ เนือ้ หาในเอกสารเอชทเี อ็มแอลและการสร้างลงิ ค์ สาหรับการจัดลาดบั ช้ันเนื้อหาในเอกสารเอชทีเอ็มแอล และ การสรา้ งลิงค์ สามารถใช้งานแทก็ เบอื้ งตน้ ดงั น้ี ตามรายละเอียดในดังตารางที่ 2.4ตารางที่ 2.4 แท็กการจดั ลาดับช้ันเน้ือหาในเอกสารเอชทีเอม็ แอล และ การสรา้ งลงิ ค์คาส่ัง หรอื ปา้ ยระบุ รายละเอียด<DIV>...</DIV> จดั การเน้ือหาเป็นชั้นหรอื ดิวิชนั (Division)<TABLE>...</TABLE> จดั การเนื้อหาเป็นโครงสรา้ งตาราง (Table)<UL>…<UL> จดั รายการเนือ้ หาแบบเปน็ แบบไม่มลี าดบั (Unordered Lists)<OL>...</OL> จดั รายการเนือ้ หาแบบมีลาดับ (Ordered Lists)<A>…</A> การลิงค์เช่อื มโยงเนือ้ หา

31 ตามรายละเอียดแท็กการจัดลาดับช้ันเนื้อหาในเอกสารเอชทีเอ็มแอล และ การสร้างลิงค์ในตารางที่ 2.4 มีวธิ ีการใชง้ านแทก็ ตามลาดับ ดังน้ี 1. การจัดการเน้ือหาเป็นช้ันหรือดิวิชัน สามารถใช้แท็ก <DIV>...</DIV> กาหนดโครงสรา้ งเน้ือหาได้ตามตัวอย่างโครงสร้าง ดังน้ี <DIV> <DIV>…</DIV> <DIV>…</DIV> </DIV> จากโครงสร้างช้ันซ้อนของแท็ก <DIV>…</DIV> ข้างต้น นาไปใช้จัดการเนื้อหาได้ตามตัวอย่างโปรแกรมที่ 2.9โปรแกรมท่ี 2.9 การใชง้ านโครงสรา้ งชั้นซ้อนของแทก็ <DIV>…</DIV> 01: <HTML> 02: <HEAD> 03: <TITLE>DIV Tag</TITLE> 04: <META charset=\"UTF-8\"> 05: </HEAD> 06: <BODY> 07: <DIV> 08: <DIV>คณะวิทยาการจัดการ</DIV> 09: <DIV>มหาวิทยาลยั ราชภัฏจันทรเกษม</DIV> 10: </DIV> 11: </BODY> 12: </HTML> จากโปรแกรมที่ 2.9 ได้ผลลัพธ์ตามภาพที่ 2.18

32ภาพที่ 2.18 ผลลัพธ์ตัวอย่างการใช้งานโครงสร้างช้ันซ้อนของแทก็ <DIV>…</DIV> 2. การจัดการเน้ือหาในรูปแบบตาราง โดยใช้แท็ก <TABLE>...</TABLE> สามารถกาหนดโครงสร้างเน้ือหาได้ตามตวั อย่างโครงสรา้ ง ดงั น้ี <TABLE border=\"ขนาดขอบ\" width=\"ขนาดตาราง\" > <TR aling=\"left/center/right\" bglolor=\"ชือ่ สี/รหสั สี\"> <TH>…</TH><TH>…</TH><TH>…</TH> </TR> <TR> <TD>…</TD><TD>…</TD><TD>…</TD> </TR> ………………………………………………………………….. <TR> <TD>…</TD><TD>…</TD><TD>…</TD> </TR> </TABLE> ในส่วนของแท็ก <TABLE>…</TABLE> มแี อทริบิวต์ที่สาคญั คือ แอทริบิวต์ border เปน็ การกาหนดขนาดขอบของตาราง (พอยน์) แอทริบิวต์ width เป็นการกาหนดขนาดความกว้างตาราง (ร้อยละ/พอยน์) ส่วนภายในแท็ก <TABLE>…</TABLE> จะประกอบไปด้วยโครงสรา้ งช้ันซ้อน ได้แก่ แท็ก <TR>…</TR> คือ แท็กของแถว แท็ก <TH>…</TH> คือ แท็กของคอลัมนท์ ี่เปน็ หัวเรอ่ื ง

33 แทก็ <TD>…</TD> คือ แท็กของคอลัมนท์ ีเ่ ปน็ รายการ โดย มีแอทริบิวต์ ที่สาคัญ เชน่ แอทริบิวต์ align เป็นการกาหนดรปู แบบการจัดวาง เชน่ จดั ชิดซ้าย align=\"left\" แอทริบิวต์ bgcolor เป็นการกาหนดสีพ้ืนหลัง เชน่ bgcolor=\"#555555\" แอทริบิวต์ rowspan กับ colspan เป็นการสั่งผสานแถวและรวมหลัก จะใช้กับเฉพาะแท็ก <TH>…</TH> กับ <TD>…</TD> ในกรณีที่ต้องการผสานช่องตาราง เช่น <TDrowspan=\"2\">…</TD> หมายถึงผสานไปตามแนวแถว จานวน 2 แถว โดยแถวถัดไปทีม่ ีการส่งัผสานไปแล้ว ไมต่ อ้ ง มีการเปิดแท็ก <TD>…</TD> ใช้งานอีก จากโครงสร้างแท็ก <TABLE>…</TABLE> ข้างต้น ออกแบบเป็นโครงสร้างตารางแบบ3 แถว x 3 คอลัมน์ สามารถนาไปใช้จดั การเนือ้ หาได้ ตามตวั อย่างโปรแกรมที่ 2.10โปรแกรมท่ี 2.10 การใชง้ านโครงสรา้ งของแทก็ <TABLE>...</TABLE> 01: <HTML> 02: <HEAD> 03: <TITLE>TABLE Tag</TITLE> 04: <META charset=\"UTF-8\"> 05: </HEAD> 06: <BODY> 07: <TABLE border=\"1\" width=\"100%\"> 08: <TR bgcolor=\"#555555\"> 09: <TH>ลาดับ</TH> 10: <TH>รายการ</TH> 11: <TH>หมายเหตุ</TH> 12: </TR> 13: <TR bgcolor=\"#555555\"> 14: <TD>1</TD> 15: <TD>แทก็ TR คอื แถว</TD> 16: <TD>สามารถกาหนดสีพ้นื หลงั ให้กับแถวไดด้ ้วยแอทรบิ ิวต์ bgcolor</TD> 17: </TR>

34โปรแกรมท่ี 2.10 (ต่อ) 18: <TR bgcolor=\"#555555\"> 19: <TD>2</TD> 20: <TD>แท็ก TH และ TD คอื คอลัมน์</TD> 21: <TD>แทก็ TH ใช้กับแถวแรกทีเ่ ป็นหวั เรื่อง</TD> 22: </TR> 23: </TABLE> 24: </BODY> 25: </HTML> จากโปรแกรมที่ 2.9 ได้ผลลัพธ์ตามภาพที่ 2.18ภาพที่ 2.19 ผลลพั ธ์ตวั อย่างการใช้งานโครงสรา้ งแท็ก <TABLE>...</TABLE> 3. การจดั รายการ มีทั้งแบบมีลาดบั และไม่มีลาดบั ดังนี้ 3.1 แบบมีลาดับ ใช้แท็ก <OL>…<OL> มีตวั อย่างรปู แบบโครงสรา้ ง ดงั น้ี <OL> <LI>…</LI> ……………… <LI>…</LI> </OL> 3.2 แบบไม่มลี าดับ ใช้แท็ก <UL>…<UL> มีตวั อย่างรูปแบบโครงสรา้ ง ดงั นี้

35 <OL> <LI>…</LI> ……………… <LI>…</LI> </OL> ทั้งรูปแบบการจัดรายการแบบมีลาดับและไม่มีลาดับ จะแสดงตัวอย่างการใช้งานเปรียบเทียบกัน ดังตวั อย่างโปรแกรมที่ 2.11โปรแกรมท่ี 2.11 การใชง้ านแทก็ <OL>…</OL> กบั <UL></UL> 01: <HTML> 02: <HEAD> 03: <TITLE>List</TITLE> 04: <META charset=\"UTF-8\"> 05: </HEAD> 06: <BODY> 07: <H3>ประเทศทีม่ ีประชากรมากที่สดุ ในโลก 3 ลาดับแรก</H3> 08: <OL> 09: <LI>จีน</LI> 10: <LI>อนิ เดีย</LI> 11: <LI>สหรัฐอเมริกา</LI> 12: </OL> 13: <H3>ส่วนประกอบในกาแฟ 3 in 1</H3> 14: <UL> 15: <LI>นา้ ตาล</LI> 16: <LI>ครมี เทียม</LI> 17: <LI>กาแฟ</LI> 18: </UL> 19: </BODY> 20: </HTML>

36 จากโปรแกรมที่ 2.9 ได้ผลลัพธ์ตามภาพที่ 2.20ภาพที่ 2.20 ผลลัพธ์ตัวอย่างการใช้งานแทก็ <OL>…</OL> กับ <UL></UL> 4. การลิงค์เช่ือมโยงเน้ือหา ใชแ้ ทก็ <A>…</A> มีรปู แบบการใชง้ านหลายลกั ษณะ ในที่น้ีจะยกตวั อย่างเปน็ รูปแบบพืน้ ฐานทีใ่ ชง้ านกันท่วั ไป ดงั น้ี 4.1 การเชอ่ื มโยงเอกสารภายใน มีรูปแบบการใช้งาน ดังน้ี <A href=\"ลิงค์เอกสารภายใน\">...</A> 4.2 การเชื่อมโยงลิงค์ภายนอก มีรปู แบบการใช้งาน ดังน้ี <A href=\"ลิงค์ภายนอก\" target=\"ชนิดการเปิด\">...</A> 4.3 การเชอ่ื มโยงอีเมลล์ มีรปู แบบการใชง้ าน ดังนี้ <A href=\"mailto: ชื่ออีเมลล์\">...</A> โดย แอทริบิว href คือ การกาหนดลิงค์ (เอกสารภายใน / ลิงค์ภายนอก / อีเมลล์) แอทริบิว href คือ การกาหนดรปู แบบการเปิด (\"_blank\" หรอื \"_ paren t\")

37 จากรูปแบบตัวอย่างการใช้งานแท็ก <A>…</A> จะแสดงการสร้างลิงค์เชื่อมโยง ดังตัวอย่างโปรแกรมที่ 2.12โปรแกรมท่ี 2.12 การใชง้ านแทก็ <A>…</A> 01: <HTML> 02: <HEAD> 03: <TITLE>Links</TITLE> 04: <META charset=\"UTF-8\"> 05: </HEAD> 06: <BODY> 07: <H3>ลงิ คเ์ ชื่อมโยงภายใน</H3> 08: <UL> 09: <LI><A href=\"index.php\">หน้าหลัก</A></LI> 10: <LI><A href=\"news.php\">ข่าวประชาสมั พันธ์</A></LI> 11: <LI><A href=\"contact.php\">ติดต่อเรา</A></LI> 12: </UL> 13: <H3>ลงิ คเ์ ชื่อมโยงภายนอก</H3> 14: <UL> 15: <LI><A href=\"http://www.pantip.com\" target=\"_blank\">Pantip</A></LI> 16: <LI><A href=\"http://www.sanook.com\" target=\"_blank\">Sanook</A></LI> 17: <LI><A href=\"http://www.kapook.com\" target=\"_blank\">Kapook</A></LI> 18: </UL> 19: <DIV>สอบถามเพิ่มเติมที:่ 20: <A href=\"mailto:[email protected]\">[email protected]</A> 21: </DIV> 22: </BODY> 23: </HTML> จากตวั อย่างโปรแกรมข้างต้น จะได้ผลลพั ธ์ดังภาพที่ 2.21

38ภาพที่ 2.21 ผลลัพธ์ตัวอย่างการใช้งานแท็ก <A>…</A> สาหรับการสร้างลิงค์ที่เป็นรูปภาพจะใช้คาสั่งในลักษณะเดียวกัน แต่จะเปลี่ยนจากข้อมลู ทีใ่ ชเ้ ป็นลิงค์เป็นแทก็ รูปภาพแทน ตัวอย่าง เชน่ <A href=\"index.php\"><IMG src=\"logo.jpg\"></A>สรปุ ภาษาเอชทีเอ็มแอล (HTML) เป็นภาษาประเภทสร้างเอกสารบนเว็บ ปัจจุบันอยู่ภายใต้การกาหนดมาตรฐานขององค์กรทีใ่ ช้ชื่อว่า “W3C” (World Wide Web Consortium) สาหรบั การเริม่ ตน้ สร้างเวบ็ เพจโดยใช้ภาษาภาษาเอชทีเอม็ แอล จะต้องมีความเข้าใจ 2 สว่ น ได้แก่ 1. ส่วนการเตรียมระบบเพื่อให้บริการในรูปแบบเว็บเซิร์ฟเวอร์และเว็บไคลเอ็นท์ โดยสามารถสรปุ เนือ้ หาสาคัญจากบทเรียนได้ ดงั น้ี 1.1 การจาลองเว็บเซิร์ฟเวอร์ ทาได้โดยการติดตั้งชุดโปรแกรมจาลองเซิร์ฟเวอร์โดยในที่นใี้ ช้โปรแกรมที่ชื่อว่า “XAMPP” ประกอบไปด้วยโปรแกรมและเคร่อื งมือทีส่ าคัญ ได้แก่อาปาเช่เว็บเซอร์วิส (Apache web service) ฐานข้อมูลมายเอสคิมแอล (mySQL) ตัวจัดการภาษาพีเอชพเี อ็นจิน้ (PHP Engine) และ แอพลิเคช่นั พเี อชพีมายแอดมิน (PHPmyAdmin)

39 1.2 การทอดสอบการทางานของเว็บเซิร์ฟเวอร์ ควรทดสอบทั้งการให้บริการของเว็บเซอร์วสิ การเชอ่ื มตอ่ ฐานขอ้ มลู และ การทางานรว่ มกับภาษาพีเอชพี 1.3 ห้องที่เตรียมไว้สาหรับเป็นพื้นที่ตาแหน่งเว็บไซต์ หรือ รูท (root) สาหรับตัวจาลองเซิร์ฟเวอร์ “XAMPP” จะอยู่ที่ห้อง “htdocs” ด้วยการพัฒนาเว็บไซต์ซึ่งนักพัฒนาสามารถพัฒนาไปพร้อมกนั ได้หลายระบบ ควรมีการสรา้ งห้องย่อยเพือ่ จดั เกบ็ ระบบไว้ภายในนี้ 1.4 ควรเตรียมโปรแกรมสาหรับตัวแก้ไขเอกสารเว็บเพื่อใช้ในการพัฒนา ในที่นี้จะใช้โปรแกรมที่ชื่อว่า “Notepad++” ซึ่งรองรับการเขียนคาสั่งภาษาเอชทีเอ็มแอล (HTML) และภาษาพีเอชพี (PHP) รวมทั้งภาษาสคลิปท์อน่ื ๆ 2. ส่วนความรู้พื้นฐานสาหรับการสร้างเอกสารเว็บเพจด้วยภาษาเอชทีเอ็มแอล(HTML) ซึ่งเป็นภาษาคอมพิวเตอร์ที่อาศัยการควบคุมการทางานด้วยแท็ก (Tag) และ การใช้งานแอตทริบิวต์ (Attribute) กาหนดคุณสมบัติเพิม่ เตมิ สามารถสรุปเนือ้ หาจากบทเรียนได้ ดังน้ี 2.1 เอกสารเอชทีเอ็มแอลจะเปิดเขียนเอกสารด้วยแท็ก <HTML>…</HTML> ซึ่งภายในจะประกอบไปด้วย 2 ส่วน คือ แท็ก <HEAD>…</HEAD> (ส่วนหัวเอกสาร) และ แท็ก<BODY>…</BODY> (ส่วนตวั เอกสารเปน็ ส่วนที่แสดงผล) 2.2 การคอมเมนท์ เป็นส่วนการเขียนคาอธิบายในภาษาเอชทีเอ็มแอล ใช้แท็กเปิด-ปิด <! .... > ตวั อย่าง เชน่ <! เอกสารสร้างโดย Surachart Buachum > 2.3 ในแท็ก <HEAD>…</HEAD> (ส่วนหัว) จะมีการใช้งานแท็กสาคัญ ตัวอย่างเช่น แท็ก <TITLE>…</TITLE> (บอกชื่อเร่ืองของเอกสารเว็บ) และ แท็ก <META…/> (ส่วนคาส่ังที่ใชใ้ นการจัดทาคลังบญั ชีเน้ือหาของเว็บเพจ) 2.4 การจัดการแสดงผลเนื้อหาจะจัดการไว้ในส่วนแท็ก <BODY>…</BODY>ได้แก่ การจดั การข้อความ ตัวอย่าง เชน่ แท็กหวั ข้อ <H1>หวั ข้อ</H1> (กาหนดรปู แบบข้อความด้วยฟอนท์) และ <B>ตัวหนา</B> (กาหนดให้เป็นตัวหนา) เป็นต้น จัดการแสดงผลตารางด้วยแท็ก <TABLE>…</TABLE> (โครงสร้างตารางภายในจะประกอบไปด้วยแท็กแถว <TR>…</TR>และ แท็กหลัก <TH>…</TH> หรือ <TD>…</TD>) จัดการแสดงผลภาพด้วยแท็ก <IMG> มีตัวอย่าง เช่น <IMG src=\"bcom.jpg\"> และ จัดการเกี่ยวกับลิงค์เชื่อมโยงบนเอกสารเอชทีเอ็มแอลด้วยแท็ก <A>…</A> มีตวั อย่าง เชน่ <A href=\"news.php\"หน้าข่าว</A> 2.5 การใช้งานแอตทริบิวต์ (Attribute) เป็นคุณสมบัติเพิ่มเติมของแท็ก (Tag) เช่นแอตทริบิวต์ bgcolor หมายถึง การกาหนดสีพื้นหลัง มีตัวอย่างการใช้งาน เช่น <BODYbgcolor=\"red\">........</BODY> (กาหนดพื้นหลังเอกสารให้เป็นสีแดง) แอตทริบิวต์ alignหมายถึง การกาหนดการจัดวาง มีตัวอย่างการใช้งาน เช่น <DIV align=\"center\"> จัดกลาง

40</DIV> และ แอตทริบิวต์ width, height และ border คือ กาหนดความกว้าง กาหนดความสูงและ กาหนดขอบ ตามลาดับ มีตัวอย่างการใช้งาน เช่น <IMG src=\"bcom.jpg\" width=\"50\"height=\"50\" border=\"1\"> เปน็ ต้น ท้ังนี้ การใชง้ านแอตทริบิวต์จะขึน้ กับแท็กทีใ่ ชด้ ้วย