CSC 101 -- Lab 2
S
Summer
2011
By now, you should have …
Completed Pre-Lab activities …
– Copied your HTML file from lab1 into the
csc101 and renamed it index.html
– Copied an image file into csc101/images
– Looked over web tutorial pages for hyperlinks
and paths, as directed on the pre-lab
– Printed lab instructions/report for today
…in this week’s lab you will
– review last week’s lab
– learn about paths
– add an image to the web page you are
working on
– add
dd a simple
i l lilink
k tto your web
b page
– separate your page into multiple files
– create a new page containing a table
– post your HTML files to the WFU server
– answer some short-answer questions
regarding the lab material
1
Question
Q: What is so special about the file names
index.htm and index.html ?
A: When a URL refers to a “domain” or to the
name of a folder (as opposed to an HTML
file) the web server automatically looks to
file),
see if the folder contains a file named
index.htm or index.html to serve out.
Notes on Paths
• Q: Why are paths important?
A: They tell the web server where to find the
files to be returned to the browser. If paths are
not correct, links are not correct.
• Two basic types
yp of p
paths:
– Absolute paths
e.g. http://www.wfu.edu/~sam/csc101/index.html
– Relative paths
This is the most common type of file path you will be
using in the lab. For example, “images/pic.jpg” specifies
a path to a file named pic.jpg in a subfolder named
images, RELATIVE TO the HTML file in which this
reference appears!
Absolute Paths
• Find the URL of the page to be linked to
• Use the complete URL, including the
“http://” prefix, when typing an absolute
path hyperlink
hyperlink. You will do this in step 2 of
today’s lab.
2
Relative Paths
• Must understand basic path notation as
illustrated on the following three slides.
• The following examples assume that when
you copy your files and folders to the web
server that they will remain in the same
relative relationship.
Rule #1:
To link to another file in the same folder as the
current document, use the filename as the path.
For example, to link from main.html to page1.html
(Figure 2) – both files are in the lab1 folder – the
filename is the relative path: page1.html
Figure 2. The HTML code for main.html that
contains a link to page1.html.
Rule #2:
To link to a file in a subfolder of the current document's folder, use the subfolder
name followed by a forward slash (/), and then the filename. Each forward slash (/)
represents moving down one level in the folder hierarchy. For example, to link from
index.html (in www-home) to the same page1.html (located in the subfolder named
lab1) (Figure 3), the relative path is csc101/lab1/page1.html
3
Rule #3:
To link to a file that is outside of the current document's folder, start the path with ../
(where "../" means going up one level in the folder hierarchy), followed by the folder
name, then a forward slash (/), and the filename. Multiple ../ can be appended for
moving up multiple levels in the folder hierarchy.
For example, to link from page1.html to index.html, the relative path is ../../index.html.
To link from page1.html to page2.html, the relative path is ../lab2/page2.html
Summary of Relative Paths
• Must know where the HTML file you are
creating will reside in your file hierarchy on
the web server. Call this location A.
• Must know where the HTML file you need to
link to will be located on the web server
server. Call
this location B.
• Use “/” and “../” notation to specify path from
A to B. Even pros who do this every day
sometimes need to draw a diagram to figure
these things out!!
4