HTML Tutor

HTML TUTOR

To use this tutor just click on the button for the information that you want to preview. This is NOT an all inclusive instruction for HTML or Cascading Style Sheets. This will give you the basic tags and attributes for the most common HTML tags used in producing web pages.

The links below will take you to examples of what we are discussing. Please use them for they will help you understand the principles of HTML coding. Links correspond to Buttons.

HTML | Comments | Head | Title | META Tags | HTML Sections | Body | Color | Hot Links |Links | Heading | Basefont
Font Sizes | Font Family | Bookmarks or Favorites | Images | EMBED | Tables | HR | Paragraph | Other Tags

Coding With Upper/Lower Case Letters and Using Quote Marks

<P ALIGN="JUSTIFY|LEFT|RIGHT">  Using All Upper Case Letters
<p align="justify|left|right">  Using all lower case letters
<font face="times new roman, verdana, arial, helvetica" color="#xxxxxx"> Using quotes

This is how a very simple start to a HTML page should look.

<HTML>
<HEAD>
<TITLE>Horses and Donkeys</TITLE>
</HEAD>
<BODY>
Contents of entire pages or document will be between these two tags.
Almost everything here, except some javascripts, comments, etc.,
will be viewable by your visitors.
</BODY>
</HTML>

How to do Comments on your site.

Visitors will not see comments that you place on your site. Comments can be used anywhere on your site to help you remember what you put what and why. You will find that if you get in the habit of using comments you will be able to update your site faster and easier and find those sections that need to be updated quickly, for time is money in web development. The longer it takes you to find errors or to find that section that needs updating, the less money you will make.

Here are some of the main Meta Tags Used in HTML Pages.

<META name="description" content="Describe what your site is or does using as many of the key words as possible. Limit to 150 word or less.">
<META name="keywords" content="Words, separated by a comma, all lower case, used by search engines to index your site. Limit to 80 words or less.">
<META name="generator" content="What HTML Editor did you use.">
<META name="robots" content="index, follow">
<META name="rating" content="general">
<META name="author" content="Your name or the persons name that is producing the pages">
<META name="copyright" content="What the site contains">
<META http-equiv="expires" content="0">
<META http-equiv="Pragma" content="no-cache">

To Change Font Colors In A Document

<font color="#000000"> Will rended as Green Font
Coding: <font color="#000000"> Will rended as <font color="#00B000">Green Font</font>
<font color="#000000"> Will rended as Red Font
Coding: <font color="#000000"> Will rended as <font color="#00B000">Red Font</font>

Hot Links - How they are coded.

<a href="#word">Word</a>
<a name="#word"></a>
Hot Links are what you having been
using to go to the different examples on this page.

Links To Other Pages On Your Site Or To Other Sites

<a href="something.html>Something Page</a> <a href="http://www.someothersite.html>Some Other Site</a>
New Page Or New Site <a href="new.html" target="_blank">New Page or New Site</a>

Heading Codes

<H1> </H1> Heading Font H1
<H2> </H2> Heading Font H1
<H3> </H3> Heading Font H1
<H4> </H4> Heading Font H1
<H5> </H5> Heading Font H1
<H6> </H6> Heading Font H1

basefont

<basefont size="3" face="name of font">

Once you place a basefont tag and attributes on your document that will be the size, color and font family of all the font that you use, unless otherwise tagged.

Font Size Attribute Code

<font size="1"> </font> Font Size 1
<font size="2"> </font> Font Size 2
<font size="3"> </font> Font Size 3
<font size="4"> </font> Font Size 4
<font size="5"> </font> Font Size 5
<font size="6"> </font> Font Size 6
<font size="7"> </font> Font Size 7

Font Face (Family) Attribute Code

<font size="3" face=times new roman>times new roman </font> Times New Roman
<font size="3" face=verdana>verdana </font> Verdana
<font size="3" face=arial>arial </font> Arial

Bookmarking Or Adding to Favorites

Bookmark This Page

<!-- TWO STEPS TO INSTALL ADD FAVORITE:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function addbookmark()
{
bookmarkurl="http://change to your URL address/"
bookmarktitle="Name of Your Page Goes Here"
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}
//  End -->
</script>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<div align="center">
<a href="javascript:addbookmark()">Bookmark This Page</a>
</div>

