$24
Assignment #1 Instructions: HTML 5 + CSS 3 Solution
Overview
The intent of this assignment is to demonstrate your mastery of HTML and CSS.
There are three projects in this assignment. Follow the instructions for each project to complete them. You have been provided with the necessary files to complete these projects.
Submitting
Put your assignment in a folder named assign1_yourname (e.g., assign1_johnsmith). Put all resources used by your assignment into this folder and compress them into a zip file. Upload the zip file to the Assignment 1 submission dropbox on elearning on or before the due date.
Project 1 (HTML 5): Share Your Travel Photos
Overview
This project is the first step in the creation of a travel photo-sharing website using HTML 5. The page you are given is augmented by this project so that the completed project appears similar to that shown in Figure 1.
Figure 1 Completed Project 1
Instructions
Open chapter03-project01.html in the editor of your choice, so you can start making changes.
Open a browser and direct it to the same file (or double click the file in most operating systems). You should see a page similar to Figure 1.
Start by adding an image logo.png to the <h1 heading. The image is in the images folder.
In the unordered list, add links to the <h3 headings. This will require referencing in the href the id attribute of those headings.
Add a paragraph for Options under the figure. Add the correct icons in the images folder as shown in Figure 1.
Add a new section for the Related Photos. In this new section, add three images from the ones provided in the images folder. Use the small images related-square1.jpg, related-square2.jpg, and related-square3.jpg, but link to the large images with almost the same names.
Add an additional review.
Testing
Firstly, test your page by seeing if it looks like the one in Figure 1.
Now check that the links at the top of the page work correctly and that clicking on the related images brings up the larger versions.
Validate the page by either using a built-in tool in your editor, or pasting the HTML into http://validator.w3.org or https://html5.validator.nu and ensure that it displays a message that indicates it contains no errors.
Project 2 (CSS): Art Store
Overview
This CSS project builds on an art store example, but purposefully leaves you having to dig a little deeper into CSS.
Instructions
You have been provided with the markup for a file named chapter04-project03.html.
Create an external style sheet called reset.css that removes all the browser formatting from the main HTML elements and reference inside chapter04-project03.html as follows:
html, body, header, footer, main, nav, article, section, figure, figcaption, h1, h2, h3, ul, li, body, div, p, img
{
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
border: 0;
}
Create another external style sheet named chapter04-project03.css and link to it in your HTML file. Define the relevant CSS styles so that your output looks similar to that shown in Figure 2. Do not modify the markup within the <body element.
You will have to use a CSS3 feature that will require some research on your own. The background-size property can be used to force a background image to resize to the width of the browser window.
Figure 2 Completed Project 2
Notice that two of the blocks in Figure 2 are partially transparent. Remember that CSS3 allows you to specify the alpha transparency of any color.
Finally, the header uses the font Merriweather which will have to be supplemented with other options in the font stack in the event that font is not present on the client's computer.
Testing
First, try resizing your browser to ensure the image resizes dynamically to fill the space, and the floating objects position themselves correctly.
Try out different browsers or platforms to see if it really works on all types of devices. To emulate mobile browsers, shrink the browser size, as shown in Figure 2 .
Project 3 (HTML Table and Forms): Advanced Art Work Search
Overview
This project lets you edit Chapter05-project02.html and Chapter05-project02.css so the page looks similar to that shown in Figure 3.
Figure 3 Completed Project 3
Instructions
The form at the top of this page consists of a text box, a list of radio buttons, and two drop-down lists. For the Genre dropdown list, make the other choices “Baroque,” “Renaissance,” and “Realism.” For the Bulk Actions dropdown list, make the others choices “Archive,” “Edit,” “Delete,” and “Collection.” The drop-down list items should have numeric values starting with O. Notice the placeholder text in the search textbox.
Create a table of paintings that looks similar to that shown in Figure 3. Be sure to make the table properly accessible.
The checkboxes in the table should be an array of elements, for example, <input type=“checkbox” name=“index[]” value=“10” /. The name and values are arbitrary, but each checkbox needs to have a unique value.
The action buttons in each row are a series of <button containers with a dummy link and an image within the button.
Set the form's method attribute to GET and its action attribute to http://www.randyconnolly.com/tests/process.php.
While some of the styling has been provided, you will have to add some additional CSS styling.
Testing
Test the form in the browser. Verify that the output from process.php matches that shown in Figure 3.
(End of Assignment 1)
