javacentrix com chap03-0
TRANSCRIPT
บทท 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" />
- ตองไมมตวอกษรทใชงานในแทก เชน ตวอกษร < และ > ถกใชเปนสวนประกอบของแทก หรอตวอกษร &
ซงถกใชสำหรบแสดงสญลกษณพเศษ หากมความจำเปนตองการใชงาน ใหใช
< สำหรบแสดงตวอกษร <
& สำหรบแสดงตวอกษร &
- อลเมนตตองซอนกนอยางมรปแบบ หากมการสรางเอกสาร 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 ดงนนเมอผอานไดรจกกบเอกสารแบบตางๆแลว ในขนตอนตอไปจะเรมเขาสเนอหาของการพฒนามากยงขน โดยเรมตนดวยการเตรยมสภาพแวดลอมในการทำงานกอน นนคอการจดเตรยมและการตดตงโปรแกรมตางๆทจำเปนในการใชพฒนาระบบ ทงตวคอมไพลเลอรและโปรแกรมสนบสนนอนๆ