STACYTARVER

Arrays and Loops.

Using arrays and loops, create a table that lists the brands of five shoe companies next to the (fictional) worth of each company.  Store the information (shoe company names and associated value) using arrays.  Using either type of loop, add the HTML elements for a table (<table>, <tr>, <th>, <td>, etc.) to the document.  The easiest way to store the data is in two separate arrays, where each numerical index of one array associates to the other.  You could also use a multi-dimensional array or object.

jQuery!

Here is some sample HTML text content (all about meat).  Using jQuery, the user can highlight and un-highlight each paragraph by clicking on the text.  When the user mouses over any header, the text size of the header will increase until it reaches 50.  Also, every time the user mouses over any header, random pictures of kittens appear at random places within the browser window.

Meow.

COOKIES!

Using cookies, this page allows the user to type their username into a form, submit the form, refresh the page and be greeted with their username.

HTML Background Images Assignment!

Create one web page that showcases each of the following examples, using a unique image for each:

• Background image tiled horizontally
• Background image tiled vertically
• Background image in the lower right area of the div
• Background image “fixed” in the background so it doesn’t scroll

HTML Forms Assignment!

Create a web page that contains a form.  The form must have a specific goal (such as submitting user feedback or ordering a product) and must contain the following elements:

• At least four text inputs
• At least one multi-line text input
• At least two check boxes
• At least two radio buttons
• At least one field set and legend
• A submit button
• A pull down/select option
• A Javascript pop up as the form’s action (as shown in class)

Use CSS to style your form.

JavaScript Events Hackathon #2:

This code creates 3 divs (called “box”).  When the user clicks on any box in the browser, the script automatically changes that box’s height and width to a random height and width, and changes its background color to a random background color.  Simple fun.

JavaScript Animation! Hackathon Assignment:  

This code makes a box that moves left and right across the browser window 500 pixels.  BOOM.

Tables

Create the following four tables using proper HTML markup.  Utilizing CSS, give each table a width of 400px and a black 1px border.  Put a non-breaking space (&nbsp;) in each TD tag.

Note that since you don’t have any information to put in these tables, it’s difficult to determine where you would use a TH tag – as such, you can use just TD tags for this assignment.

HTML Midterm Project

 For your midterm project, you’ll be creating a small website consisting of a home page and two additional pages, for a total of three pages.

 Pick a subject that interests you and build the site around that.  There’s likely a certain type of music that you are passionate about, an area of the world, a certain type of animal – anything you can think of that you can create a simple site for.

 Your website needs to meet the following requirements:

• There should be a navigation system in place so that you can get to any of the three pages from anywhere in the site (in other words, use links on each page that link to the other pages)
• There should be at least one image on each page, using the alt=”value” attribute.
• There should be at least one paragraph of text on each page, 5-6 sentences ‘actual’ paragraph text—not total sentences per page – (lorem ipsum) is not acceptable, all content should be written by you and references used when needed).
• There should be a list on at least one of the pages.
• Use at least one heading on each page to show information hierarchy.
• Don’t forget to title each of your pages.