HTML IMAGES
Adding an image not only makes your page look fancier but also depicts the concepts in a simpler way which is easy to understand and remember.
Images are inserted using the <img> tag. This tag has a different syntax than others. Here instead of putting the contents between the tags, you put the image source i.e. image address using “src”. Another difference is that it does not have an ending tag. Instead we put a “/” mark at the end to close the tag. So, the syntax is:
<img src=”url” />
An example:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightyellow;}
h1 {font-family: arialblack;color:blue;}
</style>
</head>
<body>
<h1>QATECHHUB </h1>
<img src="http://qatechhub.com/wp-content/uploads/2016/08/automation2.png" />
</body>
</html>
“src” attribute gives the address of the image. But what if the image is not available or browser is unable to load it? How will the viewers know what the image was about? For this we add one more attribute that is “alt”.
“alt” simply means what the alternate text for the image. We can add this attribute in the following way:
<img src=”url” alt=”some_text“>
This is also used by the screen readers.
Another important attribute for images is the “width” and “height”. Sometimes the images need to be resized. Just add the width and height attribute of your desired value (in pixels). You can do this like:
<img src=”url” alt=”some text” width=”xx” height=”xx”>
We can add more attributes like align, border, float etc. as per requirement.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightyellow;}
h1 {font-family: arialblack;color:blue;}
</style>
</head>
<body>
<h1>QATECHHUB </h1>
<img src="http://qatechhub.com/wp-content/uploads/2016/08/automation2.png" alt=”automation_logo”
width:"350" height:"150” float="left" />
</body>
</html>
Another way is to use the “style” attribute (recommended). Let’s see how to use it:
<img src=”http://qatechhub.com/wp-content/uploads/2016/08/automation2.png” alt=”automation” style=”width:150px;height:150px;”/>
Note: Both the width, height, and style attributes are valid in HTML5.
However, we suggest using the style attribute. It prevents internal or external styles sheets from changing the original size of images
Note: It is very important that you specify a perfect source address. If not specified, the browser expects to find the image in the same folder as the web page. However, it is common to store images in a sub-folder. You must then include the folder name.
PS: For any questions, queries, feedback and comments feel free to write us at support@qatechhub.com and amruta@qatechhub.com
