Lesson 8
How to link section of the page?
How
to Add Images?
How to Link images?
How to open the page/link
in New window?
Color
chart: Click here to chose color for your background.
How to Link a section
of the Pages?
Here we will learn how to add links to the
specific section items. It uses <a
name> tag. It is called anchor name tag. Same
page sections or specific items of the same page or different
pages can be linked by this tag.
Ex. If you click on the top link of this page "How
to add image" you can see it takes you to the same
topic. That's how this tag works.
Here is our basic <html> tag . In this tag
we will add <a name> tag to create links for particular
section of the page. Copy and paste this basic tag in your
notepad or our feature 'Practice HTML'.
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<p>Hi,
Welcome to my web.</p>
</body>
</html> |
How to add <a name> tag?:
Ok le't begin!!!
Suppose you want to link "Heading A" to "Heading
B".
First we'll add html code for "Heading A".
Here we are going to use the same <a
href=" "> tag and
we will need to add # sign
with it and you can give an anchor name for it. Here we
are using anchor name as 1,
2, 3 or
a, b, c etc.
Ex. You
can give different anchor name for different items or subheadings.
#1 or
#a for first item
#2
or #b
for second item
#3
or #c
for third item
Ok let's write the code for your "Heading
A".
Heading A
<a href="#1">Heading
A</a>
Now let's write the code for "Heading
B". Since we are linking "Heading A" with
this second heading so we need to establish the same anchor
name for this heading also. Since
anchor name for "Heading A" is
1 so anchor a name for "Heading
B" will be 1.
Heading B
<a name="1">Heading
B</a>
Copy this code and paste it in
your "Notepad" save it and see it in your browser.
When you click on the link of "Heading A" it will
take you to "Heading B".
We've added lots of lines in between, you'll need to add
more lines (at least 40 lines) till you see scroll bar otherwise
it will not work.
<br> tag is used for line breaks.
|
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<p>It
is your first link.
<a href="#1">Heading
A </a>
line1<br>
line2<br>
Add more lines<br>
line 3<br>
line4<br>
line5<br>
line 6<br>
line7<br>
line8<br>
line9<br>
line10<br>
line11<br>
line 12<br>
line13<br>
line14<br>
line 15<br>
line16<br>
line17<br>
line 18<br>
line 19<br>
line 20<br>
Here is your Second link<br>
<a name="1">Heading
B</a>
</P>
</body>
</html>
|
Suppose you want to give anchor tag to another file/page for ex. if you have link in first page and it should point to the second page of some particular section then it should be something like this.
Ex:
The First page will get the link <a href="page2.htm#1">
The Second page's (page2.htm) first heading should have the link <a name="#1">
How
to add Images:
Ok let's see how to add images in web page. Save this picture
in your c:
drive directly in .jpg format. Give it a name candle.jpg.
If you do not know how to save pic click
here to learn. Ok so your image location or address
will be c:\candle.jpg
Your image must be always in .gif, .jpg, or .jpeg format
to use in web pages.
Here is the tag for adding image in your web site.
<img src="image
name ">
My image name is "candle.jpg" so now final
tag will look like this. But this tag cannot work. We'll
see why.
<img src="candle.jpg">
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<img src="candle.jpg">
</body>
</html> |
When you save this code and look in the
browser it will show this image. It means Image is not found
or browser is not able to locate the image file. So this code
should show the actual location/address/url of the image file.
You might remember at the beginning we've
saved the candle image in our c: drive. So it's location will
be c:\
Ok so now our <img> tag will look
like this. It has image file name (candle.jpg)
& also it has address c:\
where actually the file is saved.
<img src="c:\candle.jpg">
Now copy this code and paste it in your
"Notepad' save it and look into your browser how it looks.
You should be able to see the candle image.
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<img src="c:\candle.jpg">
</body>
</html> |
How to add Link to Image?:
You can add link in your image as you've
added the link on text. The same tags will work with it too.
The same <a href=" ">
tag is needed for it. and with it you'll need your image tag
<img> too.
<a href="http://www.jasminecorp.net">
<img src="c:\candle.jpg">
Ok now let's see how our code will look
like: Copy this code and paste it
in your Notepad and look into your browser how it works.
When you keep your mouse on image candle
your mouse pointer will trun to a hand. It means now your
image has link on it. When you click on this image it will
take you to Jasmine computer's page. The same way you can
give any desired page's link over your image.
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<a href="http://www.jasminecorp.net"><img
src="c:\candle.jpg"></a>
</body>
</html> |
How to open a page/link
in New window?
It is so simple. Let's take our
basic <a href=" ">
tag.
Add with it target=_blank
so that the page will open up in
new window.
<a href="http://www.jasminecorp.net"
target=_blank">
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<a href="http://www.jasminecorp.net"
target=_blank">Open
it in new window. </a>
</body>
</html> |
