CSci 1101 Lab 1. Due Friday, Feb. 2 at 10pm
Goals of this lab:
- Introduction to your computer science lab computer accounts.
- Introduction to the process of editing and uploading your
files to the server (rynite).
- Introduction to file system and basic LINUX commands.
- Practicing the basics of XHTML and CSS.
Tasks for the lab:
- Log in to a lab machine. Use the same login that you used for the
blog. The password is the same as your initial password for the
blog
- First thing you need to do is to change your
password. Double-click on the terminal icon at the top of the window
to open the command prompt window. Type passwd. You will be
asked to type in your current password and then your new password
twice. Your password must have at least two different kinds of
symbols, such as letters, digits, and punctuation marks. Make
sure to remember your new password.
- You may also want to change your password on rynite (alternatively
you can reset it later through WinSCP). To do this: in the same
terminal window type
ssh rynite
. If a message appears
warning you that authenticity of the server cannot be established and
asking if you would like to continue connecting, answer "yes" (not
just "y"). When prompted for a password, type in the same password
that was given to you in class. After you connect to rynite type
passwd again and change the password to a new one (it may
be the same one that you use on the lab machines or a different
one). Type logout
when you are done to quit ssh.
Uploading the initial web pages:
- Start the browser by either clicking on its icon or by typing
firefox &
in the terminal window.
- In the browser go to the web page example http://cda.morris.umn.edu/~elenam/1101_spring07/examples/first_page2.html
(note that the page name has an underscore in it);
view the page source.
- Start jEdit text editor: go to the Applications menu, choose
Programming, and then choose jEdit. If it's not in the application
menu then type
jedit
(all lower case) at the command
prompt.
- Copy/paste the page source into the jEdit window and save it as
first_page.html
in your home directory
- Open the file http://cda.morris.umn.edu/~elenam/1101_spring07/examples/first_style.css
in the browser, open a new file in jEdit, copy it there, and save as
first_style.css
, also in your home directory.
- At the command line create a directory
images
by
typing mkdir images
- Save the images from the web page into the directory
images
- You might want to check that all files are in the right locations
by using "Open File" menu in Firefox and opening the file
first_page.html
. It should look exactly as the page you
were viewing before.
- Upload the file to the server by typing (in the terminal
window) the following commands:
sftp rynite
you should be prompted for the password, type in your new rynite
password. After that you should see sftp>
on the
line, that's where you type in the next two commands.
cd public_html
put first_page.html
- To upload the folder images into your public_html on rynite, you
need two to use two sftp commands:
- Create the directory 'images" on rynite:
mkdir images
- Copy all the image files to the server:
put images/* images/.
(don't forget the dot after the slash at
the end of the command).
Check out more sftp commands if
needed.
- View your page at
http://rynite.morris.umn.edu/~yourloginname/first_page.html
(replace yourloginname with your login name). Make sure the
page shows up as it should.
- Validate this page by copy/pasting its URL into XHTML validator. Caution: the URL
should contain the full domain name of the server:
rynite.morris.umn.edu
(using just rynite
would work for viewing pages in the lab, but will not work in the
validator). If you get an error message pointing to
the link
tag, put quotes around
stylesheet
.
Changing the web page
In this part of the lab you are asked to experiment with the given web
page. Please feel free to change other things as well, the more you
experiment - the better. However, you need to follow these guidelines:
- Use your textbook to see what tags and options you should and
shouldn't use. Don't use any deprecated tags or attributes and
avoid physical style tags. Don't use
style
attribute
(I'll explain why later in the course).
- Edit the file on your lab machine (in jEdit window). Save the file
and upload it to
rynite
using sftp. When you are changing
the CSS file, don't forget to upload it as well.
- View your page at
http://rynite.morris.umn.edu/~yourloginname/first_page.html
.
Don't forget to reload it. Holding the shift key while you are
refreshing the page tells the server to update all the files used for
this page. While it may not be necessary at this point, it's
a helpful thing to know for the future, so keep this in mind.
- Check your page using the XHTML
validator. If it's not XHTML-compliant, correct the mistake.
- When you are done, type
quit
to quit sftp; use
Desktop -> Log out to log out of the lab machine.
- If there is anything you don't understand or if would like to know
more, please ask right away!
Here are some features of the web page that you need to experiment
with:
- Change the first list in the page to be ordered.
- Change one of the headers in the page to a different level (say,
h4 to h3).
- Add a paragraph that has the following: two different
content-based tags (<cite>, <dfn>, or any other ones) and
a link to any web site. Make sure that your page is still
XHTML-compliant (with possible exceptions noted above). The text can
be anything, it doesn't have to be
related to the topic of the page.
- Make one of the images into a link (to any web page) by nesting it
inside the
a
(anchor) element.
- Change the width or height of any image in the page.
- Set the
width
and the size
attributes of
the <hr>
element (see p. 114).
- Use CSS file to change formatting of any type of a header. you may
change color or font properties. Make sure that your change shows up
on the page.
- Change the style of the image border.
- Add formatting of a <div> element (it appears at the bottom
of the page)
- Add a style for
a:active
, it should take place when you
are slowly pressing the mouse button on a link.
How to submit this lab
You have till 10pm on Friday, Feb. 2 to finish this
lab. You don't need to submit anything, simply leave your web page on
rynite. Don't change anything in it after the deadline until you
receive the grade. If you would like to experiment with HTML further,
simply make a copy of the HTML file with a different name and upload
it to rynite.
If you have any questions, please come to my office hours or e-mail
me.
This page is a part of CSci 1101
course web site.