More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Class2
Similar to Class2 (20)
More from Jiyeon Lee
Recently uploaded
Recently uploaded (20)
Class2
- 1. Markup Languages: HTML HTML – Hypertext Markup Language The set of markup symbols or codes placed in a file intended for display on a web browser.
- 2. Markup Languages: XML XML – eXtensible Markup Language A text-based language designed to describe, deliver, and exchange structured information. It is not intended to replace HTML – it is intended to extend the power of HTML by separating data from presentation.
- 3. Markup Languages: XHTML XHTML – eXtensible Hypertext Markup Language Developed by the W3C as the reformulation of HTML 4.0 as an application of XML. It combines the formatting strengths of HTML 4.0 and the data structure and extensibility strengths of XML.
- 5. XHTML 1.0 Transitional DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
- 6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html > an opening tag .... page info goes here </html> a closing tag First Web Page
- 8. XHTML<title> and <meta /> tags <!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" 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>
- 9. The Heading Element <h1>Heading Level 1</h1> <h2>Heading Level 2</h2> <h3>Heading Level 3</h3> <h4>Heading Level 4</h4> <h5>Heading Level 5</h5> <h6>Heading Level 6</h6>
- 12. XHTML<blockquote> tag Blockquote element Indents a block of text for special emphasis <blockquote> …text goes here… </blockquote>
- 13. XHTML List Basics Definition List Ordered List Unordered List
- 14. XHTMLOrdered List Conveys information in an ordered fashion <ol>Contains the ordered list type attribute determinesnumbering scheme of list, default is numerals <li>Contains an item in the list
- 15. XHTMLOrdered List Example <ol> <li>Apply to school</li> <li>Register for course</li> <li>Pay tuition</li> <li>Attend course</li> </ol>
- 16. XHTMLUnordered List Displays information with bullet points <ul>Contains the unordered list type attribute determines the type of bullet point default type is disc (but depends on the browser used) <li>Contains an item in the list
- 18. Orange
- 19. Pear
- 21. XHTMLPhysical Style Elements Provide browser font configuration info Useful for browsers – but not always applicable for other devices or user agents such as screen readers Common Physical Style Tags <b></b> To display as bold text<b>This is important</b> <i></i> To display text in italics <i>Please note</i>
- 22. Display special characters such as quotes, copyright symbol, etc. Character Code © © < < > > & & XHTMLSpecial Characters
- 23. Checkpoint Provide a reason for using logical style tags rather than physical style tags. Describe the purpose of special characters.
- 24. 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</a> href Attribute Indicates the file name or URLWeb page document, photo, pdf, etc. 23
- 25. XHTML<a> tag Absolute link 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> 24
- 26. Hyperlinks 25 Hands-On Practice
- 27. 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> 26
- 28. Checkpoint Describe when to use an absolute link. Is the http protocol used in the href value? Describe when to use a relative link. Is the http protocol used in the href value? What happens when a web site visitor clicks on an e-mail link? 27
- 29. Writing Valid XHTML Check your code for syntax errors Benefit: Valid code more consistent browser display W3C XHTML Validation Tool http://validator.w3.org
- 30. Summary This chapter provided an introduction to XHTML. It began with an introduction to the HTML, discussed the transition to XHTML, continued with the anatomy of a web page, introduced inline and block-level formatting, and demonstrated the XHTML techniques used to create hyperlinks. You will use these skills over and over again as you create Web pages.
- 31. Anatomy of a Website http://www.csszengarden.com/
- 32. Assignment: Due 9/20/2010 p.59 Hands-on Exercise #9, 10 9. Create a Web Page about your favorite musical group. Include the name of the group, the individuals in the group, a hyperlink to the group’s Website, your favorite three (or fewer if the group is new) CD releases, and a brief review of each CD. Use an unordered list to organize the names of the individuals. Use a ordered list for the names of the CDs in chronological order. Ave the page as band.html. Attach your file to an email 10. Create a Web page about your favorite recipe. Use an unordered list for the ingredients and an ordered list to describe the steps needed to prepare the food. Include a hyperlink to a Web site that offers free recipes. Save the page as recipe.html.