In this 3rd article of HTML and CSS for beginners series you are going to learn how to use HTML links images and email links to your web pages. You will learn what HTML tags you need to create hyperlinks and how you can add images to your HTML pages.
Links are most important part of web. Without links there is no use of web. When ever you visit a website you see a lot of links. You see main navigation menus with lot of links that helps you to access different pages on that website.
For example if you visit main page of tahirtaous.com, you see title of 10 most recent article on my blog. Each post title links to single post page. When you click on post title, you see complete article. You can also see i have created main navigation menu with many links.
Lets make it more simple, this is 3rd article. Here you can see links for part 1 and part 2 of HTML and CSS for Beginner series.
- HTML beginner tutorial pdf download: Creating first webpage
- HTML for beginner : Code Editors, Headings & Paragraphs
HTML links
Creating links also known as hyper-links is easy in HTML. You need to use following HTML tags.
This is basic mark up to links in HTML
<a href=""> </a> Between "" you need to type actual url or web address and just before </a> this is closing tag, you can type text for your link. Let’s create a link.
<a href="http://tahirtaous.com/contact"> Contact Me</a> As you can see between "" i have added complete url of contact page and just before closing anchor tag </a> i have typed text that will be displayed when some one will see my web page.
HTML code
<a href="http://tahirtaous.com/contact"> Contact Me</a> Result in browser
Contact Me This is just a simple example, I hope now you can use anchor tag. Lets create few more links. Now in example below you can see how i have used HTML link tag that will take you to my twitter and GooglePlus profiles.
Example 1: Link to Twitter
HTML code
<a href="https://twitter.com/tahirtaous"> Follow me @TahirTaous</a> Result in browser
Follow me @TahirTaous Example 2: Link to GooglePlus
HTML code
<a href="https://plus.google.com/+TahirTaous"> Add Tahir Taous on GooglePlus</a> Result in browser
Add Tahir Taous on GooglePlus Now create an HTML document use anchor <a href=""> </a> tag and create few more links. After creating links open your HTML document in browser and click on links to make sure they are working. If links don’t work, there is something wrong. Check and correct mistakes.
Creating links locally
You don’t need t type full URL or address of any website, for example if you are creating a simple few pages website with HTML and CSS. You don’t need to type http://www. You can just type name of your other pages with .html extension.
Suppose you have created your first HTML page successfully and saved it as index.html. Now you want to create second page. Save your second HTML page as about.html or anything you want. Now on your first HTML webpage (index.html) add following HTML mark up.
<a href="about.html"> About us</a> Open your index.html file in browser (Firefox, Chrome, Safari etc) and you will see about us link. If you want to link back to your index.html file, it is easy you can type following code on your about.html document.
<a href="index.html">Visit Home Page</a> Note: Remember both files index.html and about.html must be in same folder otherwise your links won’t work.
Links and accessibility
When creating links always use descriptive text for link text. Never ever use Click here, here and here for link text. Click here does not explain anything. As you can see in previous examples i have used descriptive text for all example links.
When some one will read link text or even if someone will scan my web page he can understand the purpose of link. A lot of people use click here as link text, don’t use it. Here you can see for all four links i have used descriptive text.
- HTML beginner tutorial pdf download: Creating first webpage
- HTML for beginner : Code Editors, Headings & Paragraphs
- Follow me @TahirTaous
- Add Tahir Taous on GooglePlus
Opening links in new tab/window
If you will click on y of above link in this article, target page will open in same window. Sometimes you don’t want users to leave your website when they click on links on your website. You can use set target blank. See example below.
HTML Mark up
<a href="" target="_blank"> </a> <a href="http://google.com" target="_blank"> Open google in new tab</a> Result in browser:
Open google in new tab
As you can see most important thing in above anchor tag is target="_blank" that forces browser (FireFox, Chrome, Safari etc) to open this link in new tab or window. And remember you need to add target="_blank" with in opening anchor tag.
How to add Images with HTML
Images make your blog posts and websites visually appealing and attractive. Images are one of the most important part of web after links. We love to share photos on our favorite social media platforms. That’s why we see billions of photos on facebook, twitter, instagram and many other social networking websites.
Now you are learning HTML and you need to know how you can add images to your HTML web pages. It is very simple and easy, You just need to use special HTML tag to add images to your web pages. Here is HTML tag for images.
<img src="" alt=""> - img = image
- src = Source of image
- alt = Alternative text for image, if image is missing or not found
I have tried to explain image tag in simple words. Lets make it more simple and clear. Suppose you have an image rose.png in your LearnHTML folder or what ever name of your project is. You need to use following tag.
<img src="rose.png" alt="red rose"> If you have created separate folder for images under your main project, you will have to type complete source address.
<img src="images/rose.png" alt="red rose"> We are telling browser that our image is under images folder and image file name is rose.png. You can see i have also provided alternative text “red rose” for image.
Must provide alternative text for images: It is best practice and highly recommended to provide alternative text for images. It helps blind people because text reader will read aloud your alt text for image. What if your image is missing and not found. What if you delete your image from server by mistake.
Sometimes when user browse your blog or website on a slow internet connection. Images fail to load. You should provide good alt text for each image. For example if you want to use logo image for you site title you can provide something like this
<img src="images/logo.png" alt="sitename.com logo">
Using images as links
many websites and blogs use images as links. Many bloggers display a featured images with small blog post excerpt on home page and you can click on image to read complete blog post. If you want to use images as links, it is easy and simple. You will have to wrap image tag with link tag.
Normal HTML Link
<a href="about.html">
about us
</a> Image as Link
<a href="about.html">
<img src="images/about.png" alt="tahirtaous.com about us">
</a> As yo can see in above example i have just replaced link text (about us) with HTML image tag. Isn’t it simple and easy.
Now it’s time to make your pages attractive with images and more useful and informative with links.
Links to email
It is not a good thing to add email to your HTML page because spammers are always looking for your email address. Spammers use softwares to find email address. If you want users to contact you via email, there is a special HTML link for this action.
email Link
<a href="mailto:[email protected]"> Contact me via Email </a> Result in Browser: Contact me via Email
Now if visitor will click on email link, their email program will open a new email with your email address already in the To: filed.
Providing Subject for email : You can also provide predefined subject for email.
<a href="mailto:[email protected]?subject=email Subject"> Email Me </a> Providing Subject and body text for email : You can not only provide predefined subject but body text too for email.
<a href="mailto:[email protected]?subject=email subject&body=some text for email body"> Email Me </a> Email with Subject and Body text
Note Firefox displays a pop up window that let’s you choose gmail, Yahoo or installed application/program. Chrome won’t do anything if there isn’t any email program installed on your computer.
Final Words
In this detailed tutorial you have learned how to add images to your web pages and create links. You can create email links, images as links and normal links. Feel free to share your experience with us in comments.
Leave a Reply