Introduction to XHTML 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? 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. presentation structure – 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 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
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: 1. the DOCTYPE 2. the Head 3. the Body Introduction to XHTML 4
XHTML document types There are currently 3 XHTML document types: STRICT TRANSITIONAL FRAMESET Introduction to XHTML 5
XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" “ xhtml1xhtml1-strict.dtd"> Use this when you want really clean markup, free of presentational clutter. Use this together with CSS. Introduction to XHTML 6
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 7
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 8
9 First XHTML Example (1) XHTML comments starts with Mandatory XHTML Elements: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “ Title goes here
Introduction to XHTML 10 First XHTML Example (2) html element is the root element of a XHTML document – head element – The element is a container for all the head elements. Elements inside 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:,,,,,, and. – body element Body section: Page’s content the browser displays
Introduction to XHTML 11 First XHTML Example (3) body element Body section: Page’s content the browser displays – The tag defines the document's body. – The element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
Introduction to XHTML 12 First XHTML Example (4) Every element starts with Start tag and ends with End tag, with the displayed content in between them. Example:...,.... Start tag may have attributes (provide additional information about an element) – A name and value pair – Example:
Introduction to XHTML 13 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
Element / Tag The HTML Element – The tag defines the title of the document. – The element is required in all HTML/XHTML documents. The 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: Title of the document The content of the document Introduction to XHTML 14
Introduction to XHTML 15 main.html (1 of 1)
Introduction to XHTML 16 Headers Six headers ( header elements): h 1 ~ h6
Introduction to XHTML 17
Introduction to XHTML 18 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: Attribute href specifies the location of a linked resource : href = “ Link to addresses: href =
Introduction to XHTML 19 links.html (1 of 2)
Introduction to XHTML 20 contact.html (1 of 1)
Introduction to XHTML 21 Malicious Link Manipulation Phishing: a link in an leads to the spoofed websitelink spoofed website – Make the anchor text for a link appear to be validanchor text for a link – Misspelled URL BR
Introduction to XHTML 22 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 23 Images (2) Empty elements – Terminated by character / inside the closing right angle bracket ( > ), or by explicitly including the end tag – Example: br element: Line break – tag: Bold characters – Bold
Introduction to XHTML 24 picture.html (1 of 1)
Introduction to XHTML 25
Introduction to XHTML 26 Image as Link Use an image as a link Image has no border <img src="home.png" width="125" height="26" alt="Go Home" border="0" />
Introduction to XHTML 27 nav.html (1 of 2)
Introduction to XHTML 28
Introduction to XHTML 29 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: Bugs : Go to Bugs
Introduction to XHTML 30 links.html (1 of 3)
Introduction to XHTML 31 links.html (3 of 3)
Introduction to XHTML 32 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:..
Introduction to XHTML 33 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 34 picture.html (1 of 3)
Introduction to XHTML 35 picture.html (2 of 3)
Introduction to XHTML 36
Introduction to XHTML 37 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:
Introduction to XHTML 38 links2.html (1 of 2)
Introduction to XHTML 39
Introduction to XHTML 40 Nested and Ordered Lists Represent hierarchical relationships Ordered lists ( ol ) – Creates a list in which each item begins with a number – Format
Introduction to XHTML 41 list.html (1 of 3)
Introduction to XHTML 42 list.html (2 of 3)
Introduction to XHTML 43 list.html (3 of 3)
Introduction to XHTML 44
Introduction to XHTML 45 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 46 Type of Unordered List Attribute type defines the type of list Available types: type=“disc” type=“square” type=“circle”
Introduction to XHTML 47 Special Characters and More Line Breaks Character entity references: &code; Numeric character references (e.g. & ) – See Appendix A, (page 1429) – A complete list : A complete list : Strike-out text : Superscript text : Subscript text : Horizontal rule (horizontal line)
Introduction to XHTML 48 contact2.html (1 of 2)
Introduction to XHTML 49 contact2.html (2 of 2)
Introduction to XHTML 50 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 51 W3C XHTML Validation Service (2)
Introduction to XHTML 52 Web Resources validator.w3.org hotwired.lycos.com/webmonkey/00/50/index2a.html wdvl.com/Authoring/Languages/XML/XHTML
Introduction to XHTML 53 Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © Reproduced by permission of Pearson Education, Inc.