Chapter 4 Introduction to XHTML: Part 1 Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg Spring 2009 Yanjun Li CSRU2350
What is XHTML? EXtensible HyperText Markup Language XHTML 1.1 A markup language that specifies the format of the text that is displayed in a Web browser. Separation of the presentation of a document from the structure of the document’s information Based on HTML A legacy technology of the World Wide Web Consortium (W3C) Spring 2009 Yanjun Li CSRU2350
Editing XHTML XHTML documents Source-code form Text editor (e.g. Notepad, emacs, etc.) .html or .htm file-name extension Web server Stores XHTML documents Web browser Requests XHTML documents Spring 2009 Yanjun Li CSRU2350
First XHTML Example (1) <?xml version =“1.0”?> XHTML comments starts with <!-- and end with --> Mandatory XHTML Elements: <?xml version =“1.0”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <!–- this is an example page --> <html > <head> <title>Title goes here</title> </head> <body> </body> </html> Spring 2009 Yanjun Li CSRU2350
First XHTML Example (2) html element is the root element of a XHTML document head element Head section: Title of the document and Style sheets and scripts body element Body section: Page’s content the browser displays Spring 2009 Yanjun Li CSRU2350
First XHTML Example (3) Every element starts with Start tag and ends with End tag, with the displayed content in between them. Example: <html>. . .</html>, <head>. . .</head>. Start tag may have attributes (provide additional information about an element) A name and value pair Example: <html xmlns=“http://www.w3.org/1999/xhtml”> Spring 2009 Yanjun Li CSRU2350
XHTML Syntax Rules XHTML documents must have one root element XHTML elements be properly nested be closed be in lowercase Attribute names be in lower case Attribute values be quoted Spring 2009 Yanjun Li CSRU2350
main.html (1 of 1) Spring 2009 Yanjun Li CSRU2350
Headers Six headers ( header elements): h1 ~ h6 Spring 2009 Yanjun Li CSRU2350
Spring 2009 Yanjun Li CSRU2350
Linking Hyperlink References other sources such as XHTML documents and images Both text and images can act as hyperlinks Created using the a (anchor) element: <a> </a> Attribute href specifies the location of a linked resource : href = “http://www.yahoo.com” Link to e-mail addresses: href = “mailto:deitel@deitel.com” Spring 2009 Yanjun Li CSRU2350
links.html (1 of 2) Spring 2009 Yanjun Li CSRU2350
contact.html (1 of 1) Spring 2009 Yanjun Li CSRU2350
Malicious Link Manipulation ت Phishing: a link in an email leads to the spoofed website Make the anchor text for a link appear to be valid <a href=“http://www.badsite.com”> www.paypal.com </a> Misspelled URL <a href=“http://www.bananarepubli.com”>BR</a> الخداع: وصلة في رسالة بالبريد الالكتروني يؤدي إلى موقع المغشوش جعل يظهر النص مرساة لارتباط لتكون صالحة <a href="http://www.badsite.com"> Spring 2009 Yanjun Li CSRU2350
Images (1) Three most popular formats Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Portable Network Graphics (PNG) img element with attributes: src attribute : Specifies the location of the image file width and height attributes: Pixels (“picture elements”) alt attribute : the text will be displayed if the browser could not display the image. Spring 2009 Yanjun Li CSRU2350
Images (2) Empty elements Bold Terminated by character / inside the closing right angle bracket (>), or by explicitly including the end tag Example: <img src=“1.jpg” height=“238” width=“183” /> br element: Line break <br /> <strong> tag: <strong>Bold characters</strong> Bold Spring 2009 Yanjun Li CSRU2350
picture.html (1 of 1) Spring 2009 Yanjun Li CSRU2350
Spring 2009 Yanjun Li CSRU2350
Image as Link Use an image as a link Image has no border <a href=“http://www.yahoo.com”> <img src= "yahoo.gif" width="232" height = "44" /> </a> Image has no border <a href="FirstExample.html"> <img src="home.png" width="125" height="26" alt="Go Home" border="0" /> Spring 2009 Yanjun Li CSRU2350
nav.html (1 of 2) Spring 2009 Yanjun Li CSRU2350
Spring 2009 Yanjun Li CSRU2350
4.8 Special Characters and Horizontal Rules Some keyboards do not provide these symbols, or the presence of these symbols may cause syntax errors. Example: <p>if x < 10 then increment x by 1</p> XHTML provides character entity references (in the form &code;) for representing special characters. <p>if x < 10 then increment x by 1</p> ¼ ¼ < < > > sup or sub element, to superscript text or subscript text Spring 2009 Yanjun Li CSRU2350
Internal Linking Enables the user to jump between locations in the same document First, create an internal hyperlink destination by setting attribute id of an element Second, create an internal link to this element. Example: <h1 id=“bugs”>Bugs </h1> : <a href=“#bugs”>Go to Bugs</a> Spring 2009 Yanjun Li CSRU2350
links.html (1 of 3) Spring 2009 Yanjun Li CSRU2350
links.html (3 of 3) Spring 2009 Yanjun Li CSRU2350
Creating and Using Image Maps (1) Designate certain areas of an image (called hotspots) as links Element map Attribute id identifies the image map Element img Attribute usemap refers the map by id. Example: <map id=“picOne”> .. </map> <img src=“picture.gif” usemap=“#picOne” /> Spring 2009 Yanjun Li CSRU2350
Creating and Using Image Maps (2) Element area defines hotspot Attribute shape and coords Specify the hotspot’s shape and coordinates Rectangular ( shape = “rect” ) Polygon ( shape = “poly” ) Circle ( shape = “circle” ) Attribute href Specifies the link’s target. Attribute alt Provides alternative text for the link. Spring 2009 Yanjun Li CSRU2350
picture.html (1 of 3) Spring 2009 Yanjun Li CSRU2350
picture.html (2 of 3) Spring 2009 Yanjun Li CSRU2350
Spring 2009 Yanjun Li CSRU2350
Unordered Lists Unordered list element ul Creates a list in which each item begins with a bullet symbol (called a disc) li (list item): Entry in an unordered list Format: <ul> <li> </li> </ul> Spring 2009 Yanjun Li CSRU2350
links2.html (1 of 2) Spring 2009 Yanjun Li CSRU2350
Spring 2009 Yanjun Li CSRU2350
Nested and Ordered Lists Represent hierarchical relationships Ordered lists (ol) Creates a list in which each item begins with a number Format <ol> <li> </li> </ol> Spring 2009 Yanjun Li CSRU2350
list.html (1 of 3) Spring 2009 Yanjun Li CSRU2350
list.html (2 of 3) Spring 2009 Yanjun Li CSRU2350
list.html (3 of 3) Spring 2009 Yanjun Li CSRU2350
Spring 2009 Yanjun Li CSRU2350
Type of Ordered List Attribute type defines the type of list Available types: type=“A” type=“a” type=“I” type=“i” type=“1” Spring 2009 Yanjun Li CSRU2350
Type of Unordered List Attribute type defines the type of list Available types: type=“disc” type=“square” type=“circle” Spring 2009 Yanjun Li CSRU2350
Special Characters and More Line Breaks Character entity references: &code; Numeric character references (e.g. &) See Appendix A, (page 1429) A complete list : http://www.w3.org/TR/xhtml-modularization/dtd_module_defs.html <del> </del> : Strike-out text <sup> </sup> : Superscript text <sub> </sub> : Subscript text <hr /> : Horizontal rule (horizontal line) Spring 2009 Yanjun Li CSRU2350
contact2.html (1 of 2) Spring 2009 Yanjun Li CSRU2350
contact2.html (2 of 2) Spring 2009 Yanjun Li CSRU2350
W3C XHTML Validation Service (1) Validation service ( validator.w3.org ) Checking a document’s syntax URL that specifies the location of the file Uploading a file to the site validator.w3.org/file-upload.html Spring 2009 Yanjun Li CSRU2350
W3C XHTML Validation Service (2) Spring 2009 Yanjun Li CSRU2350
Web Resources www.w3.org/TR/xhtml11 www.xhtml.org www.w3schools.com/xhtml/default.asp validator.w3.org hotwired.lycos.com/webmonkey/00/50/index2a.html wdvl.com/Authoring/Languages/XML/XHTML www.w3.org/TR/2001/REC-xhtml11-20010531 Spring 2009 Yanjun Li CSRU2350
Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © 2004. Reproduced by permission of Pearson Education, Inc. Spring 2009 Yanjun Li CSRU2350