SlideShare a Scribd company logo
1 of 17
เริ่มต้นกับ HTML และ XHTML
 HTMLย่อมาจากคาว่า Hypertext Markup Language เป็นภาษาหลักที่ใช้ในการสร้างไฟล์เว็บเพจโดยมีแนวคิดจาก
การสร้างเอกสารไฮเปอร์เท็กซ์ข้อความในเอกสารที่เชื่อมโยงถึงข้อมูลต่างๆได้ซึ่งพัฒนาขึ้นมาจากSGML
(Standard GeneralizedMarkup Language)โดย Tim Berners-Leeในปี ค.ศ.1990 ซึ่งใช้ในระบบ CERNเบื้องต้นได้
เริ่มใช้ที่สวิตเซอรืแลนต์
จากนั้นก็ได้ขยายออกไป ระบบได้ถูกตั้งชื่อว่าWorld Wide Web : WWW
ที่เรารู้จักกันจนมาถึงปัจจุบัน
 องค์ประกอบของภาษาHTML สามารถแบ่งออกเป็น2 ส่วน คือ ส่วนที่เป็นข้อความทั่วๆไป และส่วนที่เป็นคาสั่งที่
ใช้ในการกาหนดรูปแบบข้อความที่แสดง ซึ่งเราเรียกคาสั่งนี้ว่าแท็ก (Tag) โดยแท็กคาสั่งของ HTML จะอยู่ใน
เครื่องหมาย < และ > ซึ่งมีหลักการเขียน คือ
.รูปแบบแท็กที่จะแยกเป็น 2 ส่วน ดดยต้องมีส่วนเริ่มต้นของแท็กเรียกว่า “แท็กเปิด” และส่วนจบของแท้ก
เรียกว่า “แท้กปิ
 ด” โดยส่วนของแท็กจะมีเครื่องหมาย Slash (/)
 ในกรณีที่เราต้องการใช้แท็กซ้อนกันมากกว่า 1 แท็ก เราจะต้องใช้แท็กปิด ปิดแท็กในสุดก่อน แล้วจึงไล้ปิดแท็ก
อื่นๆ ตามลาดับ เช่น
 โครงสร้างพื้นฐานของHTMLแบ่งออกได้เป็น4 ส่วน ดังนี้
 ต่อไปนี้เป็นการเขียนภาษา HTMLโดยเริ่มต้นเปิดโปรแกรม Noteppad แล้วเขียนเอกสาร HTML ดังรูป
 เมื่อสร้างเอกสารเสร็จแล้ว จะต้องบันทึกเป็นเอกสารHTML
โดยบันทึกเป็นนามสกุล.htmlหรือ .htm ดังนี้
 หลังจากที่เราบันทึกเอกสารเรียบร้อยแล้วให้เราดับเบิลคลิกที่ไฟล์เว็บเพจที่เราสร้าง
 เมื่อเว็บเจริญเติมโตมากขึ้น ภาษาHTMLก็ได้พัฒนาขีดสูงสุดที่เวอร์ชัน 4.01 ก็ทาให้ทีมพัฒนาเว็บพบว่าต้องมีภาษา
ที่เป็นมาตราฐานสามารถทาให้เว็บใช้งานแพร่หลายมากยิ่งขึ้น จึงทาให้มีการพัฒนาภาษาใหม่มีชื่อXHTMLซึ่งจะ
ลบจุดอ่อนหลายๆ อย่างของHTML ลง เพื่อให้สามารถพัฒนาเว็บได้ดียิ่งขึ้น มีสาเหตุดังนี้
 ความแน่นอนของรูปแบบภาษา
