Assignment #2

CS106E Spring 2018, Young

In this assignment we get some hands on practice working with HTML and CSS and begin
creating a personal webpage. ​This assignment is due before the start of class Wednesday May
2nd – submit it on Canvas before 1:30pm. Additional Administrative Details can be found at
the end of this document. In order to carry out some parts of this assignment, you will need to
download files from the Canvas web site. These files include an HTML “starter” file. Note
there is no CSS starter file, as there is no specific information that needs to go into a CSS file.
See the appendix for specific instructions on downloading files.

Make sure you check each part of the assignment by running it through the World Wide Web
consortium’s validator program found at ​http://validator.w3.org/ (I recommend
using the “Validate by File Upload” validator option).

Honor Code Reminder

For the purposes of this class, if someone (other than your partner, a TA, or the instructor)
looks at your HTML, CSS, or PHP code, or if you look at another student’s HTML, CSS or
PHP code, you have received too much assistance.

If in doubt, or if you’re concerned you have received too much assistance, explicitly
document the help that you received. If you have specified in writing the help which you’ve
received on an assignment, you will never be considered as having violated the CS106E honor
code policy (although we may reduce the number of points you receive on the assignment).

Personal Web Page 1

Let’s start out by making a simple version of a personal web page. You can create the HTML
file from scratch or begin with the starter file provided with this assignments download.

Your simple web page should include the following:

● Your name should appear at the top of the web page using an ​h1 element. If you’re
working with a partner, put both your names at the top of the page.

● You should break the remainder of the webpage into two sections using h2 elements.
The first section should be entitled “About Me” and the second section should be named
“Hobbies and Interests”.

● Write two or three paragraphs about yourself for the “About Me” section, remembering
to use the ​<p> tags to distinguish paragraphs. If you’re working with a partner write one
or two paragraphs each. Write one or two paragraphs for the “Hobbies and Interests”
Section.

● In addition to appearing at the top of your web page (via ​h1 element), your name should
also appear as the title of the web page by placing it in the ​title element. Don’t forget
that the ​title​ element belong in the head section of the HTML file.
 Go ahead and save your HTML file as ​personal1.html​. Open it in Mozilla Firefox and
make sure it works as you expect. Run it through the validator at ​validator.w3.org and
make sure it doesn’t have any errors.

This is more or less what your webpage should look like:

Good job, you’ve just created your very own web page.

Personal Web Page 2

Modify your HTML file to read in a Cascading Style Sheet file by adding a ​<link /> tag.
The CSS file will be called ​personal2.css​. Save your webpage under the name
personal2.html​.

Create a cascading style sheet file for your HTML file. You’ll need to create this one from
scratch—there is no CSS starter file. Make the following modification:

● Change the h1 and h2 elements to use sans-serif font.

● Change the text color and add a background color to the h1 element but not the h2
element.

● Center the h1 element using the text-align attribute.

Feel free to make additional changes if desired. Here’s what the revised webpage might look
like:

2
 Personal Web Page 3

Let’s go ahead and extend our Personal Webpage – save this version as personal3.html and
personal3.css. Here’s what your revised page should look like:

Add the following three items:

● Make an unordered list of your “Hobbies and Interests.”

● Add links to external websites on at least two of your hobbies or interests.

3
 ● Add a photograph of yourself (or something else fun – and G-rated, please don’t go
all sketchy on the TAs).

With your cascading style sheet:

● Move the image to the left of the webpage.

● Give the image a colored border, a margin, and some padding. Remember you must
set a border-style or the border won’t show up, even if you set a width and color for
it.

● Change the styles on the links. Specifically change both the color when the link has
been visited and when it has not been visited. Remove the underline. Using the
:hover pseudo-class change the color when the mouse cursor moves over the link.
Choice of colors is up to you.

● Change the bullets in the unordered list of “Hobbies and Interests.” You can change
them to squares, circles, or if you really want to get fancy use the list-style-image
property to change them to an image.

You may make additional changes if desired, but make sure that all the items listed above are
in the version that you turn in.

Additional CSS 1

Our next problem gives us an opportunity to work with classes. In this problem we are going
to take an excerpt from a play by Shakespeare and format it using a style sheet. Here is the
original and the modified version:

4
 ​ itle​, ​author​, ​scene​,
Sections of the play have been placed into the following classes: t
location​, ​stageDirection​, ​actor​, and ​dialog​. Write your style sheet such that
these classes are displayed using the following characteristics:

· title​ and ​author​ should both be displayed centered.

· scene​, ​location​, ​stageDirection​, and ​actor should all be displayed in

sans-serif.

· stageDirection​ should appear in xx-small size font and should be italicized.

· actor​ should be in bold.

In addition to these changes, we would like the actors’ names as they appear in stage
directions to appear in small caps. For example, note the small caps on Juliet’s name in the
stage direction “​JULIET appears above at a window​”

We want this change to occur ​only​ within stage directions.

Because the actors’ names with a stage direction are not contained within their own set of
tags, we’ll need to add ​<span> tags to get this effect. Add ​<span> tags around Romeo in
the line “Enter Romeo” and Juliet in the line “Juliet appears above at the window”. Use these
spans in conjunction with your style sheet to create small caps on these names.

Additional CSS 2

In this problem we take the styles defined in the “Romeo and Juliet” webpage from the
previous problem and apply them to a set of Shakespeare plays. For this problem you will
need to download the files which contain excerpts from the plays Henry V and Julius Caesar.
Create a new copy of Romeo and Juliet which loads the style sheet from an external file.
Modify the Henry V and Julius Caesar files to load the same style sheet as Romeo and Juliet.
Notice that you can now change the appearance of all three plays by changing just one single
style sheet file.

Administrative Details

You will need to turn in the following files for this assignment: personal1.html;
personal2.html, personal2.css, personal3.html, personal3.css, and whatever image file you’ve
used for personal3.html; your copy of romeo-and-juliette-basic.html; copies of
romeo-and-juliette.html, julius-caesar.html, and henry-v.html loading the style sheet from a
separate file along with the separate play.css file.

Finally, include a text file coversheet.txt with your name and your partner’s name. If you did
not work with a partner, just include your own name.