�ݺ�ߣ

XHTML Review Part 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 pages To understand how to create and use hyperlinks to navigate Web pages To 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

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 attribute specifies 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=/slideshow/xhtml-part1-presentation/838591/“picture.jpg” /> Height, Width <img src=/slideshow/xhtml-part1-presentation/838591/“picture.jpg” width=“200” height=“200” /> Image measured in pixels

Images Attributes alt (required in XHTML) <img src=/slideshow/xhtml-part1-presentation/838591/“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

�ݺ�ߣ

Xhtml Part1

Recommended

More Related Content

What's hot (20)

Similar to Xhtml Part1 (20)

Recently uploaded (20)

Xhtml Part1