HTML

HTML Notebook: Back
HTML Hypertext Markup Language: computer language used to create Web pages
Tags part of the html language that tells web browsers what format to use: Tags have to be turned on < > and off </ >

Basic HTML file

<HTML>

<HEAD>

</HEAD>

<BODY>

Everything displayed on your page will be in here.

</BODY>

</HTML>

Text Tags

Bold <B> </B>

Underline <U> </U>

Italics <I> </I>

Strikethrough <S> </S>

Center <CENTER> </CENTER>

Return <BR>

HEADINGS

Heading 1 (largest) <H1> </H1>

Heading 2 <H2> </H2>

Heading 3 <H3> </H3>

Heading 4 <H4> </H4>

Heading 5 <H5> </H5>

Heading 6 (smallest) <H6> </H6>

PARAGRAPHS

New Paragraph <P>

This tag will skip a vertical space after going to the next line (like using <BR> twice).

Does not require a closing tag, but adding one for your own reference is a good idea.

FONT SIZE

Changing Font Size <FONT SIZE="x"> </FONT>

"x" will be replaced by a number or with a + or — sign in front of it

Making a sentence larger:

<FONT SIZE="+2">I am a big sentence now!</FONT>

I am a big sentence now!

Making a sentence smaller:

<FONT SIZE="-2">Hey, I am small!</FONT>

Hey, I am small!

COLOR

replace the word "color" with a color name or the hexidecimal color value

COMBINE SIZE & COLOR

<FONT SIZE="x"> <FONT COLOR="color">changes size and color </FONT>

ALIGN TEXT

<P ALIGN="LEFT"> default setting, but can be used if you are changing alignment a lot on a web page DOES need to be closed </P>

<P ALIGN="RIGHT"> aligns text to the right of a web page

DOES need to be closed </P>

<P ALIGN="CENTER"> aligns text at the center of a web page

DOES need to be closed </P>

SPECIAL CHARACTERS

Special characters are added to your web pages by using a special reference to the character you want to use. The reference will begin with an &, will be followed by some text or numbers, and end with a semicolon, ; .

nbsp this is used to add extra space between words

special characters are not tags

Hello  there!

would place two spaces between hello and there on a web page

Hello there!

The first space is added just using the "space" bar on the keyboard. A web browser will see the first space, after that you have to add them yourself.

Hello     there!

This will create the first space, and 4 additional spaces between the two words, for a total of 5 spaces.

Hello there!

copy using © will create the copyright symbol.

There are numerous other special characters that can be used. A list of these will be provided.

ADDING HTML COMMENTS

Comments can be used to help yourself when you are coding your web page. The only way to view comments is to look at the source (html) code of the web page.

Comments are a good to use to leave yourself reminders so you don’t forget something when you come back later to redesign the page.

COMMENT TAG

Example of a more useful comment.

<!–This image should be aligned to the right, and have a caption line.-->

LINKING TO OTHER PAGES

A HREF tag used for linking

<A HREF="http://www.yahoo.com">YAHOO</A>

The A stands for anchor, and the HREF=" " is asking for a location to link to. The </A> is the closing tag. The text between the tags is what will show up on the web page as a link.

The above link would link to the search engine YAHOO.

The link will show up colored and underlined.

YAHOO

If you move your mouse over a link, the cursor should change into a pointing hand.

ADD AN IMAGE
IMAGE TAG <IMG SRC="image.gif">

The IMG stands for image. The SRC stands for source. The source of the image is going to be the net address or file location of the image. Most often, you will be able to just type the file name of the image here.

JPEG and GIF the two most common image file extensions

JPEG Joint Photographic Experts Group — one of the common formats for storing image files; best for high-resolution color images (photographs)

GIF Graphic Interchange Format — common format for storing image files used for images containing primarily solid colors

Images you include on your web pages need to be saved in a Picture folder created within your HTML folder. To add an image to your web page, the tag will look like this:

file:/// - tells the browser where to find the file

Macintosh%20HD/Desktop%20Folder/Mans/HTML/Pictures/ - means the picture is in the Picture folder that is in the HTML folder that is in the Mans folder located on the Desktop in the Hard Drive — NOTE: any time there is a space enter %20

To center the image on the page, place the CENTER tag around the image tag.

</CENTER>

To wrap text around an image, include the alignment tag within the IMG SRC tag.

REMEMBER:

The filename or address of an image IS case sensitive.

HORIZONTAL RULES

<HR> adds a horizontal rule to a web page

<HR ALIGN="CENTER"> centers the line

same format is used for LEFT or RIGHT

<HR SIZE="?"> controls thickness of the line

