BASIC HTML

HTML Basics

The basic outline of a document looks like this:

<HTML>

<HEAD>

<TITLE>My First Project</TITLE>

<!--note that this is the title people will see on your browser-- Any text like this, in brackets, will not be read on a browser and is a place to put your notes.>

</HEAD>

<BODY>

Type your text here

<!--this links the image to the next page>

</BODY>

</HTML>

Getting Started

This first thing you need to do is make a folder and place any images or other materials that you will want to use in your web page in this folder. All of you html pages must also be placed in this folder!! It is crucial to put everything in one place! If not the browser will not be able to find it. Remember that your first page must be titled index.html.

Making Web Pages the Easy Way--Use Netscape Composer or Microsoft Word

If you have Microsoft Word and want to save a page as HTML, simply Save the File as HTML. Make sure that the file name ends with .html It will be much easier if you only use small letters in your file name. It is that easy!!

Then to add links or images, open the file in Netscape Composer. To do this, open Netscape and go File>Open in Composer.

If you want to start a new page in Composer, go File>New Page.

To add an image or a link in Composer, simply go Insert>Image or Insert>Link.( There are also icons on the top line of the ruler to insert images, a picture, or a chain, for a link.) Again make sure that the image is saved as a .jpg or a .gif. To link to another web page, type in the name of the page. It should already be in the same folder! To link to a new site, type in the URL beginning with http://.

You may also note other things you can do in composer. To work with alignment and text, look at the options under format.

To add accent marks, go Tools>Character Tools and select the character you want from the dialogue box that comes up.

To view and revise HTML in composer go Tools, HTML tools. If you want to revise the HTML by hand, the notes in the following sections will be helpful

If you are new to this, it is easier to use Netscape Composer than to write your own code!!!

Working with Text

You can indicate text size, font type (within a limited range of fonts available to browsers), font color and style. Here are a list of some of the commands you might want to use:

Bold: <B>text here</B>
Italics : <I>text here</I>
FONT SIZE : <FONT SIZE=+1>text here</FONT>
Note that you can specify absolute or relative size. Fonts are measured in sizes 1 through 7. The default size is 3. I think it is generally easier to use relative sizes, i.e. use - or + and then specify the difference from the normal size.
FONT COLOR: <FONT COLOR=######>specify color with numbers or letters, see section on color below</FONT>

Note that you can use more than one text tag but make sure that you use them in the same order before and after the text.

Color

You can add color to text or specify a background color. You specify a background color inside the body code:

<BODY BGCOLOR="######">Remember all of the info for your page goes here. You can use either names or numbers to specify colors.</BODY>

You can also add a background image:

<BODY BACKGROUND="xxxx.gif"> Note your file could be in either gif or jpg format.

The following is a list of web safe color names and codes:

AQUA	0000FF
BLACK	000000
WHITE	FFFFFF
BLUE	0000FF
CYAN	00FFFF
FUSCHIA	FF00FF
LIME	00FF00
MAGENTA	FF00FF
RED	FF0000
YELLOW	FFFF00

You might look at the HTML to see the code for this table!

Here are some examples of coding text.
Use view source in your browser to read the code.

Accent Marks

For accent marks: &(the vowel)acute; for example á=á or í =í

For tilde: ñ=ñ types a n with tilde

Alignment

The following are common alignment tags. They can be use to specify the alignment of text on a page, the alignment of images in relationship to text or the alignment of text or images in table cells. You can include them INSIDE <P>, <IMG SRC>, or <TD> tags.

ALIGN=TOP, ALIGN=MIDDLE, ALIGN=BOTTOM, ALIGN=RIGHT, ALIGN=LEFT

You can also use <CENTER></CENTER> to center images, text or tables.

Here is an example using alignment and spacing tags.

Spacing

<P>This tag is always used with text to indicate beginning and end of a paragraph. It will cause a line to be skipped between paragraphs.</P>

To leave a blank space without text use the following:
<P> </P>

To cause a line break without skipping a space use <BR>. Note that this is one of the few tags that can be used alone, without a corresponding closing tag.

