Download presentation
Presentation is loading. Please wait.
1
Chapter 4 Introduction to XHTML: Part 1
Reference From: Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg Introduction to XHTML
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) Introduction to XHTML
3
Why XHTML? Many pages on the internet contain "bad" HTML.
Today's market consists of different browser technologies. 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 "bad" mark-up. XML is a mark-up language where documents must be marked up correctly (be "well-formed"). By combining the strengths of HTML and XML, XHTML was developed. XHTML is HTML redesigned as XML. Introduction to XHTML
4
How to Convert from HTML to XHTML
Add an XHTML <!DOCTYPE> to the first line of every page Add an xmlns attribute to the html element of every page Change all element names to lowercase Close all empty elements Change all attribute names to lowercase Quote all attribute values Introduction to XHTML
5
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 Introduction to XHTML
6
XHTML DTD The XHTML standard defines three Document Type Definitions.
The most common is the XHTML Transitional. An XHTML document consists of three main parts: the DOCTYPE the Head the Body Introduction to XHTML
7
XHTML document types There are currently 3 XHTML document types:
STRICT TRANSITIONAL FRAMESET Introduction to XHTML
8
XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" “ xhtml1-strict.dtd"> Use this when you want really clean markup, free of presentational clutter. Use this together with CSS. Introduction to XHTML
9
XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN’’ " /DTD/xhtml1-transitional.dtd"> Use this when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets. Introduction to XHTML
10
XHTML 1.0 Frameset <!DOCTYPE htmlPUBLIC "-//W3C//DTD
XHTML 1.0 Frameset//EN“ " DTD/xhtml1-frameset.dtd"> Use this when you want to use HTML Frames to partition the browser window into two or more frames. Introduction to XHTML
11
First XHTML Example (1) XHTML comments starts with <!-- and end with --> Mandatory XHTML Elements: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>Title of document</title> </head> <body> some content </body> </html> Introduction to XHTML
12
First XHTML Example (2) html element is the root element of a XHTML document head element The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>. body element Body section: Page’s content the browser displays Introduction to XHTML
13
First XHTML Example (3) body element
Body section: Page’s content the browser displays The <body> tag defines the document's body. The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. Introduction to XHTML
14
First XHTML Example (4) 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=“ Introduction to XHTML
15
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 Introduction to XHTML
16
<title> Element / Tag
The HTML <title> Element The <title> tag defines the title of the document. The <title> element is required in all HTML/XHTML documents. The <title> element: defines a title in the browser toolbar provides a title for the page when it is added to favorites displays a title for the page in search-engine results A simplified HTML document: <html> <head> <title>Title of the document</title> </head> <body> The content of the document </body> </html> Introduction to XHTML
17
main.html (1 of 1) Introduction to XHTML
18
Headers Six headers ( header elements): h1 ~ h6 Introduction to XHTML
19
Introduction to XHTML
20
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 = Introduction to XHTML
21
links.html (1 of 2) Introduction to XHTML
22
contact.html (1 of 1) Introduction to XHTML
23
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=“ Introduction to XHTML
24
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. Introduction to XHTML
25
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 Introduction to XHTML
26
picture.html (1 of 1) Introduction to XHTML
27
Introduction to XHTML
28
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" /> Introduction to XHTML
29
nav.html (1 of 2) Introduction to XHTML
30
Introduction to XHTML
31
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> Introduction to XHTML
32
links.html (1 of 3) Introduction to XHTML
33
links.html (3 of 3) Introduction to XHTML
34
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” /> Introduction to XHTML
35
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. Introduction to XHTML
36
picture.html (1 of 3) Introduction to XHTML
37
picture.html (2 of 3) Introduction to XHTML
38
Introduction to XHTML
39
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> Introduction to XHTML
40
links2.html (1 of 2) Introduction to XHTML
41
Introduction to XHTML
42
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> Introduction to XHTML
43
list.html (1 of 3) Introduction to XHTML
44
list.html (2 of 3) Introduction to XHTML
45
list.html (3 of 3) Introduction to XHTML
46
Introduction to XHTML
47
Type of Ordered List Attribute type defines the type of list
Available types: type=“A” type=“a” type=“I” type=“i” type=“1” Introduction to XHTML
48
Type of Unordered List Attribute type defines the type of list
Available types: type=“disc” type=“square” type=“circle” Introduction to XHTML
49
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) Introduction to XHTML
50
contact2.html (1 of 2) Introduction to XHTML
51
contact2.html (2 of 2) Introduction to XHTML
52
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 Introduction to XHTML
53
W3C XHTML Validation Service (2)
Introduction to XHTML
54
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 Introduction to XHTML
55
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. Introduction to XHTML
Similar presentations
