Theeravaj Tum, profile picture
Uploaded byTheeravaj Tum
376 views

Javacentrix com chap03-0

Embed presentation

Download to read offline
บทที่ 3 การสร้างเอกสารบนระบบเว็บด้วย HTML, CSS และ XML หลังจากที่ได้รู้จักกับส่วนประกอบในการทำงานในสภาวะแวดล้อมของระบ บเว็บแล้ว สิ่งจำเป็นอีกสิ่งหนึ่งคือข้อมูลหรือเนื้อข้อมูล ที่รับ- ส่งไปมาระหว่างบราวเซอร์ และเว็บเซิร์ฟเวอร์ว่ามีวิธีและรูปแบบใดในการนำเสนอข้อมูลว่ามีการจัดสร้างใน รูปแบบใด เป็นที่ทราบกันอยู่แล้วว่าข้อมูลที่รับ- ส่งกันนั้นอยู่ในรูปแบบของตัวอักษรผ่านโพรโตคอล HTTP และกลุ่มตัวอักษรเหล่านั้นต้องถูกจัดรูปแบบให้สามารถทำหน้าที่เป็นเอกสารเพื่ อใช้เรียกดูได้ ในระบบเว็บมีภาษาในการจัดรูปแบบการนำเสนอข้อมูลคือ HTML, CSS และภาษาที่ใช้จัดโครงสร้างข้อมูลคือ XML รวมถึงเทคโนโลยีอื่นที่เกี่ยวข้องซึ่งจะทำให้บราวเซอร์เรียกดูข้อมูลอย่างมีประสิท ธิภาพก็เป็นสิ่งที่จำเป็นที่ต้องทำความเข้าใจ เพราะจะทำให้สามารถแสดงข้อมูลให้กับผู้ใช้ได้อย่างมืออาชีพ
1 HTML (HyperText Markup Language) ข้อมูลที่ถือว่าเป็นเนื้อข้อมูลที่ส่งมาจากเซิร์ฟเวอร์ไปสู่บราวเซอร์หากมีการร้องขอจากบราวเซอร์ เนื้อข้อมูลดังกล่าวโดยส่วนใหญ่แล้วจะถูกแทรกคำสั่งหรือแท็กเพื่อควบคุมการแสดงผล โดยบราวเซอร์จะเป็นตัวตรวจสอบแท็กเหล่านั้นเองว่าควรจะแสดงเป็นในรูปแบบใดๆ ข้อแนะนำ เนื้อข้อมูลที่ส่งจากเว็บเซิร์ฟเวอร์สู่บราวเซอร์ไม่จำเป็นเสมอไปที่จะอยู่ในรูปแบบมาตรฐาน HTML อาจจะอยู่ในประเภทรูปภาพ(Image) เสียง(Audio) ภาพเคลื่อนไหว(Video) ตัวอักษร (Text) ปกติ ซึ่งบราวเซอร์จะสามารถตรวจสอบประเภทข้อมูลจากข้อมูลตอบกลับส่วนหัว และรับเนื้อข้อมูลมาแสดงผลหลังจากได้รับข้อมูลเข้ามาจากเว็บเซิร์ฟเวอร์ครบถ้วนแล้ว เพื่อให้เนื้อหาในหนังสือครอบคลุมการพัฒนาระบบทั้งหมดจึงหลีกเหลี่ยงไม่ได้เลยที่จะไม่กล่าวถึงในรายละเอียดของภาษา HTML โดยจะขอกล่าวแบบพอสังเขปโดยมีรายละเอียดดังนี้ HTML ในปัจจุบัน (ขณะเขียนต้นฉบับ) อยู่ในเวอร์ชัน 4.0 โดยมีคุณสมบัติในการปรับแต่งลักษณะการแสดงผลให้แก่ผู้เรียกดูข้อมูล (ผู้ใช้บราวเซอร์) HTML ใช้ในการสร้างเอกสารที่เรียกว่า “เว็บเพจ” ซึ่งเป็นไฟล์ที่มีเนื้อข้อมูลผสมกับแท็กคำสั่ง (Command Tag) และบันทึกไว้ในไฟล์ชื่อใดๆแต่มีนามสกุล htm หรือ html ผู้สร้างเว็บเพจจึงต้องรู้จักกับแท็กที่จำเป็นในการใช้งานก่อนสร้างเว็บเพจ แต่ในปัจจุบันมีเครื่องมือ(ซอฟต์แวร์)ช่วยในการจัดสร้างเว็บเพจอยู่ตามท้องตลาดอยู่มากมาย จนในบางครั้งผู้สร้างไม่จำเป็นต้องรู้จักกับแท็กเลย และลักษณะการสร้างก็เหมือนกับสร้างเอกสารอิเล็กทรอนิกส์ เช่น การสร้างจากโปรแกรมไมโครซอฟต์เวิร์ด ตัวอย่างชื่อซอฟต์แวร์ที่สามารถนำมาช่วยสร้างเว็บเพจ มีรายชื่อดังนี้ - Namo Web Editor - Netscape Composer - Macromedia Dreamweaver - HotDog Web Editor - Microsoft FrontPage ถึงอย่างไรก็ตามในการพัฒนาระบบเว็บด้วยเทคโนโลยี Servlet หรือ JSP ที่จะกล่าวถึงผู้พัฒนาจำเป็นต้องเรียกรู้แท็กคำสั่งคร่าวๆ เพื่อให้เข้าใจในเรื่องการแสดงผลที่ถูกต้องเป็นอันดับแรก ข้อแนะนำ ถึงแม้ว่านักพัฒนาจำเป็นต้องเรียนรู้แท็กคำสั่ง HTML เองก็ตาม เครื่องมือช่วยสร้างเว็บเพจต่างอาจจะไม่ได้ช่วยงานพัฒนาได้โดยตรง แต่ด้วยทางอ้อมนักพัฒนาอาจจะใช้เครื่องมือเหล่านั้นในการสร้างโครงสร้างเอกสารเอาไว้ก่อน แล้วจึงค่อยๆคัดลอกแท็กคำสั่งมาแทรกในบางส่วนของการพัฒนาโปรแกรมได้ ซึ่งถือเป็นเทคนิคหนึ่งในการจัดสร้างเว็บเพจ แท็กคำสั่ง HTML มีรูปแบบดังนี้ รูปแบบ <TAG_NAME ATTRIBUTE_1, ATTRIBUTE_2, …> Content </TAG_NAME> เมื่อ
TAG_NAME คือชื่อคำสั่ง ATTRIBUTE_1, … คือแอตทริบิวต์ประกอบคำสั่งแท็ก ซึ่งเป็นส่วนประกอบจากรูปแบบ NAME=VALUE เมื่อ NAME คือชื่อแอตทริบิวต์ และ VALUE คือข้อมูลที่ให้กับชื่อแอตทริบิวต์นั้นๆ Content คือเนื้อความที่ต้องการเน้นการแสดงผล แท็กคำสั่ง HTML ประกอบด้วย 3 ส่วนดังตัวอย่างที่แสดงไว้ด้านบน ส่วนที่หนึ่งคือแท็กเปิด เป็นแท็กที่บรรจุคำสั่งเพื่อการแสดงผล อยู่ภายในสัญลักษณ์กำหนดแท็กคือ < และ > แท็กเปิดสามารถบรรจุคำสั่งใดๆก็ได้ตามคำสั่งที่มีอยู่ในมาตรฐาน HTML เพื่อบอกจดเริ่มต้นของการกำหนดรูปแบบการแสดงผล ซึ่งมีความหมายหากว่าแท็กเปิดเป็นการบอกถึงการกำหนดตัวอักษรตัวหนา จะหมายถึงว่าเนื้อความหลักจากแท็กเปิดให้แสดงเป็นตัวอักษรตัวหน้า ส่วนที่สองคือส่วนเนื้อความ เป็นเนื้อข้อมูลที่จะถูกกำหนดรูปแบบการแสดงผลจากคำสั่งแท็กเปิดก่อนหน้า ส่วนที่สามแท็กปิด เป็นแท็กที่บรรจุคำสั่งเดียวกับแท็กเปิด แต่จะอยู่ภายในสัญลักษณ์แท็กปิดคือ </ และ > (สังเกตว่ามีเครื่องหมาย / อยู่ด้วย) ถือเป็นการบอกขอบเขตการสิ้นสุดการแสดงผลตามแท็กคำสั่งเปิด เนื้อความต่อไป (หากมี) ให้แสดงในรูปแบบปกติตามที่กำหนดไว้จากบราวเซอร์ของผู้ใช้ ข้อแนะนำ ตัวอักษรแท็กคำสั่ง ในข้อกำหนดของ HTML สามารถใช้ได้ทั้งตัวอักษรตัวเล็กและตัวอักษรตัวใหญ่ แต่ขอแนะนำให้ใช้ตัวอักษรตัวใหญ่ทั้งหมด เพื่อให้เข้ากันได้กับมาตรฐาน XML โครงสร้างของเอกสารเว็บเพจ 1 <HTML> 2 <HEAD> 3 <TITLE> </TITLE> 4 </HEAD> 5 <BODY> 6 7 </BODY> 8 </HTML> จากตัวอย่าง แท็ก HTML ใช้สำหรับกำหนดจุดเริ่มต้นและจุดสิ้นสุดด้วยแท็กเปิดและแท็กปิด ส่วนแท็ก HEADER ใช้สำหรับกำหนดข้อมูลส่วนหัวของเอกสาร ซึ่งใช้บอกข้อมูลเพิ่มเติมว่าบราวเซอร์ควรจะปฏิบัติอย่างไรกับเอกสาร ในแท็ก TITLE เป็นตัวอย่างของการกำหนดชื่อหัวเอกสาร ซึ่งบราวเซอร์จะนำเอาข้อมูลระหว่างแท็กเปิดและแท็กไปไปแสดงบนแถบไตเติลบาร์ของโปรแกรมบราวเซอร์ สำหรับข้อมูลระหว่างแท็ก BODY ซึ่งถือเป็นเนื้อข้อมูล และบราวเซอร์จะนำเนื้อข้อมูลนี้ไปนำเสนอต่อผู้ใช้ ซึ่งโดยส่วนใหญ่จะเป็นพื้นที่ของเอกสารนั่นเอง และเนื้อข้อมูลนี้เองที่สามารถปรับปรุงและเปลี่ยนแปลงการนำเสนอในรูปแบบต่างๆมากมาย ตามเทคโนโลยีที่กล่าวผ่านมาแล้วในบทที่ 2 เช่น JavaSctipt หากเป็นการประมวลผลที่บราวเซอร์เป็นต้น ภายในแท็ก BODY สามารถบรรจุแท็กอื่นๆเพื่อช่วยให้การนำเสนอข้อมูลมีรูปแบบที่ดีขึ้น ซึ่งผู้เขียนขอยกตัวอย่างแท็กคำสั่งที่สำคัญในการทำงานนำแสดงเท่านั้น เนื่องจากแท็กคำสั่ง HTML นั้นมีจำนวนมากมายและมีรายละเอียดปลีกย่อยค่อนข้างเยอะ แท็กที่ควรรู้สำหรับนักพัฒนาระบบบนเว็บ มีรายละเอียดต่อไปนี้ แท็ก P รูปแบบ <P>information</P>
เมื่อ imformation คือข้อมูลที่จะบรรจุเป็นย่อหน้า แท็ก P ทำหน้าที่ในการจัดโครงสร้างของข้อมูล information ให้มีรูปแบบเป็นพารากราฟ (ย่อหน้า) ของเอกสาร เนื่องจากในการแสดงผลของระบบเว็บเริ่มต้นที่ออกแบบสำหรับข้อมูลในภาษาอังกฤษ ซึ่งแต่ละประโยคประกอบด้วยคำที่แยกกันด้วยช่องว่าง เช่น I am a boy. แต่หากข้อมูลเป็นภาษาไทยประโยคจะประกอบด้วยคำเช่นกัน แต่ไม่ได้แยกด้วยช่องว่า เช่น ฉันเป็นเด็กผู้ชาย ดังนั้นการสร้างเว็บสำหรับภาษาไทย จึงควรแยกประโยคให้ได้มากที่สุดเท่าที่จะทำได้ เนื่องจากการจัดย่อหน้าของแท็ก P จะมีการตัดคำตามช่องว่างให้ขึ้นบรรทัดใหม่ในแต่ละบรรทัดนั่นเอง ทำให้ขนาดพื้นที่บราวเซอร์หากมีขนาดเล็ก จำนวนบรรทัดจะสั่นกว่าบราวเซอร์ที่มีขนาดใหญ่ แท็ก BR รูปแบบ information1 <BR> information2 แท็ก BR เป็นคำสั่งในภาษา HTML ที่ให้มีการขึ้นบรรทัดใหม่ภายในย่อหน้า เนื่องจากหากผู้สร้างต้องการให้มีการขึ้นบรรทัดใหม่ก่อนที่จะจบบรรทัด สามารถใช้แท็ก BR วางไว้หลับข้อความนั้นๆ เช่น <P>ฉันเป็น<BR>เด็กผู้ชาย</P> จะเกิดเป็นย่อหน้าที่มี 2 บรรทัด บรรทัดแรกคือ ฉันเป็น บรรทัดที่สองคือ เด็กผู้ชาย ข้อสังเกตอย่างหนึ่งของแท็ก BR คือไม่จำเป็นต้องมีแท็กปิด แท็ก IMG รูปแบบ <IMG SRC="url" WIDTH="width" HEIGHT="height"> เมื่อ url คือเส้นทางในรูปแบบ URL ที่จะอ้างไปยังไฟล์รูปภาพเพื่อนำมาเสนอในพื้นที่บราวเซอร์ width คือข้อมูลกำหนดความกว้างของรูปภาพมีหน่วยเป็นพิกเซล (Pixel) height คือข้อมูลกำหนดความสูงของรูปภาพมีหน่วยเป็นพิกเซล ตัวอย่าง <IMG SRC="http://www.javacentrix.com/images/banner.gif" width="100" height="60"> สำหรับแท็ก IMG นี้ใช้กำหนดการแสดงรูปภาพ โดยต้องมีการระบุชื่อไฟล์รูปภาพด้วยว่าบราวเซอร์ควรจะนำเอาภาพจากที่ไหนมาแสดง ซึ่งไฟล์รูปภาพดังกล่าวจะอยู่ที่ใดก็ได้บนระบบอินเตอร์เน็ตที่สามารถอ้างถึงได้จากเส้นทาง URL นอกจากนั้นแล้วยังมีแอตทริบิวต์ที่ช่วยกำหนดขนาดรูปภาพในการนำเสนอด้วย width และ height อีกด้วย หากไม่ระบุขนาดในแท็ก IMG แล้วการแสดงรูปภาพจะนำเอาขนาดของภาพที่แท้จริงมาแสดง แท็ก Hx รูปแบบ <Hx>information </Hx> เมื่อ x คือระดับหัวข้อมีค่าตั้งแต่ 1-7
ตัวอย่าง <H1>ฉันเป็นเด็กผู้ชาย</H1> แท็ก Hx นี้ใช้กำหนดให้ข้อมูลแสดงเป็นหัวข้อ ซึ่งการแสดงผลนี้จะทำให้ตัวอักษรภายในแท็กดังกล่าวมีขนาดลดลั่นกันมากตามค่า x ที่วางไว้ด้านหลัง ส่วนใหญ่ใช้สำหรับกำหนดขนาดตัวอักษรให้ดูเด่นชัดขึ้น แท็ก FONT รูปแบบ <FONT FACE="name" SIZE="size"> information </FONT> เมื่อ name คือชื่อฟอนต์ size คือขนาดของฟอนต์มีหน่วยเป็นพอยต์ ตัวอย่าง <FONT FACE="tahoma" SIZE="10"> ฉันเป็นเด็กผู้ชาย</FONT> แท็ก FONT นี้ใช้สำหรับกำหนดรูปแบบของตัวอักษรว่าต้องการใช้ข้อความภายในแท็ก มีตัวอักษรตามแบบใด และมีขนาดเท่าใด จากตัวอย่างต้องการให้ข้อความระหว่างแท็ก FONT มีรูปแบบตัวอักษรแบบ Tahoma และมีขนาด 10 พอยต์ แท็ก TABLE, TR, TD รูปแบบ <TABLE BORDER="border" CELLPADDING="pad" CELLSPACCING="space"> <TR BGCOLOR="color" WIDTH="width" HEIGHT="height" > <TD BGCOLOR ="color" WIDTH ="width" HEIGHT ="height" ALIGH="haligh" VALIGN="valign"> </TD> </TR> … </TABLE> เมื่อ border คือขนาดกรอบของตารางมีหน่วยเป็นพิกเซล pad คือขนาดของระยะขอบภายในเซลมีหน่วยเป็นพิกเซล space คือขนาดระหว่างเซลทั้งแนวตั้งและแนวนนอนมีหน่วยเป็นพิกเซล color คือชื่อสี เช่น white, red, black, green หรือรหัสสีที่นำหน้าด้วยสัญลักษณ์ # เช่น #00FF05 width คือข้อมูลกำหนดความกว้างของรูปภาพมีหน่วยเป็นพิกเซลหรือเปอร์เซ็นต์ height คือข้อมูลกำหนดความสูงของรูปภาพมีหน่วยเป็นพิกเซลหรือเปอร์เซ็นต์ haling คือลักษณะการจัดข้อมูลในแนวนอน จากข้อกำหนด LEFT, CENTER, RIGHT
valigh คือลักษณะการจัดข้อมูลในแนวตั้ง จากข้อกำหนด TOP, MIDDEN, BOTTOM ตัวอย่าง <TABLE BORDER="1" CELLPADDING="2" CELLSPACCING="0"> <TR BGCOLOR="white" > <TD>ชื่อ</TD><TD>นามสกุล</TD> </TR> <TR BGCOLOR="yellow" > <TD>สมชาย</TD><TD>มาดแมน</TD> </TR> </TABLE> แท็ก TABLE ใช้กำหนดการแสดงรูปแบบตาราง โดยส่วนประกอบของตารางในแต่ละแถวกำหนดด้วยแท็ก TR และแต่ละแถวกำหนดได้จากแท็ก TD คือคอลัมภ์นั่นเอง จากตัวอย่างจะประกฎตารางที่มี 2 แถวแต่ละแถวมี 2 คอลัมภ์ โดยมีตัวอย่างดังนี้ ชื่อ นามสกุล สมชาย มาดแมน แท็ก FORM, INPUT รูปแบบ <FORM METHOD="method" ACTION="url"> <INPUT TYPE="type" NAME="name" VALUE="value"> … </FORM> เมื่อ method คือรูปแบบการส่งข้อมูลไปยังเซิร์ฟเวอร์ที่กำหนดเป็นแบบ POST หรือ GET url เส้นทางการส่งข้อมูล ซึ่งเป้าหมายคือเอกสารที่สามารถรับข้อมูลได้ type ชนิดของฟิลด์ที่ใช้ในการประกอบข้อมูล ประกอบด้วย TEXT สร้างเป็นช่องกรอกข้อมูลทั่วไป PASSWORD สร้างเป็นช่องกรอกข้อมูลเพื่อรับข้อมูลรหัสผ่าน HIDDEN สร้างเป็นฟิลด์ข้อมูลที่ไม่ให้ผู้ใช้เห็นจากเอกสาร แต่ใช้สำหรับส่งไปเว็บเซิร์ฟเวอร์ SUBMIT สร้างเป็นปุ่มกดเพื่อให้เริ่มส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์ name คือชื่อฟิลด์ข้อมูล ซึ่งใช้เป็นชื่อพารามิเตอร์ไปยังเว็บเซิร์ฟเวอร์ value คือข้อมูลเริ่มต้นให้แต่ละช่องกรอกข้อมูล ตัวอย่าง <FORM METHOD="POST" ACTION="/ejp/Servlet/putInfo"> <INPUT TYPE="TEXT" NAME="firstname">
<INPUT TYPE="HIDDEN" NAME="id" VALUE="007"> <INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="ส่ง"> </FORM> หากต้องการสร้างเอกสารที่สามารถรองรับการกรอกข้อมูลจากผู้ใช้ไปยังเซิร์ฟเวอร์ เพื่อเป็นช่องทางในการส่งข้อมูลไปให้เซิร์ฟเล็ตทำงาน ให้ใช้แท็ก FORM ซึ่งสามารถระบุประเภทการส่งข้อมูล และปลายทางที่รับข้อมูลนั้นๆ ส่วนรูปแบบในการกรอกข้อมูลระบุได้จาก แท็ก INPUT ว่าจะในฟอร์มประกอบด้วยพารามิเตอร์ได้กี่ตัว จากตัวอย่างเป็นการสร้างฟอร์มที่มีช่องกรอกข้อมูลหนึ่งช่องที่มีชื่อว่า firstname และมีข้อมูลพารามิเตอร์ที่ซ่อนไว้คือ id ที่มีข้อมูลเริ่มต้น 007 ในฟอร์มมีปุ่มเพื่อส่งข้อมูลที่มีข้อความบนปุ่มว่า ส่ง ดังนั้นสิ่งที่ประกฎบนจอภาพของผู้ใช้จึงเป็นดังนี้ ภาพแสดงการผลของการสร้างฟอร์มด้วยแท็ก FORM 2 CSS (Cascading Style Sheet) จากข้อจำกัดของการนำเสนอเนื้อความด้วยภาษา HTML ก่อให้เกิดปัญหาหนึ่งคือความไม่เหมือนกันของรูปแบบการแสดงผลไม่ว่าจะเกิดจากตัวอักษรหรือรูปภาพ จากทั้งผู้ใช้ที่เรียกดูเนื้อหาต่างสถานที่กัน (ผู้ใช้ตั้งค่าการแสดงผลบราวเซอร์ไม่เหมือนกัน) หรือจากผู้ใช้ที่ซอฟต์แวร์ที่ทำหน้าที่บราวเซอร์ต่างกัน เช่น จาก Netscape และ IE ซึ่งเป็นไปได้ยากมากหากต้องการควบคุมการแสดงผลให้เหมือนกันทั้งหมด CSS สามารถแก้ปัญหาของการแสดงผลดังกล่าวได้ นอกจากนั้นแล้ว CSS ยังช่วยให้เว็บมีรูปแบบในการแสดงผลเป็นแบบไดนามิคด้วย การใช้งาน CSS ซึ่งเป็นส่วนเพิ่มเติม HTML ไม่ใช่การแทนที่ ดังนั้นเอกสารที่เป็นไปตามมาตรฐาน HTML เท่านั้นจึงจะนำเอามาตรฐาน CSS มาเพิ่มเติมความสามารถได้ คำว่า Cascading มีความหมายถึงการกำหนดรูปแบบเฉพาะให้กับรูปแบบปกติที่มีอยู่ เช่น แท็ก <P> ที่เป็นคำสั่งใน HTML เพื่อกำหนดถึงการจัดพารากราฟให้กับเนื้อความ แต่หากนำเอา CSS มาประกอบการใช้งาน สามารถปรับให้ตัวอักษร สีตัวอักษร สีพื้นตัวอักษรให้เป็นไปในรูปแบบเฉพาะ และทุกๆที่ของเอกสาร HTML ที่มีการใช้งานแท็ก <P> ก็จะเปลี่ยนแปลงในรูปแบบเดียวกันทั้งหมด ดังนั้นจึงเป็นผลพวงให้เกิดความสะดวกสบายขึ้น เมื่อต้องการเปลี่ยนแปลงรูปแบบตัวอักษรในขอบเขตของแท็ก <P> ก็สามารถทำได้ด้วยจุดเพียงจุดเดียว โดยจะมีผลถึงการเปลี่ยนแปลงทั้งหมด ข้อแนะนำ แท็กคำสั่ง HTML มีความสามารถเช่นเดียวกับ CSS ในเรื่องปรับรูปแบบตัวอักษร สีตัวอักษร สีพื้นตัวอักษร และอื่น แต่ข้อเสียคือ ผู้สร้างเว็บเพจจะต้องแทรกแท็กคำสั่งปรับรูปแบบตัวอักษรในทุกที่ที่ต้องการ หากแต่เป็น CSS แล้วทำเฉพาะการกำหนดเบื้องต้นว่าจะต้องการให้แท็กใดใน HTML มีการแสดงผลแบบใด 2.1 การใช้งาน Style ส่วนคำว่า Style ซึ่งหมายถึง รูปแบบที่รวบรวมข้อกำหนดต่างๆเอาไว้เป็นแอตทริบิวต์ (Attribute) เช่นรูปแบบที่รวบรวมเอาแอตทริบิวต์เอาไว้ดังนี้ รูปแบบตัวอักษร Arial ขนาด 24 พอยต์ ตัวหนา สีน้ำเงิน ล้อมรอบด้วยกรอบสีเขียวที่มีขนาดเส้น 1 พอยต์ เป็นต้น ส่ง
โดยแอตทริบิวต์ที่รวบรวมเอาไว้ถูกกำหนดด้วยชื่อที่จะถูกนำไปใช้ในภาษา HTML อีกที และในบางครั้งชื่อ Style ดังกล่าวเป็นชื่อที่ตรงกับแท็กคำสั่ง HTML หากเป็นเช่นนี้ เมื่อบราวเซอร์อ่านเนื้อความและกลุ่มแอตทริบิวต์ที่กำหนดไว้ใน Style เข้ามาก็จะนำไปใช้งานสำหรับแสดงเนื้อความนั้นๆ แต่ก็ไม่จำเป็นที่ผู้สร้างจะต้องกำหนดชื่อ Style ให้เหมือนกับชื่อแท็กที่ใช้ใน HTML และหากเป็นเช่นนั้นชื่อ Style ที่แตกต่างออกไปเมื่อนำมาใช้ในเว็บเพจ ผู้สร้างต้องนำเอาชื่อ Style ดังกล่าวแทรกลงในส่วนแอททริบิวต์ของแท็ก HTML เอง ทำให้ชื่อ Style สามารถเพิ่มลักษณะในการแสดงผลลัพธ์ได้เฉพาะบางส่วนที่ต้องการเท่านั้น ยกตัวอย่างเช่น หากสร้างเนื้อความภายใต้ข้อกำหนด <P> </P> เมื่อต้องการนำเอา Style ที่สร้างไว้ด้วย CSS ภายใต้ชื่อ bibliography มาใช้กับแท็ก HTML ก็จะใส่ไว้ในแอตทริบิวต์ CLASS โดยตัวอย่างดังนี้ <P CLASS="bibliography”>เนื้อความ</P> เพียงแค่นี้ตัวอย่างด้านบนเฉพาะย่อหน้าเดียวเท่านั้น จะแสดงลักษณะตัวอักษรที่กำหนดไว้ภายใต้ Style ชื่อ bibliography 2.2 การสร้าง Style การสร้าง Style จำต้องสร้าง ตามข้อกำหนดของ CSS ซึ่งจะต้องทำตามกฎเกณฑ์ดังนี้ รูปแบบ .selector { declaration } เมื่อ selector คือชื่อ Style declaration คือลักษณะการแสดงผลที่กำหนดให้กับ Style selector คือชื่อ Style ที่ต้องการสร้างขึ้น หากสังเกตให้ดีจะเห็นสัญลักษณ์ . (Dot) อยู่ด้านหน้า ซึ่งหากชื่อ Style ที่ต้องการสร้างต้องการนำไปใช้งานกับแท็ก HTML (ชื่อ Style เหมือนกับชื่อแท็ก) ไม่จำเป็นต้องใส่สัญลักษณ์ . หากชื่อ Style เป็นชื่อที่สร้างขึ้นมาใหม่ (ใช้กับแอตทริบิวต์ CLASS) จำเป็นต้องมีสัญลักษณ์ . อยู่ด้านหน้าชื่อด้วย declaration จำเป็นต้องอยู่ภายในเครื่องหมาย { } เพื่อใช้กำหนดลักษณะของ Style และหากมีหลายลักษณะที่กำหนดให้กับ Style ให้แยกลักษณะแต่ละตัวด้วยเครื่องหมาย ; ตัวอย่าง .puppy { font-size: 10pt; font-family: Tahoma; } จากตัวอย่าง แสดงการสร้าง Style ที่ชื่อ puppy โดยมีลักษณะในการแสดงข้อมูลประกอบด้วย แสดงตัวอักษรในแบบ Tahoma ที่มีขนาด 10 พอยต์ เป็นต้น ข้อแนะนำ หากต้องการทราบรายละเอียดว่ามีชื่ออะไรบ้าง ที่จะสามารถนำมาใช้ในการกำหนด Style สามารถดูรายละเอียดได้ที่ http://www.htmlhelp.com/reference/css/ ผู้อ่านอาจมีคำถามตั้งไว้ในใจว่า แล้วจะแทรก CSS ไว้ที่ไหน มีวิธีการเรียกใช้งาน CSS ได้หลายวิธีดังนี้
- การใช้งาน CSS ในไฟล์ HTML วิธีนี้เป็นวิธีที่ดูง่ายที่สุดคือเราจะแทรกข้อมูลการกำหนด Style เอาไว้ในไฟล์ที่บรรจุคำสั่ง HTML โดยตรง ซึ่งส่วนใหญ่จะแทรกไว้ระหว่างแท็กคำสั่ง HEAD โดยมีรูปแบบดังนี้ … <HEAD> …. <STYLE TYPE="text/css"> <!-- H3 { font-family:Lucida; font-style:normal; color:blue } BLOCKQUOTE { font-family:Arial; font-style:italic; color:teal; word-spacing:-0.2cm } --> </STYLE> </HEAD> …. จากตัวอย่างแสดงการกำหนด CSS (สังเกตจาก แอตทริบิวต์ TYPE ในแท็ก STYLE <STYLE TYPE="text/css">) โดยมีการกำหนด Style อยู่ระหว่างแท็กหมายเหตุ (Comment) คือ <!-- --> จะเห็นได้ว่าจากตัวอย่าง มีการสร้าง Style ที่ชื่อ H3 และ BLOCKQUOTE (ไม่จำเป็นต้องมีสัญลักษณ์ . อยู่ด้านหน้าชื่อ เนื่องจากชื่อเดียวกับแท็กใน HTML) โดยกำหนดให้ H3 มีลักษณะการแสดงผลลัพธ์เป็นตัวอักษร Arial แบบปกติ (normal) สีน้ำเงิน (blue) ส่วน Style ที่ชื่อ BLOCKQUOTE มีลักษณะตัวอักษรแบบ Arial เช่นกัน แต่เป็นตัวเอียง(Italic) สี teal ระยะห่างระหว่างคำมีค่า -0.2 ซม. - การใช้งาน CSS จากไฟล์ CSS สามารถสร้างและบันทึกไว้ในไฟล์ต่างหาก โดยไม่จำเป็นต้องเขียนรวมกับคำสั่ง HTML เช่น เมื่อผู้สร้างสร้าง Style ต่างๆแล้วรวบรวมบันทึกไฟล์ชื่อ myStyle.css แล้ว เมื่อต้องการนำเอา Style ต่างๆมาใช้งานในไฟล์ HTML ใดๆ ไฟล์ HTML เหล่านั้นจำเป็นต้องใช้แทรกแท็ก <LINK> เพื่อเชื่องโยงไปหาไฟล์ myStyle.css โดยมีการกำหนดข้อมูลแอตทริบิวต์ของแท็ก <LINK> ให้ถูกต้องตามรูปแบบดังนี้ รูปแบบ <LINK REL="StyleSheet" HREF="FILE_NAME" TYPE="text/css"> เมื่อ FILE_NAME คือชื่อไฟล์ที่สร้าง Style ตามรูปแบบ CSS เก็บไว้ ตัวอย่าง <LINK REL="StyleSheet" HREF="sitestyle.css" TYPE="text/css"> 2.3 ตัวอย่างสร้าง Style ขึ้นมาใช้เอง ผู้สร้างเว็บเพจสามารถสร้าง Style ขึ้นมาเพื่อใช้งานได้เองเพื่อนำ ไปใช้กับเว็บเพจใดๆได้ โดยในขั้นแรกจะต้องสร้าง Style โดยมีชื่อที่กำหนดขึ้นมาใหม่ก่อน ลองพิจารณาจากตัวอย่างด้านล่างดังนี้ .Danger { font-size:20pt; font-weight:bold; color:red; border:4pt lightgreen dotted; background: black; text-align:center; height:50pt; width:220pt
} จากตัวอย่างเป็นการสร้าง Style ชื่อ Danger โดยมีลักษณะคือใช้ขนาด 20 พอยต์ ตัวอักษรหนา สีแดง บนพื้นที่ดำที่มีกรอบเป็นเส้นไข่ปลา ขนาด 4 พอยต์ สีเขียว ขนาด 50x220 พอยต์ (pt ย่อมาจาก Point) ตัวอักษรจะอยู่บริเวณกลางของกรอบ ต่อจากนั้นเป็นการนำเอา Style ไปใช้งาน ในที่นี้จะเป็นตัวอย่างการใช้งานร่วมกับแท็ก SPAN ตัวนี้ <P>ท่านผู้ใช้งานคอมพิวเตอร์ทั้งหลาย ระวังไวรัสระบาด<BR> <SPAN CLASS=Danger>ตรวจสอบแผ่นจากภายนอกทุกครั้งก่อนใช้งาน</SPAN></P> 2.4 ลำดับการทำงานของคำสั่ง เนื่องจากการใช้งาน CSS ร่วมกับคำสั่งแท็กใน HTML ซึ่งในบางแท็กมีความสามารถในการจัดลักษณะการแสดงผลลัพธ์เช่นเดียวกัน เช่น แท็ก <FONT> ดังนั้นลำดับในการพิจารณาว่าควรจะกำหนดเนื้อความตามชื่อ Style หรือแท็ก <FONT> จึงเป็นสิ่งหนึ่งที่จำเป็นต้องทำความเข้าใจ ลองพิจารณาตัวอย่างต่อไปนี้ … <STYLE TYPE="text/css"> <!-- BODY { background: red; color: black } H3 { font-family:Lucida; font-style:normal; color:green } --> </STYLE> </HEAD> <H3><FONT COLOR="Blue"> This is not a love song! </FONT> </H3> … จากตัวอย่างให้พิจารณาส่วนตัวอักษรที่เป็นตัวหนา ข้อความว่า “This is not a love song!” เป็นส่วนของเนื้อความที่มีการบังคับการแสดงผลคือแท็ก FONT ที่ให้ตัวอักษรเป็นสีน้ำเงิน และแท็ก H3 ที่ถูกบังคับจากข้อกำหนด Style ให้ตัวอักษรเป็นสีแดง การแสดงผลข้อความดังกล่าวจะให้ผลลัพธ์เป็นสีน้ำเงิน เนื่องจากเป็นลักษณะที่กำหนดขึ้นในชั้นในสุดนั่นเอง ข้อแนะนำ หากไม่ต้องการให้แท็ก HTML ที่อยู่ซ้อนในด้านในชื่อ Style มีผลกับการทำงานของ Style ควรเพิ่มลักษณะ ! important ลงในรายละเอียดลักษณะ เช่น H1 {color: teal ! important; } บราวเซอร์จะถือเอาลักษณะที่กำหนดจาก Style เป็นหลักเท่านั้น 2.5 ลูกเล่นในการใช้งาน CSS CSS สามารถนำมาใช้งานเพื่อให้เกิดไดนามิคในแง่ของการนำเสนอข้อมูลมากมายหลายรูปแบบ ซึ่งในการใช้งานคือการเพิ่มลูกเล่นให้กับเอกสาร ซึ่งมีรายละเอียดดังนี้
- เมื่อไม่ต้องการเส้นใต้ลิงก์เชื่อมโยง ในการแสดงผลลัพธ์ของลิงก์เชื่อมโยง (Hyperlink) ในภาษา HTML ที่สร้างจากแท็ก A โดยทั่วไป มักจะเห็นตัวอักษรเป็นสีน้ำเงิน (โดยส่วนใหญ่) จะมีเส้นใต้อยู่ใต้ตัวอักษรเหล่านั้น และหากไม่ต้องการให้ตัวอักษรมีเส้นใต้เกิดขึ้น สามารถใช้ CSS ในการระบุรูปแบบการแสดงลิงก์ดังกล่าว โดยใช้ลักษณะ text-decoration: none ดังตัวอย่างต่อไปนี้ A:link {color: cornsilk; text-decoration: none} - เมื่อต้องการสร้างกรอบข้อความ หากต้องการเน้นข้อความด้วยเส้นกรอบรอบรอบในสีและขนาดต่างๆ CSS สามารถทำความต้องการนี้ให้เป็นจริงได้ ยกตัวอย่างเช่นเมื่อต้องการใช้กับแท็ก <P> การกำหนด Style ควรจะมีลักษณะดังนี้ P { border-style:solid; border-width:thin; border-color:blue; } - การวางส่วนประกอบบนเว็บ เมื่อมีการวางภาพหรือสิ่งใดๆในเว็บเพจ หากมีตัวอักษรใดๆอยู่ก่อนหน้า จะทำให้ภาพหรือตัวอักษรมีการขยับไปมาตามขนาดการเปิดใช้งานบราวเซอร์ของผู้ใช้ CSS สามารถกำหนดตำแหน่งที่แน่นอนให้กับรูปภาพหรือวัตถุด้วย ด้วยข้อมูลลักษณะ position:absolute เพื่อกำหนดตำแหน่ง width: สำหรับความกว้าง height: สำหรับกำหนดส่วนสูง ลองพิจารณาตัวอย่างต่อไปนี้ .OurLogo { position:absolute; left:30px; top:10px; width:40px; height:30px; color:red; font-size:12pt; background: black; border:1pt red dotted; } เป็นตัวอย่างการสร้าง Style ที่ชื่อ OurLogo เพื่อระบุตำแหน่งของภาพที่ตำแหน่ง 30 จากด้านซ้ายและ 10 จากด้านบน (px มาจาก Pixel) โดยมีขนาด 40x30 สีแดง มีกรอบขนาด 1 พอยต์ดีแดงเส้นไข่ปลา ตัวอักษรขนาด 12 พอยต์สีดำ แต่เมื่อเราสามารถกำหนดตำแหน่งการวางได้ ปัญหาที่อาจจะเกิดขึ้นตามมาคือการซ้อนกันของรูปภาพ ดังนั้นเมื่อมีการวางชิ้นส่วนซ้อนกันลักษณะการแสดงผลทั่วไปชิ้นส่วนที่ถูกถูกวางหลังสุดจะถูกแสดงที่ส่วนบนสุด แต่สำหรับ CSS สามารถบังคับได้ว่าชิ้นไหนควรจะอยู่ด้านบนหรือชิ้นไหนควรจะอยู่ด้านล่าง ด้วยการกำหนดลักษณะเพิ่มเติมคือ z- index: ตามด้วยตัวเลขบอกตำแหน่ง โดยหมายเลขดังกล่าวหากมีค่าสูงจะอยู่ด้านล่างสุด และจะไล่ตามตัวเลขไปหาค่าที่น้อยที่สุด (ตัวเลขไม่จำเป็นต้องเรียงลำดับ และเป็นได้ทั้งค่าบวกและลบ) ลองพิจารณาจากตัวอย่างต่อไปนี้
<DIV CLASS="pile" ID="image1" STYLE="z-index: 3"> <DIV CLASS="heap" ID="image2" STYLE="z-index: 2"> จากตัวอย่าง image1 จะวางอยู่ด้านล่างเนื่องจากมีค่าลำดับตำแหน่งเป็น 3 ในขณะที่ image2 วางอยู่ด้านบนอีกที ข้อแนะนำ การใช้งาน CSS จะต้องถูกเรียกดูจากผู้ใช้งานบราวเซอร์ที่สนับสนุนการทำงานของ CSS ด้วย ดังนั้นบราวเซอร์รุ่นเก่าๆอาจจะไม่มีการทำงานตามข้อกำหนดของ CSS ได้ และบราวเซอร์รุ่นใหม่ที่สามารถใช้งาน CSS ได้ เช่น Netscape 4.5 และ IE 4.0 ขึ้นไป 3 XML (eXtension Markup Language) ในการแสดงเนื้อความให้กับผู้ใช้ผ่านทางบราวเซอร์ มาตรฐานที่กล่าวมาแล้วคือ HTML สำหรับปรับการแสดงผลเนื้อความ และ CSS สำหรับเพิ่มเติมความสามารถในการแสดงผลเนื้อความ แต่ในโลกของการแลกเปลี่ยนข้อมูลหรือสื่อสารข้อมูล นักพัฒนาโปรแกรมมักให้ความสำคัญกับความหมายของเนื้อความ ความหมายเหล่านี้มีประโยชน์มากในการแลกเปลี่ยนข้อมูลระหว่างแอปพลิเคชั่นที่ทำงานด้วยระบบคอมพิวเตอร์ ข้อแนะนำ ความหมายของเนื้อความสามารถเข้าใจได้ด้วยจากการอ่านและตีความของมนุษย์ แต่ความหมายที่โปรแกรมคอมพิวเตอร์จะเข้าใจได้ เนื้อความนั้นจำเป็นต้องถูกระบุว่าบริเวณไหนมีความหมายอย่างไร XML เป็นแท็กลักษณะมาร์คอัพเช่นเดียวกับ HTML แต่มาช่วยในการให้ความหมายกับเนื้อความ ซึ่งต่างจาก HTML ซึ่งเป็นแท็กในการปรับการแสดงผลของเนื้อความ XML ทำให้ผู้ใช้งานสามารถสร้างและดูแลเอกสารในรูปแบบเอกสารที่มีโครงสร้าง (structured documents) ในที่โครงสร้างเอกสารคือการให้ความหมายกับส่วนประกอบต่างของเนื้อความ เพื่อให้โปรแกรมในการเรียกดูเอกสาร (เช่น บราวเซอร์) สามารถแสดงเนื้อความ และปรับเปลี่ยนรูปแบบการแสดงได้หลากหลายยิ่งขึ้น กล่าวง่ายๆว่าจุดประสงค์หลักของ XML คือการแยกส่วนเนื้อข้อมูลเพื่อประโยชน์ในการแสดงผล และแลกเปลี่ยนข้อมูลระหว่างงาน ข้อแนะนำ โปรแกรมเรียกดูเอกสาร ในบางครั้งออกถูกออกแบบหรือจัดสร้างขึ้นมาเป็นพิเศษสำหรับการแสดงข้อมูลในเอกสาร XML ได้ในกรณีที่เป็นข้อมูลเฉพาะด้าน เช่น ข้อมูลทางการเงิน ข้อมูลทางเคมี ข้อมูลทางการพยากรณ์ และบราวเซอร์ก็เป็นโปรแกรมหนึ่งสำหรับการเรียกดูข้อมูล XML แต่ใช้สำหรับแสดงข้อมูล XML ในแบบทั่วไปมากกว่าเฉพาะด้านใดด้านหนึ่ง 3.1 ความหมายของคำศัพท์เกี่ยวกับ XML โครงสร้างเอกสาร (Structure Document) หรือเอกสารที่มีโครงสร้าง ตามปกติข้อมูลที่ถูกแสดงบนระบบเว็บถือว่าเป็นเอกสารที่ไม่มีโครงสร้าง คือไม่มีส่วนไหนที่จะระบุว่าคือหัวข้อ ส่วนไหนจะบอกว่าเป็นบทนำ ส่วนไหนที่จะบอกว่าเป็นบทสรุป เพียงแต่เอกสาร HTML อาจจะบ่งบอกลักษณะเอกสารด้วยวิธีการแสดงเป็นนัย เช่นการเน้นส่วนบทนำเอาจะใช้ตัวอักษรตัวใหญ่ บทสรุปอาจจะแสดงด้วยตัวอักษรสีน้ำเงินเข้า เป็นต้น แต่นั้นก็เป็นเพียงการเน้นด้วยรูปแบบการแสดงผลเท่านั้น ลองดูตัวอย่างของลักษณะเอกสารที่มีโครงสร้าง ต่อไปนี้ - เอกสารในลักษณะหนังสือ(Book) ประกอบขึ้นจากเนื้อหาแต่แต่ละบท (Chapter) - ในแต่ละบทประกอบด้วยเนื้อหา (Section) ย่อยหลายเนื้อหา - ในแต่ละหัวข้อย่อย อาจจะถูกอธิบายหรือประกอบด้วยข้อมูลที่อยู่ภายในตาราง (table) - ตารางเหล่านั้นถูกสร้างขึ้นมาจากแถว (row) และคอลัมน์ (column)
ดังนั้นจะเห็นได้ว่าเมื่อกล่าวถึงหนังสือ ทุกคนที่เคยหยิบหนังสือขึ้นมาอ่านมักจะเข้าใจโครงสร้างของหนังสือว่ามีลักษณะดังที่กล่าวไว้ด้านบน และเป็นโครงสร้างที่แน่นอน เพราะฉะนั้นหากผู้อ่านหันไปหยิบเอากระดาษปึกใหญ่สักปึกหนึ่งขึ้นมาวิเคราะห์ และหากผลการวิเคราะห์มากเห็นโครงสร้างดังกล่าว ผู้อ่านคงจะบอกได้ว่าปึกกระดาษที่หยิบขึ้นมาดูนั้นก็คือหนังสือหนึ่งเล่มนั้นเอง เนื้อความ (Plain Text) เมื่อเอ่ยถึงคำว่าตัวอักษร (Character) เราจะนิยามตัวอักษรว่าหมายถึงอักขระที่เป็นทั้งตัวอักษรที่เป็นตัวอักษร อักขระตัวเลข อักขระสัญลักษณ์ ซึ่งที่มาของอักขระแต่ละก็เกิดจากรหัส Unicode นี้เอง ข้อแนะนำ เมื่อก่อนระบบคอมพิวเตอร์มีการจัดเก็บตัวอักษรในหลายรูปแบบ เช่น ASCII แต่มีข้อจำกัดที่ว่า รหัสต่างๆที่กล่าวมาสามารถใช้รหัสตัวเลข (7 บิต) แทนตัวอักษรได้เพียงเฉพาะบางภาษาเท่านั้น แต่ในปัจจุบันระบบคอมพิวเตอร์ต้องสามารถรอบรับการแทนค่าตัวเลขกับตัวอักษรให้ได้ในหลายภาษา จึงต้องมีการเพิ่มจำนวนบิตขึ้นในการบันทึกค่าตัวอักษร เป็น 16 บิตซึ่งมีการเรียกรูปแบบมาตรฐานนี้ว่า Unicode เนื้อความประกอบขึ้นจากตัวอักษรในหลายๆรูปแบบ ซึ่งถือว่าเป็นส่วนที่เป็นข้อมูล เนื้อความถูกมองเห็นจากผู้เรียกดูข้อมูล (ซึ่งอาจถูกปรับแต่งการแสดงผลด้วย HTML, CSS) เนื้อความเป็นส่วนหนึ่งที่ระบบคอมพิวเตอร์อื่นๆสามารถทำความเข้าใจได้ โดยมีการตรวจสอบก่อนว่าเนื้อความดังกล่าว อยู่ในโครงสร้างของเอกสารที่ชี้บ่งว่าเป็นอะไร เช่น ชื่อบท ชื่อตาราง เป็นต้น การเร็นเดอร์ (Rendering) เนื่องจากเนื้อความที่บรรจุอยู่ในโครงสร้างเอกสารหากมีการเรียกดูโดยไม่มีการตีความใดๆ ผู้เรียกดูจะไม่สามารถทำความเข้าใจ หรืออ่านเอกสารนั่นๆได้ เนื่องจากมีตัวอักษรหลายส่วนที่ประกอบเป็นเนื้อความ และตัวอักษรบอกโครงสร้างเอกสาร สิ่งหนึ่งที่สามารถทำให้ผู้อ่านสามารถอ่านเข้าใจได้ คือขบวนการแยกแยะเนื้อความ และแสดงเนื้อความในรูปแบบที่ง่ายต่อการเข้าใจ ซึ่งขบวนการที่ว่านี้เราเรียกว่า “การเร็นเดอร์” การเร็นเดอร์ถือเป็นสิ่งที่มีประโยชน์มากเมื่อมาใช้งานกับ XML เมื่อการเร็นเดอร์เป็นขบวนการที่พิจารณาเอกสาร XML และอุปกรณ์ที่จะแสดงเอกสารเหล่านั้น เอกสาร XML เดียวกันเมื่อนำมาแสดงที่จอภาพมอนิเตอร์ แสดงที่จอภาพ PDA (จอขนาดเล็กบนอุปกรณ์ที่เรียกว่า Palm หรือ PocketPC) นำมาพิมพ์ลงบนเอกสาร จะเห็นได้ว่าอุปกรณ์แต่ละตัวมีพื้นที่ และลักษณะการแสดงเอกสารที่แตกต่างกัน ดังนั้นการเร็นเดอร์จึงเป็นขบวนการทางคอมพิวเตอร์ที่จะเร็นเดอร์ (วาดภาพเนื้อความ) ลบบนอุปกรณ์ต่างๆ ได้อย่างเหมาะสมและสวยงาม การที่เอกสาร XML จะสามารถเร็นเดอร์เนื้อความได้อย่างถูกต้อง จึงจำเป็นต้องอาศัยเอกสารประกอบที่เรียกว่า XSL (Extensible Style Language) 3.2 เอกสารที่มีโครงสร้าง เมื่อ XML ถูกใช้สำหรับกำหนดโครงสร้างของเอกสารด้วยคำสั่ง ดังนั้นลองพิจารณาตัวอย่างรูปแบบโครงสร้างของหนังสือ ซึ่งของยกโครงสร้างคร่าวๆมาให้ดู กำหนดให้หนังสือ (Book) ประกอบด้วยจำนวนบท (Chapter) 2 บท โดยในแต่ละบทมีรายละเอียด (Text) ประกอบอยู่ Begin Book Begin Chapter 1 Text for Chapter 1 End Chapter 1
Begin Chapter 2 Text for Chapter 2 End Chapter 2 End Book เนื่องจากหนังสือที่ใช้งานกันจริงๆจะ มีโครงสร้างที่มีรายละเอียดซับซ้อนกว่าตัวอย่างมาก เช่น บทนำ (Introduction), สารบัญ (Index) บทที่ (Chapter) เป็นต้น หรือ ภายในส่วนรายละเอียดของแต่ละบท (Text) ยังประกอบด้วย ย่อหน้า (Paragraph) ประโยค (Sentence) คำ (Word) และตัวอักษร (Character) ด้วย อย่างไรก็ตามผู้เขียนพยายามยกตัวอย่างลักษณะโครงสร้างที่ง่ายๆ เพื่อให้ผู้อ่านได้มองเห็นภาพให้เข้าใจก่อน 3.3 ลักษณะของ XML การแสดงผลเนื้อความในกรณีระบบคอมพิวเตอร์และระบบปฏิบัติการที่แตกต่างกัน สิ่งนี้เป็นสิ่งทีมีคุณประโยชน์อย่ามากจากที่ปัจจุบันนี้ ระบบคอมพิวเตอร์หลากหลายชนิดได้ถือกำเนินขึ้นมาเพื่อใช้งาน รวมถึงระบบปฏิบัติการ (Operation System) ก็ยังมีความแตกต่างกันออกไปด้วย ทำให้ปัญหาในการแสดงผล และการทำความเข้าในเนื้อความเกิดขึ้นมา XML พยายามลดข้อจำกัดของความแตกต่างทางด้านระบบคอมพิวเตอร์ เพื่อสร้างเป็นภาษาที่ใช้กำหนดโครงสร้างของเอกสาร ให้สามารถเข้าใจกันได้ในทุกๆระบบ XML คือภาษาที่มีลักษณะเมตะ (Meta) ซึ่งเมตะ หมายถึงลักษณะการรวบรวมข้อมูลที่นำมาจากแหล่งข้อมูลข่าวสารอื่นๆ ตัวอย่างของข้อมูลลักษณะเมตะคือบทอ้างอิงในหนังสือ ซึ่งบทอ้างอิงสามารถบอกผู้อ่านได้ว่า ข้อมูลในบทอ้างอิงที่ผู้อ่านต้องการอยู่ที่ส่วนไหนหน้าที่เท่าไรของหนังสือบาง (ลองพลิกไปบทอ้างอิงของหนังสือเล่มนี้ดูเป็นตัวอย่าง) ซึ่งเมื่อได้ตัวเลขหน้าที่แล้วสามารถพลิกหนังสือไปยังหน้าดังกล่าวก็จะพบข้อมูลตามต้องการ สำหรับบทอ้างอิงนี้ก็เกิดจากการรวบรวมขึ้นมาจากข้อมูลในแต่ละส่วนขึ้นมานั่นเอง และหากท่านผู้อ่านอยากจะเขียนหนังสือขึ้นมาสักหนึ่งเล่มก็สามารถทำได้ไม่ยาก โดยเพียงท่านทำการรวบรวมเนื้อหาที่จะนำเสนอในหนังสือ และในมาจัดโครงสร้างที่กำหนดขึ้นด้วย XML เนื้อความดังกล่าวก็จะถูกจัดรูปแบบเป็นหนังสือให้ตามต้องการ ข้อแนะนำ XML ไม่ได้เป็นภาษาซึ่งจะทำให้ได้ทั้งโครงสร้างและเนื้อหาของหนังสือทั้งหมดตามต้องการ แต่ XML ถูกใช้เพื่อนำไปใช้สร้างโครงสร้างเอกสารของเนื้อหาภายในต่างหาก ดังนั้นโครงสร้างและข้อกำหนดต่างๆของเอกสารขึ้นอยู่กับการตัดสินใจของผู้สร้างเอง ทำให้ผู้สร้างสามารถกำหนดภาษาของตัวเองขึ้นมาใช้สร้างหนังสือของตัวเองได้ ไม่ว่าจะให้หนังสือมีรูปแบบเป็นอย่างไร 3.4 สร้างสรรค์ภาษาส่วนตัวด้วย XML จากคำกล่าวที่ว่าภาษา XML สามารถนำไปใช้สร้างภาษาใหม่ขึ้นมา ตามข้อกำหนดและความคิดอิสระของผู้ใช้งาน แต่หลายคนอาจจะตั้งคำถามขึ้นมาว่า ในเมื่อแต่ละคนสามารถสร้างภาษาขึ้นมาใหม่ได้ จะทำให้ภาษามีมากมายจนล้นไปหรือเปล่า แล้วหากเราสร้างภาษาขึ้นมาแล้วผู้ใดจะนำภาษาที่เราสร้างขึ้นมาหากไม่ใช้ตัวของเราเอง
ลองมองย้อนกลับออกไป เมื่อกลุ่มคนกลุ่มหนึ่งที่มีความสนใจในเรื่องเดียวกันมักจะทราบรายละเอียดโครงสร้างหรือรูปแบบในทางเดียวกัน หากมีใครในกลุ่มพยายามสร้างรูปแบบภาษาที่สามารถใช้งานร่วมกันได้ ดังนั้นรูปแบบภาษาดังกล่าวจึงใช้สื่อสารกันภายในระหว่างกลุ่ม เพื่อแลกเปลี่ยนข้อมูลกัน ดังนั้นเมื่อมีสักคนคิดค้นภาษาขึ้นมา คนอื่นๆภายในกลุ่มก็จะนำเอาข้อมูลที่ตนเองมีมาใช้กับภาษาดังกล่าว ก็จะได้เอกสารที่เข้าใจกันได้ภายในกลุ่ม และแน่นอนว่าหากกลุ่มเป็นกลุ่มขนาดใหญ่ เช่น กลุ่มการค้า กลุ่มการศึกษา ภาษาที่ถูกสร้างขึ้นมาก็สามารถนำเป็นมาตรฐานในการแลกเปลี่ยนข้อมูลระหว่างกลุ่มกันได้ ตัวอย่างต่อไปนี้ เป็นภาษาที่สร้างขึ้นมาจากกลุ่มที่มีการสื่อสารกัน - ภาษาทางเคมี (Chemical Markup Language) ตัวอย่างหนึ่งที่เห็นได้ชัด คือกลุ่มของนักเคมี ได้รวมตัวกันเพื่อสร้างภาษาพื้นฐาน สำหรับนำข้อมูลทางเคมีไปแสดง และแลกเปลี่ยนเอกสารกัน ซึ่งสัญลักษณ์ทางเคมี เป็นสัญลักษณ์ที่มีรูปแบบในการแสดงผลที่สลับซับซ้อน ดังนั้นภาษาทางเคมีที่สร้างด้วย XML ก็จะสามารถนำไปช่วยในการนำพาข้อมูล หรือสูตรทางเคมีเพื่อสร้างเป็นเอกสารและใช้งานกันภายในกลุ่มที่เข้าใจภาษาทางเคมีนั่นเอง (ดูรายละเอียดได้ ที่นี่) - ภาษาทางคณิตศาสตร์ (MathML) ในทำนองเดียวกัน กลุ่มของนักคณิตศาสตร์ ก็มีภาษาสำหรับการแลกเปลี่ยนข้อมูลทางคณิตศาสตร์ ภายในกลุ่มเอง เรียกว่า MathML (ดูรายละเอียดได้ ที่นี่) ดังนั้นภาษา XML จึงถูกใช้ในการสร้างภาษาเฉพาะกิจ เพื่อใช้ถ่ายเทข้อมูลหรือแลกเปลี่ยนกันระหว่างคอมพิวเตอร์ที่ใช้รูปแบบโครงสร้างเดียวกัน และโปรแกรมเร็นเดอร์ข้อมูลถูกใช้ในการอ่านเนื้อความดังกล่ามาแสดงผลให้เข้าใจความหมายโดยผู้เรียกดูเอกสาร 3.5 การใช้งานภาษา XML ลองพิจารณาตัวอย่างเอกสารที่สร้างขึ้นมาจากภาษา XML ดังต่อไปนี้ <book> <chap> Text for Chapter 1 </chap> <chap> Text for Chapter 2 </chap> </book> จากตัวอย่างที่แสดงด้านบนเป็นการกำหนดโครงสร้างของเอกสารด้วยภาษา XML ส่วนของเอกสารที่ถูกเรียกว่าอิลิเม็นต์ (Element) คือกลุ่มข้อความที่อยู่ระหว่างสัญลักษณ์ <...> จนถึง </...> ดังนั้นจากตัวอย่างประกอบด้วยสามอิลิเม็นต์ <BOOL>…</BOOK>, <CHAP>…</CHAP> และ <CHAP>…</CHAP> โดยในแต่ละอิลิเม็นต์ถือว่าเป็นส่วนย่อยของตัวเอกสาร ซึ่งตัวอย่างดังกล่าวมีอิลิเม็นต์ซ้ำกันสองอิลิเม็นต์คือ CHAP เพื่อให้แต่ละอิลิเม็นต์มีความแตกต่างกันจึงมีการแทรกส่วนที่เรียกว่า แอตทริบิวต์ (Attribute) ลองพิจารณาตัวอย่างต่อไปนี้
<book> <chap number="1"> Text for Chapter 1 </chap> <chap number="2"> Text for Chapter 2 </chap> </book> จากตัวอย่างข้อความ Number ที่อยู่ส่วนแรกของอิลิเม็นต์เป็นส่วนที่เรียกว่าแอตทริบิวต์ ส่วนนี้ใช้ขยายความอิลิเม็นต์ถึงรายละเอียดปลีกย่อยภายใน โดยมีข้อมูล (อาจเป็นตัวเลขหรือข้อความ) อยู่ภายในเครื่องหมายคำพูด ดังนั้นเนื้อความในตัวอย่างจึงมีอิลิเม็นต์บทที่แยกเป็นบทที่ 1 และบทที่ 2 ด้วยข้อมูลในส่วนแอตทริบิวต์ - แท็กคำสั่ง (tag) เฉกเช่นเดียวกับเอกสารที่สร้างจากภาษา HTML ที่มีการใช้แท็กเพื่อกำหนดลักษณะในการแสดงผล ภาษา XML ก็เช่นเดียวกันมีแท็กคำสั่งเหมือนกันเพียงแต่แท็กคำสั่งดังกล่าวถูกใช้งานเพื่อบ่งบอกอิลิเม็นต์ หรือให้เข้าใจง่ายๆคือใช้บ่งบอกลักษณะโครงสร้างของเอกสารนั่นเอง โดยรูปแบบการสร้างแท็กมีคล้ายกับ HTML โดยคำสั่งถูกบรรจุอยู่ภายในสัญลักษณ์ < และ > เช่น <book>, </CHAP> เป็นต้น - แท็กเปิด (Start tag) เป็นแท็กที่ใช้กำหนดส่วนเริ่มต้นของอิลิเม็นต์ ใช้วางก่อนหน้าเนื้อความในแต่ละส่วน โดยต้องอยู่ภายในสัญลักษณ์ < และ > เท่านั้น เช่น <book>, <CHAP> แท็กเปิดสามารถแทรกรายละเอียดที่สามารถชี้ให้เห็นรูปแบบย่อยที่เรียกว่าแอตทริบิวต์อยู่ภายใน โดยชื่อแอตทริบิวต์วางอยู่ในสัญลักษณ์แท็กเปิด แต่ต้องอยู่ด้านหลังคำสั่งแท็ก ดังนี้ <TAG_NAME Attribute_1="Data_1" Attribute_2="Data_2"…> จากรูปแบบตัวอย่างด้านบนแสดงให้เห็นการวางส่วนแอตทริบิวต์ลงในแท็กเปิด แท็กเปิดสามารถมีแอตทริบิวต์มากกว่าหนึ่งตัว ขึ้นอยู่กับความต้องการของผู้สร้าง - แท็กปิด (End Tag) เป็นเท็กที่ใช้กำหนดส่วนสิ้นสุดอิลิม็นต์ ใช้วางหลังเนื้อความในแต่ละส่วนโดยต้องอยู่ภายในสัญลักษณ์ </ และ > เท่านั้น เช่น </book>, </CHAP> - เนื้อความ (Content) คือส่วนข้อตัวอักษรที่ประกอบกันขึ้นเป็นเนื้อหาข้อมูลที่ใช้ในการสื่อสาร เนื้อความคือส่วนที่จะถูกมองเห็นจากผู้อ่านเอกสาร ซึ่งต่างจากแท็กต่างๆจะถูกสร้างโดยผู้สร้างเอกสาร และตีความหมายโดยโปรแกรมอ่านเอกสารเท่านั้น โดยผู้อ่านเอกสารไม่ต้องทำความเข้าใจว่าแท็กแต่ละส่วนมีความหมายอย่างไร ดังนั้นส่วนเนื้อความคือส่วนที่อยู่ระหว่างแท็กเปิดและแท็กปิดนั่นเอง ข้อแนะนำ อิลิเม็นต์เริ่มนับตั้งแต่แท็กเปิดจนถึงแท็กปิดในคำสั่งเดียวกันนั่นเอง แต่เนื้อความอยู่หลักแท็กเปิดและสั้นสุดที่ก่อนแท็กเปิด 3.6 รูปแบบที่ถูกต้องหรือที่เรียกว่า well-formed คือรูปแบบที่ถือว่าเหมาะสมกับการนำมาจัดสร้างเอกสารที่มีโครงสร้างที่ดี สำหรับเอกสารที่สร้างจากภาษา HTML ถือได้ว่าเป็นเอกสารที่ไม่ได้สร้างจากรูปแบบที่ถูกต้องเนื่องจาก แท็กคำสั่ง HTML บางแท็กมีเฉพาะแท็กเปิด โดยไม่จำเป็นต้องมีแท็กปิด เช่น แท็ก <IMAGE …> หรือ <BR> ดังนั้น
ซึ่งข้อกำหนดของรูปแบบที่ถูกต้อง มีดังต่อไปนี้ - ต้องมีอิลิเม็นต์ที่สมบูรณ์ อิลิเม็นต์ที่สมบูรณ์ก็คือต้องเริ่มต้นด้วยแท็กเปิด และต้องปิดท้ายด้วยแท็กปิดในคำสั่งเดียวกันเสมอ เช่น <...> ....... </...> ยกเว้นอิลิเม็นต์ประเภที่เรียกว่า “อิลเม็นต์ว่าง” - ค่าแอตทริบิวต์ต้องบรรจุอยู่ภายในสัญลักษณ์ ' (Single Quote) หรือ " (Double Quote) เสมอ - อิลิเม็นต์ว่าง (Empty Element) หากมีการกำหนดเพื่อใช้งานอิลิเม็นต์ว่าง ต้องสร้างให้ถูกต้องตามหลักการคือ อลิเม็นต์ว่างต้องมีรูปแบบใดรูปแบบหนึ่งดังนี้ รูปแบบที่ 1 อิลิเม็นต์ที่มีแท็กเปิดและแท็กปิด โดยที่ไม่มีข้อความอยู่ระหว่างแท็ก <…></…>เช่น <book></book> รูปแบบที่ 2 อิลิเมนต์ที่มีแท็กคำสั่งและภายในแท็กปิดท้ายด้วยสัญลักษณ์ / คือ <…/> เช่น <book/> อิลิเม็นต์ว่างสามารถบรรจุแอตทริบิวต์ได้ เหมือนอิลิเม็นต์ทั่วไป เช่น <book author="baldwin" price="$9.95" /> - ต้องไม่มีตัวอักษรที่ใช้งานในแท็ก เช่น ตัวอักษร < และ > ถูกใช้เป็นส่วนประกอบของแท็ก หรือตัวอักษร & ซึ่งถูกใช้สำหรับแสดงสัญลักษณ์พิเศษ หากมีความจำเป็นต้องการใช้งาน ให้ใช้ &lt; สำหรับแสดงตัวอักษร < &amp; สำหรับแสดงตัวอักษร & - อิลิเม็นต์ต้องซ้อนกันอย่างมีรูปแบบ หากมีการสร้างเอกสาร XML ที่มีการวางซ้อนกันของอิลิเม็นต์ในหลายๆชั้น การวางซ้อนกันต้องมีรูปแบบเป็นลำดับชั้น ห้ามวางอิลิเม็นต์ในลักษณะที่ชั้นไขว้กัน เช่น <book> <chapter number="1"> <paragraph> </paragraph> </chapter> </book> ตัวอย่างด้านบนเป็นเอกสารที่อิลิเม็นต์วางซ้อนกันอย่างถูกต้อง <book> <book>
<chapter number="1"> <paragraph> </chapter> </paragraph> </book> ตัวอย่างด้านบนเป็นเอกสารที่วางซ้อนอิลิเม็นต์อย่างไม่ถูกต้อง เอกสารที่ถูกกำหนดตามรูปแบบที่ถูกต้อง ถูกเรียกว่าเอกสารที่มีโครงสร้างที่ดีหรือ Well-defined ดังนั้น XML จึงเป็นรูปแบบที่ใช้สร้างเอกสารในแบบ Well-Defined การที่จำเป็นต้องสร้างเอกสารที่มีลักษณะถูกหลักเนื่องจากเพื่อให้ขบวนการเร็นเดอร์สามารถทำงานได้อย่างถูกต้อง และสมบูรณ์ หากเอกสารมีโครงสร้างที่ไม่ถูกต้องแล้ว นั่นเป็นที่มาของเอกสารที่ไม่ดีซึ่งผลลัพธ์ที่ได้จะไม่ถูกต้องตามความต้องการของผู้สร้างด้วย ข้อแนะนำ เนื้อข้อมูลคือส่วนของข่าวสาร แท็ก แอตทริบิวต์ และเนื้อข้อมูลคือส่วนประกอบของอิลิเม็นต์ แอตทริบิวต์คือส่วนขยายของแท็กให้กับเนื้อข้อมูลภายใน 3.7 การใช้งานแอตทริบิวต์ จากที่กล่าวให้ทราบแล้วว่าแอนทริบิวต์คือส่วนที่อยู่ภายในแท็กเปิด (แท็กบางแท็กไม่จำเป็นต้องมีแอตทริบิวต์) และสามารถมีแอตทริบิวต์ได้มากกว่าหนึ่งส่วน โดยแอตทริบิวต์จะมาช่วยให้ความหมายเพิ่มเติมจากคำสั่งแท็ก เช่นหากพูดถึงสิ่งของเฉยๆ ผู้ฟังจะไม่สามารถรู้ได้เลยว่าเรากำลังกล่าวถึงสิ่งของประเภทไหน และถ้าหากเรากล่าวว่าสิ่งของที่เรียกว่าปากกา หรือสิ่งของที่เรียกว่าดินสอ ผู้ฟังก็สามารถรู้ได้ทันทีว่าผู้พูดกำลังกล่าวถึงสิ่งของใด บางท่านอาจคิดไปว่าแล้วทำไมไม่พูดถึงดินสอ หรือปากกาไปเลยละ ซึ่งหากสิ่งของนั้นเป็นสินค้าที่เราทำการจำหน่าย เป็นไปไม่ได้ที่เราจะเก็บข้อมูลเฉพาะดินสอ และเก็บข้อมูลเฉพาะปากกา เท่านั้นเราสามารถนำมารวมกันโดยใช้ส่วนแอตทริบิวต์แยกให้เห็นว่าสินค้าที่จัดเก็บไว้คืออะไร กรณีแอตทริบิวต์ที่มีมากกว่าหนึ่งส่วน ตัวอย่างเช่นหากกำลังพูดถึงส้ม และให้แอตทริบิวต์ของชนิดส้ม รสชาติของส้มแล้วก็สามารถชี้ให้เห็นถึงส้มหลายรูปแบบ เช่น ส้นโอรสเปรียว ส้มเขียวหวานรสหวาน ส้มสายน้ำผึ้งรสหวานหอม เป็นต้น เมื่อพูดถึงลักษณะของมนุษย์ มนุษย์ก็มีแอตทริบิวต์เหมือนกัน ผู้อ่านลองหลับตานึกดูซิว่าตัวท่านมีแอตทริบิวต์อะไรได้บาง ก่อนจะอ่านต่อไป ตัวอย่างของแอตทริบิวต์ของมนุษย์มีดังนี้ name="Joe" height="84" weight="176" complexion="pale" sex="male" training="Java programmer" degree="Masters"
อาจมีการตั้งคำถามว่าควรมีแอตทริบิวต์จำนวนเท่าไรดี จำนวนแอตทริบิวต์ขึ้นอยู่กับการนำไปใช้งาน ซึ่งผู้สร้างจำเป็นต้องกำหนดว่าเนื้อความเอกสารควรจะมีการใช้งานอะไรบ้าง และก็ไม่จำเป็นต้องมีแอตทริบิวต์ที่เหมือนกันในอิลิเม็นต์เดียวกันหากมีการใช้งานที่แตกต่างกันออกไป ลองเปรียบเทียบกับแอตทริบิวต์ของมนุษย์ ที่มีการใช้งานที่ไม่เหมือนกัน - แอตทริบิวต์ของนักกีฬาบาสเก็ตบอลชาย หากท่านกำลังรวบรวม รายชื่อนักกีฬาบาสเก็ตบอล สำหรับแข่งขันในกีฬาประเภททีมชายแล้ว แอททริบิวต์ที่บ่งบอกถึงเพศ จำเป็นอย่างยิ่ง สำหรับการพิจารณา รวมถึงน้ำหนัง และส่วนสูงที่ต้องการด้วย - แอททริบิวต์ของโปรแกรมเมอร์ ในทางตรงกันข้ามกันหากกำลังพิจารณาถึงบุคคลที่จะมาเป็นโปรแกรมเมอร์ แอททริบิวต์ที่เกี่ยวกัน น้ำหนัก ส่วนสูง ก็ไม่เป็นสิ่งที่จำเป็น แต่สิ่งที่สำคัญกลับเป็นแอททริบิวต์ของการอบรม (Training) และการศึกษา (Degree) รวมถึงความถนัด (Skill) แทน 3.8 โปรแกรมควบคุมการเร็นเดอร์ คงจะจำกันได้ว่าขบวนการเร็นเดอร์คือการแปลงเอกสาร XML ให้เป็นลักษณะ รูปแบบ หรือมุมมองที่เหมาะสมกับผู้อ่านเอกสารที่ควรจะได้เห็นเนื้อความที่บรรจุอยู่ภายในเอกสารที่ควบคุมด้วยภาษา XML และเอกสารหนึ่งเอกสารก็สามารถถูกแปลงเป็นเอกสารได้ในหลากหลายมุมมอง เช่น มุมมองสำหรับผู้อ่านทีเรียกดูผ่านจอมอนิเตอร์ มุมมองสำหรับงานพิมพ์ โดยที่มุมมองต่างๆยังคงบรรจุเนื้อความทั้งหมดอย่างครบถ้วนสมบูรณ์ จากโครงสร้างเอกสารที่ควบคุมด้วย XML หากนำมาผ่านขบวนการเร็นเดอร์ ผลลัพธ์ที่ได้คือเอกสารที่ถูกใช้งานจริงๆ ดังนั้นหากมองย้อนกลับไปที่แอตทริบิวต์ของเอกสาร แอตทริบิวต์สามารถถูกโปรแกรมเร็นเดอร์ทำความเข้าใจต่างกันได้เมื่อนำไปแสดงผลในสภาพแวดล้อมที่แตกต่างกัน เช่น ในแต่ละบท (บ่งบอกด้วยแอตทริบิวต์ number จากตัวอย่างก่อนหน้า) เมื่อผ่านโปรแกรมเร็นเดอร์เพื่อพิมพ์ลงบนกระดาษ แต่ละบทจะเริ่มต้นหน้าแรกที่กระดาษด้านซ้ายส่วนบนเสมอ(ลองเปิดหนังสือแล้วเปิดไปที่หน้าแรกของแต่ละบท) ในขณะที่หากเอกสารผ่านโปรแกรมเร็นเดอร์บนจอคอมพิวเตอร์ก็จะให้มุมมองที่ต่อเนื่องกันไป SAX คือตัวอย่างของระบบหนึ่งที่มีความสามารถทางด้านเร็นเดอร์ โดยผู้ใช้สามารถกำหนดกลไกในการเร็นเดอร์ได้ด้วยตนเอง โดยอาศัยการควบคุมผ่านภาษาจาวา ซึ่งทำให้ผู้สร้างสามารถนำเอาเอกสาร XML ที่ถูกจัดโครงสร้างด้วยอิลิเม็นต์ต่างๆไปดำเนินการแสดงตามรูปแบบเฉพาะของตัวเองได้ สำหรับผู้เริ่มต้นศึกษาในเรื่องของการเขียนโปรแกรม การสร้างกลไกเร็นเดอร์ขึ้นมาใช้งานเอง อาจจะดูค่อนข้างยุ่งยาก แต่ถ้าทำความคุ้นเคยกับรูปแบบการทำงานและการจัดการได้อย่างดีแล้ว จะทำให้ผู้สร้างสามารถพัฒนาระบบเร็นเดอร์ขึ้นมาใช้เองตามคุณสมบัติเฉพาะด้านได้ ข้อแนะนำ บราวเซอร์ IE5.0 และ Netscape 6.0 คือตัวอย่างของโปรแกรมที่มีความสามารถเรนเดอร์เอกสาร XML ได้นอกเหนือจากความสามารถทางด้านเว็บ 3.9 ส่วนสนับสนุน XML ในการใช้งาน XML บางครั้งของการสร้างอาจมีความยุ่งยากอยู่พอสมควร ซึ่งในงานบางงานมีความจำเป็นต้องใช้รูปแบบอื่นๆเพื่อสนับสนุนการำใช้งาน XML เพื่อให้มีประสิทธิภาพและเป็นมาตรฐานยิ่งขึ้น ต่อไปนี้คือรูปแบบสนับสนุนร่วมกับการใช้งาน XML XSL (eXtensible Stylesheet Language)
XSL คือรูปแบบของภาษาหนึ่งที่ถูกใช้เพื่อแปลงแปลงเอกสาร XML ให้อยู่ในรูปแบบของเอกสาร HTML เรียกง่ายๆว่าแปลง XML เป็น HTML นั่นเอง ซึ่งถือได้ว่าเป็นการเร็นเดอร์ในเบื้องต้น ที่เกี่ยวกับการแปลงเอกสารก่อนที่จะผ่านขบวนการเร็นเดอร์เพื่อการมองเห็นในขั้นสุดท้าย ดังนั้นเพื่อไม่ให้เกิดความสับสนในการทำความเข้าใจ จึงขออธิบายขั้นตอนของการทำงานทั้งหมดของเอกสาร XML ซึ่งมีลำดับดังนี้ ขั้นตอนที่ 1 แยกข้อมูล (เนื้อข้อมูล) ให้มีโครงสร้างด้วย XML ขั้นตอนที่ 2 แปลงเอกสาร XML ในข้อ 1 โดยอาศัยข้อกำหนดในอิลิเม็นต์ให้เป็นเป็นเอกสาร HTMLด้วย XSL ขั้นตอนนี้อาจมีการเสริมด้วย CSS ในบางช่วง (CSS อาจไม่จำเป็นในการใช้งาน) ขั้นตอนที่ 3 แสดงเอกสารด้วยโปรแกรมที่เข้าใจเอกสาร HTML หรือขั้นตอนการเร็นเดอร์ เช่น บราวเซอร์ ทั้งหมดถือเป็นขั้นตอนหลักๆที่พอจะทำให้พอเห็นภาพการทำงานและการใช้งาน XML ได้โดยง่าย XSL คือภาษาที่มีความซับซ้อนอยู่พอควร เนื่องจากในตัวภาษาจะมีรูปแบบการทำงานที่คล้ายคลึงกับภาษาคอมพิวเตอร์ ดังนั้นการสร้างเอกสาร XSL อาจทำให้เกิดข้อผิดพลาดขึ้นได้เหมือนกับการเขียนโปรแกรมด้วยภาษาคอมพิวเตอร์ทั่วไป ซึ่งการแก้ไขข้อผิดพลาดคือการใช้โปรแกรมที่มีความสามารถในการตรวจสอบที่เรียกว่า “ดีบักเกอร์ (Debugger)” เช่นกัน XSL ก็มีดีบักเกอร์ด้วยเหมือนกันซึ่งเรามักจะเรียกว่า XSL Debugger DTD (Document Type Definition) DTD คือข้อมูลที่ใช้กำหนดกฎเกณฑ์เอกสารที่บรรจุอยู่ในไฟล์หนึ่งไฟล์ (หรือหลายไฟล์หากเป็นการใช้งานร่วมกัน) ข้อกำหนดกฎเกณฑ์ของเอกสาร ใช้สำหรับกำหนดวิธีการใช้งานอิลิเม็นต์ที่ถูกต้อง เพื่อให้ผู้สร้างเอกสาร XML สามารถใช้อิลิเมต์ตามข้อกำหนดที่ระบุไว้ในเอกสาร DTD เช่น <!ELEMENT ITEM (#pcdata)> <!ELEMENT LIST (ITEM)+> จากตัวอย่างด้านบนเป็นตัวอย่างที่แสดงหลักและวิธีการใช้งานอิลิเม็นต์สองตัวคือ <LIST> และ <ITEM> โดยในบรรทัดแรกเป็นกฎเกณฑ์ที่บอกถึงว่าอิลิเม็นต์ ใช้แท็ก <ITEM> ในการควบคุมข้อมูล (เมื่อ #pcdata หมายถึงเนื้อข้อมูล) และในบรรทัดที่สองใช้กำหนดว่าอิลิเม็นต์ที่ใช้แท็ก <ITEM>ต้องอยู่ภายในอิลิเม็นต์ที่ใช้แท็ก <LIST> เอกสาร DTD เป็นไฟล์ข้อมูลที่บรรจุกฎเกณฑ์ต่างๆในการควบคุมการใช้อิลิเม็นต์อย่างถูกต้อง หรือเรียกว่าเป็นข้อกำหนดมาตรฐานนั่นเอง การใช้งาน DTD ควบคุมเอกสารนี้นอกจากจะมีประโยชน์ในการทำให้เอกสาร XML มีรูปแบบที่มีความเป็นมาตรฐานและเข้าใจได้จากผู้ที่รู้จัก DTD ของเอกสาร XML แล้วระบบการเร็นเดอร์ยังสามารถทำความเข้าใจกับตัวเอกสารได้ดีและสามารถใช้งานได้อย่างถูกต้องอีกด้วย เมื่อผู้อ่านอ่านมาถึงตรงนี้อาจจะรู้สึกว่าเอกสาร XML มีความยุ่งยากอยู่พอสมควรเพราะผู้สร้างต้องทำความเข้าใจกับ DTD, XML, XSL, HTML และ CSS และรู้สึกว่าการสร้าง DTD คงเป็นเรื่องที่ยุ่งยากเลยทีเดียว แต่อย่างพึงกังวลมากครับซึ่งมีข้อควรรู้เกี่ยวกับ DTD ก็คือมีกลุ่มหลายกลุ่มที่กำหนดมาตรฐานสำหรับการสื่อสารข้อมูลด้วย XML ได้พยายามสร้างเอกสาร DTD ไว้ให้ใช้งานอยู่แล้ว ดังนั้นผู้สร้างอาจจะหันไปให้ความสนใจกับ DTD ที่ถูกสร้างขึ้นมาเป็นมาตรฐานแทนที่จะลงมือสร้างด้วยตนเอง ข้อแนะนำ รายละเอียดของเอกสาร DTD ที่เป็นมาตรฐาน ศึกษาข้อมูลเพิ่มเติมได้ที่ http://www.XML.com
3.10 สรุปการใช้งานเอกสาร XML เอกสาร หน้าที่ เนื้อข้อมูล คือเนื้อข้อมูลที่แสดงต่อผู้ใช้ (ตัวอักษร, รูปภาพ หรือข้อมูลมัลติมีเดีย) DTD กำหนดกฎเกณฑ์การใช้งานอิลิเม็นต์ให้เป็นมาตรฐาน XML กำหนดโครงสร้างของเอกสาร XSL แปลงเอกสาร XML ให้เป็น HTML CSS ใช้ร่วมกับ HTML เพื่อกำหนดรูปแบบพิเศษในการแสดงผลลัพธ์ HTML เอกสารที่ถูกเร็นเดอร์เพื่อแสดงผลลัพธ์ขั้นสุดท้าย ระบบเร็นเดอร์ ขบวนการตีความหมายของเอกสาร HTML (อาจมี CSS ประกอบอยู่) เพื่อแสดงผลยังอุปกรณ์ที่ผู้เรียกดูใช้งาน ตารางการใช้งานเอกสารและสิ่งที่เกี่ยวข้องกับ XML 3.11 ประโยชน์ของการใช้เอกสาร XML การนำเอาหลักการของ XML มาใช้กับเอกสารเพื่อให้มีโครงสร้างเกิดขึ้น สามารถนำมาซึ่งประโยชน์อย่างมากมายในอนาคต ซึ่งพอสรุปได้ดังนี้ - เอกสารที่สอดคล้องกับอนาคต โดยมีการคาดกันว่าในอนาคตบริษัทยักษ์ใหญ่ต่างๆด้านไอที และคอมพิวเตอร์ทั้งซอฟต์แวร์หรือฮาร์ดแวร์ก็ตาม ได้หันมาร่วมมือกันพัฒนาโครงสร้างเอกสาร และระบบการเร็นเดอร์และทำเป็นแผนการดำเนินการไว้ ทำให้รูปแบบและโครงสร้างของเอกสารมีความเป็นมาตรฐาน - เอกสารในระบบพาณิชย์อิเล็กทรอนิกส์ (E-commerce) มีการตั้งกลุ่มขึ้นมาเพื่อร่วมกันกำหนดมาตรฐานโครงสร้างข้อมูล ที่เหมาะสมกับการทำธุระกรรมทางการค้า - ผู้ค้าและผู้ซื้อมีความเป็นอิสระ ผู้พัฒนาเทคโนโลยีจะมีความอิสระในการเพิ่มศักยภาพในผลิตภัณฑ์ของตัวเอง ไม่จำเป็นต้องมากังวลรูปแบบการสื่อสาร ที่จะต้องออกแบบมาเฉพาะ ทำให้ลูกค้าต้องยึดติดกับผลิตภัณฑ์รายใดรายหนึ่ง เมื่อข้อมูลอยู่ในเอกสาร XML แล้ว ผลิตภัณฑ์ต่างๆ ก็จะมีรูปแบบข้อมูลที่สามารถแลกเปลี่ยนกันได้ โดยที่ไม่ต้องไปพะวงกับเทคโนโลยี ที่ไม่สอดคล้องกันในปัจจุบันได้ - ลดค่าใช้จ่าย ผลที่ตามมากับเทคโนโลยีที่สามารถแลกเปลี่ยนข้อมูลซึ่งกันและกันได้ ทำให้ค่าใช้จ่ายที่จะต้องสูญเสียไป ในปัจจุบัน สำหรับการสื่อสารข้อมูลที่มีรูปแบบที่หลากหลายถูกขจัดออกไป นั้นเป็นผลดีสำหรับยุคการสื่อสารด้วย XML ที่ลดทอนค่าใช้จ่ายลงไปอย่างมาก ในบทนี้มีเนื้อหารายละเอียดการใช้งานของเอกสารที่บรรจุไว้บนเว็บเซิร์ฟเวอร์ ที่สามารถจัดการและปรับแต่งเอกสารเพื่อให้ส่งให้กับเว็บบราวเซอร์ในการนำเสนอต่อผู้ใช้ ซึ่งเอกสารต่างๆนี้เป็นสามารถสร้างได้จากเซิร์ฟเล็ตหรือ JSP ดังนั้นเมื่อผู้อ่านได้รู้จักกับเอกสารแบบต่างๆแล้ว ในขั้นตอนต่อไปจะเริ่มเข้าสู่เนื้อหาของการพัฒนามากยิ่งขึ้น โดยเริ่มต้นด้วยการเตรียมสภาพแวดล้อมในการทำงานก่อน นั้นคือการจัดเตรียมและการติดตั้งโปรแกรมต่างๆที่จำเป็นในการใช้พัฒนาระบบ ทั้งตัวคอมไพล์เลอร์และโปรแกรมสนับสนุนอื่นๆ

More Related Content

PDF
Ch10
byburin rujjanapan
 
PDF
Yuu
bysirinet
 
PDF
Ten
bysirinet
 
PDF
New
bysirinet
 
PDF
Website
byตัวอย่างที่ดี มีค่ากว่าคำสอน
 
PDF
ดรีม
bysirinet
 
PDF
หมวย
bysirinet
 
PDF
หวิว
byViewMik
 
Ch10
byburin rujjanapan
 
Yuu
bysirinet
 
Ten
bysirinet
 
New
bysirinet
 
Website
byตัวอย่างที่ดี มีค่ากว่าคำสอน
 
ดรีม
bysirinet
 
หมวย
bysirinet
 
หวิว
byViewMik
 

What's hot

PDF
โบ
bysirinet
 
PDF
รออกแบบเว็บไซต์
bysirinet
 
PDF
นุ๊ก
bysirinet
 
PDF
Best
bysirinet
 
PDF
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
bySamorn Tara
 
PDF
Manual
byBridge Chapter
 
PDF
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
bySamorn Tara
 
PPTX
E book2
bysisiopp
 
PDF
แบบร่างโครงงาน112
byKot สุรศักดิ์
 
PDF
Javacentrix com chap06-0
byTheeravaj Tum
 
PDF
งาน
byคนหมดใจ รั้งให้ตายก็ไปอยู่ดี
 
PDF
คู่มือ Power point
bykeeree samerpark
 
PDF
Pbru blog site_manual
byปอ อา มอ
 
PDF
การใช้งานWordPress
bySamorn Tara
 
PDF
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
bySupaporn Pakdeemee
 
โบ
bysirinet
 
รออกแบบเว็บไซต์
bysirinet
 
นุ๊ก
bysirinet
 
Best
bysirinet
 
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
bySamorn Tara
 
Manual
byBridge Chapter
 
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
bySamorn Tara
 
E book2
bysisiopp
 
แบบร่างโครงงาน112
byKot สุรศักดิ์
 
Javacentrix com chap06-0
byTheeravaj Tum
 
งาน
byคนหมดใจ รั้งให้ตายก็ไปอยู่ดี
 
คู่มือ Power point
bykeeree samerpark
 
Pbru blog site_manual
byปอ อา มอ
 
การใช้งานWordPress
bySamorn Tara
 
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
bySupaporn Pakdeemee
 

Similar to Javacentrix com chap03-0

PDF
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
bySamorn Tara
 
PDF
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
bySamorn Tara
 
PPTX
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
bychiton2535
 
PDF
Lernning 13
byMayuree Janpakwaen
 
PDF
หน่วยการเรียนรู้ที่ 3 html
bydevilp Nnop
 
PPT
การสอนเขียนHtml
bychukiat008
 
PDF
เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL
byPhranakornsoft
 
PDF
เขียนเว็บไซต์ด้วย Html 5
bySamart Phetdee
 
PDF
เนื้อหา Html
byRungnapha Naka
 
PPT
HTML
byNapoleon Napoleonp
 
PPTX
Hyper text markup language
byungpao
 
PDF
Html
byคุณครู ดอทคอม
 
PPTX
Html
byKanyarat Somkate
 
PPT
Cai html
bychukiat008
 
PDF
Webpage by html
byTay Chaloeykrai
 
PDF
ใบความรู้ที่ 2
byPOmp POmpomp
 
PDF
ภาษาในการพัฒนาเว็บไซต์
byNichakorn Sengsui
 
PPTX
การสร้างเว็บเพจด้วยภาษา(Html
byBeerza Kub
 
PDF
Pai01
byKrupetch Songkwamjarearn
 
PDF
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
byWithoon Wangsa-Nguankit
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
bySamorn Tara
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
bySamorn Tara
 
บทที่ 3 พื้นฐานภาษาสำหรับพัฒนาเว็บไซต์
bychiton2535
 
Lernning 13
byMayuree Janpakwaen
 
หน่วยการเรียนรู้ที่ 3 html
bydevilp Nnop
 
การสอนเขียนHtml
bychukiat008
 
เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL
byPhranakornsoft
 
เขียนเว็บไซต์ด้วย Html 5
bySamart Phetdee
 
เนื้อหา Html
byRungnapha Naka
 
HTML
byNapoleon Napoleonp
 
Hyper text markup language
byungpao
 
Html
byคุณครู ดอทคอม
 
Html
byKanyarat Somkate
 
Cai html
bychukiat008
 
Webpage by html
byTay Chaloeykrai
 
ใบความรู้ที่ 2
byPOmp POmpomp
 
ภาษาในการพัฒนาเว็บไซต์
byNichakorn Sengsui
 
การสร้างเว็บเพจด้วยภาษา(Html
byBeerza Kub
 
Pai01
byKrupetch Songkwamjarearn
 
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
byWithoon Wangsa-Nguankit
 

More from Theeravaj Tum

PDF
Javacentrix com chap11-2
byTheeravaj Tum
 
PDF
Javacentrix com chap11-1
byTheeravaj Tum
 
PDF
Javacentrix com chap10-0
byTheeravaj Tum
 
PDF
Javacentrix com chap09-0
byTheeravaj Tum
 
PDF
Javacentrix com chap08-0
byTheeravaj Tum
 
PDF
Javacentrix com chap07-0
byTheeravaj Tum
 
PDF
Javacentrix com chap04-0
byTheeravaj Tum
 
PDF
Javacentrix com chap02-0
byTheeravaj Tum
 
PDF
Javacentrix com chap01-0
byTheeravaj Tum
 
PDF
Javacentrix com chap05-0
byTheeravaj Tum
 
PDF
บทที่ 13 การดักจับเ
byTheeravaj Tum
 
PDF
บทที่ 12 กราฟฟิก
byTheeravaj Tum
 
PDF
บทที่ 11 การดักจับข
byTheeravaj Tum
 
PDF
บทที่ 10 ตัวแปรสตริ
byTheeravaj Tum
 
PDF
บทที่ 9 การพ้องรูป
byTheeravaj Tum
 
PDF
บทที่ 8 คุณสมบัติก
byTheeravaj Tum
 
PDF
บทที่ 7 แพ็คเกจ
byTheeravaj Tum
 
PDF
บทที่ 6 อาร์เรย์
byTheeravaj Tum
 
PDF
บทที่ 5 คลาส
byTheeravaj Tum
 
PDF
บทที่ 4 แอทริบิวท์
byTheeravaj Tum
 
Javacentrix com chap11-2
byTheeravaj Tum
 
Javacentrix com chap11-1
byTheeravaj Tum
 
Javacentrix com chap10-0
byTheeravaj Tum
 
Javacentrix com chap09-0
byTheeravaj Tum
 
Javacentrix com chap08-0
byTheeravaj Tum
 
Javacentrix com chap07-0
byTheeravaj Tum
 
Javacentrix com chap04-0
byTheeravaj Tum
 
Javacentrix com chap02-0
byTheeravaj Tum
 
Javacentrix com chap01-0
byTheeravaj Tum
 
Javacentrix com chap05-0
byTheeravaj Tum
 
บทที่ 13 การดักจับเ
byTheeravaj Tum
 
บทที่ 12 กราฟฟิก
byTheeravaj Tum
 
บทที่ 11 การดักจับข
byTheeravaj Tum
 
บทที่ 10 ตัวแปรสตริ
byTheeravaj Tum
 
บทที่ 9 การพ้องรูป
byTheeravaj Tum
 
บทที่ 8 คุณสมบัติก
byTheeravaj Tum
 
บทที่ 7 แพ็คเกจ
byTheeravaj Tum
 
บทที่ 6 อาร์เรย์
byTheeravaj Tum
 
บทที่ 5 คลาส
byTheeravaj Tum
 
บทที่ 4 แอทริบิวท์
byTheeravaj Tum
 

Javacentrix com chap03-0

  • 1.
    บทที่ 3 การสร้างเอกสารบนระบบเว็บด้วยHTML, CSS และ XML หลังจากที่ได้รู้จักกับส่วนประกอบในการทำงานในสภาวะแวดล้อมของระบ บเว็บแล้ว สิ่งจำเป็นอีกสิ่งหนึ่งคือข้อมูลหรือเนื้อข้อมูล ที่รับ- ส่งไปมาระหว่างบราวเซอร์ และเว็บเซิร์ฟเวอร์ว่ามีวิธีและรูปแบบใดในการนำเสนอข้อมูลว่ามีการจัดสร้างใน รูปแบบใด เป็นที่ทราบกันอยู่แล้วว่าข้อมูลที่รับ- ส่งกันนั้นอยู่ในรูปแบบของตัวอักษรผ่านโพรโตคอล HTTP และกลุ่มตัวอักษรเหล่านั้นต้องถูกจัดรูปแบบให้สามารถทำหน้าที่เป็นเอกสารเพื่ อใช้เรียกดูได้ ในระบบเว็บมีภาษาในการจัดรูปแบบการนำเสนอข้อมูลคือ HTML, CSS และภาษาที่ใช้จัดโครงสร้างข้อมูลคือ XML รวมถึงเทคโนโลยีอื่นที่เกี่ยวข้องซึ่งจะทำให้บราวเซอร์เรียกดูข้อมูลอย่างมีประสิท ธิภาพก็เป็นสิ่งที่จำเป็นที่ต้องทำความเข้าใจ เพราะจะทำให้สามารถแสดงข้อมูลให้กับผู้ใช้ได้อย่างมืออาชีพ
  • 2.
    1 HTML (HyperTextMarkup Language) ข้อมูลที่ถือว่าเป็นเนื้อข้อมูลที่ส่งมาจากเซิร์ฟเวอร์ไปสู่บราวเซอร์หากมีการร้องขอจากบราวเซอร์ เนื้อข้อมูลดังกล่าวโดยส่วนใหญ่แล้วจะถูกแทรกคำสั่งหรือแท็กเพื่อควบคุมการแสดงผล โดยบราวเซอร์จะเป็นตัวตรวจสอบแท็กเหล่านั้นเองว่าควรจะแสดงเป็นในรูปแบบใดๆ ข้อแนะนำ เนื้อข้อมูลที่ส่งจากเว็บเซิร์ฟเวอร์สู่บราวเซอร์ไม่จำเป็นเสมอไปที่จะอยู่ในรูปแบบมาตรฐาน HTML อาจจะอยู่ในประเภทรูปภาพ(Image) เสียง(Audio) ภาพเคลื่อนไหว(Video) ตัวอักษร (Text) ปกติ ซึ่งบราวเซอร์จะสามารถตรวจสอบประเภทข้อมูลจากข้อมูลตอบกลับส่วนหัว และรับเนื้อข้อมูลมาแสดงผลหลังจากได้รับข้อมูลเข้ามาจากเว็บเซิร์ฟเวอร์ครบถ้วนแล้ว เพื่อให้เนื้อหาในหนังสือครอบคลุมการพัฒนาระบบทั้งหมดจึงหลีกเหลี่ยงไม่ได้เลยที่จะไม่กล่าวถึงในรายละเอียดของภาษา HTML โดยจะขอกล่าวแบบพอสังเขปโดยมีรายละเอียดดังนี้ HTML ในปัจจุบัน (ขณะเขียนต้นฉบับ) อยู่ในเวอร์ชัน 4.0 โดยมีคุณสมบัติในการปรับแต่งลักษณะการแสดงผลให้แก่ผู้เรียกดูข้อมูล (ผู้ใช้บราวเซอร์) HTML ใช้ในการสร้างเอกสารที่เรียกว่า “เว็บเพจ” ซึ่งเป็นไฟล์ที่มีเนื้อข้อมูลผสมกับแท็กคำสั่ง (Command Tag) และบันทึกไว้ในไฟล์ชื่อใดๆแต่มีนามสกุล htm หรือ html ผู้สร้างเว็บเพจจึงต้องรู้จักกับแท็กที่จำเป็นในการใช้งานก่อนสร้างเว็บเพจ แต่ในปัจจุบันมีเครื่องมือ(ซอฟต์แวร์)ช่วยในการจัดสร้างเว็บเพจอยู่ตามท้องตลาดอยู่มากมาย จนในบางครั้งผู้สร้างไม่จำเป็นต้องรู้จักกับแท็กเลย และลักษณะการสร้างก็เหมือนกับสร้างเอกสารอิเล็กทรอนิกส์ เช่น การสร้างจากโปรแกรมไมโครซอฟต์เวิร์ด ตัวอย่างชื่อซอฟต์แวร์ที่สามารถนำมาช่วยสร้างเว็บเพจ มีรายชื่อดังนี้ - Namo Web Editor - Netscape Composer - Macromedia Dreamweaver - HotDog Web Editor - Microsoft FrontPage ถึงอย่างไรก็ตามในการพัฒนาระบบเว็บด้วยเทคโนโลยี Servlet หรือ JSP ที่จะกล่าวถึงผู้พัฒนาจำเป็นต้องเรียกรู้แท็กคำสั่งคร่าวๆ เพื่อให้เข้าใจในเรื่องการแสดงผลที่ถูกต้องเป็นอันดับแรก ข้อแนะนำ ถึงแม้ว่านักพัฒนาจำเป็นต้องเรียนรู้แท็กคำสั่ง HTML เองก็ตาม เครื่องมือช่วยสร้างเว็บเพจต่างอาจจะไม่ได้ช่วยงานพัฒนาได้โดยตรง แต่ด้วยทางอ้อมนักพัฒนาอาจจะใช้เครื่องมือเหล่านั้นในการสร้างโครงสร้างเอกสารเอาไว้ก่อน แล้วจึงค่อยๆคัดลอกแท็กคำสั่งมาแทรกในบางส่วนของการพัฒนาโปรแกรมได้ ซึ่งถือเป็นเทคนิคหนึ่งในการจัดสร้างเว็บเพจ แท็กคำสั่ง HTML มีรูปแบบดังนี้ รูปแบบ <TAG_NAME ATTRIBUTE_1, ATTRIBUTE_2, …> Content </TAG_NAME> เมื่อ
  • 3.
    TAG_NAME คือชื่อคำสั่ง ATTRIBUTE_1, …คือแอตทริบิวต์ประกอบคำสั่งแท็ก ซึ่งเป็นส่วนประกอบจากรูปแบบ NAME=VALUE เมื่อ NAME คือชื่อแอตทริบิวต์ และ VALUE คือข้อมูลที่ให้กับชื่อแอตทริบิวต์นั้นๆ Content คือเนื้อความที่ต้องการเน้นการแสดงผล แท็กคำสั่ง HTML ประกอบด้วย 3 ส่วนดังตัวอย่างที่แสดงไว้ด้านบน ส่วนที่หนึ่งคือแท็กเปิด เป็นแท็กที่บรรจุคำสั่งเพื่อการแสดงผล อยู่ภายในสัญลักษณ์กำหนดแท็กคือ < และ > แท็กเปิดสามารถบรรจุคำสั่งใดๆก็ได้ตามคำสั่งที่มีอยู่ในมาตรฐาน HTML เพื่อบอกจดเริ่มต้นของการกำหนดรูปแบบการแสดงผล ซึ่งมีความหมายหากว่าแท็กเปิดเป็นการบอกถึงการกำหนดตัวอักษรตัวหนา จะหมายถึงว่าเนื้อความหลักจากแท็กเปิดให้แสดงเป็นตัวอักษรตัวหน้า ส่วนที่สองคือส่วนเนื้อความ เป็นเนื้อข้อมูลที่จะถูกกำหนดรูปแบบการแสดงผลจากคำสั่งแท็กเปิดก่อนหน้า ส่วนที่สามแท็กปิด เป็นแท็กที่บรรจุคำสั่งเดียวกับแท็กเปิด แต่จะอยู่ภายในสัญลักษณ์แท็กปิดคือ </ และ > (สังเกตว่ามีเครื่องหมาย / อยู่ด้วย) ถือเป็นการบอกขอบเขตการสิ้นสุดการแสดงผลตามแท็กคำสั่งเปิด เนื้อความต่อไป (หากมี) ให้แสดงในรูปแบบปกติตามที่กำหนดไว้จากบราวเซอร์ของผู้ใช้ ข้อแนะนำ ตัวอักษรแท็กคำสั่ง ในข้อกำหนดของ HTML สามารถใช้ได้ทั้งตัวอักษรตัวเล็กและตัวอักษรตัวใหญ่ แต่ขอแนะนำให้ใช้ตัวอักษรตัวใหญ่ทั้งหมด เพื่อให้เข้ากันได้กับมาตรฐาน XML โครงสร้างของเอกสารเว็บเพจ 1 <HTML> 2 <HEAD> 3 <TITLE> </TITLE> 4 </HEAD> 5 <BODY> 6 7 </BODY> 8 </HTML> จากตัวอย่าง แท็ก HTML ใช้สำหรับกำหนดจุดเริ่มต้นและจุดสิ้นสุดด้วยแท็กเปิดและแท็กปิด ส่วนแท็ก HEADER ใช้สำหรับกำหนดข้อมูลส่วนหัวของเอกสาร ซึ่งใช้บอกข้อมูลเพิ่มเติมว่าบราวเซอร์ควรจะปฏิบัติอย่างไรกับเอกสาร ในแท็ก TITLE เป็นตัวอย่างของการกำหนดชื่อหัวเอกสาร ซึ่งบราวเซอร์จะนำเอาข้อมูลระหว่างแท็กเปิดและแท็กไปไปแสดงบนแถบไตเติลบาร์ของโปรแกรมบราวเซอร์ สำหรับข้อมูลระหว่างแท็ก BODY ซึ่งถือเป็นเนื้อข้อมูล และบราวเซอร์จะนำเนื้อข้อมูลนี้ไปนำเสนอต่อผู้ใช้ ซึ่งโดยส่วนใหญ่จะเป็นพื้นที่ของเอกสารนั่นเอง และเนื้อข้อมูลนี้เองที่สามารถปรับปรุงและเปลี่ยนแปลงการนำเสนอในรูปแบบต่างๆมากมาย ตามเทคโนโลยีที่กล่าวผ่านมาแล้วในบทที่ 2 เช่น JavaSctipt หากเป็นการประมวลผลที่บราวเซอร์เป็นต้น ภายในแท็ก BODY สามารถบรรจุแท็กอื่นๆเพื่อช่วยให้การนำเสนอข้อมูลมีรูปแบบที่ดีขึ้น ซึ่งผู้เขียนขอยกตัวอย่างแท็กคำสั่งที่สำคัญในการทำงานนำแสดงเท่านั้น เนื่องจากแท็กคำสั่ง HTML นั้นมีจำนวนมากมายและมีรายละเอียดปลีกย่อยค่อนข้างเยอะ แท็กที่ควรรู้สำหรับนักพัฒนาระบบบนเว็บ มีรายละเอียดต่อไปนี้ แท็ก P รูปแบบ <P>information</P>
  • 4.
    เมื่อ imformation คือข้อมูลที่จะบรรจุเป็นย่อหน้า แท็ก Pทำหน้าที่ในการจัดโครงสร้างของข้อมูล information ให้มีรูปแบบเป็นพารากราฟ (ย่อหน้า) ของเอกสาร เนื่องจากในการแสดงผลของระบบเว็บเริ่มต้นที่ออกแบบสำหรับข้อมูลในภาษาอังกฤษ ซึ่งแต่ละประโยคประกอบด้วยคำที่แยกกันด้วยช่องว่าง เช่น I am a boy. แต่หากข้อมูลเป็นภาษาไทยประโยคจะประกอบด้วยคำเช่นกัน แต่ไม่ได้แยกด้วยช่องว่า เช่น ฉันเป็นเด็กผู้ชาย ดังนั้นการสร้างเว็บสำหรับภาษาไทย จึงควรแยกประโยคให้ได้มากที่สุดเท่าที่จะทำได้ เนื่องจากการจัดย่อหน้าของแท็ก P จะมีการตัดคำตามช่องว่างให้ขึ้นบรรทัดใหม่ในแต่ละบรรทัดนั่นเอง ทำให้ขนาดพื้นที่บราวเซอร์หากมีขนาดเล็ก จำนวนบรรทัดจะสั่นกว่าบราวเซอร์ที่มีขนาดใหญ่ แท็ก BR รูปแบบ information1 <BR> information2 แท็ก BR เป็นคำสั่งในภาษา HTML ที่ให้มีการขึ้นบรรทัดใหม่ภายในย่อหน้า เนื่องจากหากผู้สร้างต้องการให้มีการขึ้นบรรทัดใหม่ก่อนที่จะจบบรรทัด สามารถใช้แท็ก BR วางไว้หลับข้อความนั้นๆ เช่น <P>ฉันเป็น<BR>เด็กผู้ชาย</P> จะเกิดเป็นย่อหน้าที่มี 2 บรรทัด บรรทัดแรกคือ ฉันเป็น บรรทัดที่สองคือ เด็กผู้ชาย ข้อสังเกตอย่างหนึ่งของแท็ก BR คือไม่จำเป็นต้องมีแท็กปิด แท็ก IMG รูปแบบ <IMG SRC="url" WIDTH="width" HEIGHT="height"> เมื่อ url คือเส้นทางในรูปแบบ URL ที่จะอ้างไปยังไฟล์รูปภาพเพื่อนำมาเสนอในพื้นที่บราวเซอร์ width คือข้อมูลกำหนดความกว้างของรูปภาพมีหน่วยเป็นพิกเซล (Pixel) height คือข้อมูลกำหนดความสูงของรูปภาพมีหน่วยเป็นพิกเซล ตัวอย่าง <IMG SRC="http://www.javacentrix.com/images/banner.gif" width="100" height="60"> สำหรับแท็ก IMG นี้ใช้กำหนดการแสดงรูปภาพ โดยต้องมีการระบุชื่อไฟล์รูปภาพด้วยว่าบราวเซอร์ควรจะนำเอาภาพจากที่ไหนมาแสดง ซึ่งไฟล์รูปภาพดังกล่าวจะอยู่ที่ใดก็ได้บนระบบอินเตอร์เน็ตที่สามารถอ้างถึงได้จากเส้นทาง URL นอกจากนั้นแล้วยังมีแอตทริบิวต์ที่ช่วยกำหนดขนาดรูปภาพในการนำเสนอด้วย width และ height อีกด้วย หากไม่ระบุขนาดในแท็ก IMG แล้วการแสดงรูปภาพจะนำเอาขนาดของภาพที่แท้จริงมาแสดง แท็ก Hx รูปแบบ <Hx>information </Hx> เมื่อ x คือระดับหัวข้อมีค่าตั้งแต่ 1-7
  • 5.
    ตัวอย่าง <H1>ฉันเป็นเด็กผู้ชาย</H1> แท็ก Hx นี้ใช้กำหนดให้ข้อมูลแสดงเป็นหัวข้อ ซึ่งการแสดงผลนี้จะทำให้ตัวอักษรภายในแท็กดังกล่าวมีขนาดลดลั่นกันมากตามค่าx ที่วางไว้ด้านหลัง ส่วนใหญ่ใช้สำหรับกำหนดขนาดตัวอักษรให้ดูเด่นชัดขึ้น แท็ก FONT รูปแบบ <FONT FACE="name" SIZE="size"> information </FONT> เมื่อ name คือชื่อฟอนต์ size คือขนาดของฟอนต์มีหน่วยเป็นพอยต์ ตัวอย่าง <FONT FACE="tahoma" SIZE="10"> ฉันเป็นเด็กผู้ชาย</FONT> แท็ก FONT นี้ใช้สำหรับกำหนดรูปแบบของตัวอักษรว่าต้องการใช้ข้อความภายในแท็ก มีตัวอักษรตามแบบใด และมีขนาดเท่าใด จากตัวอย่างต้องการให้ข้อความระหว่างแท็ก FONT มีรูปแบบตัวอักษรแบบ Tahoma และมีขนาด 10 พอยต์ แท็ก TABLE, TR, TD รูปแบบ <TABLE BORDER="border" CELLPADDING="pad" CELLSPACCING="space"> <TR BGCOLOR="color" WIDTH="width" HEIGHT="height" > <TD BGCOLOR ="color" WIDTH ="width" HEIGHT ="height" ALIGH="haligh" VALIGN="valign"> </TD> </TR> … </TABLE> เมื่อ border คือขนาดกรอบของตารางมีหน่วยเป็นพิกเซล pad คือขนาดของระยะขอบภายในเซลมีหน่วยเป็นพิกเซล space คือขนาดระหว่างเซลทั้งแนวตั้งและแนวนนอนมีหน่วยเป็นพิกเซล color คือชื่อสี เช่น white, red, black, green หรือรหัสสีที่นำหน้าด้วยสัญลักษณ์ # เช่น #00FF05 width คือข้อมูลกำหนดความกว้างของรูปภาพมีหน่วยเป็นพิกเซลหรือเปอร์เซ็นต์ height คือข้อมูลกำหนดความสูงของรูปภาพมีหน่วยเป็นพิกเซลหรือเปอร์เซ็นต์ haling คือลักษณะการจัดข้อมูลในแนวนอน จากข้อกำหนด LEFT, CENTER, RIGHT
  • 6.
    valigh คือลักษณะการจัดข้อมูลในแนวตั้ง จากข้อกำหนดTOP, MIDDEN, BOTTOM ตัวอย่าง <TABLE BORDER="1" CELLPADDING="2" CELLSPACCING="0"> <TR BGCOLOR="white" > <TD>ชื่อ</TD><TD>นามสกุล</TD> </TR> <TR BGCOLOR="yellow" > <TD>สมชาย</TD><TD>มาดแมน</TD> </TR> </TABLE> แท็ก TABLE ใช้กำหนดการแสดงรูปแบบตาราง โดยส่วนประกอบของตารางในแต่ละแถวกำหนดด้วยแท็ก TR และแต่ละแถวกำหนดได้จากแท็ก TD คือคอลัมภ์นั่นเอง จากตัวอย่างจะประกฎตารางที่มี 2 แถวแต่ละแถวมี 2 คอลัมภ์ โดยมีตัวอย่างดังนี้ ชื่อ นามสกุล สมชาย มาดแมน แท็ก FORM, INPUT รูปแบบ <FORM METHOD="method" ACTION="url"> <INPUT TYPE="type" NAME="name" VALUE="value"> … </FORM> เมื่อ method คือรูปแบบการส่งข้อมูลไปยังเซิร์ฟเวอร์ที่กำหนดเป็นแบบ POST หรือ GET url เส้นทางการส่งข้อมูล ซึ่งเป้าหมายคือเอกสารที่สามารถรับข้อมูลได้ type ชนิดของฟิลด์ที่ใช้ในการประกอบข้อมูล ประกอบด้วย TEXT สร้างเป็นช่องกรอกข้อมูลทั่วไป PASSWORD สร้างเป็นช่องกรอกข้อมูลเพื่อรับข้อมูลรหัสผ่าน HIDDEN สร้างเป็นฟิลด์ข้อมูลที่ไม่ให้ผู้ใช้เห็นจากเอกสาร แต่ใช้สำหรับส่งไปเว็บเซิร์ฟเวอร์ SUBMIT สร้างเป็นปุ่มกดเพื่อให้เริ่มส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์ name คือชื่อฟิลด์ข้อมูล ซึ่งใช้เป็นชื่อพารามิเตอร์ไปยังเว็บเซิร์ฟเวอร์ value คือข้อมูลเริ่มต้นให้แต่ละช่องกรอกข้อมูล ตัวอย่าง <FORM METHOD="POST" ACTION="/ejp/Servlet/putInfo"> <INPUT TYPE="TEXT" NAME="firstname">
  • 7.
    <INPUT TYPE="HIDDEN" NAME="id"VALUE="007"> <INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="ส่ง"> </FORM> หากต้องการสร้างเอกสารที่สามารถรองรับการกรอกข้อมูลจากผู้ใช้ไปยังเซิร์ฟเวอร์ เพื่อเป็นช่องทางในการส่งข้อมูลไปให้เซิร์ฟเล็ตทำงาน ให้ใช้แท็ก FORM ซึ่งสามารถระบุประเภทการส่งข้อมูล และปลายทางที่รับข้อมูลนั้นๆ ส่วนรูปแบบในการกรอกข้อมูลระบุได้จาก แท็ก INPUT ว่าจะในฟอร์มประกอบด้วยพารามิเตอร์ได้กี่ตัว จากตัวอย่างเป็นการสร้างฟอร์มที่มีช่องกรอกข้อมูลหนึ่งช่องที่มีชื่อว่า firstname และมีข้อมูลพารามิเตอร์ที่ซ่อนไว้คือ id ที่มีข้อมูลเริ่มต้น 007 ในฟอร์มมีปุ่มเพื่อส่งข้อมูลที่มีข้อความบนปุ่มว่า ส่ง ดังนั้นสิ่งที่ประกฎบนจอภาพของผู้ใช้จึงเป็นดังนี้ ภาพแสดงการผลของการสร้างฟอร์มด้วยแท็ก FORM 2 CSS (Cascading Style Sheet) จากข้อจำกัดของการนำเสนอเนื้อความด้วยภาษา HTML ก่อให้เกิดปัญหาหนึ่งคือความไม่เหมือนกันของรูปแบบการแสดงผลไม่ว่าจะเกิดจากตัวอักษรหรือรูปภาพ จากทั้งผู้ใช้ที่เรียกดูเนื้อหาต่างสถานที่กัน (ผู้ใช้ตั้งค่าการแสดงผลบราวเซอร์ไม่เหมือนกัน) หรือจากผู้ใช้ที่ซอฟต์แวร์ที่ทำหน้าที่บราวเซอร์ต่างกัน เช่น จาก Netscape และ IE ซึ่งเป็นไปได้ยากมากหากต้องการควบคุมการแสดงผลให้เหมือนกันทั้งหมด CSS สามารถแก้ปัญหาของการแสดงผลดังกล่าวได้ นอกจากนั้นแล้ว CSS ยังช่วยให้เว็บมีรูปแบบในการแสดงผลเป็นแบบไดนามิคด้วย การใช้งาน CSS ซึ่งเป็นส่วนเพิ่มเติม HTML ไม่ใช่การแทนที่ ดังนั้นเอกสารที่เป็นไปตามมาตรฐาน HTML เท่านั้นจึงจะนำเอามาตรฐาน CSS มาเพิ่มเติมความสามารถได้ คำว่า Cascading มีความหมายถึงการกำหนดรูปแบบเฉพาะให้กับรูปแบบปกติที่มีอยู่ เช่น แท็ก <P> ที่เป็นคำสั่งใน HTML เพื่อกำหนดถึงการจัดพารากราฟให้กับเนื้อความ แต่หากนำเอา CSS มาประกอบการใช้งาน สามารถปรับให้ตัวอักษร สีตัวอักษร สีพื้นตัวอักษรให้เป็นไปในรูปแบบเฉพาะ และทุกๆที่ของเอกสาร HTML ที่มีการใช้งานแท็ก <P> ก็จะเปลี่ยนแปลงในรูปแบบเดียวกันทั้งหมด ดังนั้นจึงเป็นผลพวงให้เกิดความสะดวกสบายขึ้น เมื่อต้องการเปลี่ยนแปลงรูปแบบตัวอักษรในขอบเขตของแท็ก <P> ก็สามารถทำได้ด้วยจุดเพียงจุดเดียว โดยจะมีผลถึงการเปลี่ยนแปลงทั้งหมด ข้อแนะนำ แท็กคำสั่ง HTML มีความสามารถเช่นเดียวกับ CSS ในเรื่องปรับรูปแบบตัวอักษร สีตัวอักษร สีพื้นตัวอักษร และอื่น แต่ข้อเสียคือ ผู้สร้างเว็บเพจจะต้องแทรกแท็กคำสั่งปรับรูปแบบตัวอักษรในทุกที่ที่ต้องการ หากแต่เป็น CSS แล้วทำเฉพาะการกำหนดเบื้องต้นว่าจะต้องการให้แท็กใดใน HTML มีการแสดงผลแบบใด 2.1 การใช้งาน Style ส่วนคำว่า Style ซึ่งหมายถึง รูปแบบที่รวบรวมข้อกำหนดต่างๆเอาไว้เป็นแอตทริบิวต์ (Attribute) เช่นรูปแบบที่รวบรวมเอาแอตทริบิวต์เอาไว้ดังนี้ รูปแบบตัวอักษร Arial ขนาด 24 พอยต์ ตัวหนา สีน้ำเงิน ล้อมรอบด้วยกรอบสีเขียวที่มีขนาดเส้น 1 พอยต์ เป็นต้น ส่ง
  • 8.
    โดยแอตทริบิวต์ที่รวบรวมเอาไว้ถูกกำหนดด้วยชื่อที่จะถูกนำไปใช้ในภาษา HTML อีกทีและในบางครั้งชื่อ Style ดังกล่าวเป็นชื่อที่ตรงกับแท็กคำสั่ง HTML หากเป็นเช่นนี้ เมื่อบราวเซอร์อ่านเนื้อความและกลุ่มแอตทริบิวต์ที่กำหนดไว้ใน Style เข้ามาก็จะนำไปใช้งานสำหรับแสดงเนื้อความนั้นๆ แต่ก็ไม่จำเป็นที่ผู้สร้างจะต้องกำหนดชื่อ Style ให้เหมือนกับชื่อแท็กที่ใช้ใน HTML และหากเป็นเช่นนั้นชื่อ Style ที่แตกต่างออกไปเมื่อนำมาใช้ในเว็บเพจ ผู้สร้างต้องนำเอาชื่อ Style ดังกล่าวแทรกลงในส่วนแอททริบิวต์ของแท็ก HTML เอง ทำให้ชื่อ Style สามารถเพิ่มลักษณะในการแสดงผลลัพธ์ได้เฉพาะบางส่วนที่ต้องการเท่านั้น ยกตัวอย่างเช่น หากสร้างเนื้อความภายใต้ข้อกำหนด <P> </P> เมื่อต้องการนำเอา Style ที่สร้างไว้ด้วย CSS ภายใต้ชื่อ bibliography มาใช้กับแท็ก HTML ก็จะใส่ไว้ในแอตทริบิวต์ CLASS โดยตัวอย่างดังนี้ <P CLASS="bibliography”>เนื้อความ</P> เพียงแค่นี้ตัวอย่างด้านบนเฉพาะย่อหน้าเดียวเท่านั้น จะแสดงลักษณะตัวอักษรที่กำหนดไว้ภายใต้ Style ชื่อ bibliography 2.2 การสร้าง Style การสร้าง Style จำต้องสร้าง ตามข้อกำหนดของ CSS ซึ่งจะต้องทำตามกฎเกณฑ์ดังนี้ รูปแบบ .selector { declaration } เมื่อ selector คือชื่อ Style declaration คือลักษณะการแสดงผลที่กำหนดให้กับ Style selector คือชื่อ Style ที่ต้องการสร้างขึ้น หากสังเกตให้ดีจะเห็นสัญลักษณ์ . (Dot) อยู่ด้านหน้า ซึ่งหากชื่อ Style ที่ต้องการสร้างต้องการนำไปใช้งานกับแท็ก HTML (ชื่อ Style เหมือนกับชื่อแท็ก) ไม่จำเป็นต้องใส่สัญลักษณ์ . หากชื่อ Style เป็นชื่อที่สร้างขึ้นมาใหม่ (ใช้กับแอตทริบิวต์ CLASS) จำเป็นต้องมีสัญลักษณ์ . อยู่ด้านหน้าชื่อด้วย declaration จำเป็นต้องอยู่ภายในเครื่องหมาย { } เพื่อใช้กำหนดลักษณะของ Style และหากมีหลายลักษณะที่กำหนดให้กับ Style ให้แยกลักษณะแต่ละตัวด้วยเครื่องหมาย ; ตัวอย่าง .puppy { font-size: 10pt; font-family: Tahoma; } จากตัวอย่าง แสดงการสร้าง Style ที่ชื่อ puppy โดยมีลักษณะในการแสดงข้อมูลประกอบด้วย แสดงตัวอักษรในแบบ Tahoma ที่มีขนาด 10 พอยต์ เป็นต้น ข้อแนะนำ หากต้องการทราบรายละเอียดว่ามีชื่ออะไรบ้าง ที่จะสามารถนำมาใช้ในการกำหนด Style สามารถดูรายละเอียดได้ที่ http://www.htmlhelp.com/reference/css/ ผู้อ่านอาจมีคำถามตั้งไว้ในใจว่า แล้วจะแทรก CSS ไว้ที่ไหน มีวิธีการเรียกใช้งาน CSS ได้หลายวิธีดังนี้
  • 9.
    - การใช้งาน CSSในไฟล์ HTML วิธีนี้เป็นวิธีที่ดูง่ายที่สุดคือเราจะแทรกข้อมูลการกำหนด Style เอาไว้ในไฟล์ที่บรรจุคำสั่ง HTML โดยตรง ซึ่งส่วนใหญ่จะแทรกไว้ระหว่างแท็กคำสั่ง HEAD โดยมีรูปแบบดังนี้ … <HEAD> …. <STYLE TYPE="text/css"> <!-- H3 { font-family:Lucida; font-style:normal; color:blue } BLOCKQUOTE { font-family:Arial; font-style:italic; color:teal; word-spacing:-0.2cm } --> </STYLE> </HEAD> …. จากตัวอย่างแสดงการกำหนด CSS (สังเกตจาก แอตทริบิวต์ TYPE ในแท็ก STYLE <STYLE TYPE="text/css">) โดยมีการกำหนด Style อยู่ระหว่างแท็กหมายเหตุ (Comment) คือ <!-- --> จะเห็นได้ว่าจากตัวอย่าง มีการสร้าง Style ที่ชื่อ H3 และ BLOCKQUOTE (ไม่จำเป็นต้องมีสัญลักษณ์ . อยู่ด้านหน้าชื่อ เนื่องจากชื่อเดียวกับแท็กใน HTML) โดยกำหนดให้ H3 มีลักษณะการแสดงผลลัพธ์เป็นตัวอักษร Arial แบบปกติ (normal) สีน้ำเงิน (blue) ส่วน Style ที่ชื่อ BLOCKQUOTE มีลักษณะตัวอักษรแบบ Arial เช่นกัน แต่เป็นตัวเอียง(Italic) สี teal ระยะห่างระหว่างคำมีค่า -0.2 ซม. - การใช้งาน CSS จากไฟล์ CSS สามารถสร้างและบันทึกไว้ในไฟล์ต่างหาก โดยไม่จำเป็นต้องเขียนรวมกับคำสั่ง HTML เช่น เมื่อผู้สร้างสร้าง Style ต่างๆแล้วรวบรวมบันทึกไฟล์ชื่อ myStyle.css แล้ว เมื่อต้องการนำเอา Style ต่างๆมาใช้งานในไฟล์ HTML ใดๆ ไฟล์ HTML เหล่านั้นจำเป็นต้องใช้แทรกแท็ก <LINK> เพื่อเชื่องโยงไปหาไฟล์ myStyle.css โดยมีการกำหนดข้อมูลแอตทริบิวต์ของแท็ก <LINK> ให้ถูกต้องตามรูปแบบดังนี้ รูปแบบ <LINK REL="StyleSheet" HREF="FILE_NAME" TYPE="text/css"> เมื่อ FILE_NAME คือชื่อไฟล์ที่สร้าง Style ตามรูปแบบ CSS เก็บไว้ ตัวอย่าง <LINK REL="StyleSheet" HREF="sitestyle.css" TYPE="text/css"> 2.3 ตัวอย่างสร้าง Style ขึ้นมาใช้เอง ผู้สร้างเว็บเพจสามารถสร้าง Style ขึ้นมาเพื่อใช้งานได้เองเพื่อนำ ไปใช้กับเว็บเพจใดๆได้ โดยในขั้นแรกจะต้องสร้าง Style โดยมีชื่อที่กำหนดขึ้นมาใหม่ก่อน ลองพิจารณาจากตัวอย่างด้านล่างดังนี้ .Danger { font-size:20pt; font-weight:bold; color:red; border:4pt lightgreen dotted; background: black; text-align:center; height:50pt; width:220pt
  • 10.
    } จากตัวอย่างเป็นการสร้าง Style ชื่อDanger โดยมีลักษณะคือใช้ขนาด 20 พอยต์ ตัวอักษรหนา สีแดง บนพื้นที่ดำที่มีกรอบเป็นเส้นไข่ปลา ขนาด 4 พอยต์ สีเขียว ขนาด 50x220 พอยต์ (pt ย่อมาจาก Point) ตัวอักษรจะอยู่บริเวณกลางของกรอบ ต่อจากนั้นเป็นการนำเอา Style ไปใช้งาน ในที่นี้จะเป็นตัวอย่างการใช้งานร่วมกับแท็ก SPAN ตัวนี้ <P>ท่านผู้ใช้งานคอมพิวเตอร์ทั้งหลาย ระวังไวรัสระบาด<BR> <SPAN CLASS=Danger>ตรวจสอบแผ่นจากภายนอกทุกครั้งก่อนใช้งาน</SPAN></P> 2.4 ลำดับการทำงานของคำสั่ง เนื่องจากการใช้งาน CSS ร่วมกับคำสั่งแท็กใน HTML ซึ่งในบางแท็กมีความสามารถในการจัดลักษณะการแสดงผลลัพธ์เช่นเดียวกัน เช่น แท็ก <FONT> ดังนั้นลำดับในการพิจารณาว่าควรจะกำหนดเนื้อความตามชื่อ Style หรือแท็ก <FONT> จึงเป็นสิ่งหนึ่งที่จำเป็นต้องทำความเข้าใจ ลองพิจารณาตัวอย่างต่อไปนี้ … <STYLE TYPE="text/css"> <!-- BODY { background: red; color: black } H3 { font-family:Lucida; font-style:normal; color:green } --> </STYLE> </HEAD> <H3><FONT COLOR="Blue"> This is not a love song! </FONT> </H3> … จากตัวอย่างให้พิจารณาส่วนตัวอักษรที่เป็นตัวหนา ข้อความว่า “This is not a love song!” เป็นส่วนของเนื้อความที่มีการบังคับการแสดงผลคือแท็ก FONT ที่ให้ตัวอักษรเป็นสีน้ำเงิน และแท็ก H3 ที่ถูกบังคับจากข้อกำหนด Style ให้ตัวอักษรเป็นสีแดง การแสดงผลข้อความดังกล่าวจะให้ผลลัพธ์เป็นสีน้ำเงิน เนื่องจากเป็นลักษณะที่กำหนดขึ้นในชั้นในสุดนั่นเอง ข้อแนะนำ หากไม่ต้องการให้แท็ก HTML ที่อยู่ซ้อนในด้านในชื่อ Style มีผลกับการทำงานของ Style ควรเพิ่มลักษณะ ! important ลงในรายละเอียดลักษณะ เช่น H1 {color: teal ! important; } บราวเซอร์จะถือเอาลักษณะที่กำหนดจาก Style เป็นหลักเท่านั้น 2.5 ลูกเล่นในการใช้งาน CSS CSS สามารถนำมาใช้งานเพื่อให้เกิดไดนามิคในแง่ของการนำเสนอข้อมูลมากมายหลายรูปแบบ ซึ่งในการใช้งานคือการเพิ่มลูกเล่นให้กับเอกสาร ซึ่งมีรายละเอียดดังนี้
  • 11.
    - เมื่อไม่ต้องการเส้นใต้ลิงก์เชื่อมโยง ในการแสดงผลลัพธ์ของลิงก์เชื่อมโยง (Hyperlink)ในภาษา HTML ที่สร้างจากแท็ก A โดยทั่วไป มักจะเห็นตัวอักษรเป็นสีน้ำเงิน (โดยส่วนใหญ่) จะมีเส้นใต้อยู่ใต้ตัวอักษรเหล่านั้น และหากไม่ต้องการให้ตัวอักษรมีเส้นใต้เกิดขึ้น สามารถใช้ CSS ในการระบุรูปแบบการแสดงลิงก์ดังกล่าว โดยใช้ลักษณะ text-decoration: none ดังตัวอย่างต่อไปนี้ A:link {color: cornsilk; text-decoration: none} - เมื่อต้องการสร้างกรอบข้อความ หากต้องการเน้นข้อความด้วยเส้นกรอบรอบรอบในสีและขนาดต่างๆ CSS สามารถทำความต้องการนี้ให้เป็นจริงได้ ยกตัวอย่างเช่นเมื่อต้องการใช้กับแท็ก <P> การกำหนด Style ควรจะมีลักษณะดังนี้ P { border-style:solid; border-width:thin; border-color:blue; } - การวางส่วนประกอบบนเว็บ เมื่อมีการวางภาพหรือสิ่งใดๆในเว็บเพจ หากมีตัวอักษรใดๆอยู่ก่อนหน้า จะทำให้ภาพหรือตัวอักษรมีการขยับไปมาตามขนาดการเปิดใช้งานบราวเซอร์ของผู้ใช้ CSS สามารถกำหนดตำแหน่งที่แน่นอนให้กับรูปภาพหรือวัตถุด้วย ด้วยข้อมูลลักษณะ position:absolute เพื่อกำหนดตำแหน่ง width: สำหรับความกว้าง height: สำหรับกำหนดส่วนสูง ลองพิจารณาตัวอย่างต่อไปนี้ .OurLogo { position:absolute; left:30px; top:10px; width:40px; height:30px; color:red; font-size:12pt; background: black; border:1pt red dotted; } เป็นตัวอย่างการสร้าง Style ที่ชื่อ OurLogo เพื่อระบุตำแหน่งของภาพที่ตำแหน่ง 30 จากด้านซ้ายและ 10 จากด้านบน (px มาจาก Pixel) โดยมีขนาด 40x30 สีแดง มีกรอบขนาด 1 พอยต์ดีแดงเส้นไข่ปลา ตัวอักษรขนาด 12 พอยต์สีดำ แต่เมื่อเราสามารถกำหนดตำแหน่งการวางได้ ปัญหาที่อาจจะเกิดขึ้นตามมาคือการซ้อนกันของรูปภาพ ดังนั้นเมื่อมีการวางชิ้นส่วนซ้อนกันลักษณะการแสดงผลทั่วไปชิ้นส่วนที่ถูกถูกวางหลังสุดจะถูกแสดงที่ส่วนบนสุด แต่สำหรับ CSS สามารถบังคับได้ว่าชิ้นไหนควรจะอยู่ด้านบนหรือชิ้นไหนควรจะอยู่ด้านล่าง ด้วยการกำหนดลักษณะเพิ่มเติมคือ z- index: ตามด้วยตัวเลขบอกตำแหน่ง โดยหมายเลขดังกล่าวหากมีค่าสูงจะอยู่ด้านล่างสุด และจะไล่ตามตัวเลขไปหาค่าที่น้อยที่สุด (ตัวเลขไม่จำเป็นต้องเรียงลำดับ และเป็นได้ทั้งค่าบวกและลบ) ลองพิจารณาจากตัวอย่างต่อไปนี้
  • 12.
    <DIV CLASS="pile" ID="image1"STYLE="z-index: 3"> <DIV CLASS="heap" ID="image2" STYLE="z-index: 2"> จากตัวอย่าง image1 จะวางอยู่ด้านล่างเนื่องจากมีค่าลำดับตำแหน่งเป็น 3 ในขณะที่ image2 วางอยู่ด้านบนอีกที ข้อแนะนำ การใช้งาน CSS จะต้องถูกเรียกดูจากผู้ใช้งานบราวเซอร์ที่สนับสนุนการทำงานของ CSS ด้วย ดังนั้นบราวเซอร์รุ่นเก่าๆอาจจะไม่มีการทำงานตามข้อกำหนดของ CSS ได้ และบราวเซอร์รุ่นใหม่ที่สามารถใช้งาน CSS ได้ เช่น Netscape 4.5 และ IE 4.0 ขึ้นไป 3 XML (eXtension Markup Language) ในการแสดงเนื้อความให้กับผู้ใช้ผ่านทางบราวเซอร์ มาตรฐานที่กล่าวมาแล้วคือ HTML สำหรับปรับการแสดงผลเนื้อความ และ CSS สำหรับเพิ่มเติมความสามารถในการแสดงผลเนื้อความ แต่ในโลกของการแลกเปลี่ยนข้อมูลหรือสื่อสารข้อมูล นักพัฒนาโปรแกรมมักให้ความสำคัญกับความหมายของเนื้อความ ความหมายเหล่านี้มีประโยชน์มากในการแลกเปลี่ยนข้อมูลระหว่างแอปพลิเคชั่นที่ทำงานด้วยระบบคอมพิวเตอร์ ข้อแนะนำ ความหมายของเนื้อความสามารถเข้าใจได้ด้วยจากการอ่านและตีความของมนุษย์ แต่ความหมายที่โปรแกรมคอมพิวเตอร์จะเข้าใจได้ เนื้อความนั้นจำเป็นต้องถูกระบุว่าบริเวณไหนมีความหมายอย่างไร XML เป็นแท็กลักษณะมาร์คอัพเช่นเดียวกับ HTML แต่มาช่วยในการให้ความหมายกับเนื้อความ ซึ่งต่างจาก HTML ซึ่งเป็นแท็กในการปรับการแสดงผลของเนื้อความ XML ทำให้ผู้ใช้งานสามารถสร้างและดูแลเอกสารในรูปแบบเอกสารที่มีโครงสร้าง (structured documents) ในที่โครงสร้างเอกสารคือการให้ความหมายกับส่วนประกอบต่างของเนื้อความ เพื่อให้โปรแกรมในการเรียกดูเอกสาร (เช่น บราวเซอร์) สามารถแสดงเนื้อความ และปรับเปลี่ยนรูปแบบการแสดงได้หลากหลายยิ่งขึ้น กล่าวง่ายๆว่าจุดประสงค์หลักของ XML คือการแยกส่วนเนื้อข้อมูลเพื่อประโยชน์ในการแสดงผล และแลกเปลี่ยนข้อมูลระหว่างงาน ข้อแนะนำ โปรแกรมเรียกดูเอกสาร ในบางครั้งออกถูกออกแบบหรือจัดสร้างขึ้นมาเป็นพิเศษสำหรับการแสดงข้อมูลในเอกสาร XML ได้ในกรณีที่เป็นข้อมูลเฉพาะด้าน เช่น ข้อมูลทางการเงิน ข้อมูลทางเคมี ข้อมูลทางการพยากรณ์ และบราวเซอร์ก็เป็นโปรแกรมหนึ่งสำหรับการเรียกดูข้อมูล XML แต่ใช้สำหรับแสดงข้อมูล XML ในแบบทั่วไปมากกว่าเฉพาะด้านใดด้านหนึ่ง 3.1 ความหมายของคำศัพท์เกี่ยวกับ XML โครงสร้างเอกสาร (Structure Document) หรือเอกสารที่มีโครงสร้าง ตามปกติข้อมูลที่ถูกแสดงบนระบบเว็บถือว่าเป็นเอกสารที่ไม่มีโครงสร้าง คือไม่มีส่วนไหนที่จะระบุว่าคือหัวข้อ ส่วนไหนจะบอกว่าเป็นบทนำ ส่วนไหนที่จะบอกว่าเป็นบทสรุป เพียงแต่เอกสาร HTML อาจจะบ่งบอกลักษณะเอกสารด้วยวิธีการแสดงเป็นนัย เช่นการเน้นส่วนบทนำเอาจะใช้ตัวอักษรตัวใหญ่ บทสรุปอาจจะแสดงด้วยตัวอักษรสีน้ำเงินเข้า เป็นต้น แต่นั้นก็เป็นเพียงการเน้นด้วยรูปแบบการแสดงผลเท่านั้น ลองดูตัวอย่างของลักษณะเอกสารที่มีโครงสร้าง ต่อไปนี้ - เอกสารในลักษณะหนังสือ(Book) ประกอบขึ้นจากเนื้อหาแต่แต่ละบท (Chapter) - ในแต่ละบทประกอบด้วยเนื้อหา (Section) ย่อยหลายเนื้อหา - ในแต่ละหัวข้อย่อย อาจจะถูกอธิบายหรือประกอบด้วยข้อมูลที่อยู่ภายในตาราง (table) - ตารางเหล่านั้นถูกสร้างขึ้นมาจากแถว (row) และคอลัมน์ (column)
  • 13.
    ดังนั้นจะเห็นได้ว่าเมื่อกล่าวถึงหนังสือ ทุกคนที่เคยหยิบหนังสือขึ้นมาอ่านมักจะเข้าใจโครงสร้างของหนังสือว่ามีลักษณะดังที่กล่าวไว้ด้านบน และเป็นโครงสร้างที่แน่นอน เพราะฉะนั้นหากผู้อ่านหันไปหยิบเอากระดาษปึกใหญ่สักปึกหนึ่งขึ้นมาวิเคราะห์ และหากผลการวิเคราะห์มากเห็นโครงสร้างดังกล่าว ผู้อ่านคงจะบอกได้ว่าปึกกระดาษที่หยิบขึ้นมาดูนั้นก็คือหนังสือหนึ่งเล่มนั้นเอง เนื้อความ (PlainText) เมื่อเอ่ยถึงคำว่าตัวอักษร (Character) เราจะนิยามตัวอักษรว่าหมายถึงอักขระที่เป็นทั้งตัวอักษรที่เป็นตัวอักษร อักขระตัวเลข อักขระสัญลักษณ์ ซึ่งที่มาของอักขระแต่ละก็เกิดจากรหัส Unicode นี้เอง ข้อแนะนำ เมื่อก่อนระบบคอมพิวเตอร์มีการจัดเก็บตัวอักษรในหลายรูปแบบ เช่น ASCII แต่มีข้อจำกัดที่ว่า รหัสต่างๆที่กล่าวมาสามารถใช้รหัสตัวเลข (7 บิต) แทนตัวอักษรได้เพียงเฉพาะบางภาษาเท่านั้น แต่ในปัจจุบันระบบคอมพิวเตอร์ต้องสามารถรอบรับการแทนค่าตัวเลขกับตัวอักษรให้ได้ในหลายภาษา จึงต้องมีการเพิ่มจำนวนบิตขึ้นในการบันทึกค่าตัวอักษร เป็น 16 บิตซึ่งมีการเรียกรูปแบบมาตรฐานนี้ว่า Unicode เนื้อความประกอบขึ้นจากตัวอักษรในหลายๆรูปแบบ ซึ่งถือว่าเป็นส่วนที่เป็นข้อมูล เนื้อความถูกมองเห็นจากผู้เรียกดูข้อมูล (ซึ่งอาจถูกปรับแต่งการแสดงผลด้วย HTML, CSS) เนื้อความเป็นส่วนหนึ่งที่ระบบคอมพิวเตอร์อื่นๆสามารถทำความเข้าใจได้ โดยมีการตรวจสอบก่อนว่าเนื้อความดังกล่าว อยู่ในโครงสร้างของเอกสารที่ชี้บ่งว่าเป็นอะไร เช่น ชื่อบท ชื่อตาราง เป็นต้น การเร็นเดอร์ (Rendering) เนื่องจากเนื้อความที่บรรจุอยู่ในโครงสร้างเอกสารหากมีการเรียกดูโดยไม่มีการตีความใดๆ ผู้เรียกดูจะไม่สามารถทำความเข้าใจ หรืออ่านเอกสารนั่นๆได้ เนื่องจากมีตัวอักษรหลายส่วนที่ประกอบเป็นเนื้อความ และตัวอักษรบอกโครงสร้างเอกสาร สิ่งหนึ่งที่สามารถทำให้ผู้อ่านสามารถอ่านเข้าใจได้ คือขบวนการแยกแยะเนื้อความ และแสดงเนื้อความในรูปแบบที่ง่ายต่อการเข้าใจ ซึ่งขบวนการที่ว่านี้เราเรียกว่า “การเร็นเดอร์” การเร็นเดอร์ถือเป็นสิ่งที่มีประโยชน์มากเมื่อมาใช้งานกับ XML เมื่อการเร็นเดอร์เป็นขบวนการที่พิจารณาเอกสาร XML และอุปกรณ์ที่จะแสดงเอกสารเหล่านั้น เอกสาร XML เดียวกันเมื่อนำมาแสดงที่จอภาพมอนิเตอร์ แสดงที่จอภาพ PDA (จอขนาดเล็กบนอุปกรณ์ที่เรียกว่า Palm หรือ PocketPC) นำมาพิมพ์ลงบนเอกสาร จะเห็นได้ว่าอุปกรณ์แต่ละตัวมีพื้นที่ และลักษณะการแสดงเอกสารที่แตกต่างกัน ดังนั้นการเร็นเดอร์จึงเป็นขบวนการทางคอมพิวเตอร์ที่จะเร็นเดอร์ (วาดภาพเนื้อความ) ลบบนอุปกรณ์ต่างๆ ได้อย่างเหมาะสมและสวยงาม การที่เอกสาร XML จะสามารถเร็นเดอร์เนื้อความได้อย่างถูกต้อง จึงจำเป็นต้องอาศัยเอกสารประกอบที่เรียกว่า XSL (Extensible Style Language) 3.2 เอกสารที่มีโครงสร้าง เมื่อ XML ถูกใช้สำหรับกำหนดโครงสร้างของเอกสารด้วยคำสั่ง ดังนั้นลองพิจารณาตัวอย่างรูปแบบโครงสร้างของหนังสือ ซึ่งของยกโครงสร้างคร่าวๆมาให้ดู กำหนดให้หนังสือ (Book) ประกอบด้วยจำนวนบท (Chapter) 2 บท โดยในแต่ละบทมีรายละเอียด (Text) ประกอบอยู่ Begin Book Begin Chapter 1 Text for Chapter 1 End Chapter 1
  • 14.
    Begin Chapter 2 Textfor Chapter 2 End Chapter 2 End Book เนื่องจากหนังสือที่ใช้งานกันจริงๆจะ มีโครงสร้างที่มีรายละเอียดซับซ้อนกว่าตัวอย่างมาก เช่น บทนำ (Introduction), สารบัญ (Index) บทที่ (Chapter) เป็นต้น หรือ ภายในส่วนรายละเอียดของแต่ละบท (Text) ยังประกอบด้วย ย่อหน้า (Paragraph) ประโยค (Sentence) คำ (Word) และตัวอักษร (Character) ด้วย อย่างไรก็ตามผู้เขียนพยายามยกตัวอย่างลักษณะโครงสร้างที่ง่ายๆ เพื่อให้ผู้อ่านได้มองเห็นภาพให้เข้าใจก่อน 3.3 ลักษณะของ XML การแสดงผลเนื้อความในกรณีระบบคอมพิวเตอร์และระบบปฏิบัติการที่แตกต่างกัน สิ่งนี้เป็นสิ่งทีมีคุณประโยชน์อย่ามากจากที่ปัจจุบันนี้ ระบบคอมพิวเตอร์หลากหลายชนิดได้ถือกำเนินขึ้นมาเพื่อใช้งาน รวมถึงระบบปฏิบัติการ (Operation System) ก็ยังมีความแตกต่างกันออกไปด้วย ทำให้ปัญหาในการแสดงผล และการทำความเข้าในเนื้อความเกิดขึ้นมา XML พยายามลดข้อจำกัดของความแตกต่างทางด้านระบบคอมพิวเตอร์ เพื่อสร้างเป็นภาษาที่ใช้กำหนดโครงสร้างของเอกสาร ให้สามารถเข้าใจกันได้ในทุกๆระบบ XML คือภาษาที่มีลักษณะเมตะ (Meta) ซึ่งเมตะ หมายถึงลักษณะการรวบรวมข้อมูลที่นำมาจากแหล่งข้อมูลข่าวสารอื่นๆ ตัวอย่างของข้อมูลลักษณะเมตะคือบทอ้างอิงในหนังสือ ซึ่งบทอ้างอิงสามารถบอกผู้อ่านได้ว่า ข้อมูลในบทอ้างอิงที่ผู้อ่านต้องการอยู่ที่ส่วนไหนหน้าที่เท่าไรของหนังสือบาง (ลองพลิกไปบทอ้างอิงของหนังสือเล่มนี้ดูเป็นตัวอย่าง) ซึ่งเมื่อได้ตัวเลขหน้าที่แล้วสามารถพลิกหนังสือไปยังหน้าดังกล่าวก็จะพบข้อมูลตามต้องการ สำหรับบทอ้างอิงนี้ก็เกิดจากการรวบรวมขึ้นมาจากข้อมูลในแต่ละส่วนขึ้นมานั่นเอง และหากท่านผู้อ่านอยากจะเขียนหนังสือขึ้นมาสักหนึ่งเล่มก็สามารถทำได้ไม่ยาก โดยเพียงท่านทำการรวบรวมเนื้อหาที่จะนำเสนอในหนังสือ และในมาจัดโครงสร้างที่กำหนดขึ้นด้วย XML เนื้อความดังกล่าวก็จะถูกจัดรูปแบบเป็นหนังสือให้ตามต้องการ ข้อแนะนำ XML ไม่ได้เป็นภาษาซึ่งจะทำให้ได้ทั้งโครงสร้างและเนื้อหาของหนังสือทั้งหมดตามต้องการ แต่ XML ถูกใช้เพื่อนำไปใช้สร้างโครงสร้างเอกสารของเนื้อหาภายในต่างหาก ดังนั้นโครงสร้างและข้อกำหนดต่างๆของเอกสารขึ้นอยู่กับการตัดสินใจของผู้สร้างเอง ทำให้ผู้สร้างสามารถกำหนดภาษาของตัวเองขึ้นมาใช้สร้างหนังสือของตัวเองได้ ไม่ว่าจะให้หนังสือมีรูปแบบเป็นอย่างไร 3.4 สร้างสรรค์ภาษาส่วนตัวด้วย XML จากคำกล่าวที่ว่าภาษา XML สามารถนำไปใช้สร้างภาษาใหม่ขึ้นมา ตามข้อกำหนดและความคิดอิสระของผู้ใช้งาน แต่หลายคนอาจจะตั้งคำถามขึ้นมาว่า ในเมื่อแต่ละคนสามารถสร้างภาษาขึ้นมาใหม่ได้ จะทำให้ภาษามีมากมายจนล้นไปหรือเปล่า แล้วหากเราสร้างภาษาขึ้นมาแล้วผู้ใดจะนำภาษาที่เราสร้างขึ้นมาหากไม่ใช้ตัวของเราเอง
  • 15.
    ลองมองย้อนกลับออกไป เมื่อกลุ่มคนกลุ่มหนึ่งที่มีความสนใจในเรื่องเดียวกันมักจะทราบรายละเอียดโครงสร้างหรือรูปแบบในทางเดียวกัน หากมีใครในกลุ่มพยายามสร้างรูปแบบภาษาที่สามารถใช้งานร่วมกันได้ ดังนั้นรูปแบบภาษาดังกล่าวจึงใช้สื่อสารกันภายในระหว่างกลุ่ม เพื่อแลกเปลี่ยนข้อมูลกัน ดังนั้นเมื่อมีสักคนคิดค้นภาษาขึ้นมา คนอื่นๆภายในกลุ่มก็จะนำเอาข้อมูลที่ตนเองมีมาใช้กับภาษาดังกล่าว ก็จะได้เอกสารที่เข้าใจกันได้ภายในกลุ่ม และแน่นอนว่าหากกลุ่มเป็นกลุ่มขนาดใหญ่เช่น กลุ่มการค้า กลุ่มการศึกษา ภาษาที่ถูกสร้างขึ้นมาก็สามารถนำเป็นมาตรฐานในการแลกเปลี่ยนข้อมูลระหว่างกลุ่มกันได้ ตัวอย่างต่อไปนี้ เป็นภาษาที่สร้างขึ้นมาจากกลุ่มที่มีการสื่อสารกัน - ภาษาทางเคมี (Chemical Markup Language) ตัวอย่างหนึ่งที่เห็นได้ชัด คือกลุ่มของนักเคมี ได้รวมตัวกันเพื่อสร้างภาษาพื้นฐาน สำหรับนำข้อมูลทางเคมีไปแสดง และแลกเปลี่ยนเอกสารกัน ซึ่งสัญลักษณ์ทางเคมี เป็นสัญลักษณ์ที่มีรูปแบบในการแสดงผลที่สลับซับซ้อน ดังนั้นภาษาทางเคมีที่สร้างด้วย XML ก็จะสามารถนำไปช่วยในการนำพาข้อมูล หรือสูตรทางเคมีเพื่อสร้างเป็นเอกสารและใช้งานกันภายในกลุ่มที่เข้าใจภาษาทางเคมีนั่นเอง (ดูรายละเอียดได้ ที่นี่) - ภาษาทางคณิตศาสตร์ (MathML) ในทำนองเดียวกัน กลุ่มของนักคณิตศาสตร์ ก็มีภาษาสำหรับการแลกเปลี่ยนข้อมูลทางคณิตศาสตร์ ภายในกลุ่มเอง เรียกว่า MathML (ดูรายละเอียดได้ ที่นี่) ดังนั้นภาษา XML จึงถูกใช้ในการสร้างภาษาเฉพาะกิจ เพื่อใช้ถ่ายเทข้อมูลหรือแลกเปลี่ยนกันระหว่างคอมพิวเตอร์ที่ใช้รูปแบบโครงสร้างเดียวกัน และโปรแกรมเร็นเดอร์ข้อมูลถูกใช้ในการอ่านเนื้อความดังกล่ามาแสดงผลให้เข้าใจความหมายโดยผู้เรียกดูเอกสาร 3.5 การใช้งานภาษา XML ลองพิจารณาตัวอย่างเอกสารที่สร้างขึ้นมาจากภาษา XML ดังต่อไปนี้ <book> <chap> Text for Chapter 1 </chap> <chap> Text for Chapter 2 </chap> </book> จากตัวอย่างที่แสดงด้านบนเป็นการกำหนดโครงสร้างของเอกสารด้วยภาษา XML ส่วนของเอกสารที่ถูกเรียกว่าอิลิเม็นต์ (Element) คือกลุ่มข้อความที่อยู่ระหว่างสัญลักษณ์ <...> จนถึง </...> ดังนั้นจากตัวอย่างประกอบด้วยสามอิลิเม็นต์ <BOOL>…</BOOK>, <CHAP>…</CHAP> และ <CHAP>…</CHAP> โดยในแต่ละอิลิเม็นต์ถือว่าเป็นส่วนย่อยของตัวเอกสาร ซึ่งตัวอย่างดังกล่าวมีอิลิเม็นต์ซ้ำกันสองอิลิเม็นต์คือ CHAP เพื่อให้แต่ละอิลิเม็นต์มีความแตกต่างกันจึงมีการแทรกส่วนที่เรียกว่า แอตทริบิวต์ (Attribute) ลองพิจารณาตัวอย่างต่อไปนี้
  • 16.
    <book> <chap number="1"> Text forChapter 1 </chap> <chap number="2"> Text for Chapter 2 </chap> </book> จากตัวอย่างข้อความ Number ที่อยู่ส่วนแรกของอิลิเม็นต์เป็นส่วนที่เรียกว่าแอตทริบิวต์ ส่วนนี้ใช้ขยายความอิลิเม็นต์ถึงรายละเอียดปลีกย่อยภายใน โดยมีข้อมูล (อาจเป็นตัวเลขหรือข้อความ) อยู่ภายในเครื่องหมายคำพูด ดังนั้นเนื้อความในตัวอย่างจึงมีอิลิเม็นต์บทที่แยกเป็นบทที่ 1 และบทที่ 2 ด้วยข้อมูลในส่วนแอตทริบิวต์ - แท็กคำสั่ง (tag) เฉกเช่นเดียวกับเอกสารที่สร้างจากภาษา HTML ที่มีการใช้แท็กเพื่อกำหนดลักษณะในการแสดงผล ภาษา XML ก็เช่นเดียวกันมีแท็กคำสั่งเหมือนกันเพียงแต่แท็กคำสั่งดังกล่าวถูกใช้งานเพื่อบ่งบอกอิลิเม็นต์ หรือให้เข้าใจง่ายๆคือใช้บ่งบอกลักษณะโครงสร้างของเอกสารนั่นเอง โดยรูปแบบการสร้างแท็กมีคล้ายกับ HTML โดยคำสั่งถูกบรรจุอยู่ภายในสัญลักษณ์ < และ > เช่น <book>, </CHAP> เป็นต้น - แท็กเปิด (Start tag) เป็นแท็กที่ใช้กำหนดส่วนเริ่มต้นของอิลิเม็นต์ ใช้วางก่อนหน้าเนื้อความในแต่ละส่วน โดยต้องอยู่ภายในสัญลักษณ์ < และ > เท่านั้น เช่น <book>, <CHAP> แท็กเปิดสามารถแทรกรายละเอียดที่สามารถชี้ให้เห็นรูปแบบย่อยที่เรียกว่าแอตทริบิวต์อยู่ภายใน โดยชื่อแอตทริบิวต์วางอยู่ในสัญลักษณ์แท็กเปิด แต่ต้องอยู่ด้านหลังคำสั่งแท็ก ดังนี้ <TAG_NAME Attribute_1="Data_1" Attribute_2="Data_2"…> จากรูปแบบตัวอย่างด้านบนแสดงให้เห็นการวางส่วนแอตทริบิวต์ลงในแท็กเปิด แท็กเปิดสามารถมีแอตทริบิวต์มากกว่าหนึ่งตัว ขึ้นอยู่กับความต้องการของผู้สร้าง - แท็กปิด (End Tag) เป็นเท็กที่ใช้กำหนดส่วนสิ้นสุดอิลิม็นต์ ใช้วางหลังเนื้อความในแต่ละส่วนโดยต้องอยู่ภายในสัญลักษณ์ </ และ > เท่านั้น เช่น </book>, </CHAP> - เนื้อความ (Content) คือส่วนข้อตัวอักษรที่ประกอบกันขึ้นเป็นเนื้อหาข้อมูลที่ใช้ในการสื่อสาร เนื้อความคือส่วนที่จะถูกมองเห็นจากผู้อ่านเอกสาร ซึ่งต่างจากแท็กต่างๆจะถูกสร้างโดยผู้สร้างเอกสาร และตีความหมายโดยโปรแกรมอ่านเอกสารเท่านั้น โดยผู้อ่านเอกสารไม่ต้องทำความเข้าใจว่าแท็กแต่ละส่วนมีความหมายอย่างไร ดังนั้นส่วนเนื้อความคือส่วนที่อยู่ระหว่างแท็กเปิดและแท็กปิดนั่นเอง ข้อแนะนำ อิลิเม็นต์เริ่มนับตั้งแต่แท็กเปิดจนถึงแท็กปิดในคำสั่งเดียวกันนั่นเอง แต่เนื้อความอยู่หลักแท็กเปิดและสั้นสุดที่ก่อนแท็กเปิด 3.6 รูปแบบที่ถูกต้องหรือที่เรียกว่า well-formed คือรูปแบบที่ถือว่าเหมาะสมกับการนำมาจัดสร้างเอกสารที่มีโครงสร้างที่ดี สำหรับเอกสารที่สร้างจากภาษา HTML ถือได้ว่าเป็นเอกสารที่ไม่ได้สร้างจากรูปแบบที่ถูกต้องเนื่องจาก แท็กคำสั่ง HTML บางแท็กมีเฉพาะแท็กเปิด โดยไม่จำเป็นต้องมีแท็กปิด เช่น แท็ก <IMAGE …> หรือ <BR> ดังนั้น
  • 17.
    ซึ่งข้อกำหนดของรูปแบบที่ถูกต้อง มีดังต่อไปนี้ - ต้องมีอิลิเม็นต์ที่สมบูรณ์อิลิเม็นต์ที่สมบูรณ์ก็คือต้องเริ่มต้นด้วยแท็กเปิด และต้องปิดท้ายด้วยแท็กปิดในคำสั่งเดียวกันเสมอ เช่น <...> ....... </...> ยกเว้นอิลิเม็นต์ประเภที่เรียกว่า “อิลเม็นต์ว่าง” - ค่าแอตทริบิวต์ต้องบรรจุอยู่ภายในสัญลักษณ์ ' (Single Quote) หรือ " (Double Quote) เสมอ - อิลิเม็นต์ว่าง (Empty Element) หากมีการกำหนดเพื่อใช้งานอิลิเม็นต์ว่าง ต้องสร้างให้ถูกต้องตามหลักการคือ อลิเม็นต์ว่างต้องมีรูปแบบใดรูปแบบหนึ่งดังนี้ รูปแบบที่ 1 อิลิเม็นต์ที่มีแท็กเปิดและแท็กปิด โดยที่ไม่มีข้อความอยู่ระหว่างแท็ก <…></…>เช่น <book></book> รูปแบบที่ 2 อิลิเมนต์ที่มีแท็กคำสั่งและภายในแท็กปิดท้ายด้วยสัญลักษณ์ / คือ <…/> เช่น <book/> อิลิเม็นต์ว่างสามารถบรรจุแอตทริบิวต์ได้ เหมือนอิลิเม็นต์ทั่วไป เช่น <book author="baldwin" price="$9.95" /> - ต้องไม่มีตัวอักษรที่ใช้งานในแท็ก เช่น ตัวอักษร < และ > ถูกใช้เป็นส่วนประกอบของแท็ก หรือตัวอักษร & ซึ่งถูกใช้สำหรับแสดงสัญลักษณ์พิเศษ หากมีความจำเป็นต้องการใช้งาน ให้ใช้ &lt; สำหรับแสดงตัวอักษร < &amp; สำหรับแสดงตัวอักษร & - อิลิเม็นต์ต้องซ้อนกันอย่างมีรูปแบบ หากมีการสร้างเอกสาร XML ที่มีการวางซ้อนกันของอิลิเม็นต์ในหลายๆชั้น การวางซ้อนกันต้องมีรูปแบบเป็นลำดับชั้น ห้ามวางอิลิเม็นต์ในลักษณะที่ชั้นไขว้กัน เช่น <book> <chapter number="1"> <paragraph> </paragraph> </chapter> </book> ตัวอย่างด้านบนเป็นเอกสารที่อิลิเม็นต์วางซ้อนกันอย่างถูกต้อง <book> <book>
  • 18.
    <chapter number="1"> <paragraph> </chapter> </paragraph> </book> ตัวอย่างด้านบนเป็นเอกสารที่วางซ้อนอิลิเม็นต์อย่างไม่ถูกต้อง เอกสารที่ถูกกำหนดตามรูปแบบที่ถูกต้อง ถูกเรียกว่าเอกสารที่มีโครงสร้างที่ดีหรือWell-defined ดังนั้น XML จึงเป็นรูปแบบที่ใช้สร้างเอกสารในแบบ Well-Defined การที่จำเป็นต้องสร้างเอกสารที่มีลักษณะถูกหลักเนื่องจากเพื่อให้ขบวนการเร็นเดอร์สามารถทำงานได้อย่างถูกต้อง และสมบูรณ์ หากเอกสารมีโครงสร้างที่ไม่ถูกต้องแล้ว นั่นเป็นที่มาของเอกสารที่ไม่ดีซึ่งผลลัพธ์ที่ได้จะไม่ถูกต้องตามความต้องการของผู้สร้างด้วย ข้อแนะนำ เนื้อข้อมูลคือส่วนของข่าวสาร แท็ก แอตทริบิวต์ และเนื้อข้อมูลคือส่วนประกอบของอิลิเม็นต์ แอตทริบิวต์คือส่วนขยายของแท็กให้กับเนื้อข้อมูลภายใน 3.7 การใช้งานแอตทริบิวต์ จากที่กล่าวให้ทราบแล้วว่าแอนทริบิวต์คือส่วนที่อยู่ภายในแท็กเปิด (แท็กบางแท็กไม่จำเป็นต้องมีแอตทริบิวต์) และสามารถมีแอตทริบิวต์ได้มากกว่าหนึ่งส่วน โดยแอตทริบิวต์จะมาช่วยให้ความหมายเพิ่มเติมจากคำสั่งแท็ก เช่นหากพูดถึงสิ่งของเฉยๆ ผู้ฟังจะไม่สามารถรู้ได้เลยว่าเรากำลังกล่าวถึงสิ่งของประเภทไหน และถ้าหากเรากล่าวว่าสิ่งของที่เรียกว่าปากกา หรือสิ่งของที่เรียกว่าดินสอ ผู้ฟังก็สามารถรู้ได้ทันทีว่าผู้พูดกำลังกล่าวถึงสิ่งของใด บางท่านอาจคิดไปว่าแล้วทำไมไม่พูดถึงดินสอ หรือปากกาไปเลยละ ซึ่งหากสิ่งของนั้นเป็นสินค้าที่เราทำการจำหน่าย เป็นไปไม่ได้ที่เราจะเก็บข้อมูลเฉพาะดินสอ และเก็บข้อมูลเฉพาะปากกา เท่านั้นเราสามารถนำมารวมกันโดยใช้ส่วนแอตทริบิวต์แยกให้เห็นว่าสินค้าที่จัดเก็บไว้คืออะไร กรณีแอตทริบิวต์ที่มีมากกว่าหนึ่งส่วน ตัวอย่างเช่นหากกำลังพูดถึงส้ม และให้แอตทริบิวต์ของชนิดส้ม รสชาติของส้มแล้วก็สามารถชี้ให้เห็นถึงส้มหลายรูปแบบ เช่น ส้นโอรสเปรียว ส้มเขียวหวานรสหวาน ส้มสายน้ำผึ้งรสหวานหอม เป็นต้น เมื่อพูดถึงลักษณะของมนุษย์ มนุษย์ก็มีแอตทริบิวต์เหมือนกัน ผู้อ่านลองหลับตานึกดูซิว่าตัวท่านมีแอตทริบิวต์อะไรได้บาง ก่อนจะอ่านต่อไป ตัวอย่างของแอตทริบิวต์ของมนุษย์มีดังนี้ name="Joe" height="84" weight="176" complexion="pale" sex="male" training="Java programmer" degree="Masters"
  • 19.
    อาจมีการตั้งคำถามว่าควรมีแอตทริบิวต์จำนวนเท่าไรดี จำนวนแอตทริบิวต์ขึ้นอยู่กับการนำไปใช้งาน ซึ่งผู้สร้างจำเป็นต้องกำหนดว่าเนื้อความเอกสารควรจะมีการใช้งานอะไรบ้าง และก็ไม่จำเป็นต้องมีแอตทริบิวต์ที่เหมือนกันในอิลิเม็นต์เดียวกันหากมีการใช้งานที่แตกต่างกันออกไป ลองเปรียบเทียบกับแอตทริบิวต์ของมนุษย์ ที่มีการใช้งานที่ไม่เหมือนกัน -แอตทริบิวต์ของนักกีฬาบาสเก็ตบอลชาย หากท่านกำลังรวบรวม รายชื่อนักกีฬาบาสเก็ตบอล สำหรับแข่งขันในกีฬาประเภททีมชายแล้ว แอททริบิวต์ที่บ่งบอกถึงเพศ จำเป็นอย่างยิ่ง สำหรับการพิจารณา รวมถึงน้ำหนัง และส่วนสูงที่ต้องการด้วย - แอททริบิวต์ของโปรแกรมเมอร์ ในทางตรงกันข้ามกันหากกำลังพิจารณาถึงบุคคลที่จะมาเป็นโปรแกรมเมอร์ แอททริบิวต์ที่เกี่ยวกัน น้ำหนัก ส่วนสูง ก็ไม่เป็นสิ่งที่จำเป็น แต่สิ่งที่สำคัญกลับเป็นแอททริบิวต์ของการอบรม (Training) และการศึกษา (Degree) รวมถึงความถนัด (Skill) แทน 3.8 โปรแกรมควบคุมการเร็นเดอร์ คงจะจำกันได้ว่าขบวนการเร็นเดอร์คือการแปลงเอกสาร XML ให้เป็นลักษณะ รูปแบบ หรือมุมมองที่เหมาะสมกับผู้อ่านเอกสารที่ควรจะได้เห็นเนื้อความที่บรรจุอยู่ภายในเอกสารที่ควบคุมด้วยภาษา XML และเอกสารหนึ่งเอกสารก็สามารถถูกแปลงเป็นเอกสารได้ในหลากหลายมุมมอง เช่น มุมมองสำหรับผู้อ่านทีเรียกดูผ่านจอมอนิเตอร์ มุมมองสำหรับงานพิมพ์ โดยที่มุมมองต่างๆยังคงบรรจุเนื้อความทั้งหมดอย่างครบถ้วนสมบูรณ์ จากโครงสร้างเอกสารที่ควบคุมด้วย XML หากนำมาผ่านขบวนการเร็นเดอร์ ผลลัพธ์ที่ได้คือเอกสารที่ถูกใช้งานจริงๆ ดังนั้นหากมองย้อนกลับไปที่แอตทริบิวต์ของเอกสาร แอตทริบิวต์สามารถถูกโปรแกรมเร็นเดอร์ทำความเข้าใจต่างกันได้เมื่อนำไปแสดงผลในสภาพแวดล้อมที่แตกต่างกัน เช่น ในแต่ละบท (บ่งบอกด้วยแอตทริบิวต์ number จากตัวอย่างก่อนหน้า) เมื่อผ่านโปรแกรมเร็นเดอร์เพื่อพิมพ์ลงบนกระดาษ แต่ละบทจะเริ่มต้นหน้าแรกที่กระดาษด้านซ้ายส่วนบนเสมอ(ลองเปิดหนังสือแล้วเปิดไปที่หน้าแรกของแต่ละบท) ในขณะที่หากเอกสารผ่านโปรแกรมเร็นเดอร์บนจอคอมพิวเตอร์ก็จะให้มุมมองที่ต่อเนื่องกันไป SAX คือตัวอย่างของระบบหนึ่งที่มีความสามารถทางด้านเร็นเดอร์ โดยผู้ใช้สามารถกำหนดกลไกในการเร็นเดอร์ได้ด้วยตนเอง โดยอาศัยการควบคุมผ่านภาษาจาวา ซึ่งทำให้ผู้สร้างสามารถนำเอาเอกสาร XML ที่ถูกจัดโครงสร้างด้วยอิลิเม็นต์ต่างๆไปดำเนินการแสดงตามรูปแบบเฉพาะของตัวเองได้ สำหรับผู้เริ่มต้นศึกษาในเรื่องของการเขียนโปรแกรม การสร้างกลไกเร็นเดอร์ขึ้นมาใช้งานเอง อาจจะดูค่อนข้างยุ่งยาก แต่ถ้าทำความคุ้นเคยกับรูปแบบการทำงานและการจัดการได้อย่างดีแล้ว จะทำให้ผู้สร้างสามารถพัฒนาระบบเร็นเดอร์ขึ้นมาใช้เองตามคุณสมบัติเฉพาะด้านได้ ข้อแนะนำ บราวเซอร์ IE5.0 และ Netscape 6.0 คือตัวอย่างของโปรแกรมที่มีความสามารถเรนเดอร์เอกสาร XML ได้นอกเหนือจากความสามารถทางด้านเว็บ 3.9 ส่วนสนับสนุน XML ในการใช้งาน XML บางครั้งของการสร้างอาจมีความยุ่งยากอยู่พอสมควร ซึ่งในงานบางงานมีความจำเป็นต้องใช้รูปแบบอื่นๆเพื่อสนับสนุนการำใช้งาน XML เพื่อให้มีประสิทธิภาพและเป็นมาตรฐานยิ่งขึ้น ต่อไปนี้คือรูปแบบสนับสนุนร่วมกับการใช้งาน XML XSL (eXtensible Stylesheet Language)
  • 20.
    XSL คือรูปแบบของภาษาหนึ่งที่ถูกใช้เพื่อแปลงแปลงเอกสาร XMLให้อยู่ในรูปแบบของเอกสาร HTML เรียกง่ายๆว่าแปลง XML เป็น HTML นั่นเอง ซึ่งถือได้ว่าเป็นการเร็นเดอร์ในเบื้องต้น ที่เกี่ยวกับการแปลงเอกสารก่อนที่จะผ่านขบวนการเร็นเดอร์เพื่อการมองเห็นในขั้นสุดท้าย ดังนั้นเพื่อไม่ให้เกิดความสับสนในการทำความเข้าใจ จึงขออธิบายขั้นตอนของการทำงานทั้งหมดของเอกสาร XML ซึ่งมีลำดับดังนี้ ขั้นตอนที่ 1 แยกข้อมูล (เนื้อข้อมูล) ให้มีโครงสร้างด้วย XML ขั้นตอนที่ 2 แปลงเอกสาร XML ในข้อ 1 โดยอาศัยข้อกำหนดในอิลิเม็นต์ให้เป็นเป็นเอกสาร HTMLด้วย XSL ขั้นตอนนี้อาจมีการเสริมด้วย CSS ในบางช่วง (CSS อาจไม่จำเป็นในการใช้งาน) ขั้นตอนที่ 3 แสดงเอกสารด้วยโปรแกรมที่เข้าใจเอกสาร HTML หรือขั้นตอนการเร็นเดอร์ เช่น บราวเซอร์ ทั้งหมดถือเป็นขั้นตอนหลักๆที่พอจะทำให้พอเห็นภาพการทำงานและการใช้งาน XML ได้โดยง่าย XSL คือภาษาที่มีความซับซ้อนอยู่พอควร เนื่องจากในตัวภาษาจะมีรูปแบบการทำงานที่คล้ายคลึงกับภาษาคอมพิวเตอร์ ดังนั้นการสร้างเอกสาร XSL อาจทำให้เกิดข้อผิดพลาดขึ้นได้เหมือนกับการเขียนโปรแกรมด้วยภาษาคอมพิวเตอร์ทั่วไป ซึ่งการแก้ไขข้อผิดพลาดคือการใช้โปรแกรมที่มีความสามารถในการตรวจสอบที่เรียกว่า “ดีบักเกอร์ (Debugger)” เช่นกัน XSL ก็มีดีบักเกอร์ด้วยเหมือนกันซึ่งเรามักจะเรียกว่า XSL Debugger DTD (Document Type Definition) DTD คือข้อมูลที่ใช้กำหนดกฎเกณฑ์เอกสารที่บรรจุอยู่ในไฟล์หนึ่งไฟล์ (หรือหลายไฟล์หากเป็นการใช้งานร่วมกัน) ข้อกำหนดกฎเกณฑ์ของเอกสาร ใช้สำหรับกำหนดวิธีการใช้งานอิลิเม็นต์ที่ถูกต้อง เพื่อให้ผู้สร้างเอกสาร XML สามารถใช้อิลิเมต์ตามข้อกำหนดที่ระบุไว้ในเอกสาร DTD เช่น <!ELEMENT ITEM (#pcdata)> <!ELEMENT LIST (ITEM)+> จากตัวอย่างด้านบนเป็นตัวอย่างที่แสดงหลักและวิธีการใช้งานอิลิเม็นต์สองตัวคือ <LIST> และ <ITEM> โดยในบรรทัดแรกเป็นกฎเกณฑ์ที่บอกถึงว่าอิลิเม็นต์ ใช้แท็ก <ITEM> ในการควบคุมข้อมูล (เมื่อ #pcdata หมายถึงเนื้อข้อมูล) และในบรรทัดที่สองใช้กำหนดว่าอิลิเม็นต์ที่ใช้แท็ก <ITEM>ต้องอยู่ภายในอิลิเม็นต์ที่ใช้แท็ก <LIST> เอกสาร DTD เป็นไฟล์ข้อมูลที่บรรจุกฎเกณฑ์ต่างๆในการควบคุมการใช้อิลิเม็นต์อย่างถูกต้อง หรือเรียกว่าเป็นข้อกำหนดมาตรฐานนั่นเอง การใช้งาน DTD ควบคุมเอกสารนี้นอกจากจะมีประโยชน์ในการทำให้เอกสาร XML มีรูปแบบที่มีความเป็นมาตรฐานและเข้าใจได้จากผู้ที่รู้จัก DTD ของเอกสาร XML แล้วระบบการเร็นเดอร์ยังสามารถทำความเข้าใจกับตัวเอกสารได้ดีและสามารถใช้งานได้อย่างถูกต้องอีกด้วย เมื่อผู้อ่านอ่านมาถึงตรงนี้อาจจะรู้สึกว่าเอกสาร XML มีความยุ่งยากอยู่พอสมควรเพราะผู้สร้างต้องทำความเข้าใจกับ DTD, XML, XSL, HTML และ CSS และรู้สึกว่าการสร้าง DTD คงเป็นเรื่องที่ยุ่งยากเลยทีเดียว แต่อย่างพึงกังวลมากครับซึ่งมีข้อควรรู้เกี่ยวกับ DTD ก็คือมีกลุ่มหลายกลุ่มที่กำหนดมาตรฐานสำหรับการสื่อสารข้อมูลด้วย XML ได้พยายามสร้างเอกสาร DTD ไว้ให้ใช้งานอยู่แล้ว ดังนั้นผู้สร้างอาจจะหันไปให้ความสนใจกับ DTD ที่ถูกสร้างขึ้นมาเป็นมาตรฐานแทนที่จะลงมือสร้างด้วยตนเอง ข้อแนะนำ รายละเอียดของเอกสาร DTD ที่เป็นมาตรฐาน ศึกษาข้อมูลเพิ่มเติมได้ที่ http://www.XML.com
  • 21.
    3.10 สรุปการใช้งานเอกสาร XML เอกสารหน้าที่ เนื้อข้อมูล คือเนื้อข้อมูลที่แสดงต่อผู้ใช้ (ตัวอักษร, รูปภาพ หรือข้อมูลมัลติมีเดีย) DTD กำหนดกฎเกณฑ์การใช้งานอิลิเม็นต์ให้เป็นมาตรฐาน XML กำหนดโครงสร้างของเอกสาร XSL แปลงเอกสาร XML ให้เป็น HTML CSS ใช้ร่วมกับ HTML เพื่อกำหนดรูปแบบพิเศษในการแสดงผลลัพธ์ HTML เอกสารที่ถูกเร็นเดอร์เพื่อแสดงผลลัพธ์ขั้นสุดท้าย ระบบเร็นเดอร์ ขบวนการตีความหมายของเอกสาร HTML (อาจมี CSS ประกอบอยู่) เพื่อแสดงผลยังอุปกรณ์ที่ผู้เรียกดูใช้งาน ตารางการใช้งานเอกสารและสิ่งที่เกี่ยวข้องกับ XML 3.11 ประโยชน์ของการใช้เอกสาร XML การนำเอาหลักการของ XML มาใช้กับเอกสารเพื่อให้มีโครงสร้างเกิดขึ้น สามารถนำมาซึ่งประโยชน์อย่างมากมายในอนาคต ซึ่งพอสรุปได้ดังนี้ - เอกสารที่สอดคล้องกับอนาคต โดยมีการคาดกันว่าในอนาคตบริษัทยักษ์ใหญ่ต่างๆด้านไอที และคอมพิวเตอร์ทั้งซอฟต์แวร์หรือฮาร์ดแวร์ก็ตาม ได้หันมาร่วมมือกันพัฒนาโครงสร้างเอกสาร และระบบการเร็นเดอร์และทำเป็นแผนการดำเนินการไว้ ทำให้รูปแบบและโครงสร้างของเอกสารมีความเป็นมาตรฐาน - เอกสารในระบบพาณิชย์อิเล็กทรอนิกส์ (E-commerce) มีการตั้งกลุ่มขึ้นมาเพื่อร่วมกันกำหนดมาตรฐานโครงสร้างข้อมูล ที่เหมาะสมกับการทำธุระกรรมทางการค้า - ผู้ค้าและผู้ซื้อมีความเป็นอิสระ ผู้พัฒนาเทคโนโลยีจะมีความอิสระในการเพิ่มศักยภาพในผลิตภัณฑ์ของตัวเอง ไม่จำเป็นต้องมากังวลรูปแบบการสื่อสาร ที่จะต้องออกแบบมาเฉพาะ ทำให้ลูกค้าต้องยึดติดกับผลิตภัณฑ์รายใดรายหนึ่ง เมื่อข้อมูลอยู่ในเอกสาร XML แล้ว ผลิตภัณฑ์ต่างๆ ก็จะมีรูปแบบข้อมูลที่สามารถแลกเปลี่ยนกันได้ โดยที่ไม่ต้องไปพะวงกับเทคโนโลยี ที่ไม่สอดคล้องกันในปัจจุบันได้ - ลดค่าใช้จ่าย ผลที่ตามมากับเทคโนโลยีที่สามารถแลกเปลี่ยนข้อมูลซึ่งกันและกันได้ ทำให้ค่าใช้จ่ายที่จะต้องสูญเสียไป ในปัจจุบัน สำหรับการสื่อสารข้อมูลที่มีรูปแบบที่หลากหลายถูกขจัดออกไป นั้นเป็นผลดีสำหรับยุคการสื่อสารด้วย XML ที่ลดทอนค่าใช้จ่ายลงไปอย่างมาก ในบทนี้มีเนื้อหารายละเอียดการใช้งานของเอกสารที่บรรจุไว้บนเว็บเซิร์ฟเวอร์ ที่สามารถจัดการและปรับแต่งเอกสารเพื่อให้ส่งให้กับเว็บบราวเซอร์ในการนำเสนอต่อผู้ใช้ ซึ่งเอกสารต่างๆนี้เป็นสามารถสร้างได้จากเซิร์ฟเล็ตหรือ JSP ดังนั้นเมื่อผู้อ่านได้รู้จักกับเอกสารแบบต่างๆแล้ว ในขั้นตอนต่อไปจะเริ่มเข้าสู่เนื้อหาของการพัฒนามากยิ่งขึ้น โดยเริ่มต้นด้วยการเตรียมสภาพแวดล้อมในการทำงานก่อน นั้นคือการจัดเตรียมและการติดตั้งโปรแกรมต่างๆที่จำเป็นในการใช้พัฒนาระบบ ทั้งตัวคอมไพล์เลอร์และโปรแกรมสนับสนุนอื่นๆ