Images

<img src="name of image.file extension" width="xxx" height="xxx" hspace="0" vspace="0" border="0" align="right\|left\|middle" alt="description or statement concerning image">
This snake is aligned to the left enclosed in a paragraph tag with the paragraph alignment justified. These is a horizontal spacing of 4 and a vertical spacing of 6 and no border around the picture.	This snake has a border and the paragraph tag has an alignment attribute of center. This will make the text flow around the image. The image has a horizontal spacing of 2, a vertical spacing of 2, a border of 5 and is aligned in the middle. This is useful when you are placing several images on your page so that they don't look all in a row.	The image has a horizontal spacing of 3 and a vertical spacing of 3, a border of 1 and aligned on the text is justified. The snake is the image that is being used to show the alignment of images to text.

This is a very small graphic of the Unite States colored as an US Flag with the text aligned to the left of the graphic. Now you can also make this a link to another graphic or page. You should always place a border around an graphic that you are using for a link. This way your visitor will know that the graphic is a link to another site or larger image of that graphic. By using the v or h spacing tags you can pull the text away from the image so that they are not all crowded together. Now click on the US shape and see what happens. Ok, now you know how to places images on your site and to make them links.

Here is the coding for opening a new page from a graphic link:
<a href="graphicname.html" target="_blank"><img src="graphics/usstateflag.gif" width="98" height="66" hspace="4" vspace="4" border="1" align="left" alt="A very small shape of the US as a flag."></a>

If you do not what the page to open in a new browser, leave the target="_blank" attribute off.

So your coding for this would look like this:

<a href="graphicname.html"><img src="graphics/usstateflag.gif" width="98" height="66" hspace="4" vspace="4" border="1" align="left" alt="A very small shape of the US as a flag."></a>

and then click on the return to Tutor Link. You will be returned to the top of this page.

EMBED music

<embed src="songtitle.extension" loop="1" autostart="false | true"
 hidden="false | true" height="xxxpx" width="xxxpx">>
This is how it will show

You must click the start button,
the arrow shaped icon to start the music.
This gives your visitor control.

TABLES

<table align="center" border="2" bordercolor="#xxxxxx" cellspacing="0" cellpadding="0" width="50%>
<tr>
<td>Place Something in here</td>
<td>Place Something in here</td>
<td>Place Something in here</td>
</tr>
<td>Place Something in here</td>
<td>Place Something in here</td>
<td>Place Something in here</td>
</table>

The Table will render like this.

Place something in here	Place something in here	Place something in here
Place something in here	Place something in here	Place something in here

This is a table, centered, with two rows, six cells, with cellpadding of 10 pixels and a cellspacing of 10 pixels. Also each table distribution cell has a different back ground color and a different alignment, with a width percentage of 85. That means that the table will cover 85 percent of your screen width, no matter what size monitor you are using.

Horizontal Rules or Lines

<hr size="XXpx" align="center | left |right" width="percentage or pixels" color="#xxxxxx" width="50%>

Examples of Horizontal Rules or Lines



<hr align="center" color="#FF0000" noshade size="2px" width="25%">



<hr align="right" color="#FFFFFF" noshade size="4px" width="50%">



<hr align="left" color="#0000FF" noshade size="6px" width="75%">

Paragraphs

<p align="left | center | right | justify">

Left

This is how text would look if it was aligned with the left attribute.

Center

This is how text would look if it was aligned with the center attribute.

Right

This is how text would look if it was aligned with the right attribute.

Justify

This is how text would look if it was aligned with the justify attribute.

Other Tags

<b></b>	<i></i>	<u></u>
Bold Tag This is how text would look if it was BOLD with the left attribute.	Italics This is how text would look if it was in Italics with the center attribute.	Underline This is how text would look if it was Underlined with the right attribute.

To draw attention to a word you might want to italics it or underline a portion of the text. But to really draw attention you might want to make it a different color, bold and in italics. Use the underline sparingly, for that is a standard for making links and can confuse your visitor.

Proceed To Next Lesson

Introduction | Tables | Forms | Cascading Style Sheets | Other Useful Hints | Questions