Skip to content

04.md

Latest commit

 

History

History
71 lines (43 loc) · 4.69 KB

04.md

File metadata and controls

71 lines (43 loc) · 4.69 KB

Lesson 04: Letters and Reports and Notes, Oh My!

This Spider Weaves with Chain

The World Wide Web got its name, not from the physical network of wires and signals we use to communicate (that's the Internet), but from its most recognizable feature: hyperlinks. (That's also where HTML got its "hypertext.") If the Web can be said to have a shape, it is formed from the hyperlinks in pages. Anytime a URL occurs in a page, in a way that is meaningful to browsers, that's a link. The most well-known type of link is the kind that we click to view more content, called an anchor. (The terminology just walks all over any attempt at a metaphor.)

An anchor is placed in HTML with the a tag, and the URL goes in its href (hyper-reference) attribute:

<a href="http://www.example.com/foo.html">Here</a> you go!

Take a Swing at It

  1. Open Visual Studio and select your solution from File > Recent Projects and Solutions.

  2. In the Solution Explorer panel on the right, double-click index.html.

  3. Just after your opening body tag, press the Enter key, then the Tab key. When an element is nested inside another, its tags are generally indented one more level than those of its parent. Visual Studio will ensure that a new line begins with as much indentation as the previous one.

  4. Paste this where your cursor is now:

     <a href="/02.html">example from lesson 02</a>

  5. Click the green arrow to test your site. If you like, change the HTML file to see how the browser reacts.

Absolute and Relative Paths

If your URL contains a domain name, such as www.example.com, it's absolute and where it refers to is obvious. (Note that http://www.getscammed.com/www.example.com/ only contains one domain name.) Let's break these things up:

http://
scheme name, or protocol
www.example.com
domain name
/foo.html
path

If a path is absolute, it starts from the webroot of the website. For example, the absolute path of this file, on the GitHub server, is /Jesdisciple/WebDevPractice/blob/master/04.md. It implies that there's not really anything "above" the Jesdisciple directory, but that's only because what's there is none of our business. Your webroot is the folder for your Static project, so /02.html refers to the file named 02.html in the Static folder.

But relative URLs don't even have to have the initial /; the URL 02.html would require the browser to assume that the destination file is in the same directory as the current one. In this case, the path part of the URL is also relative; /02.html is an absolute path but a relative URL. (Absolute URLs cannot contain relative paths.)

At this point, you might think that if the file you want to link to isn't in all the same directories as the one to contain the link, you need to use an absolute path. Not so; .. means the containing directory, and it can be chained: ../../.. ascends three directories. (You can use that to get an error from your server for trying to look at its private parts.)

Fragment Identifiers

Anchors can link to other files, but also to specific parts of files. A fragment identifier is an optional part of a URL, just after the path. It begins with # (pound symbol or hash) and should correspond with the value of some element's id attribute. In following it, a graphical browser will:

  1. ensure that the file referred to by the path is currently displayed (it might already be, and then this does nothing);
  2. scroll the page so the first matching element is at the top of the screen.

Targets

Normally when a browser follows a link the URL is loaded into the current window[1], but you can change this behavior. An anchor with a target attribute will have its URL loaded into the window with a name matching the attribute's value. If no such window yet exists, one is created with that name. Or you can use the _blank keyword as the value to always load the URL in a new window, rather than replacing anything.

</lesson>

Now that you have paragraphs and links, you can make a simple set of text-only pages. Put your Lego stories in them, or make notes for yourself about XHTML. Whatever content you put in them, make sure to mark each paragraph with a p element and link the pages together. We'll be spiffing those pages up as we go; the next lesson introduces a bunch of elements for doing just that.

References

  1. For the purposes of Web development, a browser tab counts as a "window."