Adding Links to a Web Page
Total Page:16
File Type:pdf, Size:1020Kb
INTERNET BASICS & BEYOND MRS. WILSON Adding Links To A Web Page Adding Links To A Web Page Introduction What are hyperlinks? A hyperlink is a word, phrase or graphic that when clicked on it sends the reader to a different web page or a section of a web page. It can also send the reader to an e-mail address window. Why are hyperlinks important? Hyperlinks are important because they make web pages unique. They allow readers to navigate web pages in a non-linear fashion. When reading print based material readers can only move through the document in one direction. What are the different kinds of hyperlinks? 1. Relative & Absolute links • Absolute pathnames – Refers to the full URL designation for a file. – <a href=“http://yahoo.com“> • Relative pathnames – Refers to file name construction based on the relationship of the file being linked from to the file being linked to. – <a href="page1.html“> 2. E-mail links E-mail links are different to other types of hyperlink in that they do not lead to a web page. When users click on an e-mail link on a web page, a new window opens up on the screen. This window is an e-mail new message box which allows the reader to send an e-mail directly to the e-mail address that appeared in the e-mail link on the web page and now appears in the ‘To’ field in the new e-mail message box. How do I create hyperlinks? 1. Creating links to other web pages The HTML tags that are used for linking web pages and non-web pages (e.g. e-mail addresses) are called anchor tags <a> and </a>. The anchor tag is not used alone it has to be attached to the URL (universal resources locator) of the web page that you want to link the pages to. The format for creating links is as follows: <a href=”url”> 2 • href: hypertext reference • URL (universal resource locator): This is the way that addresses are assigned to web sites. The URL spells out exactly where the Internet resource is located. Further explanation of the URL, using the Makerere University website address as an example is shown in figure 2. http://www.lehman.ac.uk/ Describes how data will be transferred across Internet lines, this is known as the Indicates that this is a protocol. The web uses the worldwide hypertext http protocol. document. Indicates the country of origin of Specifies the domain name of the web site. In the web this case ac stands for academic. Other examples include gov which stands for government. This section of the url is the name of the computer where the resource is located also called the hostname (directory). Figure 2. Anatomy of a URL An example of a link that takes the user to another web page is as follows: <a href=” http://www.rockypointschools.org”> Note: the web address needs to be written with quotation marks around it. You then need to add some descriptive link text to enable the reader to click on it, the HTML format is as follows: <a href=”url”>descriptive link text goes here</a> 2. Creating links to nearby pages The anchor tags are used as before and the HTML format is very similar to the one used when linking to web pages on a different web site. The HTML format is as follows: 3 <a href=”next.html”>the link text goes here</a> In the above code next.html stands for the name of the next page that you want to link your web page to. 3. Images as links—More to come on this! 4. E-mail links The HTML code for creating e-mail links is very similar to the links that have been introduced so far. The main difference is that a ‘mail to’ link is included in the anchor tags <a> and </a>. The HTML code is as follows: <a href=mailto:your e-mail address>write your link text here</a> Exercise: Complete this by the end of the next class. 1. Create a new page in Notepad. Use the supplied text on the next page as your first document. Make the words “New York City” in the first paragraph a link to http://www.nyc.com; find the URL and create a link to “Boston Conservatory” in the second paragraph; create a relative link to your two.html at the end of the page where it states “clicking here.” Create an e-mail link to your own e-mail address in the last paragraph. Please note the underscores as they represent where the links should go. 2. Create a second page in Notepad. Use the text on the next page for the second page of our exercise. Create the indicated links on two.html. Use the absolute link of http://idolonfox.com wherever you see the term “American Idol.” The home page link will link back to one.html. 3. If you have time on the first web page, add a background image of your choice. 4. Check the pages and the links in Internet Explorer. 5. If they do not work, check the code used in notepad carefully. 4 First HTML Document to be saved as ONE.html American Idol's Constantine Maroulis Born in Brooklyn and currently a New York City resident, 29 year-old Constantine Maroulis made it to the Top 6 on Fox's "American Idol 4." Maroulis took a break from his band, Pray for the Soul of Betty, to compete on "AI4." Maroulis trained at the Boston Conservatory and played "Roger" in the international touring company of "Rent." Maroulis is the youngest of three children. He credits his older brother and sister for introducing him to the arts. He cites Jim Morrison and Janis Joplin as two of his favorite singers. He was voted off on 4/27/05. Maroulis' final song was a rendition of Nickelback's "How You Remind Me.” E-mail me for more information about Constantine Maroulis. You can visit my other page by clicking here. Page 2 | E-mail me Second HTML Document to be saved as TWO.html. Could you be an American Idol? The X-Factor defined: What are Simon, Paula and Randy looking for? The race is officially on! The first round of auditions are over for American Idol and it is time to pick the finalists who will be given a shot at becoming America's next big thing. As fans tuned in last week to watch the first round of auditions a rolling wave of laughter, head shaking and giggles rocked the nation. From East Coast to West Coast, across the U.S.A. and Canada, viewers watched as hopeful after hopeful came before the three fates (a.k.a. Simon, Paula and Randy) with their hearts set on winning a spot on Season 2 of American Idol. Click for home page | E-mail me 5.