powerpoint-03

ภาษา HTML และ XHTML HTML (Hypertext Markup Language) เป็นภาษาหลกั ที่ใช้ในการเขียนเวบ็ ไซตท์ วั่ ไป มีการใช้ กนั มาอย่างแพรห่ ลายและยาวนานตงั้ แต่ต้นทศวรรษท่ี 90 คาว่า Hypertext หมายถึง ขอ้ ความที่เช่ือมต่อกนั ผา่ นลิงก์ (Hyperlink) และ Markup Language หมายถึง ภาษาท่ีใช้ Tag ในการ กาหนดการแสดงผลสิ่งต่าง ๆ ที่แสดงอยบู่ นเวบ็ เพจ ดงั นัน้ HTML จงึ หมายถงึ ภาษาท่ีใช้ Tag ในการกาหนดการแสดงผลเวบ็ เพจที่ต่างกเ็ ช่ือมถงึ กนั ใน Hyperspace ผา่ น Hyperlink นัน่ เอง 2

XHTML (Extensible Hypertext Markup Language) คือ การนาเอาภาษา HTML มาปรบั ปรงุ ใหม่ โดยใช้ มาตรฐานของ Extensible Markup Language (XML) มา รวมกบั HTML เดิม โดยเพ่ิมรายละเอียดบางอย่างเลก็ น้อย ทาให้เกิด XHTML ขึน้ โดย XHTML นัน้ จะสามารถสรา้ ง คาสงั่ (Tag) ใหม่ ๆ ขึน้ ได้เอง และเลือกได้ว่าจะให้คาสงั่ นัน้ แสดงผลอย่างไร นอกจากนัน้ ยงั รองรบั ภาษาอื่นท่ีมี XML เป็นพืน้ ฐานอีกด้วย โดยนอกจากจะทาให้การใช้งานมีความ เข้มงวดด้านภาษา และมีมาตรฐานมากขึน้ ยงั ทาให้ใช้ได้ใน วงกวา้ งมากกว่าบนอปุ กรณ์บางอย่างที่ไม่สามารถ ประมวลผล HTML แบบปกติได้ 3

มาตรฐาน CSS3 HTML (Hypertext Markup Language) คือ มาตรฐานท่ีกาหนดขนึ้ โดย W3C (World Wide Web Consortium) ซ่ึงเป็นองคก์ รกลางท่ีคอยกาหนดมาตรฐาน ต่างๆ เก่ียวกบั อินเทอรเ์ น็ต ปัจจบุ นั อย่ใู นร่นุ ท่ี 3 เพื่อใช้งานคู่ กบั HTML5 CSS มีหน้าที่คือใช้ในการตกแต่งเอกสารของ HTML หรอื XHTML หรอื XML ให้ มีหน้าตาสีสนั ตวั อกั ษร เส้นขอบ พืน้ หลงั ระยะห่าง ฯลฯ โดยใช้แทนคาสงั่ เหล่านี้ของตวั HTML เอง เพื่อลดการใช้ภาษา HTML ในการตกแต่งเอกสารเพื่อให้เอกสาร HTML สะอาดขึน้ และง่ายต่อการพฒั นาหรอื แก้ไข และยงั เข้าใจได้ง่ายขึน้ โดย CSS และ HTML นัน้ จะทาหน้าที่คนละอย่างกนั ในเวลาเดียวกนั แต่ไม่รบกวนซึ่งกนั และกนั และแยกจาก กนั อย่างเดด็ ขาด เช่น HTML จะทาหน้าที่การวางโครงรา่ งเอกสารให้เป็นรปู แบบ ถกู ต้อง ไม่ซบั ซ้อน ในขณะที่ CSS จะทาหน้าท่ีตกแต่งเอกสารให้สวยงาม เป็นต้น 4

เวบ็ แอปพลิเคชนั เวบ็ แอปพลิเคชนั คือ กล่มุ ของเวบ็ เพจที่สามารถทางาน ในลกั ษณะโต้ตอบ กบั ผใู้ ช้ได้ ไม่ใช่เวบ็ เพจท่ีแค่นาเสนอ ข้อมลู เพียงด้านเดียว โดยเวบ็ แอปพลิเคชนั จะมีแนวคิด ใกล้เคียงกบั แอปพลิเคชนั ทวั่ ไป แต่มีความซบั ซ้อนน้อย กว่า เปรียบเสมือนการนาแอปพลิเคชนั โปรแกรมไป ติดตงั้ ไว้บนเวบ็ ไซตน์ ัน่ เอง เสมือนเป็นระบบงานที่ถกู สรา้ งและพฒั นาขึน้ เพ่ือใช้ทางานบนเวบ็ เบราวเ์ ซอร์ โดยจะทางานกบั แหล่งข้อมูลต่าง ๆ ซึ่งจะรวมไปถึง ฐานข้อมลู เพ่ือตอบสนองต่อข้อมลู ที่มีการเปล่ียนแปลง ได้เรอ่ื ย ๆ 5

