R. Craig Collins >
Web Page Design >
Instructor Notes: Tutorial 2
R. Craig Collins >
Web Page Design >
Instructor Notes: Tutorial 2
Instructor Notes: Tutorial 2 © R. Craig Collins, 2005/6
As I have separate 'lecture' material on most of these topics, I will try to avoid duplicating information; but I still want to comment on some of the content :)
One of my big issues with this book is that one reason people began using the Web, instead of say Gopher, was the fact that Marc Andreeson envisioned web pages as more than just typed documents... they have color, as well as Tim Berners-Lee's idea of links to other documents. Tutorial one ignores both of these aspects, leaving the <body> tag too barren, and ignoring the tag to create hypertext links. (However the book is a good reference, even if I don't like the order in which they address items!)
This tutorial begins to address the three types of hypertext links, the basic
structure of which is
<a href="location"> </a>. The tutorial also covers path
statements, the ability of your web page to find local files, but files not
stored in the same folder as the current web page.
Session 2.1
Please note, you will not be turning in the web pages described
in this book tutorial, but you are encouraged to follow along in upgrading Mr.
Dubé's web page.
Hypertext links are best explained if you have ever gone fishing; you drop
anchor, do a little fishing as the boat drifts, and then you pull on the anchor
chain to get back where you were... so hypertext links allow you to drop an
anchor, go someplace else, then jump back to where you began; hence the tag
is <a> for anchor. You modify the tag with an attribute that points to
the hypertext reference (href) you wish to jump to, as in
<a href="location"> </a>.
When creating booking bookmarks, please refer to my links page; the book introduces a different method that is addressed in Web Design II. For now, we will stick with traditional HTML.
If you wish to link to a different spot in the same document, you name the section you wish to be able to jump to, similar to a bookmark in MS Word, using <a name="something"> </a>, then you may create as many links to that named spot by using <a href="#something"> </a>... please note, you only use # with the href if the link is to a named section within your document, not a link to another page, or another web site! Also note, these named areas are case sensitive, so <a href="#something"> </a> won't be able to link to <a name="#SOMETHING"> </a>
One last step, the user needs words to click on, to follow the link... so what
ever word goes between the
<a href="#something"> and the </a> becomes underlined
in the web page, and the link is activated by the user clicking that underlined
word. So you surround the word or words you wish to be links with the
<a href="#something"> and the </a>.
Session 2.2
Too many people start up notepad, and just start typing when making a web page...
and are then surprised by how it looks! To prevent this, you need to design
your page first, then create the code to bring you idea to life. The same should
now apply to how you intend to organize your site, to make jumping from one
page to another easier for you to code. The books lists several ways of laying
out your structure, such as linear and hierarchical.
Links and Templates covers what I want to add to the book discussion on links, so I won't repeat too much of that info here.
Also, just as a text color is set, even if you don't include <body text="color">
(the default is black), links can behave in different ways. The default is to
open the linked document into the same window; that is, the new document replaces
the previous document. To specify this action, you would use
a href="URL" target="_self".
But you can also create a new browser window, and open the linked document
there... this is done with
a href="URL" target="_blank".
Session 2.3
The rest of the chapter discusses linking to documents stored in different directories,
or linking to non-webpage parts of the Internet... read over this section to
get a rough idea of the process, and we will cover directory use in my notes
on Paths, and a handy reference Acrobat
pdf file. I also have a short section,
on visualizing lab 3, below.
<a href="mailto:email address"> to send an email, and we will revisit ftp later in the semester... let's focus on creating pages before we start transferring (ftp'ing) pages. (While great at downloading large files for guests at a web site, the real value of ftp is that it is the most robust way to upload to your account, such as delivering your finished web pages to the server.)
And for the moment, pretend the tag <link /> does not exist... it is too easy to confuse with the body attribute link (which sets link colors), and the anchor tag that creates hypertext links that appear in the body of the document.
The important thing to realize is, one a web site such as mine, I have thousands of files; it would be a nightmare to store them all in one single folder, as I wouldn't be able to find them easily. A path is just a series of folder that have to be opened until you locate the file.
Starting point, your Lab 2 folder structure.
Open My Computer, and create the lab3 folder.
Inside the lab3 folder, create a folder named 'pages', and a folder named 'images'.
Copy your page1.htm and your page2.htm files into the ‘pages’ folder.
You will also copy two graphics files from the class web site, into the 'images'
folder.
When working in Windows, it may help to click the [Folders] button so you can
see folders on the left, and the folder contents on the right.
Note: The ‘pages’ folder on the left is highlighted, meaning the
files displayed on the right are its contents.
Note: The Address bar indicates the full or absolute path to the files. C:\lab3\pages
Note: For the Internet, you use /
instead of \
Since the two files can ‘see’ each other, all that is required
to link to the other file is to name the file in the href, such as
<a href=”page2.htm”>to page 2</a>
But you will be saving the graphics in the images folder. So,
<body background=”yellow_fabric.gif”
etc> won’t work.
For the page2.htm to ‘see’ that file, you need to code its relative
address.
That is, how to find the file, from this location.
If you can locate the file in ‘My Computer’, you can code those steps into your web page.
1.) Starting in ‘pages’ you need to click the “up”
folder button to get closer to seeing the graphics files.
Going up is coded ../ in HTML.
2. Now you can see the images folder. To see the contents, you would select
it.
To select the images folder in HTML, you add images/
to your prior code, giving you
../images/
3. Now you can see the file. So you can select yellow_fabric.gif
To select the file in HTML, you add the filename yellow_fabric.gif to your
prior code, giving you
../images/yellow_fabric.gif to the finished line,
giving you the finished product:
<body background=”../images/yellow_fabric.”
etc>
Just remember, just code the same steps you would use, if you were locating the file using ‘My Computer’