Recommended
PDF
เริ่มต้นการสร้าง Home page ด้วยคำสั่งเบื้องต้น
PDF
DOCX
PDF
PDF
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
PDF
PPT
PDF
คู่มือการใช้งาน Word 2007
PPT
PDF
PDF
การใช้งาน Microsoft office word 2007
PDF
ใช้งานโปรแกรม Microsoft word2007
PDF
PDF
PDF
PDF
PPTX
PPTX
PDF
PPT
PDF
PDF
ความรู้เบื้องต้น โปรแกรม Microsoft word 2010
PDF
น.ส.ศิรพร โมกศิริ เลขที่ 9 ม.4.5
PPTX
การศึกษาวิธีการจัดการเรียนการสอน
PDF
Marketech Agency Credentials
PPTX
PPT
PPT
Cytoskeleton Cell Survivor
PDF
Post event analysis of bazm e-sada
PPTX
More Related Content
PDF
เริ่มต้นการสร้าง Home page ด้วยคำสั่งเบื้องต้น
PDF
DOCX
PDF
PDF
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
PDF
PPT
PDF
คู่มือการใช้งาน Word 2007
What's hot
PPT
PDF
PDF
การใช้งาน Microsoft office word 2007
PDF
ใช้งานโปรแกรม Microsoft word2007
PDF
PDF
PDF
PDF
PPTX
PPTX
PDF
PPT
PDF
PDF
ความรู้เบื้องต้น โปรแกรม Microsoft word 2010
PDF
น.ส.ศิรพร โมกศิริ เลขที่ 9 ม.4.5
Viewers also liked
PPTX
การศึกษาวิธีการจัดการเรียนการสอน
PDF
Marketech Agency Credentials
PPTX
PPT
PPT
Cytoskeleton Cell Survivor
PDF
Post event analysis of bazm e-sada
PPTX
PPT
PPTX
Unit 10 newsletter oceans week 2[1]
PPT
PDF
40 IOT Innovations which are changing life
PPTX
Similar to บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
PDF
เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL
PDF
หน่วยการเรียนรู้ที่ 3 html
PDF
PDF
PDF
PPTX
PDF
PDF
PPTX
PDF
PDF
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
PPTX
Hyper text markup language
PDF
PPT
PDF
PDF
ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจ
PPT
PDF
PDF
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
PPT
ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์ 1. 2. 3. 4. ประเภทของโปรแกรมบนเว็บ การเขียนโปรแกรมบนเว็บสามารถแบ่งลักษณะการทำงานของโปรแกรมออกได้เป็น 2 ประเภท ดังนี้1. การเขียนโปรแกรมแบบ Static (Static Programming) การโปรแกรมแบบ Static คือ ลักษณะของโปรแกรมบนเว็บไม่ค่อยมีการเปลี่ยนแปลง เช่น เว็บประวัติส่วนตัว เว็บนำเสนอประวัติองค์กรและโครงสร้างขององค์กร เป็นต้น เว็บเพจประเภทนี้ถ้ามีการเปลี่ยนแปลงบ่อยๆ อาจทำให้เกิดความล้าช้าในการอัพเดตข้อมูล ขาดความยืดหยุ่น และไม่สามารถสร้างการโต้ตอบระหว่างผู้ใช้กับเว็บเพจได้รูปที่ 3.2แสดงการทำงานของการเขียนโปรแกรมแบบ Static 5. (ต่อ)2. การโปรแกรมแบบ Dynamic (Dynamic Programming) การโปรแกรมแบบ Dynamic คือ ลักษณะของโปรแกรมบนเว็บที่ได้รับการพัฒนาขึ้นจากมาเพื่อแก้ปัญหาของการโปรแกรมแบบ Static ให้มีการทำงานที่ยืดหยุ่นมากกว่า ทั้งในเรื่องของการอัพเดตข้อมูล และสามารถโต้ตอบกับผู้ใช้ได้ โดยจะเหมาะสำหรับเว็บที่ต้องการเปลี่ยนแปลงข้อมูลอยู่บ่อยครั้งหรือเว็บที่มีการจัดเก็บข้อมูลจำนวนมากไว้ภายในฐานข้อมูลในโดยการพัฒนานั้นต้องมีความรู้ความสามารถในการเขียนโปรแกรม เช่น PHP, JavaScript และ ASP.NET เป็นต้น เนื่องจากต้องใช้ความสามารถของภาษาสคริปต์เข้ามาควบคุมหรือกำหนดรูปแบบการทำงานร่วมกับกับภาษา HTMLรูปที่ 3.3แสดงการทำงานของการเขียนโปรแกรมแบบ Dynamic 6. ภาษาที่ทำงานฝั่งไคล์เอ็น (Client-Side Scripting) ภาษาที่ทำงานฝั่งไคลเอ็นต์ (Client-Side Scripting) เป็นเทคโนโลยีที่สคริปต์ทำงานบนฝั่งไคลเอนต์เช่น JavaScript และ DOM เป็นต้น โดยภาษาสคริปต์ที่ทำงานอยู่ที่ฝั่งไคล์เอ็น มีดังนี้ 1. HTMLย่อมาจาก Hypertext Markup Language คือ ภาษาที่มีลักษณะเป็นภาษาเชิงการบรรยายเอกสารไฮเปอร์มีเดีย (Hypermedia Document Description Language) เพื่อเผยแพร่ในระบบเครือข่าย WWW (World Wide Web) โดยใช้ตัวกำกับ (Markup Tag) เพื่อทำหน้าที่ควบคุมการแสดงผลข้อมูล รูปภาพ และวัตถุอื่นๆ ผ่านทางโปรแกรมเว็บบราวเซอร์ในแท็ก (Tag) จะมีส่วนขยาย (Attribute) เพื่อควบคุมการแสดงผล 7. มาตรฐานของภาษา HTML ภาษา HTML ได้รับการพัฒนาและถูกนำไปใช้อย่างแพร่หลาย จึงทำให้เกิดมาตรฐานในเวอร์ชั่นต่างๆดังนี้ 1. HTML 1.0 เกิดขึ้นในปี 1993 ได้กำหนดให้เอกสาร HTML ที่พัฒนาขึ้นแม้จะเขียนด้วยมาตรฐานใดๆ ก็ตาม ต้องไม่ทำให้เอกสารที่สร้างนั้นอ่านไม่ได้ 2. HTML 2.0 เกิดขึ้นในปี 1995 พัฒนาขึ้นโดย IETF (Internet Engineering Task ForceX)เพื่อหวังให้สามารถเปิดแสดงผลกับบราวเซอร์ทั่วไปได้ 3. HTML 3.0 ถูกพัฒนาขึ้นในปีเดียวกันกับเวอร์ชั่น 2.0 โดยเพิ่มให้สามารถทำงานเกี่ยวกับตาราง การปรับข้อความ และส่วนการแสดงผลที่ซับซ้อนได้ดียิ่งขึ้น 4. HTML 3.2 ถูกพัฒนาขึ้นในปี 1996 โดยมีการเพิ่ม Element และ Attribute ที่สามารถทำงานร่วมกับหลายๆ บราวเซอร์ได้มากขึ้น 8. (ต่อ) 5. HTML 4.0 พัฒนาขึ้นในปี 1997 ด้วยองค์กร W3C (The World Wide Web Consortium) และทำหน้าที่กำหนดมาตรฐานของ HTML เพื่อพัฒนาเทคโนโลยี WWW ให้ล้ำหน้ายิ่งขึ้น อีกทั้งได้มีการเพิ่มประสิทธิภาพการทำงานด้วยสไตล์ชีท (Style sheet) เฟรม (Frame) การฝังอ็อบเจ็กต์ของโปรแกรมเสริมต่างๆ เพื่อให้สามารถแสดงภาพและเสียง ฟอร์ม และการใช้งานร่วมกับภาษาสคริปต์แบบต่างๆได้ 6. HTML 4.01 ได้ถูกพัฒนาขึ้นในปีเดียวกันกับเวอร์ชั่น 4.0 เพื่อให้ข้อผิดพลาดต่างๆ ที่เกิดขึ้นกับเวอร์ชั่น 4.0 มีการทำงานที่สมบูรณ์ยิ่งขึ้น 9. องค์ประกอบของ HTML (HTML Elements)องค์ประกอบของ HTML มีดังนี้ 1. แท็ก HTML ประกอบด้วยเครื่องหมาย < และ > โดยทั่วไปในแต่ละแท็กจะต้องม๊เครื่องหมายนี้คู่กัน และประกอบด้วยแท็กเริ่มต้น และแท็กสิ้นสุด เช่น แท็ก <p> เป็นแท็กเริ่มต้น จะสิ้นสุดด้วยแท็ก </p> เป็นต้น แท็ก HTML สามารถเขียนได้ทั้งตัวอักษรพิมพ์เล็ก หรือตัวอักษรพิมพ์ใหญ่ เนื่องจากองค์กร W3C ได้มีข้อกำหนดให้ใช้แท็กHTML ที่เป็นตัวอักษรพิมพ์เล็กใน HTML เวอร์ชัน 4 และรองรับการใช้งานร่วมกับภาษา XHTML โดยแบ่งแท็กออกเป็น 2 ประเภท คือ 1.1 แท็กเดี่ยว คือ แท็กที่ไม่ต้องการปิดแท็ก สามารถใช้งานได้เลย เช่น <br> และ <hr>เป็นต้น 1.2 แท็กเปิด/ปิด คือ การแยกแท็กออกเป็น 2 ส่วน คือ ส่วนเริ่มแท็ก หรือเรียกว่า“แท็กเปิด” และส่วนจบแท็ก หรือเรียกว่า “แท็กปิด” ซึ่งจะต้องกำหนดเครื่องหมาย Slash (/) ไว้หน้าชื่อแท็กนั้นด้วย เช่น <html>…</html> และ <h1>…</h2> เป็นต้น 10. (ต่อ) 2. แอททริบิวต์ (Attribute) คือ คุณสมบัติที่สามารถกำหนดเพิ่มเติมเพื่อเพิ่มประสิทธิภาพการทำงานให้กับแท็กต่างๆ ของภาษา HTML โดยที่แอททริบิวต์จะประกอบไปด้วย ชื่อ และค่า (Name =“Value”) เช่น เพิ่มแอททริบิวต์ bgcolor ไปในแท็ก <body> เพื่อเปลี่ยนสีพื้นหลังของเอกสารเป็นสีแดง และกว้าง 800px สามารถกำหนดได้ดังนี้ โดย bgcolor และ width คือ แอททริบิวต์ของแท็ก <body> ที่ใช้กำหนดคุณสมบัติเพิ่มเติม ทั้งนี้แอททริบิวต์บางตัวสามารถใช้ได้กับเฉพาะบางแท็ก แต่แอททริบิวต์บางตัวก็สามารถใช้ได้กับหลายๆ แท็กเช่นกัน 11. 12. (ต่อ) 3.1 <html>…</html> เป็นแท็กที่วางไว้ตอนต้นและท้ายของเว็บเพจ เพื่อให้เว็บบราวเซอร์ทราบว่าเว็บเพจที่จะอ่านแท็กต่อไปนี้ใช้รูปแบบของภาษา HTML 3.2 <head>…</head> ใช้กำหนดชื่อเรื่องให้กับเว็บเพจ โดยแสดงข้อความเฉพาะหน้าเว็บเพจที่มีการกำหนดชื่อเรื่องไว้เท่านั้น (บางเพจไม่จำเป็นต้องกำหนดก็ได้) 3.3 <title>…</title> ใช้กำหนดชื่อให้กับเว็บเพจ โดยจะแสดงที่ Title Bar บนหน้าต่างเว็บบราวเซอร์ โดยแท็กนี้ต้องวางไว้ระหว่างแท็ก <head>…</head> เสมอ 3.4 <body>…</body> เป็นบริเวณที่ใช้กำหนดขอบเขตเนื้อหาที่ต้องการแสดงบนเว็บบราวเซอร์ 13. พื้นฐานแท็ก HTMLแท็ก HTML พื้นฐานที่ควรทราบมีดังนี้ 1. แท็กสำหรับกำหนดหัวข้อ (Heading) เป็นแท็กที่ใช้กำหนดหัวข้อ โดยแทนด้วยแท็ก <h1>ถึง <h6> ซึ่งแท็ก <h1> จะแสดงตัวอักษรที่มีขนาดใหญ่สุด และไล่ระดับลงมาจนถึงแท็ก <h6> ที่มีขนาดเล็กที่สุด เช่น2. แท็กสำหรับกำหนดย่อหน้า (Paragraphs) เป็นแท็กที่ใช้สำหรับกำหนดย่อหน้า โดยแทนด้วยแท็ก <p> เช่น 14. (ต่อ) 3. แท็ก <br> ใช้สำหรับกำหนดเมื่อต้องการขึ้นบรรทัดใหม่ แต่ไม่ใช่เริ่มต้นย่อหน้าใหม่ เช่น 4. แท็ก <a> เป็นแท็กที่ใช้สำหรับสร้างการเชื่อมโยงไปยังเอกสาร HTML, รูปภาพ เสียง และอื่นๆ เช่น 5. แท็ก <frame> ใช้กำหนดชื่อเอกสาร HTML ที่ต้องการแสดงในแต่ละคอลัมน์หรือแถว 15. (ต่อ) 6. แท็ก <table> สำหรับสร้างตาราง โดยจะถูกแบ่งออกเป็นแท็ก <tr> ใช้กำหนดแถวในตารางและแท็ก <td> ใช้กำหนดเซลล์ให้กับตาราง ซึ่งข้อมูลที่บรรจุภายในสามารถเป็นได้ทั้งข้อความ รูปภาพ ฟอร์มและอื่นๆ แสดงตัวอย่างการใช้งานได้ดังนี้ 16. (ต่อ)7. แท็กสำหรับสร้างรายการ (List) ใน HTML ประกอบไปด้วย Unordered Lists, Ordered Lists, Definition Lists และ Nested Lists โดยแต่ละตัวมีรายละเอียดดังนี้ 7.1 Unordered Lists เป็น List ที่มีรูปแบบง่าย เหมาะสำหรับการนำเสนอข้อมูลที่ไม่จำเป็นต้องมีเลขลำดับ เช่น 1., 2., 3., … เป็นต้น แต่จะใช้สัญลักษณ์แสดงแต่ละรายการย่อยแทน เช่น รูปวงกลมทึบ () เป็นต้น การสร้าง List แบบไม่มีลำดับจะใช้แท็ก <ul> และกำหนดรายการที่ต้องการภายใน List ด้วยแท็ก <li> ตัวอย่างเช่น 17. (ต่อ) 7.2 Ordered List เป็น List ที่มีการจัดลำดับเพื่อนำเสนอข้อมูลที่เกี่ยวข้องกันเป็นลำดับเช่น ขั้นตอนการทำงาน หรืออันดับหนังสือขายดี เป็นต้น การใช้งานจะคล้ายกับ Unordered List แต่ละใช้แท็ก<ol> แทนแท็ก <ul> ซึ่งจะกำหนดตัวเลขข้างหน้าแต่ละรายการให้โดยอัตโนมัติ ตัวอย่างเช่น 18. (ต่อ) 7.3 Definition List เป็นรูปแบบของ List ที่นำมาใช้กำหนดคำจำกัดความ เช่นพจนานุกรม เป็นต้น โดยใช้แท็ก <dl> ซึ่งแบ่งออกเป็น 2 ส่วน คือ ส่วนของคำจำกัดความ และความหมายของคำจำกัดความ โดยจะใช้แท็ก <dt> และ <dd> ตามลำดับ ตัวอย่างเช่น 19. (ต่อ) 7.4 Nested List เป็นรูปแบบของการใช้ List ซ้อนใน List อีกตัวเพื่อนำเสนอข้อมูลที่มีหัวข้อย่อย หรือมีขั้นตอนมาก เช่น เมนูอาหาร เป็นต้น8. แท็ก <img> เป็นแท็กที่ใช้สำหรับแสดงรูปภาพในเอกสาร HTML แสดงตัวอย่างการใช้งานได้ดังนี้ 20. แท็ก HTML สำหรับสร้างฟอร์มแท็ก HTML ที่ใช้สำหรับสร้างฟอร์ม มีดังนี้ 1. แท็ก <form> เป็นแท็กที่บอกให้เว็บบราวเซอร์ทำการสร้างฟอร์มเพื่อรองรับข้อมูลจากผู้ใช้มีรูปแบบดังนี้<form method= “วิธีส่งข้อมูล” action= “ตำแหน่งไฟล์ที่ต้องการส่งไป”> …. </form>โดยที่ -method ใช้ระบุวิธีส่งข้อมูลของแบบฟอร์ม มี 2 วิธี คือ GET และ POST -action ใช้ระบุตำแหน่งเพจปลายทางบนเว็บเซิร์ฟเวอร์ที่ทำหน้าที่รับข้อมูลจากฟอร์มไปประมวลผล 21. (ต่อ) 2. แท็ก <input> เป็นแท็กที่ใช้สร้าง รูปแบบการนำข้อมูลเข้าภายในแบบฟอร์ม (แท็ก <form>) มี6 รูปแบบ ดังนี้ 2.1 Text มีลักษณะเป็นช่องข้อความสำหรับให้ผู้ใช้พิมพ์ข้อความที่ต้องการลงไป มีรูปแบบการใช้งาน และแอ็ททริบิวต์ ดังนี้<input type=text size=n1 name=filename maxliength=n2 value=“massage”> 22. 23. (ต่อ) 2.2 Password เป็นรูปแบบสำหรับรับข้อมูลคล้ายกับ Text แต่จะแสดงเป็นเครื่องหมายดอกจัน (*) ขึ้นให้เห็น ใช้กรณีที่สร้างเป็นช่องรับข้อมูลเป็นรหัสต่างๆ มีรูปแบบการใช้งานและแอ็ททริบิวต์ ดังนี้<input type=password size=n1 name=filename maxlength=n2>โดยที่ -type เป็นแท็กที่ใช้กำหนดรูปแบบข้อมูลที่ต้องการ -size เป็นแอ็ททริบิวต์ที่กำหนดขนาดของช่องว่างในการรับข้อมูล -n1 เป็นเลขจำนวนเต็มของจำนวนตัวอักษรของกรอบรับข้อความ -name เป็นแอ็ททริบิวต์ที่กำหนดชื่อของข้อมูลที่ใช้เก็บข้อมูล -filename เป็นชื่อฟิลด์ที่ใช้เก็บข้อมูลแต่ละรายการ -maxliength เป็นแอ็ททริบิวต์ที่กำหนดความยาวสูงสุดของข้อมูลที่รับมา -n2 เป็นเลขจำนวนเต็มของความยาวสูงสุดที่ต้องการกำหนด 24. (ต่อ) 2.3 Radio เป็นรูปแบบการรับข้อมูลที่กำหนดทางเลือกไว้ให้ผู้ใช้เลือกทางใดทางหนึ่งมีรูปแบบการใช้งาน<input type= radio name=filename value=“massage” checked>โดยที่ -type เป็นแท็กที่ใช้กำหนดรูปแบบข้อมูลที่ต้องการ -name เป็นแอ็ททริบิวต์ที่กำหนดชื่อของข้อมูลที่ใช้เก็บข้อมูล -filename เป็นชื่อฟิลด์ที่ใช้เก็บข้อมูลแต่ละรายการ -value เป็นแอ็ททริบิวต์ที่กำหนดค่าที่ต้องการ -message เป็นค่าของรายการเลือกที่ถูกเลือก ค่าที่ได้จะเก็บไว้ในชื่อฟิลด์ที่ตั้งไว้ -checked เป็นแอ็ททริบิวต์ที่กำหนดให้เว็บบราวเซอร์ใช้ค่าในรายการนั้นเป็นค่าปกติจะมีเพียงรายการเดียวในแต่ละกลุ่มรายการ 25. (ต่อ) 2.4 Checkbox รูปแบบการรับข้อมูลที่ผู้ใช้เลือกข้อมูลได้มากกว่า 1 รายการ มีรูปแบบการใช้งานและแอ็ททริบิวต์ดังนี้<input type=checkbox name=filename value=“massage” checked>โดยที่ -type เป็นแท็กที่ใช้กำหนดรูปแบบข้อมูลที่ต้องการ -name เป็นแอ็ททริบิวต์ที่กำหนดชื่อของข้อมูลที่ใช้เก็บข้อมูล -filename เป็นชื่อฟิลด์ที่ใช้เก็บข้อมูลแต่ละรายการ -value เป็นแอ็ททริบิวต์ที่กำหนดค่าที่ต้องการ -message เป็นค่าของรายการเลือกที่ถูกเลือก ค่าที่ได้จะเก็บไว้ในชื่อฟิลด์ที่ตั้งไว้ -checked เป็นแอ็ททริบิวต์ที่กำหนดให้เว็บบราวเซอร์ใช้ค่าในรายการนั้นเป็นค่าปกติจะมีเพียงรายการเดียวในแต่ละกลุ่มรายการ 26. (ต่อ) 2.5 Submit รูปแบบการรับข้อมูลทั้งหมดในแบบฟอร์มโดยโปรแกรมเบราว์เซอร์จะสร้างปุ่มให้เอง ใช้เมื่อต้องการส่งข้อมูลออกไป มีรูปแบบการใช้งานและแอ็ททริบิวต์ดังนี้<input type=submit value=“massage” checked>โดยที่ -type เป็นแท็กที่ใช้กำหนดรูปแบบข้อมูลที่ต้องการ -value เป็นแอ็ททริบิวต์ที่กำหนดให้เว็บบราวเซอร์สร้างปุ่ม โดยใช้ข้อความจากmessage-message เป็นข้อความที่เว็บบราวเซอร์ใช้แสดงบนปุ่ม 27. (ต่อ) 2.6 Reset รูปแบบการลบข้อมูลทั้งหมดในแบบฟอร์ม โดยโปรแกรมเบราว์เซอร์จะสร้างปุ่มให้เอง ใช้เมื่อต้องการลบข้อมูลทิ้ง มีรูปแบบการใช้งานและแอ็ททริบิวต์ ดังนี้<input type= reset value=“massage” >โดยที่ -type เป็นแท็กที่ใช้กำหนดรูปแบบข้อมูลที่ต้องการ -value เป็นแอ็ททริบิวต์ที่กำหนดให้เว็บบราวเซอร์สร้างปุ่ม โดยใช้ข้อความจากmessage -message เป็นข้อความที่เว็บบราวเซอร์ใช้แสดงบนปุ่ม 28. (ต่อ)3. แท็ก <select> เป็นแท็กที่ใช้สร้างรูปแบบของข้อมูลนำเข้า ที่มีรายการเลือกหลายรายการ โดยมีลักษณะเป็นเมนูแบบ Drop-Down ช่วยให้ประหยัดพื้นที่การแสดงผลบนจอภาพของโปรแกรมเบราว์เซอร์มีรูปแบบการใช้งานดังนี้ <select name=fieldname size=n1 > <option>item1 </option> <option>item2 </option> <option>item... </option> </select> 29. 30. (ต่อ) 4. แท็ก <textarea> เป็นแท็กที่ใช้สร้างรูปแบบข้อมูลนำเข้า ที่ต้องการคำอธิบายหรือคำแนะนำข้อมูลต่างๆ ที่ต้องการให้ผู้ใช้ป้อนเข้ามา มีรูปการใช้งานดังนี้<textarea name=filename rows=n cols=m> message</textarea>โดยที่ -name เป็นการกำหนดชื่อฟิลด์ให้กับข้อมูล -filename เป็นชื่อฟิลด์ที่ใช้เก็บข้อมูลของข้อความต่างๆ ไว้ -rows เป็นการกำหนดขนาดของบรรทัดของกรอบข้อความ ตามจำนวน n ที่ต้องการ -cols เป็นการกำหนดขนาดคอลัมน์ของกรอบข้อความ ตามจำนวน m ที่ต้องการ -message เป็นข้อความที่ต้องการให้ปรากฏในกรอบข้อความ 31. (ต่อ)2. XHTML XHTML (extensible Hypertext Markup Language) เป็นภาษามาตรฐานใหม่ที่เกิดจากการผนวกความสามารถในการทำงานของภาษา HTML และ XML กับสไตล์ชีทผ่านบราวเซอร์ได้ทุกตัว โดยใช้พื้นฐานโครงสร้างไวยากรณ์ของ XML และใช้รูปแบบแท็กคำสั่ง HTML เวอร์ชัน 4.0 ขึ้นไป 32. กฎเกณฑ์พื้นฐานในการเขียนภาษา XHTML รูปแบบการเขียนโปรแกรมด้วยภาษา XHTML ส่วนใหญ่ยังเหมือนกับ HTML แต่จะมีการเพิ่มรูปแบบ และกำหนดเรื่องของแท็ก และแอททริบิวท์ต่างๆ ที่ต่างกัน ดังนี้1. การประกาศ DOCTYPE DOCTYPE เป็นคำหลักเมื่อเริ่มต้นเขียนคำสั่ง XHTML และจะต้องประกาศที่ตำแหน่งบนสุดของเอกสาร XHTML เพื่อบอกให้เว็บบราวเซอร์ทราบว่าเพจสร้างขึ้นด้วยภาษาอะไร เป็น XHTMLเวอร์ชันใด ตัวอย่างเช่น<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 33. (ต่อ) 1.1 Transitional เป็นการประกาศ DOCTYPE เพื่อให้เอกสาร XHTML สามารถใช้งานเว็บบราวเซอร์เวอร์ชันเก่าที่ไม่เข้าใจการทำงานในรูปแบบสไตล์ชีทได้ เนื่องจากมีการนำแท็กคำสั่งเก่าในภาษาHTML มาใช้ มีรูปแบบการใช้งานดังนี้<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 34. (ต่อ)2. การประกาศ Namespace Namespace เป็นรายชื่อแท็กและแอททริบิวต์ต่างๆ ที่อยู่ในเอกสาร XHTML ซึ่งจะสัมพันธ์กับที่ระบุไว้ในเอกสาร DTD สำหรับการประกาศ Namespace ใน XHTML สามารถอ้างผ่านทาง URL ดังนี้<html xmlns="http://www.w3.org/1999/xhtml” xml:lang = “en” lang = “en”> Namespace จะอ้างถึงผ่านทาง http://www.w3.org/1999/xhtml สำหรับแอททริบิวต์ที่เพิ่มตอนท้ายของการประกาศเป็นการระบุเวอร์ชันของ XML ที่ใช้ (ส่วนของแอททริบิวต์ไม่ต้องกำหนดก็ได้) 35. (ต่อ)3. การประกาศชนิด “Encoding” การประกาศชนิด “Encoding” ในเอกสาร XHTML จะช่วยให้เว็บบราวเซอร์แปลค่าตัวอักขระของแต่ละภาษาได้ถูกต้องมากขึ้น โดยในภาษา XHTML จะมีการประกาศ Encoding ไว้ในแท็ก <meta>ซึ่งกำหนดค่าในแอททริบิวต์ “http-equiv” เป็น “Content-Type” และระบุรูปแบบที่ต้องการกำหนดในแอททริบิวต์ “content” ดังนี้<meta http-equiv="Content-Type" content="text/html; charset=windows-874" /> 36. กฎการเขียนคำสั่งของ XHTML ภาษา XHTML ใช้โครงสร้างไวยากรณ์ของ XML จึงมีความเข็มงวดในการเขียนแท็กคำสั่งต่างๆเพื่อให้เอกสาร XHTML อยู่ในรูปแบบเอกสารที่เรียกว่า “Well-Formed” ซึ่งเป็นคุณสมบัติที่ทำให้เอกสารสามารถแสดงผลบนอุปกรณ์หรือ Platform อื่นได้ กฏการเขียนคำสั่งของ XHTML มีดังนี้ 1. ต้องประกาศ DOCTYPE เป็นตัวอักษรพิมพ์ใหญ่เสมอ โดยต้องประกาศไว้ที่ตำแหน่งบนสุดของหน้าเอกสาร XHTML 2. ชื่อแท็กคำสั่งและแอททริบิวต์ต้องเป็นอักษรตัวพิมพ์เล็กเท่านั้น เช่น <html>, <p> เป็นต้น 37. 38. (ต่อ) 7. ไม่ให้ใส่เครื่องหมาย “Double Dashes (--)” ภายในข้อความหมายเหตุของเอกสารXHTML กรณีที่ต้องการใส่ให้เคาะช่องว่างระหว่างเครื่องหมาย (- -) หรือใช้เครื่องหมายเท่ากับ (=) แทน 8. กำหนดให้ใส่สัญลักษณ์ “< ;” และ “> ;” แทนการใช้เครื่องหมายน้อยกว่า (<)และมากกว่า (>) ตามลำดับ (กรณีที่เครื่องหมาย < และ > ไม่ใช่ส่วนหนึ่งของแท็กคำสั่ง) และใช้สัญลักษณ์“&” แทนการใช้เครื่องหมาย & (กรณีที่เครื่องหมาย & ไม่ใช่การอ้างถึง Entity ใดๆ) 39. (ต่อ)3. DOMDocument Object Model (DOM)เป็นแพลตฟอร์มและภาษาสื่อกลางระหว่างโปรแกรมกับสคริปต์ต่างๆ สามารถเข้าถึงและปรับปรุง Content โครงสร้างต่างๆ ในเอกสาร XHTML (HTML) หรือ XML ได้ DOM จะมององค์ประกอบของเว็บเพจทั้งหมดเป็นอ็อบเจ็กต์ ที่มีการทำงานตามหลัก Object Oriented และ Model ซึ่ง DOM จะมองอีลีเม้นหรือแท็กต่างๆ เป็น Node ของต้นไม้ โดยโครงสร้างของ DOM จะประกอบไปด้วยอ็อบเจ็กต์และเมธอด จึงทำให้เข้าถึงและปรับปรุงเว็บเพจทุกส่วนด้า 40. 41. (ต่อ)สไตล์ชีท (Cascading Style Sheet : CSS) มีรากศัพท์มากจากคำว่า Style + Sheet โดยที่ Styleหมายถึง รูแบบที่กำหนดขึ้น และ Sheet หมายถึง เอกสาร เมื่อนำมารวมเข้าด้วยกันจึงเกิดเป็นแนวคิดของเทคโนโลยีที่เรียกว่า Cascading Style Sheet กล่าวคือ เป็นเทคโนโลยีที่นำมาใช้กำหนดรูปแบบของเอกสารหรือเว็บเพจ เพื่อให้สามารถจัดวางตำแหน่งข้อความหรือรูปภาพต่างๆ ภายในเอกสารตามความต้องการของนักพัฒนาเว็บ โดยมีองค์กร W3C เป็นผู้กำหนดมาตรฐานและสไตล์ชีทแบ่งออกเป็น 3 ระดับ คือCSS1, CSS2 และ CSS3 ซึ่งแต่ละมาตรฐานก็จะมีความสามารถ และคุณสมบัติแตกต่างกันออกไป 42. หลักการทำงานของสไตล์ชีท หลักการทำงานของสไตล์ชีท คือ ต้องกำหนดรูปแบบต่างๆ ให้กับคำสั่ง HTML หรือ XHTML ที่ต้องการ โดยจะประกาศแยกส่วนของเนื้อหาบนเว็บเพจ หรือไว้ในส่วนเดียวกันก็ได้ หรือสร้างไฟล์สไตล์ชีลนามสกุล .css แล้วอ้างถึงไฟล์สไตล์ชีทนั้น การกำหนดสไตล์ชีทอาจกำหนดจากชื่อแท็ก HTML โดยตรง หรือกำหนดเป็นชื่อคลาส หรือ id ซึ่งจะส่งผลให้แท็ก HTML ที่มีชื่อตรงกับคลาส หรือ id ในสไตล์ชีทมีรูปแบบตามที่กำหนดไว้ในส่วนของสไตล์ชีท 43. ภาษาที่ทำงานฝั่งเซิร์ฟเวอร์ (Server-Side Scripting) ภาษาที่ทำงานฝั่งเซิร์ฟเวอร์ (Server-Side Scripting) เป็นภาษาสคริปต์ที่มีการทำงานแตกต่างกับภาษาฝั่งไคล์เอ็นต์ (Client-side scripting) คือ การทำงานทั้งหมดจะเกิดขึ้นที่เครื่องเซิร์ฟเวอร์ และสามารถสร้างเว็บเพจที่มีการตอบสนองกับผู้ใช้ได้ (Dynamic) ภาษาสคริปต์ที่มีการทำงานอยู่ที่ฝั่งเซิร์ฟเวอร์ มีดังนี้1. ภาษา PHP PHP (PHP: Hypertext Preprocessor) เป็นภาษาจำพวกสคริปต์ที่นิยมใช้กันอย่างแพร่หลายเพราะมีให้ใช้งานฟรี (Open Source) โดย PHP ได้รับการพัฒนาและออกแบบมา เพื่อสร้างเอกสารแบบ HTML จึงทำให้การเขียนคำสั่ง PHP ต้องอาศัยการฝังตัวอยู่ในคำสั่ง HTML ภายใต้เครื่องหมาย <?php…?>หรือ <?...?> เพื่อทำให้การสร้างเอกสารแบบ Dynamic HTML เป็นไปได้อย่างสะดวก และมีประสิทธิภาพมากขึ้น 44. ลักษณะเด่นของ PHPลักษณะเด่นของ PHP ดังนี้ 1. ใช้ได้ฟรี คือ เป็นภาษาที่มีลักษณะแบบ Open Source ซึ่งผู้ใช้สามารถดาวน์โหลด และนำ Source Code ของ PHP ไปใช้ได้โดยไม่เสียค่าใช้จ่าย 2. PHP เป็นโปรแกรมที่ทำงานฝั่งเว็บเซิร์ฟเวอร์ ไม่ส่งผลกับการทำงานของเครื่องไคลเอ็นต์ ดังนั้นจึงมีขีดความสามารถไม่จำกัด 3. เรียนรู้ง่าย เนื่องจาก PHP ฝังเข้าไปใน HTML และใช้โครงสร้างไวยากรณ์ภาษาง่ายๆ 4. สามารถทำงานได้เร็วและมีประสิทธิภาพ 5. ใช้ร่วมกับ XML ได้ทันที 6. ใช้กับระบบแฟ้มข้อมูลได้ 7. ใช้กับข้อมูลตัวอักษรได้อย่างมีประสิทธิภาพ 8. ใช้กับโครงสร้างข้อมูลได้แบบ Scalar, Array, Associative array 9. ใช้กับการประมวลผลภาพได้ 45. (ต่อ) 10. สามารถทำงานได้ในระบบปฏิบัติการที่ต่างชนิดกัน เช่น Unix, Windows หรือ Mac OS 11. สนับสนุนการทำงานแบบเชิงวัตถุ (Object-Oriented) 12. ทำงานได้ในเว็บเซิร์ฟเวอร์หลายชนิด เช่น Personal Web Server (PWS), Apache,Tomcat, OmniHttpd และ Internet Information Service (IIS) 13. สามารถทำงานร่วมกับระบบจัดการฐานข้อมูลที่หลากหลาย เช่น Oracle, FilePro, MS SQL, mSQL และ MySQL เป็นต้น 14. อนุญาตให้ผู้ใช้สร้างเว็บไซต์ที่ทำงานผ่านโปรโตคอลชนิดต่างๆ ได้ เช่น LDAP, IMAP,POP3 และ HTTP เป็นต้น 46. หลักการทำงานของภาษา PHPหลักการทำงานของเพจ PHP มีขั้นตอนดังต่อไปนี้ 1. เมื่อเพจ PHP ถูกเรียกใช้งานจากฝั่งไคลเอ็นต์ เว็บเซิร์ฟเวอร์จะทำการค้นหาเพจที่ถูกร้องขอมา 2. เมื่อพบเพจที่ต้องการ เว็บเซิร์ฟเวอร์จะส่งให้กับตัวแปลภาษา PHP อ่านโค้ดคำสั่ง โดยจะเริ่มอ่านตั้งแต่บรรทัดแรกของโค้ดคำสั่งไล่ลงไปจนกว่าจะพบแท็กเปิดของคำสั่ง PHP ซึ่งจะไม่สนใจชุดคำสั่งของ HTML หรือ XHTML 3. เมื่อตัวแปลภาษาพบชุดคำสั่ง PHP แล้วจะเริ่มประมวลผลคำสั่งนั้นจนถึง แท็กปิดของPHP จึงจะหยุดการประมวลผล 47. (ต่อ) 4. ตัวแปลภาษา PHP จะแปลงผลลัพธ์ที่ได้จากการประมวลผลแล้วส่งไปยังเว็บเซิร์ฟเวอร์อีกครั้งในรูปแบบของ HTML 5. เว็บเซิร์ฟเวอร์จะส่งผลลัพธ์ทั้งหมดที่ได้รับจากการประมวลผลของคำสั่ง PHP รวมทั้งชุดคำสั่ง HTML ที่เหลือของเว็บเพจกลับไปยังไคลเอ็นต์ที่ร้องขอมา เพื่อให้เว็บบราวเซอร์นำไปแสดงผลต่อไป 48. องค์ประกอบของโค้ดโปรแกรม PHPโค้ดโปรแกรมภาษา PHP มีองค์ประกอบ 5 อย่าง ดังนี้ 1. HTML เป็นภาษาที่ใช้ในการสร้างเว็บเพจ มีลักษณะเป็น Static Language หมายถึงข้อมูลภายในเว็บเพจจะไม่มีการเปลี่ยนแปลงใดๆ คำสั่งของ HTML จะต้องอยู่ภายในแท็กคือ เครื่องหมาย <และ > 2. แท็ก PHP โดยโค้ดของภาษา PHP จะอยู่ภายใต้เครื่องหมาย <? และ ?> ซึ่งจะเรียกว่าShort Style เพื่อบอกเว็บเซิร์ฟเวอร์ของ PHP ว่าโค้ดของ PHP เริ่มต้นและสิ้นสุดที่จุดใด มีการใช้งานอยู่ 4 รูปแบบดังนี้ 2.1 Short Style รูปแบบนี้จะใช้ตามแบบของภาษา SGML (Standard Markup Language)<? echo “แท็ก PHP แบบ Shot Style”; ?> 49. (ต่อ) 2.2 XML Style เป็นรูปแบบที่ใช้กับภาษา XML (Extensible Markup Language)<? php echo “แท็ก PHP แบบ XML Style”; ?> 2.3 SCRIPT Style เป็นรูปแบบที่ใช้กับภาษา HTML โดยการระบุภาษาไปในคำสั่งเหมือนกับการใช้ JavaScript และ VBScript<SCRIPT LANGUAGE = ‘php’> echo “แท็ก PHP แบบ SCRIPT Style”; </SCRIPT> 2.4 ASP Style เป็นรูปแบบที่ใช้กับภาษา ASP (Active Server Pages)<% echo “แท็ก PHP แบบ ASP Style”; %> 50. (ต่อ)3. PHP Statement จะต้องอยู่ภายใต้การเปิดและปิดแท็ก และปิดท้ายคำสั่งด้วยเครื่องหมาย Semicolon (;) ตัวอย่างเช่นecho “PHP Statement”; 4. Whitespace เป็นตัวอักษรหรือคำสั่งที่มองไม่เห็น แต่ทำให้เกิดช่องว่างหรือการขึ้นบรรทัดใหม่ ซึ่งประกอบด้วย Carriage Return (ขึ้นบรรทัดใหม่), Space และ Tabs ซึ่งภาษา PHP และ HTMLจะไม่สนใจ Whitespace ตัวอย่างเช่นecho “PHP Statement”;echo “PHP Statement”;และecho “PHP Statement”; echo “PHP Statement”; 51. (ต่อ) 5. หมายเหตุ (Comments) คือ ส่วนที่ใช้สำหรับอธิบายรายละเอียดของโปรแกรม ซึ่งในภาษา PHP จะใช้สัญลักษณ์ /*…*/ กรณีที่มีหลายบรรทัด และสัญลักษณ์ // กรณีที่มีบรรทัดเดียว ตัวอย่างเช่นecho “PHP Statement”; // การใช้งาน PHP Statement /*การกำหนดส่วนอธิบาย รายละเอียดของโปรแกรม*/ echo “หมายเหตุ (Comments)”; 52. (ต่อ)2. ภาษา ASP, ASP.NET ASP (Active Server Pages) คือ เทคโนโลยีที่ใช้พัฒนาเว็บแอปพลิเคชั่นที่พัฒนาขึ้นโดยบริษัทไมโครซอฟต์ ซึ่งออกแบบให้สามารถสร้างแอปพลิเคชั่นได้ง่ายและสะดวกยิ่งขึ้น และมีจุดเด่นในการใช้พัฒนาและจัดการเว็บแอปพลิเคชั่นบนเว็บเซิร์ฟเวอร์ โดย ASP เป็นเทคโนโลยีที่มีการรวม อ็อบเจ็กต์ (Object) ต่างๆเพื่อใช้ทำหน้าที่ในการสื่อสารและควบคุมการทำงานของเว็บแอปพลิเคชั่นที่ฝั่งเว็บเซิร์ฟเวอร์ ซึ่งมีการเขียนสคริปต์หรือชุดคำสั่งควบคุมชุด อ็อบเจ็กต์ต่างๆ แล้วเก็บไว้ในเว็บเซิร์ฟเวอร์ เป็นต้น รูปแบบของเอกสาร ASP จะมีแท็ก ASP กำกับอยู่ภายใต้เครื่องหมาย <%...%> ปัจจุบันได้พัฒนาขึ้นเป็นเวอร์ชั่นที่เรียกว่า ASP.NET 53. (ต่อ)3. ภาษา JSP JSP (JavaServer Pages) เป็นภาษาสคริปต์ฝั่งเซิร์ฟเวอร์เหมือนกับ PHP ASP และ ASP.NETดังกล่าวมาแล้วข้างต้น โดยมีลักษณะการทำงานในลักษณะเดียวกัน คือมีขอบเขตของภาษาชัด สามารถฝังอยู่ในไฟล์ HTML ภายใต้เครื่องหมาย <%...%> ซึ่ง JSP จะอาศัยโครงสร้างของภาษา JAVA ดังนั้นผู้ที่ต้องการเขียนโปรแกรมด้วย JSP ควรมีพื้นฐานการเขียนโปรแกรม JAVA อยู่แล้ว โดยไฟล์ JSP จะมีนามสกุลเป็น .jsp 54. (ต่อ)ความสามารถของ JSP JSP มีความสามารถและข้อดีมากมาย ซึ่งพอสรุปได้ดังต่อไปนี้ 1. JSP ได้สืบทอดคุณสมบัติของ Java มาอย่างเต็มที่ จึงสามารถทำงานได้ในทุกแพลตฟอร์ม ไม่ว่าจะเป็น Windows, Linux หรือ Mac OS 2. ใช้งาน Java API ได้หลากหลาย ซึ่ง Java API คือกลุ่มของคลาสที่ช่วยอำนวยความสะดวกในการใช้งาน ไม่ว่าจะเป็น การติดต่อกับฐานข้อมูล หรือการรับส่งอีเมล์ เป็นต้น 3. นำคอมโพเนนต์กลับมาใช้ได้อีก ไม่ต้องเสียเวลาสร้างใหม่ ดังนั้นจึงไม่ต้องเสียเวลาเขียนสคริปต์ ใหม่เพื่อทำงานครั้งต่อไป จึงช่วยให้นักพัฒนาสามารถสร้างสรรค์ผลงานได้เร็วขึ้น 55. (ต่อ) 4. มีความยืดหยุ่นในการใช้งาน คือ สามารถกำหนดแท็กใหม่ขึ้นมาใช้งานได้ รวมทั้งยังสามารถนำไปใช้งานร่วมกับ XML ได้เป็นอย่างดี 5. JSP มีระบบจัดการข้อผิดพลาดต่างๆ ไม่ว่าจะเป็นข้อผิดพลาดที่เกิดขึ้นระหว่างการเขียนโปรแกรมหรือข้อผิดพลาดที่เกิดขึ้นระหว่างการทดสอบโปรแกรม ล้วนสามารถตรวจสอบข้อผิดพลาดได้ทันที่และตรงจุด อีกทั้งมีความปลอดภัยสูง 56. (ต่อ)4. Ruby On Rails (ROR) Ruby On Rails (ROR) คือ เว็บแอปพลิเคชั่นเฟรมเวิร์ก (Web Application Framework) ที่พัฒนาด้วยภาษา Ruby ซึ่ง Ruby จะช่วยให้แอปพลิเคชั่นที่สร้างขึ้นสามารถทำงานได้ และ Rails จะช่วยในการตั้งค่าและกำหนดค่าการทำงานต่างๆ ภายในแอปพลิเคชั่น จึงทำให้การพัฒนา การนำไปใช้งาน และการดูแลรักษาเว็บแอปพลิเคชั่นนั้นง่ายขึ้น เนื่องจากสถาปัตยกรรมของ Rails จะใช้โครงสร้างแบบ Model-View-Controller (MVC) โดย M คือ Model เป็นตัวเก็บสถานะ (Status) ของแอปพลิเคชั่น, V คือ Viewเป็นส่วนที่ใช้สร้าง User Interface และ C คือ Controller เป็นตัวจัดการกับแอปพลิเคชั่น ซึ่งจะทำหน้าที่รับเหตุการณ์ต่างๆ จากภายนอกหรือจากผู้ใช้ มาเชื่อมต่อกับ Model และแสดงผลด้วย View ที่เหมาะสมกลับไปยังผู้ใช้ 57. ภาษาอื่นที่ใช้สร้างเว็บไซต์ นอกจากภาษาสคริปต์ที่ใช้ทั้งฝั่งไคลเอ็นต์ และเซิร์ฟเวอร์ที่กล่าวมาแล้วข้างต้น ยังมีภาษาบางภาษาที่มีการประยุกต์ เพื่อให้การชมเว็บไซต์มีลูกเล่นน่าสนใจรวมทั้งสร้างรูปแบบให้มีมากขึ้นด้วย อาทิเช่น1. ภาษา XML XML (eXtensible Markup Language) เป็นภาษามาตรฐานที่ถูกพัฒนาขึ้นโดยองค์กร W3Cเพื่อใช้แลกเปลี่ยนข้อมูลบนอินเทอร์เน็ตเหมือนกับ HTML แต่มีความสามารถเหนือกว่า HTML ตรงที่สามารถสร้างเอกสารข้อมูลให้มีโครงสร้างที่เป็นมาตรฐาน และยังมีส่วนที่ใช้อธิบายข้อมูลในเอกสารเรียกว่า “DTD (Document Type Definition)” ทำให้สามารถส่งไฟล์ XML ไปประมวลผลกับคอมพิวเตอร์ทุกชนิดที่มีตัวแปลเอกสารของ XML Parser ได้อีกทั้งมีความยืดหยุ่นในการดัดแปลงเว็บไซต์ เพื่อให้ใช้งานข้ามแพลตฟอร์มได้ 58. (ต่อ)2. ภาษา WML มีลักษณะคล้ายกับภาษา HTML แต่ WML จะอิงอยู่กับข้อจำกัดพื้นฐานของภาษา XML โดยภาษา WML นั้นค่อนข้างจะมีกฎเกณฑ์ของภาษาที่แน่นอน คือห้ามมีข้อผิดพลาดในเรื่องของไวยากรณ์WML บนมือถือจะเรียกว่าเว็บเพจ (Web Pages) ในแต่ละหน้าจะเรียกว่าการ์ด (Card) และจำนวนหลายๆ การ์ดที่ส่งมายังมือถือจะเรียกว่าสำรับ (Deck)3. ภาษา WML Script เป็นภาษาที่ถูกออกแบบและพัฒนาขึ้นให้มีลักษณะการทำงานแบบ JavaScript แต่จะไม่เหมือนกันตรงที่ JavaScript นั้นจะทำงานที่ฝั่งของบราวเซอร์ (Client-Side) แต่ WML Script จะทำงานที่ฝั่งเซิร์ฟเวอร์ (Server-Script) โดยจะถูกแปลงให้ข้อมูลอยู่ในรูปแบบของ ไบนารี่ (Binary) ก่อน แล้วจึงส่งกลับให้ไคลเอ็นต์ 59.