แฟลช แฟลชเป็นเครอื่ งมือที่ถกู พฒั นาสาหรบั สร้างสื่อต่าง ๆ ทงั้ ภาพเคลื่อนไหว การนาเสนอ แบบทดสอบ หนังสือ อิเลก็ ทรอนิกส์ และสื่อกราฟิ กอิเลก็ ทรอนิกส์ โดยการใช้แฟลช ในการสรา้ งสื่อต่าง ๆ รวมไปถึงเวบ็ ไซตน์ ัน้ ไดร้ บั การยอมรบั กนั อยา่ งกว้างขวางในวงการนักออกแบบกราฟิ ก นักออกแบบ เวบ็ ไซต์ นักออกแบบมลั ติมีเดีย เนื่องจากมีลกั ษณะการสร้างที่ อิสระ และตกแต่งรวมถงึ สร้างส่วนโต้ตอบ (Interactive) ได้ใน ตวั นอกจากนัน้ แฟลชมฟี ังกช์ นั่ การเขียนโปรแกรมในตวั (Action Script) ทาให้สามารถออกแบบเวบ็ ไซตท์ ่ีต้องการได้ อยา่ งอิสระ จึงเหมาะกบั เวบ็ ท่ีต้องการสรา้ งให้ มีเอกลกั ษณ์ เฉพาะตวั หรอื มีการนาเสนอที่โดดเด่น นอกจากนัน้ ยงั สามารถใช้เชื่อมโยงกบั ภาษาคอมพิวเตอรอ์ ่ืน ๆ รวมถึง HTML 6

โปรแกรมแบบ WYSIWYG WYSIWYG ย่อมาจาก What you see is what you get ซึ่งเป็นโปรแกรมท่ีมี อินเตอรเ์ ฟสให้ผใู้ ช้สามารถจดั วางภาพ ข้อความ และมลั ติมีเดียไว้ยงั ตาแหน่งต่าง ๆ รวมถึงกาหนดโครงสร้างคร่าว ๆ และตกแต่งหน้าเวบ็ เพจได้ โดยไม่จาเป็นต้องเขียนโค้ด HTML ซึ่งในส่วนนี้โปรแกรมจะเขียนให้โดยอตั โนมตั ิตามที่เราจดั วางไว้ ทาให้ผ้อู อกแบบ เวบ็ ไซต์ สามารถสร้างหน้าเวบ็ เพจได้เอง โดยไม่จาเป็นต้องมีความร้ดู ้านการเขียนโค้ด มากนัน้ ส่งผลให้การออกแบบเวบ็ ไซต์งา่ ยขึน้ และมีรปู แบบท่ีสวยงามน่าสนใจมากขึน้ กว่าในสมยั ที่เขียนโค้ดกนั ด้วย HTML อย่างเดียว 7

โปรแกรมแบบ CMS CMS ย่อมาจาก Content Management System เป็นโปรแกรมในรปู แบบเวบ็ แอปพลิเคชนั แบบหน่ึงท่ีถกู พฒั นาขึน้ เพื่อใช้สร้างและบริหารจดั การเนื้อหาเวบ็ ไซตไ์ ด้ อย่างง่าย และสะดวกโดยที่จะมีรปู แบบเวบ็ ไซตเ์ บอื้ งต้น เป็นเวบ็ เพจเปล่าท่ีเพียงเพิ่ม ข้อมูลข้อความ รปู ภาพและอ่ืน ๆ กก็ ลายเป็นเวบ็ ไซตท์ ่ีใช้งานได้โดยไม่จาเป็นต้อง จดั รปู แบบทงั้ หมดเอง และสามารถสรา้ งเวบ็ ไซตไ์ ด้โดยที่ไม่จาเป็นต้องมีความร้เู รื่อง การขียนโปรแกรม โดยในโปรแกรมมกั มีเวบ็ แอปพลิเคชนั เช่น ระบบสมคั รสมาชิก แถม มาด้วยให้สามารถเพิ่มเติมลงในเวบ็ ไซตไ์ ด้ รวมไปถึงปรบั แต่งหน้าตา โครงสรา้ งพืน้ ฐาน ภาพพืน้ หลงั ได้อย่างสะดวก โดยจะมีข้อจากดั คือ ไม่สามารถปรบั แต่ง และใส่ลกู เล่นได้ หลากหลายเท่าการใช้โปรแกรมแบบ WYSIWYG หรือการเขียนโค้ด HTML เอง ตวั อย่าง โปรแกรมประเภทนี้ได้แก่ Joomla! 8

