You are here: ASTech > Engineering Library > Services > HTML Basics 
 
HTML Basics
 

Outline                                       printerPrinter friendly version

 

What is in an HTML document?

An HTML (HyperText Markup Language) document is a simple text document with special "tags" included. A tag is represented by the "greater than" and "less than" signs (<>) with a command between them. These tags give information about and structure the document, format text, add images, and create links to other documents.

for example, to make a word bold, you write:
<B>bold</B>

 

Framework of an HTML document - Metatags

An HTML document, has a basic outline/framework that looks like this:

 <HTML>
 <HEAD> <TITLE>Title of your document</TITLE> </HEAD>
 <BODY>
 body of the document
 </BODY>
 </HTML>

The <HTML> tag specifies it is an HTML document. An HTML document has two parts: the <HEAD> and the <BODY>. In a simple HTML document, the <HEAD> includes only the <TITLE> of the document. The <TITLE> is the name of the document; it appears in the bar across the top of the browser window. Other information (like metadata) can be put in the <HEAD>, but it is not required.

Anything that does not go in the <HEAD> (most of the document really), goes in the <BODY>. The <BODY> is what people really see when looking at your document.

 

Tags supporting text structure

Paragraphs, line breaks, horizontal rules

To create paragraphs in an HTML document, you must add a paragraph tag. It is not sufficient to hit the return key within the text of the document.

To specify a new paragraph (as we just did), use <P>.

To end a line,
and start immediately again below it, use a line break tag: <BR>.

For a line across the screen to divide the text into sections, specify a horizontal rule: <HR>

or a half-width rule: <HR WIDTH=50%>

Headings

Headings are used for headlines and sections headers. The heading tags cause the text to appear bold and in steadily increasing sizes. They range from 1 through 6:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The heading tags look like this:
<H1>Heading 1</H1>

Lists

There are two important types of list, unordered (bulleted) and ordered (numbered). Use <UL>...</UL> for an unordered list, and <OL>...</OL> for an ordered list. Each list item is tagged with <LI>.

  • First unordered item
  • Next item
  • The final item
<UL>
<LI>First unordered item
<LI>Next item
<LI>The final item
</UL>
  1. First ordered item
  2. Next item
  3. The final item

<OL>
<LI>First ordered item
<LI>Next item
<LI>The final item
</OL>

Centering

Use <CENTER>...</CENTER> to center text on the page.
 

Text attribute tags - Bold, italics, underline, color

You can add bolding, italics, and underlining in your documents.

You can add <B>bolding</B>, <I>italics</I>, and <U>underlining</U> in your documents.

You can also make the text different colors.

You can also make the text <font color=red>different colors</font>.

 

Navigational tags

URL's and pointing to other files

A URL is a Uniform Resource Locator.

The URL http://www.ilr.cornell.edu/basics.html gives the instruction:
Using the http protocol (WWW), go to the server "www.ilr.cornell.edu" and retrieve the file "basics.html".

Likewise, http://www.englib.cornell.edu/mhh4/cv.html means:
Using the http protocol (WWW), go to the server "www.englib.cornell.edu", enter the "mhh4" directory/folder, and retrieve the file "cv.html" in that directory.)

Or http://www.englib.cornell.edu/mhh4/ means
Using the http protocol (WWW), go to the server "www.englib.cornell.edu", enter the "mhh4" directory/folder, and retrieve the default file for that directory. This file has a name like "default.html" or index.html".

External and Internal links

To make a link to another document (external link), you create a (hypertext reference) anchor. For example, to point to CUinfo, you use:

<A HREF="http://www.cornell.edu/">CUinfo</A>

To make links within a document (internal links), as we have done here with the index at the top of the page, first "name" the text you would like to jump to:
<H3><A NAME="extern">External and Internal links</A></H3>

Then make a link to it at the place you want to jump from:
<LI><A HREF="#extern">External and Internal links</A>

If two documents are in the same directory or folder, it is not necessary to give the entire path name when you point from one to the other:
<A HREF="academic.html">Classes Taken</A>

Images

Images in web pages also have URL's. You add an image to a page by using the tag <IMG SRC=url>. For example:
<IMG SRC="gwlogo.gif">, when gwlogo.gif is stored in the same directory or folder.

 

Final tip

Never hesitate to use the View Source option in your browser to see how other people wrote their documents!