CS 203 Lab 3
Week of 28 September 2020
Starting this week, you will indicate that your lab is ready for marking by
filling out a form that is below
If you have not already done so, please get your index.html page on
This week, be sure you have some interesting content. You can remove
anything you only did because I wanted you to try something out.
This week I want you to have at least
two pages, so start a new one if you only have index.html as yet.
For today, add some (more) style
specifications to your page(s). See How
do CSS styles
Modify some image for your
For example, if an image is 3000 pixels wide, and has too much sky
and a building wall on the left and you want the final result to be 400
pixels wide on your page, first select a rectangle and crop to eliminate the extra edges, and
then resize (scale) to a width of 400(pixels). (Be sure a box such
as "keep ratio" is checked, so you don't distort the picture)
Most PC's have utilities with at least capabilities to crop, to adjust
brightness and contrast, and to
scale (resize) images.
In our lab, use:
In particular, you could:
- Crop or scale a large image so it is an appropriate size for your
- You could crop yourself from the class picture, for example
- Modify an image to make it suitable for background, by adjusting
the contrast and/or brightness.
All pages should be linked
All your pages should be reachable from index.html. One should be
able to start there, and find links to (most) of the other pages. Each
other page should have a link back to "home" (index.html)
As sites become more complex, site navigation becomes more
problematic. Put links to other pages wherever appropriate. One hates
to be sent around in circles without ever finding what one thinks must
be there, however.
Minimum requirements for this week:
Please feel free to experiment as much as you like with styles.
- You signed in to the class, so your name is in the class list, otherwise your lab will not be marked,
- Some file has been modified,
- You use some CSS,
- At least one page (file) has a background-image, and the the text
contrasts well with it. (Yellow on
- If necessary, there is a good background-color in case image
isn't displayed for some reason, and
- When printed, the text shows up well. (CSS @media rules if necessary)
- It appears that you have modified some image, perhaps for size,
cropping, or brightness.
- You now have at least 2 pages, and there is a list, an image, and
- Each page has a distinct title (so I can tell them apart in my
- Each page has a link back to "Home" (index.html)
- Home has links, directly or indirectly, to every file you expect
us to look at! This is a continuing requirement.
- Tell me what you did,
by filling out this form, so that I can find your form easily, and you can tell me anything you want about it, or your pages.
Back to CS