CONSTANTINE'S BEGINNERS GUIDE TO HTML

A page dedicated to teaching the basics and tricks of HTML. I will try to keep it as simple as possible and provide plenty of examples.This page is quite long and covers many HTML tools and tricks. If there is a certain subject you wish to see, instead of scrolling down the page you may click on it below:

BASIC TAGS
1. HTML
2. HEAD
  1. TITLE
  2. META TAGS
3. BODY
BACKGROUND AND COLORS
1. BACKGROUNDS
2. TEXT AND LINK COLOR
TEXT
LISTS
HORIZONTAL RULE
LINKS
IMAGES
SOUNDS
1. EMBED
2. BACKGROUND SOUNDS
TABLES
REFRESH

Basic Tags

HTML

HTML is the computer language used to tell your browser how to read a page. So, the first code you want to use will be the HTML code itself, surrounded by the lesser than (<) and greater than (>) tags. This tells the browser that the page is written in HTML. The < and > denote elements of the page, for example images and links. They are not used with text itself. HTML can be written in upper or lower case. The first code should be written as such:

<HTML>

This is also the very last code you will write except with a slash included:

</HTML>

The slash denotes the end of a command, in this case the end of a page. All other commands and text will be written in between these two tags.NOTE: when putting codes into your email signature you do not need the HEAD,TITLE,META, or BODY tags, but you do need the HTML tags.

HEAD

The head of your document is where you put the title and page description. The command <HEAD> begins this part of the document and </head> ends it. It should be written as such:

TITLE

The TITLE is basically the name of your page. It is what shows up in the window bar at the bottom of your screen. This DOES NOT put the title at the top of your page. example:

<HTML>
<HEAD>
<TITLE>Your title here</TITLE>
</HEAD>
</HTML>

META TAGS

So what else goes in the head? That would be Meta Tags, which provide a description of the page and keywords. This is useful if you plan on submitting your site to any search engines. Many search engines while looking for a page look for keywords and/or a description, which will also be what the person searching will want to know. A description is the first Meta command:

you will use whatever description you think is appropiate for your page. For example, where 'your page description' is I would use 'a page devoted to HTML and homepage design'. The second command is for keywords:

again, use whatever keywords you want. If your page is about animals you might put 'animals, zoo, mammals, reptiles,' and on and on where 'your keywords here' is. Someone doing a search for reptiles gets your page in his list and checks it out. This is what your code should look like now:

<HTML>
<HEAD>
<TITLE>YOUR TITLE HERE</TITLE>
<META NAME="description" CONTENT="your description">
<META NAME="keywords" CONTENT="your keywords">
</HEAD>
<HTML>

You will notice in this case you do not need an ending slash (/) command for META TAGS.

BODY

The BODY basically contains the contents of your page. This is where all text, links, images, sounds and backgrounds are put. The <BODY> tag goes after the ending </HEAD> tag. It also needs and ending tag </BODY> after everything else is written.This is what your codes should look like now:

<HTML>
<HEAD>
<TITLE>Your title</TITLE>
<META NAME="description" CONTENT="your description">
<META NAME="keywords" CONTENT="your keywords">
</HEAD>
<BODY>
</BODY>
</HTML>

BACKGROUND AND COLORS

For purposes of this tutorial we will only use the BODY tags in examples to save time and space from this point on. The first thing here is to decide what type of background to use, if any, and what colors to use for your text and links. You do not have to designate any as the browser will default to its regular colors if nothing is designated. For a list of webtv colors please refer to WEBTV COLOR GUIDE.

BACKGROUNDS

You can write your backgrounds using either solid colors or images. My background is an image of the sky. Colors can either be designated by a code or by its name. I find it easier to use names so that is what I will teach. For solid colors you would write this:

To use an Image you have found somewhere on the web, webtv users must link to it. Not many places allow this but thankfully, there is Draac. This gentleman has provided a list of backgrounds, images and sounds for you to link to for free. You may visit him at DRAAC' S GIFS 1-2-3. My background is from there. The address (also known as URL) must be included in the code and is written slightly different than a color background. Example:

That URL will take you to the page containing my background. The URL of your choice would go where mine is.

TEXT AND LINK COLORS

Now we designate our text and link colors. These codes will go in with the BODY BGCOLOR or BACKGROUND tag, whichever you use. The elements are TEXT, which is the color of all text, LINK, color of links not used, VLINK, color of links previously used, and ALINK, color while it is being used. For example, all my text is black, the links are goldenrod, any links you might have been to are blue, and if you click on a link it will be green while loading. Here is how to put them in your tag:

