This document is designed to teach the basic codes of HTML. Each one is used only after it is introduced, with the exception of some structural codes at the top, the most critical of which is the TITLE code. Pointers appear along the way - things I've learned - sometimes the hard way. It is not designed to be complete, but includes almost all codes in frequent use! To see the codes, select View - Document Source or the equivalent command on your browser. Better yet, save the file and print it out to see all the codes. Then, as you go down the page, you can see the codes that created each element. HTML is basically an ASCII file (American Standard Code for Information Interchange - the Esperanto of the computer world) with codes in it to provide formatting. Most codes come in pairs, although not all do. Codes are enclosed in the less than/greater than "brackets", and the closing codes have a slash as the first character inside the brackets. Many also have a number of attributes which control their behavior or appearance. At the top and bottom of the document are the HTML and /HTML codes. The document itself is divided into two sections, the HEAD and BODY. The HEAD contains the TITLE code, and may also include META codes which describe the document. The BODY code can define the text colors, background color, and background images - here I used a color (yellow), although one could specify a background image - e.g., BACKGROUND="image.jpg". Although I have formatted this text nicely in ASCII, the browser removed any hard returns, replacing them with one space. It also took out multiple spaces and replaced them with one space. This allows HTML to be formatted and word-wrapped correctly regardless of the size of the window, the browser used, screen resolution, and all of the variables that could affect its appearance on the reader's end. It does make for long introductory paragraphs on a document of this kind, though.
Headings
Headings use the HTML code H, followed by a number. There are six levels of headings. Headings appear on a line of their own and have a gap above and below. They are usually bold, depending on the browser. Headings control much formatting automatically. If you want other codes to work, such as italics, put them inside the heading codes.
First Heading
Second Heading
Third Heading
Fourth Heading
Fifth Heading
Sixth Heading
Paragraphs
Paragraphs use the HTML code P. Often, the closing code is left out. The P code forces a line break (Carriage Return) and puts a gap in the document at that location.
There is a paragraph code just above this sentence.
Breaks or Carriage Returns
To force a Carriage Return without the gap, use the BR Code.
This is useful in such things as addresses:
Graduate School, USDA
120 Howard Street, Suite 780
San Francisco, CA 94105
Pre-formatted Text
Of course, if you want to put in gaps, carriage returns, and the like and NOT have the browser do its thing, you can use the HTML code PRE.
PRE specifies that the text is "preformatted"
It allows you to plug in
gaps and carriage returns where
you want. I just don't like the font used
and it's not too hard to send text off the right edge. Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaah!
Other Formatting Codes
Here is a list of some other special formatting codes which change the appearance of text.
U - This is U text
BIG - This is BIG text
BLINK - (Use sparingly, if at all, please!)
CITE - This is CITE text
CODE - This is CODE text
DFN - This is DFN text
KBD - This is KBD text
SAMP - This is SAMP text
SMALL - This is SMALL text
STRIKE - This is STRIKE text
SUB - This is SUB text
SUP - This is SUP text
TT - This is TT text
Fonts
Changing the SIZE
The FONT code allows you to change several things. The type of change is controlled by attributes. Attributes follow the code name and are typically equal to something. They are often enclosed in quotes. One attribute of the FONT code will change the size of text.
FONT SIZE=1
FONT SIZE=2
FONT SIZE=3 (This is the default)
FONT SIZE=4
FONT SIZE=5
FONT SIZE=6
FONT SIZE=7
You can also specify the FONT SIZE change as a relative value (+2, -1, etc.) These numbers are not additive, but always alter the base font size, typically 3.
FONT SIZE=+2FONT SIZE=-1
The BASEFONT code allows you to decide the default:
BASEFONT SIZE=4 creates a larger default size.
BASEFONT SIZE=3 returns the setting back to "normal."
Font Colors
The FONT code can also be used to change the color of text. Colors are specified in HTML with the pound sign, followed by three values specifying the amount of Red, Green, and Blue to use. To simplify things, the numbers can range from 0 to 255, specified in Hexadecimal (base 16). To demonstrate this arcane concept, here is text in #000000 (black), #ff0000 (red), #00ff00 (green), #0000ff (blue), and finally, #ffffff (white).
Fortunately, somebody realized that using hexadecimal required some amongst us to remove shoes and socks in order to calculate such values, having run out of fingers. Though not supported by ALL browsers, we can now try to get away with:
FONT COLOR=white,
FONT COLOR=red,
FONT COLOR=yellow,
FONT COLOR=green,
FONT COLOR=blue,
FONT COLOR=purple,
FONT COLOR=gray,
FONT COLOR=black,
and even the exotics -
FONT COLOR=aqua,
FONT COLOR=fuchsia,
FONT COLOR=lime,
FONT COLOR=maroon,
FONT COLOR=navy,
FONT COLOR=olive,
FONT COLOR=silver, (silver, which may also be the background color,) and
FONT COLOR=teal.
But what I meant by FONTS was . . .
OK, you might be able to specify a font or list of fonts. If the browser supports this feature, and if it can find them on the computer, it will use them. Otherwise, it will use whatever it pleases. Take that, FONT mavens.
Some examples you may have on your computer:
FONT FACE="arial",
FONT FACE="futura",
FONT FACE="modern", or
FONT FACE="courier".
Horizontal Rules
To insert a line across the document, use the HR code.
This comes in several flavors (attributes), not available with all browsers:
SIZE=10
WIDTH=60%
NOSHADE
Lists
Ordered and Unordered
Lists can be ordered (the OL code) or unordered (UL.) These codes can also be used to indent text. Each item in the list is preceded by the LI (List Items) code, which can be unpaired (used without the closing code.)
- Here is text which is indented.
- The first step in an Ordered List.
- The next step.
- The last step.
Below is an unordered list. So far we've covered:
- Structural tags (HTML, HEAD, TITLE, BODY)
- Headings (H1 - H6)
- Paragraphs (P) and Breaks (BR)
- Emphasis (I or EM) and Strong Emphasis (B or STRONG)
- PRE and other text formatting codes
- FONTs
- Lists (OL and UL) and List Items (LI)
Outlines
Lists can be included in lists, as in the following outline.
- This is list level 1.
- This is list level 2.
- Back to 2.
- Back to 1.
Changing the Appearance of Lists
Ordered Lists are numeric by default, but can be of various TYPES (A, a, I, i.)
TYPE=A
- Item 1
- Item 2
TYPE=a
- Item 1
- Item 2
TYPE=I
- Item 1
- Item 2
TYPE=i
- Item 1
- Item 2
Unordered lists also come in several TYPES, such as TYPE=disc, circle, or square.
TYPE=disc
TYPE=circle
TYPE=square
Definition Lists
This type of list is used to define terms. It consists of the Definition List (DL) code, and Definition Terms (DT) followed by Definition Descriptions (DD.)
- DT is used for the Definition Term
- DD is used for the Definition Description. This code can also be used to indent the first line of a paragraph.
- This shows the Definition Define code (DD) used to indent the first line of a paragraph. Use the UL or OL codes to keep the indent going for the rest of the document, or until a code is encountered to turn indent off. This use of these codes is not "official."
Creating Margins
You can "double indent" with BLOCKQUOTE.This text has been indented on both sides of the document with the BLOCKQUOTE code. It is one way to give a web page margins. It also performs some spacing similar to the P code.
Links
Links can surround graphics, text, or both. Links create "clickable" areas that move you to a different place in the current document or retrieve a document, graphic, or file.
Local Links
Links use the Anchor code (A). To create a place to go to (a target) use the NAME attribute:
A NAME="XYZ" (Anchor XYZ is located here)To create a link to this anchor name, use the Hypertext Reference (HREF) attribute. The link below specifies A HREF="#XYZ". NOTE: These codes are CaSe sensitive! Between the beginning and ending codes, you must place either text or a graphic to serve as the "clickable" link.
This is a link to the location above!
FYI: Frequently, a page has a set of local links at the top. If one is selected and the page has not yet loaded that anchor name yet, the link takes you to the top of the page.
To create a link to another document on your site, just use the document name. You can also include an anchor name, separated from the filename by the pound sign. The link below reads:
A HREF="index.html#ABC"
If there is no such anchor name, the link goes to the top of the document.
Link to index.html, anchor name ABC.
Linking to Remote Files
You can create a link to anything on the Internet! You must specify the full Universal Resource Locator (URL) in the HREF attribute. For instance, to go to the catalog search page on the Graduate School, USDA Web Site, the following HREF specification is needed:
HREF="http://www.grad.usda.gov/cgi-bin/sb/nav.cgi//?nav=100455"
Here is the full link:
Link to the Graduate School, USDA's on-line catalog search .
Building a Link
The pieces of the link include:- the protocol indicator (http://) which tells the server how to send the file - in this case "Hyper-Text Transfer Protocol." Most web files are sent this way.
- the domain name (www.grad.usda.gov) which specifies which server should be contacted. In this case:
- a world wide web server (www)
- for the Graduate School (grad)
- of the U.S. Department of Agriculture (usda),
- a government (gov) institution.
- the subdirectory specification, if needed (/cgi-bin/sb/).
- the file name to load (nav.cgi) - this file directs users to other pages, based on a parameter)
- the parameter specifying a particular page (//?nav=100455).
- an optional anchor name, preceded by the pound sign (not included in this example.)
The "MAILTO:" link
A special link which triggers the sending of an E-Mail on some browsers is the MAILTO.
It appears in the HREF attribute, and looks like:
HREF="MAILTO:Sterling_Bobbitt@grad.usda.gov"
And looks like:
Sterling_Bobbitt@grad.usda.gov
Graphics
Two types of graphics files are used on the World Wide Web:
- GIF Files:
- supported by more browsers,
- better for line art,
- crisper display,
- support interlaced and transparent images (in "89a" format), and
- can even be animated.
- JP(E)G Files:
- better compression for photographs, although
- compression results in some loss of detail.
Graphics Attributes
Graphics are included in the document with the IMG code. Attributes include:- The SRC - the file name
- ALT - Alternate text to be displayed while graphics load or if they are not loaded*
- WIDTH - the width in pixels*
- HEIGHT - the height of the graphic in pixels*
- ALIGN - TOP, MIDDLE, BOTTOM (LEFT RIGHT supported on newer browsers)
* Always include these attributes!
Aligning Graphics
Graphic with TOP alignment.Graphic with MIDDLE alignment.
Graphic with BOTTOM alignment.
Graphic with LEFT alignment.
Graphic with RIGHT alignment. - - - - - - - - - ->
Note that with left and right alignments, text wraps around the images. This can cause problems with older browsers, and graphics can overlap or even cause text to disappear underneath images!
Centering Graphics
To center graphics, one needs to use a commonly used code that is not supported on older browsers, CENTER. This is a code of its own (not an attribute), and centers everything (text, graphics, tables, etc. until a /CENTER code comes along. Here is what that looks like with a graphic and some text:
Graphic and text in between CENTER codes
Graphics Links
Here graphics are selected as links. The second graphic includes the BORDER=0 attribute.
Graphic Link.Graphic Link with BORDER=0.
I often place tables around graphics to handle captions and get better control of placement. This is one of those areas it is good to check with different browsers, setting the window to different widths, and even looking at the results on different monitors. Graphics can be unpredictable!
Image Maps
Image maps allow graphics to contain links to multiple locations. There are several different ways to make this happen, involving either Web server programs, a large graphic consisting of smaller image "pieces", or what is known as a "client-side" image map. This page will demonstrate the latter.First, let's create two targets for different links:
WHITE TARGET
WHITE: You clicked on the White Background
BLACK TARGET
BLACK: You clicked on the Black Background
Then, load the image, including the USEMAP attribute:
ALWAYS provide text links nearby to accomplish the same purpose, for those using paleolithic browsers which don't understand image maps!!!
* WHITE * BLACK *
Then, define the map with the AREA code, which includes SHAPE attributes, COORDS coordinates, and finally a target (HREF) to go to. Coordinates are specified by X,Y coordinates and there are several programs available, such as MapThis or MapEdit, to help you come up with coordinates. Some image editors also display X,Y coordinates as the mouse moves over the image.
Tables
Tables are used extensively on the World Wide Web, one of the reasons being the control they provide over placement of text and images. Almost any page that looks like it has columns of text is formatted with tables.Table cells can contain text or graphics. Each is like a small page in the way that it can be formatted.
The table begins with the TABLE code (bet you figured that out already.) The table is specified row by row, cell by cell across the rows. Rows begin with TR codes, and cells begin with either TH (Table Header) or TD (Table Data.) Table Headers are centered and bolded by default, while Table Data is left justified and appears in plain text.
A Simple Table
| Header 1 | Header 2 | Header 3 |
|---|
| Data 1 | Data 2 | Data 3 |
| Data 4 | Data 5 | Data 6 |
Table Elaborations
This is CAPTION Text| TABLE attributes | Begins and ends the table |
|---|
| BORDER= | some # of pixels | Creates a border of # pixels width |
| ALIGN= | LEFT/CENTER/RIGHT | Controls horizontal placement of table |
| CELLPADDING= | some # of pixels | Sets spacing around cell contents |
| CELLSPACING= | some # of pixels | Sets spacing between cells |
| WIDTH= | # of pixels or % of window | Sets width of table (percent a much better option!) |
| BGCOLOR= | #hhhhhh | RGB hexadecimal specifications for background color |
| CAPTION attributes | Surrounds caption text |
|---|
| ALIGN= | TOP or BOTTOM | Dictates placement of CAPTION text |
| TH attributes | Table Header Cells |
|---|
| BGCOLOR= | #hhhhhh | RGB hexadecimal specifications for background color |
| ROWSPAN= | some # | Number of Rows for cell to span |
| COLSPAN= | some # | Number of Columns for cell to span |
| ALIGN= | LEFT/CENTER/RIGHT | Justification of cell contents |
| VALIGN= | TOP/CENTER/BOTTOM | Vertical alignment of cell contents |
| WIDTH= | # of pixels or % of window | Sets width of column (percent a much better option!) |
| TD attributes | Table Data Contents |
|---|
| BGCOLOR= | #hhhhhh | RGB hexadecimal specifications for background color |
| ROWSPAN= | some # | Number of Rows for cell to span |
| COLSPAN= | some # | Number of Columns for cell to span |
| ALIGN= | LEFT/CENTER/RIGHT | Justification of cell contents |
| VALIGN= | TOP/CENTER/BOTTOM | Vertical alignment of cell contents |
| WIDTH= | # of pixels or % of window | Sets width of column (percent a much better option!) |
| TR attributes | Table Row Contents |
|---|
| BGCOLOR= | #hhhhhh | RGB hexadecimal specifications for background color |
| ALIGN= | LEFT/CENTER/RIGHT | Justification of cell contents in row |
| VALIGN= | TOP/CENTER/BOTTOM | Vertical alignment of cell contents in row |
Whew!
Forms
Forms allow you to collect input from the folks visiting your site and process it using a program. It may be as straightforward as E-Mailing you, as is shown in this example, or as complicated as generating "On-the-fly" web pages which are then presented based on the selections made.Different servers handle such forms in different ways. Talk with the Internet Service Provider (ISP) to see what can be done with the information from your forms.
Form Design
Start with the FORM code. It has two attributes, the ACTION (what program to run when the form is submitted) and the METHOD (either GET or POST. Most forms use POST - check with your ISP!)Here we will use:
ACTION="/cgi-bin/gen-form?someuser" and
METHOD="POST"
Please feel free to send me comments, suggestions, criticism, etc. My aim is to make this an easy (and quick) way to learn HTML.
