html lesson 3 tbe 540 farah fisher. prerequisites use a search engine to locate information....

HTML Lesson 3

TBE 540

Farah Fisher

Prerequisites Use a search engine to locate information. Download graphics from the web. Define GIF, JPG and "animated GIF". Use simple graphics tools to create/manipulate

graphics. Control the size and placement of graphics. Demonstrate appropriate use of the following

HTML tag categories: required tags, images, lists, colors, text sizes, lines

Objectives Create linked web pages. Use a list (text) of links. Use graphics as background and links. Place text next to images in at least two

alignments. Use a graphic as an alternate to <HR>. Locate and use web page evaluation rubrics.

More about Links Virtually every web page has links…it’s

the basic idea of the web and HTML (HyperText refers to links).

Link tags look like this:<A HREF=“address”>what to click on</A>

The address can be a file name (like home.htm) or a web address (like http://www.csudh.edu/fisher/)

More about Links The “what to click on” is quite often text. Whatever is placed between the <A> tags is

displayed on the screen and usually underlined (though you can change it in your browser settings).

You can also place an < IMG> tag between the <A> tags, making the image into a link.

A handout on links is available at http://www.csudh.edu/fisher/tbe540/HHO3.htm

More about Links The example below shows an image called

TOY.JPG as a link to a page called TOYSTORY.HTM :<A HREF=“TOYSTORY.HTM”><IMG SRC=“TOY.JPG”></A>

The <IMG> tag may also contain HEIGHT, WIDTH, and BORDER information.

This way, however, the user will not know that the image is a link. See the next slide for a better idea.

More about Links In the example below, both the image TOY.JPG

and the words “GO TO TOY STORY” are part of the link to TOYSTORY.HTM.<A HREF=“TOYSTORY.HTM”>GO TO TOY STORY<IMG SRC=“TOY.JPG”></A>

The words in the link can come before or after the <IMG> tag. Placement of text next to images will be discussed later in this lesson.

More about Links Sometimes it is convenient to have a list of

links. See the example below:<UL><LI><A HREF=“http://www.csudh.edu/”>CSUDH

</A></LI><LI><A HREF=“http://www.csudh.edu/coe/>” College

of Education </A></LI><LI><A HREF=“http://www.csudh.edu/fisher”> Dr.

Fisher’s Classes</A></LI></UL>

More about Graphics

When placing text next to graphics, you may be surprised by the placement of the text.

If you put in no “alignment” information, the text will appear at the bottom of the graphic:

Text appears here

More about Graphics

Using ALIGN=TOP or ALIGN=CENTER may be more useful.<IMG SRC=“ED.GIF” ALIGN=TOP>Text

appears here

<IMG SRC=“ED.GIF” ALIGN=CENTER>Text appears here

Text appears here

Text appears here

More about Graphics

Graphics can be used a web page backgrounds.

The tag <BODY BACKGROUND=“image name”> is used.

A graphic used in the background of a page should be lightened so that it does not interfere with the information on the page.

More about Graphics

When an image is smaller than the web page, it is “tiled” (repeated) to fill up all the space.

A single graphic like this:

would look like this as a background:

More about Graphics

To lighten a graphic, you will need a program like PhotoShop or Word (or a freeware or shareware program).

If you bring down the contrast and raise the brightness, the graphic will appear “washed out” - just right for a background.

An example:

More about Graphics Another use for graphics is as a replacement

for <HR>. You can search for web graphic lines

(“dividers”) at websites like http://www.nzwwa.com/mirror/clipart/graphics/dividers/dividers1/index.html (part of Clip Art Universe)

Use a regular <IMG> tag to display the graphic line. You might want to adjust the width (<IMG SRC=“file” WIDTH=100%>)

Self Check - HTML Lesson 3

Which of the following creates a link to HOME.HTM by clicking GO HOME? <A HREF=“GO HOME”>HOME.HTM</A> <A HREF=“HOME.HTM”>GO HOME</A> <IMG HREF=“HOME.HTM”>GO HOME</A> <IMG HREF=“GO HOME”>HOME.HTM</A>


Which of the following allows the user to click on GO HOME or a graphic (home.jpg) to go to HOME.HTM? <A HREF=“HOME.HTM><IMG

SRC=“home.jpg”>GO HOME</A> <A HREF=“HOME.HTM>GO HOME<IMG

SRC=“home.jpg”></A> <A HREF=“HOME.HTM><IMG

SRC=“home.jpg”></A>

Self Check - HTML Lesson 3 Which of the following allows the user

to click on GO HOME or a graphic (home.jpg) to go to HOME.HTM? <A HREF=“HOME.HTM><IMG

SRC=“home.jpg”>GO HOME</A> <A HREF=“HOME.HTM>GO HOME<IMG

SRC=“home.jpg”></A> <A HREF=“HOME.HTM><IMG

SRC=“home.jpg”></A>{Either graphics first or words first}


Which of the lists below will results from these tags?<OL>

<LI><A HREF=“MINE.HTM”>See Me</A></LI>

<LI>GO AWAY!</LI>

</OL>

1. See Me

2. GO AWAY!

1. See Me

2. GO AWAY!

1. See Me

2. GO AWAY!


Which is the correct text placement if this tag is used? <IMG SRC=“SOS.GIF” ALIGN=TOP>SINK!

SINK!SINK!

SINK!


To use a graphic (back1.gif) as a page background, use… <BODY BACKGROUND=“back1.gif”> <BODY><IMG SRC=“back1.gif”></BODY> <BODY BGCOLOR=“back1.gif”> You cannot use a graphic as a background.


If a background graphic is smaller than the page display… The image is displayed larger to fill the

window. The image is centered on the page window. The image is tiled (repeated).


To use an image (lineup.gif) as a line, use the following tag(s)… <HR><IMG SRC=“lineup.gif”></HR> <IMG SRC=“lineup.gif”> <HR SRC=lineup.gif”> <HR>lineup.gif</HR>

Evaluation Rubrics One of the requirements for the HTML project is

that you use a rubric to evaluate your own website when it is complete.

Looking at rubrics now will alert you to what is important in web design.

Check out the Web Evaluation Links on the class web site (HTML pages).

NOTE: The CyberBee forms are very nice.

Activities

Complete the web page activity found at http://www.csudh.edu/fisher/tbe540/HEX3.htm

This activity includes the development of several linked pages, much like your final project will be.

html lesson 3 tbe 540 farah fisher. prerequisites use a search engine to locate information....

Documents

graphics graphics

placement of graphics

list text of links

createmanipulate graphics

placement of text

place text

text sizes

list of links