Lab 5

Lab 5

Basic HTML

[Turnin: A working web page]

Objectives

Learn what HTML is, and how it works.
Learn what a tag is.
Learn what a link is.
Learn where to create HTML files.
Create your own web page.

What is HTML

Hypertext Markup Language (HTML) is a scripting language used to create web pages. Browsers such as Netscape and Internet Explorer then parse the HTML and generate web pages readable by us. One of the best ways to learn how HTML works is to look at existing code. To view the HTML code for an existing web page, do the following:

Start Netscape.
Select the "View" menu option.
Select "Page Source".

You are now looking at the HTML code for the web page that is currently displayed in your browser.

When looking at HTML, you will notice that much of it looks like English text. The small portion of words enclosed in greater and less than signs "<" and ">" are the actual HTML instructions. These instructions, called tags, tell the web browser how to format the text and images you want to display.

Basic Parts of an HTML Document

Tags and content are the two basic parts that make up an HTML document. Tags are the instructions that tell the browser how to format the contents you want to display. Content is usually text and images, although there are special cases, such as PERL and Java scripts, which are not displayed.

Tags

At the highest level, there are two kinds of tags, opening and closing tags.

An opening tag is composed of a greater than sign, followed by a keyword, followed by optional parameters, followed by a less than sign. For instance, <H1> and <BODY link="#000000"> are both opening tags. These tell your browser to apply the keyword to the content following the opening tag. In the previous example, 'link="#000000"' is the optional parameter. As the name implies, optional parameters are not necessary. They just tell your web browser to apply the option to the content in the tag.

A closing tag looks almost identical to an opening tag, except that it has a "/" after the less than sign and before the keyword. For instance, </H1> is a closing tag. Almost every opening tag has a corresponding closing tag. These tell your browser to stop applying the formatting.

For example:

<H1> Hello! </H1>

This snip of HTML code tells your browser to display the word "Hello!" in a relatively large font. Notice that the closing tag's keyword matches the opening tag's keyword. If the opening and closing keywords do not match, you will get odd results when your page is displayed.

Important HTML Tags

The following tags are used to tell your web browser that this is an HTML file, the title of the page, and the general look of the web page.

HTML

The HTML tag tells your web browser that what follows is HTML code. In general, this tag will be on the first line of your HTML file. However, sometimes script code (javascript, for example) may preceed it.

HEAD

The HEAD tag is used to specify general things about the HTML document. Usually only the TITLE tag is in between the opening and closing HEAD tags.

TITLE

The TITLE tag is used to set the title of the web page. Text that is in between the opening and closings TITLE tags is displayed (by most browsers) in the window title bar.

BODY

The BODY tag is used to indicate the body of the document. The majority of your HTML code go inside the opening and closing body tags. In addition, the opening BODY tag takes optional parameters that set general properties such as background image, background color, and link colors.

Tag	Tag Name	Optional Parameters	Purpose/Usage
<HTML> </HTML>	Html	None	Used to denote the start of HTML code.
<HEAD> </HEAD>	Head	None	Sets general properties of the web page. Usually just contains the <TITLE> tag.
<TITLE> </TITLE>	Title	None	Sets the title of the web page.
<BODY> </BODY>	Body	background="image.jpg" bgcolor="#RRGGBB" link="#RRGGBB" vlink="#RRGGBB" alink="#RRGGBB" text="#RRGGBB"	Contains the majority of the HTML code. Is also used to set general properties for text, links, and background. Background is used to set the background of your web page to a specific image. This is accomplished by setting "image.jpg" to the name of your image. Bgcolor is used to set the entire background to one of 16 million colors. To understand how to set background and other colors, see the section SETTING COLORS below. Link is used to set the color of all links. Vlink is used to set the color of visited links. Alink is used to set the color of active links. Text is used to set the color of all text.

Text Formatting Tags

Text formatting tags are used to set font size, center text, bold text, and set other attributes. Common formatting tags are:

