Guide to Basic HTML

GUIDE TO BASIC HTML

[ WHAT IS HTML ] [ WHAT is CODE ] [ BASIC HTML ] [ LINKS ]
[GRAPHICS ][BACKGROUNDS] [LISTS ] [ LINES ] [ COMMENTS ]
[TABLES & FRAMES] [META TAGS]

WHAT is HTML and WHY DO I NEED TO KNOW IT?

Hypertext Markup Language (HTML) is the coding used to control the appearance of ASCII text documents in a web browser (such as Netscape or Internet Explorer). All web pages are created using HTML.

There are numerous "HTML Editor" programs which will insert the HTML code into your document for you. However, for the same reason you want kids to learn their multiplication tables before they get their hands on a calculator, it's helpful to understand basic HTML before relying on Web authoring software.

It is also helpful to be able to recognize "good" and "bad" HTML code, so you can clean up the extra tags sometimes inserted by HTML editors, and, check the code for possible errors if one of your links doesn't work. "Good" HTML loads faster than "bad"...for example, Word Perfect HTML editor inserts extra code for each <BR> line break (br=1, br=2 etc). Even though your browser cannot SEE the extraneous code, browsers take the time to "read" all code, which slows down access to your page.

Also, if you ever want to "copy and paste" a snippet of HTML to your web page, to add a counter, a forum, a form, etc, you'll need to do it in the txt file version of your page and it'd be nice to know enough HTML to place it properly, as well as edit it if it doesn't work correctly.

HTML is NOT programming. HTML code is similar to the underlying "code" in Word Perfect; in Word Perfect, if you click on "reveal codes" you can see the underlying code...this is an easy way to determine what a formatting problem is. Same with HTML... click on "view source" in your web browser, and you can see the underlying HTML for any web page.

All HTML documents are ASCII documents. The htm or html extension makes them APPEAR as web page documents. To edit "by hand", simply change the htm extension to txt and open in Notepad or Wordpad and edit away. When you're ready to publish, simply change the extension back to htm.

WHAT IS THE "CODE"?

HTML CODE consists of HTML tags--the instructions that surround material such as text, images, and links and tell the viewer's Web browser how to display them. HTML tags consist of a left angle bracket < a tag name, and a right angle bracket >

There are several important things to know about HTML tags:
1.Tags are always surrounded with angle brackets (less-than/greater-than characters)--for example, <HEAD> or <I>.

