|
|
Note the graphics are identified
in HTML tags using the image tag.
The examples shown here are the "Yahoo!" search engine home page
and the "Discovery Channel School" page.
The graphic at the top of the "Yahoo" Web page includes the "Yahoo!"
logo surrounded by buttons that can be clicked to access "new",
"cool", "headlines", and "Yahoo info".
|
|
Click on the "Yahoo" link
to see an example of the "Yahoo" page and HTML.
Click on the "Discovery" link to see an example of the "Discovery"
Web page and HTML.
Yahoo
Search Engine
Discovery Channel School
|
| |
Top
of Page
|
|
Downloading & Drawing
Graphics are available for downloading from the
Internet. If you wish, you may draw graphics using graphics software.
(Most computer systems come with graphics software, "Paintbrush",
for example.
|
|
Click on the "Download" link to see examples of buttons and pictures
that may be downloaded from the Internet.
Click on the "Draw" button to learn how to create your own graphics
using the "Paintbrush" program. This program lets you create your
own graphics, which may, then, be included in your Web page.
Download Graphics
from the Internet
Draw your own
graphics
|
| |
Top
of Page
|
|
|
Color on a Web Page
Color on a Web Page can be specified
using color names (red, green, blue) or color codes (#FF0000, #00FF00,
#0000FF). |
Color |
Click on the Color link to learn how to incorporated
color in fonts and backgrounds.
Color on a Web Page
|
Top
of Page
|
| |
IMG Tag
|
<IMG
SRC=". . ."
ALT=". . ."
HEIGHT=".
. ." WIDTH=". . ."
BORDER=". . .">
- <IMG
SRC="note.gif">
results in
- <IMG
SRC="note.gif"
ALT="This
is an icon for email"
> results
in
- <IMG
SRC="smiley.gif">
results in image using actual size
- <IMG
SRC="smiley.gif"
HEIGHT="28"
WIDTH="28" >
results in larger image
- <IMG
SRC="lightbulb.gif"
HEIGHT="70"
WIDTH="70" BORDER="5">
results in
|
| |
Top
of Page
|
| |
Link with Images |
<A
HREF="..."><IMG
SRC="name of picture
to click on"></A>
- <A HREF="http://www.yahoo.com"><IMG
SRC="note.gif"
ALT="YAHOO!"
></A>
results in
Note1
- <A HREF="http://www.techtrainteam.com/courses/classes.html"><IMG
SRC="question.gif">
</A> results
in
- <A HREF="mailto:techtrain@techtrainteam.com"
ALT="This
is an icon for email"
><IMG
SRC="note.gif"
></A>
results in
Note2
Note1:
In this example, ALT is in the IMG Tag.
Note2:
In this example, ALT is in the Anchor Tag.
|
| |
Link
Example |
The
HTML code shown below includes several anchor tags for hyperlinks.
- Open Notepad
To open Notepad, click on Start | Programs | Accessories | Notepad
- Type the following HTML instructions
in the Notepad program.
<HTML>
<HEAD>
<TITLE>My Second Web Page</TITLE>
</HEAD>
<BODY>
<H1> Linking with Images</H1>
<H3>Using the Anchor Tag with an image</H3>
Click on image or link to go to
<A HREF="http://www.yahoo.com">YAHOO!</A>
Yahoo is an Internet Search Engine.
<BR>
<A HREF="http://www.yahoo.com">
<IMG SRC="yahooGraphic.gif" BORDER="0" ALT="Click
here to YAHOO!">
</A>
<BR>
Click on image or link to go to
<A HREF="http://www.microsoft.com/">Microsoft.</A>
<BR>
<A HREF="http://www.microsoft.com/">
<IMG SRC="microsoft.gif" BORDER="0" ALT="Click here
for Microsoft">
</A>
<BR>
</BODY>
</HTML>
- Save your Notepad file.
- Open your Web page in a browser.
- Then, click on "Link
Example" to see if your Web page looks like the example.
.
|
| |
Top of Page
|
