Links and Lists
Sometimes it is needed to create texts or images which
clicking on them will bring us to other web pages on the same website or
another websites. In this lesson we learn how to create such page links. In
addition we will see how we can create lists of items in our web pages.
Text links
Creating a text link is easy. We use <A> </A>
tag to do this. <A> tag has a few
important parameters. The most important parameter is the HREF which contains
the address of the link.
Example 4-1: page4-1.html
<HTML>
<HEAD>
<TITLE>Example 4-1</TITLE>
</HEAD>
<BODY>
<A
HREF="http://www.yahoo.com">Click here to visit Yahoo</A>
</BODY>
</HTML>
Above code creates a link to Yahoo website. As you see we have
used HREF parameter to specify destination web page. Text between <A> and
</A> is the link text. By clicking on the link text, user will be
navigated to the destination page.
Image links
In previous section we used a text as a
link. It is possible to use an image instead of text. To do this, you must
replace link text between <A> and </A> with an <IMG> tag which
displays an image file.
<HTML>
<HEAD>
<TITLE>Example 4-1</TITLE>
</HEAD>
<BODY>
Click on below picture to visit my
homepage:<BR><BR>
<A HREF="http://www.learnem.com/"><IMG
SRC="logo.gif"></A>
</BODY>
</HTML>
In above example clicking on picture
will bring surfer to the address inside HREF attribute of <A
HREF=".."> tag.
If you test above code in a browser you
will notice a blue border around the picture (you should have a logo.gif image
file in the same directory as the html file). This blue border is added by
default to for the image links. You can remove the blue border by adding a “border=0”
parameter to <A> tag.
Example 4-2: page4-2.html
<HTML>
<HEAD>
<TITLE>Example 4-2</TITLE>
</HEAD>
<BODY>
Click on below picture to visit my
homepage:<BR><BR>
<A HREF="http://learnem.com"><IMG
SRC="logo.gif "></A>
<BR><BR>without link border :
<BR><BR>
<A HREF="http://learnem.com"><IMG
SRC="logo.gif" border=0></A>
</BODY>
</HTML>
Figure
4-1: Image
links with and without border
Email links
If you have surfed web for a while you might have seen
links that when you click on them your email program (outlook, thunderbird …) will
starts with a "compose new message" window. The email address on the
link will be put in receiver email address box. Look at example below to see
how you can make a link to an email address.
<BODY>
Click on below link to send an email to
me <BR>
<A
HREF="mailto:webmaster@learnem.comt">Email Me</A>
</BODY>
If you want, you can also specify a subject for the email.
This example will show you how to do this:
Example 4-3: page4-3.html
<HTML>
<HEAD>
<TITLE>Example 4-2</TITLE>
</HEAD>
<BODY>
Click on below link to send us your comments.
<BR>
<A HREF="mailto:webmaster@learnem.com?subject:comments
about your site">Email Me</A>
</BODY>
</HTML>
Lists
Sometimes you want to organize items related to a subject
in list form in your web page. HTML provides you with tags to do this.
<UL></UL> tags are first choice of these tags.
Example 4-4: page4-4.html
<HTML>
<HEAD>
<TITLE>Example 4-3</TITLE>
</HEAD>
<BODY>
This is a list of subjects covered in
this lesson:
<UL>
<LI>Text Links
<LI>Image Links
<LI>Email Links
<LI>List of Items
</UL>
</BODY>
</HTML>
Figure
4-2: Lists
Result page will display list items in separate lines
started with a small bullet. You see that we have entered list items started
with a <LI> tag between <UL></UL> tags. <UL> tag is a
part of list tags (Figure 4-2).
If you want the items to be identified by numbers, you should
use <OL></OL> tags instead of <UL></UL> tags.
<OL>
<LI>Text Links
<LI>Image Links
<LI>Email Links
<LI>List of Items
</OL>
Horizontal Separator Rule
Another useful html tag that you will sometimes
use is <HR> tag. If you need to separate text in your web page by a horizontal
lines, you may use this tag.
<BODY>
First section
<HR>
Second section
</BODY>
Output of the above code is two lines
of text separated by a horizontal rule. You can specify a few parameters for
horizontal rule. If you want to change width of rule you can use width
parameter. Width in percent:
<HR WIDTH="50%">
Width in pixels:
<HR WIDTH="100">
You can also determine line size
parameter to change line diameter.
<HR size=5>
It is obvious that you can mix
parameters with each other. Horizontal lines
created by <HR> tag have a shade by default. You can force a solid line
instead of a shaded line, by adding a NOSHADE parameter.
<HR SIZE=1 NOSHADE>
You can also determine a color for your
line:
<HR color="#00FF00'
NOSHADE>
Above line will not have a shade and it
is a solid green line.
End Note
In this lesson you learned how to use
text links, image links, email links, lists and horizontal separator. Until now
we have covered general HTML tags. In next lesson we will cover more. We will
then start more advanced subjects such as tables, frames and forms.
Exercises
1. Create a page with a link in it which points to yahoo web site. Center the link in your screen. Use things you learned about paragraphs in previous lesson.
2. Change above example to use an image as a link to points to yahoo web site. Remove blue border around the picture.
3. Insert both of the exercises 1&2 in a single page and separate text link from image link by a solid green line with a width equal to 50% of the screen width.
4. Create a complete contact page (html code) for yourself. People visiting this page must be able to send you comments about your homepage.
5. Create a complete web page that contains a numbered list of courses you are interested to find on the internet.
Next Lesson
|
