Why do we need DHTML, XHTML, XML, CSS?

Why do we need DHTML,XHTML,XML,CSS?

DHTML

dynamic HTML เป็นกลุ่มของคำสำหรับส่วนประกอบของภาษา Hypertext Markup Language (HTML) ใหม่ และตัวเลือกที่จะให้ผู้ใช้สร้างเว็บเพจมีภาพเคลื่อนไหวมากขึ้นและตอบสนองผู้ใช้แบบ interactive มากกว่า HTML เวอร์ชันก่อน ส่วนใหญ่ของ dynamic HTML ได้รับการระบุใน HTML 4.0 ตัวอย่างของเพจ dynamic HTML เช่น

1) สีตัวอักษรของหัวข้อเปลี่ยนเมื่อเมาส์เคลื่อนผ่าน

2) ยินยอมให้ผู้ใช้ในการ "drag and drop" ภาพไปยังที่อื่นบนเว็บเพจ dynamic HTML ยอมให้เอกสารสามารถดูและทำงาน เหมือนโปรแกรมประยุกต์บน desk top หรือมัลติมีเดีย
Netscape Navigator 4.0 และ Microsoft Internet Explorer 4.0 มีส่วนของ dynamic HTML ซึ่งโปรแกรมทั้งสองสนับสนุน HTML 4.0 และมีส่วนเพิ่มที่สนับสนุนเฉพาะ browser สิ่งที่เป็นอุปสรรคในการใช้ dynamic HTML คือผู้ใช้จำนวนมากยังคงใช้ browser รุ่นเก่า web site ต้องสร้างเป็น 2 เวอร์ชัน เพื่อรองรับ browser ที่เหมาะสม

HTMLพื้นฐานคืออะไร HTML เป็นภาษาหรือ code ที่ใช้สร้าง เว็บเพจ โดยแสดงผลผ่าน browser ซึ่งจะแปลงหน้าโคดนี้ เป็น ข้อความ ภาพ และอื่นๆ ตามที่สร้างไว้ แม้ว่าปัจจุบัน จะมีโปรแกรม เครื่องมือ ที่ช่วยสร้าง Web Page เช่น Microsoft Frontpage, Macromedia Dream Weaver, Edit Plus ซึ่งอํานวยความสะดวกในการสร้างหน้า HTML ในลักษณะ WYSIWYG (What You See Is What You Get) แต่หากเรามีความเข้าใจภาษา HTML ก็จะเป็นประโยชน์อย่างมาก เพราะจะทําให้เรา สามารถแก้ไข code HTML ได้โดยตรง ตัดต่อ แปะ script ที่ได้มาเพื่อสร้างลูกเล่น สีสันให้ web page หรือปรับแก้ code ที่ generate โดยโปรแกรมเหล่านี้ ซึ่งมัก generate มากเกิน สําหรับเผื่อใช้ ทําให้ไฟล์ HTML มีขนาดใหญ่ เกินความจําเป็น และแสดงผลช้า

ตัวอย่าง โครงสร้างหน้า HTML พื้นฐาน

<HTML>

<Head>

<Title>หัวข้อ ของ Web Title </Title>

</Head>

<Body>

ส่วนเนื้อหา ประกอบด้วยข้อความ ตาราง รูป และวัตถุอื่นๆ

</Body>

</HTML>

