Basic HTML

The Most Basic Tags

Tags which go both at the beginning and end

<TITLE>This appears in the box at the top of the document</TITLE>

<TITLE>Basic HTML</TITLE>

<H1>This is a level 1 heading</H1>

This is a level 1 heading

<H2>This is a level 2 heading</H2>

This is a level 2 heading

<H6>This is a level 6 heading</H6>

This is a level 6 heading

<B>Placing these tags around words makes the words bold</B>

Placing these tags around words makes the words bold

<I>Placing these tags around words make the words italicized</I>

Placing these tags around words make the words italicized

<FONT SIZE="+2">You can make the font bigger</FONT>

You can make the font bigger

<FONT SIZE="-1">You can also make the font smaller</FONT>

You can also make the font smaller

<ADDRESS>Use this at the bottom of your page to "sign your work."</ADDRESS>

Steve Anderson, Utah State University

(Notice that "address" is italicized)

<BLOCKQUOTE>This tag allows you to indent material, such as when you might want to "quote" someone.</BLOCKQUOTE>

...here's the end of one sentence.

This tag allows you to indent material, such as when you might want to "quote" someone.

<B><I>You can even use a combination of more than one type of tag. This is both bold and italic</I></B>

You can even use a combination of more than one type of tag. This is both bold and italic

Tags which go only at the end or alone

The tag at the end breaks the sentence<BR>
down to the next line.

The tag at the end here breaks the sentence and starts a new paragraph<P>

Notice that this next line starts after leaving a blank line.

The <HR> tag creates the horizontal rules seen throughout this document to partition material
Here are two of them:
<HR>
<HR>

Making a word "clickable"

To make a word clickable (this is called an "anchor") you must place information before and after the word you want to be "clickable" hypertext.

The first tag always looks like this:

<A HREF="??????.html">

(The question marks would be replaced by the actual file name)

The last tag always looks like this:

</A>

Here's an example of where the word "dog" is a hypertext link:

The large red <A HREF="dog.html">dog</A> jumped over the fence.

The large red dog jumped over the fence.

Notice that clicking on the word "dog" will take you to a different html file called "dog.html"

The above example presumes that the file "dog.html" is located on the same server and in the same directory as this html file. If the file were on another server you would have to specify:

The protocol

The full address of the server

The directory the file is in.

It might look like this:

The large red <A HREF="http://www.usu.edu/~communic/dog.html">dog</A> jumped over the fence.

The large red dog jumped over the fence.

This indicates that the protocol is hypertext transfer protocol (http),
the file "dog.html" is located on a web server with the address: www.usu.edu
and the file is located in a directory called ~communic.

You will need this type of syntax anytime you want to create a link to something off your own site.

Showing an "Inline" Image

To show an inline image you must use the following:

<IMG SRC="??????.gif">

This presumes that the image (in this case a "gif" format image) is located in the same directory as the current html file. Most often the images are located in a sub-directory of the html directory (the html files are in the "root" directory). This sub-directory might be called "images".
If this is the case, you must change the tag to the following:

<IMG SRC="images/??????.gif">

Making an Image "Clickable"

To make an inline image clickable, you must place the <IMG SRC="images/??????.gif"> information in between the two anchor tags as in the following:

Here's an example of how to make an image clickable. In this case, an inline image of an Irish Setter (setter.gif) is clickable and will take you to an html file called "dog.html":

Below is what it looks like. All you see is the outlined image. Clicking on it takes you to the file "dog.html":

You've seen that you can either make words or images clickable. And, the examples thus far have shown how to make them link to other html files. However, you can also have them link to or other images, as well as other html files. Simply change the syntax as needed. Here's an example of using the clickable inline image of the setter (setter.gif) go to another larger image (bigsettr.gif).

Below is what it looks like. Notice that it looks the same as above. Except this time when you click on it, you will go to another image (bigsettr.gif) instead of the file "dog.html":

Creating a "MAILTO:" Link

Sometimes you want people to be able to click on a word and then be able to send email directly to you from the web page. This is supported by many browsers Suppose you want to have somebody be able to click on your name and send you email. Here's an example:

For more information contact <A HREF="MAILTO:sanderso@cc.usu.edu">Dr. Steve Anderson</A> at Utah State University.

For more information contact Dr. Steve Anderson at Utah State University.

Often this information will be included as part of an address as in the following:

<ADDRESS>For more information on this web site contact
<A HREF="MAILTO:sanderso@cc.usu.edu">Dr. Steve Anderson</A> at Utah State University.<ADDRESS>

For more information on this web site contact Dr. Steve Anderson at Utah State University

UP to the "Multimedia on the Internet" Class Home Page

For more information about this Web Site contact sanderso@cc.usu.edu
(Dr. Steve Anderson at Utah State University).