Lesson 6 Links

Creating Folders  For every web site/page, you need to create a separate folder  The computer cannot find links if they are not stored together in a folder  For example, if you want create a web site with multiple pages, all the pages need to be stored in the same folder  If you want to include an image, you will want to store your image in the same folder as the web page on which it appears  For the Gettysburg Address page, create a folder called presidents in your folder and move your Gettysburg page there.

Anchor Tag and Links  The anchor tag or... is used to link to other web pages  Anything can become a link: a button, a word, a phrase or a picture  Let’s say you want to be able to find more information on George Washington, you can make his name a link.  One site with a bibliography is shington  You must use the entire web site address in your anchor tag.

Anchor Tag to a website  You will need the name of the file or the URL you want to link to AND  The link hotspot – the highlighted text or graphic that will be clicked on to get to where you want to go  Inside the tag, you need the attribute (href), meaning hypertext reference  It works like this:  hotspot text  The George Washington tag would look like this George Washington ( )

This goes before the words George Washington on your page. Now place the ending anchor tag after the words George Washington on your web page and before the dates of his presidency ( ). This will make the words George Washington your hyperlink to the George Washington page on the web.

Try it  Save your page and open it in Internet Explorer.  Click on your George Washington link and see if it takes you to the page containing George Washington’s biography.

Linking to Other Pages of a Website  To build a web site, you can also link to other pages that you have created using the anchor tag.  If all pages are in the same folder, you can use just the file name in the tag instead of the entire path.

Let’s try this:  Your Graphic and Multimedia format page will be your index page or main home page.  Create a folder called Graphic Formats  Move your index.html page to that folder.  Now, create a new page called gif.html

To create the gif page Turn to page WS45 in your textbook, and type the code in #2 on to the gif page. Save the page to your Graphics Format folder as gif.html Now, pull up your index.html page and add the anchor tag around Graphics Interchange Format Graphics Interchange Format Test your links, both to the home page or menu and to the gif page

Graphic and Multimedia Folders Graphics Interchange Format.gif GIF files are popular for use on the World Wide Web. They can contain up to 256 colors. They are used for cartoons, logos, graphics with transparent areas, and animations. Menu

Let’s finish this website  Do the Step-by-Step exercises from your book on pp. WS49-WS54 to create your web pages to be linked to your index.html file.  Put anchor tags in your index.html file that will link your pages to the description of formats.

Adding a button   This is what it would look like:  Add color to your button: 