What is HTML HTML The set of markup

HTML Elements Each individual markup code is referred to as an element or tag.

What is XHTML? The newest version of HTML e. Xtensible Hyper. Text Markup Language.

XML Syntax An XML document must be ◦ Use lowercase ◦ Use opening and

W 3 C Document Type Definition (DTD) Recommendation: Use a Document Type Definition

XHTML 1. 0 Transitional DTD <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0

First Web Page <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http:

Head & Body Sections Head Section Contains information that describes the Web page document

XHTML <title> and <meta /> tags <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1.

The Heading Element <h 1>Heading Level 1</h 1> <h 2>Heading Level 2</h 2> <h

XHTML <p> tag Paragraph element <p> …paragraph goes here… </p> ◦ Groups sentences and

XHTML tag Line Break element ◦ Stand-alone tag …text goes here This starts on

XHTML <blockquote> tag Blockquote element ◦ Indents a block of text for special emphasis

XHTML Special Characters Display special characters such as quotes, copyright symbol, etc. Character ©

XHTML <a> tag The anchor element ◦ Specifies a hyperlink reference (href) to a

Absolute link XHTML <a> tag ◦ Link to other Web sites <a href="http:

Hyperlinks Hands-On Practice Home index. html Resume resume. html Favorites favorites. html 17

XHTML Email Links using the <a> tag Automatically launch the default mail program configured

Checkpoint 1. Describe when to use an absolute link. Is the http protocol used

Writing Valid XHTML Check your code for syntax errors ◦ Benefit: Valid code more

Slides: 20

Download presentation

What is HTML? HTML: The set of markup symbols or codes placed in a file intended for displaying content. The World Wide Web Consortium (http: //w 3 c. org) sets the standards for HTML.

HTML Elements Each individual markup code is referred to as an element or tag. Each tag has a purpose. Tags are enclosed in angle brackets, "<" and ">" symbols. Most tags come in pairs; an opening tag and a closing tag.

What is XHTML? The newest version of HTML e. Xtensible Hyper. Text Markup Language. XHTML uses: ◦ the elements and attributes of HTML ◦ the syntax of XML (e. Xtensible Markup Language).

XML Syntax An XML document must be ◦ Use lowercase ◦ Use opening and closing tags well-formed. <body> </body> ◦ Close stand-alone tag with special syntax <hr />

W 3 C Document Type Definition (DTD) Recommendation: Use a Document Type Definition to identify the type of markup language used in a web page. XHTML 1. 0 Transitional This is the least strict specification for XHTML 1. 0. It allows the use of both Cascading Style Sheets and traditional formatting instructions such as fonts. We will use this DTD in this text XHTML 1. 0 Strict Requires exclusive use of Cascading Style Sheets. We will not use this. XHTML 1. 0 Frameset Required for pages using XHTML frames. We will use not use this.

XHTML 1. 0 Transitional DTD <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd>

First Web Page <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html > an opening tag. . page info goes here </html> a closing tag

Head & Body Sections Head Section Contains information that describes the Web page document <head> …head section info goes here </head> Body Section Contains text and elements that display in the Web page document <body> …body section info goes here </body>

XHTML <title> and <meta /> tags <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml" lang="en" xml: lang="en"> <head> <title>My First Web Page</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body>. . Body info goes here </body> </html>

The Heading Element <h 1>Heading Level 1</h 1> <h 2>Heading Level 2</h 2> <h 3>Heading Level 3</h 3> <h 4>Heading Level 4</h 4> <h 5>Heading Level 5</h 5> <h 6>Heading Level 6</h 6>

XHTML <p> tag Paragraph element <p> …paragraph goes here… </p> ◦ Groups sentences and sections of text together. ◦ Configures a blank line above and below the paragraph

XHTML tag Line Break element ◦ Stand-alone tag …text goes here This starts on a new line…. ◦ Causes the next element or text to display on a new line

XHTML <blockquote> tag Blockquote element ◦ Indents a block of text for special emphasis <blockquote> …text goes here… </blockquote>

XHTML Special Characters Display special characters such as quotes, copyright symbol, etc. Character © < > & Code © < > &

XHTML <a> tag The anchor element ◦ Specifies a hyperlink reference (href) to a file ◦ Text between the <a> and </a> is displayed on the web page. <a href="contact. html">Contact Us</a> ◦ href Attribute Indicates the file name or URL Web page document, photo, pdf, etc. 15

Absolute link XHTML <a> tag ◦ Link to other Web sites <a href="http: //yahoo. com">Yahoo</a> Relative link ◦ Link to pages on your own site <a href="index. htm">Home</a> 16

Hyperlinks Hands-On Practice Home index. html Resume resume. html Favorites favorites. html 17

XHTML Email Links using the <a> tag Automatically launch the default mail program configured for the browser If no browser default is configured, a message is displayed <a href=“mailto: me@hotmail. com”>me@hotmail. com</a> 18

Checkpoint 1. Describe when to use an absolute link. Is the http protocol used in the href value? 2. Describe when to use a relative link. Is the http protocol used in the href value? 3. What happens when a web site visitor clicks on an e-mail link? 19

Writing Valid XHTML Check your code for syntax errors ◦ Benefit: Valid code more consistent browser display W 3 C XHTML Validation Tool ◦ http: //validator. w 3. org