Enhancing Your Web Site—Adding Links Web Page **YOU MUST HAVE COMPLETED THE 1ST 3 WEB PAGES BEFORE...

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

http://www.yahoo.com/

http://www.yahoo.com/

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"> This text is a <a href="http://www.yahoo.com"> link </a> to a page on the World Wide Web. 

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: 

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:

• Click here to go back to the <a href ="My4thWebPage.html"> 4th

Page </a>

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.

Enhancing Your Web Site—Adding Links Web Page **YOU MUST HAVE COMPLETED THE 1ST 3 WEB PAGES BEFORE...

Documents

Transcript of Enhancing Your Web Site—Adding Links Web Page **YOU MUST HAVE COMPLETED THE 1ST 3 WEB PAGES BEFORE...