Scribd
Upload
16 views

W01 04 HTML ListsPicsLinks

The document discusses HTML lists, images, links, and special characters. It provides details and examples of how to use list tags, image tags, link tags, and character entity references in HTML. It also includes some suggestions for writing HTML code and announces upcoming class assignments and readings.

Uploaded by

thejaka aloka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

W01 04 HTML ListsPicsLinks

The document discusses HTML lists, images, links, and special characters. It provides details and examples of how to use list tags, image tags, link tags, and character entity references in HTML. It also includes some suggestions for writing HTML code and announces upcoming class assignments and readings.

Uploaded by

thejaka aloka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

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)
• < à &lt;
• > à &gt;
• Copyright à &copy;
• Registered Trademark à &reg;
• & à &amp;
• Non-breakable space à &nbsp;
• 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

You might also like