Website Development I

Class No. 10:

Creating Lists

Jump to Exercise

Today’s Goal

To explore HTML tags and attributes related to lists and other organizational elements.

Class Resources

Web Programming book reading for THIS class

• pages 132-152
1. Introduction
2. Unordered Lists
3. Descendent Selectors
4. Ordered Lists
5. Figures
6. Organizational Elements
7. section, article, and aside Elements
8. nav and a Elements
9. header and footer Elements

Web Programming book reading for NEXT class

• pages 168-194
1. Introduction
2. Table Elements
3. Formatting a Data Table: Borders, Alignment, and Padding
4. CSS Structural Pseudo-Class Selectors
5. thead and tbody Elements
6. Cell Spanning
7. Web Accessibility
8. CSS display Property with Table Values

Preambles

Distribute Mid-Course Evaluation form

Questions from our last class or the readings?

Creating Lists

Bulleted (unordered) lists:

<ul>
  <li>first item</li>    • first item
  <li>second item</li>   • second item
  <li>third item</li>    • third item
</ul>

• don’t forget that all opening tags must be closed
• that is, <ul> must be closed with </ul>
• and <li> must be closed with </li>
• type attribute on <ul> tags: "disc", "circle", or "square"

Numbered (ordered) lists:

<ol>
  <li>first item</li>    1. first item
  <li>second item</li>   2. second item
  <li>third item</li>    3. third item
</ol>

• type attribute on <ol> tags: "A", "a", "I", or "i" and many more

<ol type="a">
  <li>first item</li>    a. first item
  <li>second item</li>   b. second item
  <li>third item</li>    c. third item
</ol>

<ol type="I">
  <li>first item</li>      I. first item
  <li>second item</li>    II. second item
  <li>third item</li>    III. third item
</ol>

• start attribute

<ol start="6">
  <li>first item</li>    6. first item
  <li>second item</li>   7. second item
  <li>third item</li>    8. third item
</ol>

Nested lists

• creating outlines (the following is drawn from the first few titles and subtitles and sentences for this chapter in our book)
1. Introduction
2. Unordered Lists
1. Parent and Child Elements
1. Let’s now examine ...
2. Nested Lists
1. In Figure 4.2, ...
2. Now go back to Figure 4.1, ...
3. As you might have noticed, ...
3. Symbols for Unordered List Items
1. According to the W3C, ...
2. For unordered lists, ...
3. For Figure 4.3’s second version, ...
3. Descendent Selectors
• many more properties can be changed using CSS

Definition Lists

• used to display pairs of items, originally a term and its definition
• the entire list is enclosed in <dl>...</dl> (definition list) tags
• individual terms are enclosed in <dt>...</dt> (definition term) tags
• the corresponding definitions for those terms are enclosed in <dd>...</dd> (definition description) tags
• <dt> and <dd> tags typically alternate in the definition list so that each description follows the term that it describes

Defintion List Example — this text is in the PRO Manual on page 19

Mail Guidelines

Inform anyone you think will send you mail about these regulations.

GREETING CARDS

Greeting cards are now allowed because they are all photocopied. The only exception is those with glitter or foreign substances due to the damage that it can cause to the machine.

DRAWINGS

All drawings will be photocopied if they are on standard paper.

The only drawings that will be color copied are those from children.

PHOTOGRAPHS

Photographs that arrive from verifiable photo-printing companies do NOT need to be photocopied.

All other photos will be copied on double sided paper.

PUBLISHED MATERIAL

Though material printed from the Internet is permitted, photocopies of published and/or copyrighted materials from a book or magazine are not allowed.

PAGE LIMITS

Mail is limited to 10 pages per envelope, but double-sided printing is okay and counts as one page. Stapled papers are not allowed.

MAIL HOLD TIMES

Any mail sent through the US postal service or mail carrier will be photocopied before being delivered to the resident.

The original correspondence will be kept for 10 business days then destroyed.

If there is any issue with the copying of the original correspondence, please send the original copy and an Inmate Request Slip to the the Mailroom.

