Assignment #1
This assignment
- tests your understanding of basic XHTML and CSS.
- will walk you through installing Git and using GitHub
- will be turned in this assignment by emailing the URL of your team's web page to
martin@cs.rochester.edu
Assignment Requirements
You will create several files related to a recipe web site for a fictional pie company named Granny's Pies. You need to turn in the following files:
index.html
, the first of two web pages (with an optional CSS style sheet file)pie.html
, the second of two web pagesrecipe.css
, the style sheet forpie.html
The first part of your task is to create a front page (README) for
this web site, stored in a file named index.html
. Your
front page must contain a link to pie.html
. The file
must also be at least 20 lines long and must contain at least 4
different XHTML elements in its body. It also may not significantly
borrow content from your pie.html
. Otherwise, this front
page can have any appearance you like. If you like, you may use an
optional CSS stylesheet with this page named index.css
and submit it with your other files. Be creative! We may show some
students' pages in class on future dates.
The second (and more substantial) part of the assignment is to
recreate a specific web page describing a recipe for lemon meringue
pie, stored in a file named pie.html
.
Unlike index.html
, this page is rigidly specified and
must exactly match the appearance specified in this document.
For full credit, your files must be uploaded to your web server and must match several stylistic guidelines, all specified in the following sections, and then submitted for review using a Github Pull Requsest.
Setting Up Git
We'll be using GIT as the primary way to distribute and turn in assignments. We're going to install GIT on your AWS and on your local machine. Installing GIT is relatively straight forward for personal machines:
-
Step 1: Make sure you have git installed on your local machine. See instructions below.
-
Step 2: Install and configure git on AWS
-
Log onto AWS, you should see something like this:
$ ssh -i ~/.ssh/andrew.pem ec2-user@ec2-50-16-158-183.compute-1.amazonaws.com __| __|_ ) _| ( / Amazon Linux AMI ___|\___|___| https://aws.amazon.com/amazon-linux-ami/2012.09-release-notes/ There are 3 security update(s) out of 45 total update(s) available Run "sudo yum update" to apply all updates.
-
install git: type yes when it prompts you if you're sure you want to install git.
sudo yum install git
-
configure git to know who you are
git config --global user.email "your_email@youremail.com" git config --global user.name "Your Name Here"
-
generate an SSH key. (this will be that server's digital identity. SSH keys are super useful, read all about them
mkdir -p ~/.ssh chmod 700 ~/.ssh ssh-keygen -t rsa -N '' -f ~/.ssh/id_rsa
-
register your ssh key with github. this gives your AWS server permission to access your github account.
cat ~/.ssh/id_rsa.pub # This returns something like this: ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEArpmJ9kHd3G5BKIHn2RU2cy+qy16kVGbb6+jdOHlG7Yi44RABab23ZV09Q1oDCWlIdLk7rtm69MhpF+4FNMpT5GsL4aw0FqtC5m2EaNDxI6Mr7J6SdGtz0uYxfq/9Q4ltR2lIOy4WmR81AyX6THovBMI+F2O/m37Kp/h1zragmFG7hzpFSMd5mixN9jSKuRiQsLslpL9jwlaXzp3NiEEUvCnRl7RkySZ1V8tzMX4aiaLon9yUIFMyS8Kipuj2deYDn2Q4XwgwAErWgSXKmCNUYWl7xGMdUn6R7pxdYWZ5TB8IMwZYp2zCjLwvkUG58RrTow2NRkhQ9BKAdMD6lT+kvw== ec2-user@domU-12-31-38-04-70-C3 [ec2-user@domU-12-31-38-04-70-C3 ~]$
- Copy the output starting with 'ssh-rsa' and ending with the 'email' and head on over to github > account settings > ssh keys > add ssh key
Adding all your work to GIT
Steps 3-5 will allow you to control the content of your web server with GIT. We'll be cloning this repository onto your machine, as well as uploading all the content from the previous assignment.
-
Step 3: Clone the class repository onto your AWS machine.
sudo mkdir /var/www/html-new sudo chown ec2-user /var/www/html-new/ git clone git@github.com:NatMartin/CSC210.git /var/www/html-new cd /var/www/html-new
-
Step 4: Create your own branch
At this point, you'll be on the master branch. DO NOT PUSH TO MASTER BRANCH EVER. You will need to create a branch which will hold all of your work.
git checkout -b <Your-team-name> git push origin <Your-team-name>
If my team name were NatMartin, my command would read:
# obviously use your name for the branch. git checkout -b NatMartin git push origin NatMartin
-
Step 5: Add Assignment0, and replace your old /var/www/html folder with the one now tracked with git.
First make sure that you are in the
html-new
directory. Then, execute the following commands./var/www
is owned by root, so you will need to use thesudo
command to execute commands that manipulate that directory.sudo mv ../html/* . sudo rmdir ../html cd .. sudo mv html-new html sudo chown -R ec2-user html/ cd html/ git init git add . git commit -am "migrated my old server to git." git push
Expected Appearance:
You must match in appearance the following pie web page (click the screenshot below to see the full size image). The width of the full size screenshot is based on a browser window width of 1024px; if your screen is a different size, the width of your page may not exactly match. Any line breaks are done automatically by the browser, except ones that are clearly much narrower than the page width, such as the line "One 9-inch pie":
Appearance and Behavior Details:
All headings on the page should use a foreground color of
(red=164, green=164, blue=0) or #A4A400
and a background color of
(red=240, green=240, blue=240) or #F0F0F0
.
The font families for headings are Century Gothic, Futura, Verdana,
or any sans-serif font available on the system.
The page's main heading is aligned to the center of the page body,
and uses a 22pt bold font.
Other headings on the page are left-aligned and appear in an 18pt normal font.
All headings should be underlined.
The overall page's body should have a white background.
Text in the body should have a foreground color of
(red=64, green=64, blue=64) or #404040
and use an 11pt font.
The font families for page text are Georgia, Garamond, or any serif font available on the system.
Any links on the page should use the color (red=164, green=164, blue=0) or #A4A400
,
matching the color of the page headings.
The names of the four major steps of the recipe directions (such as "Preheat Oven")
are formatted in a strong font.
The quotations from the users appear in an italic font as indented blocks with background color
(red=255, green=255, blue=200) or #FFFFC8
.
The picture of the pie on the page and the W3C validator images at the bottom
come from the following image files, respectively:
- http://www.cs.rochester.edu/u/jbigham/courses/210/assignments/1/pie.jpg
(use an absolute URL to link to this image; don't link to a relative URL on your hard drive) - http://www.w3.org/Icons/valid-xhtml11
- http://jigsaw.w3.org/css-validator/images/vcss
All other decisions about styling on the page are left to the web browser. Any styles mentioned previously that are the same as browser defaults do not have to be explicitly included in your CSS stylesheet. The screenshot in this document was taken on Windows XP using Firefox 2.0, which may differ slightly from the appearance on your system.
The bottom of the page has four links.
The "Home" link should link to your index.html
page.
Use a relative URL and assume it is located on the same web site as pie.html
in the same directory.
The "Search for other lemon meringue pie recipes" text, the "W3C XHTML 1.1" button,
and the "W3C CSS" button should link to the following web pages, respectively:
- http://www.google.com/search?q=lemon+meringue+pie+recipe&start=10
- http://validator.w3.org/check/referer
- http://jigsaw.w3.org/css-validator/check/referer
The pie web page's title text should be Grandma's Lemon Meringue Pie.
Fortunately, you don't need to type all the text contents about how to make the pie.
Here is the file (output.txt)
containing all the text contents of the page without XHTML or CSS markup.
This file is generated by simply using "Select All", "Copy" in the page,
and "Paste" in the text editor.
Note that this copies images' alt
attributes in place of the images,
and copies *
in place of bullets on bulleted lists.
Extra Features:
Please also complete *all* of the following additional requirements in your pie page. These are features that may have not been covered in detail in lecture; the idea is that you will have to explore your resources such as your textbook, lecture slides, or online references to learn how to complete these features.
- Background: Set the overall page to use a background image of http://www.cs.rochester.edu/u/jbigham/courses/210/assignments/1/silverware.jpg (use absolute URLs to link to all images). The image should repeat in both directions across the page and should not move when the page is scrolled.
- Favicon: Set the page to have a "favorites icon" ("favicon") of http://www.cs.rochester.edu/u/jbigham/courses/210/assignments/1/pie_icon.gif (use absolute URLs to link to all images). Instructions for favicons are found in Chapter 3 of the textbook. The favicon will not work properly in Internet Explorer; you may ignore this.
- Pie bullet: Set all bulleted lists of items on the page to use an image for their bullet icon rather than the normal black circle. Use the image of http://www.cs.rochester.edu/u/jbigham/courses/210/assignments/1/pie_icon.gif (use absolute URLs to link to all images).
- Wide headings: Widen all headings on the page by placing 0.2em of horizontal spacing between neighboring letters in all headings.
- Borderless image links: Get rid of the yellow borders around the W3C images at the bottom of the page.
As much as possible, you should implement these changes by modifying your CSS code rather than your HTML. Some of the CSS properties necessary will not have been covered in class, so you must learn them yourself. Try using the textbook, Google, or looking at a CSS property reference such as the following site:
A screenshot of the expected output for the extra features is as the following. The screenshot in this document was taken on Windows XP using Firefox 2.0, which may differ slightly from the appearance on your system. You can click the screenshot below to see the full size image.
Implementation and Grading:
Implement your pie.html
web page using XHTML 1.1 as taught in class.
For full credit, your page must successfully pass the
W3C XHTML 1.1 validator with no errors
(a green bar).
(It is okay if the validator says your page is "tentatively" valid or has warnings,
as long as you see the green "Valid" bar in the validator.)
You should choose appropriate HTML tags to match the structure of the content
being displayed on the page.
Do not express stylistic information in the HTML page itself,
such as inline styles or presentational HTML tags such as b
or font
.
You may not use HTML tables in your pie recipe page.
You only need to worry about the appearance of your page in standards-compliant web browsers such as Firefox. Your pages will not be tested in any way in Microsoft Internet Explorer or other browsers that do not comply to web standards.
Express all stylistic information on the page using CSS defined in recipe.css
.
For full credit, your style sheet must successfully pass the
W3C CSS validator.
Part of your grade comes from expressing your CSS concisely and
without unnecessary or redundant styles.
Outside of extra features,
do not use HTML or CSS constructs that have not been discussed in lecture or the slides,
through Chapters 2-3 of the textbook.
Though they will not be discussed until after the homework is assigned,
you may know about using class and id attributes to target HTML elements for styling.
Do not overuse such attributes in your HTML unnecessarily.
If there is already a suitable tag for representing a given piece of content,
favor the use of that tag rather than a less appropriate tag with a class
or
id
attached for styling purposes.
Format your HTML and CSS nicely so that it is as readable as possible, similarly to the examples shown in class. Also place a comment header in each file containing your name and a brief description of the assignment and the file's contents. You must properly use whitespace and indent your XHTML and CSS code following examples shown in class. To keep line lengths manageable, do not place more than one block element on the same line or begin any block element past the 100th character on a line. For reference, our solution has 118 lines of HTML and 36 lines of CSS, though you do not need to match this exactly.
The majority of the points for this assignment will be for the
pie.html
and its recipe.css
files.
The index.html
will also be graded, but it will be worth fewer points.
The main stylistic constraint on your index.html
file is that
it should pass the W3C XHTML 1.1 and CSS validators.
Beyond that it can contain any non-obscene content you like,
even content that uses material we have not yet learned in lecture.
Please do not link to external resources
(other than image files or index.css
) from your index.html
page.
Turning in your assignment.
Please do not place a solution to this assignment online on a publicly accessible web site.
Extra Credit
As usual, there are some extra credit opportunities this week, including your first change to earn a bell! And, lucky for you, in addition to being an excellent learning opportunity, the bell looks quite tasty. As usual, the page you turn-in should be a web page that describes what you did and links to your submission (and any extra credit options).
- Be creative in your index.html page - really sell the magnificent pie.html.
- We're learning about XHTML, but other standards are also legitimate - and it's good to know the differences. Rewrite your page so that it adheres to the HTML 4.01 Specification. Make your page pass the W3C's Markup Validation Service as valid HTML 4.01 and earn a shiny new bean-and-cheese-product-filled bell!
- Pictures are soooo a relic of a bygone era - download this pie making video, host it on your web page, and embed it on your page using HTML 5.
- Make the pie described in this assignment and bring it to class to share on 1/4/2013. Replace the stock picture of the pie on the web page with your very own pie (or the fun you had baking it).
- You've been putting your assignment files up on the department run web server, but one of the really great things about the web is that you don't have to be a big fancy computer science department to run a web server. To get this bell, run Apache for yourself and send me a screen shot of your browser accessing your submission on your very own web server. To get your started, here's the Apache HTTPD (web server) Project Download Page), but you'll probably need to Google instructions for your operating system (it will work on Windows, Mac, Linux, and probably even on your jailbreaked iPhone).
- Get Apache running on your iPhone (other other smartphone).
- Get Apache running on your gaming system (Wii, Playstation, Xbox).
Props
This document's contents are (C) Copyright 2009
Marty Stepp / Jessica Miller and licensed under Creative Commons Attribution 2.5 License.
It's been changed and adapted to the UofR by Jeffrey Bigham, Zhuan Chen, and Nat Martin.