XHTML by zhangyun


									     CSE 101 – Fall 2007

             XHTML (formerly HTML)
•   Markup Language, not programming language
•   Web Documents use HTML format to:
    –   structure and organize text, images, etc.
    –   supports headings, paragraphs lists, tables, links,
        images, forms, frames, etc …
    –   HTML versions from 2.01 – 4.01 (most recent)
        •   Replaced by XHTML 1.0

•   An HTML document has 2 components
    –   Markup tags (for page organization/formatting)
    –   Content

<? xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W#C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml"
    xml:lang="en" lang="en">
  <title>My First Web Page</title>
 <body style="background-color: cyan">
  <p>Hello everyone!</p>
  <p>My Name is (put your name here) and today is (put in the date). HTML is wack!
   XHTML is most certainly not wack! HA HA HA HA HA HA HA HA HA HA HA
   HA HA HA HA HA HA HA!</p>
                   XHTML Elements (tags)
• More than 90 types
• Top-level elements
   – html, head, body
• Head elements
   – title, link, meta, base, script
• Block-level elements
   – h1-h6, p, ul, ol, li, table, etc …
• Inline elements
   – a, br, em, hr, img, strong, etc …

• HTML tutorial - http://www.w3schools.com/html/default.asp
• Add some block-level elements inside body, not inside any other tags
 <h4>Red Sox</h4>
 <p>My unordered list of Real World Cities:</p>
  <li>San Diego</li>
  <li>San Francisco</li>
 <p>My ordered list of Real World Cities</p>
  <li>New York</li>
  <li>Los Angeles</li>
  <li>San Francisco</li>
• Add some inline elements somewhere inside
  body, not inside any other tags

<p>I'm taking <a href="http://www.cs.sunysb.edu/~cse101">CSE
  101</a><br /><br /><br /><br /> this semester.</p>
<hr />
<p>My teacher is <em>wack</em>. Here's a picture of
<img src="./teacher.jpg" />

• Now, go on the Web and find a jpg
   – Save it to the same directory as your Web page and name it teacher.jpg
                Headings & Paragraphs
• <h1> largest, through <h6> smallest
  – Use <h1> for document headings
  – Use other headings for section headings

• <p> for paragraphs, can contain inline elements,
  but no block-level elements
  – line wrapping is done automatically
  – white space (tabs, spaces, returns) is normally ignored
     • must be specified using specific tags
        – <br /> for line breaks
        – &nbsp; for single space between two words that must be kept
          together on the same line
• Block-level elements:
  – Unordered list (bulleted): <ul>
  – Ordered list (numbered): <ol>
     • Both <ul> & <ol> have list items, <li>, for each element in a
  – Definition list: <dl>
     • Each definition is specified by a definition description
       element, <dd>
• Lists are formed according to hierarchical nesting
• All list tags require opening & closing tags with
  proper nesting
    How would you get the following list?

•   East                  <li>East</li>
•   Central               <li>Central</li>
•   West                  <li>West</li>
 How would you get the following list?

1. Yankees             <li>Yankees</li>
2. Red Sox             <li>Red Sox</li>
3. Orioles             <li>Orioles</li>
    How would you get the following list?

•  East               <li>East
  1. Yankees               <li>Yankees</li>
  2. Red Sox               <li>Red Sox</li>
  3. Orioles               <li>Orioles</li>
• Central                </ol>
• West                <li>Central</li>
      How would you get the following list?
•    Monday              <ul>
    – Read                   <ul>
       • pgs 50 -100            <li>Read
       • pgs 170 – 200             <ul>
                                     <li>pgs 50 -100</li>
    – Review                       <li>pgs 170 – 200</li>
       • Pgs 600-640             </ul></li>
       • Pgs 680-700            <li>Review
•    Tuesday                         <li>pgs 600-650</li>
                                     <li>pgs 680-700</li>
• Inline element, must have 2 tags
• <a href=… specify clickable links to other Web or local
• Can be attached to text or images
• Can also be attached to a portion of an image
   – Image map
• Can be tied to any portion of text:
<p>Hello, my name is <a
  McKenna</a>. Won't you be my friend?</p>
• Hello, my name is Richard McKenna. Won't you be my
• URLs can be to local or remote resources
                        Local Hyperlinks
• Use relative reference rather than absolute reference
   – Relative to where the document with the link is
   – ../ means in the directory above the current file
   – ./ means in the same directory as the current file
<p><a href="./lectures/XHTML.ppt">      Reference
XHTML.ppt                                                    Absolute
</a></p>                                                     Reference

<p><a href=“http://www.cs.sunysb.edu/~cse101/lectures/XHTML.ppt">
• Relative reference is preferred. You should use it when
  possible. Why? When is it not possible?
• To display an image alone in a browser you may use the a tag. Add
  to your practice page:
<p><a href="http://www.du.edu/~jcalvert/hist/wh9j.jpg">
       William Henry Harrison</a></p>
• To display an inline image within a page, use img:
<img src="URL" width="…" height="…" alt="… " longdesc= "…">
• URL points to a GIF, JPEG, or PNG
• img may be placed in any block-level or inline element except pre
• You should always include alt (including hw1)
• Add to your practice page:
<img src="http://www.du.edu/~jcalvert/hist/wh9j.jpg" width="500"
  height="200" alt="An elongated William Henry Harrison" >
• Change the code such that when one clicks on the picture, the
  browser goes to:
   – http://www.whitehouse.gov/history/presidents/wh9.html
   – This is called a graphical link
         Organizing your own site images
• Place all images inside an images directory
  – Be sure to do this for all assignments
• Inside your Web pages, you may then reference
  the images using src="./images/…"
• When you upload your Web pages, upload your
  entire images directory
  – Save the following file to an images directory and
    correct the URLs accordingly
     • http://www.du.edu/~jcalvert/hist/wh9j.jpg

To top