Computer Network Literacy

DATA110

 

HTML Guide

 

Overview

HTML (HyperText Markup Language) is used to create Web pages. Tags are codes that you insert into your text to create the elements of your Web page.

 

HTML files are text files that contain not only your data, but also tags that you enter to denote certain display elements, such as headers, titles, or formatted text. You must name HTML files with an .htm extension. If you do not, the browser you are using will not recognize that the files are Web files and will instead load them as if they were plain text files.

 

Generally, HTML tags follow the format shown below:

         

          <tag_name [attributes]>data</tag_name>

 

Tag names are enclosed in less-than and greater-than “brackets”. Some tags have attributes, which represent the options for that tag. Some tags act upon data. For those tags, the data to be acted upon follows the opening tag. Tags that act upon data require a closing tag, which is identified by the “/” slash followed by the tag’s name within the less-than and greater-than brackets. Attributes are never included with the closing tags.

 

Creating an HTML document

You can create an HTML document in any text editor program or even in your favorite word processing program (as long as you save your file as a text-only file). Windows Notepad is a suitable, albeit simple, program for creating HTML files that are no larger than 64KB (about 64,000 characters long).

 

Using your editor, you enter both the data for your Web page and the tags that will format that text.

 

HTML defines two basic types of tags: container and non-container tags. Container tags have opening and closing tag elements; the data to be acted upon is placed between those elements. Non-container tags or empty tags have only an opening tag element.

Basic container tags

Opening tag

Closing tag

Purpose

<HTML>

</HTML>

Identifies the file as an HTML file. These tags simply say “Everything between us is HTML.”

<BODY>

</BODY>

Denotes the start of the document body. The body is made up of the content the user actually sees in the browser window.

<TITLE>

</TITLE>

Text within the tags appears as the window title.

 

Adding comments

Opening tag

Closing tag

Purpose

<!--

-->

Text within the tags does not appear in your browser. Instead, it serves as a place to record comments and reminders.

 

Paragraph formatting

Opening tag

Closing tag

Purpose

<P>

</P>

Marks the end of a paragraph. Inserts a carriage return and a blank line. Additional text you enter will follow the blank line.

<BR>

 

Identifies a line break. Inserts a carriage return.

 

Headings

Opening tag

Closing tag

Purpose

<H1>

</H1>

Formats the line of text as heading level 1 paragraph.

<H2>

</H2>

Formats the line of text as heading level 2 paragraph.

<H3>

</H3>

Formats the line of text as heading level 3 paragraph.

HTML supports six different heading styles: H1 is the largest and H6 is the smallest. Each of these heading tags includes the functionality of a <P> tag. Headings always appear on their own line and are separated from other text by a blank line before and after.

 

Centering paragraphs

Opening tag

Closing tag

Purpose

<CENTER>

</CENTER>

Centers all text included between the tags.

 

Character formatting

Opening tag

Closing tag

Purpose

<B>

</B>

Text within the tags is formatted bold.

<U>

</U>

Text within the tags is underlined.

 

Character size

Opening tag

Closing tag

Purpose

<FONT SIZE=#>

</FONT>

Sets the size of the text relative to normal text. You can set SIZE equal to a value between 1 (the smallest) and 7 (the largest). You can also set the number to a positive or negative number representing how many sizes above or below the base font size you want to go.

 

Character colors

Opening tag

Closing tag

Purpose

<FONT COLOR=”name”>

</FONT>

Sets the font with the tags to the color specified. Some valid color names include: Red, Green, Blue, Black, White, Gray.

 

Character typefaces

Opening tag

Closing tag

Purpose

<FONT FACE=”font_name”>

</FONT>

Gives the ability to change the typeface

 

Horizontal rule

Opening tag

Closing tag

Purpose

<HR>

 

Adds a horizontal rule (a separator line) to your Web pages.

 

Embedding graphics

Opening tag

Closing tag

Purpose

<IMG SRC=”filename”>

 

Inserts a graphic in your Web page in the spot you indicated.

 

Creating an e-mail link

Opening tag

Closing tag

Purpose

<A HREF=”mailto:email_address”>

</A>

To create an e-mail link.

 

Creating a link to a web site

Opening tag

Closing tag

Purpose

<A HREF=”http://domain_name”>

</A>

To create a link to a web site.

 

Debugging

Common error

Effect on your Web page

Forgetting to close a container tag

The text of your document is formatted incorrectly from that point forward.

Holding the shift key when you should not, resulting in errors such as “<H!>”, “<?H>”, “,H>”, or <H.”

The text will be formatted as you desired it to be or, if the error was in the closing tag, the effect will be the same as forgetting a closing tag.

Entering an incorrect tag

The text will not be formatted as you desired it to be.

 

To view your web page

Start Internet Explorer. From the menu, choose File ŕ Open. Open the file Bank.htm. If you modify Bank.htm and then wish to view the changes while Internet Explorer is active, click Refresh. This will reload your file with the changes you made.

 

Sources: HTML Programming: Level 1, Logical Operations; Using HTML, JAVA, and CGI, Que, Eric Ladd and Jim O’Donnell