Assignment 2

This assignment will be out of 1000 possible points.

Before You Start:

• We highly recommend using a specialized text editor, such as Notepad++ for Windows (download here) or BBEdit for Mac (download here). Do not use a standard word processor, like Microsoft Word. It will mangle your code in unforeseen ways. And do not use a web page generator (it is easy to tell the difference).
• Open your text editor and start writing your HTML code in a blank document. Be sure to save your file as "index.html" (all lowercase). There is probably a drop-down menu in the save window that will let you choose HTML. Do not save your file as "index.txt".
• To edit your index.html file later, do not double-click on the file on your computer. Instead, either right click on index.html and choose your text editor, or open the text editor first and open index.html from there.
• To preview your index.html file, double-click on you index.html file to open it in your default browser (i.e. Firefox, Chrome, Safari, etc.).
• You may use the instructor's example web page as a starting point. Simply go to the website and view the page's source code (sometimes achieved by pressing Control-U on your keyboard). The website has only some of your required items. Be sure to use different content and values than the instructor.
• We do not recommend copying-and-pasting the instructor's source code into your file. This sometimes leads to unseen errors in the code (this becomes very important in the Javascript assignment). Instead, type all your code by hand. This is an important practice for all programmers.
• You can find a list of many HTML tags here. In general, if you do not know the HTML tag for something, a Google search will help (ex. search "centered text html").
• For full credit, you must close all your HTML tags. For example, <B> must eventually close with </B>, <LI> must eventually close with </LI>, etc.
• An excellent resource for learning HTML is w3schools.com. Check out their "Learn HTML" and "Try it yourself" tools available from the home page.
• Your content is up to you, but you must include the Required Items listed below.

Required Items:

1. Title (this is different than a heading) (50 points)
2. Headings of two different sizes (ex. h1, h2, h3, etc.) (50 points each)
3. Add a tooltip (or "hover box") to your first use of the h1 tag. (50 points)
4. Colored background (other than white) (100 points)
5. "Mailto" link to your email address (50 points)
6. Hyperlink to another website (must use a URL, not a file path) (50 points)
7. Bold text and italic text (50 points each)
8. Centered text or photo(50 points)
9. Horizontal line (aka "horizontal rule") (50 points)
10. Ordered list (numbered list) and unordered list (bulleted list) (50 points each)
11. A working picture, hosted online. You can link to an existing photo or upload your own image to photo-sharing sites like Google Photos or imgur.com. Make sure the photo is shared properly, and test your page on someone else's device to be certain. (100 points)
12. Set the width and height of your photo. Recommend 450x600 for portrait layout, or 600x450 for landscape. If your source photo isn't 4:3 aspect ratio, this may look odd. (100 points)
13. Add a comment at the very bottom of your source code, listing the tools you used to create this: operating system, text editor, and the web browser you used to test it. (100 points)

• Note: Please choose appropriate photos and videos for your page. Funny is fine, but for the sake of the TAs who have to grade these, nothing unduly shocking or offensive, please.

Extra Credit: Add a video to your page, using YouTube, Vimeo, or other video hosting service. Find a video, look for the "Share" option, and select "Embed" or "Link" to find a working video link. (100 points extra credit)

Final Step: Upload your index.html file to Canvas.

Addendum: Here's how to Embed an image from Google Photos into your website