free HTML Picture Codes

Welcome to the fifth lesson from the lessons of HTML. In this lesson I will talk about the pictures, graphics, and dealing with them, in addition to the definition of the types of graphic files in internet slang.

I only talk about the pictures until now to add backgrounds to pages, and that was in the second lesson the inclusion of images within the same page he is another story, I begin strict moral code with you now.

The tag used to identify the main image on the page is <IMG> a single tag. But is this enough to insert a picture? No, of course, we must identify the image that we want. So we add a property to locate the SRC and the name of the image.

The following image thedome.jpg her name and when you inserted. The code for this is

You can use the following HTML code to embed a picture into your HTML document. The code uses the <img> tag, which is the official tag to use for embedding pictures on web pages.

Example Picture Code

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMmsHAzhRpsPgatn4L2nBjAMJ57NYWOM1GZNIm0aRouzRdQsZadQ1O3XcNRjYvvKe3DSjpiDXjGF82kcCkY9onZ1SllhGLwDaVfpjRuEejckTMhHA-zNO3zccxImrzeQJ6K5wt9omsQQQ/h80/a3dufc.gif" width="225" height="151" alt="Milford Sound in New Zealand" /><br />

This code results in:

More Picture Codes

Here are links to more picture codes. You can do things like hyperlink images or add a border around your picture. You can even create a rollover effect whenever you hover over the image.

• Image Links - Opens a web page whenever the user clicks on your picture.
• Image Maps - These are "clickable" hotspots on your image. One picture can link to many different web pages.
• Picture Borders - Adds a border around your picture.
• Image Rollovers - Creates that "Hover over" effect. Easier than you might think!

Picture Code Template

You can use the following template as a basis for your HTML picture codes. Simply fill in the blanks or remove uneeded attributes.

For an explanation of all the attributes, see the HTML img tag specifications.




<img src=""
 width=""
 height=""
 border=""
 alt=""
 class=""
 id=""
 title=""
 style=""
 dir=""
 lang=""
 ismap=""
 usemap=""
 align=""
 hspace=""
 vspace=""
 onclick=""
 ondbclick=""
 onmousedown=""
 onmouseup=""
 onmouseover=""
 onmousemove=""
 onmouseout=""
 onkeypress=""
 onkeydown=""
 onkeyup="" />