Think about what you want on your page:
  • think of a theme for your pages
  • decide what you want to share with the world
  • make an outline
  • have fun, be creative...the sky's the limit!



You can write your HTML document on Microsoft Notepad:
You can use any word processor utility, however the one you choose needs to have the ability to save as an HTML type file. Notepad will handle this just fine and you can find it in your Microsoft Accessories folder. (if you are a MAC user, then you can use "Simple Text", but you are on your own to translate the other instructions to fit the MAC) To open it, click on START.....PROGRAMS.....ACCESSORIES.....NOTEPAD.

You may use upper or lower case letters interchangeably, except in the name of a file. File names ARE case sensitive and so must be exactly the same in the HTML document as stated on the file name. You may skip spaces and lines whenever it will make your document easier for you to read, however the browser will only see one space and will see no line breaks unless you insert a line break tag.

Now begin your document, like all HTML documents begin, by typing the following tag at the top of the page which will tell the browser that this is an HTML document (note that the closing for this tag will go later at the very bottom of the document):
<HTML>


Now type the next tag, the <HEAD> tag, which also appears in all HTML documents and is used to contain information about the document that will not be displayed on the page itself like the TITLE, META TAGS, CSS.......more on all that stuff later....right now we will just deal with the TITLE. (note that the closing for this tag will go at the very bottom of the document right above the closing HTML tag):
<HEAD>


The next tag is part of the HEAD, so it will go between the opening <HEAD> tag and the closing </HEAD> tag. It tells the browser what title you want to appear up in the bar above the pages window. It has an opening and a closing with the words of your title in between. You may substitute "My Page" for whatever title you like:
<TITLE>My Page</TITLE>


Now you need the closing of the Head (note that closing tags have a slash):
</HEAD>


Next is the <BODY> tag. Inside the brackets of the opening <BODY> tag you will also put your color and background-image choices.These colors are expressed as hex codes which are 9 digit codes for the colors that indicate their red, green and blue values.
See my color chart for a list of these codes.
(As an alternative to the hex codes you may use the words for some colors) The following values can all be expressed in the <BODY> tag. Any that you leave out will be seen in the browsers default colors.

BGCOLOR= background color
TEXT= text color
LINK= link color
VLINK= visited link color (after a link has been used by the visitor)
ALINK= active link color (a quick flash of color as the link is clicked)
BACKGROUND= can specify an image for the background by using its file name here (the image will be tiled or repeated if it is smaller than the page)

Let's say you choose a sky image for the background, white for the background color that will show while the sky image is loading, black for the text, blue for the links, red for the visited links, and yellow for the flash of color when a link is clicked on. This is what you would type. Note that there is a required space between each of the values (also sometimes called "attributes") in the tag. (you may substitute your own choices):
<BODY    BACKGROUND="sky.jpg"   BGCOLOR="FFFFFF"    TEXT="000000"    LINK="0000FF"    VLINK="FF0000"    ALINK="FFFF00">


The closing for the BODY tag will go down at the bottom of the document with the closing of the HEAD and HTML tags.

Recapping.....so far, your document should look like this:
<HTML>
<HEAD>
<TITLE>My Page</TITLE>
</HEAD>
<BODY    BACKGROUND="sky.jpg"   BGCOLOR="FFFFFF"    TEXT="000000"    LINK="0000FF"    VLINK="FF0000"    ALINK="FFFF00">


The contents of your page will be going between this and the closing </BODY> tag.


SAVE YOUR WORK:

In the next lesson we will work on the contents of the page. Meanwhile you will want to save what you have done so far. Insert a floppy disk in your A-DRIVE. You will want to have all of the web site's contents in one directory in order to preview it off-line before publishing, so either use the A-drive or create a new folder for it somewhere on your hard-drive. To save your document, in NOTEPAD's tool bar....click on FILE, then in the drop down box click on SAVE AS. Now you need to decide where you want to save.....so in the SAVE IN box browse for your choice such as FLOPPY A-DRIVE. Now type in the name of your file in the FILE NAME box. Name it whatever you like..."index.html" is a good choice for your opening page. Be sure you have the dot html added on as the file extension (you may also use dot htm without the L, just be consistant) Now in the SAVE AS TYPE box choose ALL FILES. Then click on SAVE.

click to continue
or go to:
[ HOME , lesson 1 , lesson 2 , lesson 3
extras , advanced extras , colors , graduation ]



visit Ladybug's Garden, my personal pages