<Home> | <HTML Tutorials> | <CSS Tutorials> | <Color Charts> | <Practice Area>

Basic Exercises
· Introduction
· ex. 1 - Make a page
· ex. 2 - Head & Body
· ex. 3 - Attributes
· ex. 4 - Text
· ex. 5 - Colors
· ex. 6 - Hyperlinks
· ex. 7 - Anchors
· ex. 8 - Graphics



Join our mailing list to receive tips and tricks.
Name:

E-Mail:


  
HTML TUTORIALS: Ex. 8 - Graphics

EXERCISE 8: ADDING GRAPHICS:

You've mastered text and links, yet web pages can display so much more. A picture is worth a thousand paragraph tags, I always say. I'd like to show you how you can add them to your pages. From this point on, I want you to be aware that people sometimes refer to pictures on the internet as graphics, logos, and icons. Get used to the lingo. All of them refer to pictures.

SECTION A: TYPES OF GRAPHICS YOU CAN USE ON WEB PAGES:
The 3 most commonly used graphic formats are:

  1. .gif - This stands for Graphic Interchange Format, but who really cares. None of my bosses ever denied me a raise because I didn't know graphic acronyms!!! Just know that this format is small in file size and is used for simple graphics like company logos, and navigation buttons, and normally not for photo quality images. I use this format most frequently.

  2. .jpg or .jpeg - This stands for Joint Photographic Expert Group - the company that created it. Jpg's are used most often for photo quality images that you see on web pages like photos of products or people.

  3. .png - This stands for Portable Network Graphics. This format is not fully supported by all browsers, but it will be eventually, because .png images offer the best of what .gif and .jpg files have to offer.
For our exercise, I will be using .jpg's and .gif's only.


SECTION B: USING THE GRAPHIC TAG:
When you use images in web pages, realize that the graphics don't become a part of the html file. You are simply telling the HTML file where to get the images from. In other words, you are just linking to the graphics. That is how they show up on the page.

So, to make your life easier, you should place your images in the same place as your web pages so that you can concentrate on graphics and not be bothered by the linking aspect.

Here is the image tag:
<img src="imagename.gif">

What does it mean? It is explained below:
  1. img - stands for image. This lets the browser know that you will be placing an image.
  2. src - stands for source. In other words, where is the graphic located.
  3. imagename.gif - This is the actual name of the graphic that you will use. The .gif is what we call the graphic extension or format of the graphic.
I created the graphic below and placed the graphic in the same place as this exercise. I named it "myfirstimage.gif". The image tag for my graphic is <img src="myfirstimage.gif" border="0" width="52" height="43">. Don't worry! For now, all you need to worry about is the src attribute. You are not required to give a width or height or a border value.


As you can see, adding images to a page can liven it up greatly.


SECTION C: HOW YOU GET GRAPHICS:
There are a number of ways that you can get graphics. They are:
  1. Create your own using a graphics program like Adobe Photoshop. (we'll go over this later)
  2. Purchase clipart CD's at stores such as Best Buy.
  3. Download them from websites.
For our exercises, I will be providing you with all the graphics that you need. However, I'd like to show you how you can "grab" graphics from web pages to use on your web pages. NOTE: taking peoples graphic can get you in some hot water so be careful what you use and how you use it. For personal sites and practice, I don't think anybody would mind.

To copy graphics from web pages, you do the following:
  1. Move your mouse over an image.
  2. click with your right mouse button.
  3. You will see a list of options pop up on your screen. Choose "save pictue as" or "save image as" depending on what browser you have.
  4. Choose a location on your computer to save the file into, and click save.
Voila! Try it out with the graphic above that I created. I don't care where you save it to. It's not important for our exercise.


SECTION D: USING GRAPHICS AS LINKS:
We already know that to make a text link, we use the following format:
<a href="somepage.html">text</a>
The text is what you click on to go to another page. Well, we can put an image tag inside of the A tags and the image will act as a link as well. The format would be:
<a href="somepage.html"><img src="someimage.gif"></a>

<!---JUST COPY THE CODING BELOW (EDIT/COPY) SINCE ITS SO LONG. STUDY THE CODING FIRST THOUGH--->

<html>
<head>
<title> Graphics </title>
</head>
<body background="ex8_background.gif">
This page has a background image that repeats until the page is filled.
<br><br>
Here is another image.
<br><br>
<img src="myfirstimage.gif" border="0">
This is my first image.<br>
This is my first image.<br>
This is my first image.<br>
This is my first image.<br><br>
<a href="html_exercise8links.html"><img src="myfirstimage.gif" border="1"></a> This image is a link, click on it.<br>
</body>
</html>



(After you submit, close the window that will pop up, and read below)


ADDITIONAL ASSIGNMENT:
I'd like for you to do the following steps:
  1. add an "align="left" attribute inside of the image tag as see what happens. Ex. <img src="myfirstimage.gif" align="left">.

  2. Now align the image to the right.

  3. Now try to center the image.Note: the img tag doesnt allow you to align center, so you will have to surround the image tag with <center></center>.
You can see that graphics can interact with text in various ways. Look at your list of tags to see all the ways that you could align graphics with respect to text. Most you will never use. As you get better with HTML, you will most likely use a concept called "tables" to align your images and text.


!!!!!REQUIRED ASSIGNMENT!!!!!:
I want to provide you with the steps to create a web page using a text editor instead of this online tutorial. Why? Because, eventually you will need to know how to use an editor program so that you can save, share, and post your files. I am going to provide you with the necessary steps to create the same blank HTML page that we did in exercise 1 using an editor. Click on the following link, print out the instructions, close the instructions window, and do the tutorial either now or later down the road when you feel up to it. Get the Text Editor Instructions Now


END OF EX. 8 - GRAPHICS

DONE WITH THE BASICS! CONGRATULATIONS!

<-- Back to Exercise 7: Anchor Hyperlinks



Home | HTML Tutorials | Color Charts | Practice Area
Copyright 2003 FromThePen.com All Rights Reserved