Hands On Practice 4.3 Exercise

Click Here to View Exercise


In this exercise I learned about
graphics. There are 3 formats in
which to display graphics on the web.
They are .gif, .jpg or .jpeg, and .png

stands for Graphic Interchange
Format. They are used primarily for
animation and transparency
purposes. The disadvantage about
GIFs is the fact that they have a
limited amount of colors. Typically if
you are looking to display an image
that has detailed colors you will want
to use a jpeg.

JPGs or JPEGs, also known as Joint
Photographic experts Group have
extremely detailed color. The
disadvantages are they cannot be
animated and they do not have
transparency capabilities.

PNG stands for Portable Network Graphic. PNG is pronounced "ping". They are somewhat new to the web world. According to the book they might replace the GIF format one day. The PNG combines the best of both worlds. They have the capacity of holding huge amounts of colors information to display on the web. They also have the power to produce transparency. I am not sure if a PNG can be animated. I am pretty sure that the only format for animation is the GIF format as of right now.

Chapter 4

Visual Elements and Graphics

Hands On Practice 4.3 P.135

For this exercise all I did was replace the wording "Trillium Media Design" in the h1 tag with the trillium banner image. The book suggests adding a hyperlink to the image. I chose to link it to the main home page as I see that as a common practice among web developers and designers. To help you see what I have added or replaced I have highlighted the code in red for you to see.

The original code looked like the code below.

<h1>&nbsp;Trillium Media Design</h1>

Then I replaced it by using the following code below.

<h1><img src="trilliumbanner.jpg" alt="Trillium Media Design" width="700" height="86" /></h1>

According to the book by default a blue border around an image will be presented if no border is specified. It suggests to eliminate this border by placing a border comment in your image tag.

<h1><img src="trilliumbanner.jpg" alt="Trillium Media Design" border="0" width="700" height="86" /></h1>

Then I placed a hyperlink to my image by adding the following code below.

<h1><a href="index.html"><img src="trilliumbanner.jpg" alt="Trillium Media Design" border="0" width="700" height="86" /></a></h1>

I also added padding to the h2 tag.

padding-left: 10px;