1. CSE 102 Introduction to Web Design and Programming
XHTML: Lists & Hyperlinks

2. w3schools references http://www.w3schools.com Tryit Editor:
=tryhtml_basic

3. Lists Block-level elements:
Unordered list (bulleted): <ul>
Ordered list (numbered): <ol>
Both <ul> & <ol> have list items, <li>, for each element in a list
Definition list: <dl>
Each term is specified by a definition term element, <dt>
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

4. How would you get the following list?
<li>East</li>
<li>Central</li>
<li>West</li>
</ul>
East
Central
West

5. How would you get the following list?
<li>Yankees</li>
<li>Red Sox</li>
<li>Orioles</li>
</ol>
Yankees
Red Sox
Orioles

6. How would you get the following list?
<li>East
<ol>
<li>Yankees</li>
<li>Red Sox</li>
<li>Orioles</li>
</ol></li>
<li>Central</li>
<li>West</li>
</ul>
East
Yankees
Red Sox
Orioles
Central
West

7. How would you get the following list?
<li>Monday
<li>Read
<li>pgs </li>
<li>pgs 170 – 200</li>
</ul></li>
<li>Review
<li>pgs </li>
<li>pgs </li>
<li>Tuesday</li>
</ul>
Monday
Read
pgs
pgs 170 – 200
Review
Pgs
Pgs
Tuesday

8. List Style Types Alabama Alaska Arizona Arkansas
Specify using style attribute with list-style-type property.
Possible values:
circle, disc, square, none, custom image, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha
Ex:
<ol style="list-style-type:upper-roman">
<li>Alabama</li>
<li>Alaska</li>
<li>Arizona</li>
<li>Arkansas</li>
</ol>
Alabama
Alaska
Arizona
Arkansas

9. More List Styles Alabama Alaska Arizona Arkansas
list-style-image: url(imageURL)
list-style-position
outside or inside
<ol style="list-style-image:url(
<li>Alabama</li>
<li>Alaska</li>
<li>Arizona</li>
<li>Arkansas</li>
</ol>
Alabama
Alaska
Arizona
Arkansas

10. How would you get the following Definition List?
<dl>
<dt style="font-style:italic">HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt style="font-style:italic">HTTP</dt>
<dd>Hypertext Transfer Protocol</dd>
<dt style="font-style:italic">CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
HTML
Hypertext Markup Language
HTTP
Hypertext Transfer Protocol
CSS
Cascading Style Sheets

11. Hyperlinks Inline element, must have 2 tags
<a href=… specify clickable links to other Web or local documents
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 href=" Esmaili</a>. Won't you be my friend?</p>
Hello, my name is Ahmad Esmaili. Won't you be my friend?
URLs can be to local or remote resources

12. 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/HTMLBasics.ppt">
HTMLBasics.ppt
</a></p>
<p><a href="
Relative
Reference
Absolute
Reference
Relative reference is preferred. You should use it when possible. Why? When is it not possible?

13. Ids & Anchors You may link to a location inside a document
id attribute can be used to identify a specific element
#id then specifies where the browser should scroll to
Can be used effectively for long Web pages
Have links on top to places in the document (FAQ pages)
Ex from inside same document (named doc.html):
<p><a href="#middle">Go to middle</a></p> …
<p id="middle">Some paragraph</p>
Ex from another document:
<p><a href="doc.html#middle">Go to middle</a></p>

14. Opening New Browser Windows
When one clicks on a hyperlink, there are 2 options:
Open the page in the current browser window
Open the page in a new browser window
For this, use the target attribute
target specifies a named window
Ex:
<p><a href=" target="win1">The New York Times</a></p>
<p><a href="
target="win2">Newsday</a></p>
<p><a href=" target="win1">The LA Times</a></p>

15. Site Organization
Web site – an organized group of Web pages working together
To build a Web site on your computer:
Organize the pages into a hierarchy of files & directories
Avoid nonalphanumeric characters in file & directory names
Place index.html (site home page) in the root directory
Use images/ subdirectory to store Web page images
There are other standard directory names for products, services, etc …
Avoid making a site that is too deep or too shallow
What are the pros & cons of deep & shallow sites?
Design a navigation system that is clear & easy to use
Keep it standard on all your site’s pages
Use relative reference for all internal links
Upload the entire site to any server

16. Linking to Services Email links, use: <a href="mailto:email-address
?SUBJECT=line&BODY=body
&to= -address&cc= -address">
E Link</a>
Ex:
<a
?SUBJECT=hw1&BODY=I want an A
Ahmad Esmaili</a>

17. Linking to Services (continued)
Download links, use:
<a href="ftp:host:port/path-to-file">
FTP Link</a>
If port is not given, standard FTP port 21 is assumed
Ex:
<p><a href="ftp://monkey.cs.kent.edu/package.zip">
<code>package.zip</code></a> (35439 bytes)</p>

18. Display Style for Hyperlinks
Done with Style Sheets (we’ll see later)
Custom colors for
Unvisited links
Visited links
Active links
Hover links