HTML Markup Assignment

Background information

Date: October 16, 2013.

We are making available an optional but recommended assignment, which hopefully shouldn’t take too much time to complete. The purpose of the assignment is to give you an opportunity to familiarize yourself with the basics of HTML Structural markup and Cascading Style Sheets and how to use them. Please try to do this assignment before October 22, so we have a chance to look at the results and maybe even highlight some particularly good submissions in class next Tuesday.

We are providing you with the following resources:

  1. A plain-text version of a document which we would like you to mark up
  2. An image to be inserted into the document

Here is what we would like you to do:

  1. Structure the page using h1-h6 as needed and applicable. Don’t forget the title element in the header.
  2. Use ordered/unordered lists as needed.
  3. Place the image in the HTML page as appropriate (not in the background) and come up with good alternative text; note that your alt text must be brief, descriptive, and precise.
  4. Put the information in the Grade Scale into a data table. We didn’t cover the data table yesterday but you can find good information on how to do it on the iCITA website:
    http://html.cita.illinois.edu/nav/dtable/
  5. Use an external CSS file for all stylistic effects and positioning. We are looking for complete separation of content and styling. We don’t want to see any style information in the HTML file.  Please also make sure that you use percentage or em and not px.
  6. Post it at some public site and send the URL to the list. A Dropbox Public folder is a good place to publish it If you can’t use your company’s site. Here is some information on sharing links from any folder in Dropbox:
    https://www.dropbox.com/help/16/en
    If your Dropbox account was created after October 4, 2012, you will not have a Public folder by default, but you can enable one for your account by visiting the following link:
    https://www.dropbox.com/enable_public_folder
    There are many other cloud-based file storage and sharing options out there.  For example, Google Drive, SkyDrive, and Box also have the ability to share files as described above for Dropbox.
  7. We know that you all are very busy but it would be really great if you could additionally design a navigation bar and position it on the top of the page or on the left side and precede it with an off-screen heading called “primary navigation”. The links in your navigation bar should point to major headings in your page, which means you’ll want an in-page. So named anchor link (see http://www.w3schools.com/tags/att_a_name.asp for more information)

Additional help getting started:

If you aren’t particularly familiar with HTML and CSS, you can use these template files to get yourself started, using the following steps:

  1. Create a new HTML file and call it flexibility_assignment.html; alternatively you can download our sample HTML file (after downloading, change the file extension from “.txt” to “.html”).
  2. Download the sample CSS file, and make sure it is named “main.css” (after downloading, change the file extension from “.txt” to “.css”).
  3. Download the ballet_jump.png file.
  4. Copy main.css and ballet_jump.png into the same folder as your HTML file.
  5. Paste the content of the flexibility_assignment.txt document into your HTML file or the provided sample HTML file.
  6. Pull up your favorite HTML editor and start playing! Some programs you could use to edit HTML files include Notepad++, CoffeeCup HTML Editor, DreamWeaver, or even the builtin- text editor that comes with your operating system: Notepad in Windows, or TextEdit in Mac. There are too many to list them all, so try out a few and see which ones you like! You can start with Wikipedia’s Comparison of HTML Editors to find some options.

Let us know if you have any questions.  We hope this is a good learning experience for everyone!