Transcript CSS
XML เอกสารประกอบการสอนรายวิชาภาษามาร์กอัป ระดับมัธยมศึกษาตอนปลาย ข้อด้อยของ HTML • • • • เน้นเฉพาะการแสดงผลเป็ นหลัก ไม่สามารถขยายได้ เพราะไม่สามารถสร้างแท็กเฉพาะอย่างได้ การเปลีย่ นกลับไปกลับมาระหว่าง HTML กับงานอืน่ ทำาได้ยาก ไม่ได้เน้นให้มโี ครงสร้างทีจ่ ะสือ่ ความหมายด้วยเนื้อหา XML คืออะไร • • • • • • เกิดในปี 1996 โดย World Wide Web Consortium (W3C) เป็ นคำาย่อของ Extensible Markup Language เป็ นภาษามาร์กอัปคล้ายกับภาษา HTML ถูกออกแบบมาให้อธิบายข้อมูล ไม่ใช่แสดงผลข้อมูล ไม่มกี ารกำาหนดหรือบัญญัตแิ ท็กไว้ก่อน คุณต้องกำาหนดแท็กเอง ถูกออกแบบให้มลี กั ษณะทีส่ ามารถอธิบายข้อมูลทีจ่ ดั เก็บได้ดว้ ยตนเอง XML คืออะไร (ต่อ) • เป็ นมาตรฐานทีอ่ งค์กรสากลด้านเว็บ W3C สนับสนุนให้ใช้ในการจัดเก็บข้อมูล • เป็ นภาษาทีเ่ ป็ นกลางไม่ขน้ึ อยูก่ บั ซอฟต์แวร์และฮาร์ดแวร์ • มีความยืดหยุน่ รองรับการเก็บข้อมูลทีม่ กี ารเปลีย่ นแปลงบ่อยหรือมีรปู แบบทีไ่ ม่ แน่นอน เปรียบเทียบความแตกต่าง XML HTML 1. ถูกออกแบบมาให้อธิบายและจัดเก็บข้อมูล 2. เน้นทีค่ วามหมายของข้อมูล 3. ผูใ้ ช้เป็ นผูก้ าำ หนดแท็กเอง เอกสาร HTML สำาหรับข้อมูลบัตรประชาชน <html> <head><title>ข้อมูลบัตรประชาชน</title></head> <body> <h1>ข้อมูลบัตรประชาชน</h1> <li>FirstName: นายคิดดี</li> <li>LastName: ทำาความดี</li> <li>DateOfBirth: 1 มกราคม 2530</li> </body> </html> เอกสาร HTML สำาหรับข้อมูลบัตรประชาชน ข้อมูลบัตรประชาชน • FirstName: นายคิดดี • LastName: ทำาความดี • DateOfBirth: 1 มกราคม 2530 เอกสาร XML สำาหรับข้อมูลบัตรประชาชน <?xml version=“1.0” encoding=“tis-620”?> <!-- ข้อมูลบัตรประชาชน --> <IdCard> <FirstName>นายคิดดี</FirstName> <LastName>ทำาความดี</LastName> <DateOfBirth>1 มกราคม 2530</DateOfBirth> </IdCard> เอกสาร XML สำาหรับข้อมูลบัตรประชาชน <?xml version="1.0" encoding="tis-620" ?> <!-- ข้อมูลบัตรประชาชน --> - <IdCard> <FirstName>นายคิดดี</FirstName> <LastName>ทำาความดี</LastName> <DateOfBirth>1 มกราคม 2530</DateOfBirth> </IdCard> ทำาไมต้อง XML • สาเหตุหลักของปญั หา คือ ข้อมูลทีจ่ ดั เก็บขาดรายละเอียดและโครงสร้างของข้อมูล ทำาให้ • ไม่สามารถสืบค้นข้อมูลได้อย่างมีประสิทธิภาพ • สืบค้นได้ขอ้ มูลบางอย่างทีไ่ ม่เกีย่ วข้องกับสิง่ ทีต่ อ้ งการ • ไม่สามารถรวบรวมข้อมูลทีเ่ กีย่ วข้องกับสิง่ ทีต่ อ้ งการและทำาการเปรียบเทียบ โดยแอพพลิเคชันได้ ่ • ไม่สามารถสนับสนุนให้เกิดการนำาเสนอข้อมูลในรูปแบบทีเ่ หมาะสม ทำาไมต้อง XML (ต่อ) • แนวทางการประยุกต์ใช้ XML ในการแก้ไขปญั หา • สร้างเอกสาร XML สำาหรับการจัดเก็บข้อมูลทีเ่ กีย่ วข้อง ่ าหรับการทำางานกับเอกสาร XML ทีส่ ร้างขึน้ • พัฒนาแอพพลิเคชันสำ ่ ท่ าำ งานร่วมกัน • ใช้เอกสาร XML เป็ นพืน้ ฐานสำาหรับแอพพลิเคชันที • สร้างเอกสาร XSL สำาหรับการนำาเสนอข้อมูลในรูปแบบทีเ่ หมาะสม ประโยชน์ของ XML • ใช้สาำ หรับสร้างข้อมูลทีส่ ามารถอธิบายความหมายของตัวเองได้ • ใช้สาำ หรับการแลกเปลีย่ นข้อมูล • เป็ นรากฐานของภาษาใหม่ ในการพัฒนาเว็บเพจ ภาษาทีม่ รี ากฐานมาจาก XML • • • • • • XHTML เวอร์ชนั ล่าสุดของ HTML WSDL สำาหรับการทำาเว็บเซอร์วสิ (Web Services) WML ภาษามาร์กอัปสำาหรับอุปกรณ์มอื ถือ RSS ภาษาสำาหรับการกระจายข่าวสาร (News Feed) RDF และ OWL สำาหรับอธิบายแหล่งทีม่ าและภววิทยา (Ontology) SMIL สำาหรับมัลติมเี ดียบนเว็บไซต์ RSS การกระจายข่าวสารบนพืน้ ฐาน XML • RSS ย่อมาจาก Really Simple Syndication • RSS ช่วยลดข้อจำากัดในการคัดลอกข้อมูลในเว็บไซต์ • ผูส้ ร้างเว็บไซต์ไม่ตอ้ งเสียเวลาทำาหน้าเว็บแสดงข่าว ซึง่ ต้องทำาทุกครัง้ เมือ่ ต้องการเพิม่ ข่าว RSS จะดึงข่าวมาอัตโนมัติ ทำาให้ขอ้ มูลใน เว็บไซต์เป็ นปจั จุบนั มากขึน้ • จุดเด่น คือ ผูใ้ ช้จะไม่จาำ เป็ นต้องเข้าไปตามเว็บไซต์ต่างๆ เพือ่ ดูวา่ มี ข้อมูลอัพเดทใหม่ • ตัวอย่างเว็บไซต์ไทยทีม่ กี ารกระจายข่าวสาร (News Feed) • http://www.rssthai.com • http://www.manager.co.th การเขียนภาษาเอกซ์เอ็มแอลเบือ้ งต้น โครงสร้างของภาษา XML <?xml version=“1.0” encoding=“tis-620”?> <!-- ข้อมูลบัตรประชาชน --> <IdCard> <FirstName>นายคิดดี</FirstName> <LastName>ทำาความดี</LastName> <DateOfBirth>1 มกราคม 2530</DateOfBirth> </IdCard> (1) (2) (3) โครงสร้างของภาษา XML (ต่อ) • ประกอบด้วย 3 ส่วนดังต่อไปนี้ 1) ส่วนทีป่ ระกาศให้ทราบว่าเป็ นเอกสาร XML 2) ส่วนทีเ่ ป็ นข้อความจำาพวกคอมเมนต์ 3) ส่วนทีเ่ นื้อหา ได้แก่ ข้อมูลในเอกสารและแท็กทีน่ ิยามข้อมูลเหล่านัน้ ส่วนประกอบย่อยในส่วนเนื้อหา แท็กเปิด แอตทริบวิ ท์ ข้อมูล แท็กปิ ด <name id="1">นายคิดดี ทำาความดี</name> อิลเิ มนต์ กฎเกณฑ์พน้ื ฐานสำาหรับภาษา XML • แต่ละเอกสารต้องมีอลิ เิ มนต์ราก (root element) • แต่ละเอกสารมีอลิ เิ มนต์รากเพียงอิลเิ มนต์เดียว ทำาหน้าทีค่ ุมอิลเิ มนต์อ่นื ทัง้ หมด • แท็กเปิดและปิดต้องเหมือนกัน ต่างกันทีแ่ ท็กปิ ดต้องมีเครือ่ งหมาย / นำาหน้าชือ่ แท็กเท่านัน้ <root> <child> <subchild>.....</subchild> </child> </root> กฎเกณฑ์พน้ื ฐานสำาหรับภาษา XML (ต่อ) • • • • • ทุกอิลเิ มนต์ตอ้ งมีแท็กปิ ดเสมอ อักษรตัวเล็กและอักษรตัวใหญ่ไม่ใช่อกั ขระตัวเดียวกัน อิลเิ มนต์ประกอบด้วยแท็กเปิด และแท็กปิดเสมอ อิลเิ มนต์ทอ่ี ยูภ่ ายในต้องปิดแท็กก่อนอิลเิ มนต์ทอ่ี ยูภ่ ายนอก รายละเอียด/ข้อมูลของแอตตริบวิ ส์ตอ้ งอยูร่ ะหว่างเครือ่ งหมายคำาพูด (“ ”) เสมอ กฎเกณฑ์พน้ื ฐานสำาหรับภาษา XML (ต่อ) • ชือ่ ของอิลเิ มนต์เริม่ ด้วยตัวอักษรหรือเครือ่ งหมาย ( _ ) เท่านัน้ • อักขระตัวถัดมาของชือ่ อิลเิ มนต์เป็ นตัวอักษร ตัวเลข เครือ่ งหมายจุด ( . ) เครือ่ งหมายยัตภิ งั ค์ ( - ) เครือ่ งหมาย ( _ ) หรือเครือ่ งหมาย ( : ) • ห้ามมีคาำ ว่า XML อยูใ่ นชือ่ ของอิลเิ มนต์ ไม่วา่ จะเป็ นตัวเล็กหรือตัวใหญ่ กฎเกณฑ์พน้ื ฐานสำาหรับภาษา XML (ต่อ) ่ อ แท็กทีเ่ ปิดก่อนต้องปิดทีหลัง • ห้ามระบุแท็กเหลือ่ มซ้อนกัน นันคื • สำาหรับแท็กทีไ่ ม่มขี อ้ มูลอยูร่ ะหว่างแท็กมีวธิ เี ขียนได้ 2 แบบ • แบบที่ 1 เขียนเป็ นแท็กคู่ <ชือ่ แท็ก></ชือ่ แท็ก> • แบบที่ 2 เขียนเป็ นแท็กเดีย่ ว แต่นิยมในแบบทีส่ องมากกว่า <ชือ่ แท็ก /> กฎเกณฑ์พน้ื ฐานสำาหรับภาษา XML (ต่อ) • มีอกั ขระซึง่ สงวนไว้ เพราะต้องใช้เป็ นส่วนประกอบตามโครงสร้างของภาษา • แต่หากจำาเป็ นต้องมีอกั ขระเหล่านี้ ก็ตอ้ งระบุเป็ นชุดอักษรพิเศษแทน ข้อความต่อไปนี้ ถูกหรือผิด [ ผิด [ ผิด [ ผิด [ ถูก [ ผิด [ ผิด ] ] ] ] ] ] [ ถูก ] [ ถูก ] ชือ่ อิลเิ มนต์ในภาษา XML สามารถตัง้ ชือ่ โดยขึน้ ต้นด้วยตัวเลขได้ แท็กเดีย่ วไม่สามารถใช้งานได้ในภาษา XML ห้ามมีแท็กทีไ่ ม่มขี อ้ มูลอยูใ่ นเอกสาร XML การคอมเมนต์ในภาษา XML เหมือนกับภาษา HTML แท็กของภาษา XML สามารถมีแอตทริบวิ ท์ได้เพียงแอตทริบวิ ท์เดียว ในแต่ละอิลเิ มนต์ ข้อมูลทีเ่ ป็ นข้อความสามารถใส่เครือ่ งหมายอัญประกาศ (“ ”) ครอบได้เลยโดยไม่ตอ้ งใช้ชดุ อักษรพิเศษแทน จำานวนแท็กในภาษา HTML เป็ นจำานวนจำากัด จำานวนแท็กในภาษา XML เป็ นจำานวนอนันต์ อิลเิ มนต์ต่อไปนี้ ถูกหรือผิด [ ถูก [ ผิด [ ผิด [ ถูก [ ผิด [ ผิด [ ถูก [ ผิด ] ] ] ] ] ] ] ] <heading>หัวข้อเรือ่ ง</heading> <p1>ย่อหน้าทีห่ นึ่ง<p2>ย่อหน้าทีส่ อง</p1></p2> <u><i>ฉันชอบเอกซ์เอ็มแอล</u></i> <compute /> <name id=001>นายกอเอ๋ย กอไก่</name> <b>ข้อความนี้ตวั หนา</B> <cal>x > 5</cal> <message>“สวัสดีทกุ ท่าน”</message> อิลเิ มนต์ต่อไปนี้ ถูกหรือผิด (ต่อ) [ ผิด [ ผิด [ ผิด [ ถูก [ ผิด [ ผิด [ ถูก [ ผิด ] ] ] ] ] ] ] ] <xmllist>รายการอาหาร</xmllist> <3d>รูปภาพสามมิติ</3d> ฉันจะขึน้ บรรทัดใหม่<br> <_database_></_database_> <font color=red size=2>นายกอเอ๋ย กอไก่</font> <document />เอกสาร<document /> <document /><document /> <alert>I don’t understand</alert> ตัวอย่างเอกสาร XML <?xml version="1.0" encoding="tis-620"?> <note> <to>นายกอไก่</to> <from>นางสาวขอไข่</from> <heading>เตือนความจำา</heading> <body>อย่าลืมนัดวันอาทิตย์ทจ่ี ะถึงนี้นะ !</body> </note> ตัวอย่างเอกสาร XML ข้อใดไม่ถกู ต้อง <?xml version="1.0" encoding=“tis-620"?> <note date=12/12/2008> <to>นายกอไก่</to> <from>นางสาวขอไข่</from> </note> <?xml version="1.0" encoding=“tis-620"?> <note date="12/12/2008"> <to>นายกอไก่</to> <from>นางสาวขอไข่</from> </note> การแทนข้อมูลในรูปแบบเอกซ์เอ็มแอล ตัวอย่างตารางข้อมูล • ตัวอย่างตารางแสดงข้อมูลสมาชิก ตัวอย่างตารางข้อมูล • จากตารางแสดงข้อมูลสมาชิก สามารถแปลงเป็ นเอกสาร XML ได้ดงั นี้ แบบที่ 1 แยกข้อมูลตามตาราง <members-info> <member> <id>00001</id> <name>นายสมชาย อยูเ่ ป็ นสุข</name> <date-register>2007-06-15</date-register> </member> ……. </members-info> แบบที่ 2 แยกคำานำาหน้า ชือ่ และนามสกุลออกจากกัน <members-info> <member> <id>00001</id> <title>นาย</title> <firstname>สมชาย</firstname> <lastname>อยูเ่ ป็ นสุข</lastname> <date-register>2007-06-15</date-register> </member> ……. </members-info> แบบที่ 3 แยกข้อมูลวันทีส่ มัครออกเป็ นวัน เดือน ปี <members-info> <member> <id>00001</id> <name>นายสมชาย อยูเ่ ป็ นสุข</name> <date-of-regis> <date>15</date> <month>06</month> <year>2007</year> </date-of-regis> </member> ……. </members-info> ทดลองแปลงข้อมูล • ให้ผเู้ รียนแปลงข้อมูลต่อไปนี้เป็ นเอกสาร XML โดยกำาหนดอิลเิ มนต์เอง