Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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? • • • East Central West <ul> <li>East</li> <li>Central</li> <li>West</li> </ul> How would you get the following list? 1. Yankees 2. Red Sox 3. Orioles <ol> <li>Yankees</li> <li>Red Sox</li> <li>Orioles</li> </ol> How would you get the following list? • East 1. Yankees 2. Red Sox 3. Orioles • Central • West <ul> <li>East <ol> <li>Yankees</li> <li>Red Sox</li> <li>Orioles</li> </ol></li> <li>Central</li> <li>West</li> </ul> How would you get the following list? • • Monday – Read • pgs 50 -100 • pgs 170 – 200 – Review • Pgs 600-640 • Pgs 680-700 Tuesday <ul> <li>Monday <ul> <li>Read <ul> <li>pgs 50 -100</li> <li>pgs 170 – 200</li> </ul></li> <li>Review <ul> <li>pgs 600-650</li> <li>pgs 680-700</li> </ul></li> </ul></li> <li>Tuesday</li> </ul> List Style Types • Specify using style attribute with list-style-type property. • Possible values: • circle, disc, square, none, custom image, decimal, lowerroman, 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> I. II. III. IV. Alabama Alaska Arizona Arkansas More List Styles • list-style-image: url(imageURL) • list-style-position – outside or inside <ol style="list-styleimage:url(http://www.leseptiemeart.com/cinema/ pictos/bullit.gif)"> Alabama <li>Alabama</li> <li>Alaska</li> Alaska <li>Arizona</li> Arizona <li>Arkansas</li> Arkansas </ol> How would you get the following Definition List? <dl> HTML Hypertext Markup Language HTTP Hypertext Transfer Protocol CSS Cascading Style Sheets <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> 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/AhmadE smaili.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> Relative Reference Absolute Reference <p><a href="http://www.cs.sunysb.edu/~cse102/lectures/HTMLBasics.ppt"> HTMLBasics.ppt </a></p> • 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: 1. 2. 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:[email protected] ?SUBJECT=hw1&BODY=I want an A &[email protected]&[email protected]"> 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