Download presentation
Presentation is loading. Please wait.
1
Enhancing Your Web Site—Adding Links 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.
2
Adding Links
3
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 Address”>
4
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.
5
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 example: <a href=” Yahoo! </a>
6
Linking to Open in a Different Browser Window
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=“ target=“_blank”> Yahoo! </a>
7
PLEASE NOTE: GOLD TEXT IS HTML CODE OR SOMETHING YOU MUST DO!
Let’s Practice Adding Links PLEASE NOTE: GOLD TEXT IS HTML CODE OR SOMETHING YOU MUST DO!
8
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.
9
<title> Your Name Fourth Web Page</title> </head>
<html> <head> <title> Your Name Fourth Web Page</title> </head> <body bgcolor="gray" text="white"> <font size=6> This text is a <a href=" link </a> to a page on the World Wide Web. <br><br> This is a link to the <a href = " 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
11
Adding Links to Connect Web Pages
12
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 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>
13
Let’s Practice Linking Pages
14
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 on your Image Web Page!
15
Linking Page Practice Cont’
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
16
Save the Notepad & Refresh the Browser
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 Browser
18
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.
Similar presentations
