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

w3schools references http://www.w3schools.com Tryit Editor: http://www.w3schools.com/html/tryit.asp?filename =tryhtml_basic

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

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

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

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

How would you get the following list? <li>Monday <li>Read <li>pgs 50 -100</li> <li>pgs 170 – 200</li> </ul></li> <li>Review <li>pgs 600-650</li> <li>pgs 680-700</li> <li>Tuesday</li> </ul> Monday Read pgs 50 -100 pgs 170 – 200 Review Pgs 600-640 Pgs 680-700 Tuesday

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

More List Styles Alabama Alaska Arizona Arkansas list-style-image: url(imageURL) list-style-position outside or inside <ol style="list-style-image:url(http://www.leseptiemeart.com/cinema/pictos/bullit.gif)"> <li>Alabama</li> <li>Alaska</li> <li>Arizona</li> <li>Arkansas</li> </ol> Alabama Alaska Arizona Arkansas

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

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="http://www.cs.sunysb.edu/people/faculty/AhmadEsmaili.html">Ahmad 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

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="http://www.cs.sunysb.edu/~cse102/lectures/HTMLBasics.ppt"> Relative Reference Absolute Reference Relative reference is preferred. You should use it when possible. Why? When is it not possible?

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>

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="http://www.nytimes.com" target="win1">The New York Times</a></p> <p><a href="http://www.newsday.com" target="win2">Newsday</a></p> <p><a href="http://www.latimes.com" target="win1">The LA Times</a></p>

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

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

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>

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