Assignment #1

HTML & CSS

CS193C Summer 2015, Young
Administrative Details
This assignment is due at 3:15pm Thursday July 9th. Well provide a separate Homework
Submission Instructions handout describing how you will submit your assignment. Check
the class website for some files associated with this assignment (see the end of the handout for
a full listing).
For this assignment no WYSIWYG editors (e.g., no Dreamweaver). Webpages should be laid
out using CSS floats (no HTML tables or CSS absolute positioning).
Make sure your files validate at:
http://validator.w3.org/ (for HTML)
http://jigsaw.w3.org/css-validator (for CSS)
Your files should work on both the latest version of Mozilla Firefox and Google Chrome.

Personal Webpage (HTML Only Version) (0 pts, see next section)

Your first task is to create a personal webpage. If you already have one, please start the page
for this assignment from scratch. Your personal webpage should contain the following items:

Your name at the top of the page as an <h1> heading.

A few paragraphs about yourself. Be sure to include the word Stanford at least twice
in your paragraphswell need that for the next problem in this assignment.

A list of hobbies or interest displayed as an HTML unordered list.

Link at least two of your hobbies or interests to websites related to those interests.

Heres roughly what the webpage should look like:

Stick to semantic HTML only. Well spice it up with some CSS in the next part of this
assignment. You can find a list of HTML elements commonly considered semantic HTML
here:
http://microformats.org/wiki/semantic-html
Feel free to add in some additional items to your personal website if youd like, but there is a
more open-ended opportunity to be creative later in the assignment.
Make sure your webpage validates. Save your file under the name personal.html.

Personal Webpage (HTML & CSS Version) (12 pts)

Now add a CSS file called personal.css to the previous problem. Its okay to save the
HTML file for this version of your personal webpage over the personal.html file from
the previous problem, you only need to turn in this more advance version. Make the
following changes and additions:

Add a photograph of yourself and float it to the left side of the webpage using CSS.
Add box information (margin, padding, and/or border) to make it look nice on the
webpage.

Change the font used throughout the document to sans-serif. To do this you can set
the font for the body element, which will be inherited by all elements contained
within the body (which is everything displayed on the webpage). Alternatively, you
can create a style rule with the special universal selector which is represented by the
asterisk. The universal selector matches any element, however its not very efficient
and will slow rendering of your page down a bit. For example the following rule
will turn everything on the webpage to red:
* {
color: red;
}

Center the heading with your name in it.

Setup your links to use the :hover pseudo-class (use a:hover so that only the
links are effected). How the link changes when the mouse moves on top of it is up to
you, but if youre short on ideas, just have the link change colors.

Add <span> tags and setup your style sheet so that every time the word Stanford
appears, it is in red and is in bold.

Heres a sample screenshot. Make sure your

webpage validates without errors through both
the HTML and CSS validators.

Zebra Striping (8 pts)

In a zebra-striped table, every other row is a different color. In this problem youll create a
simple zebra-striped table using data on the Stanford undergraduate population. For this
problem save your HTML file under the name zebra.html, and put your CSS directly into
the HTML file using the <style> tag. Here is what your webpage should look like:

Your solution needs to display the following characteristics:

The Geographic Origin of Stanford Undergrads heading and the Stanford Facts
Website citation at the bottom are in the default serif font, whereas the table itself is
in sans-serif.

The table header row is white text on a black background.

There is a thin white border separating the Geographic Origin cell from the
Number of Students cell in the table header row.

Odd-numbered rows (other than the black table header row) have a light gray
background whereas even-numbered rows have a white background.

All table cells (except those in the header) have a 1 pixel solid black border around
them.

The Stanford Facts citation at the bottom should be in italics (but dont use the <i>
italics tag for this, thats not semantic HTML).

Here are a few implementation pointers.

Youll need to use the border-collapse property on the table, otherwise all
your table cells will end up with double borders.

I used the color #EEE for my light gray background.

For my implementation I created classes for the odd rows and for the last row, but
youre welcome to implement it differently with the following limitation: there is a
fancy :nth CSS3 style selector that makes zebra-stripping easy however, I do not
want you to use this. You should get some practice using the class attribute which
will be generally useful for a wide range of tasks. If you ever need to zebra stripe a
table on a real website, the :nth selector is a fine choice.

Blog Styling (20 pts)

In class, I showed an example of a blog in which various parts of the blog were marked using
the class attribute. For this problem youll use an enhanced version of that blog and provide
styling for it. Make sure to use the blog.html file provided with this assignments
downloads, not the one used as a class examplethe assignment version has extra
entryfooter tags in it. This is your opportunity to get creative on this assignment. Here
are the minimum requirements for full credit on this part of the assignment:

Provide styling on the header and add in the Stanford Seal (provided with the
assignment downloads) using an <img > tag with appropriate accompanying CSS.

Make sure that each blog entry is appropriately distinguished, so that a viewer can
easily tell where each blog entry starts and stops.

Add styling to each entry heading and each entry footer.

Make your blog look better than my class example!

