HTML TUTORIAL

Essential HTML Tutorial

Welcome to our HTML tutorial.

We have put in place for you some common and very useful HTML tutorial and codes. We are sure these will be very useful for you. Refer our website tutorial whenever you want to look for some interesting HTML codes.

Let's start with the page title.....

Title

The first thing to put on your web page, is a title. The title is what will show up in the very top of the window. Let's say that your title is going to be "My Web Page", you would type:

<title>My Web Site Page</title>

In HTML, every command is surrounded by <'s, and >'s. And in most commands, you need to tell the web browser when to end this command. You do this by putting a back slash (/) in front of the ending command, as in above.

The HTML isn't case sensitive, <title> is the same as <TITLE>, which is the same as <TiTLe>. Next, you need to decide what you want to put on your page. Text, links, graphics, and text fields, are just a few ideas.

Text

Headings

HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. Headings are displayed in larger, or smaller fonts, and usually bolder. If you wanted to type "Hello", this is what you would type for each heading, and what the outcome is:

<h1>Hello Wrold</h1>

Hello World

<h2>Hello World</h2>

Hello World

<h3>Hello World</h3>

Hello World

<h4>Hello World</h4>

Hello World

<h5>Hello World</h5>

Hello World

<h6>Hello World</h6>

Hello World

Paragraphs

Whenever you have more than a sentence of writing, you should have paragraphs. Personally, I don't see what the difference is, but I do it anyway, because then I can find a certain spot better when programing.

<P>This is a web page. How do you like what I've done? Please e-mail me with any suggestions at contact@how2makeawebsite.com</P>

The outcome is:

This is a web page I have created. How do you like what I've done? Please e-mail me with any suggestions at contact@how2makeawebsite.com

Lists

There are two types of lists that you can make in HTML, dotted, and numbered. To make a dotted list of: red, orange, green, blue, purple, black, and brown, type:

<UL>
<LI> red
<LI> orange
<LI> green
<LI> blue
<LI> purple
<LI> black
<LI> brown
</UL>

The result is:

red
orange
green
blue
purple
black
brown

To make a numbered list of: red, orange, green, blue, purple, black, and brown, type:

<OL>
<LI> red
<LI> orange
<LI> green
<LI> blue
<LI> purple
<LI> black
<LI> brown
</OL>

The result looks like:

red
orange
green
blue
purple
black
brown

Forced Line Breaks

There are many cases in which you want to end typing on one line, and start on the next. To do this, you can use a simple HTML command. This is one of the few commands that you don't have to put an ending command on. Let's say that you wanted to say "Hello, how are you?", but with each word on a separate line. All you have to type is:

Hello,<BR>how<BR>are<BR>you?

The outcome is:

Hello,
how
are
you?

Horizontal Rules

Every now and then, you might want to have a horizontal rule, or line in your page. Horizontal rules can be many different sizes and lengths. You can also have the line be solid black, by typing NOSHADE. Here are several examples of sizes and widths, and what the outcome is:

<HR SIZE=1 WIDTH=100%>

<HR SIZE=5 WIDTH=50%>

<HR SIZE=25 WIDTH=75%>

<HR SIZE=3 WIDTH=100%>

<HR NOSHADE SIZE=1 WIDTH=100%>

<HR NOSHADE SIZE=3 WIDTH=100%>

<HR NOSHADE SIZE=10 WIDTH=20%>

Character Formatting

You may want to format some of your text differently than others using text styles. There are several types of styles of text that you can use: bold, italic, underline, ~~strikeout~~, ^superscript, _subscript, teletype, and blinking text are examples. To do these styles, surround your text with the following commands:

<b>, </b> for bold

<i>, </i> for italic

<u>, </u> for underlined

<strike>, <strike> for ~~strikeout~~

<sup>, </sup> for ^superscript

<sub>, </sub> for _subscript

<tt>, </tt> for teletype

<blink>, </blink> for blinking text (very annoying)

~~You can also mix styles together like this~~!

Linking

URLs

