Insert images in your document
Coding (Html5)Oct 23, 2017
Implement image within web pages to make the content more readable
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 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.
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.
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