Creating HTML Links and Images: A Learning Journey to Web Development
Hello folks! Welcome back to the journey again. Last time we learned about HTML Hierarchy tree. We’ve also learned about HTML Tags, Element and Attribute last week. Today, we’ll take a look at two of the very important (if not most important) tags of HTML. They are the anchor tag and image tag. We’ll be creating HTML links and images with them. So, Let’s begin!
This post is a part of the series A complete learning journey to web development where we are learning web development from the ground up. Be sure to join us there.
Creating HTML Links
Remember what we’ve learned from the HTML History? One of the most important goals behind creating HTML was to be able to link one document with another. Thus, the term ‘Hypertext’ is there in HTML’s name. So, No Doubt, Link is one most important thing that defines HTML from its very beginning.
Link is everywhere! I know for a fact that you use the internet. So, I am certain that you see an innumerous number of links every day. From Google to Facebook to YouTube, every page, every single content is connected together with links. If you think about it, you’ll realize that the entire web is made up of links. So, let’s how we can make our own links in our HTML file.
The tag that is used to make a link is the <a> tag. Here, a stands for anchor tag. Everything we put between the opening and closing <a> tag becomes a link. Easy! But wait, Question! It becomes a link to what? Where does this link take you?
Nowhere! This link points to nothing because we haven’t told it where to go. When we create a link, we must tell the tag where we want the link to take us. In another word, we must specify the address of our destination.
How do we do that? We do that with Attributes! In this specific case, we have to use the ‘href’ attribute to tell the <a> tag where to go when the link is clicked. For example, if want to create a link to Google, We’d do this:
<a href=”http://google.com”>Google</a>Output: Google
The ‘href’ Attribute
Now, what would happen If we didn’t use the href attribute? Try that yourself! The ‘href’ attribute is essential to use with <a> tag because a link without an address is not really a link. But it’s not the only attribute that you can use with <a> tag.
Besides all the global attributes of HTML, one of the important and most used attributes is the ‘target’ attribute. It specifies how a link is opened when we click on them. If you click on the Google link we’ve just created, It’ll open Google directly in this same browser frame replacing the current page you’re viewing. But what if we want the link to open in a new tab? We use the ‘target’ attribute.
Take a look at the code below.
<a href=”http://google.com” target=”_blank”>Google</a>Output: Google
Note: Medium adds target=”_blank” on every link automatically. So, you are not going see any deference in this two links. Try on your local computer.
Click this newly created link and see what happens. It opens in a new tab! Here, value ‘_blank’ means open google.com in a blank frame. The ‘target’ attribute also support the value of ‘_top’ and ‘_parent’ which respectively means to open links in top and parent frame. The default value is ‘_self’, meaning self-frame. Pretty self-explanatory, ha?
Creating HTML Images
Now that you’ve learned how to create HTML links, let’s learn how you can spice things up by inserting some images!
The tag we use to include an image on a web page is the <img> tag. Yeah, you guessed it right, img stands for image. Brilliant! The <img> tag is one of the very few tags that doesn’t have a closing tag. Which means, you only have to open it and don’t have to close it.
In HTML, we don’t create images on the page. We simply display image that is situated somewhere on the internet. So, to display an image, we must tell the ‘img’ tag the address of where the image is originally stored. And we do that using ‘src’ attribute, just like used ‘href’ with <a> tag. Here, ‘src’ stands for source.
Let’s see an example:
<img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/480px-Google_%22G%22_Logo.svg.png”>Output:
I’ve searched Google for a Google icon and I found that icon which is hosted somewhere on Wikimedia. And now I am telling my <img> tag about that source, and it’s fetching the image from there. That way, you display any image stored on the internet on any web pages, As long as you have permission to do that.
If you’re trying to display an image from your local computer, you need to specify where the image is stored, in as it’s on your computer and not on the internet, you have to use file path instead of URL.
If you have your image in the same folder where your HTML files are, you only need to write the filename (including extension) as it is on the same path. But let’s say you have a different folder named ‘image’ where you’ve put your image. In that case, your file path would be: scr=”image/YourFileName.jpg”. Just like that.
The ‘alt’ Attribute
Same as <a> tag, ‘src’ isn’t the only attribute to use with <img> tag. Another important attribute that you should always use with <img> tag is the ‘alt’ attribute. It stands for ‘alternatives’ and it displays an alternative text when the image can’t be loaded. It also serves a few different purpose including telling the browser and visually impaired users what the image is about. So, Always be sure to use ‘alt’ with your image.
The size of the image can also be controlled via the ‘height’ and ‘width’ attribute of <img> tag which I’ve shown in the code pen below, but most of the time, you’ll do that via CSS.
Putting them together
So, Now we know how to create links and display image on a web page. What if you want to display an image and make it a link? Is that possible? Of course it is! You must have seen clickable image somewhere on the internet, right? Let’s put this two powerful tags together! Check out the codes and comments in the pen below:
To create a clickable image, we just need to combine this two tags by nesting the image tag inside the anchor tag. Because everything we put in between the anchor tags, becomes a link; As we’ve stated earlier.
Hope that clears it.
Conclusion
As always, feel free to tinker with the code. Make changes and see what happens. Remember, Mistakes is the best way to learn. If you are not doing any mistake, you’re not trying anything new!
We will learn about HTML List and Table; Another two important tags of HTML in the future posts. Be sure to comment if you have any question or confusion about anything. I am always up for discussion. And please share this post on your social networks so that we can have more learner.
So, that’s it for today. Keep mistaking and I’ll see you soon!
