Chapter 4 Introduction to XHTML: Part 1 Reference From: Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg Introduction to XHTML
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
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
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
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
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
XHTML document types There are currently 3 XHTML document types: STRICT TRANSITIONAL FRAMESET Introduction to XHTML
XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> Use this when you want really clean markup, free of presentational clutter. Use this together with CSS. Introduction to XHTML
XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN’’ "http://www.w3.org/TR/xhtml1 /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
XHTML 1.0 Frameset <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN“ "http://www.w3.org/TR/xhtml1/ 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
First XHTML Example (1) XHTML comments starts with <!-- and end with --> Mandatory XHTML Elements: <!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> <title>Title of document</title> </head> <body> some content </body> </html> Introduction to XHTML
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
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
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=“http://www.w3.org/1999/xhtml”> Introduction to XHTML
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
<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
main.html (1 of 1) Introduction to XHTML
Headers Six headers ( header elements): h1 ~ h6 Introduction to XHTML
Introduction to XHTML
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” Introduction to XHTML
links.html (1 of 2) Introduction to XHTML
contact.html (1 of 1) Introduction to XHTML
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> Introduction to XHTML
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
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
picture.html (1 of 1) Introduction to XHTML
Introduction to XHTML
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" /> Introduction to XHTML
nav.html (1 of 2) Introduction to XHTML
Introduction to XHTML
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
links.html (1 of 3) Introduction to XHTML
links.html (3 of 3) Introduction to XHTML
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
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
picture.html (1 of 3) Introduction to XHTML
picture.html (2 of 3) Introduction to XHTML
Introduction to XHTML
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
links2.html (1 of 2) Introduction to XHTML
Introduction to XHTML
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
list.html (1 of 3) Introduction to XHTML
list.html (2 of 3) Introduction to XHTML
list.html (3 of 3) Introduction to XHTML
Introduction to XHTML
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
Type of Unordered List Attribute type defines the type of list Available types: type=“disc” type=“square” type=“circle” Introduction to XHTML
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) Introduction to XHTML
contact2.html (1 of 2) Introduction to XHTML
contact2.html (2 of 2) Introduction to XHTML
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
W3C XHTML Validation Service (2) Introduction to XHTML
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 Introduction to XHTML
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