เนื่องจาก HTML ไร้มาตราฐานที่แน่นอน ตรวจสอบและหาจุดผิดยากซึ่งเกิดจากรูปแบบของภาษา
ตัวอย่างเช่น <b> <u> Hello World </b> </u>
จากตัวอย่างจะเห็นว่าเป็นการเขียนภาษา HTML ที่ผิด การปิดแท็กไม่เป็นตามลาดับ แต่ผลลัพธ์
ออกมาถูกต้อง ไม่มีการแจ้งเตือนเกิดขึ้นทาให้ผู้เขียนเว็บไม่ทราบถึงข้อบกพร่อง
และปล่อยเข้าสู่อินเทอร์เน็ต
 การใช้งานบนแพลฟอร์มที่จากัด
 เราจะเห็นว่าการท่องเที่ยวเป็นที่นิยมอย่างแพร่หลายส่งผลให้อุปรณืสื่อสาร และเทคโนโลยีต่างๆก็หันมาเพิ่ม
ความสามารถให้เชื่อต่อท่องเว็บกันได้มากยิ่งขึ้น เช่น ปาล์มพ้อกเก็ตพีซี และทรศัพท์มือถือนอกจากนี้ในอนาคต
เครื่องภายในบ้านก็อาจจะใช้เว็บด้วยกัน เช่นตู้เย็นจะแจ้งให้เราซื้อของมาเติม
และสั่งซื้อของได้ทันทีหรือทีวีที่โฆษณาสินค้าอยู่สามารเปิดเมนูเพื่อเข้าไป ชมรายละเอียดราคาและ
การสั่งซื้อสินค้าได้เป็นต้น
 ก่อนจะมาถึงXHTMLทาง W3C ผู้พัฒนาเทคโนโลยีเว็บ ได้พบข้อจากัดของ HTML จึงได้สร้างภาษามาตราฐาน
ใหม่โดยพัฒนามาจากSGML ชื่อว่า XML ก็คือภาษามาตราฐานที่มีขีดความ
สามารถมากยิ่งขึ้นสามารถใช้ได้หลายๆ แพลตฟอร์ม
ต่อมาเมื่อมีความตองการให้การเขียนเว็บมีรูปแบบที่รัดกุมมากยิ่งขึ้น จึงได้รวบรวมคาสั่งของ HTML4 กับ
มาตราฐานของ XMLเข้าไว้ด้วยกันเกิดเป็ภาษา HTMLใหม่ที่มีกฏและระเบียบมากยิ่งขึ้น และตั้งชื่อใหม่เป็น
XHTML
 การเริ่มต้นใช้งานไม่ยุ่งยาก
 การใช้คาสั่งและโมดูลร่วมกันได้
 การพัฒนาบราวเซอร์ทาได้ง่ายและสะดวก
 การทางานเข้ากับทุกระบบ
 การกาหนดDOCTYPE
 DOCTYPEเป็นการประกาศชนิดเอกสารซึ่งจะมีผลต่อรุปแบบและคุณสมบัติการทางานของท็กที่
เราจะใช้ในเอกสารหน้านั้นสาหรับพัฒนาโปรแกรมที่สร้างแท็กและแอตทริบิวขึ้นมาใช้เองจะต้องระบุคุณสมบัติ
ของแท็กและแอตทริบิวต์นั้นที่ DTD ด้วย
 ต้องมีแท็พื้นฐานครบถ้วน
 การเขียนเว็บเพจด้วย XHTMLจะต้องมีแท็กพื้นฐานที่ครบถ้วน โดยให้แท็ก <html> อยู่นอกสุด และแท็กต่างๆเรียง
ตามลาดับ สาหรับ <body> หรือ <frameset> จะมีได้อันใดอันหนึ่งเท่านั้น ถ้าเว็บเพจใดต้องแสดงผลแบ่งออกเป็น
เฟรม
 ก็ให้ใช้< frameset> แต่ถ้าไม่แบ่งเฟรมให้ใช้<vody>
 การเรียงลาดับแท้กที่ซ้อนกัน
 XHTML จะเคร่งครัดกับแท็กที่ทางานซ้อนกัน
โดนต้องมีการเรียงลาดับการเปิดปิด
แท็กที่ถูกต้อง เช่น
 แท็กและแอตทริบิวต์ทุกตัวเขียนด้วยพิมพ์เล็กเสมอ
