Introduction to Web Page Design
| Introduction | Essential concepts | Basic Skeleton | Headings | Controlling Formatting | Creating Links | Further Development |
Creating Links
The most powerful feature of any web page, other than the content of the page itself, is the ability to direct the user to any other web page on the Internet.The method used is the hyperlink.
| By Raouf Allim |
The following tags define how to create hyperlinks, <A HREF="URL">Text you want displayed</A>. The URL is a valid Internet address such as http://www.yahoo.co.uk.
Also shown is the method of introducing images onto your page. Your image is usually held in a directory somewhere on your server and it will appear on the page when you enter the code <IMG SRC="URL" WIDTH=? HEIGHT=?>. Although the width and height attributes are optional it is good practice to include them, otherwise the image will assume it's actual size, rather than the size you want.
| Link | <A HREF="URL"></A> |
| Link to location on another page | <A HREF="URL#***"></A> |
| Link to location on current page | <A HREF="#***"></A> |
| Link to Email | <A HREF="mailto:@"></A> |
| Define location | <A NAME="***"></A> |
| Display Image | <IMG SRC="URL"> |
| Alignment | <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT> |
| Alternate | <IMG SRC="URL" ALT="***"> |
| Dimensions (pixels) | <IMG SRC="URL" WIDTH=? HEIGHT=?> |
| Dimensions (% of page) | <IMG SRC="URL" WIDTH=% HEIGHT=%> |
| Border (pixels) | <IMG SRC="URL" BORDER=?> |
Example: - put a link to Yahoo on your page
<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
<H1>This is a level 1 Heading</H1>
<P>Creating a web page is as simple as this!!!!</P>
<P><FONT SIZE="7">This is font size 7</FONT></P>
<P><FONT SIZE="5">This is font size 5</FONT><BR>
<FONT SIZE="3">This is font size 3</FONT></P>
<P><FONT SIZE="3" COLOR="#FF0000">This is font size 3
color (note American spelling) red.</FONT></P>
<P><font face="Times New Roman">This
is font face Times New Roman</font></P>
<P><A HREF="http://www.yahoo.co.uk">Yahoo</A></P>
</BODY>
</HTML>
Note that the user will only see Yahoo as the address. Try clicking on the link to see it in action.
|
|
