Html and css practice exercises with solutions pdf

html exercises
Subject
Programming

Question Description
Shape Up! 3, 4, 5, and 6

You need to follow the steps in the pdfPreview the document to complete the above assignments.

The files needed for the assignment are located in this zipPreview the document file.

If you have questions, pose them in shapeup3 discussion. Other students will get a chance to assist you. If you have tried the discussion forum and its still not clear send me a text explaining the issue.

When you have finished the assignment, zip up the shape_up_exercises folder. Upload the shape_up_exercises.zip file only.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.  Format the links in the aside so they’re displayed in boldfaced steelblue 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 maroon.  In the header, float the image to the left and indent both headings. In addition, change the color of the first heading to steelblue, italicize it, and add a steelblue shadow.  Format the list to increase the space between the list items.  Reduce the font size for the footer and center it.  Link the main style sheet that you just created as well as the normalize style sheet that’s in the styles folder to the home page.