Assignment #1 HTML & CSS

Assignment #1
HTML & CSS
CS193C Summer 2017, Young
Administrative Details
This assignment is due at 2:30pm Wednesday July 12th. Please submit to Canvas all parts of
the assignment as a single ZIP file. Check the Canvas 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).
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:
2
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.
3

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.
4
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!
I’ve provided a jpeg of the Memorial Church before the earthquake (from Stanford University
Archives) in case you want to add it in.
5
Layout
For the remainder of this homework you may choose to use Float Layout, Flexbox Layout,
Grid Layout, or some combination of them. Your solutions don’t need to be pixel perfect, but
should look similar to the screenshots provided. If measurements are provided, your solution
should follow them.
Two-Column Layout (0 pts, see next 2 sections)
Create following two-column webpage (article excerpts from the Stanford Report).
Save the file as two-column.html. Actual text is provided with this assignment’s downloads
so you don’t have to type it in. This section will not be graded, and you do not need to submit
this file. If you’re using Grid Layout, you may want to skip directly to the “Combined
Webpage” section below.
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:
6
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:
I am not going to specify whether you need to set fixed widths on items or margins (or gridgaps), you may find it instructive to experiment with how your webpage looks as the window
width increases and decreases. Keep in mind on a real website, you don’t have control over
how wide your user’s window is. Your webpage should look good in both narrow windows
and wide windows. Most professional webpages have a set width, so that the webpage looks
reasonable even if opened in a very large window.
7
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
8
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.
9
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”.
x 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.
x 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.
x Status updates should be separated by thin lines as shown.
x The right column should include a “Post Updates” heading, a text area, and a
submission button.
x Leave a reasonable amount of space between columns.
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 blog.html is an enhanced version of the HTML file from class. You’ll need to add
your own <style> tag (or a <link> tag and an external file) for the assignment. As
previously noted, I’ve 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.
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.
10
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.