Download presentation
Presentation is loading. Please wait.
1
Chapter 4 Introduction to XHTML: Part 1
Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg Spring 2009 Yanjun Li CSRU2350
2
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
3
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
4
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” “ <!–- this is an example page --> <html > <head> <title>Title goes here</title> </head> <body> </body> </html> Spring 2009 Yanjun Li CSRU2350
5
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
6
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=“ Spring 2009 Yanjun Li CSRU2350
7
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
8
main.html (1 of 1) Spring 2009 Yanjun Li CSRU2350
9
Headers Six headers ( header elements): h1 ~ h6 Spring 2009
Yanjun Li CSRU2350
10
Spring 2009 Yanjun Li CSRU2350
11
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 = “ Link to addresses: href = Spring 2009 Yanjun Li CSRU2350
12
links.html (1 of 2) Spring 2009 Yanjun Li CSRU2350
13
contact.html (1 of 1) Spring 2009 Yanjun Li CSRU2350
14
Malicious Link Manipulation ت
Phishing: a link in an leads to the spoofed website Make the anchor text for a link appear to be valid <a href=“ </a> Misspelled URL <a href=“ الخداع: وصلة في رسالة بالبريد الالكتروني يؤدي إلى موقع المغشوش جعل يظهر النص مرساة لارتباط لتكون صالحة <a href=" Spring 2009 Yanjun Li CSRU2350
15
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
16
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
17
picture.html (1 of 1) Spring 2009 Yanjun Li CSRU2350
18
Spring 2009 Yanjun Li CSRU2350
19
Image as Link Use an image as a link Image has no border
<a href=“ <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
20
nav.html (1 of 2) Spring 2009 Yanjun Li CSRU2350
21
Spring 2009 Yanjun Li CSRU2350
22
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> &frac ¼ < < > > sup or sub element, to superscript text or subscript text Spring 2009 Yanjun Li CSRU2350
23
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
24
links.html (1 of 3) Spring 2009 Yanjun Li CSRU2350
25
links.html (3 of 3) Spring 2009 Yanjun Li CSRU2350
26
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
27
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
28
picture.html (1 of 3) Spring 2009 Yanjun Li CSRU2350
29
picture.html (2 of 3) Spring 2009 Yanjun Li CSRU2350
30
Spring 2009 Yanjun Li CSRU2350
31
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
32
links2.html (1 of 2) Spring 2009 Yanjun Li CSRU2350
33
Spring 2009 Yanjun Li CSRU2350
34
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
35
list.html (1 of 3) Spring 2009 Yanjun Li CSRU2350
36
list.html (2 of 3) Spring 2009 Yanjun Li CSRU2350
37
list.html (3 of 3) Spring 2009 Yanjun Li CSRU2350
38
Spring 2009 Yanjun Li CSRU2350
39
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
40
Type of Unordered List Attribute type defines the type of list
Available types: type=“disc” type=“square” type=“circle” Spring 2009 Yanjun Li CSRU2350
41
Special Characters and More Line Breaks
Character entity references: &code; Numeric character references (e.g. &) See Appendix A, (page 1429) A complete list : <del> </del> : Strike-out text <sup> </sup> : Superscript text <sub> </sub> : Subscript text <hr /> : Horizontal rule (horizontal line) Spring 2009 Yanjun Li CSRU2350
42
contact2.html (1 of 2) Spring 2009 Yanjun Li CSRU2350
43
contact2.html (2 of 2) Spring 2009 Yanjun Li CSRU2350
44
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
45
W3C XHTML Validation Service (2)
Spring 2009 Yanjun Li CSRU2350
46
Web Resources www.w3.org/TR/xhtml11 www.xhtml.org
validator.w3.org hotwired.lycos.com/webmonkey/00/50/index2a.html wdvl.com/Authoring/Languages/XML/XHTML Spring 2009 Yanjun Li CSRU2350
47
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
Similar presentations