Tag	Tag Name	Optional Parameters	Purpose/Usage
<Hx> </Hx>	Heading	None	Sets the size of the text that is in between the opening and closing tags. The size is set by replacing the "x" in <Hx> or </Hx> with a number from 1 (very large) to 6 (very small).
<B> </B>	Bold	None	Bolds the text between the opening and closing tags.
<I> </I>	Italics	None	Italicizes the text between the opening and closing tags.
<U> </U>	Underline	None	Underlines the text between the opening and closing tags.
<CENTER> </CENTER>	Center	None	Centers the text between the opening and closing tags.
<FONT> </FONT>	Font	size=x color="#RRGGBB"	Sets the font color and font size of text that is between the opening and closing tags. Set size by replacing "x" in "size=x" with some integer value. To understand how color works, see the section SETTING COLORS below.
<PRE> </PRE>	Preformatted	None	Tells your web browser that everything in between the opening and closing tags is already formatted. This will display the text "as is".
<P> </P>	Paragraph	align="x"	Tells your web browser that everything in between the opening and closing tags should be formatted like a paragraph. This is also used to set the alignment of the paragraph. Replace "x" with either LEFT, CENTER, or RIGHT.

Example:

<CENTER><I> This Would Be Centered and Italicized </I></CENTER>

IMG Tag

The IMG tag is used to place a graphic image inside your web page. However, before showing you how to insert graphics into your web page, we must make you aware of copyright laws.

Copyright Awareness

Most images on the Internet are copyrighted. This means that you cannot legally use them on your web page without the permission of the owner/creator of that image. In general, it is a good idea to create your own images using a graphics package such as Paint Shop Pro or Photoshop. Georgia Tech is also somewhat picky about how you use their graphics, particularly Buzz. If you decide to use an image owned by Georgia Tech, be sure to get permission first, or they may ask you to take it off your web site.

Below is a table that describes how the IMG tag is used.

Tag

Tag Name

Optional Parameters

Purpose/Usage

<IMG>

Image

src="source.jpg"

height=x

width=x

border=x

alt="some text"

align="x"

usemap="#mapname"

Tells the web browser that you want to display this image in your HTML document. Replace "source.jpg" with the name of your image file.

Replacing the "x" in width or height with a numeric value will set image width and height, respectively.

Set a border around your image by setting the "x" in "border=x" to some numeric value.

Alt is used to specify what text you want to display instead of the image if the image cannot be displayed.

Align is used to align the text in the alt field.

Usemap is used to create an image map. This will be discussed in the second HTML lab.

Example:

Link Tag

As a means of navigating the Internet, use links to connect one page to another location. You can use images or text to represent links, and there are three main types of links where you activate them by clicking on them. First, and most common, is the link that transports you from one web page to another. A second kind of link will take you from one web page to a different portion of that same web page. Lastly, there are special kinds of links, such as "mailto:", that perform a specific action programmed into your web browser.

How do I create a Link?

All three kinds of links are created using the <A>, or anchor, tag. This tag has two optional parameters, HREF and NAME. The optional parameter used determines the particular action performed by the link. Basically, any text or image that is enclosed between the opening and closing anchor tag is bound the action that the anchor tag specifies. Below is a summary of how the <A> tag behaves.

Tag

Tag Name

Optional Parameters

Purpose/Usage

<A>

Anchor

HREF="www.somepage.org"

HREF="mailto:email@domain"

NAME="top"

Binds text or an image to the action specified by an optional parameter.

The HREF parameter either contains a web address to jump to or a special tag command such as mailto.

The NAME parameter is used to give this location a name. That way you can jump to this specific location. Reference this location with #AnchorName.

Examples:

<A HREF="http://www.slashdot.org">Link to a great Linux Web Page</A>

set an anchor: <A NAME="returnHere">Return Here</A>

go to anchor: <A HREF="#returnHere">Go Back</A>

mailto:

"Mailto:" is a special link that tells your web browser to fill out an email with a specified email address. The link is most commonly used at the bottom of a web page as a means of providing an email address to send comments or suggestions.

Example:

<A HREF="mailto:someone@somewhere.com"> Email me! </A>

Other Useful Tags

Tag	Tag Name	Optional Parameters	Purpose/Usage
<!-- -->	Comment Delimiter	None	Anything in between the greater than and less than signs is ignored by your web browser. This makes it particularly useful for writing comments.
<BR>	Break	None	Break behaves like a carriage return. <BR> shoves the rest of the HTML content to the next line, all the way at the left hand side of the screen.
<HR>	Horizontal Rule	size=x width=x	The horizontal rule is a horizontal line that goes across your web page. Size specifies the thickness of the horizontal rule, where "x" is some numeric value. Width specifies how far across the web page the line should go. This length can either be a percentage of your web page, such as 80%, or an absolute number of pixels, such as 400.

