D11W
back to Lesson 2.5

Lesson 3.1 ( Lists )

I like to make web pages, many of my friends do as well. Some strictly professionally other not. We do like to share them. These pages vary widely on many topics, some are "Samplers" used to promote their talents. We created an outline to help keep track of these pages. The Outline evolved in form and when I find others who are also interested in HTML I enjoy introducing people to it.

Useful Fill

When making the Outline public it was obvious that Useful Fill was needed so we donated, so to speak, our cluttered bookmarks/favorites from our browsers. This is a perfect training ground for you if you wish to contribute to compiling projects that request submissions of hand coding

A simi-private directory

When Yahoo started as a "Portal", that's what they called themselves back then, it was just a souped up directory. Search Engines did exist but "Directories" were a big deal too. Our outline developed into a semi-private directory.

Old-Timers are witnesses

There is a history we can tell and a technology we can teach,

You can take over and inherit, we don't live forever

So for my own sake I take an opportunity to showcase some of the pages I publish. Next I nest then in the Outline. Invite you to do the same. If you get good at this I introduce you to my friends, in stages. My friends gain new friends and in turn introduce them to you.
It's not a Facebook thing!

Body of "list" lesson. - - - - - - - - - - - - - - -

<ol>
<li>Electrical and Electronics
  <ol>
  <li>Computers
    <ol>
    <li>Hand Coding HTML Tutor
      <ol>
      <li>HTML Tables</li>
      <li>HTML Lists</li>
      <li>HTML Text</li>
      </ol>
    </li>
    <li>Validator</li>
    </ol>
  </li>
  </ol>
</li>
</ol>

We call the above 'clean HTML', no attributes are set in the tags at all. Next let's look at the pertinent style rules that are in the style list in the head already in place.

h1, h2, h4 { color: black; text-align: center }

pre { margin-left: 12em; font-family: monospace; color: brown }

ul { color: blue; font-size: 18pt; text-align: center }

The first thing I notice is the preformatted text in the right most cell seems shifted too far to the right and I see in the style rule a property for margin-left: 12em; so I want to change that to.

pre.new { margin-left: 1.2em; font-family: monospace; color: brown }

So next I wish to set style rules for Ordered Lists to modify and control the Labels. I see I need four levels and I state for clarity - I, A, 1, a, see what I mean. In the table cell below at left I show code that uses attributes in tags to do it (trying to keep it minimal). In the cell after that let's look at some style rule that might do a similar job.

<ol type="I">
<li>Electrical and Electronics
  <ol type="A">
  <li>Computers
    <ol type="1">
    <li>Hand Coding HTML Tutor
      <ol type="a">
      <li>HTML Tables</li>
      <li>HTML Lists</li>
      <li>HTML Text</li>
      </ol>
    </li>
    <li>Validator</li>
    </ol>
  </li>
  </ol>
</li>
</ol>

ol.rome { 
  list-style-type: upper-roman; 
  color: blue; 
  font-size: 18pt; 
  margin-left: 1.2em; 
  text-align: left }
ol.alpha { 
  list-style-type: upper-alpha; 
  color: blue; 
  font-size: 14pt; 
  margin-left: -0.6em; 
  text-align: left }
ol.num { 
  list-style-type: decimal; 
  color: blue; 
  font-size: 12pt; 
  margin-left: -1.4em; 
  text-align: left }
ol.letter { 
  list-style-type: lower-alpha; 
  color: blue; 
  font-size: 9pt; 
  margin-left: -1.8em; 
  text-align: left }

Again in the table cell below at left I show code that uses attributes in tags but this time a much greater use of attributes to accomplish something close to the example using style. In the next cell the very clean HTML employing to the In-Head Style List.

<ol type="I">
<li><font color="#800040" size="5" face="Arial">Electrical and Electronics</font>
  <ol type="A">
  <li><font color="#800040" size="4" face="Arial"><b>Computers</b><font>
    <ol type="1">
    <li><font color="#800040" size="3" face="Comic Sans MS">Hand Coding HTML Tutor</font>
      <ol type="a">
      <li><font color="#800040" size="2" face="Arial">HTML Tables</font></li>
      <li><font color="#800040" size="2" face="Arial">HTML Lists</font></li>
      <li><font color="#800040" size="2" face="Arial">HTML Text</font></li>
      </ol>
    </li>
    <li>Validator</li>
    </ol>
  </li>
  </ol>
</li>
</ol>

<ol class="rome">
<li>Electrical and Electronics
  <ol class="alpha">
  <li>Computers
    <ol class="num">
    <li>Hand Coding HTML Tutor
      <ol class="letter">
      <li>HTML Tables</li>
      <li>HTML Lists</li>
      <li>HTML Text</li>
      </ol>
    </li>
    <li>Validator</li>
    </ol>
  </li>
  </ol>
</li>
</ol>

When employing the CSS style properties I must take extra time making style sheet rules but you see how much less coding I must do in the HTML tags. When I wish to add something or modify any part I can go straight to the In-Head Stylesheet and make the changes, also a great time saver. For instance, I would like to add links to two pages that fit well in the list as an Outline. Here they are. // Network Solutions Affiliate and Web dot Com home page site map. Network Solutions is a good spot to register Domain Names, a part of web.com, and Web dot Com a good overall hosting operation. Do these items need new categories or can they fit in existing? Does it make sense to you that we should add a category B "Internet" made on par with "Computers" and then nest the other? While we are at we should include Tripod, where this page is hosted.

ol.numnew { 
  list-style-type: decimal; 
  color: blue; 
  font-size: 12pt; 
  font-weight: bold; 
  font-style: italic; 
  margin-left: -1.4em; 
  text-align: left }

Back to Top

A practical exercise in Lists and Linking ->-----> Next Lesson

PIN -- Keys of Physics

Copyright © 2017 - Alain Lareau
All Rights Reserved unless with Written Request.
alainelj@yahoo.com this page D11W
https://metaphorman.tripod.com/list.html