Adding Pictures In html

Adding Pictures/Images

HTML Tutorial 4

Aims

To find out how to add pictures to your pages

To understand why the ALT attribute is important

Wrapping text around your picture and adding spacing

I've had enough of text - I want to get pictures on my page!

Okay, I hear you! It is true that after a while text does get very boring. And these days, everyone's blogging or using social networking sites and what do you want people to see - photos of you with your mates on a good night out, you and your family on holiday, your neighbour's cute guinea pig. Or whatever really.

And it's good for you - if you want to have your own web page without using a social networking site then adding a picture is easy.

But for now, let's ditch the word "picture" because that won't get you anywhere in HTML. Instead, use the word "image".

Images come in various formats depending on how they were created, how many colours are in them, whether they support transparency and various other things.

Images are added using the <img> tag and here is one using some attributes:-

<img src="mypictures/mydog.jpg" alt="This is my Dog" width="100" height="200">

Here's what the attributes mean:-

src - where your picture is stored. In this example, there is a folder called "mypictures" and in that folder is a picture file called "mydog.jpg".

alt - this is basically a short description of your picture. It is called "alt" because that text can be an "alternative" for people who are browsing without pictures turned on. People do it - whether it's on their phone so they can read pages quickly, or whether it's a search engine 'reading' your page. So give a short, but accurate description.

height/width - the dimensions of your picture in pixels. If you put in dimensions that are smaller or larger than your actual picture then the page will shrink/stretch your picture to fit those dimensions. This can make your pictures appear distorted. So either use their correct dimensions, or if you want a smaller or larger version, then use a graphics package such as G.I.M.P. and resize it properly.

It is important for you to know that the src attribute is always relative to the page that wants to use that picture. So if you want to use a picture that's either not on your website or is in a different folder you can always put in an absolute address, like so:-

<img src="http://www.ivemadethisup.com/mypictures/mydog.jpg" alt="This is my Dog" width="100" height="200">

NOTE: Do not use pictures from other people's websites without asking their permission first. Even then, they may not let you use that picture on their web address (it uses their resources). Be considerate - the Internet has a lot of people on it, so make friends where you can.

Image Alignment & Text Wrapping

If you put an image anywhere in a page, you may see that the text appears above and/or below that image. This is solved simply by putting the image on the left or right of the page.

This is called aligning the image. By default, the image is aligned to the left, but this does not solve your text-wrapping problem. So in comes another attribute - align.

<img src="mypictures/mydog.jpg" align="right" alt="This is my Dog" width="100" height="200">

Simple as that. All you have to do is put "left", "right" or "center" in there and that's what will happen! Two things:-

Center is spelled c-e-n-t-e-r in HTML not c-e-n-t-r-e. It's our American neighbours again (like having to spell Color without the 'u'). This spelling of center applies throughout HTML and later on, CSS and even later on, JavaScript. Always spell it this way. Else it won't work. At all. Got it?!

If you align your picture as center then your text will still be above and/or below it - it will not flow around it.

Giving your image some breathing space

If you feel like the text-wrapping is a bit too close for comfort (which it can be) then you want to give it some space. Here come two new attributes:-

hspace - how much horizonal space (in pixels) to give it - i.e. space at the right and left of your image.

vspace - how much vertical space (in pixels) to give it - i.e. space at the top and bottom of your image.

<img src="mypictures/mydog.jpg" align="right" alt="This is my Dog" width="100" height="200" vspace="5" hspace="5">

Parting Words on Pictures

You can add as many pictures as you like to a page, but remember your page will take longer to load the more pictures you have so if you have plenty of pictures to share, then consider creating multiple pages (next tutorial).

And finally, notice that the img tag does not have a closing tag? It does not need one because it is simply putting something on your page, rather than containing something, which is generally what tags that need closing tags are doing. So don't put one in.