The Basics of HTML

by Donald W. Hyatt

The basic language of the World Wide Web is called "HTML", or the HyperText Markup Language. The elements in this language control formatting and relationships between documents, and are enclosed between angle brackets similar to this: <command> These commands are referred to as "tags". HTML tags just tell the computer how to display the web page and are not printed on the screen.

Here are some very basic HTML tags. Many tags come in pairs where one form starts doing a command, and a similar tag with the "slash" in front of the word stops the command.

Some simple HTML tags that come in pairs:

Opening Tag
Closing Tag
<HTML> Start of an HTML Document       </HTML> End the Document
<HEAD> Start the Document Header       </HEAD> End the Header
<TITLE> Start the Document Title       </TITLE> End the Title
<BODY> Start the Text Body       </BODY> End the Body
<H1> Start Large Header Font       </H1> End Large Font
<H3> Start Smaller Header Font       </H3> End Smaller Font
<B> Start Typing Bold       </B> End Bold
<EM> or <I> Start Typing Emphasized or Italics       </EM> or </I> End Italics
<FONT> Start a New Font       </FONT> End the Font
<CENTER> Start Centering Things       </CENTER> End Centering
<OL> Start an Ordered List (numbered numerically)       </OL> End the Ordered List
<UL> Start an Unordered List (bulleted items)       </UL> End the Unordered List
<!-- Start a Comment Section       --> End the Comment


Some HTML tags that are usually single commands:

<BR> Force a Break in a line or "carriage return"
<P> Start a new Paragraph (actually has a </P> counterpart if needed)
<LI> Begin an item in a List (used in conjunction with <OL> or <UL>)


Special Image Tag for Graphics:

< IMG SRC = "filename.type"> This will load an image where the source is some graphics file

Typical graphics types:
JPEG - Used for most photographs Example: "photo.jpg"
GIF - Used for simple images with few colors Example: "diagram.gif"
Some other Modification Parameters:
HEIGHT = n Specify Height in Pixels for faster image loading
WIDTH = n Specify Width for faster image loading
ALT = "description" Give description of image.(Assists visually impaired users.)


Special Link Tags for Connecting to Other Web Pages:

<A HREF = "somelink.html"> Start of an HTML Reference Link to a file on the Internet
</A> End of the Link


Body Tag Options:

<BODY BGCOLOR = "#hexnumber"> Change Background to a Color
<BODY BACKGROUND = "somegraphic.type"> Change Background to a Graphic
<BODY TEXT = "#hexnumber"> Change Text color to some value


Changing Colors by modifying the hexnumbers:

Each "pixel", or dot of light on the screen, is composed of RED , GREEN , and BLUE light components. It is possible to change the proportions of those colors to create different effects. Values for the web palette are arranged in pairs of digits that range in sixteen possible combinations ranging from: 00, 11, 22, 33, 44, 55, 66, 77, 88, 99, AA, BB, CC, DD, EE, and FF. The first pair adds RED to the color, the second adds GREEN, and the last adds BLUE. Here are the some sample hexnumbers color combinations:

Hex Number and Color
Hex Number and Color
    #FFFFFF White     #000000 Black
  #AAAAAA Light Gray   #555555 Charcoal Grey
  #FF0000 Bright Red   #990000 Dark Red
  #00AA00 Deep Green   #000066 Very Deep Blue
  #FF00FF Bright Magenta   #00FFFF Cyan
  #FFFF00 Bright Yellow   #EECCCC Pale Pink

To start typing in a new color, use the <FONT> tag with a COLOR definition to start printing in a new shade, and use the </FONT> tag to stop the font. For instance, if the following line of text appeared in an HTML document:

      This is <FONT COLOR ="#FF0000"> Red Text </FONT> and this is Black.

It would look like this when printed:

      This is Red Text and this is Black.

The tags are not printed, but they tell the web browser how to display the text when it is printed to the screen.

Take a look at a representative palette of colors:
Red and Green - RRGG
Blue Component - BB
 0055AAFF
0000      
5500      
AA00      
FF00      
0055      
5555      
AA55      
FF55      
00AA      
55AA      
AAAA      
FFAA      
00FF      
55FF      
AAFF      
FFFF      



Making Web Pages

The following may help you make some simple web pages using these simple tags.

Some Other Helpful Skills

The following Web Pages were ones that I developed for the students in my Supercomputer Applications class. It gave them an introduction to the UNIX operating system, and some other Web skills using PHP and Perl that allow for dynamic Web pages.