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
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.
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.
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.
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 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
Unordered List, HTML tags
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 ]
Go back to Go to Menu link.
Method - this page
The method of this page is (( set a table 100% width, with border off,
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.
firstname.lastname@example.org this page A02A