Sparks Fly
[Home] [PBS VideoDatabase] [Social Studies] [TSU] [UVA]

 

Part 2--HTML Basics

Creating Links

Linking to other files (relative linking)

Tag called anchor--tells browser where to find the file

<A HREF="path/filename.html">anchor text</A>

<A HREF> Creates an anchor to a reference (a location you specify)

the </A> closes the anchor

the anchor text is what you click on to activate the hypertext link

Creating Links

Linking to other sites (absolute linking)

You need to be very specific and watch the typing--this link is to a web address

<A HREF="http://web_address">Sparks’ Fly</A>

Remember the text Sparks’ Fly will be displayed, highlighted, and underlined in the browser

Creating Links

Linking to the same file

This allows the reader to jump to a place in the document without having to read the whole thing

First--must leave a bookmark or pointer in the file then create the link

Pointer tag <A NAME="xxxx">

Link tag <A HREF="#xxxx">anchor text</A>

You must include the # to tell the browser to look for the pointer and not a different file.

Creating Links

Mail to links

Way to receive messages from visitors to your web page

<A HREF="mailto:e-mail address">anchor text</A>

Link Color

Three different types of link but usually only two colors are used for types of links

Unvisited links LINK=

Visited links VLINK=

Active links--this changes so fast not usually necessary to change

Add the link color commands to the Body color tag code line

<BODY BGCOLOR="0099BB"TEXT="6600DD"LINK="00FF00"VLINK="FF0000">

Exercise

Create a link that takes you to the Sparks’ Fly site at http://members.tripod.com/cynthiasparks

Test it

Graphics

A picture is worth a thousand words, that’s why it take a thousand times longer to load!! Heather Carr

Copyright--be careful and be sure you check before using the graphic

Loading depends on

size of the graphic, small loads much faster

type of graphic--.gif faster load than .jpeg

Graphics

.GIF type of file used for clip art

Graphics Interchange Format

.JPEG type of file used for photos

Joint Photographic Expert Group format

<IMG SRC="file_name"> Image Search--searches for the graphic and loads it into your Web page

Be sure to put graphics files in same directory as web page to make loading faster

Graphics

Downloading Graphics Files

Great search engine for web "stuff"

http://www.looksmart.com

Search for backgrounds, animations, clip art, etc.

Find file you want to download (download OR)

Position the mouse over the image and right click and hold down

Choose Save this Image As

Save As dialog box appears

Save to directory where you have web page files

Click OK (graphic is saved to your selected location)

Graphics Sites

www.flash.net/~krys

www.4yeo.com

www.tgn.net/~pambytes/default.html

www.windyweb.com/design

www.kidsdomain.com

www.freeimages.com

www.gifanimations.com

Alignment—Graphics

Alignment

Where will the image appear on your page (automatically left)

<IMG SRC="graphic filename" ALIGN="RIGHT">

You can choose Right, Left, Middle, Bottom, Texttop

Exercise

Graphics

Select a graphic that represents you to be the theme graphic for your page

Select an animated graphic to represent a e-mail concept and position it at the bottom of your page

Tables

Three tags to create tables

<TABLE>…</TABLE>

<TR>…</TR> defines a row of cells

<TD>…</TD> indicates the table data and specifies the table cell

Table Borders

BORDER=# where # is the width of the border

code is placed inside the Table tag

<TABLE BORDER=5> number between 3 & 10

Tables

Table Size

If not specified, size determined by data used

To change decide the percentage of the window’s width you want the table to occupy

50% would cover 1/2 the window

100% would cover whole window

Tables

Table Cells

Specify the data in the cell

align the data ALIGN="XXX" inside <TD>

left, right or center

align vertically VALIGN="XXX" inside <TD>

top, bottom or middle

Creating Frames

Frames divide a single browser window into multiple windows

Sub-windows then can view different pages

Two types of web documents

Body documents--display in a single window

Frameset documents--divided window with URLs referencing to the document the browser is to display in the windows

Creating Frames

Replace the <BODY> tag with

<FRAMESET>…</FRAMESET>

You must now include tags that indicate the number of frames to be viewed on the page

Once this is done use the

<FRAME SRC="filename"> to tell the browser what to show in the window

Creating Frames

Split the window vertically

Change the <BODY> to <FRAMESET COLS="25%,50%,25%">

On the next line indicate the files to be viewed in each frame

<FRAME SRC="filename">

<FRAME SRC="filename">

<FRAME SRC="filename">

The web page will have three vertical windows with each of the referenced files on view

Creating Frames

Splitting Horizontally

Change in the FRAME SRC command the COLS to ROWS

<FRAME SRC ROWS="25%,50%,25%">

This creates specified percentage frames for the window of any browser

Creating Frames

Elastic frames

Enlarges or gets smaller depending on how much room is left in the window

<FRAME SRC="25%,50%,*">

This creates a window of 25% one of 50% and the last whatever is left over

It is a good idea to always create one elastic window to account for different screen sizes

Good Luck

Web pages can be frustrating and exciting all at the same time

HTML is easy once you understand the structure

HTML editors will create your pages BUT for the exciting page or to solve problems, you need to understand the code

Where to hang your website

Free servers that are willing to host

http://www.freewebsites.net

Select your host based on your needs

Program used to create site

Method of upload to site

Size of website

 
This page was updated on:  04/10/02