Site hosted by Angelfire.com: Build your free website today!

bin counter A02A

Web Site Development

Lesson 1.2
Title and Head, Body and Text

part two + the HTML 2.0 reference set

skip ahead ,, ,, ,, ,, ,, By Alain Lareau

    In the last Lesson we were talking about the Definition List and it was being used to show you some HTML tags that control how text is displayed on the Web Page. Then I ended the page by talking about the Paragraph tags <p> and </p> and that the page had a method.

    I hope you like that format as I will use it over and over. Let's begin this lesson by keeping track of all the HTML tags we have reviewed so far. See to the right I set an Unordered List or sometimes called a bulleted list, I placed the tags or ELEMENTS there so they are easy to see. If they come in pairs I will put both. If a closing tag is not used then I will put just the one. The code to build an unordered list
looks like this:
<ul>
<li> the list item </li>
<li> the list item etc.</li>
</ul>

    One more List to show you, instead of the bullet points you can have numbers. If that's the case it is called an Ordered List. You can have them be Roman Numerals or A, B, C - a, b, c, letters even. We will have a lesson just for that later. Look to the lower right, that is a numbered list or an Ordered List as it is formally called, with a little Header.
The code to build an unordered list looks like this:
<ol>
<li> the list item </li>
<li> the list item etc.</li>
</ol>

    Most of the 'stuff' you put on your page, if it is text, needs to be in between the Paragraph tags <p> and </p> or some 'Block Level' ELEMENT but lists do not. Headers also must stand outside of a paragraph and they come in different sizes, like these.

Header size h1

Header size h2

Header size h3

Header size h4

Header size h5
Header size h6

    You can make a list with or without a Header, you can put a list in a Paragraph if you want but try not to put a Header inside a Paragraph. That will mess things up, for the paragraph that is, it wouldn't bother the header. I have a few things to bring up for this lesson and on the next one we can really get rolling. The tags <pre> and </pre> which mean 'Preformated' will render to the page exactly as typed in. I will be using them to portray code and give you examples as we go (see at right). The tags <a> and </a> are used to make the 'Hot Spots' or the active links on the page.
The hot spots are the 'Hyper Text' that HTML is named after.

[ Lesson 1.1 | Lesson 1.2 | Lesson 1.3 | Lesson 1.4 ]

    This row of four links is an old school quick menu bar. I show you the code that displays it in the right side column by employing the set of 'Pre' ELEMENTS. Look at right, there it is. This paragraph and the one above (link set) do not use a 'font' ELEMENT as the other paragraphs have, so in HTML 3.2 this defaults to text size 3.
