LP0, 18 Jan 2018

LP0

Get the Skeleton Files

Directions You can work locally on your machine or you can work on the server.

Server DirectionsIf you have not already gotten the shell and image files, do this to get them. These directions keep it simple and they put everything in the same directory.

$ cd public_html
$ cp ~cs/data/LP0.zip .
$ unzip LP0.zip
$ cd LP0
$ ls
 ls
 five.css   four.css   index.php   one.html rhino.gif  three.html  two.html
 five.html  four.html  jahnke.JPG  policastro.JPG  three.css  two.css
$

Local Directions Download LP0.zip. Uncompress and everything will be in a folder named LP0.

Edit the files and do your work.

For Mac/Linux Open a terminal and navigate to your LP0 folder. Then follow the directions above, but you will not need to do the cd .. if you are in the directory containing the LP0 folder.

For Windows Directions are here for zipping and unzipping files.

You have all of the necessary stuff. It will save you annoying typing.

Useful Feature You can click on the LP0 directory shown on the left and download any file or files you need from the page that shows. If you do this, put all of your work in a directory named LP0.

Turn In Directions

First, directions for the server.

$ cd .. 
$ mv LP0 yourUserNameLP0
$ zip -r yourUserNameLP0.zip yourUserNameLP0
$ ls 
yourUserNameLP0  (and other files)
$ cp yourUserNameLP0.zip ~/submitted

Email me once you have done this and I can fetch your work.

If you are working on your PC Zip your files and you will be able to upload them onto Canvas. If you have trouble with this, attach the files to a single email with subject line LP0.

Allowable Resources

You have access to the following resources.

There will be a Canvas portal for you to upload work. If you have trouble, you can attach all files to an email.

1. Replicate this in a file named one.html. Do not use any styles; this is pure HTML. You will need to learn about blockquote.

question one

2. Replicate this in a file named two.html. Put all of your styles in a file named two.css

question two

3. Replicate this in a file named three.html. Put all of your styles in a file named three.css. When you mouse over the table's cells, the colors invert. The lists' items change color, as specified in the document, when moused over.

question three

4. Replicate this in a file named four.html. Put all of your styles in a file named four.css. This will require you to work with the display property.

question four

5. Replicate this in a file named five.html. Put all of your styles in a file named five.css.

Here is the ugly feature: As you mouse inside the rectangles, they disappear! This problem requires some ingenuity to bring to full functionality.

Here it is when the mouse is not inside of any rectangles.

question five

Here it is when the mouse is not inside some of the rectangles.

question five

Here it is when the mouse is not inside all of the rectangles.

question five