Transcript htmllesson3
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
Text appears here
<IMG SRC=“ED.GIF” ALIGN=CENTER>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>
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>
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>
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}
Self Check - HTML Lesson 3
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
1. See Me
1. See Me
2. GO AWAY!
2. GO AWAY!
2. GO AWAY!
Self Check - HTML Lesson 3
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
1. See Me
1. See Me
2. GO AWAY!
2. GO AWAY!
2. GO AWAY!
Self Check - HTML Lesson 3
Which is the correct text placement if this
tag is used? <IMG SRC=“SOS.GIF”
ALIGN=TOP>SINK!
SINK!
SINK!
SINK!
Self Check - HTML Lesson 3
Which is the correct text placement if this
tag is used? <IMG SRC=“SOS.GIF”
ALIGN=TOP>SINK!
SINK!
SINK!
SINK!
Self Check - HTML Lesson 3
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.
Self Check - HTML Lesson 3
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.
Self Check - HTML Lesson 3
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).
Self Check - HTML Lesson 3
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).
Self Check - HTML Lesson 3
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>
Self Check - HTML Lesson 3
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.