CIS2833 Web Design I

HTML Notes

Unit A - HTML Basics

1. What is HTML?

HTML stands for Hypertext Markup Language. It is the standard language that is used for all Web pages, no matter which program was used for the page creation (Microsoft FrontPage, Macromedia Dreamweaver, etc).

2. HTML uses special instructions, or tags, to create the files. Tags are usually found in pairs with a beginning and an ending tag. Some tags, however, do not require an ending tag. Good protocol dictates using uppercase letters for tags.

Example: <HEAD> </HEAD> are the tags to open and close a heading.
Example: <P> is a paragraph tag. It does not require a closing tag.

3. Before you begin creating an HTML document, it is very important to plan your page or pages by creating a storyboard. A storyboard can be a sketch of the page and its various page elements or it can be a sketch of how several pages in a Web site relate to each other.

4. Use Notepad to create your HTML file and save the file with a .htm file extension.

5. It is important to save and view your document frequently. To do this, save the file in Notepad, but don't close the program. Open Internet Explorer and open the file to view it. From this point on, toggle back and forth on the status bar between Explorer and Notepad as you modify the file until you are satisfied with the work.

6. For grading purposes, print the file both in Notepad and in IE.

7. Sample HTML tags:

<HTML></HTML>	Identifies the file as an HTML file.
<HEAD></HEAD>	Identifies the head area which contains the title, keywords, and description.
<TITLE></TITLE>	Page title tag.
<BODY></BODY>	Identifies the body section, which contains most of the page content.
<BR>	Line break (no closing tag)
<P>	Paragraph (no closing tag)
<H1></H1> through <H6></H6)	Heading tags. One is the largest and six is the smallest.
<A HREF="filename">text</A>	Hyperlink reference tag used for linking.

8. Relative vs. Absoute links

Relative links are used for internal links and do not contain a drive letter or "http".
<A HREF="dog.htm">dog pictures</A>

Absolute links are used for external links and begin with "http://"
Example: <A HREF="http://microsoft.com">Microsoft Web Site</A>

9. Enter the following line of code in the heading for each assignment you turn in:

<!Sherry Bishop>

Unit B - Formatting Text

1. After you place text in your HTML document, you can apply formatting tags to it that will enhance the text appearance on the page. Examples of text formatting are styles such as bold, italic, and underline; lists such as ordered and unordered; fonts such as Arial and Times New Roman, and alignment such as left, right, and centered. Although formatting should improve the page appearance and result in more readable text, overdoing the formatting can have the opposite effect. The key is simplicity. Do not use more than two or three different fonts on one page.

2. Ordered lists versus unordered lists

Ordered lists contain items that imply a sequential order, such as the steps to opening a file. The individual list items are preceded by numbers. The code looks like this:

Unordered lists contain items that are not sequential, such as a grocery list. The individual list items are preceded by bullets.

3. Serif versus san serif fonts

All fonts are categorized as either serif or san serif fonts. Serif fonts have little extra strokes on the ends of the characters. This sentence is written using a serif font. The sentence is written using a sans serif font. A sans serif font has block style letters. Which do you think is easier to read?

4. The font is controlled through the <FONT> tag. Some attributes that can be added to the font tag are FACE, COLOR, and SIZE.

5. Sample HTML tags:

<OL></OL>	Ordered list
<LI></LI>	List item
<UL></UL>	Unordered list
<U></U>	Underline
<B></B>	Bold
<I></I>	Italic
<STRONG></STRONG>	Preferable to the bold tag
<EM></EM>	Preferable to italic
<FONT></FONT>	Font - is used with FACE, COLOR, and SIZE attributes
<P ALIGN="left"></P>	Align attribute example added to paragraph tag. It can also be used with the heading tags.

Unit C - Using Graphics

1. Graphics added to Web pages make the pages more interesting than those with plain text. However, too many graphics can clutter a page quickly and cause problems downloading. As more graphics are placed on a page, the download time increases. If the page takes "too long" to load, the viewer will give up and go to another site.

2. Graphic formats:

JPEG, JPG	Good for photographs
GIF	Good for line art and animations
PNG	Good for both, the newest file format, not widely supported yet

3. After a graphic is placed on a page, you should always add alternative text or alternate text. This is accomplished through the use of ALT tags. The text should describe the graphic and is useful for screen readers and to display in place of or during the downloading of a graphic.

4. To insert a graphic, use the following example as a guide:
<IMG SRC="assets/lion.jpg" ALIGN="right">

IMG SRC stands for Image Source. The ALIGN tag sets the alignment of the graphic on the page. In the example above, the graphic is stored in a folder called assets.

5. A graphic can be resized by using HEIGHT and WIDTH tags. The height and width are expressed in pixels. The height and width attributes control the size the image appears on the Web page.
example: <IMG SRC="assets/lion.jpg" HEIGHT="200" WIDTH="300">

6. A graphic can be used as a link by using the A HREF tag with the image tag. This will result in a "clickable" image that can serve as a link to other Web pages. The image tags appear in the same position as a text link would appear.
example: <A HREF="construction.htm"><IMG SRC="assets/lion.jpg" ALT="Lions sunning"></A>

7. A background image can be added by referencing the graphic with a BACKGROUND tag.
example: <BODY BACKGROUND="assets/squares.gif">. To view a listing of colors along with their HTML code, go to http://hotwired.lycos.com/webmonkey/reference/color_codes/.

8. A background color can be added by using the BGCOLOR tag with the BACKGROUND tag.
example: <BODY BGCOLOR="#F5FFA">