HTML PAGE DESIGN LINKS
html page design
Basic html forms
Text and font tags
This page explains basic code attributes for the html image tag.
Using a picture as a link.
Attributes explained on this page src, align, border, alt, width, height, hspace, vspace.
Web pictures for the beginner and first time webmasters.
Some Html code basic rules :
|Putting a picture on your web page|
For LOCAL images (images hosted on the same host and url as the page )
The src attribute uses the folder name of your image to locate the picture.
The image below is hosted on this site in a folder named images.
Below is the code that displays this image.
For online REMOTE images (images not hosted on the same url as the page being displayed)
The src attribute uses the url of the image followed by a / and the image name .jpg .gif ect...
|HTML for adding a border to an image on your page|
|A one pixel border
<img src="images/bird.jpg" border="1">
|A 5 pixel border
<img src="images/bird.jpg" border="5">
|HTML to align your image with text on your page|
| The align attribute in the
Places the image
to the left of your text.
<img align="left" src="images/bird.jpg" border="1">
| The align attribute in the code below.
Places the text starting
at the bottom of the image
<img align="bottom" src="images/bird.jpg" border="0">
|HTML to define your image width and height|
|Width and height are generally in pixels
The browser will still place and size the image if these attributes are omitted.
However for smooth page loading defining image width and height, helps
with the appearance of a page.
<img src="images/bird.jpg" width="90" height="95" border="0">
|Setting the wrong image size can give unwanted results
As seen in this example
<img src="images/bird.jpg" width="190" height="25" border="0">
|HTML to define the space between your image and text|
hspace= Specifies the amount of empty space between
the image and other objects, or text on the sides of the image.
vspace= Specifies the amount of blank space on the top and bottom.
<img align="left" src="images/bird.jpg" hspace="15" vspace="15" border="0">
Image with no space set
<img align="left" src="images/bird.jpg" hspace="0" border="0">
| Image tag with all attributes above plus the alt= which is for
a text description
of the picture for users that cannot display images,disabled users and others
<img align="bottom" src="images/bird.jpg" width="90" height="95" hspace="15" vspace="15" alt="bird" border="5">
|HTML to use an image as a link|
| Click Me
|You can use images as links to send visitors to another site, or another page on a site.
Clicking on the image of the bird to the left will take visitors
where they can find a cute bird figurine.
<img src="images/bird.jpg" width="90" height="95" border="0"></a>
Above is the code for using an image as a link to a website url.
Home page Back to top of page
Copyright © 2004 2011 FunwithyourPC