The command to insert a graphic is
<img>
. The
<img>
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
mandatory
attribute you must include in the image command. That is the
src
attribute. The
src
attribute tells the
<img>
command where the image is located so that it can retrieve it for the user. You follow the
src
attribute with an
=
sign and then the location contained in quotes (remember the
link
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 an art (mine) webpage. This imageis actually sitting on the
https://timeforyourmind.com
computer and I am just telling my webpage to use it. Here goes:
Code Used:
<img src="https://timeforyourmind.com/homepageButtons9.jpg">
There are two types of image formats you can use in your webpage. They are the
.jpg
(sometimesending in
.jpeg
) and the
.gif
. The
jpg
images are usually used for images dealing witha lot of detail like pictures or where you need the pictures colors to blend. The
gif
format is usedfor smaller file size (downloads to your computer faster) and for moving pictures (i.e.
). The drawback to
jpg
's is that you can not have a moving pictures and the drawback to
gif
's is that the colors willnot blend together as well.
You should learn the concept of
location
when referring to images (as well as links). Most people do notspend the effort to understand how the
src
(image command) and
href
(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
src
and
href
attributes:
|
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
 Live Example
|
<a href="/htmlguide/assign.htm">
Assignments
</a>
|
|
On different computers (sites)
|
Live Example
|
<a href="http://goldborder.com/htmlguide/assign.htm">
Assignments
</a>
|
|
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
dog.gif
that resides in the same location as your webpage and your webpage sites on a server (computer/site) called
http://www.animals.com
. If the company who owns the server decides to change the name of their site to
http://www.greatanimals.com
, 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
page two
. 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
long
,
shorter
. 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:
Long
, has the full internet address. Should not be used unless you have to since your webpage may be moved later.
Shorter
, 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.
pics
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
page two
and put one of the following pictures intoyour webpage right above the ad for the animal.
-
Click Here
To View My Updated
Page Two
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:
<table>
,
<tr>
and
<td>
. Remember how to create a webpage? You first had to placea
<html>
command to start the page and to end the page you placed a
</html>
.
The same holds true for
tables
. You start a table with a
<table>
command and when you aredone creating a table you place a
</table>
. Easy so far? Now for the second command, the
<tr>
.The
<tr>
command tells the
table
to start a
new row
. And guess what? The
</tr>
tells the table to
end the row
. (Heh, you've learned 2 out of the three parts!)
The last command is the
<td>
command. This tells a
row
that you want a
cell
. And to endthe cell? Use the
</td>
. 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
<br>
,
<p>
, and other formatting commands.
One more concept before we do the code. An attribute you can use in the
<table>
command is called
border
. By using
border
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
attribute:
<table border=0>
(no border)
<table border="1">
(border with a line size of 1)
<table border="3">
(border with a line size of 3)
NOTE:
If you just put
<table>
, the browser will
default
toa border size of
1
(one).
In the following I will demonstrate how to use tables in various scenarios:
Now it is time to use tables to make your
page two
lookmore professional. Go to your
page two
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).
-
Click Here
To view MY Updated
Page Two
We will cover more about tables soon.
