Signed in as:
Sign out
Links
Creating Websites home
Beginnings
Introduction to the Web
Introducing HTML
Marking up text
Setting Up
FTP and FileZilla
Links and anchors
Getting some style
Intermediate topics
Style sheets
Testing and debugging
Lists
Images and maps
Audio and video
Intro to JavaScript
The DOM and scripting
Logic and Arrays
Functions and document.write
Forms and INPUT
Other controls
Cookies
HTML tables
Structuring tables
Scripting w/ tables
Inline frames
Loose ends
Support
This first video describes HTML's support for lists:
This video also covers the attributes and style properties related to lists.
Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.
Lesson 10: All you need to know about HTML Lists
Hands on exercise
For those who want to practice using what we cover in this class,
most lessons have an opportunity for you to learn on your PC. The
exercise for this lesson is primarily concerned with creating
ordered and unordered lists.
In the files you created for the "Flying Drones Academy" (FDA.html and FDAHist.html),
there are two lists in the left hand column. Convert these to unordered lists:
First, replace the <br> tag after 'Links to site pages' with a </p>
end tag
and do the same with the <br> tag after 'Further information'.
Next, after the new </p> tags, on the next line, add a <ul> tag.
Replace the three non-breaking space character entity
references in front of each list entry with <li> tags
And replace the trailing <br> tags with </li> tags.
Replace the </p> tags at the end of the lists with </ul> tags.
In FDAHist.html, in the main column, is a list of courses. Convert this to an
ordered list, starting with '200' (use a process similar to the one you used
above for the left hand column).
Aesthetically, you might want to replace the
<p> tag in front of the list with a <div> tag (in which case you
should replace the </p> end tag with a </div> end tag, of course).
Note: this might require some adjusting of your style sheet to fit
the page into the viewport nicely. Just a heads' up.
Optional: play with the list-style-type and list-style-position properties for
the ordered list. For the
unordered lists, try playing with the list-style-image property.
The video below is a bonus video, and optional because it's a little nerdy / geeky. It explores an application for lists that I find useful: create a list of links, a definition list whose elements are all <a> elements - links to sites I use a lot; I call this 'bookmarks.html', store it in my 'scraps' directory, and make it be the home page for all the browsers I use.
Supplemental materials
A cumulative summary of the contents of the course so far:
Click here
Hands on exercise (Optional)
Using the session content as a guide, build your own bookmarks page and
make it the home page for all your browsers.
back list forward
Email us if you would like additional information. We would love to see your comments and recommendations for our site.
Our privacy policy: we use cookies to keep track of where you are on the site, but we do not leave cookies on your site; we do not track your visits; we do not disseminate any information about you because we do not gather any information about you.