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

001A

Web Site Development

Lesson 1.1
Title and Head, Body and Text

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

Your first Web Page can be a simple affair that you can build rather quickly.

These are some of the things you need to know to get started. You use your Notepad editor for text files. Use the same program application to save a file and have it turn out as a Web Page but when you save it make the ending of the file name .htm or .html, that's the first thing. The second thing is the code that you add to your text file that lets the browser program on your computer to do the work are called TAGS. A more formal name for TAG is ELEMENT, eg. 'The element <X> can contain the following attributes; ... '.

When the browser program is asked to look at a file and sees the .htm or .html at the end of the file name instead of the .txt / .text it starts to look for TAGS. The parts and structure of a HTML
( that stands for Hyper Text Markup Language ) document are generally as follows:
The HTML tag <html> is set at the beginning,
the tag </html> closes off the end of the web page.
Tags <head> ,,,</head> and <body> ,,, </body> are set in between the HTML tags to define the head and body.

Everything you put in the web page must be in one of three places,,
The Head,
The Body or
The DTD [ document type definition ] get to that later.

The Title tags are used to give your page a name that shows up at the top of your monitor screen, <title> and </title>, and are placed in the head, What you put between the TITLE tags you will see as the page label in the blue bar at the top of the browser. In the BODY you can place Lists, Text and Headers and all the other stuff you want people to see. Lets talk about lists first only because I am going to use lists to show you things and I will explain how to make the lists later..

Today Lists can be of three types,
The Ordered list
The Unordered list and
The Definition list sometimes called the glossary list that has two parts to each element.
Here is an example of a definition list that shows you how some TAGS change the appearance
of the text they enclose.

bold: using the tags and
italic: using the tags and
tele type: using the tags <TT> and </TT>
citation: using the tags <CITE> and </CITE>

Here is the code that makes the above list:
(with just a little abbreviation)
<DL><DT>bold</DT>
<DD>using the tags ...</DD>
<DT>italic</DT>
<DD>using the tags ...</DD>
<DT><TT>tele type</TT></DT>
<DD>using the tags ...</DD>
<DT><CITE>citation</CITE></DT>
<DD>using the tags ...</DD>
</DL>

DL: refers to Definition List
DT: refers to Definition Term
DD: refers to Definition Data

There are a few more such as tags for emphasis and strong that use , and , . HTML code from the beginning offered a way to render tabular data and the TAGS used to build the 'Table' became very popular to help frame the entire page display, as this page is framed. I set the border value to "0" which is why you do not see it.
With border value set to "2" this code:
<table border="2" width="122">
<tr>
<td width="58">
data
</td>
<td width="58">
data
</td>
</tr>
</table>
- forms a Table of two cells, side by side like the one
below.

data

add this </tr>, <tr> to close one row and start another and get this

data

The TAGS and will separate paragraphs apart,
and TAGS <CENTER> and </CENTER> will align a word, a line, or a paragraph
depending how they are placed, and the TAG will
break off a
new line,

There is a TAG <HR> that can set a horizontal rule on the page.

Method - this page

The method of this page is (( set a table of fixed width, with border off,
aligned to the center to give margins on each side.
One singular table cell was used to hold all the content, each partitioned by , paragraph TAGS )).

Six paragraphs left align-default
one list (def-type)
one paragraph left align-default
one list (def-type)
<center>TAG
- a little table with border
- one paragraph
- a little table with border
- two paragraphs - all between center tags
</center>TAG
the <hr> and then this paragraph, left align-default, with its header
and then a preformated block below this paragraph,
( showing the code of this page's 'head' section )
with a header.

Head Section - this page

<head>
<title>Title and Head, Body and Text</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content=";Alain Lareau">
<meta name="description" content="Beginner lessons for HTML, Title and Head, Body and Text">
<meta name="keywords" content="HTML, learn, basics, lists, text, headers, Lesson 1">
</head>

This is a 'Link' or 'Hot Spot' ~> --------- Next Lesson

Web Site Development

Lesson 1.1Title and Head, Body and Text

Method - this page

Head Section - this page

Lesson 1.1
Title and Head, Body and Text