Insert images in your document

 

Anyone likes scenographic images coming from the internet and now with the establishment of big landing images as newest trends in this beginning of 2017 we can enjoy even more their use in the matter of web design.

 

 

There is a huge amount of duties an img tag can do in this contest, act as a background for capturing the attention of the user using a full size screen vision or as a descriptive image for shown features of a product in an eCommerce, good quality images choices could make a difference at the end of the month.

 

 

Let's see how simple is to implement an image within an html page.

 

 

 

 

 

The img tag

 

 

To define an image in HTML we use the tag .

 

 

It is an empty tag which means that it do not requires any closing tag and it only own attribute such as source (src) that tell the browser where get the resource, alternative (alt) shows an alternative caption, if, for some reason, the image cannot be shown and style (style) that allow to format the position and design through the use of css,

 

 

 

 

 

alternative text" style="border:border;width:width;height:height;">

 

 

 

 

 

There are several different extensions that would be accepted by the browser,

 

 

Even in case we choose to implement a gif image the syntax doesn't change.

 

 

 

 

 

The attributes

 

 

The src attribute indicates the source of the image.

 

 

In its value we need for specificity where the file is located and what is the format of the file,

 

 

You can either choose to use an absolute url, typing any single child from the root of the website or a relative one:

 

 

•     
• Use the shortcut ../ To indicate back to the father directory; 


•     
• Use the shortcut ./ To indicate directly the root;



 
•  

 

 

 

 

 

The alt attribute is useful in the occasion that an error occur on the page or the connection is too slow to allow the browser to download the image.

Its value will be shown exactly in this case; for this reason, is a good practice write a text that allows the user to understand what image is supposed to occupy the blank space.

 

 

 

 

It is very important to add a value within the alt attribute because it will increase the S.E.O. of the page and it can be read by HTML screen readers in order to make the image available even if the users are blind.

 

 

 

 

 

Stylize images

 

 

Even though the img tag in HTML5 still support attributes such as width and height is a good practice to put the css in charge of any changes; 

 

 

In this way we have the possibility to edit its aspect from stylesheets and take advantage of all the features css provide (responsive design, lighter weight of the page, S.E.O. rank).

 

 

 

 

 

 

 

Using images as link

 

 

As shown in the tutorial about hypertexts, the simple addition of an image tag in between the tag will make the image an anchor to another resource.

 

 

This approach is often used by company websites as a shortcut to the home page.

 

 

   

 

 

 

 

 

 

Where to get the images 

 

 

Ora sappiamo come inserire un'immagine all'interno del tuo sito web, ma, dove per ottenere immagini belle?

 

 

There are plenty of websites that provide image contents, they filter the image for any kind of size, color, and all the possible licenses.

Here is a list of some of the most important:

 

 

•     
• Adobe Stock


•     
• Unsplash


•     
• Pixabay


•     
• Magdeleine


•     
• Isorepublic


•     
• Cupcake


•     
• Pexels



 
•  

 

 

 

 

 

 

 

 

If you like the content of this page, please, do not forget to share with your friends using the button at the top right of the navigation; if you have something else to say about this topic or you think i missed some important part, contact me and I will add it citing you.

 

 

Ever thought on learning some server-side language?
Check out my reviews of 24 of the most popular PHP framework currently available