Lab Chapter 3: Adding Structure to an HTML Page Habitat for Humanity

Transcription

1 Lab Chapter 3: Adding Structure to an HTML Page Habitat for Humanity This lab will add the semantic elements to the index.html file for the Habitat for Humanity website. Then we will learn how to add images, internal links, external links, and lists. You will need to download the chapt3_cmfr_files.zip file from Moodle Lab1_XX site folder (where XX are your initials) and place the image files into a folder called images. Your file structure for this website should look like the example to the right. File structure is crucial for the success of your website. If files are not saved to the site folder in this manner then when you move the site folder to a web server and a browser calls a page it will not find it and will display an error. Once you have finished this lab you will need to zip the site folder (Lab1_XX_week4 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. Lab1_XX css images index.html To start this lab you will need to open the index.html file in Notepad++. To download a copy of Notepad++ visit their website at: Editing the index.html file 1. Open the index.html file and locate the second <meta> tag and replace the text in quote for the content attribute with the following text: Habitat for Humanity, building, volunteer, donate, community, housing, communities, a place to call home 2. Locate the third <meta> tag and replace the text in quote for the content attribute with the following text: Habitat for Humanity believes that every man, woman and child should have a decent, safe and affordable place to live. Learn how you can get involved and make a difference in the world. 3. Locate the <title> element line of code and add a blank line under it. 4. Add the following <link> element to create a favicon in the webpage address. <link rel="shortcut icon" href=" type="image/vnd.microsoft.icon" /> 5. Save your work and view the page. You should note that in the tab of the browser the Habitat for Humanity logo now appears. 6. Return to the index.html file and locate the body tag and delete the line <h1>habitat for Humanity</h1>. 7. Add the following code to add the organization s logo. <img src="media/logo.png" alt="habitat for Humanity logo" /> 8. Add a level 4 heading with the text Simple, decent, affordable housing. 9. On the next line close the </heading> element. Your code should look like the example below. 10. Save your work and view it in the browser.

2 Adding Navigation For the Habitat for Humanity site we are going to have the navigation on the left side going down on the page. To accomplish this we will be using the structural semantic element <aside> and the <nav> element. To create the menu list itself we will be using the unordered list element<ul> and list each link using the <li> element. 1. Return to the index.html file and locate the closing </header> element and add a blank line. 2. Add the element <aside> and select enter. 3. Tab in 3 spaces and add the <nav> element. 4. On the next line add the <ul> element and then add 3 blank lines. 5. On the third blank line close the </ul> element. 6. On the next line close the </nav> element 7. On the next line close the </aside> element. Your aside element should look like the diagram on the right here. Note the indentations of the element. This makes it easier to troubleshoot issues and organize the code. 8. Save your work. Adding Internal Links 1. Under the open of the <ul> element add three spaces and add the <li> element followed by Home and then close the </li> element. 2. Repeat this for the Learn More, Volunteer, Advocate, and Donate pages. These menu items will be the targeted text that makes the clickable links possible to navigate between pages and other sites. 3. Click between the open of the <li> element and the Home text and add the <a> element. This element will make the targeted text that is nested between the open and closed tag elements the actual link. <a href="index.html" title="home page"> Note that there are two attributes for the <a> element. The first one, href, tells the browser where to find the file for the page that the visitor will go to. The second one, title, is for text readers and to provide a hover tip as to what the link is for. Both of these attributes are mandatory and standard practice. 4. Close the </a> element tag and make sure there are no spaces between the targeted text and the elements. <a href="index.html" title="home page">home</a> 5. Add the links for the rest of the menu items. When done your code should look like the diagram below. Chapter 3: Adding Structure to an HTML Page 2 Passanisi 2016

3 6. Save your work and view it in a browser. You should see your navigation now. Adding External Links When adding an external link to another page not within your site structure it is important to note that you will need to use the full URL for the path to the file. You should also use the attribute target= _blank to open a new tab in the browser. Failure to use this attribute will take your visitor off your page with no way to go back if they end up clicking different links on the other site. Let s make an external link in the class footer to the school s website. 1. Go to the footer section of the file and find the line that has the schools name. 2. Click in front of the letter B and add the following line: <a href=" title="bunker Hill Community College" target="_blank"> element that creates the link attribute that provides the file location attribute that provides a link tip and used by text readers for the visually impared attribute that opens the link in a new tab in the browser 3. Remember to close the tag after the targeted text (which is the school s name) with </a>. 4. Save your work and test the link. Adding Content to the Page 1. Locate the closing </aside> element and add two blank lines. 2. Add the open <main> element on the second blank line and then add two blank lines. 3. Add the close </main> element on the second blank line. 4. Place your curser between the open and close tag. 5. Open the hfh_home.txt file that you downloaded from Moodle and open it. 6. Select all the text in this file (Ctrl+a) and copy it (Ctrl+c). 7. Return to the index.html file and paste (Ctrl+v) the text between the open and close <main> element tags. 8. Save your work. 9. Add the text structural elements to the text to provide structure and basic formatting. Apply the <h2> elements to the following headers: Our Mission Why Web Build Advocacy in Action 10. Apply the <p> elements for the paragraphs that are under each of the 3 headings listed above. Chapter 3: Adding Structure to an HTML Page 3 Passanisi 2016

4 11. Wrap each of these sections starting with the open tag of the <h1> element and after the closing of the </p> element with the <article> element open and close tag like the example of code below. 12. Locate the line under the third close </article> element that begins with Build Your Community and add an open <article> element above it. 13. On the Build Your Community line, apply the <h4> element tag set to the line. 14. Add the open and close <p> element to the next line. 15. On the next line close the </article> element. 16. Click after the <p> element tag and add an eternal link to the words Start today and then close the element. <a href=" title="sign up today!!!!" target="_blank">start today</a> 17. Save your work and test the link in a browser. Review your code if your link does not work and try again. 18. Move the close </main> element, the <hr> element and the open <footer> element tag so it is below the close </article> element tag you just finished with. 19. Locate the line of text Learn About Habitat. This line should be under the open <footer> element now. This line and the 3 lines under it are going to be turned into a second navigation menu. 20. On the line directly above Learn About Habitat add the <nav> element. 21. Add the following code on the next page to your text. NOTE: When adding the links make sure you start the <a> tag between the and the targeted text and to close the </a> tag after the text but before the. Chapter 3: Adding Structure to an HTML Page 4 Passanisi 2016

5 22. Save your work and test each line. Correct any errors you may encounter. Adding Special Characters From time to time you will need to use special characters on a web page. On page 93 of the text book there is a list of special characters and how to code them so they show in a web page. You can also read more about them at W3Schools. 1. Return to the index page and locate the line of text in the footer section that starts (C)Habitat for Humanity(R). Select the entire line of text and move it under the class footer. 2. Enclose the text in the paragraph element and then apply the appropriate code to each of the (C) and (R). 3. Save your work and then view it in a browser. You page should look similar to the one pictured below. Validate Your Code 1. Save your work and test each page with the validator. Chapter 3: Adding Structure to an HTML Page 5 Passanisi 2016

6 2. Correct any issues that the validator reports. 3. Once you have no errors on any of the file zip the entire site folder for the Colorado Mountain Family Resort and rename the zipped folder lab1_xx_week4 and upload to the appropriate location in Moodle. Chapter 3: Adding Structure to an HTML Page 6 Passanisi 2016