Tutorial 2 : Adding Hypertext Links to a Web Page

1. Creating a Hypertext Document Hypertext documents contain hypertext links, items that you can select to view another topic or document, often called the destination of the link. These links can point to: another section, the same document, to a different document, to a different Web page, or to a variety of other Web objects Adding Hypertext Links You can place hypertext links at the top of a web page to make it easier for the user to navigate to a particular section of the document instead of scrolling. Tutorial 2: Adding Hypertext Links to a Web Page

2. Creating Anchors • The <a> tag creates an anchor, text that is specially marked so that you can link to it from other points in a document. • Text that is anchored is the destination of a link; it is not the text you click on. • Each anchor has its own anchor name, using the "name" attribute i.e.<a name="cc">Classes</a>. • An anchor doesn’t have to be text. You can mark an inline image as an anchor. • <A NAME="Logo"><IMG SRC="SMUCOXLogo.gif"></A> • An anchor even does not have to have anything. It can be a blank! • <A NAME="heresthespot"></A> • Adding an anchor does not change your document’s appearance in any way. It merely creates locations in your Web page that become destinations of links.

3. How an Anchor Works hypertext links anchor hypertext link to the anchor at the top of the page When the user clicks one of the hypertext links, the link will go directly to that section (anchor, which is the destination of the link) within the web page.

4. Creating Links • To create a link to an anchor, use the same <A> tag you used to create the anchor. • The <A> tags used to create links are sometimes called link tags. • Use the HREF attribute, which is short for HypertextReference, to indicate the location to jump to. • HREFcan refer to an anchor that you place in the document or to a different Web page or a resource anywhere on the Internet • it is important to note that the HREF attribute is case sensitive • You link to an anchor using the anchor name preceded by a pound (#) symbol i.e. <A HREF="#gra">Grading</a>.

5. Creating Links Continued You should be careful to make each anchor name unique within a document. <P ALIGN=CENTER> &curren&nbsp<A HREF="#tests">Exams & Outside Exercises</A> &nbsp&curren&nbsp<A HREF="#ordlist">See an example of an Ordered List</A> &nbsp&curren&nbsp<A HREF="#deflist">Example of a Definition List</A> </P> The following code is down toward the middle of the page: <H3><A NAME="tests">Tests and Exams</A></H3> There will be two tests, each making up 35% of your final grade. Tests and exams must be taken at the designated times. If you are ill or called away on a family emergency, it is your responsibility to notify the professor before the test. A written excuse will be required in this event. <A HREF="#Top">Click here to return to the top of this page.</A> The name "Top" used in the HREF will always take you to the top of the current page. You do not need a <A NAME> tag at the top of the page!

6. Coding for this example

7. Linking to a Document • To create a link to a document, use the same <a> tag with the href attribute i.e. • <A HREF="Page2.HTML">Click here to obtain information about the nature of the course.</a>. • In order for the browser to be able to locate and open contact.htm, it must be in the same folder as the document containing the link.

8. HTML Code that Links to Other Documents The HREF tag will load the Page2.HTML file in the browser when the user clicks on the text between <A> and </A> tags.

9. The second page is linked back to the first page…… The next slide shows how this page looks in the browser. This is the hypertext reference back to the first page.

10. Here is what Page 2 looks like…….. Special Note………. • To navigate to a specific location elsewhere in a document, rather than the top, you can set anchors and link to an anchor you create within the document. • for example, to create a link to a section in the Web page home.htm marked with an anchor name of "interests," you create an anchor in home.htm in the section on Interests, and then enter the following HTML code in the current document: • <a href="home.html#interests">View my interests </a> • the entire text, "View my interests," is linked to the Interests section in the home.html file, via the anchor name "interests" • the pound symbol (#) in this tag distinguishes the filename from the anchor name

11. Using an Image to Link to Another Web Page • To create a link to another document using an image instead of a text description, use the following form: • <A HREF="URL"><IMG SRC="nameofimagefile.gif"</a>. • Where "URL", or Uniform Resource Locator, specifies a precise location of the document to which you want to link. • Example: "HomeKey.gif"

12. Linking to Documents on the Internet • To create a hypertext link to a document on the Internet, you need to know its URL. • A URL, or Uniform Resource Locator, specifies a precise location on the Web for a file. • You can find the URL of a Web page in the Location or Address box of your browser’s document window. • Once you know a document’s URL, you can create a link to it by adding the URL to the <a> tag along with the href attribute in your text file i.e. <A HREF="http://jcollins.cox.smu.edu/2308/2308.html">Course Information</A>. • Each URL follows the same format. • The first portion of the URL identifies the communication protocol, which is a set of rules that governs how information is exchanged. • Web pages use the communication protocol HTTP, short for Hypertext Transfer Protocol, so all Web page URLs begin with the letters "http". • Following the communication protocol, there is typically a separator, such as a colon and two slashes (://) i.e. http://www.smu.edu.

13. Opening the 2308 Web Site in a separate window Example web page with URL to the 2308 web site. The 2308 web page opened in a separate window.

14. Displaying Linked Documents in a New Window • By default, each Web page you open is displayed in the main browser window, replacing the one you were viewing last. • To force a document to appear in a new window, instead of the main browser window, you would use the target attribute in the href tag i.e. <a href="url" target="new_window">Hypertext</a> • url is the URL of the page, and new_windowis a name assigned to the new browser window • the target attribute is used by the browser to identify the different open windows in the current browser session • If you want your external documents to be displayed in their own browser window, you can assign a unique target value for each hyperlink, or you can assign the _blank keyword to the target attribute • For example: <A HREF="http://jcollins.cox.smu.edu/2308/2308.html" TARGET="_blank">Hypertext</A>.