|| Tips Index || WEB: Browsers | Surfin' | Cache | HTML | Designs | CGI | Misc

HTML Basics

HTML is an acronym for HyperText Markup Language. As the name suggests, it consists of tags to mark areas of a document's text, enabling it to do more than just be read sequencially. The main purpose is to provide links to more information. It is the basis for all webpages.

Most tags are in PAIRS, a starting tag <tag>, and an ending tag </tag>.

There are many fine resources for information about HTML on the web.

What I want to do here is show you the basics to setup a page.

Outline Tags

There are 4 tags (HTML codes) that every page must have;

<html> Starts all HTML documents

<body> Indicates the start of displayed information

--------- Your page information goes here...---------

</body> Indicates the end of displayed information

</html> End of the document.

Table of Contents

Page Header Tags

The area between the <html> tag and the <body> tag is referred to as the Header area of the page.

The items here are optional.

The <head> tag starts this section.

The normal tags you would find here are:
<title>Your Page Title</title> the browser displays this in the Titlebar area.

Also <meta> tags, which usually contain information the browser and web search engines can use to help identify your page and it's content.

Meta tags are complicated in their composition. For more information, type meta tag into one of the web search engines.

This is the best location for javascript functions to be defined.

The Header area ends with the corresponding </head> tag.

Table of Contents

Body Tag Options

The <body> tag has multiple options to describe the overall appearance of your page. They follow the word body and must be seperated by a space. The options include:

background="pic.gif/jpg" Your favorite background picture in either GIF or JPG format.

bgcolor="color" The background color of your page.

text="color" The color of the text on your page.

link="color" The initial color of links text.

vlink="color" The color of previously visited links text.

alink="color" The color of the active link text.

Table of Contents

Text Positioning Tags

Tags to position text on the page.

<hr width=# size=# noshade>

horizontal rule, draws a seperation line across the page. The width and size(height) can be defined as actual pixels or percentages. The 'NOSHADE' option forces a 2D line.

 

line break, moves to the next line.

paragragh, moves 2 lines below.

<center> </center>

centers everything between the tags.

 

none blank space; browsers treat multiple spaces as 1 space in normal text. Used to add extra spaces in text.

<pre> </pre>

Displays the text, between the tags, exactly the way it is typed in the file (pre-positioned).

Table of Contents

Text Attribute Tags

Tags to set attributes for your text. Everything between the tags will have the attribute. It is possible to combine tags for example:

bold and italic = bold and italics.

Note that the ending tags are in reverse order to the starting tags. This is a good practice to follow for ALL tags. It can eliminate a lot of hunting for a missing or mispelled tag that is ruining your page.

<h#> </h#>

Predefined Heading sizes; # is the same number, indicating a size between 1-6 (1 = largest / 6 = smallest). When a header tag is encountered the browser starts a new line, prints the heading, and then starts a new line under the heading.

H1

H2

H3

H4

H5

H6

 

Bold

 

Strong (same as bold)

 

Italics

 

Emphasis (same as italics)

<big> </big>

Big typeface

 

Small typeface

<code> </code>

Code typeface

<samp> </samp>

Sample typeface

<tt> </tt>

Typewriter typeface

 

1/2 line ^higher text

 

1/2 line _lower text

Table of Contents

Font Tag

Your text here

The font tag is the most useful text styling tool. You can use the text attribute tags, described above, along with the font tag for even more versatility.

The size option will set the enclosed text to any size, or relative to the default size (usually 3). If you use the face option to select a standard Windows font, the size will reflect the point size of that font. NOTE: If the person viewing your page does not have the font on his system, he will see plain text.

The color option can use color names or hex codes.

 This is SIZE 5.

 This is 1 step smaller than default size.

 This is Comic Sans typeface with size of 4.

 This is RED.

 This is also RED.

 This is LIGHT GREEN.

 This is also LIGHT GREEN.

 This is BLUE.

 This is also BLUE.

 This is GOLD.

 This is also GOLD.

Table of Contents

Text Link Tag

The ability to link to another location from key words or phrases, is the advantage of a webpage over a page of text. It is possible to link to another part of the same document, to different document, or any page on the entire internet.

<a href="link-location">Descriptive Text</a>
or
<a name="jumphere">

This is called an Anchor tag. That's why it starts with <A (A for Anchor). After the A, the link is referred to with HREF= or given a NAME.

The link-location is ALWAYS INSIDE QUOTES and can be:

another file in the same place as the current one. The format is the entire filename.
another part of the same document (a NAME Anchor) or a specific location in another document. The format is the entire filename, a pound sign, then the name of the anchor:
webhtml.html#textlink
or the URL of any webpage on the internet. The format is
http://geocities.datacellar.net/myhood/webhtml.html

The NAME anchor is used to locate places in the document that can be directly linked to from other locations. The contents at the top of this page uses this linking.

