Post on 16-May-2015
XHTML ReviewPart 1
Instructor: Nancy Lee
Course Objectives
To understand important components of XHTML documents.
To use XHTML to create Web pages.To be able to add images to Web pagesTo understand how to create and use
hyperlinks to navigate Web pagesTo be able to mark up lists of information
Introduction
Internet is 3 decades old
The internet offers many opportunities
You will develop your own web site in this class
Introduction
You will add pages during the semester
We will use XHTML for basic web pages Extensible Hypertext Markup Language
Introduction
We will also use CSS to format pages Cascading Style Sheets
XHTML unlike HTML Only content and structure Formatting using CSS
Editing XHTML
Write XHTML in source-code form. Type into text editor
Notepad
Files are saved as .html .htm
Editing XHTML
XHTML documents are stored on a web server
Test Page by opening in a browser Firefox IE6 Netscape
First XHTML Example
main.html
Required to conform to XHTML syntax<?xml version =“1.0”?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
First XHTML Example
Comments
<!-- Fig. : main.html -->
<!-- Our first Web page -->
First XHTML Example
Element that defines the document
<html xmlns =" http://www.w3.org/1999/xhtml">
</html>
First XHTML Example
Head element of document<html xmlns =" http://www.w3.org/1999/xhtml">
<head>
</head>
</html>
First XHTML Example
Head element of document Title Style information
<html xmlns =" http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Welcome</title>
</head>
</html>
First XHTML Example
Body element of document Content and structure
<html xmlns =" http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body>Key line in program: tells browser to display text
Tells browser to display text <p>Welcome to XHTML!</p> </body></html>
First XHTML Example
All XHTML documents delimit an element with Start tag
<html> End tag
</html> All XHTML tags must have end tag
First XHTML Example
All XHTML documents delimit an element with Start tag
<html xmlns=“ http://www.w3.org/1999/xhtml”> Start tags may have attributes
• Name• Value• Values must be enclosed in “ “• Syntax error if not• Upper case is a syntax error• Separated by = sign
First XHTML Example
Documents have two sections Head Body
Nested elements should be indented for readability.
Tags may not overlap
W3C XHTML Validation Service
W3C provides a validation service
validator.w3.org
Most browsers will attempt to render XHTML documents even if invalid
Headers
header.html
<body>
<h1>Level 1 Header</h1>
<h2>Level 2 header</h2>
<h3>Level 3 header</h3>
<h4>Level 4 header</h4>
<h5>Level 5 header</h5>
<h6>Level 6 header</h6>
</body>
Size may vary by browser
Linking
Hyperlink Pages Images Sections
link.html
link2.html
Linking
Links are created with the anchor tag
anchor element
<a> </a>
Linking
href attributespecifies link to URL<a href =" http://www.yahoo.com">Yahoo!</a>
file <a href =" home.html">Home</a>
e-mail address• uses mailto: URL
<a href =mailto:nancy_lee@ccsn.edu>email me</a>
Images
picture.html
Use img element to place pictures on your web page
<img />
Closing slash is required /> or </img>
Images
Attributes src
<img src=“picture.jpg” />
Height, Width <img src=“picture.jpg” width=“200” height=“200” />
Image measured in pixels
Images
Attributes alt (required in XHTML)<img src=“picture.jpg” width=“200” height=“200” alt=“This is a
picture” />
accessible pages Speech synthesizers use text
Images
Nest img element inside of anchor element to create hyperlink using picture.
Used to create buttons
Pictorial links
Thumbnails
Images
Non spacing break element does not have ending tag, but is required for XHTML
<br />
Images
nav.html
Discuss use of buttons for navigation links
Special Characters and More Line Breaks
Some characters are not on keyboard or difficult to type
Symbols may cause syntax error < > =Use &code;Example:
<p> if x < 10 then increment x by 1</p>Causes syntax error
<p> if x < 10 then increment x by 1</p>See Appendix A in text.
Unordered Lists
Unordered list element <ul> </ul>
List<li> </li>
Nested and Ordered Lists
Ordered and unordered lists may be nested
Example program list.html