Chapter 0-4 (XHTML) 陈瑞奇 (J.C. Chen) 亚洲大学资讯工程学系 多媒体网站技术应用 整合性课程 IE, Firefox, Safari, Opera, Chrome HTML/CSS DHTML/XHTML/XML JavaScript, JScript, VBScript Java Applet, ActiveX, AJAX Plug-in (eg, Flash, PDF, QuickTime) Windows XP IIS/Apache server MS-Access MS-SQL MySQL Other DBMS Browser Server DataBase Internet TCP/IP HTTP ( 开发人员 ) ASP.NET (Visual C# 2008) ADO/AJAX PHP/JSP/ColdFusion AppServ (Apache+PHP+MySQL) Dreamweaver CS 5 ( 设计人员 ) 网站企划 Photoshop 输出版面 Dreamweaver 网页设计
What Is XHTML? XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to HTML 4.01 XHTML is a stricter and cleaner version of HTML XHTML is HTML defined as an XML application XHTML is a W3C Recommendation of January 2000 XHTML is supported by all major browsers Source: http://www.w3schools.com/html/html_xhtml.asp Why XHTML? Many pages on the internet contain "bad" HTML. XHTML is HTML 4.01 redesigned as XML. XML documents must be marked up correctly and "well-formed". Some browsers run on computers, and some browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to interpret a "bad" markup language. Therefore - by combining the strengths of HTML and XML, XHTML was developed. Source: http://www.w3schools.com/html/html_xhtml.asp
XHTML 文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=big5" /> </head> <body> </body> </html> Source: http://www.w3schools.com/tags/tag_doctype.asp XHTML 元素与属性 <element> 内容 </element> <p> 内容 </p> <element /> <br /> <img src="girl.gif" /> <element 属性 ="value" > <a href="http://www.asia.edu.tw/" target="blank">asia University</a>
Differences Between XHTML and HTML XHTML elements must be properly nested <b><i>this text is bold and italic</b></i> <b><i>this text is bold and italic</i></b> XHTML elements must always be closed <br> <br /> XHTML elements must be in lowercase <BODY> <body> XHTML documents must have one root element <html> </html> Source: http://www.w3schools.com/html/html_xhtml.asp Some More XHTML Syntax Rules Attribute names must be in lower case <a HREF="..."> <a href="..."> Attribute values must be quoted <p align=right> <p align="right"> Attribute minimization is forbidden <input checked> <input checked="checked"> Theid attribute replaces the name attribute
Some More XHTML Syntax Rules (cont.) Don t attempt to put a block-level element (such as "<p>", "<h1>"~"<h6>", or "<table>") inside an inline element (such as "<a>", "<span>", "<font>") Don t put "<h1>"~"<h6>", "<p>" inside themselves also Don t use the tags which are not listed in HTM Tag List of W3C Source: XHTML Validation http://validator.w3.org/ Excercise #3 请将 Homework #1 之 HTML 文件档案改成符合 XHTML 严格要求之 XHTML 文件 让同学体验史上超级龟毛的 XHTML XHTML Validator: http://validator.w3.org/
XHTML XML (Extensible Markup Language) <note> <to>tove</to> <from>jani</from> <heading>reminder</heading> <body>don't forget me this weekend!</body> </note> DTD (Document Type Definition) 定义 XML 文件之结构 ( 元素与属性 ) The XHTML DTD defines mandatory elements <!DOCTYPE Doctype goes here> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>title goes here</title> </head> <body> </body> </html>
Three XHTML DTDs XHTML 1.0 Strict <!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 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- frameset.dtd"> meta and HTTP headers <meta http-equiv="content-type" content="text/html; charset=big5" /> <meta http-equiv="refresh" content ="300"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content ="Tue, 02 Mar 2010 01:47:40 GMT"> <meta http-equiv="date" content ="Tue, 02 Mar 2010 01:47:40 GMT"> http://en.wikipedia.org/wiki/meta_element
meta and Search Engines <meta name="keywords" content=" 购物,NB, 笔记本电脑,LV,PC, 手机, 相机,mp3,Gucci,Coach,psp,Wii,iPod" /> <meta name="description" content="pchome 在线购物提供 30 万件以上商品供您挑选, 网络价保证便宜, 更提供分期 0 利率 退货免费到府收件, 还有 24h 保证到货服务 " /> <meta name="robots" content="index, follow" /> http://www.im.ncnu.edu.tw/robots.txt Source: http://www.w3schools.com/html/html_intro.asp
Source: http://www.w3schools.com/html/html5_intro.asp HTML5 HTML5was designed to replace both HTML 4, XHTML, and the HTML DOM Level 2. (, including JavaScript) Rich content without plugins Animation,graphics, music,movies, complicated web applications. Cross-platform. a PC, or a Tablet, a Smartphone, or a Smart TV. Source: http://www.w3schools.com/html/html5_intro.asp