The Descriptive Text is what the reader will see on the page. This can be replaced with an IMGage to use a picture instead of text as the linking media. You can use both text and a picture in a link.

Table of Contents

Graphic Insertion Tag & Links

To insert a picture on your page, use the IMGage tag.

<img src="image-file" width=## height=## border=# align="left/center/right" valign="top/middle/bottom" hspace=# vspace=# alt="Description">

You only need to use the first 2 options to insert a picture.

The src="image-file" tells the browser where to find the image file. It can be a file in the same place as the page, or point to a file anywhere on the internet. GIF and JPG are the preferred picture formats. GIF's can provide animation at up to 256 colors, while JPG's can compress true-color images to a managable size for faster downloads.

The width and height options set the size, this helps the page loads quicker.

The border size can be defined, zero means no border.

The align options will position the picture on your page.

The valign will position the following text in relation to the image.

The hspace size defines the side-to-side space before the surrounding text types. Default is zero.

The vspace size defines the top-to-bottom space before the surrounding text types. Default is zero.

The Description is what the viewer sees while graphics are loading, or if they are turned off in their browser.

To use a picture as a link, insert the IMG tag in the Descriptive Text area of the Text Link example above.

Table of Contents

E-mail Tag

To setup an e-mail link, you use the same anchor tag for a text link, only you set the link-location as mailto: your e-mail address.

<a href="mailto:yourname@yourserver.com">Send Mail</a>

Table of Contents

Sound Tags

To add controlled sound to a page, you use the EMBED tag. This tag will call the sound routine of the viewer's browser to play the sound.

<embed src="sndfilename.typ" autostart="true|false" loop="true|false">

To add background sound to a page, you use the BGSOUND tag. This tag will load the sound file into the sound routine of the viewer's computer to play the sound. The viewer has no control other than to turn the volume down on his system. This method will slow the page load, and can be very irritating to your guests.

<bgsound src="sndfilename.typ" loop="true|false">

To add sound to accomodate the majority of browser use the EMBED tags followed by the BGSOUND tag inside a <NOEMBED><bgsound src=file></NOEMBED> tag set. This will play a controllable sound if your visitors browser supports it, but if not, then it will load a background sound.

Table of Contents

Table Tags

The ability to control the arrangement of information is the main feature of tables. This can be done with borders to set information apart, or without borders as an invisible guide for entire webpages. All of my pages use invisible(borderless) tables to separate and align information.

Tables can have an unlimited number of rows and columns. Here is the tag for a sample table of 3 rows and 3 columns with a border:



<table border="1" width=300 height=60
 cellpadding=5 cellspacing=0>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td align=center>4</td>
<td align=center>5</td>
<td align=center>6</td>
</tr>
<tr>
<td align=right>7</td>
<td align=right>8</td>
<td align=right>9</td>
</tr>
</table>

A sample 3X3 table.

1 2 3

4 5 6

7 8 9

Table of Contents

Frame Tags

Frames allow multiple HTML pages to be displayed simultaneously. The advantages gained with frames usually outweight the extra download time.

One of the main advantages is the ability to control and change individual areas of the screen, while the rest remains unchanged.

A menu frame, controlling the contents of a viewing frame is one of the most popular uses.

Here is a a sample for a frame page consisting of a 100 pixel tall menu frame across the top and a main frame below. The ROWS= command sets the frame sizes; the * means all the rest of the available page rows. To divide into columns, left to right, use the COLS= command instead of rows.


<HTML>
<FRAMESET ROWS="100,*" FRAMEBORDER="0" BORDER="0">
        <FRAME NAME="menu1" SRC="menu_ma.html"
	 MARGINWIDTH="0" MARGINHEIGHT="0"
	 SCROLLING="AUTO" NORESIZE>
        <FRAME NAME="main" SRC="main2.html"
	 MARGINWIDTH="0" MARGINHEIGHT="0"
	 SCROLLING="AUTO" NORESIZE>
<NOFRAMES>
<BODY BGCOLOR="white" text="black">
<center>
<P>
This document contains frames. Click <A HREF=
	"index1.html">here</A> for no-frames version.
<P>
</center>

</BODY>
</NOFRAMES>
</FRAMESET>

</HTML>

In setting up a frame page, the easiest way is to divide the screen vertically into columns or horizontally into rows moving from the upper left the bottom right corners. For example, to set up a page with 2 equal divisions across and 2 down the screen (a total of 4 frames), set your first frameset using cols(columns) set at 50%,50%. Then a second frameset of rows set at 50%, 50%. I chose 2 equal percentages but you can use any combination that makes the total equal to 100%. Instead of percentages, you can use actual screen pixels to set the columns and rows sizes.

Notice that the Frameset and Frame tags are inserted before the body tag.

Table of Contents

Links To More Info

Links information is being updated...

Table of Contents