Well be giving up to 3 bonus points for nicely styled blogs. In addition, the TAs will pick
the top 1-2 blogs and well give them up to 10 bonus points, and will show them in class. Ive
provided a jpeg of the Memorial Church before the earthquake (from Stanford University
Archives) in case you want to add it in.
For contest purposes you may add additional tags, but you may not add or modify any actual
text contents for example, you may not add new entries, nor may you add additional text to
existing entries. You may not delete tags.
You may only use images provided for this assignment.

Two-Column Layout (0 pts, see next 2 sections)

Create following two-column webpage (article excerpts from the Stanford Report) using CSS
float layout:

Save the file as two-column.html. Each column should be 400 pixels with 15 pixel margins.
Use a font with serifs. Actual text is provided with this assignments downloads so you dont
have to type it in. This section will not be graded, and you do not need to submit this file.

Four-Column Layout (0 pts, see next section)

Reproduce the following four-column webpage (consisting of headlines from the Stanford
Report) using CSS float layout:

Save it under the name four-column.html. Your webpage does not have to look exactly like
mine, but it should contain four-columns, each column should be 200 pixels wide with 10
pixel margins. Use a font without serifs. This section will not be graded, and you do not need
to submit this file.

Combined Webpage (10 pts)

Combine the last two parts of this assignment into a new file called combined.html. Heres
what your combined webpage should look like:

Stanford Performing Arts Webpage (25 pts)

Create the following webpage:

The Bing Concert Hall text is an excerpt from the actual Bing Concert Hall website
(binghall.stanford.edu) and, along with the Bing Concert Hall image file, is provided as part
of the homework downloads, so you dont need to type it in.
You dont need a pixel-perfect representation. If your measurements are different or your
margins are a bit off or your fonts are a different size, youll still receive full credit. But the
overall placement of items should be the same. Make sure you have the following features:

A masthead across the top with Stanford Performing Arts on the left and Autumn
2012 Edition on the right, right-justified with Edition below Autumn 2012.

The main article section on the left with the text floating around the image as shown.

Calendar section on the right, with performing arts events listed below, with lines
between the events plus an additional line between the Calendar heading and the first
event and a line below the last event as shown. Use style sheets to create these lines,
not the <hr /> tag.

Here are some of the specific measurements I used:

Stanford Performing Arts color #cc0000, 36 point bold, sans-serif

Autumn 2012 Edition color # cc0000, 12pt bold

Bing Concert Hall 18pt, bold, sans-serif

Calendar 14pt, bold, sans-serif

Calendar items 12pt, italic, sans-serif

Article text is default font.

Overall Width 800px;

Article Column Width: 500px;

Calendar Column Width: 300px;

If you use the <h1>, <h2>, and <h3> tags to create your headings (which is recommended),
youll need to override the standard margins otherwise you headings will take up too much
space. This is commonly done on professional webpages. In fact, many professionals use a
CSS Reset with their webpages, which resets all the margin and padding on all HTML
elements to 0px.

Stanford Connection CSS-Based Layout (25 pts)

Create the following Facebook-like webpage. Heres what the webpage should look like:

As you can see, the webpage consists of a photo, some information about the person, and a set
of status updates. On the right, using form elements, the user is able to enter in new updates,
which will be added to the status updates shown in the center.
You dont have to make a page for my dog Molly, you can substitute your own information,
but dont use any time thinking about this, we are only interested in the webpage layout. Also
if you enter your own material, make sure it stays at the PG-level or below we will not
grade any R- or X-rated websites.
While you do not need a pixel-perfect implementation you should include the following:

The Stanford Connection banner which runs across the top of the left two columns
(but not across the Post Updates column.

As seen in the screenshot the banner should have the Stanford Logo, which is
included with the midterms downloads. Note that the actual Stanford
Connection is text (not part of a graphic image) and it should remain text. You
should not create any new graphics files. The color in the logo is #9A0000.

A column on the left consisting of a picture, followed by information about the

user.

Two sections below the picture, one for About Me and one for Friends.

Titles in the About Me section like Birthday should be bolded, while actual
values such as December 8, 2001 are not bolded. Friends names are bolded.

Each of the sections About Me, Friends, Status Updates, and Post
Updates should have a colored background I used the color #CC9191. They
should also have a 2-pixel black border on the top and bottom but no border on the
sides.

Status updates should be separated by thin lines as shown.

The right column should include a Post Updates heading, a text area, and a
submission button.

Leave a reasonable amount of space between columns.

As we dont yet know how to execute programs with our webpages, the button Submit New
Update wont actually do anything.

Provided Files
The following files are provided with the assignment download:

blog.html is an enhanced version of the HTML file from class. Youll need to add
your own <style> tag (or a <link> tag and an external file) for the assignment. As
previously noted, Ive also provided you with a Stanford Logo and a photo of
Memorial Church from the Stanford University Archives in case you want to add a
picture to your blog.

report-text.txt (unformatted text) for the 2-column/4-column Stanford Report

problem.

bing.jpg and bing-text.txt (unformatted text) for the Stanford Performing Arts
webpage.

tree-logo.gif and molly.jpg for the Stanford Connection webpage.