Html and css lab exercises

1 Shape Up! exercises for Murach’s HTML5 and CSS (4th Edition) Shape Up! Case Study for Murach’s HTML5 and CSS3 (4th edition) This case study consists of a series of exercises that will guide you through the development of the pages for a health-oriented website. Guidelines for doing the Shape Up! Case Study Unlike the exercises in the book, the exercises for this case study don’t give you step-bystep instructions. Instead, the description for each exercise includes an image of how the page should appear in a browser, along with specifications that you can complete in whatever sequence you prefer. These specifications are detailed enough for you to complete each exercise. However, you’ll need to use your best judgment on how to code many of the details. Before you do the first exercise, your instructor will give you the starting files for the website. These files are stored in a folder named shape_up_exercises and include starting HTML and CSS files for the home page, along with all supporting files such as image, media, JavaScript, and text files. HTML files with “under construction” messages are also included for all of the other pages that can be accessed from the menu that you’ll add in exercise 7, so you can refer to these pages from the menu. The exercises will instruct you about when to use each of the starting files. 2 Shape Up! exercises for Murach’s HTML5 and CSS (4th Edition) Shape Up! 3 Create the home page In this exercise, you’ll code the HTML for the home page. When you’re through, the page should look like this: Specifications  Create the home page from the index.html file that’s in the root folder for the website. This file includes just the basic HTML elements.  Add the HTML5 semantics to structure the page so it includes a header, the main content, and a footer. 3 Shape Up! exercises for Murach’s HTML5 and CSS (4th Edition)  Add an image and two levels of headings to the header. You’ll find the image, named shape_up_logo.png, in the images folder. You’ll find the text for the header as well as for the other areas of the page in the home.txt file in the text folder.  Add three levels of headings and the required text for the main content. The level-3 headings should contain links to other pages named index.html that can be found in the strength, cardio, stress, and diet folders.  Code the quote in the second paragraph of text as a block quote.  Code the additional resources as an unordered list with links to external pages that you locate.  Add the required text to the footer, using a character entity for the copyright symbol.  Add the link element for the favicon to the head element of the HTML document. You’ll find the favicon in the images folder. 4 Shape Up! exercises for Murach’s HTML5 and CSS (4th Edition) Shape Up! 4 Format the home page In this exercise, you’ll create an external style sheet that you can use to format the Shape Up! home page that you created in exercise 3. When you’re through, the page should look similar to this: Specifications  Create the external style sheet for the home page from the main.css file that’s in the styles folder. This file is currently blank.  Set the default font for the document to a sans-serif font.  Adjust the font sizes for all of the headings so they look as shown above. 5 Shape Up! exercises for Murach’s HTML5 and CSS (4th Edition)  Format the links in the section so they’re displayed in maroon whether or not they’ve been visited. If a link has the focus or the mouse is hovering over it, though, it should be displayed in steelblue.