Images

Images can be placed as background like the example in the previous section, or standalone.
The <img> tag is used for placing images and can be included within applicable tags, like <body>, <div>, <p>, .. etc.
It is a good practice to close the <img> tag by placing a backslash at the end of it.

The src attribute

To select the source from which the image will be placed, we specify the src attribute within the <img> tag.
Image sources can be a folder within our website, or an external internet URL.

Examine this code for example:

                
                    <!doctype html> 

                    <html> 

                    <body> 

                    <h1>Our Proposed Company Logo Design
                    </h1> 

                    <p>Following is our logo proposed  design, we may make changes later:
                    </p> 

                    <img src="myimages/mylogo.jpg" /> 

                    <p>And this is our business card  template that I'm going to use:
                    </p> 

                    <img src="myimages/mybusinesscard.jpg" /> 

                    <p>I stored the images mylogo.jpg  and mybusinesscard.jpg in a folder called
                    myimages in the same place where  I saved this HTML page.
                    </p> 

                    </body> 

                    </html>

The result will be:

The alt Attribute

If for some reason the image could not be displayed, the browser will look for an alternative, which is usually a text describing what was the intended image.
This is done by using the alt attribute within the <img> tag.
The alt attribute is also useful for search engines when they crawl you site.

In our previous example we could write the <img> tags in this better way:

Image Alignment

Fonts and other objects on a web page can be aligned with align attribute or with style values.
For example to align an image to the right, you may use: <img src=".jpg" align="right" />
Advanced alignments can be applied to images, even by positioning text over them, however this is part of CSS tutorials.

Image Width and Height

Width and/or Hight can be specified for an image.
They are usually specified in pixels.
They can be specified by percentages related to the width of the tag containing the <img>.
You can specify the width only, and the browser will modify the displayed height accordingly, or you can display the height letting the browser modify the width accordingly.
Specifying a width and/or height for an image does not affect the original image, hence we can display the same image in different sizes in different places on the page without changing the original saved image.
Oversizing the image size by the width or height attribute, may result in quality degradation for that image, when displayed.

In our example, let’s make the logo and business card larger and give them and alternative text, the code becomes like follows:

                
                    <!doctype html> 

                    <html> 

                    <body> 

                    <h1>Our Proposed Company Logo Design
                    </h1> 

                    <p>Following is our logo proposed  design, we may make changes later:
                    </p> 

                    <img src="myimages/mylogo.jpg" alt=”Thalji.net Logo” width="200px" height="200px" /> 

                    <p>And this is our business card  template that I'm going to use:
                    </p> 

                    <img src="myimages/mybusinesscard.jpg" alt=”Thalji.net Business Card" width="350px" height="200px" /> 

                    <p>I stored the  images mylogo.jpg and mybusinesscard.jpg in a folder called
                    myimages in the same  place where I saved this HTML page.
                    </p> 

                    </body> 

                    </html>

The result is:

Trainer Riad Thalji Website