Post on 31-Dec-2015
Enhancing Your Enhancing Your Web Site—Adding Web Site—Adding Links Web PageLinks Web Page
Enhancing Your Enhancing Your Web Site—Adding Web Site—Adding Links Web PageLinks Web Page
**YOU MUST HAVE COMPLETED THE 1ST 3 WEB PAGES BEFORE YOU CAN DO THIS ONE.**YOU SHOULD HAVE COMPLETED THE LINKS NOTES SHEET ON 4-14 BEFORE DOING THE WEB PAGE.
Adding LinksAdding Links
Hyperlinks
• Main way to connect web pages and move throughout a web site.
• Uses the Anchor Tag <a> which is a set. <a> </a>
• Must have the href add-on (Hypertext Reference)
• The tag will appear as <a href=“URL, Filename or Email Address”>
Hyperlinks Continues
• The text after the <a href> is the Target or Active Hyperlink & will become the color Blue and Underline.
• Then after Clicking on the link, it will turn Purple.
Linking to the Net
• <a href = “page’s URL”> Word to be linked </a>
• The URL has to be the exact web site’s address including the http://
example:<a href=”http://www.yahoo.com”> Yahoo!
</a>
To make the Web Page Open in a Different Browser Window:
• put the add-on target=“_blank” after the url in the anchor tag.
example:<a href=“http://www.yahoo.com”
target=“_blank”> Yahoo! </a>
Linking to Open in a Different Browser Window
Let’s Practice Let’s Practice Adding LinksAdding Links
PLEASE NOTE: GOLD TEXT IS HTML
CODE OR SOMETHING YOU
MUST DO!
Creating a New Web Page
• Open a New Notepad (click File—New– from your MyImageWebPage.txt file)
• Click Format check Word Wrap• Save the new file as (NOTE THE FILE
NAME CHANGES HERE) My4thWebPage.html & My4thWebPage.txt
• When finished typing NEW CODE, don’t forget to Save the Notepad and Refresh your New Browser.
<html><head><title> Your Name Fourth Web Page</title></head>
<body bgcolor="gray" text="white"> <font size=6>This text is a <a href="http://www.yahoo.com"> link </a> to a page on the World Wide Web. <br><br>
This is a link to the <a href = "http://www.henry.k12.ga.us" target=“_blank"> Henry County School System's </a> website & it will open in a different Browser Window (Screen). </body></html>
Save the new Web Page & Refresh it’s Browser
Adding LinksAdding Linksto Connect to Connect Web PagesWeb Pages
Linking to Pages (Files) on your Disk/Computer
• If the file is not in the same folder as the HTML file, the file’s location has to be exact, including the drive’s name such as a:\ or c:\ or e:\ or f:\This is called an absolute link.
• To use absolute links on a desktop machine, you use the file:/// protocol. Like http://, it goes at the beginning of the location. (Note file:/// has three slashes.)Example of using a File on your disk, computer or flash:<a href=“file:///a:\Marquee Practice.html”>Marquee</a>
• If using a Folder’s Name:Example
<a href=“file:///a:\WebPage\Marquee Practice.html”> Marquee</a>
Let’s Practice Let’s Practice Linking PagesLinking Pages
• After the last thing you typed on My4thWebPage add:<br> <br> <br>
I have created a link that will go to my <a href="MyImageWebPage.html"> Image Web Page </a>
Now, Save, Refresh & Click on your Link.
You should now be onyour Image Web Page!
• When you clicked the link on My4thWebPage and it took you to MyImageWebPage,
If you wanted to return to My4thWebPage you could press the BACK button OR Simply create a link!
• Let’s try creating a Link from the Image Page back to the 4th page.
• With MyImageWebPage Browser showing, Open the Notepad THAT GOES WITH IT
Linking Page Practice Linking Page Practice Cont’Cont’
• Make sure you’re still on MyImageWebPage
• After the last thing you typed add:
• <br> <br> <br><font size=6>Click here to go back to the <a href ="My4thWebPage.html"> 4th
Page </a></font>
Save the Notepad & Refresh the BrowserSave the Notepad & Refresh the Browser
Recap Activity
• Add the tags from the LINKS IN HTML POWERPOINT to the HTML Tag Page and save.
• Tell your teacher when you have completed the web page assignments from this PowerPoint. Be sure you have saved everything with the correct file names.