โปรแกรมแฟลช โปรแกรมแฟลช หรอื (Adobe Flash) นัน้ เป็นโปรแกรมของ บริษทั Adobe (ก่อนหน้านี้พฒั นาโดยบริษทั Macromedia) ซ่ึงใช้ สร้างสื่อมลั ติมีเดียได้ รวมไปถงึ เวบ็ ไซต์ เช่นกนั โดยใน โปรแกรมจะมีเครือ่ งมอื และคาสงั่ พืน้ ฐาน รวมไปถงึ ฟังกช์ นั่ การ เขียนโปรแกรมท่ีต้องนามาประยกุ ตต์ ามจินตนาการของ ผใู้ ช้งานก่อนจะท่ีจะออกมาเป็นสิ่งท่ีต้องการได้ การสร้างเวบ็ ไซตโ์ ดยใช้แฟลชนัน้ ค่อนขา้ งย่งุ ยาก และจาเป็นต้องมีความรู้ ในคาสงั่ ต่างๆ รวมไปถงึ การเขียนโปรแกรมเป็นอย่างดีจึงสามารถสร้างออกมาเป็น เวบ็ ไซตท์ ี่ใช้งานได้จริง แต่ขอ้ ดีคือ สามารถกาหนดทกุ อยา่ งทกุ ส่วนของหน้าเวบ็ เพจ ได้อย่างอิสระ โดยสามารถใส่ลกู เล่นไดต้ ามท่ีต้องการหากมีความสามารถในการ สร้างลกู เล่นนัน้ ๆ จากในโปรแกรมผา่ นเครอื่ งมือและคาสงั่ มาใช้งาน บางกรณีอาจนา คาสงั่ สาเรจ็ รปู มาใช้งานร่วมกนั ได้ 9

1. คาสงั่ (Tag) 1.1 Tag เดี่ยว เป็น Tag ที่มีแค่ตวั เดียว ไม่ต้องมีการปิ ดรหสั เช่น 1.2 Tag เปิ ด-ปิ ด เป็น Tag ท่ีมีลกั ษณะการใช้งานที่ต้องใช้เป็นคู่ ดงั นี้ 10

2. ลกั ษณะ (Attribute) Attribute คือ ตวั บอกรายละเอียดของ Tag นัน้ โดยจะเขียนระบไุ ว้ใน Tag เปิ ด เช่น เป็นการระบวุ ่าตวั อกั ษรใน Tag นี้ ให้ชิดซ้าย เป็นต้น 3. Non-Case Sensitive คือ การใช้ตวั พิมพใ์ หญ่ เช่น <BR> หรือตวั พิมพเ์ ลก็ เช่น <br> จะให้ ผลลพั ธท์ ี่ไม่ต่างกนั 11

โครงสร้างภาษา HTML เบอื้ งต้น ภาษา HTML มีโครงสร้างพืน้ ฐานคือ เร่ิมต้นด้วย Tag <html> จะจบ ด้วย </html> เสมอ โดยคาสงั่ ที่อย่ภู ายใต้ Tag <html> </html> ประกอบไป ด้วย 2 กล่มุ หลกั ได้แก่ 1. Head คาสงั่ ส่วนนี้จะอยู่ด้านบนของโค้ด โดยท่ีเป็ นคาสงั่ ท่ีใช้อธิบาย และกาหนดลกั ษณะรายละเอียดเก่ียวกบั เวบ็ เพจ โดยจะไม่แสดงผลที่เวบ็ เพจ โดยตรง 2. Body คาสงั่ ส่วนนี้จะเป็ นคาสงั่ ท่ีใช้เก่ียวกบั การแสดงผลโดยตรงและ รปู แบบต่าง ๆ โดยท่ีทกุ อย่างจะแสดงผลบนเวบ็ เบราวเ์ ซอรโ์ ดยตรง 12

โดยเม่ือประกอบรวมกนั แล้วจะได้โครงสร้างพืน้ ฐาน ดงั นี้ 13

คาสงั่ HTML เบอื้ งต้น 1. คาสงั่ ในส่วนของ Head (Head Section Tag) Head Section เป็นคาสงั่ ทงั้ หมดภายใต้ Tag <head></head> เป็นส่วนที่ ใช้อธิบายเก่ียวกบั ข้อมลู เฉพาะของหน้าเวบ็ เช่น ช่ือเรือ่ งของหน้าเวบ็ (Title) ชื่อ ผจู้ ดั ทาเวบ็ (Author) คียเ์ วิรด์ สาหรบั การค้นหา (Keyword) โดยมี Tag ท่ีสาคญั ใน เบอื้ งต้น ได้แก่ เป็นการแสดงช่ือเร่ืองของหน้าเวบ็ ข้อความที่ใช้เป็น title ไมค่ วรพิมพ์ เกิน 64 ตวั อกั ษร ไมใ่ ส่ลกั ษณะพิเศษเช่น ตวั หนา เอียง หรือสี โดยขอ้ ความในส่วน นี้จะแสดงผลใน title bar ของ เวบ็ เบราวเ์ ซอร์ 14