When you make a link, you are making colored text or even a graphic (talked about later). When somebody clicks on this text, it will take them to another web page, or possibly a certain section of a web page. Let's say that you wanted to make a link from your web page, to Google!. The URL of Google! is:
http://www.google.com
To do this, you would type:

<A HREF="http://www.google.com">What ever text that you want to be colored goes here</A>

The result would be:

What ever text that you want to be colored goes here

You can go ahead and try it if you want to.

Links to Specific Sections

Sometimes, you might want to have a link that will take you further down a page, or to a certain section of another page. An example of this is the index to this web page. You click on the colored text, and it takes you to that section. To do this, you need to do two things. The first, is to make the link, and the second, is to make where the link will lead to.

NOTE: You cannot make links to specific sections within a different document unless either you have write permission to the coded source of that document or that document already contains in-document named links.

1) To make the actual link, think of a name for the certain spot. Let's say you are going to call it "spot". If this certain spot is on the same page that the link is, you would type:

<A HREF="#spot">Colored Text

Otherwise, you would add "#spot" to the end of the URL.
2) Now, you need to make where the link will take you. Go to the spot where you want the link to take you, and type:

<A NAME = "spot">

Mail to Links

Most people like to have a link on their web page that automatically sends e-mail to an address. If you want to do this, and your name is Contact, and your e-mail address is contact@how2makeawebsite.com, type:

<A HREF="mailto:contact@how2makeawebsite.com">Contact</a>

Here is the result of typing this:

Contact

Alternate Text for Images

Some World Wide Web browsers cannot display images. Some users turn off image loading even if their software can display images (especially if they are using a modem or have a slow connection). HTML provides a command to tell readers what they are missing on your pages. The " ALT " attribute lets you specify text to be displayed instead of an image. For example:

<IMG SRC="pic.gif" ALT ="How to make a website">

In this example, "pic.gif" is the picture of a sign. With graphics-capable viewers that have image-loading turned on, you see the graphic. With a non-graphic browser or if image-loading is turned off, the words "How to make a website" is shown in your window. You should try to include alternate text for each image you use in your document, as it is a courtesy for your readers.

Background, text, and link Color

On most pages, you want to have a specific color for the background, text, unvisited links, visited links, and active links. In order to do this, you need to find the code number for the specific color that you are looking for. Here is a HUGE list of code numbers, and here is how you would display this in your page. NOTE: Type this ONLY right below your title. NOTE: You must have the "#" sign before the actual code.

<body bgcolor="#code">for background color
<body text="#code">for color of text (all non-links)
<body link="#code">for color of unvisited links
<body vlink="#code">for color of visited links
<body alink="#code">for color of active links (while being selected)

You can also string two or more of these commands together:

<body bgcolor="#000015" text="#000020" link="#000050" vlink="#7a7777" alink="#8f8e8d">

Background Graphics

Instead of having a solid color as a background, you might want to have one graphic that repeats over and over to create a background. The text that you would type in for a background called "bk.gif" would be:

<body background="bk.gif">

NOTE: The below code result will not be visible in this .pdf

Larger Fields

I would recommend that you have one larger field at the end of your guestbook for comments. You first need to decide how many columns and rows that you want to have. Let's say that you want to have 7 rows, and 45 columns. Here is what you would type:

Please place any questions or comments here:
<TEXTAREA Rows=7 Cols=45 NAME="suggestions"></TEXTAREA><P>

Here is what the result looks like:

Please place any questions or comments here:

Checkboxes

Let's say that you wanted to ask a question like "What are some things that you like to do?" You could have a list of things with checkboxes. If you wanted the list to be: Watch TV, play on the Internet, read a book, play sports, and study, you would type:

What are some things that you like to do?

<INPUT TYPE="checkbox" NAME="like" VALUE="TV">Watch TV<P>
<INPUT TYPE="checkbox" NAME="like" VALUE="internet">Play on the Internet<P>
<INPUT TYPE="checkbox" NAME="like" VALUE="read">Read a book<P>
<INPUT TYPE="checkbox" NAME="like" VALUE="sports">Play sports<P>
<INPUT TYPE="checkbox" NAME="like" VALUE="study">Study<P>