Setting Colors

There are more than 16 million possible colors that can be used for setting things such as background, text, and link colors. These colors are set as optional parameters for a given HTML tag. Take, for example, <BODY bgcolor="#0000FF">. The optional parameter is bgcolor, which is part of the BODY tag. The actual HTML code that sets the color is the six digit hexadecimal value following the "#". This number is separated into three parts: red, green, and blue respectively (bgcolor="#RRGGBB"). Thus, the first two digits specify how much red is in the background, the second two digits specify how much green is in the background, and the last two digits specify how much blue is in the background. Hexadecimal has values ranging from 0 to 9 and then continues from A to F (10 to 15 in decimal). So the full range is 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. There are 256 possible intensity values for red, green, or blue since 16 * 16 is 256. The lowest intensity for a color is "00" (none), and the highest intensity for a color is "FF" (all). These intensities are then combined to create one final color.
So, the example "#0000FF" would be blue since there is no red, no green, and all blue. Here are some other examples and their respective colors:

Hexadecimal Value	Color
000000	Black
FF0000	Red
00FF00	Green
0000FF	Blue
888888	Grey
FFFF00	Yellow
00D0FF	Light Blue
FFFFFF	White

Setting up your acme account for a web page

You are going to create your very own web page. To do this, you need to first set up a default web page. Do the following:

Log on to acme
Type: cd ~
Type: mkdir public_html
Type: chmod 755 public_html

What this did is create a directory called public_html in your home directory. The source for your web page will go in the file index.html you'll make this file.

Where is my web page?

Your web page will be at:

http://www.prism.gatech.edu/~gtxxxxx

where gtxxxxx is your gt-number

Where do I create HTML files?

Today, there are a number of software packages, such as Hot Dog, that capable of generating fancy web pages. However, since HTML is just plain text, it is perfectly fine to use pico, emacs, vi, or your favorite text editor to create and edit web pages.

Go ahead and use your favorite text editor to open up the index.html file in your public_html directory. You can see your modification if you simultaneously press the Shift key on your keyboard and click the Reload button in your web browser. Editing your web page by hand is probably the best way to get familiar with how HTML really works.

Creating your own web page

It is now time to create your web page. Below are a few important things you should know before you start, and the requirements you need to meet for grading purposes.

A Few Important Things Before You Start

There are a few important things you need to know in order for your web page to work.

1. Decency Standards

Georgia Tech does not tolerate nudity, offensive language, links to offensive sites, make-money-fast offers, or other things which may be harmful or offensive to others. Basically, if there is any chance that someone will be bothered by the contents that you display on your web page, DON'T DO IT!

2. All files associated with your web page must have user, group, and other permissions set to readable. All directories associated with your web page must have user, group, and other permissions set to readable and executable. Your home directory must also be executable by others. If the permissions are not set correctly, people will not be able to see your web site (and we won't be able to grade it!). If you do not remember how to set permissions, look back at lab 1.

3. Any HTML file should have the extension .html. This will ensure that all web browsers correctly recognize the file.

Requirements

The following is a list of items that must be somewhere on your web page to get full credit. Missing one item will result in a 50%, and missing two or more items will result in a 0.

Your name
A color or image background
One Picture (hint: use a scanner :)
One Paragraph of text describing you
Two Links to sites that interest you
Email Link

PLEASE PUT ALL THESE ITEMS IN YOUR INDEX.HTML!! You can create as many web pages as you have space to do so, but for grading purposes we will only be looking at your main page for the above items. Thank you.

After you have finished creating your web page, do nothing! Yes, that's right. Because your web page is world-readable, we can look at and grade them without you using turnin.

A word of warning...

DO NOT TOUCH YOUR WEB PAGE AFTER THE "TURNIN" DEADLINE!!

We will be checking the dates on *all* of the files in your public_html directory. If the date on any file is later than the due time, you will get a zero!

That's it for now. Do not throw away your web page after we have graded it. You'll be modifying it in the second HTML lab.