(in pixels)

<HR WIDTH="?"> controls how long the line is

(in pixels)

<HR WIDTH= "%"> enter as a percent of the page width

<HR NOSHADE> line appears without 3D cutout look

HTML Lists
Unordered Lists

<LI> is used to set off each item in your list

does not require a closing tag

<UL>

<LI>Item #1

<LI>Item #2

</UL>

This creates the bulleted list below:

Item #1
Item #2

The list is indented from the rest of your text. You can use the <UL> tag to indent as far as you want, as long as you close them all.

<UL>

<LI>Item #1

<LI>Item #2

</UL>

This will give the following list.

Item #1
Item #2

Ordered Lists

Created the same way but us <OL> instead of <UL>.

<OL>

<LI>Item #1

<LI>Item #2

<LI>Item #3

</OL>

This creates a numbered list rather than a bulleted list:

Item #1
Item #2
Item #3

HINT:

Be careful when using the <CENTER> tag with lists. If the text of each item varies in length, the list sometime looks disorganized.

<OL>

<LI>This is item #1

<LI>Item #2

<LI>The longer the sentence, the more disorganized things look.

<OL>

</CENTER>

will create the following:

This is item #1.

Item #2

The longer the sentence, the more disorganized things look.

BODY TAG ATTRIBUTES

When creating a web page, you can change several things in the body of your document by adding extra commands to the <BODY> tag. Here is an example:

Use as many or as few as you want. Those attributes not changed will be set to the web browsers default settings.

Explanation of Attributes

bgcolor="color" background color

This changes the background color of your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. The default setting varies with your browser, but is usually gray or white.

text="color" text color

This changes the default text color the browser will display on your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. The default setting for text color is black.

link="color" link color

This changes the color of all of the non-visited links on your page. You can set this to any color you would like to use. The default setting for a non-visited link is usually blue.

alink="color" link color

This changes the color of an active link on your page, which is a link that has just been clicked on by a user's mouse. You can set this to any color you would like to use.

vlink="color" link color

This changes the color of a visited link on your page. You can set this to any color you would like to use. The default setting for a visited link is usually violet.

background="image.gif" background image

This adds a background image to your page. If you use this attribute, the background image will take the place of any background color you may have specified. If you don't use a background image, the browser will use your background color or its default background color.

HTML TABLES

Defining the Table

<TABLE> </TABLE> Opens/Closes a borderless table

<TABLE BORDER> </TABLE> Opens/Closes a table w/borders

<TR> </TR> Establishes a row within a table

<TD> </TD> Defines a data cell within a table

<TH> </TH> Centers a heading at a tables top or side

<CAPTION> </CAPTION> Places a title at the top of the table

increases amount of padding for all cells

sets the space between the cells

<TABLE WIDTH="80%"> sets table width to 80% of the margins

by default browsers center heading cells <TH>

and left align data cells <TD>

<TABLE BORDER WIDTH="75%" BGCOLOR="RED"> changes the background color of the table to red

<TH><FONT COLOR="BLUE">ITEM #1</FONT></TH> changes text in this cell to blue

NOTE: each cell has to be changed individually

BASIC HTML TABLE FORM

<HTML>

<HEAD>

<TITLE>TABLES</TITLE>

</HEAD>

<BODY>

<CAPTION>HTML Table</CAPTION>

<TR>

<TH>COLUMN 1</TH><TH>COLUMN 2</TH><TH>COLUMN 3</TH>

</TR>

<TR>

<TD>ROW 1, COLUMN 1</TD><TD>ROW 1, COLUMN 2</TD><TD>ROW 1, COLUMN 3</TD>

</TR>

<TR>

<TD>ROW 2, COLUMN 1</TD><TD>ROW 2, COLUMN 2</TD><TD>ROW 2, COLUMN 3</TD>

</TR>

<TR>

<TD>ROW 3, COLUMN 1</TD><TD>ROW 3, COLUMN 2</TD><TD>ROW 3, COLUMN 3</TD>

</TR>

</TABLE>

</BODY>

</HTML>

FORMAT RESIZING IMAGES

To resize an image add width and height commands to your image tag.

First you have to find out the original size of your picture. To do this:

Open the program Graphic converter

Open the picture you want to resize.

Go to Picture,

Pull down to PixMap Information

View Height and Width in Pixels

Determine what size (in Pixels) you want your picture to be.

NOTE: try to keep the same proprotions

The tag looks like this:

<IMG SRC="file:///Macintosh%20HD/Desktop%20Folder/Mans/

HTML/Pictures/image.gif" width="75" height="40"

Back