Welcome To Steve's Html Tutorial        

Unit 2: Manipulating Images

Putting An Image On Your Page
Okay, Here We Go. Let's Just Dive Right In.
First Of All. When Adding An Image You Have To Remember That All File Names Are Case Sensative,So Be Careful.
The Tag For An Image Is <img src=yourfilename.jpg>
For Example:
For The Image Below I Used This Code:
<img src=http://members.lycos.co.uk/stevesthinktank/images/dblue.jpg>

Most Of The Same Functions From text Can be Used On Images, As Well.
You Can Use A Picture As A Link, With The Same Code You use To Make A Text Link.

Making Your Image A Link
You'll Notice A Small Border Appear Around The Image After You Turn It Into A Link.
For The Below Image I Used The Following Code
<a href=http://drivingmenuts.blogspot.com><img src=http://members.lycos.co.uk/stevesthinktank/images/dblue.jpg></a>

Now It's Entirely Up To You, Weather You Want To Remove The Border, Or Even Make It Thicker.
Here's The Code:
<a href=http://drivingmenuts.blogspot.com><img src=http://members.lycos.co.uk/stevesthinktank/images/dblue.jpg border=0></a>
I Only put a space after the image name then Added "border=0". Here's The New Link With No Border.

Here's What It Looks Like With A Thick Border: <a href=http://drivingmenuts.blogspot.com><img src=http://members.lycos.co.uk/stevesthinktank/images/dblue.jpg border=6></a>
I Only put a space after the image name then Added "border=6". Here's The New Link With A Border Of 6.

I Personally Prefer My Picture Links With No Border, But I Also Like When The Link Opens In A New Window.
At The End Of The Name Of The Website Your Linking, Hit Space and type "target=new"
Like This:
<a href=http://drivingmenuts.blogspot.com target=new><img src=http://members.lycos.co.uk/stevesthinktank/images/dblue.jpg border=0>


Changing Image Size
Okay, So Now You Know How To Turn Your Image Into A Link.What's Next?
I Bet You Would Like To Know How Make The Image Appear Bigger Or Smaller On The Page.
Well Here's How Its Done. You're Now Familiar With The
<imr src=whatever> Tags.
To Change The Size, Is Easy. First Think About What Your Changing.
That's Right Your Changing The Height And The Width of The Image
I'll Show You, Instead Of Rambeling On About It.
Look:

<a href=http://drivingmenuts.blogspot.com target=new><img height=100 width=75 src=http://members.lycos.co.uk/stevesthinktank/images/dblue.jpg border=0>

See How I Just Added "height=100 width=75" between "IMG" and "SRC".
It's That Easy. And Again You Can Put Whatever Numbers You Want In There.

Changing The Position Of Your Image
The Same Rules Apply From Aligning Text.
To Center Your Image, This Is What Your Code Should Look Like

<div align=center> <img src=http://members.lycos.co.uk/stevesthinktank/images/dblue.jpg> </div>
The Above Code Results In This;

Or You Can Align To The Right.
Just By Changing The Word "Center" To "Right".
Like This:

<div align=right> <img src=http://members.lycos.co.uk/stevesthinktank/images/dblue.jpg> </div>

Changing Your Background Color
Here's How You Pour A Color On Your Background
Add This, "bgcolor=red" Onto Your First <body> Tag.
So Your Opening Body Tag Should Now Look Like This:

<body bgcolor=red>
That's How You Create A Red Background. You Can Put Whatever Color You Want In There

Adding A Background Image
Here's The Code:
<body background=The Name Of Your File here>
To Add A Fixed Image Place The Code"bgproperties=fixed"At The End Of Your Filename.
Here's What The Code Will Should Look Like:
<body background=The Name Of Your File here "bgproperties=fixed">


*Friendly Tip* - A Fixed Image Stays In One Place, Very Cool.
When You Scroll Down Your Webpage, The Background Does Not Move, It Stays Put. Try it! Next I'll Show You How To Align Text With Images




To Extend Your Gratitude For Me Teaching You.
Please Copy And Paste The Following Code Anywhere Between <BODY> And </BODY> On Your Webpage. Thanks.