About HTML
HTML or Hyper Text Markup Langauge is the basic language in which all
web pages, or internet based documents are created in. HTML has quite a long history to
it, which we will not get into, but to put it in a few words. HTML and teh internet was
for the Milatary for communications, then Univsersities started using it. At present, the
current version on HTML is 3.2, from 1.0 where it started at. The language it's self is
not very complex, it basically consits of starting a comand in bettweeen and then ending
the command with
. In addition, the language is straight fowards, and although there are complex things
that can be done with it, basic functions are easy to learn and can make great web
pages......
To the Top
Starting A Web Page
Starting a web page is rather simple, to make a page, simply enter the
folloing commands into a new text file.
<HTML>
<HEAD>
<TITLE> your title here
</TITLE>
</HEAD>
<BODY...> (see below for more aboput the body command
</BODY>
</HTML>
That's al there is to it! Basically the HTML tag at the beging tells the web browser
that this is an HTML document and to read it as one. The HEAD tag tells the Browser that
information about the page, like the page's title can be found here. The TITLE tag begins
a place for the title and the /TITLE ends it. As for the /HEAD, it ends the head.
The BODY tag is where the browser is told what the page willl look like, what the
background will be, the text colors, ect.... It also marks the start of the web page's
main body. Inbetween it and the /BODY and /HTML tags are where the whole rest of the web
page goes, this includes the text, links, images, and whatever else might be put into the
web page. HTML /BODY amd /HTML tags finish up the web page and close it.
To the Top
The Body Tag:
Next up, we will tell you how to add commands to the BODY tag, in the
BODY tag is where the web browser is told everything it will need to know about the
structure of the web page. It tells what the link color, what the background color is,
what the background image is, and what the text color is. It is also a major place for
errors, so make sure you do this part right. Inside the BODY tag, the following commands
may be placed (note all these tags are optional):
<BODY....> BACKGROUND="backgroundname.gif" The File name of your
background.
BGCOLOR="" The Color in the background.
TEXT="" The Text Color.
LINK="" Unvisted Link Color.
VLINK="" Visted Link Color.
ALINK="" ACtive Link Color.
For more information on colors, see the colors part of this guide.
To the Top
Fonts sizes, styles and more...
Inorder to evenhave a simple web page, you have to know how to use the fonts, and this is
also pretty simple. To change a font size, there are two differont tags that can be used,
the h tag, where h1-h6 all produce text of differont szies, with one being the biggest.
This tag is simple to use, ivloves only opening and closing the tag, but is very basic.
The Font tag on the other hand uses size=+ or - to specify font size, in numbers 1 - 4. It
also alows you to change the font color by adding the tag color="" inside the
font tag, and lastly it alows the user to use differont styles of fonts by adding the tag
face="" also inside the fint tag. This tag requires and open and close tag, but
the color, size and style need to be specified in the opening part of the tag only.
As for Breaks in Lines, the tag BR starts a new line, and the tag P creates a whole new
paragraph, with black spance inbetween it and the previous paragraph. Lastly the Tag HR
makes a Horizontial Line accros the page, the size of this can be changed useing size=+ or
- andy number. Here is a list of the tags:
<font..> the basic font tag
color="" font color
size=+/- the size, -4 through +4
face="" the style of the font
</font> end the tag
<h1> - <h6> Preset font sizes, one being the biggest
</h1> - </h6 end the tag
<hr..> horizontial rule
size=+/- the size of the rule, any number
<p> new paragraph
<br> new line
To the Top
Colors
In HTML, there are two ways to write color names, the first is
literally color="green" color="blue" color="white" and so
forth... The other way is use the hexodesimale numbers, and thouse symbols can be found here.
color="FFFFFF" color is black
color="black" color is black
color="000000" color is white
color="white" color is white
To the Top
Item Alignment
The next part of our guide, focuses on alignment of images, text, tables, ect... Aligning
things is rather easy, as long as it's done right, and often is done wrong. To align a
picture, or table, with in the tag add the tag align= (center, left or right). This can be
used in tables, pictures, image maps, and other things of that nature. Below are some
alignment tags for other items, but that may also work with images, tables, ect...
center This tag centers the item or text
<p align="right"> aligns the item on the right
<p align="left"> aligns the item on the left
To the Top
External, Internel and Mailto Links
In order to make a web site with multiple pages, or to link to other sites, you must know
how to make a link. Links are rather simple when they reach internal or exterior pages,
but when they are in the same page, they become harder. There is also mailto links, that
alow people to send you mail by clicking on the link.
<a href="mailto:your@email.com> email me </a> sends an email to you,
through a link.
<a href="http://www.pagename.com"> page name </a> makes a link to a
page outside of yours.
<a href="filename.html"> page name </a> makes a link to a page
inside your domain.
<a name="anchorname"> page name </a> makes an anchor to a part of
yor page
<a href="#anchorname"> anchor name </a> makes a link to the anchor
To the Top
Images
Images are actually rather simple to ad to your web page. Basicaly all you have to do is
call them up to your web page, just like you would call up alink. But, unlike a link, they
apear instantally.
<img...> adds and image to your page
src="image.name" specifies the image (must be included)
align="center" centers the image
algin="right" aligns the image to the right
border="" decides the border for the image (use o with linked images)
alt="[image name]" makes text incase the image doesn't load
To the Top
Tables
Now for the harder stuff; Tables. Tables are suefull in organzing iformation into specific
colums. As long as you do the correct code, at all times for tables, they are relativily
easy to master. BUt note, that each section of a table needs it's own code, and it never
hurts to use more than one table, if you want a space inbetween rows.
<Table..> Begins a table
aligns= aligns the table
BGCOLOR="" background color for the table
BORDER= border thickness, sometimes large borders look nice too
CELLPADDING= space between the border and contents of the table
CELLSPACING= space between parts of the table
WIDTH= table width
<tr..> create one line on a table
BGCOLOR="" the background color of the part
VALIGN= aligns the info. within the part
<td> starts a cell (indvidual part of the table, for data/ pictures)
Table cell information
</td> ends the cell
</tr> ends the table line
</table> ends the table
To the Top
Forms
Forms are probably the most difficult thing in HTML, that this guide covers. However, they
are simple, one you get the jist of them. Just make sure that you use the correct method
and post, or your form won't do anything...
<FORM....> Starts a form
ACTION="" what happens to the form, when submited (usally mailto:your@email)
METHOD="post or get" how the form works, just put POST
<INPUT...> makes a input form
NAME="" field name (useful when reading the form)
SIZE= size of the form field
MAXLENGTH= the maxium amount of characters that can be entered
TYPE="text, passowrd, check box, radio, submit or rest" indicates the type of
box
CHECKED indecates that the check box is checked
<Select> indicates a select list
<OPTION..> A drop down list of items (use one for every item)
SELECTED indicates that this item is selected by defalt
SIZE= the size of the box
</SELECT> ends select list
<TEXTAREA..> starts ad large text field
COLS= number of colums
ROWS= number of rows
NAME="" indecates the name
</TEXTAREA> Ends the TEXTAREA
</FORM> Ends the form
