HTML For The Newcomer Part 4
http://www.codecrunch.com/articles/72/1/HTML-For-The-Newcomer-Part-4.html
By Daniel Phillips
Published on 06/27/2006
In this part we cover inserting images, linking them, and setting them as backgrounds.
HTML For The Newcomer Part 4
Welcome to the latest part of this series, we are now nearing the end of the most basic HTML tutorials I can do, so soon I will be moving on to intermediate level, hopefully after reading these you will be ready to continue with those.
In this tutorial we are going to talk about images,in particular - how to set them as backgrounds, and how to include them in your web page.
So we have an image!
its called mrt.gif
and we want to put it on a page about MR T, because we are huge fans and want to pay a tribute to him or whatever.
This is the code for your page so far:
<html>
<title> MR T FOO' </title>
<head>
<i> welcome to my MR T fansite! </i>
</head>
<body>
<p>
<b> I pity the foo' who mess with this man </b>
<p>
<body bgcolor="pink">
</body>
</html>
In this tutorial we are going to talk about images,in particular - how to set them as backgrounds, and how to include them in your web page.
So we have an image!
its called mrt.gif
and we want to put it on a page about MR T, because we are huge fans and want to pay a tribute to him or whatever.
This is the code for your page so far:
<html>
<title> MR T FOO' </title>
<head>
<i> welcome to my MR T fansite! </i>
</head>
<body>
<p>
<b> I pity the foo' who mess with this man </b>
<p>
<body bgcolor="pink">
</body>
</html>
HTML For The Newcomer Part 4
You should by now know what that code will output in a browser, considering I have only used code that we have already covered in earlier tutorials.
Now for the new bit of code: <img src="mrt.gif">
Think of img src as "image source"
If we were to insert the code into our document, the code would look like this.
<html>
<title> MR T FOO' </title>
<head>
<i> welcome to my MR T fansite! </i>
</head>
<body>
<p>
<b> I pity the foo' who mess with this man </b>
<p>
<img src="mrt.gif">
<body bgcolor="pink">
</body>
</html>
With this code, The webpage would look like this in a browser
Now for the new bit of code: <img src="mrt.gif">
Think of img src as "image source"
If we were to insert the code into our document, the code would look like this.
<html>
<title> MR T FOO' </title>
<head>
<i> welcome to my MR T fansite! </i>
</head>
<body>
<p>
<b> I pity the foo' who mess with this man </b>
<p>
<img src="mrt.gif">
<body bgcolor="pink">
</body>
</html>
With this code, The webpage would look like this in a browser
HTML For The Newcomer Part 4
Now, what if we want this image to link to our favourite MR T website? well, its quite simple!
<a href="mrt.com"> <img src="http://mrt.gif"> </a>
Now when a visitor click the picture they will be taken to the link it is paired with!
And finally what if you want a kool MR T background instead of the stylish pink one?
The image you want to use for your background is "mrt2.png"
So the simple code to set this as a backgorund would be - <body background="mrt2.png">
So just replace your background color tag with this one!
<html>
<title> MR T FOO' </title>
<head>
<i> welcome to my MR T fansite! </i>
</head>
<body>
<p>
<b> I pity the foo' who mess with this man </b>
<p>
<a href="mrt.com"> <img src="http://mrt.gif"> </a>
<body background="mrt2.png">
</body>
</html>
And voila!
Thats just about all the basic info you need on images in HTML documents.
<a href="mrt.com"> <img src="http://mrt.gif"> </a>
Now when a visitor click the picture they will be taken to the link it is paired with!
And finally what if you want a kool MR T background instead of the stylish pink one?
The image you want to use for your background is "mrt2.png"
So the simple code to set this as a backgorund would be - <body background="mrt2.png">
So just replace your background color tag with this one!
<html>
<title> MR T FOO' </title>
<head>
<i> welcome to my MR T fansite! </i>
</head>
<body>
<p>
<b> I pity the foo' who mess with this man </b>
<p>
<a href="mrt.com"> <img src="http://mrt.gif"> </a>
<body background="mrt2.png">
</body>
</html>
And voila!
Thats just about all the basic info you need on images in HTML documents.