Creating Websites home
Introduction to the Web
Marking up text
FTP and FileZilla
Links and anchors
Getting some style
Testing and debugging
Images and maps
Audio and video
The DOM and scripting
Logic and Arrays
Functions and document.write
Forms and INPUT
Scripting w/ tables
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.
Bonus video: An application of lists.
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