Embed Size (px)
Citation preview
LAB2: HTML, XHML AND CSS2
Jakkrit TeCho,Ph.D. BIT
Maejo University Phrae Campus
Outlines
• What is the XHTML?
• HTML vs XHTML
• XHTML Syntax Rules
• DTD
• XHTML Validation
What is XHTML ?
XHTML (I)
• XHTML (ยอมาจาก Extensible Hyper Text Markup Language)
• XHTML เปนภาษาประเภท Markup Language ทเกดจากการน า XML และ HTML มารวมกน กลายเปนมาตรฐานใหมของ HTML ค าสงตางๆนนกยงเหมอนกบ HTML แตจะมความเขมงวดในเรองโครงสรางภาษามากกวา และมการตด tag และ attribute ทลาสมยออกไป
• จากขอเสยของ HTML ทเมอแสดงผลผานเบราเซอรของคายตางๆ เชน Internet Explorer, Firefox, Netscape, Opera และอนๆ ไดผลทแตกตางกน เวบเพจทออกแบบมาอยางดของเรา อาจดสวยงามถกตองใน IE แตกลบผดเพยนไปเมอดดวย Firefox
XHTML (II)
• องคกร W3C จงไดน า HTML 4.0 มาปรบปรงใหม โดยยดหลกการของ XML และไดเพมกฎเกณฑบางอยาง เพอใหการใชงานมความเขมงวด และเปนมาตรฐานยงขน ซงจะเปนแนวทางใหเบราเซอรคายตางๆ พฒนาโปรแกรมเวบ เบราเซอรโดยใชมาตรฐานเดยวกน รวมไปถงเวบเบราเซอรทตดตงบน Platforms ตางๆ เชน PDA หรอโทรศพทมอถอแบบ Smart Phone
• ดงนน ตอไปไมวาจะแสดงเวบเพจของเราในเบราเซอรคายใด กสามารถแสดงผลไดเหมอนกน อยางถกตอง และการใชงานอนเตอรเนต จะไมจ ากดอยแคบนเครองคอมพวเตอร แตสามารถขยายการใชงานออกไปไดกวางขน ไมวาจะเปน โทรศพทมอถอ หรออปกรณตางๆ
XHTML (III)
• XHTML เปนภาษาทถกก าหนดโดย W3C ใหเปนภาษามาตรฐานใหมทจะใชในการสรางเวบเพจตอไปในอนาคต เวบเบราเซอรทกคายจะรองรบการใชงาน XHTML
• อกทงในอนาคตปญหาการแสดงผลทไมเหมอนกน ในเวบเบราเซอรตางคายกนกจะหมดไป ดงนนเปนเรองด หากเราจะเรมเรยนร และท าเวบไซตใหไดมาตรฐาน
HTML vs XHTML
HTML vs XHTML (I)
• XHTML ไมไดตางจาก HTML มากมายอะไรนก เพยงแตวาเขมงวดเรองความถกตองของ syntax มากขน
• ส าหรบ HTML แมวาเราเขยน code ผดพลาดไปบาง เชน ลม tag ปด เวบเบราเซอร กยงสามารถตความและแสดงผลไดอยางถกตองเปนสวนมาก
<html> <head> <title>ตวอยางการเขยน HTML ทไมด </title>
<body> <h1>ม tag เปด แตไมม tag ปดใหครบ </body>
ตวอยางการเขยน HTML ทไมด
HTML vs XHTML (II)
• สงแตกตางทส าคญระหวาง XHTML กบ HTML ไดแก Subject1 : ทก XHTML element ทซอนกนตองเรยงล าดบใหถก แตละ element ตองไมเปด ปด ขามกน
Subject 2 : ทก XHTML element ตองท าการปดใหเรยบรอย ไมเวนแมแต element ทไมม tag ปด เชน <br> จะตองท าการปด โดยใชเครองหมาย ' /' เปน <br /> เปนตน
Subject 3 : ทก XHTML element ตองเขยน tag, attribute และคาของ attribute ดวยตวพมพเลก
Subject 4 : เอกสาร XHTML จะม root element เดยว ทก XHTML element จะตองอยภายใน element <html>...</html>
HTML vs XHTML (III) <b><i>ขอความนเปนตวหนา และตวเอยง</b></i> HTML <b><i>ขอความนเปนตวหนา และตวเอยง</i></b> XHTML
Subject 1
<p>ขอความท 1 <p>ขอความท 2 <br> ขอความท 3 <hr>
<img src="pic.gif"> HTML <p>ขอความท 1</p> <p>ขอความท 2 <br /> ขอความท 3 <hr />
<img src="pic.gif" /> </p> XHTML
Subject 2
HTML vs XHTML (IV) <BODY> <P Align="CENTER">ขอความจดวางกงกลาง</P>
</body> HTML <body> <p align="center">ขอความจดวางกงกลาง</p>
</body> XHTML
Subject 3
<html> <head> ... </head> <body> ... </body> </html>
Subject 4
XHTML Syntax Rules
XHTML Syntax Rules (I) • คาของ attribute ตองอยในเครองหมาย ".." เสมอ
• ไมสามารถใชรปยอของ attribute ได
<table width="100%">
<input type="text" readonly> <input type="text" disabled> <input type="radio" name="sex" value="M" checked> Male <input type="radio" name="sex" value="F"> Female
html
<input type="text" readonly="readonly" /> <input type="text" disabled="disabled" /> <input type="radio" name="sex" value="M" checked="checked" /> Male <input type="radio" name="sex" value="F" /> Female
xhtml
XHTML Syntax Rules (II)
HTML XHTML
compact compact="compact"
checked checked="checked"
declare declare="declare"
readonly readonly="readonly"
disabled disabled="disabled"
selected selected="selected"
defer defer="defer"
ismap ismap="ismap"
nohref nohref="nohref"
noshade noshade="noshade"
nowrap nowrap="nowrap"
multiple multiple="multiple"
noresize noresize="noresize"
attribute ทเขยนยอใน HTML ใหเขยนแบบเตมใน XHTML มดงน
XHTML Syntax Rules (III) • ใช attribute id แทน attribute name
• ถาใน element ใช attribute lang จะตองใส attribue xml:lang ดวยเสมอ attribue xml:lang เปนตวก าหนดคาภาษาทเราใชกบเวบเพจนน หรอกบเฉพาะ element ทเรยกใช
<img src="picture.gif" name="pic1">
html
<img src="picture.gif" id="pic1" />
หรอ <img src="picture.gif" id="pic1" name="pic1" />
xhtml
<p>ค าวายนดตอนรบในภาษาตางๆ </p>
<ul> <li xml:lang="th" lang="th">ยนดตอนรบ</li>
<li xml:lang="en" lang="en">welcome</li> <li xml:lang="zh-Hans" lang="zh-Hans">欢迎</li> <li xml:lang="zh-Hant" lang="zh-Hant">歡迎</li> </ul>
xhtml
Document Type Definitions
(DTD)
Document Type Definitions (DTD)
• คอ ตวก าหนดโครงสรางของเอกสาร ไมวาจะเปนเอกสาร HTML หรอ XHTML หรอ XML กตองม DTD ดวยกนทงนน แตใน HTML นนไมไดบงคบวาตองประกาศ Doctype
• การประกาศ <!DOCTYPE> กเพอบอกใหเวบเบราเซอรทราบวา เวบเพจของเราใชภาษา HTML หรอ XHTML และค าสง HTML/XHTML ทใชเปนรนใด และบอกชนดของเอกสาร (Document Type Definition : DTD) ทใช ซงจะชวยใหเวบเบราเซอรแปลเอกสารไดอยางถกตอง
XHTML 1.0 Strict
• การเลอก doctype ชนดน จะตองเขยนค าสงทกจดใหถกตองตามมาตรฐานของ XHTML ไมสามารถใช Tag และ Attribute เกา ท W3C ยายไปไวในสวน Style Sheet ได (เชน tag <font>)
• การตกแตงเอกสารจะใช CSS เทานน ไมสามารถใส Attribute ใน Element ได เชน ไมสามารถเขยน <body bgcolor="white">...</body> ได
• ทบรรทด tag เปดของ html ใหก าหนดดงน <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
• การเลอก doctype ชนดน จะคอนขางยดหยน เรายงสามารถใช Tag และ Attribute เกา ท W3C ยายไปไวในสวน Style Sheet ได
• การตกแตงเอกสารเราสามารถเขยนเปน <bgcolor="white">...</body> หรอ เขยนแบบใช CSS กได <body style=”background-color: white;”> แตยงตองเขยนค าสงใหถกตองตาม syntax ของ XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
• เลอกใช doctype ชนดน เมอเราจะใชงาน Framset (เปนการระบวาเอกสาร HTML นนใชเฟรมในการสรางหนาเวบเพจแทนการใช tag <body>)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML Validation
XHTML Validation • เราสามารถตรวจสอบความถกตองของค าสงในเอกสาร XHTML วาถกตองตามกฏเกณฑหรอไม ตาม DTD ทระบไวในแถวแรกของเอกสารท http://validator.w3.org
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XHTML type strict</title> </head> <body> <p style="text-align:center">Paragraph 1</p> <p style="color:red">Paragraph 2</p> </body> </html>
ตวอยางเอกสาร XHTML แบบ strict ทผาน Validation ของ W3C XHTML 1.0
Homework 1 : XHTML and CSS • ใหนกศกษาสรางเวบเพจโดยใชภาษา XHTML และ CSS ใหเหมอนกบรปแบบท
ก าหนดให
• โดยใหนศ. 1. ดาวนโหลดไฟลทเกยวของไดท
http://10.16.12.240/it215/it215_hw1-X.zip
2. สามารถดตวอยางการใช CSS กบ XHTML ไดท http://line25.com/tutorials/getting-started-with-css-a-practical-exercise
• ก าหนดสงวนองคารท 13 พฤศจกายน พ.ศ.2555 เวลา 24.00 น. To: [email protected] Subject: [IT215] Homework 1: XHTML and CSS
• หมายเหต: X หมายถง เศษทของการน าเอาเลขท mod ดวย 2