(See page 7 for electronic messaging through GTL tablet service.)

   1  <h2>Mail Guidelines</h2>
   2  <p><em>Inform anyone you think will send you mail about these 
   3    regulations.</em></p>
   4  <dl>
   5    <dt>GREETING CARDS</dt>
   6      <dd>Greeting cards are now allowed because they are all photocopied. 
   7        The only exception is those with glitter or foreign substances due to 
   8        the damage that it can cause to the machine.</dd>
   9    <dt>DRAWINGS</dt>
  10      <dd>All drawings will be photocopied if they are on standard paper.</dd>
  11      <dd>The only drawings that will be color copied are those from 
  12        children.</dd>
  13    <dt>PHOTOGRAPHS</dt>
  14      <dd>Photographs that arrive from  verifiable photo-printing companies 
  15        do NOT need to be photocopied.</dd>
  16      <dd>All other photos will be copied on double sided paper.</dd>
  17    <dt>PUBLISHED MATERIAL</dt>
  18      <dd>Though material printed from the Internet is permitted, photocopies 
  19        of published and/or copyrighted materials from a book or magazine are 
  20        not allowed.</dd>
  21    <dt>PAGE LIMITS</dt>
  22      <dd>Mail is limited to 10 pages per envelope, but double-sided printing
  23         is okay and counts as one page. Stapled papers are not allowed.</dd>
  24    <dt>MAIL HOLD TIMES</dt>
  25      <dd>Any mail sent through the US postal service or mail carrier will be 
  26          photocopied before being delivered to the resident.</dd>
  27      <dd>The original correspondence will be kept for 10 business days then 
  28          destroyed.</dd>
  29      <dd>If there is any issue with the copying of the original correspondence, 
  30          please send the original copy and an Inmate Request Slip to the the 
  31          Mailroom.</dd>
  32  </dl>
  33  <p>(See page 7 for <strong>electronic messaging</strong> through GTL tablet 
  34    service.)</p>

CSS Review Questions

1. What CSS would you use to center the text in the first two lines?
2. What CSS would you use to render the section titles (the <dt> elements) in boldface?
3. What CSS would you use to eliminate the space between the section titles (the <dt> elements) and the explanatory text (the <dd> elements)?
4. What CSS would you use if you wanted the explanatory text to not be indented, but rather to be left-aligned with the section titles as it is in the PRO Manual?

Entities

• special characters and symbols
• use in rendering non-English languages
• see the Class Resources for Entities at the top of this page
• HTML Entities Reference Chart (HTML page, source: https://dev.w3.org/html5/html-author/charref)
• HTML5 Entities Cheat Sheet (PDF) – abbreviated

Format

• all entities begin with an ampersand (&)
• the ampersand is followed by a series of characters or a number
• all entities end with a semi-colon (;)

Commonly Used Entities in These Class Notes

• the ampersand itself: & =>  &
• an “N” dash, which is longer than a hyphen: – =>  –
• an “M” dash, which is the width of a letter M: — =>  —
• the copyright symbol: © =>  ©
• a right-pointing triangle: ▶ =>  ▶
• note that the # sign means that the number that follows is in hexadecimal (base 16)
• a nice-looking apostrophe: ’ (right single quote)  =>  ’
• nice-looking quotation marks: “ and ” (left double quote and right double quote)  =>  “ ”
• an optional hyphen:  ­
• a non-breaking hyphen:  ‑
• a non-breaking space:   
• I do not recommend using this entity to indent elements.
• Indentation should be done with CSS using text-indent: 2em ; (or with some other value to indent as far as you’d like).
• The   entity can be used to prevent two words that you want to keep together from “wrapping” to a new line, such as, Mr. Heines.
• Wrapping can also be prevented with a span and CSS using: white-space: nowrap ;

Today’s Exercises

Goal:  To create a web page that uses lists, such as page 6 of the PRO Manual.

Note:  If you wish to work on a different PRO Manual page, or to implement a page of your own design and content that uses lists, please feel free to do so.

Step 1:  Copy the starter code to your dropbox

1. Open the UltraEdit editor on your computer.  This should open a blank window that is ready for editing.
• If your editor is already open, click File and then New to open a blank window.
2. Leave the editor open and click here to run the starter code for this exercise.
• If you’re reading these instructions on paper, go to the class website on your computer to find the click here link above and click it.
3. As we have done previously, type CtrlU to view the source code for the starter code page.
4. Click anywhere in the browser window and type CtrlA to select all of the code.
5. Type CtrlC to copy the code.
6. Return to UltraEdit and type CtrlV to paste the code into the blank editor window.
7. Type CtrlS to save your copy of the starter code to your dropbox.  Name the file as you see fit.
8. Open the file you just saved in Microsoft Edge to ensure that you have saved it correctly.

Step 2:  Format your page to look like the printed version of PRO Manual page 6.

9. Modify the starter code to make the page look as it does in the PRO Manual.  This page gives you the opportunity to experiment with a definition list and a bulleted list.
• To do this, you will have to add tags to the starter code and change some of the tags in the starter code.
• You will also need to add CSS.
10. As before, make note of what issues you run into and what questions you have so that we can all discuss them together.

View the Source Code for This Page   Jump to the Top of This Page

This is Class No. 10.  It was last modified on Saturday, October 21, 2023 at 4:38 PM.  Copyright © 2010-2024 by Jesse M. Heines.  All rights reserved, but may be freely copied or excerpted for educational purposes with credit to the author.