HTML

HTML How To

Hello. My name is Byron.
I am going to teach you some basic web page designing skills.
This is a tutoring page for HTML beginners.
Let's begin.

A Tag (also known as a "raw code," or an "element") is basically a command used to tell web browsers what they are supposed to show the person who is looking at your web page. Tags almost always come in pairs; one for opening the command, the other for closing the command. Although tags are NOT case sensitive, It is nice to place tags in CAPITAL letters in order to distinguish them from the actual text of the page. To set a tag, simply type the command onto your text editor window.

All tags are placed inside of angular brackets that look like this: < > . On this page, escape characters were used in order to display the appearance of the tags. You, however, must not leave space between the character "<" and its tag. You should not have any space between the tag and the ">" character either.

Lost already? Try clicking on the following highlighted text: Athens/2090, and git yerself a free GEocities webspace account.

Here are the basic tags you will use in creating your web page, what they mean, and how to set them:

< HTML >< /HTML >

This means that this document is written in HTML, or Hyper Text Markup Language (basically, a system of tags and text), the language that web pages are written in.

--Set the < HTML > tag at the beginning of your document to open the command. Set the < /HTML > tag at the end of your document to close the command.

< HEAD >< /HEAD >

The heading tag is used for various purposes. Primary purposes for the < HEAD > tag have to do with search engine classifications. A bit too complicated right now.

--This is the first tag that is set after the < HEAD > tag. No info actually has to be entered between this tag and its end tag < /HEAD >, but it needs to be present. Your command will look like this: < HEAD >< /HEAD >

< TITLE >< /TITLE >

The Title of your document. The text entered between the opening and closing tag will show up at the top of your page.

--This tag can be entered directly after the < /HEAD > tag. You do not have to put anything between < TITLE > tags, but you need to a have a < TITLE > tag present.

< BODY >< /BODY >

The body of the document is what people see when they browse your web page. All Text, pictures, links, and cool stuff will be between the < BODY > tags.
Many attributes can be given to the body of the document by entering more advanced commands into the opening < BODY > tag. By default (what happens when no specific information is entered), your web page background will be white, the text will be black with a fixed font of about Times New Roman 12, The links will be blue, and the visited links will be purple.

--The < BODY > tag is set after the < /TITLE > tag. The < /BODY > tag is not entered until the very end of the document, right before the < /HTML > tag.

These are called Paragraph tags. In order to place information between the < BODY > tags, you must use tags.
All text, image information, or link information is to be placed between tags.

--Set a tag after the < BODY > tag, or after a separate pair of tags. Type information after the tag. When you are finished, type the tag. Note that you do NOT have to place the text of a paragraph between the paragraph tags.

The break tag is used to create a hard break while between tags. It may be used many times, and is one of the few HTML tags that does not require a closing tag.

--To set a tag, simply place the cursor in the appropriate place and type

< A HREF >< /A >
This is the anchor tag. It is used to create links (or hyper links) to other files or web sites. It has other purposes, but we will stick to these basic functions for now.

--To set an < A > tag, you will need extra information. What you need is the URL, or the filename, of the document that you are linking to. If you wanted to link to the web site http://www.oocities.org/SunsetStrip/Arena/3792 for example, you would need to enter the URL between the < A > tags like this:

Click here to link to< A HREF= "http://www.oocities.org/SunsetStrip/ Arena/3792" >Byron's Homepage< /A >.

This is what you will see when you preview your page:

Click here to link toByron's Homepage.

Having done this, you will now have created your first active link on your page. If you preview your page now, you will notice that the words Byron's Homepage are underlined and blue. If you click on this link with your mouse, your browser will begin to process my homepage for your viewing and surfing pleasure. Note that your opening < A > tag does not end until all of the URL information is entered into it. The URL information is what tells the web browser where to go when you click on the blue underlined link. Between the < A > tags, you write the text that will appear blue and underlined (Byron's Homepage). Then you close the command with < /A >

< IMG SRC > < /IMG >
This is the image tag. It is used to insert pictures and other images into your web page. In order for this tag to work, you need to have an image on a file which has been uploaded or saved to your directory (the directory that your "index.html" file is in). If the file is not in your directory, your page has nothing to refer to.

IMG means image.
For now, SRC refers generally to properties, meaning that there are properties to be considered with this file. This definition is intentionally somewhat vague, even inaccurate, for the sake of brevity.

--Say you had an image file in your directory named "horse.gif" - This is how you would put that image into your web page:

< IMG SRC= "horse.gif" ALT= "[picture of a horse]" WIDTH= "146" HEIGHT= "73" >< /IMG >

This would be the format and placing of your image:

[picture of a horse]