If using an image, replace BGCOLOR with BACKGROUND and the URL. You can also change these colors even if you haven't changed your background:

Put your own colors in. Now let's add it to our other codes. This will always go right after your <BODY> tag:

TEXT

TEXT is basically the written words on your page. It is not surrounded by the < and > tags:

<BODY<
This is what you would see on your page!!
</BODY>
</HTML>

There are several tricks to changing the size, color, alignment, look, and other aspects of your text, detailed next.

COLOR AND SIZE

FONT

You have already changed the color of your text in the BODY BACKGROUND or BGCOLOR command. You can though change a particular word or set of words to still a different color using the command by assigning that color to that particular set of words:

TRY IT LIKE THIS

would look like this:

TRY IT LIKE THIS

You will notice you do use the ending directly after the set of words.Let's see it in sequence:

<HTML>
<BODY>
<BODY BACkGROUND="http:// URL " TEXT="black">
This is normal text
this is your changed text
</BODY>
</HTML>

which would look like this:

this is normal text
this is your changed text

FONT can also be used to change the size of your text or particular passage. Designations for size go from -2 to +7, smallest to largest respectively. Example:

Try it like this

would look like this:

Try it like this

Now try puting the two together:

Try it like this

would look like this:

Try it like this

Here in order from smallest to largest are the different sizes:

this is -2
this is -1
this is 0
this is +1
this is +2
this is +3
this is +4
this is +5
this is +6
this is +7

HEADERS

There is another way to change size which I find easier to use, and those are HEADERS signified by <H>.They are sized from 1 to 6, with 1 being largest and 6 being smallest.They are written so:

which looks like:

try it like this

Notice again you must use the ending statement </H1>. The different sizes in order from smallest to largest:

this is H6

this is H5

this is H4

this is H3

this is H2

this is H1

By putting your FONT tags around the headers you can change the color also:

which would look like this:

try this

The nice thing about headers is they automatically do two things: give your sentence or word a bold face and set a line break, which will be discussed later. So why use font? Usually, I don't, but it does offer a greater range of sizes. One other thing you can do with just font size is:

ISN'T THIS NEAT!!!

You cannot do this with headers because the ending </H> tag automatically take you to the next line. All you have to do is designate a for each letter. I wrote the above example like this:

ISN'T THIS NEAT!!!

STYLE

Style is going to refer to the look of your text.Several options you have in making your text a certain style are italics, bold, underline, and typewriter. There are others but these are the most commonly used. Once again there are two ways of doing this so I hope it does not become too confusing. The first is what we call physical styles. With this style if a browser cannot read it, it reverts back to normal text.The physical tags are:

this is italics
this is underline
this is bold
<tt>this is typewriter text</tt>

Of course you may use these singularly or in any combination you want:

Remember to use the ending statement </> or all Text after will be in whatever style you chose to use for that sentence or word. The second style is called logical and is what I use. This lets a browser pick a style of it's own if say, italics, can't be read.

this most often causes italics
this most often causes bold
<CODE>This most often causes computer code text</CODE>

Now using the tricks and tools we have learned so far let's build the first part of your page.Since the TITLE command discussed earlier does not put a title at the top of your actual page we will make one using STYLE, FONT, and HEADERS and include some text examples:

<BODY>
<BODY BACKGROUND="your URL" TEXT="black or your color" LINK="your color" VLINK="your color" ALINK="your color>


<H1>WELCOME TO MY PAGE</H1> 
This would be regular text
which you could make just bold
<CODE>or put it in computer code colored green</CODE>
<H3>or italicize it and use headers, like in your title</H3>
</BODY>
</HTML>

which would look like this:

WELCOME TO MY PAGE

This would be regular text
which you could make just bold
or put it in computer code colored green

or italicize it and use headers, like in your title

LINE BREAKS

When writing text a browser will not switch to a new line of text unless told to do so, (the exception being anything surrounded with HEADERS). This is where the line break comes in. A break transfers down to the next line, like a tab button on your typewriter.

I can write my text like this. With no break, this sentence does not begin on the next line.

Or I can write my text like this
With a break, this sentence begins on the next line.

To do this you just add the command at the end of each sentence you want to finish on a particular line:

or I can write my text like this. 
With a break, this sentence begins on the next line.

Which is shown in the second example above. Again you do not need an ending , or for that matter , command. , or paragraph break, will leave an empty space between lines of text:

using will start a new paragraph

leaving a line of space>

The command will leave a line of space wherever you see fit. When using HEADERS, this will happen automatically so you do not need to use or with them.

