The tags from Checkpoint #2 will have *symbol

Headers 1-6

There are 6 diffrent settings for headers that can be used by the user in HTML.

HEADER One
HEADER Two
HEADER Three
HEADER Four
HEADER Five
HEADER Six

You must do the following:
<H?> Print Text here < /H? >

< HTML >

To format your text doctument to be read as HTML you must use this tag to define what language it is written in.

 < html >

the page is then done in this space
</html >

< Head >

The < Head > tag is where you enter information about your Web page like Title of your page.

 < head >

< title > Insert your page title </title >
< /head >

< Title >

The < Title > tag is used to name the Web page and will put the name on the title bar.

<title> Insert title here to put ont the title bar </title>

< Body >

This tag declares where the actual body or meat of the web page starts and end by declaring where the body starts and ends.

<body> The body of the web page goes in here
</body>

Lists Anchor

Ordered and Unordered lists

These tags will produce either numbered or bulleted lists of text.

Ordered List

<ol>

<LI> one </li >

<LI> two </li >

<LI> three </li >

<LI> four </li >

< /ol >

one
two
three
four

Unordered List

<ul>

<LI> one </li >

<LI> two </li >

<LI> three </li >

<LI> four </li >

< /ul >

one
two
three
four

Defintion Tag

This tag allows the user to put a statment and right below allows them to put a defintion of that word.

<dt>ISDN<DD> It Still Does Nothing.

ISDN:

It Still Does Nothing.

Image Anchor

Inserting Pictures <IMG> Tag

This tag will allow you to insert pictures into the website then from there you can create a link from this picture that you have imported


< img scr="skull.gif">

ALT Property

The ALT property allows you to specify text that will appear in place of your inline images.

<IMG SRC="cold.jpg" ALT= "Homer is so cold">

Alignment of a picture

This tool will let you put your picture to the left or the right of the webpage.

<IMG SRC="drink3.gif"ALIGN=right>

Controlling the Horizontal and Vertical Space of an Image

The HSPACE property increases the space from the left to the right. The VSPACE property increases teh space from above and below the image

<IMG SRC="evilhom.gif" VSPACE=15 HSPACE=209>

Changing Size of image

This allows the user to change the size of a picture that is to go on the website

<IMG SRC="chainsaw.jpg"Width=149 Height=124>

The picture now has the dimentions of 149X124 and 16million colors

Border Property

This allows for a border to go around the image

<IMG SRC="gotbeer.jpg" BORDER=1>

The Border is black and 2 pixles wide

Paragraph Tag

This tag shows where a paragraph woulf begin and end in a website. This allows for word wrap on the paragraph


<p> the dog went in to the house and Mr Jones was very angry.</p>

the dog went into the house and Mr Jones was very angry.

ALIGNing text

This is a specail function that allows the user to align text to the LEFT, RIGHT and CENTER of the page.

<H1 ALIGN=center> hello world </h1>

hello world

Changing Fonts

This allows the user to chang fonts when writting.
Example:

Size
Face
Color

To Change Color:
<font color="#a52a2a"> colored text </font>
Colored Text

To Change Face:
<font face="nosfer"> Cool looking text </font>
Cool looking text

To Change Font Size:

 <font Size=+4 > The font is bigger </font>

The font is bigger

Table Anchor

Tables in a Webpage

The tables give user a great way to organize information and it is much more visual appealing then just Straight raw code/text. For example purpouses I will have one table and show all the diffrent things that can be done with it

Letters	A	B	C	D
Animals	Ape	Bat	Cat	Duck
	Alligator	Bear	Cow	Donkey


<table>

	<tr>

		<th colspan=1>Letters</th>


		<th> A</th>

		<th> B</th>

		<th> C</th>

		<th> D</th>

	</tr>

	<tr>

		<th> Animals</th>

		<td> Ape</td&t;

		<td> Bat</td>

		<td> Cat</td>

		<td> Duck</td>

	</tr>

	<tr>

		<td>/td>

		<td>aligator </td>

		<td>bear</td>

		<td>cow</td>

		<td>donkey</td>

	</tr>

</table>

This is the code used to make a table. The next section are the diffrent types of formatting tools needed

Borders

The borders can range from 1 to 10 pixles around the table


<table border=10>

Letters	A	B	C	D
Animals	Ape	Bat	Cat	Duck
	Alligator	Bear	Cow	Donkey

Cell Spacing

The cell spacing property controls the amount of space inserted between table cells.


<table cellspacing=10 >

Letters	A	B	C	D
Animals	Ape	Bat	Cat	Duck
	Alligator	Bear	Cow	Donkey

Cell Padding

To increse the space between teh table text and the table cells


<table padding=10 >

Letters	A	B	C	D
Animals	Ape	Bat	Cat	Duck
	Alligator	Bear	Cow	Donkey

Alignment of the tables

by default the table will align to the left but with the ALIGN function the table can be aligned to the right.


< Table ALign=right>

Letters	A	B	C	D
Animals	Ape	Bat	Cat	Duck
	Alligator	Bear	Cow	Donkey

Working with Table and Cell Size

The Sizes have two parts: the Height and the Width


<Table border=10 Width=550>

Letters	A	B	C	D
Animals	Ape	Bat	Cat	Duck
	Alligator	Bear	Cow	Donkey

Defining Cell and Colum Sizes

The <TH> and <TD> tags support the WIDTH property as well.


<th WIDTH=70>Letters</th>

Letters	A	B	C	D
Animals	Ape	Bat	Cat	Duck
	Alligator	Bear	Cow	Donkey

This moved the Letters cell over

Changing the Table Background

Changing colors in a table will enable certin parts of the table to be highlighted and stand out more then other parts of the table.

Table back color
TR BGCOLOR
TD BGCOLOR
TH BG COLOR

This is a list of all the diffrent items in a table that will change colors


<table border=10>

<th BGCOLOR="#33cc66"> A</th>

<td BGCOLOR="RED"> Ape</td>

<tr=BGCOLOR="yellow">

		<td></td>

		<td>Alligator</td>

		<td> Bear</td>

		<td>Cow</td>

		<td> Donkey</td>

	</tr>

Letters	A	B	C	D
Animals	Ape	Bat	Cat	Duck
	Alligator	Bear	Cow	Donkey

Spanning Rows and Colums

This allows the Rows to be made bigger


<th COLSPAN=2>ANIMALS </th>

Letters	A	B	C	D
Animals		Ape	Bat	Cat	Duck
	Alligator	Bear	Cow	Donkey

This moved the Animals colum over one

Extension to tables

This is a group of commands that will help you in the design part of tables and make them more eye pleasing

A	B	C
D	E	F
G	H	I

This will be the new table that I use for this section

Border Color Light & Dark


<table border=4 bordercolordark=black bordercolorlight=red>

A	B	C
D	E	F
G	H	I

Creating Frames and Rules

Box
Draws a box around all four sides
Above
Draws only the top border
Below
Draws only the bottem border
HSIDES
Draws the Horizontal sides
LHS
Draws only on the left hand side
RHS
Draws only on the right hand side
VSIDES
Draws the Vertical sides
VOID
Does not draw borders on any of the four sides


<table frame="any of the above">