Mister Hungerford's Web Page
MESA
Web Page Design Competition
Lesson #5
MESA
Web Page Creation Activity #5
(Graphics)
The
purpose of this activity is to continue your introduction of a few simple
commands of Hyper Text Markup Language (HTML). You will experiment with web page creation using a simple
text word processor and HTML coding.
During
previous activities we have learned the basic HTML document format.
<html>
<head>
<title> The name of your page.
</title>
</head>
<body> All the stuff in your page goes here.
</body>
</html>
Ø
The
HTML tag defines the document as a web page. All other tags are nested within it.
Ø
The
head contains information not displayed as part of the web page.
Ø
The
body contains the displayed portion of the page.
Now lets spend some more time looking at GRAPHICS:
Graphics are definitely one of the most
important elements in a web page.
That was dramatically demonstrated with the sharp increase in Internet
usage after graphics capability was added. The process of placing graphics (also called
"images") in a Web Page is straightforward and simple. There are plenty of variations with "little"
details about images, but for the MESA Day Web Design Contest purposes only the
basics will be covered.
The image tag <IMG> is a simple tag used to put the graphic image directly
into the Web Page. This process is
called "Inline Graphics," and it used the SRC attribute to specify
the name and location of the image file.
For example:
<IMG
SRC="imagename.gif">
File Formats:
For Web Pages,
the two file formats that are typically used are GIF or JPG. The GIF format was developed to create the
smallest possible image file for uploading and downloading, resulting in a
highly compressed format that minimizes file transfer time over phone lines. JPG compression economizes on the way
data is stored by identifying and discarding extra data. For JPG, once an image has been
compressed and then decompressed, it will not be exactly identical to the original
image although the difference is usually indistinguishable.
Organizing
Image Files:
Organizing
images can be a challenge, especially if you are simultaneously trying to
conserve disk space. On a small
site, it is usually fairly simple to keep your images and Web Page files in the
same directory. That way you can
simply call the graphic file by name in the SRC attribute. However, on larger sites this is not so
easy. There may be numerous Web
Page files as well as image files, and it could get messy in one folder. One consideration is to create a
separate folder specifically for images or graphics.
Aligning Text
With Graphics:
There are
several ways to align text next to a graphic image. Here are some examples of attributes:
Ø ALIGN="TOP" lines the top of the image with the top of the
line, whether that happens to be the text or another image.
SYNTAX:
<IMG SRC="image.gif" ALIGN="TOP">
Ø ALIGN="TEXTTOP" lines the top of the image with the top of the
text.
SYNTAX:
<IMG SRC="image.gif" ALIGN="TEXTTOP">
Ø ALIGN="BOTTOM" lines the bottom of the image with the bottom of the
line, whether that happens to be the text or another image.
SYNTAX:
<IMG SRC="image.gif" ALIGN="BOTTOM">
Ø ALIGN="ABSBOTTOM" lines the bottom of the image with the bottom of the
text.
SYNTAX:
<IMG SRC="image.gif" ALIGN="ABSBOTTOM">
Ø ALIGN="MIDDLE" lines the center of the image with the middle of
the line.
SYNTAX:
<IMG SRC="image.gif" ALIGN="MIDDLE">
Ø ALIGN="ABSMIDDLE" lines the center of the image with the middle of the
largest item in the line, whether that happens to be the next text or another
image.
SYNTAX:
<IMG SRC="image.gif" ALIGN="ABSMIDDLE">
Wrapping Text
Around Graphics:
If there are multiple lines of text to wrap
next to a graphic in a Web Page, there are two other attributes that can help:
Ø ALIGN="LEFT" puts the image to the left of the margin (i.e. the
text is on the right of the graphic.
SYNTAX:
<IMG SRC="image.gif" ALIGN="LEFT">
Ø ALIGN="RIGHT" puts the image to the right of the margin.
SYNTAX:
<IMG SRC="image.gif" ALIGN="RIGHT">
The
"ALT" Attribute:
Another important consideration is "what
if your graphic doesn't load for some reason?" It may be that the user's browser is configured to suppress
graphics or the "browser" may be a text reader and speech synthesizer
for the blind or maybe the graphic file was accidentally deleted, moved or
corrupted. One solution is to
actually have a text description of the link by adding the "alt"
attribute. It is important to make
all graphics "accessible" by adding the ALT=" . . ."
attribute to all image tags but it is even more critical to do this when it is
a link. When you place your mouse
pointer over the graphic, a text description of the graphic appears. For instance:
<IMG
SRC="imagename.gif" ALIGN="TOP" ALT="image
name">
For
more information on HTML check the following sites:
Digital's
HTML Starter Page
http://thuban.ac.hmc.edu/www_common/ips/HTML_PRECONFIGURED/HOW2HTML.HTM#BASIC_PAGE
How
a Web Page Works (excellent site)
http://www.howstuffworks.com/web-page.htm
Tutorial
to basic HTML
http://www.cwru.edu/help/introHTML/toc.html
HTML
Made Really Easy (HTML Tutorial)
http://www.jmarshall.com/easy/html
BareBones
Guide to HTML