In the HTML 2.0 specs there is no 'font' ELEMENT, all text is size 3 like this.

    To save space I abbreviated the URL to (http://). The tags are commonly called the 'Anchor' tags or anchor ELEMENT and has two parts you want to know about, or let's say you can apply two 'Attributes' (href) and (name) to the ELEMENT that tell the Browser what to do with that 'hot spot'. The attributes give values with the 'Equals Sign' and a set of quotation marks. The 'href' value tells the browser where to go look ( the URL/URI to use ) and the name value holds an anchor on a page for the browser to land on a special spot. The four purple (Lessons x.x) are redone at the bottom of the page with larger text, this time one anchor ELEMENT has a name value attributed to it. Try this one, Go to Menu.

    DTD is short for Document Type Definition, and this goes at the very top of the code you write and it tells the browser which set of HTML specification you have adhered to when writing your code. So in one more example, again using the pre ELEMENTS to display it, I show the use of the 'Font' tag/ELEMENT to control the size of text. Some thing that is new in the HTML 3.2 version but not included in the HTML 2.0 standard. Text should always be nested in between paragraph ELEMENTS unless the text is in a table cell then it is not needed but the font ELEMENT in HTML 3.2 can also control color for specific text. With HTML 2.0 the general colors are set in the body ELEMENT.
This is the body tag used in the code for this page.

<body bgcolor="#99ccaa" text="#000000" link="#6633aa" vlink="#339966">

Can you see this ELEMENT 'body' has Four Attributes?, each specifies a color with a setting by hexadecimal value. The values need not be hexadecimal, they can be words but still should be set between quotation marks. In all the up coming lessons, I think it is best to have you acquainted with HTML 5 as soon as possible and with that also the CSS 3 or lets call it Cascading Style Sheets or just stylesheets for short. So just to be clear, these first two lessons are describing the version HTML 2.0 to help the newBee understand how HTML got started.

this is the part of the code for the hot spot ( hyper text ) menu bar of larger text just below
that contains the anchor for the other link "Go to Menu"
<A href="http://www.angelfire.com/or/MetaphorMan/indox.html" name="menu">  Lesson 1.2</A>

Check the 'Specifications' for ELEMENTS we might have missed
See the code rules of HTML 2.0, Reference Set at EchoEcho.com
or if you wish to see the original page that the site references,
look at http://www.w3.org/MarkUp/html-spec/html-spec_toc.html
which itself is written to HTML 2.0 specs. Its DTD is:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0 Strict Level 2//EN">
This page that I write and the previous lesson are built to specifications of HTML 3.2,
because I wanted to employ the 'Font' ELEMENT, and uses a different DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Unordered List, HTML tags
acquainted with thus far
  • <html> </html>
  • <head></head>
  • <body> </body>
  • <title> </title>
  • <B> and </B>
  • <I> and </I>
  • <TT> and </TT>
  • <CITE> and </CITE>
  • <EM>, </EM>
  • <STRONG>, </STRONG>
  • <table>, </table>
  • <tr>, </tr>
  • <td>, </td>
  • <p>, </p>
  • <CENTER>, </CENTER>
  • <br>
  • <hr>
Ordered List - Topics
in the lesson plan
  1. Lists
  2. Headers
  3. Preformated Text
  4. Hot Spot - Links
  5. Text size and color,
    the Font tag
  6. Link, Text & BG color,
    the Body tag
Unordered List
New HTML ELEMENTS
  • <ul> </ul>
  • <ol></ol>
  • <li> </li>
  • <h1> </h1>
  • <h2></h2>
  • <h3> </h3>
  • <h4> </h4>
  • <h5> and </h5>
  • <h6> and </h6>
  • <pre> and </pre>
  • <a> and </a>
  • <font> and </font>

Preformated Text
set using <pre> - </pre>
<center>
<p>
[ <A href="http://">
L 1.1</A>
 | <A href="http://">
L 1.2</A>
 | <A href="http://">
L 1.3</A>
 | <A href="http://">
L 1.4</A>
 ]</p>
</center>
Examples of text by assigning value to
'size' attribute in the 'Font' ELEMENT

<FONT SIZE="2">
text size 2</FONT>
renders - text size 2

<FONT SIZE="3">
text size 3</FONT>
renders - text size 3

<FONT SIZE="4">
text size 4</FONT>
renders - text size 4

<FONT SIZE="5">
text size 5</FONT>
renders - text size 5


the default colors
if not otherwise set
<body
    bgcolor="#ffffff" or "white"
    text="#000000" or "black"
    link="blue"
    vlink="violet">

When the Web was new this was a very popular way of setting up a quick menu
at the bottom of Web Pages.

[ Lesson 1.1 | Lesson 1.2 | Lesson 1.3 | Lesson 1.4 ]
Webmaster-email: alainelj@yahoo.com
Go back to Go to Menu link.

Method - this page

The method of this page is (( set a table 100% width, with border off,
one table row of three cells
5%, allowing a margin
70%, for the general text
25% for the lists
creating three table columns )).

Three headers-centered,
table of three columns
in center cell
four paragraph left align-default
<center>TAG
six headers between
</center>TAG
one paragraph left align-default
one paragraph text size 3-default, centered (link menu)
one paragraph text size 3-default, left align-default
two paragraphs left align-default
in right cell
-- unordered list with header
-- ordered list with header
-- unordered list with header
-- preformated block with header
-- four text size examples
-- one paragraph
three centered paragraphs
- text/(link menu)/text
under that table
and then this paragraph with header, and preformated block with header in a new table.

DTD and Head Section - this page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html><head>
<title>Lesson 1.2 HTML tutor cont.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Alain Lareau">
<meta name="keywords" content="DTD, HTML, HTML 2.0, Title, Head, Body, Text">
</head>

Lesson 1.3 is nested in a page called "The Great Big Website of Jobs"
which will be used as a Subject of multiple lessons and is written to specs of HTML 4.01
with the DTD set to <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
--------- Next Lesson


Copyright © 2010 - Alain Lareau
All Rights Reserved unless with Written Request.
alainelj@yahoo.com this page A02A
http://www.angelfire.com/or/MetaphorMan/indox.html