Page Banner

Lesson Practice 2-1: Putting it Together
Links using Relative Paths


Task 1: Linking to Other Web Sites

  1. Open your template.htm in notepad++.
  2. Save immediately in your links folder as weblink.htm
  3. In the title element, add the title: Linking to Other Web Sites
  4. Add an h1 element in the body with the same text as was put in the title.

  5. Add paragraph elements containing links:
    1. Add a paragraph element with the text:
      This web page illustrates how to link to outside web sites <br />
      and also includes an email link.
    2. Add a paragraph element with the text:
      Here are three links of different types and attributes:
    3. Add another paragraph element, then type:
      This links to an outside web link - the Microsoft Corporation Web Site.<br />
    4. Still within that paragraph, add and anchor link <a></a> then add the href= attribute linking to www.Microsoft.com. Between the anchor tags, type: MicroSoft
    5. On the next line, add another paragraph element with the text:
      This link opens a new browser window and puts the linked website there.<br />
    6. Still in this paragraph, add an anchor link with the text Pangmania. Use the href attribute to link to Mrs. Pangman's website, and add the target attribute to make it open in a new browser window.
    7. On the next line, add another paragraph element with the text:
      This link opens a new browser tab and puts the linked website there.<br />
    8. Still in this paragraph, add an anchor link with the text W3Schools. Use the href attribute to link to the w3schools.com website, and add an attribute to make it open in a new browser tab ( _new ).
    9. On the next line, add another paragraph element with the text:
      This opens an email link to me.
      Still in this paragraph, add an anchor link with the text: Email Me!
    10. Add an href attribute to open an email window for writing a message. The value must say "mailto:(your email address)"
    11. You should now have one heading and six paragraph elements on your page.

  6. Indent, save and test:
    1. Before the third opening paragraph tag (the one containing the first link), press Enter and on the new blank line, add an opening blockquote tag.
    2. After the last paragraph closing tag, press Enter and add a closing blockquote tag.
    3. Before all four paragraph tags, press the spacebar four or five times to indent the code within the blockquote block.
    4. Save your work.
    5. Preview your page in the browser. The four link paragraphs should be indented under the first paragraphs. Make any adjustments needed and save the file.


Task 2: Using internal or anchor links

  1. Open your template.htm in notepad++.
  2. Save the file in the links folder, as anchorlink.htm
  3. In the title element, add the title: Using Internal Anchor Links
  4. Add an h1 element in the body with the same text as was put in the title.

  5. Add page text:
    1. Add an h2 element and type the following text:
      Here is a lot of large text to take up a lot of space so it will extend past one screen. It is copied over and over until the page is full.
    2. Copy and paste this text 7 or 8 times, to make a large block of text.
    3. Copy the h2 element a 2 or 3 times, to fill the page.
    4. Save and preview to make sure it is enough to fill the page, if not, add more.

  6. Create the internal link:
    1. In the opening tag of the first h2 element, add the attribute id= “top”. This provides a ‘bookmark’ within the document to link to.
    2. At the bottom, after the last h2 element, add a paragraph element and place an anchor element in it.
    3. Add the attribute href= “ ” and make the value #top
      Between the anchor tags, type the text: Click here to go to the top of the page.
      This creates the link to the anchor point defined above.

  7. Save your work, open it in the browser, and test the link. Notice that the link is blue before it is used, and turns purple after it is used.


Task 3: Linking to Pages in your Website

  1. Open your template.htm in notepad++.
  2. Save the file at the root of the HTML folder(outside all the folders but inside the Lesson site folder) as index.htm. This file will be your temporary home page until you make a better one later.

  3. Add content:
    1. In the title element, add the title: My Lesson Website Temporary Home Page
    2. Add a h1 element in the body with the same text as was put in the title.
    3. Add a h2 element with the text: Here are the Links to My Web Pages
    4. Add a h3 element with your name.
    5. Add a paragraph element with the text:
      This web page will link to the other pages that I create as I learn to use HTML.
    6. Add another paragraph element with the text:
      Click on a title and the link will take you to that page.
    7. Create a paragraph element for each of the following text lines:
      Text and Link Pages
      Link Pages
      Image Pages
      Table Pages
      List Pages
  4. Create links:
    1. After the Text and Link category paragraph, add a paragraph element for each of the three files you have created so far. Add the titles of the pages as each paragraph text.
    2. Link each title text to its appropriate page, creating a relative link to the correct location for each page.
    3. Add the title=" " attribute to each link to create a popup box to identify the link, using the filename.
  5. Save the file again and preview in the browser. Test all the links to make sure they work. Make any adjustments as needed, and resave.

  6. Publish your finished files in your folder of the class Share file.
  7. Open the index file in the new location and test your links.