Graphics on a Web Page using HTML

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


Downloading & DrawingGraphics 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 InternetDraw your own graphics
Top of Page
Color on a Web PageColor on a Web Page can be specified using color names (red, green, blue) or color codes (#FF0000, #00FF00, #0000FF).
ColorClick on the Color link to learn how to incorporated color in fonts and backgrounds.Color on a Web PageTop of Page

IMG Tag<IMGSRC=”. . .” ALT=”. . .”HEIGHT=”. . .” WIDTH=”. . .”BORDER=”. . .”<IMGSRC=”note.gif”results in
<IMGSRC=”note.gif”ALT=”This is an icon for email”results in
<IMGSRC=”smiley.gif”results in image using actual size
<IMGSRC=”smiley.gif”HEIGHT=”28″ WIDTH=”28″results in larger image
<IMGSRC=”lightbulb.gif”HEIGHT=”70″ WIDTH=”70″BORDER=”5″results in
 Top of Page

Link with Images<AHREF=”…”<IMGSRC=”name of picture to click on”></A><AHREF=”http://www.yahoo.com”<IMGSRC=”note.gif”ALT=”YAHOO!”</A>results in
Note1<AHREF=”/courses/classes.html”<IMGSRC=”question.gif”</A>results in
<AHREF=”mailto:techtrain@techtrainteam.com”ALT=”This is an icon for email”<IMGSRC=”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 ExampleThe 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. .