ตัวอย่าง โค้ดของ DHTML

                 ในส่วน Body ของหน้าเว็บเพจหนึ่งๆ อาจประกอบด้วยส่วนประกอบหลักต่างๆ ดังนี้
                 Frame แบ่งโครงสร้างของหน้าเป็นส่วนๆ โดยแต่ละส่วน ถือเป็นไฟล์ HTML แต่ละไฟล์
                 Table แบ่งโครงสร้างของหน้าเป็นตารางหลายเซลล์ หลายคอลัมน์ แต่ละแถว อาจมีจํานวนคอลัมนน์ไม่เท่ากัน หรือแต่ละคอลัมน์            อาจมีจํานวนแถวไม่เท่ากันได้
                 Paragraph แสดงข้อความเมื่อขึ้นย่อหน้าใหม่
                 Font แสดงรูปแบบตัวอักษร อาจเติมสี กําหนด Font ทําตัวหนา ตัวเอียง ได้
                 List แสดงข้อมูลเป็นรายการ โดยอาจเป็น Bullet หรือเป็นตัวเลข (Order List) ได้
                 Image แทรกรูปภาพ / Flash Object แทรกเป็นภาพเคลื่อนไหวในรูปแบบ Flash ได้
                 Link ใช้สร้าง Link โดยอาจ Link จากข้อความ หรือจากภาพ ก็ได้ สามารถ Link แล้วเป็ดเป?น Window ใหม่ หรือ Window เดิม ได้ อาจ Link ไปไฟล์อื่นในไซต์, Link เป็น URL ใหม่เลยก็ได้ หรือ Link เป็นไฟล์ เช่น Word, Power Point ก็ได้
                 HTML>…</HTML> เป็นคําสั่งสําหรั บเริ่มตัน code ส่วนที่เป็นภาษา HTML
                 <HEAD>…</HEAD> ใช้กําหนดรายละเอียดของหัวเรื่อง และรายละเอียด ในส่วน Head จะประกอบด้วย
                 Tag HTML คือ tag <TITLE>..</TITLE>, tag <SCRIPT>…</SCRIPT>
                 <META…> ใช้กำหนดรายละเอียด อื่นๆ ซึ่งจะกล่าวต่อไป
                 <BODY>…</BODY> เป็นส่วนแสดงรายละเอียด คือส่วนที่เนื้อหาที่แสดงทางหน้าจอทั้งหมด ส่วนประกอบ หลัก ได้แก่ paragraph, image, font, link, table สําหรับใช้จัดหน้า เป็นต้น

                  แนวคิดและส่วนประกอบของ dynamic HTML
ทั้ง Netscape และ Microsoft สนับสนุน
- การมองแบบ object-oriented ของเว็บเพจและส่วนประกอบ
- cascading style sheet และ ชั้นของเนื้อเรื่อง
- dynamic fonts
- การมองแบบ object-oriented ของส่วนประกอบเพจ
แต่ละส่วนประกอบของเพจ (หัวข้อ. ย่อหน้า. ภาพ เป็นต้น) ได้รับการมองเป็นอ๊อบเจค (Microsoft เรียกว่า "Dynamic HTML Object Model ") เช่น แต่ละหัวข้อบนเพจสามารถตั้งชื่อ กำหนดคุณลักษณะของข้อความและสี การระบุด้วยชื่อในโปรแกรมขนาดเล็กหรือ สคริปต์บนเพจ หัวข้อ หรือส่วนประกอบอื่นบนเพจสามารถเปลี่ยนผลลัพธ์ตาม event เช่น การเคลื่อนเมาส์ผ่านการคลิก หรือภาพสามารถย้ายจากที่หนึ่งไปอีกที่หนึ่ง โดยการ "drag and drop" อ๊อบเจคภาพด้วยเมาส์ (event เหล่านี้เป็นไปได้ที่จะสามารถมองเป็นความสามารถปฏิกิริยาของส่วนประกอบ หรืออ๊อบเจค) การเปลี่ยนแปลงใด ๆ จะเกิดขึ้นทันทีทันใด (เนื่องจากสมาชิกทั้งหมด หรืออ๊อบเจคได้รับการส่งเป็นส่วนของหน้าเดียวจาก web server) ดังนั้น ความแตกต่างก็สามารถเป็นพิจารณาเป็นคุณสมบัติที่ต่างกันของอ๊อบเจค
ไม่เพียงแต่การเปลี่ยนตัวอักษรหรือสี แต่ทุกอย่างที่เก็บไว้ ภายในอ๊อบเจคหัวข้อ สามารถเปลี่ยนด้วยเนื้อหาที่แตกต่าง หรือส่วนเพิ่มของ HTML เช่น ตัวอักษร Microsoft เรียกว่า "text range technology")

                Style sheet และ Layer
