HTML Basics

In this page we will review and demonstrate 

You should save this page, then open it in a text editor to play with some of the settings.
Note: Modern design guidelines dictate that all of the style attributes disccused here should be done
with CSS style sheets.  We will discuss CSS later in the course. 

Singleton Tags

Most HTML tags come in pairs--a beginning tag and ending tag.  Three useful tags 
do not: hrad rule, line break and comment tags.

Examples: <BR />, <HR /> and <!-- Your comments here. -->
For use of comment tags see the basic HTML page below.
<BR /> acts like a carriage return
<HR /> produces a horizontal line. Here are two examples.

This is a default horizontal rule of width 50%.

This is a horizontal rule of width 50% with size 5 and the NoShade option.

Box Model

Tags such as <HTML> ... </HTML> are "containers". More samples below.
You can think of them as defining a box on the web page into which you can put other things.
The easiets way to put something inside something else is to nest the tags inside eachother.

Here is the basic structure of an HTML page. Note the nesting of Tags.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML dir="LTR" lang="en-US">
<META name="description" content="This is a sample html file">
<META name="keywords" content="html, sample code, sample html">
<!-- Author: Your name here -->
<!-- Created: yy/mm/dd -->
<HEAD>
<TITLE>The title goes here</TITLE>
</HEAD>
<BODY> <!--This tag has a lot of attributes-->
The content of the page goes here
</BODY>
</HTML>

BODY Parts (attributes)

The following specify the color of various elements and the background
BGCOLOR - the BackGround color can specified with a hexadecimal value or a color name like RED
BACKGROUND - this tiles the page with an image
TEXT - the text color can be specified with a hexadecimal value or a color name like RED
LINK - the color of a link can be specified with a hexadecimal value or a color name like RED
ALINK - this sets the color of Active Links
VLINK - this sets the color of Visited Links

How do you like the background?
What happens when you delete the TEXT attribute?
Change the Background and text colors.

Headings

The Heading Tags are <H1> ... </H1> to <H6> ... </H6> where H3 is the normal size font and each lower H-value increases the size by 1 and each higher H-value decreases the size by 1. Attributes like ALIGN and STYLE can be used in Heading Tags. Other tags can be used between the opening and closing Heading Tags.

Example: the text below is produced with the code
<h1 align="right" style="color: red; font-style: italic">A stylized heading</h1>

A stylized heading

Space dividing tags

Paragraph tags <p> paragraph here </p>. Also, div tags <div> material here </div>
Attributes include ALIGN which takes values LEFT, CENTER, and RIGHT.

Anchor Tags <A> ...</A>

Link within the page

The source code is: <A HREF="#Target_Name">Target key words</A>
The target code is: <A NAME="Target_Name"></A>
Try Top and Container Tag

Link to another page

The source code has the form: <A HREF="Path_to_page.htm">Target key words</A>

Example 1: The following code shows how to link to another page in the same directory:
<A HREF="Cs217_html1b.htm"> Sample Link in same directory </a>

Example 2: Here is the source code for a link to the CS 217 Resource Page in another directory:
<A HREF="../../C217Resource.htm">CS 217 Resource Page</a>
Examine the code on the CS 217 Resource Page for other examples to various links.

Link to another site

The source code has the form: <A HREF="http://page_URL">Target key words</A>

For example the following code links to the Index of Courses on my home page:
<A HREF="http://comers.citadel.edu/courses.htm">Index of Courses</A>

Remember the color of links are controlled by the LINK, ALINK and VLINK attribute of the BODY tag.

Note that pop-up information is provided when the "title" attribute is included. See, for example, the "Index of Courses" link above.

Absolute vs Relative Path Names
What's the difference?