เนื่องจาก XHTMLรับอิทธิผลมาจากรูปแบบโครงสร้างของภาษา XML ซึ่งจะมองตัวพิมพ์ใหญ่
กับพิมพ์เล็กมีความหมายต่างกันดังนั้นเพื่อลดความผิดผลาดจึงกาหนดให้ใช้แท็กและแอตทริบิวต์ทุกตัวเป็นตัวพิมพ์เล็ก
 ทุกแท็กเปิดต้องแท็กปิด
เติมที่ใน HTMLแท็กเปิดบางตัวจะไม่มีแท็กปิดหรือบางครั้งลืมใส่แท็กปิดก็สามารถแสดงผลได้แต่ใน XHTMLจะ
เคร่งครัดเรื่องความถูกต้อง
 ต้องกาหนดค่าแอตทริบิวต์ในเครื่องหมาย”...”เสมอ
ค่ากาหนดให้ใช้ในแอตทริบิวต์ทั้งหมดจะต้องอยู่ภายในเครื่องหมาย“..”ซึ่งต่างจากHTMLแบบเดิมที่ใส่เฉพาะค่า
ตัวเลขเท่านั้น
 ห้ามย่อแอตทริบิวต์
จะเหมือนกับ XML คือ จะไม่รับรอง
การย่อแอตทริบิวต์ดดยเฉพาะการใช้ค่าแอต
ทริบิวต์ที่เหมือนกับชื่อแอตทริบิวต์เพราะผู้เขียน
เว็บส่วนใหญ่จะย่อสั้นๆ โดยเขียนละไว้
เฉพาะชื่อแอตทริบิวต์เท่านั้น
 แท็กที่มีแอตทริบิวต์ name ให้เปลี่ยนมา
ใช้แอตทริบิวต์ id แทน
 สาหรับแท็ก HTMLที่มีแอตทริบิวต์
name เราจะเลือกแอตทริบิวต์นี้ และจะใช้
แอตทริบิวต์ id แทน

More Related Content

Similar to หน่วยที่ 2

2.เริ่มต้นกับ xhtml และ xhtml
2.เริ่มต้นกับ xhtml และ xhtml2.เริ่มต้นกับ xhtml และ xhtml
2.เริ่มต้นกับ xhtml และ xhtmlBeerza Kub
 
ประวัต Html
ประวัต Htmlประวัต Html
ประวัต Htmlkrurit9
 
รู้จักกับ Html(แก้ไข)
รู้จักกับ Html(แก้ไข)รู้จักกับ Html(แก้ไข)
รู้จักกับ Html(แก้ไข)Beerza Kub
 
การสร้างเว็บเพจด้วยภาษา Html
การสร้างเว็บเพจด้วยภาษา Htmlการสร้างเว็บเพจด้วยภาษา Html
การสร้างเว็บเพจด้วยภาษา HtmlFair Kung Nattaput
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlSamorn Tara
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlSamorn Tara
 
หน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmlหน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmldevilp Nnop
 
Session1 part2
Session1 part2Session1 part2
Session1 part2maovkh
 
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์chiton2535
 
ใบงานที่ 1 ความหมาย การเขียน และโครงสร้างภาษา HTML
ใบงานที่  1 ความหมาย การเขียน และโครงสร้างภาษา HTMLใบงานที่  1 ความหมาย การเขียน และโครงสร้างภาษา HTML
ใบงานที่ 1 ความหมาย การเขียน และโครงสร้างภาษา HTMLผ่องนภา มณีธร
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1Poppy Love
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1Poppy Love
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1Poppy Love
 
เนื้อหา Html
เนื้อหา Htmlเนื้อหา Html
เนื้อหา HtmlRungnapha Naka
 
สอบกลางภาคคอม ม.5
สอบกลางภาคคอม ม.5สอบกลางภาคคอม ม.5
สอบกลางภาคคอม ม.5iamohm204
 

Similar to หน่วยที่ 2 (20)

2.เริ่มต้นกับ xhtml และ xhtml
2.เริ่มต้นกับ xhtml และ xhtml2.เริ่มต้นกับ xhtml และ xhtml
2.เริ่มต้นกับ xhtml และ xhtml
 