เป็นการอธิบายคุณลักษณะเริ่มต้นของ style (รวมถึง ผัง แบบของฟอนต์ และขนานของข้อความ เช่น หัวข้อ และเนื้อเรื่อง ) ของเอกสาร หรือส่วนย่อยของเอกสาร สำหรับเว็บเพจ style sheet อธิบายถึงสีพื้นหลัง ภาพ สี hypertext link และเนื้อหาของเพจ style sheet ช่วยทำให้มั่นใจกลุ่มของเพจ หรือทั้งหมดมีความคงที่ในเอกสาร หรือ web site
dynamic HTML ได้รวมความสามารถในการระบุ style sheet ในแบบ "cascading style sheet"(ที่การเชื่อมหรือการระบุความแตกต่างของ style sheet หรือคำสั่ง style ด้วยการกำหนดระดับล่วงหน้า ภายในกลุ่มหรือเพจที่สัมพันธ์ ส่วนผลลัพธ์ของ interactive กับผู้ใช้ style sheet ใหม่สามารถสร้างการประยุกต์และผลลัพธ์ที่เปลี่ยนโฉมหน้าของเว็บเพจ ผู้ใช้สามารถใช้ style sheet ชนิดหลายชั้นภายในเพจ style sheet อาจจะให้แปรเปลี่ยนเพียงส่วนประกอบเดียว
Layer เป็นทางเลือกใหม่ในการใช้ style sheet หรือเป็นวิธีการอีกวิธีในการแปรเปลี่ยนเนื้อหาของเพจโดยให้ เนื้อหาของเพจ Layer สามารถแทนที่ได้ (Overlay) เนื้อหาของส่วนที่ปรากฏ Layer สามารถโปรแกรมให้ปรากฏเป็นส่วนของเวลาการนำเสนอ หรือ เป็นผลลัพธ์ของ interactive กับผู้ใช้ internet Explorer 4.0 Microsoft สนับสนุน Layer ใน style sheet และ Netscape สนับสนุน style sheet แต่นำเสนอ tag ของ HTML (ซึ่ง Microsoft ไม่สนับสนุน) วิธีการทั้งสองได้รับการพิจารณาโดย W3C Working Committee และ บริษัททั้งสองกล่าวว่าพวกเขาจะสนับสนุนการติดใจของ W3C ในการแนะนำวิธีการ

                 Programming
ถึงแม้ว่า JavaScript, Java, applet และ ActiveX ได้รับการนำเสนอในเวอร์ชันก่อนของเว็บเพจ dynamic HTML นัยยะการเพิ่มจำนวนรวมของการโปรแกรมในเว็บเพจ เนื่องจากส่วนประกอบจำนวนมาก สามารถได้รับการกำหนดโปรแกรม

                 Dynamic Font
Netscape ได้รวม dynamic font เป็นส่วนของ dynamic HTML ส่วนนี้ของ Netscape 's Navigator browser ในชุดของ communicator ให้การออกแบบเว็บเพจรวมถึงไฟล์ของฟอนต์ ที่เก็บแบบฟอนต์ที่เจาะจงแบบ ขนาด และสี เป็นส่วนหนึ่งของเว็บเพจและ download ฟอนต์ด้วยเพจ ทำให้การเลือกฟอนต์ไม่ขึ้นต่อ browser

ศัพท์เกี่ยวข้อง ActiveX, applet, browser, Cascading Style Sheet, HTML, Java, JavaScript

Example Website www.popcornfor2.com , www.pingbook.com,

Refference www.thaicss.com, www.thai-programmer.com, www.widebase.net, www.en.wikipedia.org TOP

XHTML

World Wide Web Consortium (W3C) อธิบายว่า XHTML (Extensible Hypertext Markup language) เป็น "การกำหนดใหม่ของ HTML 4.0 ในฐานะเป็นการประยุกต์ของ Extensible Markup language (XML)" สำหรับผู้ที่ไม่คุ้นเคยทั้ง 2 คำ HTML เป็นกลุ่มรหัส (หรือ Markup Language) ที่ผู้เขียนนำมาใส่ไว้ในเอกสาร เพื่อทำให้สามารถแสดงผลงาน World Wide World Wide Web ซึ่ง HTML 4 เป็นเวอร์ชันปัจจุบัน ส่วน XML เป็นโครงสร้างของกลุ่มกฏ สำหรับวิธีการกำหนดของข้อมูล ที่สามารถใช้ร่วมกันบนเว็บการที่เรียกว่า "Extensible Markup Language" เพราะทุกคนสามารถประดิษฐ์กลุ่มของ Markup เฉพาะสำหรับวัตถุประสงค์เฉพาะ และทุกคนสามารถใช้ได้ สามารถปรับและใช้สำหรับหลายวัตถุประสงค์ รวมถึงการปรากฏให้สิ่งที่พบเห็นบนเว็บเพจ จึงทำให้มีการเปลี่ยนกรอบของ HTML ให้เป็น XML ผลลัพธ์ คือ XHTML ซึ่งเป็นการประยุกต์พิเศษของ XML สำหรับเว็บเพจ

เป็นภาษาที่รวมเอาทั้ง HTML และ XML ไว้ด้วยกัน ประโยชน์ของมันคือการสร้างเว็บเพื่อการส่งข้อมูลทั่ว ๆ ไปอย่างหนึ่ง เพิ่มขีดความสามารถในการสร้างแท็กใหม่ ๆ ได้เองอย่างหนึ่ง (โดยที่เรากำหนดได้ด้วยว่าจะให้แท็กเหล่านั้นแสดงผลอย่างไร) รองรับภาษาอื่น ๆ ที่ใช้ XML เป็นฐาน เช่น ( SVG, MathML, chemML, SML) อีกอย่างหนึ่งและสุดท้ายคือ รองรับเทคโนโลยีในอนาคตซึ่งจะมี XML เป็นบทบาทหลัก เนื่องจากว่าในปัจจุบันนี้ มีความพยายามที่จะเข้าถึงเว็บด้วยอุปกรณ์ที่ไม่ใช่คอมพิวเตอร์มากขึ้นเช่น โทรศัพท์มือถือ โปรแกรมเสียงสังเคราะห์ ทีวี เบรลล์ หรืออุปกรณ์พกพาอื่น ๆ แต่เนื่องจากอุปกรณ์เหล่านี้ มีขนาดเล็กและอาจมีหน่วยความจำไม่มาก จึงอาจไม่สามารถประมวลผล HTML แบบทั่ว ๆ ไปได้เพราะไม่มีความสามารถที่จะแก้ข้อผิดพลาดได้หากมีการเขียนโค้ดไม่ถูกต้อง XHTML จึงเป็นทางเลือกที่ดีที่สุด เนื่องจากว่าเอกสาร XHTML นั้นจะต้องมีลักษณะที่เรียกว่า well-formed ไม่มีข้อผิดพลาด มีการเปิดปิดแท็กอย่างถูกต้อง ฯลฯ จึงทำให้สามารถแสดงผลเอกสารนี้ได้อย่างง่ายดาย หากเอกสารไม่ถูกต้อง ก็อาจจะไม่แสดงผลไปเลย เหมือนกับเอกสาร XML

ตามข้อเท็จจริง XHTML เป็นเวอร์ชันที่ตามของ HTML 4 อาจจะนับเป็น HTML 5 หรือเรียกว่า XHTML 1.0 นอกจากนี้ XHTML สนับสนุน Markup ของ HTML 4.0 ทั้งส่วนประกอบและคุณลักษณะทั้งหมด แต่ต่างจาก HTML โดย XHTML สามารถสร้างส่วนเพิ่มเติมจากผู้คนที่ใช้ ส่วนประกอบใหญ่และคุณลักษณะ สามารถกำหนดและเพิ่มในเว็บได ้ทำให้สามารถมีวิธีการใหม่ที่จะจัดการเนื้อ และโปรแกรมแบบเว็บเพจ ในส่วนที่มองเห็นไฟล์ XHTML ดูเหมือนกับไฟล์ HTML

ข้อได้เปรียบ
จากคำกล่าวของ W3C ข้อได้เปรียบคือ "extensibility and portability"
extensibility หมายถึง แนวคิดใหม่ สำหรับการสื่อสารและการนำเสนอออกมาของเว็บ สามารถทดลองใช้งานโดยไม่ต้องรอ HTML เวอร์ชันใหม่และการสนับสนุนของ browser คุณลักษณะหรือ tag ใหม่ สามารถกำหนดได้และโปรแกรมที่ปลายทางสามารถทำตามคำสั่งได้ สิ่งใหม่จะเกิดขึ้นบนเว็บเพจ กลุ่มที่เจาะจงของ extension สำหรับ XHTML คือ แผนของ expression ทางคณิตศาสตร์, vector graphic และการประยุกต์ด้านมัลติมีเดีย ถ้า extensibility เป็นการนำไปสู่เพจที่ซับซ้อน และโปรแกรมขนาดใหญ่ขึ้น ข้อได้เปรียบ portability หมายถึง เว็บเพจสามารถทำให้ง่ายขึ้นกว่าที่เคยเป็นทำให้เครื่องมือขนาดเล็ก สิ่งนี้สำคัญมากสำหรับอุปกรณ์เคลื่อนที่ และอุปกรณ์ตามบ้านที่มีโมโครโพรเซสเซอร์ที่มีโปรแกรมอยู่และหน่วยความจำขนาดเล็ก XHTML กำหลดระดับหลายระดับของ Markup ที่ซับซ้อน และแต่ละเอกสารระบุระดับความซับซ้อนตั้งแต่เริ่มต้น โปรแกรมเป็นอุปกรณ์ขนาดเล็กที่คาดว่าไฟล์คำสั่ง XHTML จะระบุระดับง่ายที่สุดของความซับซ้อนที่สามารถดูแล โดยโปรแกรมขนาดเล็กและหน่วยความจำ

ตัวอย่าง โค้ดของ XHTML

                ส่วนที่แตกต่างและพิเศษ
- XHTML ต้องการกฎของรหัสที่ชัดเจน เช่น ต้องการเครื่องหมายการเปิด และปิดส่วนประกอบ (หรือไวยากรณ์) และส่วนประกอบทั้งหมดต้องเป็นอักษรตัวเล็ก HTML ไม่สนใจเครื่องหมาย
- ในความหมายนี้ XHTML จะยุ่งกว่า HTML อย่างไรก็ตาม ไม่จำเป็นต้องยากกว่าในการอ่าน เพราะความเคร่งครัด จะบังคับให้มีลำดับมากขึ้นในการเขียนคำสั่ง นอกจากนี้ editor ส่วนใหญ่และเครื่องมือสร้างไฟล์ เพราะสร้างยังให้อ่านได้ง่าย
- XHTML มีความเป็นโครงสร้างและแนวคิดเกี่ยวกับเนื้อหามากกว่า เมื่อรวมกับ style sheet จะมีวิธีการสร้างมากกว่า
- XHTML ทำให้ง่ายขึ้นในการเพิ่มส่วนประกอบใหม่ สำหรับผู้ที่ต้องการเพิ่ม (และพัฒนา browser หรือโปรแกรมประยุกต์อื่นสนับสนุน)

               ข้อกำหนดของ XHTML กำลังอยู่ในขั้นตอนการร่างใน W3C

                รายละเอียดสามารถ ดูเพิ่มเติมได้จาก
                encyclozine.com, Alan Richmond : The first XHTML web sites.
                W3C web site : The official XTML 1.0: The Extensible Hypertext Markup Language.
                WDVL.com, Alan Richmond : Introduction to XHTML, with examples.

ศัพท์เกี่ยวข้อง data, HTML 4.0, XML, Mark up, Syntax

Example Website The first XHTML Websites : http://encyclozine.com/

Refference www.thaicss.com , www.en.wikipedia.org , http://encyclozine.com/, www.widebase.net TOP

XML

XML (Extensible Markup Language) เป็นวิธีการที่ยืดหยุ่นในการสร้างรูปแบบสารสนเทศร่วม และการใช้ร่วม ทั้งรูปแบบและข้อมูลใน World Wide Web, Internet และที่ต่าง ๆ เช่น ผู้ผลิตคอมพิวเตอร์ที่เห็นด้วยกับมาตรฐานการอธิบายสารสนเทศของสินค้า จากนั้นทำการสร้างรูปแบบสารสนเทศของสินค้า โดยมาตรฐานเดียวกัน ทำให้ผู้ใช้สามารถส่งโปรแกรมที่เรียกว่า Intelligent Agent ไปยัง Web site ต่าง ๆ เพื่อเก็บข้อมูล และทำการเปรียบเทียบ ซึ่ง XML สามารถใช้โดยบุคคลทั่วไปหรือบริษัทที่ต้องการการใช้สารสนเทศทีมีอยู่

ภาษานี้สร้างขึ้นมาเพื่อการสร้างเอกสารที่เรียบง่ายและเข้าใจได้ไม่ยาก เนื่องจาก HTML นั้นมีข้อจำกัดที่ว่าไม่สามารถเพิ่มแท็กใหม่ ๆ เข้าไปได้ ทำให้การสร้างเอกสารอาจไม่บรรลุวัตถุประสงค์ของผู้ที่จะให้ข้อมูล XML นั้นเป็นภาษาที่เราสามารถสร้างแท็กขึ้นมาเองได้ และเราสามารถสร้างเอกสาร DTD ขึ้นมาได้ด้วยเพื่อที่จะใช้เป็นข้อกำหนดว่าจะมีแท็กใดได้บ้าง จะเอาไปใช้อย่างไร เป็นต้น แม้ว่า Browser จะไม่เข้าใจวิธีการแสดงผลแท็กที่เราสร้างขึ้นเอง นั่นก็ไม่ใช่ปัญหา เนื่องจากว่า XML ไม่ได้ถูกสร้างขึ้นมาเพื่อการสร้างเว็บที่สวยงาม แต่เพื่อการทำเอกสารที่ให้ความหมายได้อย่างดี สื่อความหมายชัดเจนมากขึ้น และมักจะใช้ในการส่งข้อมูลซึ่งก็แล้วแต่ว่าเราจะสร้าง application อะไรมาทำการประมวลผลข้อมูลเหล่านี้และจะแสดงผลอย่างไร

ข้อควรระวัง คือ เอกสาร XML นั้นจะมีข้อผิดพลาดไม่ได้เลย หากมีความผิดพลาดอย่างเช่น ลืมปิดแท็ก หรือแท็กเปิดกับแท็กปิดไม่เหมือนกันหรือมีแท็กคาบเกี่ยวกัน มันจะไม่แสดงผลเลยและเราจะประมวลผลไม่ได้

รูปแบบปัจจุบันของ XML ที่แนะนำโดย World Wide Web Consortium (W3C) นั้น มีความคล้ายคลึงกับภาษา HTML ที่ใช้สร้างเว็บเพจในขณะนี้ ทั้ง HTML และ XML ใช้สัญลักษณ์ "Markup" ในการเจาะจงเนื้อหาของเพจหรือไฟล์ ในภาษา HTML เจาะจงเนื้อหาของเว็บเพจสำหรับการแสดงออกมา เช่น < P > สำหรับการเริ่มย่อหน้าใหม่ ส่วนภาษา HTML เจาะจงเนื้อหาในแบบประเภทของข้อมูล เช่น เป็นการชี้ว่าข้อมูลที่มีอยู่เป็นหมายเลขโทรศัพท์ ซึ่งหมายความว่าไฟล์ XML สามารถประมวลผลข้อมูล โดยโปรแกรมหรือเก็บข้อมูลประเภทเดียวในเครื่องคอมพิวเตอร์อื่น และแสดงบนเว็บเพจ เช่น หมายเลขโทรศัพท์ ได้รับมา สามารถเก็บ แสดง และหมุนได้

XML เป็น Extensible และสัญลักษณ์ "Markup" ไม่จำกัดและกำหนดเองได้ต่างจาก HTML นอกจากนี้ ภาษา XML เป็นภาษาที่ง่ายและใช้ได้สะดวกกับ Subnet ของภาษา Standard Generalized Markup Language ซึ่งเป็นมาตรฐานในการสร้างโครงสร้างเอกสาร โดยมีการคาดว่า HTML และ XML จะใช้ร่วมกันสำหรับการสร้างเว็บเพจ โปรแกรมประยุกต์ของ XML ได้รวม Microsoft Channel Definition Format ซึ่งเจาะจงช่องทางในการติดต่อกับเว็บที่สามารถดาว์นโหลดมาที่ฮาร์ดดิสก์ และกำหนดช่วงเวลาของการปรับปรุงตามสารสนเทศที่เปลี่ยน โดยไฟล์ CDF จะเก็บตำแหน่งเว็บเพจและความถี่ในการปรับปรุง นอกจากนี้ยังครอบคลุมถึงการประยุกต์ของระบบธนาคาร การสั่งซื้อผ่าน E-commerce เป็นต้น

ตัวอย่างที่ 1 โค้ดของ XML

คลิ๊กภาพเพื่่อดูเพิ่มเติม

ตัวอย่างที่ 2 โค้ดของ XML

คลิ๊กภาพเพื่่อดูเพิ่มเติม

                รายละเอียดสามารถ ดูเพิ่มเติมได้จาก
                Microsoft : Building an Interactive Frequent-Flyer Web Site Using XML.
                IBM : XML Developer Web site.
                Robin Cover : The SGML/XML Web Page
              IBM : Introduction to XML.
                World Wide Web Consortium : Extensible Markup Language (XML)

ศัพท์เกี่ยวข้อง HTML

Example Website www.xml.com, www.sagehill.net

Refference www.thaicss.com , www.en.wikipedia.org , www.widebase.net, http://publib.boulder.ibm.com, www.javaworld.com TOP

CSS

Cascading Style Sheet (CSS) เป็นเว็บมีที่มาจากหลายแหล่ง ซึ่งกำหนดลำดับการทำงาน ถ้าข้อกำหนดของรูปแบบ element มีความขัดแย้งกัน cascading style sheet level 1 ที่แนะนำโดย World Wide Web Consortium (W3C) โดยได้รับการนำไปใช้ในเวอร์ชันล่าสุดใน web browser ของ Netscape และ Microsoft โดยการระบุ style sheet ที่เป็นไปได้ หรือคำสั่งที่สามารถค้นหาการแสดงของ element ในเว็บเพจ

Cascading Style Sheets (CSS) เป็น ภาษาสไตล์ชีทใช้ในการจัดรูปแบบของเอกสารที่เขียนในภาษามาร์กอัพ CSS เป็นภาษาที่สำคัญตัวหนึ่งในการเขียนเว็บเพจ ซึ่งเขียนในภาษา HTML และ XHTML แต่ก็ยังสามารถประยุกต์ใช้กับใน XML ซึ่งรวมถึง SVG และ XUL ด้วย มาตรฐาน CSS นั้น สร้างโดยกลุ่ม World Wide Web Consortium (W3C)

ระดับของ CSS ปัจจุบัน CSS แบ่งเป็น 3 ระดับ (level)

CSS level 1 ยอมรับเป็นมาตรฐาน ธันวาคม ค.ศ. 1996
CSS level 2 เริ่มร่าง ค.ศ. 1997 ยอมรับเป็นมาตรฐาน พฤษภาคม ค.ศ. 1998
CSS level 3 เริ่มร่าง ค.ศ. 1998 ปัจจุบัน (2005) ยังอยู่ในขั้นตอนการยอมรับเป็นมาตรฐาน

นับถึงปี 2007 ยังไม่มีเว็บบราวเซอร์ที่่่สนับสนุนมาตรฐาน CSS level 2 ครบทั้งหมด

เนื่องจากมีการนำ HTML มาใช้ผิด ๆ กันมาก โดยเฉพาะการนำแท็กอย่างแท็ก <font>, <b>, <i>, <u>, <big>, <small> และแอททริบิวต์อย่างเช่น align, bgcolor, background, border ฯลฯ ซึ่งถูกใช้ไปในการตกแต่งเอกสาร ทำให้เอกสาร HTML มีความซับซ้อนมาก ใช้เวลามากในการเขียนหรือออกแบบ จึงได้มีการแนะนำภาษาใหม่ที่เรียกว่า CSS นี้ขึ้นมา หน้าที่ของภาษานี้ก็คือ การตกแต่งเอกสารของ HTML หรือ XHTML หรือ XML ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ทั้งนี้ทั้งนั้นก็เพื่อลดการใช้ภาษา HTML ในการตกแต่งเอกสาร เพื่อให้เอกสาร HTML สะอาดขึ้น เข้าใจง่ายขึ้น แก้ไขง่ายและใช้เวลาน้อย CSS กับ HTML หรือ XHTML นั้นจะทำหน้าที่คนละอย่างกัน พร้อมกัน แต่ไม่รบกวนซึ่งกันและกันและแยกจากกันอย่างเด็ดขาด นั่นคือ HTML หรือ XHTML จะทำหน้าที่ในการวางโครงร่างเอกสารอย่างเป็นรูปแบบ ถูกต้อง เข้าใจง่าย ไม่ซับซ้อน ไม่มีการใช้แท็กผิดความหมาย ไม่เกี่ยวข้องกับการแสดงผล และ

CSS จะทำหน้าที่ในการตกแต่งเอกสารให้สวยงาม CSS นั้นพัฒนาไปมากแล้ว สามารถทำได้ถึงขึ้นที่ว่า วางวัตถุซ้อนกันได้ กำหนดความโปร่งใสได้ หมุนตัวอักษรตามองศาที่เรากำหนดได้ ตอนนี้เรามี CSS 3.0 แล้ว แต่ว่า Browser ส่วนใหญ่ยังไม่สนับสนุน CSS 2.0 นั้นเป็นตัวที่เราใช้ในปัจจุบัน ข้อดีของ CSS อีกอย่างหนึ่งก็คือ มันสามารถกำหนดการแสดงผลให้กับอุปกรณ์ต่าง ๆ ได้ด้วย เช่น เราอาจต้องการให้แสดงผลในจอคอมพิวเตอร์อย่างหนึ่ง แสดงผลเวลาสั่งพิมพ์อีกอย่างหนึ่ง แสดงผลในโทรศัพท์มือถืออีกอย่างหนึ่ง แสดงผลในทีวีอีกอย่างหนึ่ง แสดงผลในอักษรเบรลล์อย่างหนึ่ง หรืออาจจะกำหนดให้โปรแกรมสังเคราะห์เสียงอ่านข้อความต่าง ๆ ด้วยน้ำเสียงที่ต่างกันได้โดยใช้น้ำเสียงต่าง ๆ เช่น ตกใจ ดีใจ เสียใจ ได้ กำหนดความดังเสียงได้ ฯลฯ

จะเห็นได้ว่ามันจะทำให้ง่ายต่อการใช้งานกับอุปกรณ์ต่าง ๆ นั่นเอง อย่างเช่น จอโทรศัพท์มือถือมีขนาดเล็ก เราอาจจะใช้ CSS สั่งให้ซ่อนส่วนที่ไม่จำเป็นหรือลดขนาดตัวอักษรลง หรือเปลี่ยนการแสดงผลไปเลยก็ได้ คนพิการได้รับประโยชน์จาก CSS และ XHTML ตรงที่ว่า เขาสามารถเข้าใจเอกสารได้ดีมากขึ้น เนื่องจากว่า เนื้อหากับการแสดงผลถูกแยกออกจากกันอย่างเด็ดขาด ทำให้ไม่สับสน ผู้พิการบางคนมองไม่เห็น จึงไม่จำเป็นต้องเห็นความสวยงามในเว็บ แต่ต้องการข้อมูลที่เข้าถึงได้ ไม่ซับซ้อน นั่นหมายถึงเขาสามารถเลือกบริโภคเฉพาะเนื้อหาได้โดยที่ไม่มีเรื่องการแสดงผลมารบกวนเลย

                 CSS ให้การควบคุมที่มากกว่าในความสวยงามของเว็บเพจในการสร้างเพจ มากกว่าการออกแบบ browser หรือการดู โดย CSS เป็นแหล่งข้อกำหนดของ style สำหรับการจัดลำดับให้กับ element

               1. คุณสมบัติ TITLE กับคำสั่ง BODY
         2. element แบบ style กำหนดการระบุ style sheet เก็บการประกาศ style หรือ element แบบ LINK ที่เชื่อมกับเอกสารที่แยกออกที่เก็บ element แบบ style ในเว็บเพจ element แบบ style จะเก็บอยู่ระหว่างคำสั่ง TITLE กับคำสั่ง BODY
            3. การนำเข้า style sheet ใช้ CSS @import หรือการนำเข้าอัตโนมัติและรวมกับ style sheet ภายนอกด้วย style sheet ในปัจจุบัน
            4. คุณสมบัติของ style ที่ระบุโดย viewer หรือ browser
              5. style sheet เริ่มต้นกำหนดโดย browser

           โดย style sheet ของผู้สร้างเว็บเพจ จะได้รับการจัดลำดับก่อน แต่ยินยอมให้ browser มีวิธีการสำหรับ viewer ในการเขียนคุณสมบัติของ style ในบางกรณี เนื่องจาก browser ที่ต่างกันจะเลือกใช้ CCS1 แตกต่างกันซึ่งผู้สร้างเว็บเพจต้องทดสอบเพจด้วย browser ที่ต่างกัน

ตัวอย่าง โค้ดของ CSS

คลิ๊กภาพเพื่่อดูเพิ่มเติม

                 รายละเอียดสามารถ ดูเพิ่มเติมได้จาก
                การแนะนำที่ดีมากในการใช้ style sheet : Jakob Nielsen's Effective Use of Style Sheets.
                 site ที่เหมาะสมกับการเริ่มต้นศึกษา style sheet : W3C Web Style Sheets page, The CSS1 recommendation specifically.
                 แนะนำอ่านเพิ่มเติม http://www.thaicss.com/xhtml-xml-html-css.xhtml/

ศัพท์เกี่ยวข้อง CSS1, W3C

Example Website www.thaicss.com, www.divland.com, www.csszengarden.com, http://deanoakley.com/

Refference www.thaicss.com , www.en.wikipedia.org , http://encyclozine.com/, www.widebase.net, www.divland.com , www.callihan.com

TOP

Kanokwan Srikrajang
kano_saranghae@hotmail.com