HTML Lists, Pictures, and Links
CS 115 Computing for the Socio-Techno Web
Instructor: Brian Brubach
Announcements
• Assignment 1 is posted, due Monday
• Social implications reading for Monday will be posted today
• Week 1 survey going out today
HTML lists
• <ul> </ul> à Unordered list (e.g., bullets)
• <li> </li> à Each list item <p>
This is an ordered list:
• <ol></ol> à Ordered list (e.g., numbered) <ol>
• <li> </li> à Each list item <li>Some thing </li>
• <dl> </dl> à Definition list <li>Another thing </li>
• <dt></dt> à term of list item </ol>
• <dd></dd> à description of list item </p>
• Lists can be nested
• Example file à lists.html This is an ordered list:
• Note where nested lists appear 1. Some thing
2. Another thing
HTML images
• <img> tag used for image inclusion
• <img> attributes
• src à Source for the image, where to find the file
• width
• height
• alt à Simple text description
• <img src=“picture.jpg” width=“80” height=“50” alt=“description”>
• To reduce the image size without losing proportions, specify either the
width or height (not both) and the browser will compute the other
• Example file à image.html
HTML links
• Link à Connection between web resources
• Links created using the <a> tag
• <a href=“http://www.google.com”>Google Page</a>
• Absolute links need to specify http://
• You can also link a page with another using relative links
• <a href=“page.html”>
• Assumes “page.html” file is in the same folder (sibling)
• You can create links to elements in the same document using the id
attribute
• Example file à links.html
HTML links
• <a> can include a target attribute that indicates the destination where
the document will be opened
• _self (default)
• _blank (new window)
• Other options
• We can replace the text with an image
Character Entity References
• Special Characters (Character Entity References)
• < à <
• > à >
• Copyright à ©
• Registered Trademark à ®
• & à &
• Non-breakable space à
• List of others à http://dev.w3.org/html5/html-author/charref
• Example file à character_references.html
Suggestions for writing HTML code
• Add the corresponding end tag immediately
• Atom auto-complete does this for you
• Use indentation
• Have a consistent style
• Use comments to separate sections of your code
• Validate your code as you develop it (not at the end)
Exercise
• Let’s try some of this out
Reminders
• Assignment 1 is posted, due Monday
• Social implications reading for Monday will be posted today
• Week 1 survey going out today
