HTML 5-Adding links & Publishing Your Page
Objectives
Students will link their webpage with another webpage.
Students will use the anchor tag set.
Students will save their page in another directory.
Students will proofread and trouble shoot their page.
Instructions
You are going to add links to your webpage now. A link is a line of text, button, or picture that you can click on to take you to another page. The other page can be on your own server (maybe a second page you created) or it can be a page across the world on another server. You can have as many links on a page as you would like to have.
We use the Anchor tag to make a link. The anchor tag is a little bit different in that the tag is different than the slash tag (kind of like the image tag...although there is no image slash tag). It looks like this:
<A HREF="nameofdirectory/namoffile.html">This is a link</A>
Just like in other links, you put the text you want to be able to click on between the tags. You can also put an image between the tags like this:
<A HREF="http://www.bigfoot.com/~teechur">
<IMG SRC="button.gif"></A>
In the above anchor tag clicking on the picture "button.gif" would take you to my homepage. You can also have text AND a picture.
To summarize:
a. A link is made with an anchor tag.
b. The anchor tag and slash tag look different
<A HREF="..."> is the tag
</A> is the slash tag
c. You can have text, graphics, or text and graphics be a link.
d. After the <A HREF= you need to put the name of the file. If you are linking your page to another page that is out in the world somewhere you have to put the entire URL in there. (Like my http://www.bigfoot.com/~teechur).
1. First let’s practice creating a link. At the top of your page, underneath the <body> tag, type <A HREF="file:///T-Bird%20Server/HTML/test.html">This is a test.</A>
NOTES:
a. A HREF can be in small or capital letters, it doesn’t matter.
b. You MUST put quotes around the name of the file.
c. There is a space between the A and the HREF only...no other spaces.
d. The contents of the container will be underlined on your page.
e. The filename must be typed EXACTLY as shown. There is a difference, on the internet, among test.html, Test.html, and test.HTML. If you do not type it exactly, it will not work.
Save. Go to MacWeb and test your link. Click on the "This is a test" that is underlined at the top. If you end up on a page that says "Hi!" at the top, you did it correctly! If it doesn’t go anywhere, go back to Simpletext and make sure you have typed the above information correctly.
2. Next you are going to link your page to the MJHS Homepage on the internet. Since your work will be in the same file and the homepage we do not need a pathname. A pathname is the directory and computer a file lives on. For example, my webpage lives on a computer named www.eskimo.com in a directory called ~tory. In this case the server I have my homepage on does not need a filename because every person names their main webpage "index.html" on our server. If I want to go to another page in my site, I would need a filename. For example: http://www.bigfoot.com/~bigfoot would take you to my home page.
You are going to link to the MJHS page. To do this:
a. Open your webpage in Simpletext and your MacWeb program.
b. Scroll down to the bottom of your page. Click ABOVE the </body> slash tag.
c. Type <A HREF="mjhs.html">Back to the Junior High</A>
d. Save
3. Now you are going to create another link to the "class" page (a page that will have a list of all of your names with links to your pages).
a. Below the last link type a link to "class.html" The clickable text should read, Back to Class.
b. Remember to use the tag/slash tag.
c. Save
4. For one more link, you need to add a link to one of your friend’s pages. Since all of your pages will be in the same directory (folder) you can just put the tag and slash tag using the name of their file. For example, if my friend Harold had a page I wanted to link to, I would type: <A HREF="harold.html">Meet my friend, Harold!</A>
That would link my page to Harold’s page.
Now that you have done that, you are ready to publish your page. You are going to save your page in a different directory, but first you need to do ALL of the following:
1. Check your page. Make sure you have no spelling errors or tag errors.
2. At the bottom of the page you need to give yourself credit at the pagemaster. Type the following:
a. <H3>I am the Pagemaster</H3><BR><H4><A HREF="mrsk.html">Tory Klementsen</A> is the Webmaster.</H4>
This will put your name bold and my name smaller with a link. The district requires that we have the webmaster’s name (moi) on every page.
Questions
1. What does the anchor tag look like?
2. What does the anchor slash tag look like?
3. What three things can be used as links?
4. If a link is on another computer, what else do you need to include in the anchor tag besides the filename?
5. What is a URL?