At the end of this assignment you should be able to...
The command to insert a graphic is
command is one of the exceptions that you donot need an ending command because you are not affecting the information. You are simply telling the browser to place an imageinto a specific place on the page.
There is one
attribute you must include in the image command. That is the
attribute tells the
command where the image is located so that it can retrieve it for the user. You follow the
attribute with an
sign and then the location contained in quotes (remember the
command?). One of the greatest flexibilities of webpages and internet is the ability for information to reside in multiple locations (computers) andstill be shown on one webpage. So you could have your text information encoded into your webpage and yet tell your webpage to displaya graphic that is located on a computer in Japan.
Now for the code. In the following image, I am going to have this webpage (assignment 5) display a picture of a logo on a herbal webpage. This imageis actually sitting on the
computer and I am just telling my webpage to use it. Here goes:
There are two types of image formats you can use in your webpage. They are the
) and the
images are usually used for images dealing witha lot of detail like pictures or where you need the pictures colors to blend. The
format is usedfor smaller file size (downloads to your computer faster) and for moving pictures (i.e.
). The drawback to
's is that you can not have a moving pictures and the drawback to
's is that the colors willnot blend together as well.
You should learn the concept of
when referring to images (as well as links). Most people do notspend the effort to understand how the
(image command) and
(link command) attributes understandthe location of what you are asking for. As a result there are numerous webpages that have images that don't display andlinks that give error messages when clicked on.
Lesson on locations
|When referring to an image or creating a link you need to take into account where your current webpage resides andwhere you are referring to. Remember in the previous assignment I told you that if you are linking to a webpage thatresides in the same location as your current webpage that you can just type the name of the webpage without the fullinternet address? The same holds true for images. Here is a table that should help you in determing how to type your
Location of current webpage vs. image/linked-page
Both in same location
You can just type the name of the image or page.
On same computer (site) but different directory
On different computers (sites)
Why not use the full internet address each time?
You could just type the full internet address each timeand not have to learn about locations. But, you will not only cause more typing on your end but you will end up withheadaches if locations change (which they do often). For instance, if you have a webpage with a graphic called
that resides in the same location as your webpage and your webpage sites on a server (computer/site) called
. If the company who owns the server decides to change the name of their site to
, any links/images thatyou typed the full internet address (pointing to the old name) will not work.
On the other hand, if you had typed links with just the name (understanding locations) because the picture is in the same location as your webpage, when the site changed itsname, your code would still work.
Time for you to place an image in your
. I have a table of images listed below that you can usefor now. You may not find an animal that comes close to your animals but use one of them just for this exercise.
You will notice that on the first listing I show the address in
. Any one of them will work but you should understand (from locations above) why each one is different and why they work. Here is a brief explanation of why each one works:
, has the full internet address. Should not be used unless you have to since your webpage may be moved later.
, since webpage and graphic reside on the same site (computer), I can start the address with a
andput the directory where the graphic is located.
I called just place a
(period, which means start looking in the current webpages directory) and then the name of the directory where the picture resides.
Go to your
and put one of the following pictures intoyour webpage right above the ad for the animal.
To View My Updated
Tables, tables, whos got the tables? (smile)
Seriously though, tables are one of the best tools in the HTML language. By harnessing the power of tablesyou can organized your page into any imaginable arrangement. Or you can ignore tables and leave your pageis an always vertical organization like many HTML designers do.
The reason some designers don't tackle tables is that it takes three commands (6 if you include ending commands)to get a basic table and you must have the three commands in the right order. Scared? You shouldn't be! Why?Because you're going to be a GREAT designer...remember?
Okay, now the concept. A table consists of the following three commands:
. Remember how to create a webpage? You first had to placea
command to start the page and to end the page you placed a
The same holds true for
. You start a table with a
command and when you aredone creating a table you place a
. Easy so far? Now for the second command, the
command tells the
to start a
. And guess what? The
tells the table to
end the row
. (Heh, you've learned 2 out of the three parts!)
The last command is the
command. This tells a
that you want a
. And to endthe cell? Use the
. Now that you understand the three commands, let's discuss the rules in using them:
Why use tables?
Tables allow you to place information anywhere on the screen and around other informationthat you normally cannot accomplish with
, and other formatting commands.
One more concept before we do the code. An attribute you can use in the
command is called
. By using
you can tell the table to put lines around the cells (like the image table above)and how thick the lines should be, or tell the table not to have lines (invisible). Here are three examples of using the
(border with a line size of 1)
(border with a line size of 3)
If you just put
, the browser will
toa border size of
In the following I will demonstrate how to use tables in various scenarios:
Now it is time to use tables to make your
lookmore professional. Go to your
and use a table to organize the pictures of your animal with the ad aboutit. I want a table where the picture is in a cell (column one) and the ad is in a cell to the right of the picture (column two).
To view MY Updated
We will cover more about tables soon.