Dealing With Images.
Posted: Sat Apr 14, 2007 11:58 am
Following My Tutorial on The basics of HTML I will now tell you how to add images to your web page.
We last had:
Code:
<HTML>
<TITLE>My Web Site</TITLE>
<BODY>
text text newline
text text
</BODY>
</HTML>
If you wanted to add an image under the text you have there then you would need to first upload a picture onto your webserver, or a simpler way would be to use http://www.imageshack.us and get the url to the uploaded Picture from there.
1. We start by putting a new line
, we then tell the browser it is now dealing with a picture. so we put
Code:
<img
This can be in caps if you wish.
We do not put a > at the end because we have not yet told it what the picture is etc.
so to tell it which picture we need to de we would put
Code:
<img src="URL"
Where the URL is the address to the picture.
the 'src=""' tell the browser the 'source' of the image.
Note: The URL must always be between "s this tell the browser when the URL begins and ends.
to add a name to the picture, (when the mouse hovers over a small box tells you what it is called or info about it), you need to put
Code:
alt="TEXT" />
you should now have:
Code:
<img src="URL" alt="TEXT" />
again you end this with 'space'/>. This is because this is an 'open' tag. An open tag is a 'tag' that tells the browser multiple things. This is a slight difference than to the
tag.
eg: a closed tag= <HTML>
a open tag= <img... />
Your compleated code should now look like:
Code:
<HTML>
<TITLE>My Web Site</TITLE>
<BODY>
text text newline
text text
<img src="URL" alt="TEXT" />
</BODY>
</HTML>
We last had:
Code:
<HTML>
<TITLE>My Web Site</TITLE>
<BODY>
text text newline
text text
</BODY>
</HTML>
If you wanted to add an image under the text you have there then you would need to first upload a picture onto your webserver, or a simpler way would be to use http://www.imageshack.us and get the url to the uploaded Picture from there.
1. We start by putting a new line
, we then tell the browser it is now dealing with a picture. so we put
Code:
<img
This can be in caps if you wish.
We do not put a > at the end because we have not yet told it what the picture is etc.
so to tell it which picture we need to de we would put
Code:
<img src="URL"
Where the URL is the address to the picture.
the 'src=""' tell the browser the 'source' of the image.
Note: The URL must always be between "s this tell the browser when the URL begins and ends.
to add a name to the picture, (when the mouse hovers over a small box tells you what it is called or info about it), you need to put
Code:
alt="TEXT" />
you should now have:
Code:
<img src="URL" alt="TEXT" />
again you end this with 'space'/>. This is because this is an 'open' tag. An open tag is a 'tag' that tells the browser multiple things. This is a slight difference than to the
tag.
eg: a closed tag= <HTML>
a open tag= <img... />
Your compleated code should now look like:
Code:
<HTML>
<TITLE>My Web Site</TITLE>
<BODY>
text text newline
text text
<img src="URL" alt="TEXT" />
</BODY>
</HTML>
