HTML Code For Image
The HTML code for image insertion is one of the exceptional HTML codes that doesn't need to be closed. The basic tag to insert an image into your content is: <img src="url">. Replace "url" with the path to where your image is stored on the server. In the next example, the page is in the root directory and the image is in a folder called images:
|
<html> <head> <title>html code for image</title> </head> <body> <img src="images/picture.jpg"> </body> </html> |
Aligning Images
To align your image and make the content following it wrap around the image, you need to add the HTML code for image alignment. After the image url, add align="direction" where direction is either left or right. The image will float either left or right and any text coming after it will flow naturally on its side. Here's an example of aligning an image to the right of the page. It will be at the top of the page with the content starting at its left.
|
<html> <head> <title>html code for image</title> </head> <body> <img src="images/picture.jpg" align="right"> </body> </html> |
Adding alternate text to your images
Some people still have very slow connections or are simple blind. Adding alternate text will tell the user what the image is about before it loads on the page. Blind people have programs that read the text for them on the internet and adding alternate text will let them know what the images are about. If for some reason the image is not on your server, instead of having nothing, the browser will at least know what the image was about.
The HTML code for image alternate text is alt="text" where text is your alternate text. You can enter approximately 10 words in there. Search engines also give some credit to the text inside the image alts. Add the alt tag like we added the align code earlier. Here's an example:
|
<html> <head> <title>html code for image</title> </head> <body> <img src="images/picture.jpg" align="right" alt="Scene from the Canadian mountains"> </body> </html> |
Adding a horizontal and vertical margin
When you insert an image like we did above, the text wrapping around it will touch the image. If you want to add a horizontal and vertical margin, you need to add the HTML code for image margins. Just like adding an alignment or alt, add hspace="number of horizontal pixels" vspace="number of vertical pixels". A good margin to use for images is 8-10 pixels. Here's an example with a 8 pixel margin:
|
<html> <head> <title>html code for image</title> </head> <body> <img src="images/picture.jpg" align="right" hspace="8" vspace="8"> </body> </html> |
| Back HTML Quote | Next Changing Image Size In HTML |