5. The Link tag


A link is helpful when you have to match some web page together.
If you link two page of the same site, we call it an relative link.
But if you link two page of two differente site, we call it an absolute link.
There, an example of two relative link in the same web site

Example

We can see two pages, one called source, and the other called target.
Both of theme are in the same folder name "site" whici is located on the root of my computer.

If the target folder was located in the folder toto we should write this :

Target Folder


Mybe it look like quite difficult but, you'll see that it's very simple with a litle bit of practice.
Nevertheless, I hardly reccomend you to alway put all of your file in the same folder at the begining.

In order to make a link, you have to use this tags : <a>.
I will introduce the word "attributs". It's a parameter that we add in the tag in order to make more precision.
We use "href" for a link. Whith that, you will be able to locate your file and link it to an other.
There, the tag structure:

Source Code

Try this tag in order to see what it do.

Example

So, we only need to put the text into the <a> and </a> tags, and locate the web page with "href".
We made here an absolute link.
Now, Let see the relative link.
It's very simple, you will need two differents file, let's call them toto.html and titi.html for example located in the same folder.
Look at this code, you can understand it now.
in the titi.hmtl file, i'll put this code:

Example2

And in the toto.hmtl file

Example3

Not very complicated, isn't it?

Indeed, we folow the same way for relative and absolute link, we only add the name of the file we want to read and where is it located.
Congratulation, your are now able to build link and navigate on all web site of the web or in your own web site.

Challenge:

Could you make a link, build in order to travel not in an other web page, but in the same web page?
No?
So let's talk about the anchor!

6. Anchor.

An anchor is a "litle" link in a web page.
Whith it, you can travel into the same web page very quicly in a long web page.
Une ancre et un "mini lien" interne à la page.
For example, all FAQ are build with this model.

There are two differents steps when you create an anchor.
Firstable, you create an usualy link, but only the "href" will be modify.

Anchor Tag

Indeed, you have to put an # to informe the browser that you will build and anchor and not a link.
Secondly, you have to put the anchor where you want to go.
We use the "id" attributs to introduce it.

Source Code

Challenge : Could you create and anchor link to an other web page?
*
*
*
*
*
*
*
*
*
*
*

So??
Congratulation if you did it perfectly!
Here a correction.

Build a file called "page1.html" and an anchor called "anchor1"

Solution

All we need to do is to put the web adress before the # and to precise with "anchor1" where we want to go.

7. Image Tag


The image tag is a simple tag.

Source Code

This tag need two attributs in order to show your file, but be careful, only png, jpg, jpeg and gif are avaible.

Source Code

The two attributs are "src" and "alt"

We use "src" in order to locate the file and "alt" make a description of the picture.

At this part of the lesson, I'm proud to tell you that you know all the bases of HTML. Let's see the last part which talk about the new features of HTML5



 1, 2, 3, 4, 5, 6, 7