Basic Html 4: Pictures
July 18th 2006 10:21
This weeks lesson is going to deal with pictures. So create a new page called lesson4.html to your website folder and save a .jpg image of your choice to your website folder and call it image1.jpg.
Now, to include an image on your web page the basic code is:
<img src="source">
So to include an image the image of Oscar Wilde at http://upload.wikimedia.org/wikipedia/en/7/77/Oscar.jpg
you would write
<img src=" http://upload.wikimedia.org/wikipedia/en/7/77/Oscar.jpg">
So lets make up a basic website that does that. In lesson4.html write the following:
<html>
<head>
<title>Lesson 4</title>
</head>
<body>
<img src="http://upload.wikimedia.org/wikipedia/en/7/77/Oscar.jpg">
<br>
This is my picture of Oscar Wilde
</body>
</html>
Now, lets add the picture we prepared earlier. If a picture is in the same folder as the web page we can just write the picture name. So below "This is my picture of Oscar Wilde", write:
<br>
<br>
<img src="image1.jpg">
<br>
This is the picture I prepared earlier.
You may remember that the <br> command just adds a blank line to make it all look a little neater.
Now you have two basic pictures added to your webpage.
Modifying images
There are also a few important tags that allow you to modify your images:
The width, height and border commands have obvious functions, with the width and height commands resizing the picture. However, it is considered good usage to use these even when leaving the picture the same size as it means a suitable gap will be left in the pages text while the image loads.
These take the following form:
<img src="source" border="border size" width="width" height="height">
So for the photo of Oscar Wilde above we can make it smaller and add a border.
<img src="http://upload.wikimedia.org/wikipedia/en/7/77/Oscar.jpg" border="3" width="30" height ="90">
The other important tag for images is the alt tag, which determines what will replace the image when the image wont display. This takes the form:
<img src="source" alt="alternative text">
So the photo of Oscar Wilde could now use the source below:
<img src="http://upload.wikimedia.org/wikipedia/en/7/77/Oscar.jpg" border="3" width="66" height ="96" alt="A picture of Oscar Wilde">
Images as hyperlinks
You can also use images as hyperlinks. So, we could use our image1.jpg as a link to the webpage we made in lesson 3. To do this you type:
<a href="website url"><img src="image name"></a>
Which in our case would be:
<a href="lesson3.html"><img src="image1.jpg"></a>
In the end
So at the end of this lesson lesson4.html should appear as follows:
<html>
<head>
<title>Lesson 4</title>
</head>
<body>
<img src="http://upload.wikimedia.org/wikipedia/en/7/77/Oscar.jpg" border="3" width="66" height ="96" alt="A picture of Oscar Wilde">
<br>
This is my picture of Oscar Wilde
<br>
<br>
<a href="lesson3.html"><img src="image1.jpg"></a>
<br>
This is the picture I prepared earlier
</body>
</html>
Now, to include an image on your web page the basic code is:
<img src="source">
So to include an image the image of Oscar Wilde at http://upload.wikimedia.org/wikipedia/en/7/77/Oscar.jpg
you would write
<img src=" http://upload.wikimedia.org/wikipedia/en/7/77/Oscar.jpg">
So lets make up a basic website that does that. In lesson4.html write the following:
<html>
<head>
<title>Lesson 4</title>
</head>
<body>
<img src="http://upload.wikimedia.org/wikipedia/en/7/77/Oscar.jpg">
<br>
This is my picture of Oscar Wilde
</body>
</html>
Now, lets add the picture we prepared earlier. If a picture is in the same folder as the web page we can just write the picture name. So below "This is my picture of Oscar Wilde", write:
<br>
<br>
<img src="image1.jpg">
<br>
This is the picture I prepared earlier.
You may remember that the <br> command just adds a blank line to make it all look a little neater.
Now you have two basic pictures added to your webpage.
Modifying images
There are also a few important tags that allow you to modify your images:
The width, height and border commands have obvious functions, with the width and height commands resizing the picture. However, it is considered good usage to use these even when leaving the picture the same size as it means a suitable gap will be left in the pages text while the image loads.
These take the following form:
<img src="source" border="border size" width="width" height="height">
So for the photo of Oscar Wilde above we can make it smaller and add a border.
<img src="http://upload.wikimedia.org/wikipedia/en/7/77/Oscar.jpg" border="3" width="30" height ="90">
The other important tag for images is the alt tag, which determines what will replace the image when the image wont display. This takes the form:
<img src="source" alt="alternative text">
So the photo of Oscar Wilde could now use the source below:
<img src="http://upload.wikimedia.org/wikipedia/en/7/77/Oscar.jpg" border="3" width="66" height ="96" alt="A picture of Oscar Wilde">
Images as hyperlinks
You can also use images as hyperlinks. So, we could use our image1.jpg as a link to the webpage we made in lesson 3. To do this you type:
<a href="website url"><img src="image name"></a>
Which in our case would be:
<a href="lesson3.html"><img src="image1.jpg"></a>
In the end
So at the end of this lesson lesson4.html should appear as follows:
<html>
<head>
<title>Lesson 4</title>
</head>
<body>
<img src="http://upload.wikimedia.org/wikipedia/en/7/77/Oscar.jpg" border="3" width="66" height ="96" alt="A picture of Oscar Wilde">
<br>
This is my picture of Oscar Wilde
<br>
<br>
<a href="lesson3.html"><img src="image1.jpg"></a>
<br>
This is the picture I prepared earlier
</body>
</html>
| 222 |
| Vote |
subscribe to this blog