2.Most tags come in pairs and surround the material they affect. They work like a switch: the first tag (<HTML>) turns the action on, and the second tag (</HTML> turns it off. (There are some exceptions. For instance, the <P> tag creates paragraphs and doesn't have to have an "off switch.")

3. The second tag--the "off switch"--always starts with a forward slash. For example, you turn on bold with <B>, type your text, and go back to regular text with </B>.

4. Tags are embedded, so you must turn the switches off first on, last off.
If you try, for instance, to do this:
<HEAD><TITLE>Your text</HEAD></TITLE>
it won't work.

You need to turn the switches off in the order first on, last off.
like this <HEAD><TITLE>Your text</TITLE></HEAD>.

5. Some tags have optional attributes that use values to modify the tag's behavior.
The <P> tag's ALIGN attribute, for instance, lets you change the default (left) paragraph alignment. For example, <P ALIGN=CENTER> centers the paragraph following it.

6. HTML is not case-sensitive ( You can use either lower or upper case)

HTML GLOSSARY (HTML Tags and attributes in alphabetical index)

HTML BASICS

1. Every Web page starts with <HTML> and ends with </HTML>

2. Next is the <HEAD> tag, which contains information about the document.

3. There are several tags that can go between <HEAD> tags, but the only one that's required is the <TITLE> tag, which puts text on the browser's title bar. Close those tags with </TITLE> and </HEAD>. (Remember: first switch on, last off.)

Other tags that can go between the <HEAD> tags include <META> tags, such as keywords, to be accessed by search engines. (see META TAGS below) Nothing that you put on your page before the <BODY> tag will be visible in your browser, however, search engines and spiders read ALL the code on your page.

4. Add opening and closing <BODY> tags. Everything that appears on the Web page proper will go between the <BODY> tags.
Example:
<HTML>
<HEAD>
<TITLE>Your web Page</TITLE>
</HEAD>
<BODY>rest of the web page</BODY>
</HTML>

5. Header Tags set the size of the text: from <H1> largest to <H6> smallest. Header tags also provide a line break and automatically align left. Header tags must be switched on <H1> and off </H1>

6. Position tags <CENTER><LEFT><RIGHT> set the position of the text. Remember to turn the switch on <CENTER> and off </CENTER>

7. Break tags <BR> line break and <P> paragraph break set line and paragraph (double line) breaks. Break tags do NOT have to be turned off! (but if you forget and turn them off, no harm done:-)

8. Both <BR> and <P> start the following text on the left side of the page by default, but the <P> tag's ALIGN attribute can change that. To align to center, for example, <P ALIGN=CENTER>

9. Text tags: <B> bolds the text; <I> italicizes text. Remember to turn the switch on <B> and off </B>

10. The <FONT> tag and its attributes SIZE,FACE,COLOR can be used to set the color and size of the text, or, designate a specific font to use. Remember to close the switch </FONT> when you want the change in attribute to end.

Note: you do NOT have to use the <FONT> tag...if you don't, text will appear as Times New Roman. the HEADER tags <H1> to <H6> can also be used to set font size see above)

SIZE is set by + or -
Example: <FONT SIZE=+2>Text here</FONT>

COLOR is set with those hexidecimal codes (see background)
Example: <FONT COLOR="#FF0000">Red text</FONT>

or, you can just use the name of the color and it will work fine on most browsers
Example: <FONT COLOR="RED">Red Text</FONT>

FACE is set with the name of a font
Example: <FONT FACE="Arial">Arial text</FONT>

You can list as many fonts as you like..your web browser will just go through the list until it sees a font that is on your system. Note: if you don't specify a font FACE, the default is Times New Roman.

Note: A combination like "Arial, Geneva" for the <FONT FACE> tag is good since Arial is generally available on PCs, while Geneva is a Macintosh font.
NOTE: <tt> is the tag for Courier font face (looks like typing)

CREATING LINKS

EXTERNAL LINKS

1. The anchor tag <A> alerts the browser that you're creating a link

2. The HREF attribute stands for Hypertext Reference--a fancy name for a link. Whatever follows HREF= in quotes is the actual name, or URL, of what you want to link to.
Example: <A HREF="whatever you want to link to">

3. Type in the full URL in between the quotes:
Example: <A HREF="http://www.angelfire.com">

4. To make the link appear on the page as a clickable link in text, type in what you want to call the link AFTER the link tag closes >, and, close by turning off the anchor switch </A>
Example: <A HREF="http://www.angelfire.com/biz/KS/ks.html">KS Services</A>
Looks like this on your web page: KS Services

NOTE: If the page you're linking to is in the same directory as the page you're linking from, you do not need to type in the whole URL, just the file name.
Example: <A HREF="nextpage.html">Next Page</A>

5. To add a clickable link to an email address, again use the anchor tag <A> and HREF attribute, point to an email address, add your link text and close</A>
Example:<A HREF="mailto:mls@netside.com">Mary lou</A>
which looks like this on your web page Mary lou

INTERNAL LINKS

You can also add links to text within the same web page

1. Label the (destination) target of the link with an anchor tag <A> using the NAME attribute. Go to the destination target text and surround it with the tags <A NAME=" "> and </A>
Example: <A NAME="legal">Legal Services</A> are available for low income persons by calling one of our branch offices.

2. Surround the text you want to link from with an anchor tag with a Hypertext reference (HREF) attribute<A HREF="# "> and </A>.
Example: <A HREF="#legal">Legal Services</A>

3. When someone clicks on the link Legal Services, they'll be taken to the target text (Legal Services are available for low income persons by calling one of our branch offices.) further down the page.

(Note: internal links can ONLY be used on ONE page. If you link to another page, even in the same web site, you must use the external link method)

ADDING GRAPHICS

1. In order for a graphic to show up on a web site, it must be either a gif or jpeg.

2. The image tag, <IMG> like the anchor tag points to a resource that's not actually on the page--using the SRC (source) attribute to point to the image, like this: <IMG SRC="logo.gif">.

3.As with the <A HREF> tag, type the location of the image between the quotes, and close the tag >.
Example: <IMG SRC="http://www.angelfire.com/biz/KS/smlogo1.gif">

NOTE: If the image you're linking to is in the same directory as the page you're linking from, you do not need to type in the whole URL, just the image name.
Example: <IMG SRC="smlogo1.gif">

4. If you'd like the graphic to ALSO be a clickable link, the <A HREF> link goes first, and the graphic <IMG SRC> code is used AS the link Close with </A>
Example: <A HREF="http://www.angelfire.com/biz/KS/ks.html"><IMG SRC="http://www.angelfire.com/biz/KS/smlogo1.gif"></A>

5. You can speed up the downloading time of your images by by using the <IMG> tag's WIDTH and HEIGHT attributes.
Example: <IMG SRC="http://www.angelfire.com/biz/KS/smlogo1.gif HEIGHT=50 WIDTH=50">

6. And, you can align your image by using the <IMG> tag's ALIGN attribute.
Example: <IMG SRC="http://www.angelfire.com/biz/KS/smlogo1.gif HEIGHT=50 WIDTH=50 ALIGN=LEFT"> would create an image 50x50, aligned to the left

BACKGROUNDS

1. You can change the background color of your page by adding a BGCOLOR attribute and value to the <BODY> tag. (The <BODY> tag opens the text of your page.) You can specify the color in English (white, black etc) and MANY browsers will read it, but not all, so it's best to specify in what is called hexadecimal code. (white is #FFFFFF)

Example: <BODY BGCOLOR=#FFFFFF> or <BODY BGCOLOR=WHITE>

You can find a list of the hexadecimal codes at http://www.phoenix.net/~jacobson/rgb.html.

2. To add a background image, use the <BODY> tag and BACKGROUND attribute to point to the location of an image:
Example: <BODY BACKGROUND="bgimage.gif">

CREATING LISTS

1. Unordered ( bulleted) list <UL> tag. This places bullets before each list item, which you designate with an <LI> tag. Remember to close the <UL> switch.

Example:
<UL>
<LI> First Item
<LI> Second item
</UL>

Looks like this on your web page:

First Item
Second Item

2. Ordered list, <OL> tag places number sign before each item instead of bullets)

Example:
<OL>
<LI>First item
<LI>Second Item
</OL>

Looks like this on your web page:

First item
Second Item

3. Definition list, <DL> tag presents a term on one line, then its definition indented on a separate line. This type of list uses the <DL> tag and denotes elements with <DT> (for "definition title") and <DD> (for "definition description"), like this:

Example:
<DL>
<DT> Application
<DD> to apply for services, contasct the office
<DT> Intake
<DD> information taken to determine eligibility
</DL>

Looks like this on your web page:

Application: to apply for services, contact the office
Intake: information taken to determine eligibility

CREATE A HORIZONTAL LINE

1. The tag for a horizontal line is <HR> This creates a thin shaded line across the whole page like this

2. You can add attributes of size, shading and alignment to the <HR> tag.

3. The SIZE=NUMBER attribute controls the thickness of the line

4. The ALIGN=LEFT/RIGHT/CENTER attribute controls the alignment

5. The WIDTH=PERCENT attribute controls horizontal width.

6. The NOSHADE attribute controls shading (NOSHADE creates a solid black line)

Example:
<HR SIZE=10 ALIGN=CENTER NOSHADE WIDTH=50%)

