Monday, December 24, 2018
PRACTICAL STEPS ON HOW TO ADD IMAGE AND LINK TO A WEB PAGE USING HTML
In today’s lesson, you will be learning how to insert an image and embed link using HTML. I will explain in simple steps how you to add an image to a web page, with the backing of illustrative example. And in the latter part of this lesson, I will devote my time, take you by hand and then walk you through the procedures you can use to add link to a page, image or text.
Let us now begin.
1. ADDING IMAGES TO A WEB PAGE
Adding image to a web page can be very captivating. Images play a very significant role on the pages of websites or blog. It is simply an ‘attention grabber ‘ of web pages. Studies have equally shown that visitors of a website or blog tends to stay longer on the pages with colorful images or pictures than those that contain only texts.
For you to add image on a web page, what you need to do is to use image tag. Image tag in HTML is usually represented by <img> . this implies that you can insert image(s) on a web page by simply introducing <img> tag within the <body> tags of HTML document. The complete format you will use to insert image is:
<img src=’’imagename.jpg’’ />
TAKE NOTE
a) Make sure that the image you intend to add is in the same folder where you will save your HTML file.
b) Also, remember to add the .jpg extension, even if the image on the folder shows an extension of ''.jpeg''
c) Note that the smaller the image size, the faster the page load speeds.
For further, elucidation, it will be lovely if we harmoniously consider at least one example.
So, kindly open your text editor and write the following codes below:
<html>
<head>
<title>Unachukwu Daniel</title>
</head>
<body>
<img src="Daniel.jpg" alt="">
</body>
</html>
It will look like this
Save it in a folder that has an image bearing Daniel (or any name you wish to use. Then open it.
It will look like this
Isn’t it amazing? Of course, it is! Let's move to the next subject matter.
2. Adding Link to a web page using HTML
I would like to define ‘link’ idem per idem. So, a ‘link’ is used to link one thing (e.g image, text, pages etc. ) to another place. Links can be inbound or outbound. If it is inbound, it will link one thing from another within the website or blog. When it is outbound, the link will be going out of the website or blog entirely to another website.
The formula for adding link in HTML goes like this:
<a href=’’the link’’ target ‘’ ‘’’>link title
</a>
For example, let’s say I want to add a link to a page titled ‘Contact us’ in our tutorial website www. Codinglioness.b;logsppot.com.
I will follow this step
<a href=’’https://www. Codinglioness.b;logsppot.com./contact-us/’’ target ‘’ ‘’’>Contact Us
</a>
WRAPPING UP
I believe you’ve learnt something in this lesson. Our next lesson, we will also treat two topics before we move to HTML 5. Till then, keep practicing, keep learning.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment