Lab 6
- Set up your page on the UCR website (here's mine, and yes, it was
done very lazily)
- File/folder structuring
- Cascading Style Sheets (CSS)
Set up your page on the UCR website
Your UCR webpage will be located at http://student.ucr.edu/~(your username)
After setup, if you want to redirect your
student page to another website (maybe your CS website since you have
it up already), there are two different ways of doing it.
- The server-side way is described here
- The deprecated way of doing it is placing the following tag on
your index.html page:
<meta http-equiv="refresh"
content="N; url=other-web-address">
where 'N' is the number of seconds you want the user to view that page,
and 'other-web-address' is... another web address (duh). Also, try to
give the user a regular link on that redirection page (i.e. use the
<a href=...> tag) just in case the redirection does not work for
some reason. *Warning* Although this way of redirection is simple, it
has a tendency of messing up the back button on most web browsers.
File Structuring
Although not as important if you only have a single page and few
images, when you start making multiple webpages with numerous images,
which you will (*cough* end of
quarter project *cough*), it
is important to
organize your files in a reasonable structure. Typically, html pages
are located in the home directory (public_html
in your case) or nested in folders to group up commonly themed pages.
For any given page that uses pictures, those images are typically
stored into an 'images'
folder in that same
directory, while additional files may be located in a resources folder.
In this example, in public_html,
the files index.html, battlebots.html, cs14.html, and rwths.html all
use pictures from the images
folder on the same level. All of the lab descriptions in the cs06_08fal folder use images in
that directory.
Cascading Style Sheets (CSS)
For instructions/tutorial on CSS, click here
http://www.cs.ucr.edu/~plonjers/lab6.html
* If you are still working off of the camping.html code from the book,
refer to examples and exercises from the text (pages 201 - 212) for
additional
examples.
Exercises:
- Set up your student.ucr.edu webpage. You can either copy over
your existing page, or you can create that redirect page.
- Reorganize your existing page(s) to follow the structure
described above. Pictures should be moved into an images
folder and your html pages should be updated accordingly to the
change... and if you don't have pictures, GET SOME!!
- Make 2 pages that both follow the file/folder structure mentioned
above and that also follow the requirements of the CSS section. (4
different tags with at least 2 different styles each, 8 different
attributes in total)
