Basic HTML Tutorial for Beginners – Setting Hyperlink and References – Web Design Tutorial

Basic HTML Tutorial for Beginners – Setting Hyperlink and References – Web Design Tutorial


Today we will be learning on ‘hyperlinking
some text documents’. So what is this ‘Hyperlink’ thing is?
Actually there will be a particular text or image, which will be linked to another document
or text or another website as an instant and when you will be linking to that particular
text or that particular link, this page will be redirected to that page and you will be
reaching to another new different page or new different document or image, so all we
have to do is to know how to hyperlink these text and references.
So this is the thing we are going to learn today. Now, let’s put it this way, I am
trying to make these particular word ‘perturient’, which should be hyperlinked, that means, on
clicking this particular word, we will be reaching to another new document. So how it
is possible? In this case, what we actually do, we use
some particular tags and some particular attributes, and hyperlinking these texts and references,
they are as: the first thing is followed here istag. Thistag is actually an
anchor tag. This is the tag which tells you which exact text or image or document has
to be hyperlinked. So, this is the anchor tag that we have provided here.
Now, another attribute which is used here as ‘href’. This is the attribute that
actually links your text, or image to another text or document. This is known as ‘Hyperlink
Reference’. You are now just making a reference, so, now if you want to open a particular image
or document, or another page actually, in that case all you have to do is to mention
actually the hyperlink reference here, that is the URL, or the relative path so far you
have used here. URL is a separate thing, that is used in your, i.e., in case of your websites;
and the relative path is that which is actually determined, on which particular location,
your document is exactly sitting. So first of all, we are trying to open a new image
here. In doing so, all we have to do is to go here again, and then, this is the folder
which is known as ‘image’, as we did previously, we are doing over here, we are first pressing
F2, or right-clicking on it, we are going to ‘Rename’ and we are copying this directory
or folder name. We are coming back to our notepad, making a slash over here, then I
am entering into it, and I am choosing the file name, suppose I am choosing this ‘[FILENAME]’….
So all I am doing here, pressing F2, or right-clicking on it, going to ‘Rename’, and I am copying
this whole file name along with its extension name. This is the extension name – .JPG. So,
all I am doing is copying this thing, copying this file name here.
Now I am returning to Notepad, right-clicking on it and select ‘Paste’. So, the main
thing is, I have placed an anchor tag with a hyperlink reference of the directory name,
and the file name which is to be opened here, along with the extension name, and this whole
think is known here as the ‘Relative Path’, and this is the word which is actually going
to make all this tricks, on clicking this particular word ‘perteureant’, we are
going to see a new image, which is located at this address. So, now let’s save this
page, go to file, save, come back to your browser, and reload, and you see that this
particular word is now executing a new kind of display, it is actually blue in color and
it is now getting underlined…this particular text is hyperlinked, and now, if we click
on it, we will be entering into this particular image. Now here’s, another problem, you
see that whenever you click over here, this particular image, which is hyperlinked to
that particular text, is opening into same tab. What if, you wish to open that image
on different tab, like this—this is known as another tab. So what if you want to do
is to open your image into another tab? So in that case, all you have to do is to mention
a particular attribute over here, like you get back to your project and mention this
one . Now, just go to file, save, come back to your
project and reload. Actually, you will see nothing over here so far, but if you click
the linked text here, you will see now that your image is opening on a new, different
tab. That means, this is your new tab, and this is your exact website where exactly you
are sitting on, and this is another tab where your linked image is now being opened, is
now opening into a new tab. So actually HTML uses four particular attributes
in case of opening your linked document. They are known as ‘_blank’, ‘parent’, ‘_self’
or ‘_top’. All of this properties they have particular different nature, different
kind or pattern of opening a document. Some of them opens your document into new window….
Now, if you use ‘target=”_self”’, go to file, save, just reload, now click and
you will see that, the document is now opening onto same tag. So all you have to if you have
to open your document into a new tab or new window all you have to do is to set your hyperlink
reference into target=”_blank”, and you see that your targeted document is opening
into a new tab. You see here? This is opening into a new tab. So these are all hyperlink
references. Now, if you are about to link a separate website,
as we are trying to here, we are trying to link this particular website, this is an entire
new website here, which should be located into different server, all you have to do
you have to copy the URL address of this webpage and then you have to come back, and all you
have to do is to change your relative path to URL to that particular website. Now you
go to file, save, come back to your project, and reload and if you now click here, you
will be now entering into this separate website, into the webpage of this separate website,
into the index page of this separate one. Now in case, in the same manner, if you want
to link your image, like we have seen that this image source, there is an image over
here. Now, if you just want to link this image, which will be opening to another linked text
or document over here then all we have to do, you have to first come back here, copy
this thing, paste it over here, you have provided the anchor tag and hyperlink reference as
the address of the website that you are targeting to link and set the target to blank, that
means, on clicking this image, this web address will actually be opening into another new
tab and then you just close your anchor tag and then you go to file and save it, and now
if you come back to your web page and reload, and you click on the image, you will be seeing
that the image is now opening into that particular web address or website into a new or different
tab over here. So next thing we will be learning about is
Form elements that are present in HTML.

Leave a Reply

Your email address will not be published. Required fields are marked *