would create a thick dark line, in the center, 50% of the width of the page) like this

Note: the fancy lines you see on many web pages are NOT created with the <HR> tag, they're a graphic.

COMMENT TAGS

If you want to include invisible (to the viewer) comments in your page source code

These are inserted with the <COMMENT> or <!--> tag

Remember, though, ANYONE can view your source code by simply clicking on the "View" button in their browser.

TABLES & FRAMES

Tables are necessary if you'd like your text to appear in columns, you want to add a "menu" column to your page, etc. I never hand code tables from the beginning, though I will on occasion, hand edit tables.

The <TABLE> and </TABLE> tags surround the entire table definition. The first item inside the table is the CAPTION, which is optional. Then you can have any number of rows defined by the <TR> and </TR> tags. Within a row you can have any number of cells defined by the <TD>...</TD> or <TH>...</TH> tags. You can add COLOR attributes within each row, or, each cell.

Here is the basic code for tables:

<TABLE> ... </TABLE>defines a table.

<CAPTION> ... </CAPTION>defines the caption for the title of the table. (optional)

<TR> ... </TR>specifies a table row within a table.

<TH> ... </TH>defines a table header cell. By default the text in this cell is bold and centered.

<TD> ... </TD>defines a table data cell. By default the text in this cell is aligned left and centered vertically.

ATTRIBUTES:

BORDER displays the table with a border.

ALIGN (LEFT, CENTER, RIGHT) Horizontal alignment of a cell.

VALIGN (TOP, MIDDLE, BOTTOM) Vertical alignment of a cell.

COLSPAN=n The number (n) of columns a cell spans. ROWSPAN=n The number (n) of rows a cell spans.

NOWRAP Turn off word wrapping within a cell.

FRAMES

Frames are totally unnecessary. I don't use frames and never will and am not going to contribute to their usage by telling you how to code them. What's wrong with frames? well, frames slow down your page, cause some browsers to choke, "trap" your viewers, and are just generally annoying. Fortunately, after a brief period in 1998 when web pages sprouted frames like warts, the fad appears to have ended.

ESCAPE SEQUENCES (CHARACTER ENTITIES)

Because the symbols < , > , and & have specific meaning in HTML, if you want them to appear on your web page you must use their "escape sequences" instead .

< is the escape sequence for <

> is the escape sequence for >

& is the escape sequence for &

META TAGS

META tags are inserted between the <HEAD>....</HEAD> tags. Most important for search engine indexing are the description and keywords tags.

For lots of info on the use of META tags, see META TAGS RESOURCES

RETURN TO KS SERVICES