Hello again and welcome to the fourth installment of the Introduction to HTML 5 and CSS 3!
We have covered so much stuff thus far! There is much to do yet and we have much more to cover!
Today we are going to talk about links and embedded images and other types of media that can be used within HTML!
So let’s get started with Hyperlinks!
First let’s look at a basic link in HTML this look will look like this:
<a href=https://www.arvixe.com>Arvixe Web Hosting</a>
It’s a bit confusing but quite simple at the same time let’s break this down so you can understand it better:
<a> attribute can be used a variety of way but most commonly used with the href attribute. This attribute defines what a link is pointed too.
Let’s take a look and see how this looks in a simple HTML document:
Based on the image above if the user clicks the link it will take them to google! There are a few attributes you can add to this so that it will make your life a little easier.
Below are the attributes and what they do:
- Target: this tells the browser where to open the link you have provided your choices are:
- _blank: This opens a new tab
- _self: this opens in the same frame as it was clicked
- _parent: opens the link in a parent frame
- _top: opens in the full body of the window
- Framename : this opens it in a named frame
Ok so now that you see that how do we use it? Well look at the image bellows and you can see that we throw the target attribute into our <a> tag as such:
<a href=http://www.arvixe.com target=”_blank”>click me to go to arvixe!</a>
The image below shows us how it’s incorporated into a HTML document:
As you can see we insert the target= attribute right after our link.
Another really cool thing you can do is set id tags for your links and link them within the page you are seeing so your viewer can navigate to certain sections and back to the top when they are done!
Let’s have a look at how this is done:
This is what is called an in-page navigation and it’s broken up as follows:
You would use the <a> tag still but instead of linking a website here you would do the following:
<a href=”#sec1”>Section One</a>
So we would have to have a section on our pages that is linked like this:
<h2><a id=”sec1”>Section #1</a></h2>
So above what we did was make the title to the section (Section 1) and then linked it by setting an “id” attribute to the title of the section. So let’s talk a look at how this could be set up within a HTML document!
The above image really gives you a good idea on how it should be set up. Please remember that you need to identify each section so you can link it in your menu.
Below is what it would look like within your browser:
It’s a pretty cool tool to have!
Next we will talk about different links that you can use!
First time is download links they are created pretty much the same way by specifying the files location on your server or the direct link where ever your download might be:
<a href=”software.zip”>Software Download</a>
<a href=”doc.pdf”>Document download</a>
Or you could do it this way:
<a href=http://www.example.com/downloads/software.zip>Download here!</a>
Or to specify on your server:
<a href=”../downloads/download.zip”>Download here!</a>
How to use email links:
<a href=mailto:firstname.lastname@example.org>Email us! </a> (Don’t forget your quotation marks around your links!)
I hope this helps out! Look for our next tutorial on Images within HTML!
If you have any questions please feel free to comment below!!!!