Lesson 8: More on Links
8.1 Linking Within Document
Linking within a document enables readers to go to a particular section of the document easily, instead of having to scroll up and down all the time.
<A HREF= "#section name"></A> Tag that create link to the targeted location
from elsewhere in the document.
<A NAME= "section name"></A> Tag that creates a target location within a document.
8.2 Example
<HTML>
<HEAD><Title> MSC</Title></HEAD>
<BODY Bgcolor= blue link=yellow vlink=red text =white>
<A NAME= "main"><H1 align=center>Multimedia Super Corridor(MSC)</H1>
<UL>
<P>The MSC is a Mega project undertaken by the <STRONG>Malaysian
government</STRONG> to transform Malaysia into advance nation in the field of IT. </P>
<H2>MSC includes the following projects:</H2>
<UL>
<LI><H3><A HREF= "#eg">Electronic Government</H3></A>
<LI><H3><A HREF= "#rd">Research and Development</H3></A>
<LI><H3><A HREF= "#tm">Telemedicine</H3></A>
<LI><H3><A HREF= "#ss">Smart School</H3></A>
<LI><H3><A HREF= "#mc">Multipurpose Card</H3></A>
<LI><H3><A HREF= "#it">IT infrastructure</H3></A>
<LI><H3><A HREF= "#bm">Borderless Marketing</H3></A>
<UL>
<DL>
<DT><A NAME= "eg"><B> Electronic Government</B>
<DD>A multimedia networked paperless administration linking government agencies within
Putrajaya with government centres around the country to facilitate a collaborative government and
efficient service to business and citizens. It will offers efficient, high quality administrative on-line
services to citizens and businesses.
<A HREF= "#main">Back to the top</A>
<DT><A NAME= "rd"><B> Research and Development</B>
<DD>
<A HREF= "#main">Back to the top</A>
<DT><A NAME= "tm"><B> Telemedicine</B>
<DD>To provide top class medical service especially for the rural people through advance video
conferencing and other network techniques
<A HREF= "#main">Back to the top</A>
<DT><A NAME= "ss"><B> Smart School </B>
<DD>To develop smart learning environment for all Malaysian students
<A HREF= "#main">Back to the top</A>
<DT><A NAME= "mc"><B>Multipurpose Card </B>
<DD>Smart Card for all Malaysians supporting key government, financial, health care and affiliated
applications.
<A HREF= "#main">Back to the top</A>
<DT><A NAME= "it"><B> IT infrastructure </B>
<DD>Open multimedia for network for easy interconnect.
<A HREF= "#main">Back to the top</A>
<DT><A NAME= "bm"><B> Borderless Marketing </B>
<DD>To make Malaysia a Regional Hub for companies to create and deliver marketing messages,
customer services and information products to their multicultural and multinational customers using
multimedia technology.
<A HREF= "#main">Back to the top</A>
</DL>
</BODY></HTML>
Click here to view the sample output.
Lesson 7:Links
Links allow us to browse to another section of a web page, to view an in-line image, another page within a web site, or another web site in the Internet.
7.1 Text Link
The tags are
<a href="filename">text</a> for linking to a local file.
<a href="URL">Web site</a> for linking to another web site.
7.2 Graphical Link
The tags are just the same, but use an image in the place of text.
<a href="filename"><img src="image.jpg"></a>
<a href="URL"><img src="image.jpg"></a>
7.3 Email Link
This link allows users to email the person whose email address is specified in the link.
The tag is
<a href="mailto:lliew@vbtutor.net">Email Me</a>
Now, copy and paste the codes below into your notepad and save the file as link.html.
<html>
<head>
<title>Links
</title>
</head>
<h1>This page contains various types of link</h1>
<hr>
<body background="back.gif" link=blue alink=green vlink=red>
<a href="image1.gif">Click to view image</a>
<br>
<a href="graphic.html">Click to view this web page</a>
<br>
<a href="http://www.yahoo.com">Yahoo!, the search engine</a>
<br>
<a href="http://www.vbtutor.net">Visual Basic Tutorial</a>
<br>
<a href="image3.jpg"><img src="image2.gif"><a>
<a>
<a href="http://www.geocities.com/vkliew"><img src="image1.gif"></a>
<hr>
<center>
<a href="mailto:liew
@vbtutor.net">Email Me</a>
</body>
</html>
Note: link=blue specified within the <body> tag means the link text will appear blue and vlink=red means the link text will appear red after a user has clicked on it(vlink actually means visited link). This is yet another parameter called alink which means active link that show the colour of the link text when a user is clicking on it.
Lesson 6: Inserting Graphics in the Web Page
The tag for inserting graphics in a web page is
<img src="image filename">
Web page normally support two types of image file, image.gif and image.jpg.There are countless graphics files that you might copy from the World Wide Web and then insert them into your web page. You could also create your very own own graphics using scanner and graphics tools like PC Paint Brush, Corel Draw, Adobe Photoshop and etc.
You could control the alignment, size of the image using the align, width and height parameter respectively as follows:
<img src="image.gif" align=position width=100 height=100 alt=image label>
* The alt parameter is to show the label of the image.
Graphics could also be used as background for your web pages using the tag as follows:
<body background="image.gif"></body>
Now please type the text below and save the file as graphic.html
<html>
<head>
<title>Inserting Graphics</title>
</head>
<body background=back.gif>
<center><font size=6 color=red>Inserting Graphics in Web Page</font></center>
<hr>
<img src=image1.gif>
<br>
<img src=image2.gif width=100 height=100 >
<br>
<img src=image3.jpg width=30% height=50% align=right alt="image3">
</body>
</html> |
Click on the image below and save them as your local files. They must be in the same folder as your graphic.html file.
back.gif image1.gif image2.gif image3.jpg
Click here for the sample output.
Lesson 5: Adding Colors
Adding colors to your web pages could achieve certain visual effect and make them more attractive. However, you must select colors carefully and do not overuse them. You can add color to your web page background and the text as well.
5.1: Adding Color to the Background of the Web Page
You can specify the color of the page's background within the body tags using the following code:
<body bgcolor=color>
The color attribute can be specified using normal words like red, yellow, blue etc. or by hexadecimal codes. Hexadecimal is a base 16 number system. Hexadecimal uses A for decimal 10, B for decimal 11, C for decimal 12, D for decimal 13, E for decimal 14 and F for decimal 15. Every color code in HTML is made up of 6 hexadecimal digits, from 000000 to FFFFFF. The hexadecimal codes might seem very complex, however, they actually make up of combination of three primary colors, i.e. red, green and blue(RGB). The last two digits specify the amount of red color, the middle two digits specify the amount of green color and the first two digits specify the amount of blue color.
For example:
0000FF=maximum red 00FF00=maximum green FF0000=maximum blue.
For other combinations, click here for the RGB color codes.
Now, try out the following page:
<html>
<head>
<title>Background Color</title>
</head>
<body bgcolor=red>
The background color of this web page is red. You can change the background color anytime by changing the color attribute specified by the bgcolor code. Try using the hexadecimal codes like bgcolor=FF00CC.
</body>
</html> |
Copy and paste the above codes to your notepad and save as bgcolor.html.
Click
here to view the sample output.
5.2 Adding color to the text.
5.2.1 Specifying the Color of the Normal Text
You can specify the color of the normal text (the default text is black) using the following code within the body tags.
<body bgcolor=blue text=white>
You may use normal words for the color attribute or use hexadecimal notation.
Now, try the following
<html>
<head>
<title>Text color</title>
</head>
<body bgcolor=blue text=FFFFCC>
The text color can be formatted using the text=color code. It is important that the color of the text is not the same as the background color, otherwise you won't be able to see the words.
</body>
</html> |
Copy and paste the above codes to your notepad and save the file as txtcolor.html
Click here to see the sample output.
5.2.2 Formatting Individual Font Color with the Font Tag
If you wish to add color to an individual character, word, sentence or paragraph, you may use the font tag. Font tag can also control font size and type of fonts.
The codes are as follows:
<font color=red>Red color text</font>
<font size=1 color=blue>Blue text with font size 1</font>
<font type="Times New Roman">Text in Time News Roman</font>
Now, copy the following codes and paste them into your notepad and save the file as font.html.
<html>
<head>
<title>Manipulaton of Fonts</title>
</head>
<body bgcolor=CCFFFF text=blue>
<font color=red size=4>Manipulation of </font><font color=brown size=4>Fonts</font>
<hr>
<p>
<font color=green type="Arial" size=2>You can manipulate font color , size and font type using
the font tags</font>.<font color=AA0000 size=2 type="Times New Roman">It can be done fairly
easily by anybody. Most important you must try it out yourself and dare to experiment with
anything.</font>
</p>
<hr>
This part of the text will appear blue.
</body>
</html>
|
Click here for the sample ourput.
If we wish to list out a number of items, we could use the following types of listing:
4.1 The Unordered List
Also called unnumbered list or bulleted list. The HTML tags are shown as follow
<UL>
<LI>item 1
<LI>item 2
<LIitem 3
</UL>
*Note that <LI> tag does not require a closing tag.
Example:
<HTML
<HEAD><TITLE>Unordered List</TITLE></HEAD>
<BODY>
<H2> Fruits</H2>
<HR>
<UL>
<LI> Apple
<LI> Grape
<LI> Orange
<LI> Pear
<LI> Pineapple
<LI> Water Melon
</UL>
</BODY>
</HTML>
Copy and paste the above codes to your notepad and save the file as uorlist.html.
Click here to view the sample output.
[back to the top]
4.2 The Ordered List
Also known as the Numbered List. It is very similar in structure to the unordered list, except each list item has a number in front of it, instead of a bullet. Also, the opening tag for the list is <OL> instead of <UL>, and the closing tag is </OL> instead of </UL>. Modify the codes in section 4.1 by changing the tags <UL> to <OL> and </UL> to </UL> and change the title to ordered list. Save the file as orlist.html.
Click here to view the sample output.
[back to the top]
4.3 The Nested List
This nested list contains lists within lists. Example:
<HTML>
<HEAD><TITLE>Nested List</TITLE></HEAD>
<BODY>
<H1 align=center><U> Internet Club</U></H1>
<OL>
<LI>Advisers
<UL>
<LI> Mr. Liew
<LI> Mrs James
<LI>Miss Irene
</UL>
<LI>Committee Members
<UL>
<LI>Nick
<LI>George
<LI>Francis
</UL>
</OL>
<BODY>
</HTML>
Copy the codes above and paste them to your notepad. Save the file as nested.html
Click here to view the output.
| Tags |
Description |
| <h1 align=position</h1> |
Tags which aligns the heading to the left, right and the centre |
| <strong></strong> |
Tags which strongly emphasize the bold format. |
| <em></em> |
Tags which gives more emphasis to the italic text. |
| <pre></pre> |
Tags which preserves the original text. |
| <sub></sub> |
Tags which format text as subscript. |
| <sup></sup> |
Tags which format text as superscript. |
| <hr> |
Tag which insert a horizontal ruler. Closing tag is not required here. |
| <hr width=n%> |
Tag which sets the width of the horizontal ruler. |
| <hr size=m> |
Tag which sets the height of the horizontal ruler. |
| <hr nonshade> |
Tag which creates the ruler without the shadow. |
| <p></p> |
Tags which define the paragraph. |
| <p align=position></p> |
Tags which align the paragraph to the left, right or centre. |
| <blink></blink> |
Tags which create a blinking text. |
Example:
Now, copy the following paragraph and paste it into your notepad or any suitable text editor.
Save the file as bean.html.
<html>
<head>
<title>Mr Bean</title>
</head>
<body>
<h1 align=center><u>All about Mr. Bean</u></h1>
<hr>
<h2 align=right>Date: Nov 30,2000</h2>
<hr width=50% size=10>
<p> <strong>Mr. Bean</strong>is a 50 years old boy, currently studying at <em>Cambridge</em>. His lecturer is <b>Mr. Mike Tyson</b>. There are 33 students in his class.</p>
<p align=center> Here are some facts about Bean</p>
<pre>
Date of Birth :01011900
Height : 100 cm
Weight : 100 kg
Marital Status : Single
Address : 1, Wall street, London,UK.
</pre>
<hr nonshade>
<P align=center> If you wish to match make for Mr. Bean, please contact him through the following phone number:<blink>911</blink></p>
<hr>
</body>
</html> |
Click here to view the sample output.
