Upload
chloe-parker
View
222
Download
2
Embed Size (px)
Citation preview
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.