Description

Assignment #1
HTML & CSS
CS193C Summer 2017, Young
Administrative Details
For this assignment no WYSIWYG editors (e.g., no Dreamweaver).
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: x Your name at the top of the page as an <h1> heading.
x A few paragraphs about yourself. Be sure to include the word Stanford at least twice in your paragraphs—we’ll need that for the next problem in this assignment. x A list of hobbies or interest displayed as an HTML unordered list.
x Link at least two of your hobbies or interests to websites related to those interests.
Here’s roughly what the webpage should look like:

Stick to semantic HTML only. We’ll 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 you’d 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. It’s 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:
x 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.
x 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 it’s 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;
}

x Center the heading with your name in it.
x 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 you’re short on ideas, just have the link change colors.
x Add <span> tags and setup your style sheet so that every time the word “Stanford” appears, it is in red and is in bold.
Here’s 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 you’ll 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: x 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.
x The table header row is white text on a black background.
x There is a thin white border separating the “Geographic Origin” cell from the “Number of Students” cell in the table header row.
x Odd-numbered rows (other than the black table header row) have a light gray background whereas even-numbered rows have a white background.
x All table cells (except those in the header) have a 1 pixel solid black border around them.
x The Stanford Facts citation at the bottom should be in italics (but don’t use the <i> italics tag for this, that’s not semantic HTML).
Here are a few implementation pointers.
x You’ll need to use the border-collapse property on the table, otherwise all your table cells will end up with double borders.
x I used the color #EEE for my light gray background.
x For my implementation I created classes for the odd rows and for the last row, but you’re 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 you’ll use an enhanced version of that blog and provide styling for it. Make sure to use the blog.html file provided with this assignment’s downloads, not the one used as a class example—the 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:
x Provide styling on the header and add in the Stanford Seal (provided with the assignment downloads) using an <img > tag with appropriate accompanying CSS.
x Make sure that each blog entry is appropriately distinguished, so that a viewer can easily tell where each blog entry starts and stops. x Add styling to each entry heading and each entry footer.
x Make your blog look better than my class example!

Layout
Two-Column Layout (0 pts, see next 2 sections)
Create following two-column webpage (article excerpts from the Stanford Report).

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. 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. Here’s 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 don’t need to type it in.
You don’t need a pixel-perfect representation. If your measurements are different or your margins are a bit off or your fonts are a different size, you’ll still receive full credit. But the overall placement of items should be the same. Make sure you have the following features:
x 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 two should be nicely lined up, similar to the screenshot – the “Autumn 2012
Edition” should appear more-or-less vertically centered with the “Stanford Performing Arts” title.
x The main article section on the left with the text floating around the image as shown.
x 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:
x “Stanford Performing Arts” color #cc0000, 36 point bold, sans-serif x “Autumn 2012 Edition” color # cc0000, 12pt bold
x “Bing Concert Hall” 18pt, bold, sans-serif x “Calendar” 14pt, bold, sans-serif x Calendar items 12pt, italic, sans-serif x Article text is default font. x Overall Width 800px; x Article Column Width: 500px; x Calendar Column Width: 300px;
If you use the <h1>, <h2>, and <h3> tags to create your headings (which is recommended), you’ll 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.
Feel free to fill in your own specifications for anything not mentioned here, such as the alt tags for the image.
The name of the main HTML file should be bing.html. You can name any support files such as CSS files whatever you like, just as long as bing.html properly references them.
Flexbox Layout: Stanford Connection (25 pts)
Create the following “Facebook-like” webpage. Here’s 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 don’t have to make a page for my dog Molly, you can substitute your own information, but don’t 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:
x The Stanford Connection banner which runs across the top of the left two columns (but not across the “Post Updates” column. x As seen in the screenshot the banner should have the Stanford Logo, which is included with the midterm’s 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.
x A column on the left consisting of a picture, followed by information about the user.
x Two sections below the picture, one for “About Me” and one for “Friends”.
As we don’t yet know how to execute programs with our webpages, the button “Submit New Update” won’t actually do anything.
Feel free to fill in your own specifications for anything not mentioned here, such as the alt tags for the images.
The name of the main HTML file should be connection.html. You can name any support files such as CSS files whatever you like, just as long as connection.html properly references them.
Provided Files
The following files are provided with the assignment download:
x report-text.txt (unformatted text) for the 2-column/4-column Stanford Report problem.
x bing.jpg and bing-text.txt (unformatted text) for the Stanford Performing Arts webpage.
x tree-logo.gif and molly.jpg for the Stanford Connection webpage.
Submission
Submit all files associated with all the problems in this assignment as a single ZIP file. Make sure to include images or other files needed by the main HTML files. Your ZIP file should be setup so that if the TAs unzip it into any directory on any computer, and open your HTML files, the webpages should be displayed correctly. Key things that will prevent this are (1) not including image files or other files referred by the HTML files in your ZIP or (2) using references to specific directories on your own computer such as:
<img src=”file:///C:/Users/pyoung/Documents/_CS193C/hw1/example.jpg” … />
Instead of using relative references like:
<img src=”example.jpg” … />
The first <img> will look for a specific directory which is only available on my personal computer and will break if moved to one of the TAs’ computers. The second <img> will look for a file on the current computer and will work regardless of which computer the files are transferred to just as long as the example.jpg file is transferred along with the HTML file referring to it.