2. คาสงั่ ในส่วนของ Body (Body Section Tag) Body Section คือ คาสงั่ ทงั้ หมดภายใต้ Tag <body></body> และ แบง่ กล่มุ คาสงั่ เป็นส่วนเนื้อหาหลกั ของหน้าเวบ็ ซ่ึงการแสดงผลจะมีการใช้ Tag จานวนมากขึน้ อย่กู บั ลกั ษณะของขอ้ มลู เช่น รปู ภาพ เสียง วีดิโอ หรือมลั ติมีเดีย รวมถงึ ขอ้ ความเนื้อหาเวบ็ ซึ่งเป็นส่วนการทางานหลกั ของเวบ็ ดงั นี้ เม่อื เขียนแบบนี้จะทาให้หน้าเวบ็ เพจแสดงผลคาว่า “ช่ือเรอ่ื งของเวบ็ ” ได้ทนั ที โดยที่ไม่มีลกั ษณะพิเศษใด ๆ 15

ตวั อย่างการใช้งานภาษา HTML เบอื้ งต้น การเขยี นโค้ด HTML เบอื้ งต้นนัน้ เร่ิมต้นท่ีการเขียนโค้ดลงในโปรแกรม Editor เช่น ใน Notepadจากนัน้ จงึ บนั ทึกเป็นไฟล์ html จากนัน้ ถึงนาไปเปิ ด แสดงผลในเวบ็ เบราวเ์ ซอร์ เช่น ในตวั อย่างต้องการเขียนหน้าเวบ็ เพจ ให้แสดงผล เร่อื งวนั ปี ใหมอ่ ยา่ งเรียบงา่ ยไมซ่ บั ซ้อน โดยจะใช้โค้ด ดงั นี้ 16

โดยใช้คาสงั่ ดงั นี้ เป็นคาสงั่ เริ่มต้นท่ีใช้กาหนดจดุ เร่ิมต้นและสิ้นสดุ ของโค้ดภาษา HTML เพ่ือกาหนดว่า คาสงั่ ภายในคาสงั่ นี้เป็นคาสงั่ ใน ส่วนของ Head เพ่ือกาหนดช่ือของหน้าเวบ็ เพจว่า Happy New Year เพ่ือกาหนดว่าคาสงั่ ภายในคาสงั่ นี้เป็นคาสงั่ ใน ส่วนของ Body และใช้เขียนข้อความท่ีต้องการ แสดงผลว่า สขุ สนั ตว์ นั ปี ใหม่ 17

1. เปิ ดโปรแกรม Notepad และเขียนโค้ดดงั กล่าวลงไป 2. คลิกที่ File > Save As หรอื Save (กรณีท่ีบนั ทึกไฟลค์ รงั้ แรก) จะ ปรากฏหน้าต่าง Save As 2.1 ไปที่โฟลเดอรท์ ี่ต้องการบนั ทึกไฟล์ 2.2 เลือก Save as type เป็น All Files จากนัน้ ตงั้ ชื่อ File Name ว่า newyear.html 18

2.3 เลือก Encoding เป็น Unicode 2.4 กด Save 19

3. ไปยงั โฟลเดอรท์ ี่บนั ทึกไฟล์ html ไว้ให้คลิกขวาท่ีไฟลแ์ ล้วไปที่ Open with > Internet Explorer 20

4. Internet Explorer จะเปิ ดหน้าเวบ็ เพจท่ีได้เขียนไว้ขึน้ มา ซ่ึงจะ แสดงผลได้ ดงั นี้ 21

การแก้ไขโค้ดเวบ็ เพจ 1. ไปที่โฟลเดอรท์ ี่เกบ็ ไฟลไ์ ว้ จากนัน้ คลิกขวาแล้วไปที่ Open with > Notepad 22

2. จะเป็นการเปิ ดโค้ดผา่ น Notepad ขึน้ มาให้สามารถแก้ไขได้ เม่ือ แก้ไขแล้วให้บนั ทึกให้เรียบร้อย 23

การใส่สีพืน้ หลงั ให้เวบ็ เพจ การใส่สีให้กบั พืน้ หลงั ของเวบ็ เพจ สามารถทาได้โดยการพิมพ์ Tag นี้ลงใน<body></body> เช่น เม่ือต้องการให้พืน้ หลงั เป็นสีแดงให้ใส่ Tag ลงไปใน <body></body> ดงั ตวั อย่างนี้ 24