Basic HTML

Basic HTML

Every Page Starts Like This

<HTML>
<HEAD>
<TITLE>SMAD 341 Syllabus</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

The <TITLE> tag does this in your browser:

The Remaining Tags Go Between the
Body Tags
<BODY> </BODY>

One-Sided Tags

The "break" tag breaks the words 
down to the next line.

The tag at the end of this sentence breaks the words and starts a new paragraph

Notice the next paragraph starts after leaving a blank line.

This is more commonly done as a "Two-Sided Tag" as such:

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

You can also change the height (SIZE) and width of the horizontal rules:

<HR SIZE="6" WIDTH="175"> (example below)

Two-Sided Tags

Placing these tags around words makes the words bold

Placing these tags around words makes the words bold

Placing these tags around words make the words italicized

Placing these tags around words make the words italicized

This makes the font bigger by 2 sizes

This makes the font bigger by 2 sizes

You can also make the font smaller

You can also make the font smaller

You can also change the font face

You can also change the font face.

You can change the font color, using a color name, such as the name "green."

You can change the font color using a color name, such as the name "green."

You can also use hexidecimal values. In which case, you enter a value as such:
Here is a change in color using a hexidecimal value

Here is a change in color using a hexidecimal color.

For a good reference on named color values, click here.
For a good reference on hexidecimal color values and what color they produce, click here.

You can apply more than one font attribute to the same text.

You can apply more than one font attribute to the same text.

<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

<ADDRESS>Dr. Steve Anderson, James Madison University</ADDRESS> Use this at the bottom of your page to "sign your work."

Dr. Steve Anderson, James Madison University

(Notice that "address" is automatically italicized)

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

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

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

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

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

Multiple Tags must be "nested." This means that you close the tags in the reverse order that you opened them. i.e.
Correct: Bold and Italic
Incorrect: Bold and Italic

Other Useful Tags

Mailto: Tag

For more information contact
<A HREF="MAILTO:anderssd@jmu.edu">Dr. Steve Anderson</A> at James Madison University.

For more information contact Dr. Steve Anderson at James Madison University..

Hyperlinks to Other Sites

<A HREF="http://www.slashdot.com">Slashdot</a> is my favorite site.

Slashdot is my favorite site.

"Relative" Path Hyperlinks

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

I have a <A HREF="dog.html">dog</A> named Ralph.

(The dog.html part would be replaced by the actual file name)

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

"Absolute" Path Hyperlinks

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

The protocol
The full address of the web server
The directory the file is in

It might look like this:

The large red <A HREF="http://www.jmu.edu/smad/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.jmu.edu
and the file is located in a directory called smad.

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

Inline Images

This presumes that the image (in this case a "jpg" 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:

Making an Image into a Hyperlink

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

To remove the blue border from around the image, add border="0" to the tag as such:

Body Attributes
(Changing Colors on an Entire Page)

These get added to the existing <BODY> tag:

<BODY BGCOLOR =?>
Sets the background color, using name or hexidecimal value

<BODY TEXT=?>
Sets the text color, using name or hexidecimal value

<BODY TEXT="#669900">
This makes all the text on the page this color.

<BODY LINK=?>
Sets the color of links, using name or hexidecimal value

<BODY LINK="#339999">
This makes all the hyperlinks on the page a different color.

<BODY VLINK=?>
Sets the color of visited links, using name or hexidecimal value

<BODY VLINK="#CC3333">
Sets the color of visited links, using name or hexidecimal value

<BODY ALINK=?>
Sets the color of active links, using name or hexidecimal value

<BODY ALINK="#33CC33">
Sets the color of active links, (while the mouse is down on the hyperlink) using name or hexidecimal value

Setting More Than One BODY Attribute for the
Whole Page

<BODY BGCOLOR="#FFDDDD" TEXT="#669900 LINK="#339999" VLINK="#CC3333" ALINK="#33CC33">
Sets the color of all the attributes (body color, text, links, visited links and active links).

Background Images

Background images were extensively used in the "early days" of the web. Today, they are considered tacky in most applications. Avoid them. If you find a compelling need, here is an example of a tag to do this.

The actual image backgr.gif is very small , but it is repeated continuously (called "tiling") to fill the entire background of the page.

Notice the background image repeating in the background of this page. Make your own judgements about the aesthetics.

For more information about this web site, contact Dr. Steve Anderson at anderssd@jmu.edu.