HTML Tutorial Six - Images And Links

In this tutorial we will be learning about images and links in HTML . This section includes adding an image in HTML, ALT text, resizing it, adding a border and also about adding links in HTML . So lets start with our HTML Tutorials Six - Images And Links .

How to add images to HTML ?

Images can be added in HTML using the <img/> tag . It does not have a closing tag and images are added using the src attribute . The URL of the image is give in quotations in the src attribute .

Example :

<img src="ImageUrl" />

Output :
Add the URL of the image to be loaded inside the src attribute and the out put will be the image that you provide . Try adding a URL to the example and try this on your own .

What is an ALT text ?

ALT text is something that appears if the image doesn't load due to some reasons . ALT text could be add by using the alt attribute . See this example,

Example :

<img src="ImageUrl" alt="Your Text Here" />

Output :
The output will be the ALT text that works when the image doesn't loads due to some reason .

Tip for blogger :

• ALT text will help the search engine to find the image and this will help you earn organic visitors .

How to resize an image ?

Resizing an image can be done by specifying the height and width of the image . Try these examples .

Resize image to a definite size :
I am going to resize the image to 200 pixels .

Example :

<img src="ImageUrl" height="200px" width="200px" alt="Your Text Here" />

Output :
The image in the URL that you add will be resizes to 200 pixels and it will be displayed .

Resize image in percentage :
You can make the image to fit the page properly that is if you want the 50% of the page to be filled by the image then use the height and width as 50% and if you like to make the page filled with the image just add the height and width as 100% . Try this example .

Example :

<img src="ImageUrl" height="50%" width="50%" alt="Your Text Here" />

Output :
The output will be the image and the image will be filling 50% of your page .

Tips for blogger :

• Adding larger images will make your page load slower .

How to add a border to the image ?

Just by adding the boarder attribute you can add a border to the image . See the example .

Example :

<img src="ImageUrl" height="50%" width="50%" alt="Your Text Here" border="5px" />

Output :
A border will be added to the image with 5 pixel .

How to add links to HTML ?

Links can be added to HTML by using the <a> tag . It starts with <a> and ends with </a> . The link is defined in the href attribute . Try this example .

Example :

<a href="https://tipsandtricksonandroid.blogspot.in">TECH MOBS</a>

Output :
TECH MOBS
https://tipsandtricksonandroid.blogspot.in is the link and TECH MOBS is the text .

Okay, now this is enough for now or else you may go bored . Next HTML Tutorial will be on tables .