=========================================================================== Today on The World Vol. 4 #142 Monday, June 1, 1998 =========================================================================== Continuing the tutorial on how to write Web pages from scratch with HTML, we're going to be moving more slowly now (I had to cover a lot of stuff in Chapter 1 because there wasn't a good place to break it up, but from now on I'm going to cover one topic per chapter to slow it down.) I assume you've followed the tutorials in Part 1, and absorbed the basics. If you're still shaky on how to mark up paragraphs, please read over Part 1 again. (kibo) --------------------------------------------------------------------------- HTML TUTORIAL -- CHAPTER 2 -- URLS & HOW THEY WORK 2.1 URLs So far I haven't even used the word "URL". A URL (Uniform Resource Locator; sometimes also called URI or URN) is like a filename, but it gives not only the name of the file, but the name of the computer it's on, and the directory (folder) containing the file. For example: http://world.std.com/~freduser/index.html ...is a URL indicating four things: (1) The kind of URL, "http:", means it's pointing to a Web page. (HTTP is the protocol computers use to send HTML to each other, as in a Web server sending a page to your Web browser program.) (2) "//world.std.com" is the name of the computer. Two slashes mean a computer. (3) A single slash means to go into a directory (folder), so "/~freduser" means to look in a directory named "~freduser". ("~" is often shorthand for "the home directory of the user whose name follows".) (4) "/index.html" is the name of the file. In other words: protocol://computer.place.net/directory/directory/filename The shortest Web URLs are just the names of computers (if no filename is given, it will try to load "index.html"): http://www.std.com (which is the same as) http://www.std.com/index.html (Most browsers would, if you just typed in "std", go to "http://www.std.com" automatically, because so many sites are named "www.something.com", and the browsers assume you want "http:". But when giving people your URL, it is important to give them a complete URL in case their browser doesn't know how to complete it. The full name of the computer always ends with .com or .net or .de or something. And, incidentally, tags can be in uppercase or lowercase letters, but URLs and filenames are generally "case sensitive"; "Filename.HTML" and "filename.html" are different files on UNIX machines such as The World.) If you're a Home Page Alone (HPA) customer on The World, your own URL will be something along the lines of: http://world.std.com/~login (Where "~login" is a tilde and your account name. Remember that that actually retrieves "index.html" if no filename is specified after "~login".) You could create other pages eventually, such as: http://world.std.com/~login/page_two.html http://world.std.com/~login/baseball.html You could create a directory named "food" with files named "index.html", "beans.html", and "rice.html" inside: http://world.std.com/~login/food http://world.std.com/~login/food/beans.html http://world.std.com/~login/food/rice.html Besides Web ("http:") URLs, some of the other kinds of URLs include: ftp://ftp.std.com gopher://gopher.micro.umn.edu/ telnet:world.std.com mailto:president@whitehouse.gov (Feel free to try all of those.) FTP and Gopher are means of connecting to a remote computer to download files (FTP is still pretty common, but Gopher's rare.) Telnet is a means of connecting to another computer to type in commands. "Mailto:" URLs are simply e-mail addresses. If you were to enter "mailto:president@whitehouse.gov" into your browser (or were to click on a link to that URL) the browser would open a window to type in mail to the President. Not all Web browsers can do all the protocols shown above (FTP, Gopher, Telnet, E-mail). There are three reasons you need to know how URLs work: (1) To give other people the address of your new Web page. (2) To find other people's pages when they give you the wrong URL. (3) To make links from your page to other pages. I know something like "http://www.std.com/~kibo/index.html" is a little creepy-looking at first (I mean the URL, not my site; well, okay, my site too) but after a while typing "http://" becomes second-nature. You'll even start saying "colon slash slash" in conversation, as in "Honey, would you feed colon slash slash the cat?" Bear this in mind, because we're going to make links all over the place a few installments from now (after I talk about mixing images with the text on your Web page -- that way you'll see how to make both pictures and text into links.) For now, here's a brief introduction to the black art of making a link from your page to another page. 2.2 Links (In Brief) There's only one tag needed to make a link (well, actually, it's a pair of tags because it has a "start" and a "stop" tag:) Click this link to go somewhere. You would use those within text, generally withing

...

. The area between and is the "hot link" part of the text, and the HREF= parameter is the "target" URL of the other page. To make that example more realistic, as it would appear on your completed Web page:

I like Kibo's site, even though it's annoying and makes my eyes hurt. Click here to see it. Be warned that visiting it is a complete waste of time.

(Digression-slash-rant: Saying "click here" is bad form because not all browsers operate by pointing and clicking -- for instance, some are navigated with the keyboard, such as lynx. Some Web surfers find "Click here" a tad insulting to their intelligence because normally you can tell that text is a link because it's underlined and/or in a different color. I suggest that the area between and be the explanation of where the link goes:) More stuff can be found at Kibo's site. There are three kinds of links: you can give an "absolute" URL, which specified the exact destination, like the one to "http://www.kibo.com". Or, if you are linking to another one of your pages within the same directory, you could use a "relative" URL -- for instance, if your index.html page wanted to refer to baseball.html you would use Want to see my baseball page? In other words, an absolute URL is the full URL of a page or site (generally run by someone else) while a relative URL is a more local destination -- generally a Web page that you own in the same directory. The third kind of link is the "internal" URL, which is often used on very long Web pages: it references a different part of the same page. That way, there can be a table of contents at the top of the page which makes the browser jump down to particular parts of the page. I won't discuss those just yet. In the meantime, before the more thorough discussion of links in a forthcoming chapter, why don't you experiment by making links to some of your favorite pages from another "practice" page? Copy this chunk of HTML into your text editor and save it as mylinks.html (or any other name you wish) and try adding a few more paragraphs with some formatting and links: My Links.

Links!

A good place to look for stuff is the Yahoo! Web index.

And here's a link to Kibo's stupid site.

I made this page when working with Chapter 1 of the tutorial.

Anyway, you'll learn more about links later. Next on the agenda: colorizing your page. (kibo) ========================================================================== [] Send suggestions for tips & URLs to today@world.std.com. We're also collecting links for our Web pages at eyeguy@world.std.com. [] To contact CUSTOMER SUPPORT, send mail to support@world.std.com or call 617-739-0202. [] To subscribe to the "Today" mailing list, send a note saying 'subscribe announcements' to majordomo@world.std.com. Subscriptions to this mailing list are open to World customers only. [] Mmm, Beefy! [] Today on The World is (C) Copyright 1998 by Software Tool & Die. Its contents may freely be redistributed as long as credit is given.