You might want to include some images on your page.
If you have a picture of a mouse in your files titled "mouse.jpg", and you want to put it on your page:
1) Insert the line <IMG SRC="mouse.jpg"> where you want the image to appear.
2) If you would like a border around the image, insert the attribute BORDER= "#" where # the thickness in pixels that you desire. Like this:
<IMG SRC="mouse.jpg" BORDER = "2">
3) If the image is too large, you can make it smaller and easier to see by inserting the attributes WIDTH="x" HEIGHT="y", where x and y are your desired height and width in pixels. Like this:
<IMG SRC="mouse.jpg" WIDTH="100" HEIGHT="200">
You may also include images from the Internet if you know the images location. For example, lets add an image from the Directory One website to the top of this page.
Type <IMG SRC="http://www.directoryone.com/images/header.gif"> underneath your BASEFONT tag.
If you view your web page in the browser, you will now see that you have added the Directory One header to your page.
As you recall, the HT of HTML stands for "HyperText", which means you can create links in your page that lead to other pages, like a doorway. A web page is just a page when it sits all by itself. But when it has links, it becomes much more alive and interactive. In our example page, the story of Pipsqueak and Gerhard, perhaps we want to link our readers to a page all about the history of Rio and Carnival.
Links have 3 main components: the destination, the label, and the target. The destination, of course, is where your link will send whoever clicks on it. That is usually another web page, but it could also open an email, play a bit of music, or more. But most often links direct you to another page or "URL". The pages you link to could be other ones you create or those created by other people.
To create a link to another one of your own pages:
1) Type <A HREF="page.html">, "page.html" being the page you are linking to. That is the URL of your destination.
2) Now type what you want your visitors to see, the label text, such as "Learn more about Rio." This is the text that will be colored or underlined so that your visitors know it is a link. When this text is clicked on, it will direct the visitor to the next page.
3) Close the tag with </A>
To create a link to another page on a different URL (not your own):
1) Type <A HREF="URL">label text</A> Where URL is the URL you wish to link to, and "label text" is the text the user will click on to get to this other page.
Add a link to your NotePad example page by adding the following line towards the end of your page:
<BR><BR><A HREF="http://www.cnn.com/TRAVEL/DESTINATIONS/9702/rio.carnaval/">Learn more about Rio</A>
You'll notice we added a couple of breaks at the beginning of this line to separate the link from the rest of the text.
You have now linked to a site about Rio. Test your link in the browser.
You can even make an image work as a link, so your Directory One image could lead to the Directory One homepage. To do this:
Type <A HREF="www.directoryone.com"> before your IMG tag and </A> after it.
Your entire text should now look like this:
| <HTML> <HEAD> <TITLE>Pipsqueak</TITLE> </HEAD> <BODY TEXT="indigo"> <BASEFONT SIZE="1"> <A HREF="www.directoryone.com"><IMG SRC="http://www.directoryone.com/images/header.gif"></A> <H1 ALIGN="center">Pipsqueak The Mouse</H1> Pipsqueak the Mouse is much more adventurous than his moniker would suggest. One day he got it in his tiny little head that he wanted to go to Brazil and experience the extravagant hoopla of Carnival. <FONT SIZE="4"><P ALIGN="left"> Now, Pipsqueak did not want to enjoy the luscious festivities of Carnival all alone, so he decided to invite his best friend, Gerhard Goose, to come with him. But Gerhard was not answering his cell phone! Pipsqueak called and called, left messages, text messages, and numerous pages, but Gerhard was AWOL. Pipsqueak became worried.</FONT> <BR> <FONT FACE="Verdana, Helvetica"> Gerhard likes to go swimming.</FONT> <FONT FACE="Verdana" SIZE="2" COLOR="red"> Pipsqueak hoped he didn't fall in the lake! </FONT> <BR><BR> <A HREF="http://www.cnn.com/TRAVEL/DESTINATIONS/9702/rio.carnaval/"> Learn more about Rio</A> </BODY> </HTML> And Your Web page Should Look Like This:
Pipsqueak the Mouse is much more adventurous than his moniker would suggest. One day he got it in his tiny little head that he wanted to go to Brazil and experience the extravagant hoopla of Carnival. Now, Pipsqueak did not want to
enjoy the luscious festivities of Carnival all alone, so he
decided to invite his best friend, Gerhard Goose, to come with
him. But Gerhard was not answering his cell phone! Pipsqueak
called and called, left messages, text messages, and numerous
pages, but Gerhard was AWOL. Pipsqueak became worried. |
You might also want to create a link so that your visitors can email you. This is done with the MAIL TO link tag.
<A HREF=mailto:MWhitmore@directoryone.com>MWhitmore@directoryone.com</A>
By placing that tag at the bottom of your code (in the BODY section) a link will appear at the bottom of your web page that allows visitors to email you and make comments and/or praises.
<< Back to Part 4: Fonts, Size and Color | Part 6: Showing Off Your Work >>
Pipsqueak The
Mouse