Navigate this site
Back to 5 | Browse
Index 
| Next:
On to Step 7
| <HTML> |
|
|
| |
<HEAD> |
|
| |
|
<TITLE>Vance's
web page</TITLE> |
| |
</HEAD> |
|
| |
<BODY> |
|
| |
|
|
| |
|
|
| |
|
<P>Hi, my name is Vance.<BR> |
| |
|
<I>I'm a teacher.</I></P> |
| |
|
<P><IMG
SRC="vance.gif"></P> |
| |
</BODY> |
|
| </HTML> |
|
|
Try it: Compare step 5 with
this page.
Concept: Adding pictures on your
page
Explanation:
- The picture is a separate document to your HTML file. The HTML page
has the information that tells the browser where the picture is and where to
put it, what size to make it, and so on.
- The IMG tag tells the browser to imbed a picture at this place on the
web page.
- The SRC stands for source, or where the picture is on the disk
- The picture can be almost anywhere. The most convenient place is in
the same folder at the HTML document calling it.
- The source location in this example is understood to be in the same
folder as this file is in (otherwise there would be a 'path' prepended to
the file name inside the quote marks, explained more fully in the next
step). If this sounds confusing, don't worry, just make sure all
your files for your project are in the same folder.
- The filename written here has to have the same upper/lower case
structure as the file on the disk (keeping everything lower case is easiest,
and no spaces or funny characters in file names either!). This rule
might not be rigorously applied in the environment of your computer or network,
but it can make a difference on the Internet, so keep it in mind if you develop
web pages locally with intent to move them to the Internet later.
- The dot.gif (or dot.jpg, etc.) is an extension that tells your
computer what kind of file it is.
- The location of the image between the "quote" marks can be a URL. In
other words, you can find a picture on the Internet, right click on it, select
properties, and copy its URL between the quote marks, and the pic should
display on your web page (until the picture disappears from that location, as
sometimes happens).
- See also: Working with pictures on the
Internet
What's coming: Now that you've got the idea of 'linking'
(to a picture in this case) let's look at how you link to other files in your
project ...
Navigate this site
Back to 5 | Browse
Index | Next:
On to Step 7
|
|
For comments, suggestions, or further information
on this page,
contact Vance
Stevens, page author and webmaster.
Last updated: January 22, 2008 -
07:30 UTC (GMT) |
Copyright 2008 by Vance Stevens
under Creative
Commons License: http://creativecommons.org/licenses/by-nc-sa/2.5/
Save this page to your DEL.ICIO.US account and TAG it
there