Webpage Creation 101: Image Examples

Image Examples

For each example, I will give the code on the right and display the image on the left. All text that appears in the page will be in blue when displayed in the code.

The original picture:

Code:
<img SRC="sunset.jpg"><br>

Let's make the image look smaller. Note that this does not change the amount of disk space the image file takes up.

Code:
<IMG SRC="sunset.jpg" HEIGHT=132 WIDTH=136 >

Let's put some text around the image, with a spacing of 10 pixels between the image and the text. We will also align the text with the centre of the image.

Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured. Code:
<IMG SRC="sunset.jpg" HEIGHT=132 WIDTH=136 HSPACE=10 VSPACE=10 ALIGN=CENTER>Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured.
You will note that only one line of text is beside the picture.

Let's align all the text to the left of the image.

Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured. Code:
<IMG SRC="sunset.jpg" HEIGHT=132 WIDTH=136 HSPACE=10 VSPACE=10 ALIGN=LEFT>Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured.

Let's stick in some alternate text with the picture. To see the alternate text, simply hold the mouse over the image.

A beautiful sunset Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured. Code:
<IMG SRC="sunset.jpg" HEIGHT=132 WIDTH=136 HSPACE=10 VSPACE=10 ALIGN=LEFT ALT="A beautiful sunset">Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured.

Now, let's put a border around the picture.

Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured. Code:
<IMG SRC="sunset.jpg" HEIGHT=132 WIDTH=136 HSPACE=10 VSPACE=10 ALIGN=LEFT ALT="A beautiful sunset" BORDER=3>Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured.

Now, I want to put the image on the right of the text.

Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured. Code:
<IMG SRC="sunset.jpg" HEIGHT=132 WIDTH=136 HSPACE=10 VSPACE=10 ALIGN=RIGHT ALT="A beautiful sunset" BORDER=3>Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured.

You can line up two pictures in a row as well:

Code:
<img SRC="calvin.gif" height=67 width=80 align=RIGHT>
<img SRC="hobbes.gif" height=67 width=80 align=LEFT>

Or if you want Calvin and Hobbes to dance closer together...

Code:
<img SRC="calvin.gif" height=67 width=80>
<img SRC="hobbes.gif" height=67 width=80>

Return to the HTML Lesson Guide
Return to Graphics Lesson
Read the next lesson: Creating Tables

This page created by Kat Lai.
Feel free to e-mail me with any comments or questions.

The original picture:
	Code: <img SRC="sunset.jpg"><br>
Let's make the image look smaller. Note that this does not change the amount of disk space the image file takes up.
	Code: <IMG SRC="sunset.jpg" HEIGHT=132 WIDTH=136 >
Let's put some text around the image, with a spacing of 10 pixels between the image and the text. We will also align the text with the centre of the image.
Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured.	Code: <IMG SRC="sunset.jpg" HEIGHT=132 WIDTH=136 HSPACE=10 VSPACE=10 ALIGN=CENTER>Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured. You will note that only one line of text is beside the picture.
Let's align all the text to the left of the image.
Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured.	Code: <IMG SRC="sunset.jpg" HEIGHT=132 WIDTH=136 HSPACE=10 VSPACE=10 ALIGN=LEFT>Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured.
Let's stick in some alternate text with the picture. To see the alternate text, simply hold the mouse over the image.
Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured.	Code: <IMG SRC="sunset.jpg" HEIGHT=132 WIDTH=136 HSPACE=10 VSPACE=10 ALIGN=LEFT ALT="A beautiful sunset">Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured.
Now, let's put a border around the picture.
Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured.	Code: <IMG SRC="sunset.jpg" HEIGHT=132 WIDTH=136 HSPACE=10 VSPACE=10 ALIGN=LEFT ALT="A beautiful sunset" BORDER=3>Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured.
Now, I want to put the image on the right of the text.
Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured.	Code: <IMG SRC="sunset.jpg" HEIGHT=132 WIDTH=136 HSPACE=10 VSPACE=10 ALIGN=RIGHT ALT="A beautiful sunset" BORDER=3>Picture created using MS Paint, then imported to Adobe Photoshop, converted to a JPEG file and textured.
You can line up two pictures in a row as well:
	Code: <img SRC="calvin.gif" height=67 width=80 align=RIGHT> <img SRC="hobbes.gif" height=67 width=80 align=LEFT>
Or if you want Calvin and Hobbes to dance closer together...
	Code: <img SRC="calvin.gif" height=67 width=80> <img SRC="hobbes.gif" height=67 width=80>