Welcome to chapter 4 of part 1. Previously
, we pimped our page just a little bit with paragraphs and headings. The problem is,our page looks like a word document and doesn't have the look of a web page! So what? That's the best I got.So far, it's the only thing you taught me! OK, enough!!!I know we didn't learn much but you don't have to rub it in! Let's learn something new today, shall we?Chapter 4: Hyper links
Hyper link is the technical term for link. I guess we all know what a link is! A link is some text that you can click to go to another page. To achieve this, we will use the <a> tag. The <a> tag can be used in two ways:
1.To create a link to another document, by using the href attribute
2.To create a bookmark inside a document ,by using the id attribute
1.Linking to other documents using the href attribute
Today,unlike the previous lessons, we will work with two pages : source.html and destination.html.
Source.html will have two links. The first one will take us to destination.html and the second to another website let's say google.com!
So let's fire up our text editor as usual then put the following code between the <body> and </body> tags and save your page as source.html:
<a href="destination.html">My link to destination.html page</a>
<a href="http://www.google.com">My link to google</a>
Unlike other HTML
tags,the <a> tag is not obvious to interpret. <a> means anchor and that's where the a came from. the href attribute specifies the destination of a link. In our case, destination.html or google.com.
The text between the <a> and </a> is what appears as the link. You should get something like this on your browser
If you don't get the same results, it's because you don't have a <br/> between the two links.
Note the text that appears is what we put between the two hyperlink tags.
Let's experiment on the two links. Click each one of them. My link to google will lead us to google's page but My link to destination.html page gives us a nice and sweet File not found error! Welcome to my world fellows. If you want to be a developer, you have to love errors, otherwise you will panic and get nothing done.
Anyone guessed where the error came from? It's quite obvious.The browser is looking for a resource that doesn't exist. What do I mean by this? I mean we haven't created destination.html yet and we referenced it in our <a> tag.
Create destination.html and put a paragraph or two.
<p> Hello there! Welcome to destination.html</p>
Save that as destination.html and voila!
Before we look at other uses of the <a> tag, let's look at the title attribute.This attribute can be used to provide some useful information when we hoover on a link.Let's modify our previous code.
Edit this line :
<a href="destination.html">My link to destination.html page</a>
And put this :
<a href="destination.html" title="This links us to destination page">
My link to destination.html page</a> Enjoy the results!
2.Linking to a bookmark inside a document using the id attribute
Let's say that we are writing HTML
tutorials and we put our table of content at top of our page like part 1,2 ...etc. What if we have a visitor who has prior knowledge of HTML and wants to go straight to a specific part or chapter or a visitor who doesn't like to read tutorials like a novel?The <a> tag permits us to easily navigate within a document. Let's practice and see how this works!Put this code
<a id="HTMLpart3">HTML part 3</a>
We just created anchor in our document called HTML part 3
. We are now going to create the link to the "HTML part 3" inside the same document.All you need to do is put harsh sign(#) followed by the anchor name like this:<a href="#HTMLpart3">HTML part 3 section</a>
And we are done.In order to see the effect of these codes, we have to have enough text on our page.Copy paste the following code and make sure you have as many paragraphs as possible before this line <a id="HTMLpart3">HTML part 3</a>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>My first web page !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<a href="#HTMLpart3">HTML part 3 section</a>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<a id="HTMLpart3">HTML part 3</a>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</body>
</html>
That's it for today.See you soon.
Till then, XoXo
Related links
Learn how to create you website from scratch :Chapter 1 of Part 1
Learn how to create you website from scratch :Chapter 2 of Part 1
Learn how to create you website from scratch :Chapter 3 of Part 1
No comments:
Post a Comment