September 15

posted Sep 14, 2011, 5:50 AM by Peter Knowles   [ updated Sep 15, 2011, 1:21 PM ]
Lists and Links
Part II
1) It's time to start learning about links. Use the following tutorials to learn about how links work and how to code them. 
Keep in mind that for links, you're talking about tags and attributes together to create a complete element (remember what all those words mean? If not, revisit your Anatomy of a Web Page notes from September 8 for a review)

2) To begin with, you'll be creating links to different pages using the correct link syntax:
<a href="url">Link text</a>

Here's an example of a correctly coded link to an external page:

<a href="http://google.com">Google</a>
Can you "read" it? Do you know where it will go? Do you know what it will look like?

How about this one?
<a href="http://google.com">Yahoo</a>
Although they would look different on a page, they would take you to the same location, right?

Try it out: Open a Google Doc, copy the code for a perfect page into the document, then, in the body section of the document, code at least four different link elements. Your link tags have to be attached to something, so you could write a paragraph, then link specific words to outside pages, or, since you just learned to make lists, maybe a list of My Favorite Web Pages would work. That much doesn't matter too much, but make sure the text inside the tags accurately indicates the destination, and make sure the tags correctly indicate the URL where you want to go. (Copying and pasting from that location is the best way to make sure you don't mess up on the typing). Then call Mr. Knowles over to see it.

Here's an example:
The White Salmon Valley School District has the following schools:


ANCHORS
Although links are often used to take you to a different page, they can also take you to a place on the same page where the link appears. This is often used to get from one spot to another quickly on a page with lots of stuff. Here's how they work:

 After you've successfully created links to four different pages, now it's time to try out some links to anchors within the same page. Revisit the tutorials above:
and pay special attention to the information about linking to anchors inside the same page. The syntax remains the same (<a href="url">Link text</a>) but instead of a URL in the opening tag, you'll indicate a name on the same page as the link with a hash mark and the anchor name, like this:
<a href="#name">Link text</a>
But this will only work if you have created an id tag with EXACTLY the same name as the #name in your link. 

Try it out 2:You're going to need a page with lots of text in it. 
  1. Open a new Google Doc, copy the code for a perfect page into the document. Then, go to http://www.lipsum.com/ and create 4 or 5 paragraphs of text (look for the window in the bottom right corner). 
  2. Copy the text that is generated, then paste it into the body of your document. 
  3. Place <p> tags at the start of each paragraph and </p> tags at the end. 
  4. Add <h2></h2> tags between each paragraph, and name them paragraph 1, paragraph 2, etc. 
  5. BUT inside the opening <h2> tag add an id="p1" for paragraph 1, id="p2" for paragraph 2, etc.
  6. Go to the top of the Body section, and enter an <h1></h1>tag with a title (Anchor Tags or something like that.
  7. Create a list (ordered or unordered) with four or five items (depending on how many paragraphs of text you created) named Paragraph 1, Paragraph 2, etc.
  8. Then, create a link to the proper paragraph using the <a href="#name">Link text</a> tag. It might look like this:
<ol>
<li><a href="#p1">Paragraph 1</a>
<li><a href="#p2">Paragraph 2</a>
etc....

Show Mr. Knowles so he knows you can do it.

Now try a couple of specialized links. 
  1. Create an email link to yourself somewhere on your page. Use the <a href="mailto:> tag to make it work.
  2. Create a link that opens in a new window using a target tag.
HINT: you'll find the best information for doing this at the W3Schools Tutorial on links site.

Have you got it? Can you make lists of various types and create links of various types? If so, you're ready to get started on Assignment #2: Linked Lists
Comments