Creating a Web Site with Links

Hyperlinks, or links are used to connect a Web page to another Web page on the same, or a different, Web server located anywhere in the world. You can use either text or an image in which the mouse pointer changes when it is moved over the area. Let's begin a new web page using the following example.

Example 2-1

<HTML>
<HEAD>
<Title>Frank's Music</Title>
</HEAD>
<Body>

</Body>
</HTML>

Now we are going to enter a heading, but this time we will change the color of the text. To change the color of the text you will use the <FONT> tag. The format you will use to change the color is <FONT Color=" "> and </FONT> using the six digit color code for the color of the font in between the two quotation marks. Other font attributes that you can use are <FONT FACE="Impact"> to change the font type and <Font Size=4> to change the font size. The font size ranges from 1 to 7 with 1 being the smallest and 7 being the biggest.

Example 2-2

Now let's enter bulleted text into our web page.

Example 2-3

<HTML>
<HEAD>
<Title>Frank's Music</Title>
</HEAD>
<Body>
<Font color="#000066><H1 Align="center">Frank's Music</Font></H1> <P>Frank's Music is the premier music company for all of North Texas. Frank's has expanded to the World Wide Web. This new division which specializes in allowing internet surfers to order music online with the best prices and quickest delivery.</P>
<H2>Our Company</H2>
<UL Type="square">
<LI>Founded in 1996 by Frank Sanders
<LI>Headquartered in Dallas, Texas
</UL>
<H2 Our Service</H2>
<UL Type="square">
<LI>Web page ordering of current music titles
<LI>Online database of all CD titles in stock
</UL>
</Body>
</HTML>

Using images in a Web Page

There are three types of files that can be used as images: JPEG, GIF, and PNG. A JPEG is a graphic image that is saved using compression techniques to make it smaller for download. A GIF is also a graphic image that is saved using a compression technique. A PNG file is also a compressed file that supports multiple colors and resolutions. The tag you use to add an image to a web page is <IMG> with the attribute SRC used to define the URL that you want to load.

To add an image as a background you will use the BACKGROUND attribute to insert the background image on the Web page. The BACKGROUND attribute defines the source of the image and tells the browser where to locate the image you want displayed An example would be <Body Background="file.jpg">.

Example 2-4

Adding Links to a Web Page

The <A> and the </A> tags are used to create links to other web pages. This is often called the anchor tag because it is used to create anchors for links within the same web pages. You will use the Hypertext REFerence attribute to link to another web page. HREF indicates the name or URL of the file to which you are linking to. You will use the HREF attribute inside of the <A> like this: <A HREF="www.yahoo.com">. To see how this is used in a HTML document, complete the next document.

Example 2-5

<HTML>
<HEAD>
<Title>Frank's Music</Title>
</HEAD>
<Body Background="background.jpg">
<Font color="#000066><H1 Align="center">Frank's Music</Font></H1> <P>Frank's Music is the premier music company for all of North Texas. Frank's has expanded to the World Wide Web. This new division which specializes in allowing internet surfers to order music online with the best prices and quickest delivery.</P>
<H2>Our Company</H2>
<UL Type="square">
<LI>Founded in 1996 by Frank Sanders
<LI>Headquartered in Dallas, Texas
</UL>
<H2 Our Service</H2>
<UL Type="square">
<LI>Web page ordering of current music titles
<LI>Online database of all CD titles in stock
</UL>
<P>To learn more about our service that we provide to all music lovers, please browse our site or call us at (817) 554-3254. To see Joe's music online page--<A HREF="Joe's.htm">Click Here</A></P>
</Body>
</HTML>

To add an e-mail link to your site you would once again use the <A> and </A> tags. Though this time you would use the word "Mailto" inside of your quotation marks to indicate to the browser that this link is used for e-mail. This would look like this: <A HREF="mailto:joe@hotmail.com>.

Example 2-6

<HTML>
<HEAD>
<Title>Frank's Music</Title>
</HEAD>
<Body Background="background.jpg">
<Font color="#000066><H1 Align="center">Frank's Music</Font></H1> <P>Frank's Music is the premier music company for all of North Texas. Frank's has expanded to the World Wide Web. This new division which specializes in allowing internet surfers to order music online with the best prices and quickest delivery.</P>
<H2>Our Company</H2>
<UL Type="square">
<LI>Founded in 1996 by Frank Sanders
<LI>Headquartered in Dallas, Texas
</UL>
<H2 Our Service</H2>
<UL Type="square">
<LI>Web page ordering of current music titles
<LI>Online database of all CD titles in stock
</UL>
<P>To learn more about our service that we provide to all music lovers, please browse our site or call us at (817) 554-3254. To see Joe's music online page--<A HREF="Joe's.htm">Click Here</A></P>
<P>E-mail your comments and questions to <A HREF="mailto:Franks@hotmail.com">Frank's music</A></P>
</Body>
</HTML>

Save your HTML document as Franks.htm

Creating Links to another Web site

Another type of link that you can create is a link to another web site. You create this link by using the <A> with the HREF attribute, but this time between the quotation marks you type the URL address of the web site. An example would be <A HREF="http://www.yahoo.com>Yahoo</A>.

Example 2-7

