Lab Chapter 5: Applying The Box Model Habitat for Humanity

Transcription

1 Lab Chapter 5: Applying The Box Model This lab will demonstrate how to apply the Box Model format for the website. When done adding the CSS for the box model your website will look like the example below. It will also be a Dynamic website, which means it will resize as needed for the screen size. Your finished index.html page will look like this once you have completed this lab. Below is a mix of the code we have coded in class and the code you will need to add to the index.html file. DO NOT use any other name for this file. Once you have finished this lab you will need to zip the site folder (Lab1_xx_weekx.zip) and upload it to the appropriate location in Moodle. Failure to upload the entire zipped site folder will result in a ZERO for the entire lab. NO EXCEPTIONS. Download the volunteers.jpg file from Moodle and add it to the images folder. Adding a link to an Image 1. Open the Lab1_XX\index.html file for the lab where you store your files. 2. Locate the <p> element with Start Today to become the leaders of Habitat tomorrow! and add the image YP3_14to25.jpg in front of the paragraph element. 3. Add the following external link open tag element in front of the image element that was just added. <a href=" title="sign up today!" target="_blank"> 4. Add the closing tag </a>after the image element. Your code should look like the image on the next page.

2 Add this link Adding Styles in the CSS file for the box model 1. Open the habitat.css file and add the following code right under the commented first line. This will add some padding between the gray navigation section and the text once we have updated the rest of the habitat.css file. 2. Add the following code to the nav section of the habitat.css file. padding-right: 24px; margin-right: 10px; 3. Save your work and check it in the browser. You should now have some padding in both the navigation and in the main area of the text. Applying the box model to the body, header and footer 1. Return to the habitat.css file and add the following code to the body element: This will now add a 5 pixel light grey border to the top, right, bottom and left of the body box. 2. Add the header element selector with the following code: This will add a 5 pixel light grey border to the bottom of the header element. 3. Add the following code to the footer element: This will add a 5 pixel light grey border to only the top border of the footer element. Chapter 5: Applying Box Model Page 2 Passanisi 2016

3 Add the header selector to the css file so that all the headers from <h1> through <h4> will be 110% of the base font and set the top and bottom margins as follows: Add a Class Selector 1. Click into the habitat.css go to the bottom of the file and add a class that will allow any element in the html file to float to the right. 2. Click back into the index.html file and find the line of code <h2>our Mission</h2> and add a blank line under it. 3. Add the following line of code: 4. Save your work and view it in a browser. The image should now be to the right of the text similar to the picture the index file on the first page of this lab. Add Video 1. Locate the <h2>why We Build</h2> line and add a new line. 2. On the new line add the <video> element as it appears below: 3. Save your work and view it in a browser. The video should now be to the right of the text under the image you just moved. Add Audio 1. Locate the closing </article> associated with the <h2>advocacy in Action</h2> line and click just above it. 2. Add the <audio> element as it appears in the image below: 3. Save your work and view it in a browser. The audio player should now be just under the text for the Advocacy in Action paragraph. Adding a Background Image and Transparency 1. Return to the habitat.css file and locate the nav selector. 2. At the bottom of the stack add: opacity: 0.8; 3. Locate the main selector and add the following declarations to the stack: Chapter 5: Applying Box Model Page 3 Passanisi 2016

4 4. Save your work and view your page in a browser. Adding Rounded corners and shadows to borders 1. Return to the habitat.css file and go to the bottom of the page. 2. Add a new class called navlinks (remember to start your class with a period) and add the code as you see to the right. 3. Return to the index.html file and locate the open <nav> element tag. 4. Remove all of the list elements from the navigation structure (ul and li elements). 5. Add a line break at the end of each of the 5 links. 6. Add the class you just created to each of the 5 links. 7. Remove the open and close of the <aside> element from around the navigation structure. 8. Save your work and view it in a browser. It should look like the image of the index file on the first page. 9. Upload the index.html file to the W3C Markup Validation Service and resolve any errors you encounter. 10. Upload the habitat.css file to the W3C CSS Validation Service and resolve any errors you encounter. Creating the other pages for the site 1. Return to the index.html file and select File from the menu bar and then save as 2. In the File name: box type in the file name more.html and then select save. 3. Find the <h2>our Mission</h2> line of code and replace with <h1>learn More</h1>. 4. Delete all the lines below the one you just edited until you get to the line before the close of the </article> element that is above the close of the </main> element. In the <head> section of the page, find the <title> element. Add Learn More in front of text. 5. Save the page. Check your page in a browser and test the link to the home page. If everything looks right you will now want to validate the page. 6. Upload the more.html file to the W3C Markup Validation Service and resolve any errors you encounter. You will be using the more.html page to build the resto of the pages needed for the site so it is crucial that this page has no errors before you create the rest of the pages. Chapter 5: Applying Box Model Page 4 Passanisi 2016

5 7. Save the page again using Save as and name the page volunteer.html. 8. Change this page title element to read Volunteer. 9. Find the <h1>learn More</h1> line of code and replace Learn More with Volunteer and save your changes. 10. Save the page again using Save as and name the page advocate.html. 11. Change this page title element to read Advocate. 12. Find the <h1>volunteer</h1> line of code and replace Volunteer with Advocate and save your changes. 13. Save the page again using Save as and name the page donate.html. 14. Change this page title element to read Donate. 15. Find the <h1>advocate</h1> line of code and replace Advocate with Donate and save your changes. 16. View the pages in a browser and make sure all the links work. 17. When you are done and zip the site folder (lab1_xx_weekx.zip) and upload it to the appropriate location in Moodle. Chapter 5: Applying Box Model Page 5 Passanisi 2016