Your SlideShare is downloading. ×
Class2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Class2

1,717
views

Published on

class2

class2

Published in: Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,717
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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.
  • 4. Markup Language Relations
    • The relationship between XHTML, HTML, and XML
  • DocumentType Definition (DTD)
    • W3C 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.
  • 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
  • 7. Head & Body Sections
    • HeadSectionContains information that describes the Web page document
    <head>
    …head section info goes here
    </head>
    • BodySectionContains text and elements that display in the Web page document<body>
    …body section info goes here
    </body>
  • 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>
  • 10. XHTML<p> tag
    • Paragraph element
    <p>…paragraph goes here…</p>
    • Groups sentences and sections of text together.
    • 11. Configures a blank line above and below the paragraph
  • 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
  • 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
  • 17. XHTMLUnordered List Example
    <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Pear</li>
    <li>Grape</li>
    </ul>
  • 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>
  • 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
    © &copy;
    < &lt;
    > &gt;
    & &amp;
    &nbsp;
    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.