To insert empty space around an image you can use either <HSPACE=##> for horizontal space, i.e. space to the left and right of an image, or <VSPACE=##> for vertical space, i.e. space above and below an image. The number you insert represents the space in pixels

For example <IMG SRC="xxxxx.jpg" VSPACE=20> will place forty pixels above and below the image.

Images

The code to add an image is <IMG SRC="xxxx"> The name to off your image file is put inside the quotation marks. All images files should end in .jpg or .gif. To see how to save images in the proper format, check out the instructions.

Your image will load much faster if you specify the height and width of the image in pixels. Therefore a complete tag would look like this: <IMG SRC="xxxx.jpg" width="www" height="hhh">

Links

The code for a link looks like this: <A HREF="newpage.html"> LINK </A> In this case, the information inside the quotation marks indicates the page that you are linking to. If you want to link to a URL you need to write the whole thing out inside the quotation marks, i.e., "http://weber.ucsd.edu/~binacom" The information between the <A HREF> and the </A> tags will serve as the highlighted link. In the initial example the LINK text would be highlighted.

If you want to use an image as a link it is easy. Here's an example <A HREF="newpage.html><IMG SRC="image.jpg" width="www" height="hhh" border="0"></A>. Note that the image is located inside the appropriate tag. In this case I added a border="0" so that there wouldn't be a highlighted border around the image. If you want a border around the image, leave this tag out.

Adding Quicktime Video or Sound

You can add video or sound with the <EMBED SRC> tag.

Here's an example from the BINACOM web page:

Note that Quicktime movies end with .mov. You then want the specify the height and width of the image. In a sound file you can leave out height and width. The pluginspace tag tells the browser to tell the viewer where to get the plugin if they don't have it. AUTOSTART=TRUE means that the video or sound will play automatically when the page is accessed. Use FALSE if you want the viewer to activate the video file. You may also add LOOP="x" to specify how many times you want the video or sound to play. You can also add alignment tags inside the EMBED SRC tag if necessary.

Tables

Tables are the key to web layout. The following info will get you started.

The following is a simple table.

The code for the table is as follows:

Tables always begin and end with <TABLE></TABLE>.
<TR> introduces a table row. Always end the row with </TR>.
<TD> introduces a table cell. Insert image or text in the cell and end with </TD>.

The additional information in the first line specifies the properties of the table. Width refers to the width of the table in pixels. Cellspacing refers to the space between table cells. Note that the way this table usually appears on this web page there is white space between the blocks. I used a cellspacing of 2. Cellpadding refers to the space around the image or text inside a cell. Just leave this at zero for now. Border=0 is most important if you don't want a border around your table. If you are using images you probably don't want a border. The table with the color values above is an example of a table with a border.

In the following table a second row has been added:

The code for this new row is as follows:
<TR>
<TD COLSPAN=3><IMG SRC="student.gif" width="300" height="100"></TD>
</TR>

To add an element that spans more than one row add ROWSPAN=x after TD.
To add an element that spans more than one column add COLSPAN=x after TD.

Lists

Lists are useful when listing items in a sequence. Lists can begin either a number or a bullet.

A numbered list begins with the <OL> tag and ends with </OL>.
A bulleted list begins with <UL> and ends with </UL>.
Each line of a list should begin with <LI>.

Here's an example of the code for a bulleted list.:
<UL>
<LI TYPE=DISC> Bullets are used for visual interest.
<LI TYPE=SQUARE>Note that you can change the type of the bullet by using the TYPE= command.
<LI TYPE=CIRCLE>The default is a filled circle. Because I specified a square in the last line I added TYPE=circle here.
</UL>

This is how the previous list would look:

Bullets are used for visual interest.
Note that you can change the type of bullet by using the TYPE=command.
The default is a filled circle. Because I specified a square in the last line, I added TYPE=circle here.

Adding Links

If I wanted to make one of the table cells into a link, I would need to add the A HREF code. The following is an example of code that makes the second row into a link:

Note that the A HREF command goes before and after the image (or text) that will be the link. Note also that I added border="0" to the information about the image. If you don't want the link border, i.e. the blue box, around an image that you are using as a link, DON'T FORGET THIS COMMAND!!

Here's a table with a border:

©Ruth Wallen

BINACOM HOME