ประวัต Html
ประวัต Htmlประวัต Html
ประวัต Html
 
รู้จักกับ Html(แก้ไข)
รู้จักกับ Html(แก้ไข)รู้จักกับ Html(แก้ไข)
รู้จักกับ Html(แก้ไข)
 
Html 2
Html 2Html 2
Html 2
 
การสร้างเว็บเพจด้วยภาษา Html
การสร้างเว็บเพจด้วยภาษา Htmlการสร้างเว็บเพจด้วยภาษา Html
การสร้างเว็บเพจด้วยภาษา Html
 
Html
HtmlHtml
Html
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
หน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmlหน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 html
 
Session1 part2
Session1 part2Session1 part2
Session1 part2
 
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
 
Pai02
Pai02Pai02
Pai02
 
ใบงานที่ 1 ความหมาย การเขียน และโครงสร้างภาษา HTML
ใบงานที่  1 ความหมาย การเขียน และโครงสร้างภาษา HTMLใบงานที่  1 ความหมาย การเขียน และโครงสร้างภาษา HTML
ใบงานที่ 1 ความหมาย การเขียน และโครงสร้างภาษา HTML
 
Lernning 13
Lernning 13Lernning 13
Lernning 13
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1
 
Html
HtmlHtml
Html
 
เนื้อหา Html
เนื้อหา Htmlเนื้อหา Html
เนื้อหา Html
 
สอบกลางภาคคอม ม.5
สอบกลางภาคคอม ม.5สอบกลางภาคคอม ม.5
สอบกลางภาคคอม ม.5
 

More from Ton TC Tmsb

หน่วยที่ 10
หน่วยที่ 10หน่วยที่ 10
หน่วยที่ 10Ton TC Tmsb
 
หน่วยที่ 9
หน่วยที่ 9หน่วยที่ 9
หน่วยที่ 9Ton TC Tmsb
 
หน่วยที่ 8
หน่วยที่ 8หน่วยที่ 8
หน่วยที่ 8Ton TC Tmsb
 
หน่วยที่ 7
หน่วยที่ 7หน่วยที่ 7
หน่วยที่ 7Ton TC Tmsb
 
บทที่ 5
บทที่ 5บทที่ 5
บทที่ 5Ton TC Tmsb
 
บทที่ 4
บทที่ 4บทที่ 4
บทที่ 4Ton TC Tmsb
 
หน่วยที่ 3
หน่วยที่ 3หน่วยที่ 3
หน่วยที่ 3Ton TC Tmsb
 
หน่วยที่ 1
หน่วยที่ 1หน่วยที่ 1
หน่วยที่ 1Ton TC Tmsb
 
10657401 405408596276185 1179576192_n
10657401 405408596276185 1179576192_n10657401 405408596276185 1179576192_n
10657401 405408596276185 1179576192_nTon TC Tmsb
 

More from Ton TC Tmsb (9)

หน่วยที่ 10
หน่วยที่ 10หน่วยที่ 10
หน่วยที่ 10
 
หน่วยที่ 9
หน่วยที่ 9หน่วยที่ 9
หน่วยที่ 9
 
หน่วยที่ 8
หน่วยที่ 8หน่วยที่ 8
หน่วยที่ 8
 
หน่วยที่ 7
หน่วยที่ 7หน่วยที่ 7
หน่วยที่ 7
 
บทที่ 5
บทที่ 5บทที่ 5
บทที่ 5
 
บทที่ 4
บทที่ 4บทที่ 4
บทที่ 4
 
หน่วยที่ 3
หน่วยที่ 3หน่วยที่ 3
หน่วยที่ 3
 
หน่วยที่ 1
หน่วยที่ 1หน่วยที่ 1
หน่วยที่ 1
 
10657401 405408596276185 1179576192_n
10657401 405408596276185 1179576192_n10657401 405408596276185 1179576192_n
10657401 405408596276185 1179576192_n
 

หน่วยที่ 2