<HTML>
<HEAD>
<Title>Frank's Music</Title>
</HEAD>
<Body Background="background.jpg">
<Font color="#000066><H1 Align="center">Frank's Music</Font></H1> <P>Frank's Music is the premier music company for all of North Texas. Frank's has expanded to the World Wide Web. This new division which specializes in allowing internet surfers to order music online with the best prices and quickest delivery.</P>
<H2>Our Company</H2>
<UL Type="square">
<LI>Founded in 1996 by Frank Sanders
<LI>Headquartered in Dallas, Texas
</UL>
<H2 Our Service</H2>
<UL Type="square">
<LI>Web page ordering of current music titles
<LI>Online database of all CD titles in stock
</UL>
<P>To learn more about our service that we provide to all music lovers, please browse our site or call us at (817) 554-3254. To see Joe's music online page--<A HREF="Joe's.htm">Click Here</A></P>
<P>To view the Top 50 songs of the day go to the <A HREF="http://www.billboard.com">Billboard Top 50</A></P>
<P>E-mail your comments and questions to <A HREF="mailto:Franks@hotmail.com">Frank's music</A></P>
</Body>
</HTML>

Formatting Text

To change the way that text appears on the screen one can use a number of tags. Some of the more commonly used are <B> and </B> to bold text, <U> and </U> to underline text, and <I> and </I> to italicize text.

Example 2-8

<HTML>
<HEAD>
<Title>Frank's Music</Title>
</HEAD>
<Body Background="background.jpg">
<Font color="#000066><H1 Align="center">Frank's Music</Font></H1> <P><B><U><I>Frank's Music</I></U></B> is the premier music company for all of North Texas. Frank's has expanded to the World Wide Web. This new division which specializes in allowing internet surfers to order music online with the best prices and quickest delivery.</P>
<H2>Our Company</H2>
<UL Type="square">
<LI>Founded in 1996 by Frank Sanders
<LI>Headquartered in Dallas, Texas
</UL>
<H2 Our Service</H2>
<UL Type="square">
<LI>Web page ordering of current music titles
<LI>Online database of all CD titles in stock
</UL>
<P>To learn more about our service that we provide to all music lovers, please browse our site or call us at (817) 554-3254. To see Joe's music online page--<A HREF="Joe's.htm">Click Here</A></P>
<P>To view the Top 50 songs of the day go to the <A HREF="http://www.billboard.com">Billboard Top 50</A></P>
<P>E-mail your comments and questions to <A HREF="mailto:Franks@hotmail.com">Frank's music</A></P>
</Body>
</HTML>

Adding an Image to your Web Page

The tag to insert an image onto your web page is <IMG SRC>. This tag tells the browser that you are inserting an image <IMG> and the source, or where the image is found, (SRC). An example of this tag would be <IMG SRC="file.jpg">. This tag does not require a closing tag. Some other attributes that can also go in this tag are Height and Width to set the height and width of the image.

Example 2-9

<HTML>
<HEAD>
<Title>Frank's Music</Title>
</HEAD>
<Body Background="background.jpg">
<Font color="#000066><H1 Align="center">Frank's Music</Font></H1> <P>Frank's Music is the premier music company for all of North Texas. Frank's has expanded to the World Wide Web. This new division which specializes in allowing internet surfers to order music online with the best prices and quickest delivery.</P>
<H2>Our Company</H2>
<UL Type="square">
<LI>Founded in 1996 by Frank Sanders
<LI>Headquartered in Dallas, Texas
</UL>
<H2 Our Service</H2>
<UL Type="square">
<LI>Web page ordering of current music titles
<LI>Online database of all CD titles in stock
</UL>
<IMG SRC="pic.jpg" Border=0 Height=110 Width=182 Align=Right> <P>To learn more about our service that we provide to all music lovers, please browse our site or call us at (817) 554-3254. To see Joe's music online page--<A HREF="Joe's.htm">Click Here</A></P>
<P>To view the Top 50 songs of the day go to the <A HREF="http://www.billboard.com">Billboard Top 50</A></P>
<P>E-mail your comments and questions to <A HREF="mailto:Franks@hotmail.com">Frank's music</A></P>
</Body>
</HTML>

Creating an Image Link

You can also create a link using an image. You would do this by using your <A HREF> and </A> tag but in between the two tags you would use a tag for an image. An example of this would be <A Href="http://www.yahoo.com:><Img src="yahoo.gif"></A>.

Example 2-10

<HTML>
<HEAD>
<Title>Frank's Music</Title>
</HEAD>
<Body Background="background.jpg">
<Font color="#000066><H1 Align="center">Frank's Music</Font></H1> <P>Frank's Music is the premier music company for all of North Texas. Frank's has expanded to the World Wide Web. This new division which specializes in allowing internet surfers to order music online with the best prices and quickest delivery.</P>
<H2>Our Company</H2>
<UL Type="square">
<LI>Founded in 1996 by Frank Sanders
<LI>Headquartered in Dallas, Texas
</UL>
<H2 Our Service</H2>
<UL Type="square">
<LI>Web page ordering of current music titles
<LI>Online database of all CD titles in stock
</UL>
<IMG SRC="pic.jpg" Border=0 Height=110 Width=182 Align=Right>
<P>To learn more about our service that we provide to all music lovers, please browse our site or call us at (817) 554-3254. To see Joe's music online page--<A HREF="Joe's.htm">Click Here</A></P>
<P>To view the Top 50 songs of the day go to the <A HREF="http://www.billboard.com">Billboard Top 50</A></P>
<A Href="http://www.Arista.com"><IMG SRC="music.jpg></A>
<P>E-mail your comments and questions to <A HREF="mailto:Franks@hotmail.com">Frank's music</A></P>
</Body>
</HTML>

<<Return to Table of Contents

<<Return to Beginning HTML Page

Go to Creating Tables>>