PREFORMATTED TEXT

There might be a case where you want your text to show up just as you write it. The browser ignores spaces and returns unless you put in and . The answer to this is the <PRE> command. By surrounding a section of text with the PRE command it will show up just as it is written:

<PRE>
           This is how I wrote it
           I did not use <P>
           I did not use<BR>
</PRE>

which shows up like this:

           This is how I wrote it
           I did not use <P>
           I did not use <BR>

Does this mean everytime I want to center or align something I have to use PRE? No!!!

ALIGNMENT

There will be times when you want to center something or align it to the right or left. This can be used for images or text. To do it you must use the <CENTER> or <ALIGN="right or left"> tags. To center write this:

<CENTER>an example of centered text</CENTER>

to align right or left:

<ALIGN="right">this is right</ALIGN>
<ALI GN="left">this is left</ALIGN>

Alignment can be used for text, images, headers,links, and embedded sounds. Now let's add our alignments and line breaks into our sequence:

<BODY>
<BODY BACKGROUND="http:// your URL" TEXT="your color" LINK="your color" VLINK="your color" ALINK="your color">
<CENTER>


<H1>WELCOME TO MY PAGE</H1>


<CENTER>
This would be regular text 
<ALIGN="left">

which you could make bold and align left 

</ALIGN>
<ALIGN="right">
<CODE>

or put in computer code colored green and align right 

</CODE>
</ALIGN>
<CENTER>

<H3>or italicize it, using the headers and centering it</H3>

</CENTER>
</BODY>
</HTML>

which would look like this:

WELCOME TO MY PAGE
This would be regular text
which you could make bold and align left

or put 
it in computer code colored green and align 
right

or italicize it, using the header and centering it

MARQUEE

This is a special effect that can be used to make a line or word of text roll across the screen. It is very simple to use:

<MARQUEE>see how it works!!</MARQUEE>

There are other tricks that can be used with MARQUEE. The first is the behavior command. By writing:

you will get this effect:

This makes it scroll back and forth

Another BEHAVIOR is slide. This will cause the words to scroll across and stop at the oppisite side:

which would look like:

it will slide like this!

What direction a MARQUEE scrolls can also be determined:

this is left to right

this is right to left

which is written like:

<MARQUEE DIRECTION=right or left>pick a irection</MARQUEE>

You can also put a bgcolor command on the marquee, effectively turning it into a banner:

<MARQUEE BGCOLOR=red>this looks rather cool</MARQUEE>

which looks like:

this looks rather cool

Last but not least you can also determine how much of the page you wish to scroll across. This is done using WIDTH as a %:

<MARQUEE WIDTH=50%>this is a short scroll</MARQUEE>

would look like:

this is a short scroll

these diffrrent attributes may be used alone or in combinations and the Marquee centered:

on with the show

SHADOW

This tag will add a shadow effect to your text. To do this just add <SHADOW> before and after your text, like so:

<SHADOW>this is the shadow effect</SHADOW>

which looks like:

this is the shadow effect

LISTS

LISTS allow you to place your text (etc.) in a numbered, unnumbered, or defined order. It can be used for a list of links, steps in a process, or anything to a grocery list. The list of subjects at the top of this page is an example. There are three types and all allow you to place links,font sizes, colors, etc. within them.

ORDERED LISTS

This type of list allows you to put things in a numbered order, as in 1, 2, 3, and so on. The tags we will use here are <OL> and <LI>. <OL> tells the browser that this is the beginning of an ordered list. <LI>, which will be used for both ordered and unordered, indicates the start of each item in a list. End tags </> also have to be used. An ordered list would be written like this:

<OL>
<LI>unordered list
<LI>ordered list
<LI>defined list
</LI>
</OL>

and look like this:

unordered list
ordered list
defined list

UNORDERED LISTS

This type of list is not numerically designated. A character denotes the beginning of each item in an unordered list. <LI> is used again but substitute <UL> for <OL> in the example above and your list would look like this:

unordered list
ordered list
defined list

DEFINED LISTS

A definition list is used when your are defining a word or phrase. The definition list <DL> consists of a word or phrase (signified by <DT>) and its definition (signified by <DD>. It is written like so:

<DL>
<DT>unordered list
<DD>a list that is not numeric
<DT>ordered list
<DD>a list that is numeric
<DT>defined list
<DD>a list of definitions
</DD>
</DT>
</DL>

which would look like this:

unordered list: a list that is not numeric
ordered list: a list that is numeric
defined list: a list of definitions

CONTINUE

TO INDEX

BACK TO HOMEPAGE