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 |
| 00 | 55 | AA | FF |
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.