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

 

HTML Basics
Part 2

Links, Graphics, Frames

Practice

Code a page

Include the following

Background color, Text color

Headline followed by a horizontal rule

Paragraph in the body that is indented at both margins and justified

Change the font face, size and color and type more information

Add a list

Browser Save Colors

White

Silver

Red

Maroon

Yellow

Olive

Green

Blue

Purple

Fuchsia

Lime

Gray

Navy

Teal

Aqua

Black

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)

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

Labeling

To get the box that appears when the mouse moves over the graphic

Command is an attribute of the img src command alt

Example

<img src="cat.jpg" alt="My pet">

Image as Link

Use same link command

Insert image command in place of the area where you would place the text you wanted to be active

Example

<a href="http://members.tripod.com/cynthiasparks"><img src="laptop.gif" alt="Sparks Fly"></a>

Text and Graphics

Alignment divisions tag

To justify left or right use the <div align="center/left/right">

Place before the image tag and the </div> to close it

To wrap text around the image use the <align="bottom/top/middle/absmiddle">

Example <img src="cat.gif" alt="My Pet" border=0 align="top">

Trouble with Graphics

Check the filename

The file and the html file are not in the same directory

Check in Windows

Sometimes Windows adds an extension to a file without telling you

You think the file is cat.gif because that is what you named it

Windows may have added another suffix so that the file is actually named cat.gif.gif

Exercise

Graphics

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

Insert it and add the alt text

Place text around a series of graphics using all the options

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

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 FRAMESET command the COLS to ROWS

<FRAMESET 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

Invisible Scrollbars on Frames

Attributes of the "frame scr" tag

Remove scrollbars

"scrolling-no"

Remove borders

"frameborder=0"

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

Exercise

Create a framed document

Place your opening activity in one frame and the class practice activity in another frame

Make the scrollbars disappear and the borders so that the frame has a seamless appearance

Web Page Elements

Title bar

Defines the web site

Appears in the bookmarks

First words that appear in a browser

Menu bar

Navigation for site

Can be icons (pictures) or words or both

Web Page Elements

Location

Specifies the web address (appears in the location bar

You can determine this

Check with your ISP host

Should be easy to remember

Navigation

Two schools of thought about navigation within websites

Long, scrolled page(s)

Shorter, linked pages

Frames

Divided page with one commonly a navigation bar

Site Links

Often at the bottom of the page

Usually refer to internal links but can include external links also

Content

Title graphic/logo

Unique image that ties the site together

Appears on all pages of the site

Body copy

The meat of the site

The information that is what the site is all about

Website documentation

Reference to the author/webmaster

Should be clearly stated

Should include credentials

Sponsoring institution

Commercial or organizational affiliation

Date of last update

Can also include date created

Count of the number of times site is accessed

URL of the site itself

Contacting information

Either of the author, webmaster

Usually an e-mail link

Effective Writing for Web Pages

Writing for the web is different from print writing

Computer screen makes reading difficult

Average speed off computer screen is 25% of that from print

Small type difficult to read

Attention is hard to get and retain from web surfers

Bottom Down Approach

Surfers want to know immediately if the page is relevant to them

Conclusion or summary is usually placed at the top

Bottom Down or place the purpose main point first

Seems weird but…millions of pages in competition

Have to show surfer why he/she wants to stay and read your site

Bad Sites—Viewers Move On

"Moby Dick"

Word heavy

Text, text, text

"Pictures"

Extensive graphics slow the load speed

Blinking and bouncing graphics

Banners—java scripts

Rules for Writing Effectively

Topic, its main idea, and its conclusion

Immediately visible

Easily located

Knowable

Ideas rule structure

Main ideas at the "top" of screen

Supporting and secondary info below

Structure of the content and the website

Readily recognizable to visitor

Simple construction best

Limit one idea to a group of words

Avoid technical terminology

Unless you provide definition

Avoid lingo

Data, detail, complexity

Subsequent pages

Logical placement

Don’t cover too much on any one page

Subsequent page(s)

Apparent by link

Consistent with predecessors

Detailed information

Available through links for printing

Placed in a logical form for printing

Edit out the superfluous

No matter how clever

Detracts from message

Spell check

Don’t depend totally on this

Have independent proofreading

Always focus on the message

Invite feedback

mailto for comments, suggestions, questions

Ignore idiotic responses (don’t respond to them)

Formatting

Each page consistent

Use a table to create margins

Leave white space

Use of graphics

Reinforce text

Elaborate on text

Highlight text

Replace text

NOT be meaningless and distracting

But you thought it was cute!

 
This page was updated on:  04/10/02