ALT is the alternative text for the web surfers who disable their images in order to have quicker loading time. They see it in place of the picture. It is not necessary, but it is good manners.
WIDTH and HEIGHT are entered so that browsers do not have to guess at image properties and be forced to stretch and shrink images in order to enable (distorted) viewing . Width and height dimensions are not necessary either, but they give you more control over how your page is viewed by others.

If you would like to make an image into a link, follow the instructions for the < A > tag, but place the < IMG > tags between the < A HREF > tag and the < /A > tag. (In this instance, the image information replaces the words, "Byron's Homepage".):

Typing this:
 < A HREF= "http://www.oocities.org/SunsetStrip/Arena/3792/" > < IMG SRC= "horse.gif" ALT= "[picture of a horse]" WIDTH= "146" HEIGHT= "73" > < /IMG >< /A >

will give you this:

Notice the blue border around the picture? (It will be purple if you have already visited my site). That means that if you click on this picture, you will be linked to the URL indicated in the anchor tag.
To change the border, place the word "BORDER=" into the < IMG SRC > properties, followed by a number value that will change the border's appearance. 6 means "pile it on thick," while 0 means "no border please"
Look at this example:

< A HREF= "http://www.oocities.org/SunsetStrip/Arena/3792/" > < IMG SRC= "horse.gif" BORDER=0 ALT= "[picture of a horse]" WIDTH= "146" HEIGHT= "73" > < /IMG >< /A >

This example would give you this image link:

To Center a paragraph or an image,
replace with .

[picture of a horse]

To align a paragraph or image to the right side of the window,
replace with .

[picture of a horse]
(The closing tag in either case remains ).

To change the font of the text in a paragraph, try this:
Place the command at the beginning of some text that you would like emphasized.

Vary the numbers (+4, +2, etc.) accordingly.
Close the tag with after the selected text has been transformed.

RGB (Red, Green, Blue) color values can also be placed within tags by entering the formula, for example:
 or another RGB value.
To change the font size and color, simply put them together like this:
 (or other sizes and color values).

If you type this:
Welcome to my site You will have a centered message in which the text is black, the word "Welcome" is twice as big as the rest, and the word "site" is 3 times as big and is the color purple (...O.K., "Lilac", jeez!):

Welcome to my site

Now we are getting into some more advanced stuff, but believe it or not, you are already an advanced web page designer! You can get great advanced HTML tutoring from sites on the web such as w3.org , or just go to metacrawler.com , and type in "html" , and click "search."

If you are working from home, you will need some html color software to get started. This can be downloaded free from Tucows.com.
Go to this URL, type html color pickers in the search box and click on search. Look for a "freeware" licensed download called "Font and Body Tag Wizard". Download it. Use this software to select your desired colors and fonts. You are given color codes in RGB value. Simply copy the part that you want to your clipboard using the mouse button on the right (the menu button), go back to your image editor and paste the code in.

Advanced < BODY > tagging:
The attributes which can be entered into the < BODY > command include:

-BGCOLOR=
This is your back ground color when you are not using a background image. (Free backgrounds can be downloaded from Dogpile.com.

-BACKGROUND=
This would be the background image attribute. Enter the file name of the image.

-TEXT=
This is the color command which controls the default for the text of the entire document. If you do not enter specific color fonts, what you enter here will be the general color of your text

-LINK=
This is the default color of your Links and borders around image links.

-VLINK=
This is the default color of a visited link or border.

-ALINK=
This is the link color that you see at the time a link is activated.

An example of an advanced < BODY > tag is:
< BODY BGCOLOR="#D9996F" TEXT="#FFFBE3" LINK="#0000FF" VLINK="#800080" ALINK="#FF0000" >

The overall appearance and presentation of your page are controlled from the opening < BODY > tag. Should you desire a specific font to be the default of your entire page, you must enter a tag with your specific information directly after the < BODY > tag. You need to close this with a placed directly before the < /BODY > tag.

The following is required reading
for those interested in effective web design:

The Top 10 Mistakes In Web Design

The Ten Commandments of Good WWW design

Some Quick Tips:

--Get your free software. It really does help. Nobody has the time to calculate RGB values to specification, so get yourself a color calculator.

--Download an Image Converter from Tucows. I recommend trying out the shareware one simply entitled "Image Converter." You can make and borrow images, then change them into formats which are better for viewing over the internet.

--Check out more HTML tutoring options.

--You can work on a web page from anywhere if you are a member of a free web space provider such as Geocities Later, you can simply download your file and upload it into a more efficient private provider.

--When designing your page, cut and paste a lot. This saves time.

--Save often if you are designing your page over the web.

--NEVER OVERLAP TAGS! This is the most common error in web page design. You will encounter many problems that can be fixed by positioning your tags correctly.

--If you want many people to visit your page, you should register your page with many search engines.

--You can register to earn commission if enough people visit your site.

How many people have come to this page?
!
Not that bad so far.

[green eggs and ham] Return to the Main Page