The result:

What are some things that you like to do?

Watch TV

Play on the Internet

Read a book

Play sports

Study

Radio Buttons

If you ever want to ask a question with one answer, you can use radio buttons. If you wanted to ask "What WWW browser are you using right now?", and you wanted to have the choices Netscape Navigator 4.x, Netscape Navigator 3.x, Netscape Communicator, Mosaic, and Microsoft Explorer, you would type:

What WWW browser are you using right now?

<INPUT TYPE="radio" NAME="browser" VALUE="Navigator 4.x">Netscape Navigator 4.x<P>
<INPUT TYPE="radio" NAME="browser" VALUE="Navigator 3.x">Netscape Navigator 3.x<P>
<INPUT TYPE="radio" NAME="browser" VALUE="Communicator">Netscape Communicator<P>
<INPUT TYPE="radio" NAME="browser" VALUE="Mosaic">Mosaic<P>
<INPUT TYPE="radio" NAME="browser" VALUE="Internetex">Internet Explorer<P>

The Result:

What WWW browser are you using right now?

Netscape Navigator 4.x

Netscape Navigator 3.x

Netscape Communicator

Mosaic

Internet Explorer

Pull-Down Lists

Another way to ask a question with only one answer is to use a pull-down menu. You can use the SELECTED command to have an option besides the first be selected, as you will see below. If you wanted to ask "What is your favorite color?", and you wanted the list to be of red, yellow, orange, green, blue, purple, black, and brown, with black selected, you would type:

What is your favorite color?
<SELECT NAME="color">
<OPTION>Red
<OPTION>Yellow
<OPTION> Orange
<OPTION>Green
<OPTION>Blue
<OPTION>Purple
<OPTION SELECTED>Black
<OPTION>Brown
</SELECT><P>

The outcome is:

What is your favorite color?

Scroll-Down Lists

Many a times, you might want to have a scroll-down selection list on your page. See how easy this can be. If you do have it with more that one items, the user has to hold down the command or shift key. You can also decide how many of the lines you want visible.

Below there are two lists of the same selection criteria. In the first one, you can only select one item, and it is showing three lines. In the second one, you can select one or more items by holding down command or shift .

The second list is showing four lines. The question is "What is your favorite video game system?" The answers are: Nintendo 64, Sony Playstation, Sega Dreamcast, or arcade video games. The text that you type for each list is above the actual list.

What is your favorite video game system?
<SELECT NAME="video game" SIZE=3>
<OPTION VALUE="nintendo64">Nintendo 64
<OPTION VALUE="playstation">Sony Playstation
<OPTION VALUE="dreamcast">Sega Dreamcast
<OPTION VALUE="arcade"> Arcade Games
</SELECT><P>

The outcome is:

What is your favorite video game system?

What is your favorite video game system? (Hold shift to select more that one)
<SELECT NAME="video game" MULTIPLE SIZE=4>
<OPTION VALUE="nintendo64">Nintendo 64
<OPTION VALUE="playstation">Sony Playstation
<OPTION VALUE="dreamcast">Sega Dreamcast
<OPTION VALUE="arcade"> Arcade Games
</SELECT><P>

The second outcome is:

What is your favorite video game system? (Hold shift to select more that one)

Reset Form

On most page that have fill-out forms, there is a reset button at the bottom of the form, next to the "submit" or "send" button. To have a reset button, just type:

To reset the all of the forms, press this button:<INPUT TYPE="reset" VALUE="Reset">

The outcome is: (try it!)

To reset the all of the forms, press this button:

Submit Entry

When you are all finished with everything, you need to make a button so that people can submit their entry. To do this, type:

To submit your choices, press this button:<INPUT TYPE="submit" VALUE="Submit">

The result is: (NOTE: Please don't click this button. It has been disabled and will not work.)

To submit your choices, press this button:

NOTE: At the very end of your form, you must type </FORM> or your forms won't work!!