How to Insert Images with HTML: 6 steps (with pictures) - wikiHow
09/11/12 17:15
How to Insert Images with HTML
Adding images to your website or social networking profile is a great way to spruce up your page.
HTML (HyperText Markup Language) comes with many web development features, but the code
required for adding images is fairly straightforward.
Steps
Sample HTML for Inserting Images
Sample Insert Image HTML
Inserting Images with HTML
1
Upload your image to a free image hosting website, such as Photobucket or TinyPic,
that allows hot-linking. Hot-linking is linking to the image directly from the host website
server; some websites have forbidden it because hot-linking uses their bandwidth and takes
up space on their servers.
If you have a paid web hosting account, upload your image to that host instead. It will
be more reliable than a free site.
2
Open a new document in a text editor (e.g., Notepad) or the page on your website/profile
where you can alter the HTML.
http://www.wikihow.com/Insert-Images-with-HTML
Page 1 sur 5
How to Insert Images with HTML: 6 steps (with pictures) - wikiHow
3
09/11/12 17:15
Begin with the img tag. The img tag is empty, which means it doesn't need a closing tag.
However, for XHTML validity, you can add a space and slash before the greater-than sign.
<img />
4
There are many available attributes, but only one is absolutely necessary: src. This is
the location, or URL, of your image.
<img src="URL of image" />
http://www.wikihow.com/Insert-Images-with-HTML
Page 2 sur 5
How to Insert Images with HTML: 6 steps (with pictures) - wikiHow
5
09/11/12 17:15
Next, you should add the alt attribute. This specifies alternate text, in case the image
doesn't load. The alternate text is also read to blind visitors who use screen readers.
If you hover your cursor over the image, the alternate text will show in a tool tip, but
only in Internet Explorer. The cross-browser solution (works in Firefox et al.) is to use
the title attribute in addition to alt. (Leave this out if you don't want the image to have
a tool tip.)
For example:
<img src="URL of image" alt="Just in case" title="Tooltip"/>
6
Now, you could optionally specify the size of your image, by using the height and
width attributes, and specifying the pixels or percentage. Note that by changing the size
like this, you're only changing the size that the image will display. The browser still loads the
actual size of the image, so if you have an unnecessarily large image, it's better to re-size it
using a photo editing program or PicResize.com rather than just changing the display size.
<img src="URL of image" alt="Just in case" title="Tooltip" height="50%"
width="50%" />
<img src="URL of image" alt="Just in case" title="Tooltip" height="25px"
width="50px" />
http://www.wikihow.com/Insert-Images-with-HTML
Page 3 sur 5
How to Insert Images with HTML: 6 steps (with pictures) - wikiHow
09/11/12 17:15
Video
Tips
The value for these attributes is either a positive pixel value or a percentage value from 1-100
percent.
The picture or image can be placed any where in the web page with an align attribute such as
top, bottom, middle, right, left etc.
The hspace attribute is used to insert a buffer of horizontal space on the left and right of an
image, where as the vspace attribute is used to insert a buffer of vertical space between the top
and bottom of the image and other objects.
Don't go overboard with images. It just looks messy and unprofessional.
For logos or cartoons GIF images are good, whereas for complex imagery such as photographs
JPEG images are good.
GIF images only support 8-bit color for a maximum of 256 colors with in the image. So
some degree of loss is inevitable when representing true color images such as
photographs.
http://www.wikihow.com/Insert-Images-with-HTML
Page 4 sur 5
How to Insert Images with HTML: 6 steps (with pictures) - wikiHow
09/11/12 17:15
GIF images also support transparency. One bit of transparency is allowed which means
that one color can be set to be transparent.
Interlacing is also supported by GIF images which means the interlacing effect allows a
user to get an idea of what an imaged looks like before the entire image has downloaded.
GIF format also supports animation.
Warnings
Don't Hotlink!
Related wikiHows
How to Use Font Color Tags in HTML
How to Resize Iframes in HTML
How to Remove a URL Completely Including Cache and Snippet
How to Link Within a Page Using HTML
http://www.wikihow.com/Insert-Images-with-HTML
Page 5 sur 5