class2
Post on 11-Sep-2014
2.086 views
DESCRIPTION
class2TRANSCRIPT
![Page 1: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/1.jpg)
Markup Languages: HTML
• HTML – Hypertext Markup LanguageThe set of markup symbols or codes placed in a file
intended for display on a web browser.
![Page 2: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/2.jpg)
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.
![Page 3: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/3.jpg)
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.
![Page 4: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/4.jpg)
Markup Language Relations• The relationship between
XHTML, HTML, and XML
![Page 5: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/5.jpg)
• W3C Recommendation: Use a Document Type Definition to identify the type of markup language used in a web page.
XHTML 1.0 TransitionalThis 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 StrictRequires exclusive use of Cascading Style Sheets. We will not use this.
XHTML 1.0 FramesetRequired for pages using XHTML frames. We will use not use this.
DocumentType Definition (DTD)
![Page 6: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/6.jpg)
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>
![Page 7: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/7.jpg)
<!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
![Page 8: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/8.jpg)
Head & Body Sections
• Head SectionContains information that describes the Web page document <head>…head section info goes here</head>
• Body SectionContains text and elements that display in the Web page document<body>…body section info goes here</body>
![Page 9: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/9.jpg)
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>
![Page 10: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/10.jpg)
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>
![Page 11: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/11.jpg)
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
![Page 12: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/12.jpg)
XHTML<br /> tag
• Line Break element– Stand-alone tag
…text goes here <br />This starts on a new line….
– Causes the next element or text to display on a new line
![Page 13: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/13.jpg)
XHTML<blockquote> tag
• Blockquote element– Indents a block of text for special emphasis
<blockquote>
…text goes here…
</blockquote>
![Page 14: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/14.jpg)
XHTML List Basics
• Definition List• Ordered List• Unordered List
![Page 15: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/15.jpg)
XHTMLOrdered List
• Conveys information in an ordered fashion• <ol>
Contains the ordered list– type attribute determines numbering scheme of list,
default is numerals
• <li>Contains an item in the list
![Page 16: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/16.jpg)
XHTMLOrdered List Example
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>
![Page 17: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/17.jpg)
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
![Page 18: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/18.jpg)
XHTMLUnordered List Example
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Pear</li>
<li>Grape</li>
</ul>• Apple• Orange• Pear• Grape
![Page 19: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/19.jpg)
XHTMLLogical Style Elements
• Indicate the logical style of the text display
• Common Logical Style Tags – <strong></strong>
• To cause text to be emphasized or to "stand out" from surrounding text.
<strong>This is important</strong>
– <em></em>• To cause text to be emphasized in relation to other text on
the page. Usually italics.
<em>Please note</em>
![Page 20: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/20.jpg)
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>
![Page 21: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/21.jpg)
• Display special characters such as quotes, copyright symbol, etc.
Character Code © © < < > > & &
XHTMLSpecial Characters
![Page 22: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/22.jpg)
Checkpoint
• Provide a reason for using logical style tags rather than physical style tags.
• Describe the purpose of special characters.
![Page 23: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/23.jpg)
23
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 URL
Web page document, photo, pdf, etc.
![Page 24: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/24.jpg)
24
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>
![Page 25: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/25.jpg)
25
Hyperlinks• Hands-On Practice
![Page 26: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/26.jpg)
26
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:[email protected]”>[email protected]</a>
![Page 27: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/27.jpg)
27
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?
![Page 28: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/28.jpg)
Writing Valid XHTML• Check your code for syntax errors
– Benefit:• Valid code
more consistent browser display
• W3C XHTML Validation Tool– http://validator.w3.org
![Page 29: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/29.jpg)
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.
![Page 31: Class2](https://reader033.vdocuments.us/reader033/viewer/2022061103/5411c5278d7f729e728b4606/html5/thumbnails/31.jpg)
Assignment: Due 9/20/2010p.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.