Animals & Wildlife

Meet some amazing animals that inhabit our world, and learn what The Nature Conservancy is doing to help protect their habitats.

Wild Animals

• Wolf
• Fox
• Lion

Domestic Animals include a list of animals which are or may be undergoing the process of domestication and animals that have an extensive relationship with humans beyond simple predation.

Domestic Animals

1. Cow
2. Sheep
3. Pig

File ToolsViw CTI110-Lab06(1) Protected Virw Savrd to this PC PROTECTED VIEW Re carefi files frerm the Internet can contain vinuses. UIniles ynu need to edit, it's safer to stay in Protected Vilew. Fnable Fditing - Use the style attribute to define CSS declarations Create an internal style sheet using the style element - Use type selectors to style the document CTI 110 WEB, PROGRAM, AND DATABASE Create an external style sheet - Link the style sheet to the HTML document FOUNDATIONS INSTRUCTION AND PROBLEMS LAB 06 CASCADING STYLE SHEET (CSS) Exercise 1: Creating inline styles 1. Download the animal list.html file from BlackBoard. Assume ( your flash drive is D: drive. Move the file D: xampp\htdocs\webtech\coursework\chapter04 OBJECTIVES In this lab assignment, students will learn - How to use the style attribute to define CSS declarations - How to create an internal style sheet using the style element - How to use type selectors to style the document - How to create an external style sheet - How to link the style sheet to the HTML document 2. Go to: http://localhost/webtech/coursework/chapter04/anim al list.html GOALS In this lab assignment, students will demonstrate the abilities to Screens 1-2 of 14 +147% 1:42 PM O Type here to search File ToolsViw CTI110 Lab06() Protected View Saved to this PC PROTECTED VIEW Re carefi files frerm the Internet can contain vinuses. UIniles ynu need to edit, it's safer to stay in Protected Vilew. Fnable Fditing 4. Go to File > Save As. Save the file animal list.html into animal list01.html Animals & Wildlife 5. Within the file animal 1ist01.html, locate the h3 element on line 12. To the opening h3 tag, add the style attribute Mul wsue amazing animals llal inlabit our world, and leam wlal Nature Couscr vancy is doing to liclPF Wild Animals 6. Set the style attribute's value to the following declaration: Wolf color: #1B75BB * Lion Domestic Animals inchde a list of animals which are or may be uderpoing the peocess of domestication and Domestic Animals 7. Locate the span element on line 14. To the opening span tag, add 1. Cow 2 Sheet 3. Pig the style attribute 8. Set the style attribute's value to the following declaration: 3. Back to your editor, open the animal list.html file o font-weight: bold chead> title>Animal Lists/title an tyle-"ant-wight: bola"> 5/head> 7 9. Locate the p element on line 21. To the opening p tag, add the Animals& Wildlfe s/hl style attribute 10. Set the style attribute's value to the following declaration 11 P p Neet sone amazing animals that inhabit world our ul> span 13 o color: #58585B 17 /span> /ul> Screens 3-4 of 14 +147% 1:42 PM O Type here to search File ToolsViw CTI110 Lab06() Protected View Saved to this PC PROTECTED VIEW Re carefi files frerm the Internet can contain vinuses. UIniles ynu need to edit, it's safer to stay in Protected Vilew. Fnable Fditing 11. Save the file and refresh your browser at: http://localhost/webtech/coursework/chapter04/anim al _list01.html. Notice that font color and weight have been styled Must Voted etated Animals & Wildlife 12. FTP the file animal list01.html to your apollo server Meet some amazing animals that inlabit our world, and learn what Wild Animals Wolf Lion Exercise 2: Creating an internal style sheet 1. Open the animal_list01.html using your HTML editor. 2. Review t Domestic Animals include a list of animals which are or may be he page in the browser at Domestic Animals http://localhost/webtech/coursework/chapter04/anim al list01.html 3. Return to Brackets 4. Go to File > Save As. Save the file animal list01.html into animal list02.html 5. In the head element of animal list02.html, below the title element, add a style tag block. itlu?Aainal Liat atyle> chead Screers 5-o of 14 +147% 1:42 PM O Type here to search File ToolsViw CTI110 Lab06() Protected View Saved to this PC PROTECTED VIEW Re carefi files frerm the Internet can contain vinuses. UIniles ynu need to edit, it's safer to stay in Protected Vilew. Fnable Fditing 6. Within the style tag block, add an h3 type selector 10. We need modify span element with the style attribute. Copy the font-weight declaration in the attribute (font-weight: bold) used previously 11. Return to the span selector in the style element and paste the 4/otyle font-weight declaration within the selector. Add a semicolon at the end of the declaration 7. Use the color declaration in the style attribute previously (color #1875BB). 8. In the h3 selector in the style element and paste the color h3 declaration within the selector. Add a semicolon at the end of the declaration 12. Below the span selector, add a p type selector h3 9. Below the h3 selector, add a span type selector font weight: hola; h3 /style> Screens -8 of 14 +147% 1:42 PM O Type here to search File ToolsViw CTI110 Lab06() Protected View Saved to this PC PROTECTED VIEW Re carefi files frerm the Internet can contain vinuses. UIniles ynu need to edit, it's safer to stay in Protected Vilew. Fnable Fditing 13. Locate the p element with the style attribute. Copy the color 18. FTP the file animal_list02. htmlto your apollo server declaration in the attribute (color: #58585B) previously 14. Return to the p selector in the style element and paste the Exercise 3: Creating an external style sheet color declaration within the selector. Add a semicolon at the end of the declaration 1. Open the animal_list.html using your HTML editor (e.g Brackets) 2. Review the page in the browser at: http://localhost/webtech/coursework/chapter04/anim al list.html color: 11 75DD; color : 58585 Animals & Wildlife Meet some amazing imas that inhabit cur woeld, and leans Wild Animals 15. Now, in your HTML editor. Remove the following: the style attribute from the

tag. (approximately on line 25) . Wolf Fox Licn the style attribute from the span tag. (approximately on line 27) Domestic Animals include a list oCmimals which ae or may the style attribute from the p tag. (approximately on line 34) Domestic Animals 16. Save the file animal_list02.html again. Refresh your L. Com browser at http://localhost/webtech/coursework/chapter04/anim al list02.html This is the file that you originally downloaded from the BlackBoard 3. Return to Brackets 4. Go to File > Save As. Save the file animal list.html into 17. The text in the Animal List web page should now have styles animal list03.html applied Screens 9-10 uf 14 +147% 1:43 O Type here to search File Tools View CTI110 Lab06() Protected View Saved to this PC PROTECTED VIEW Re carefi files frerm the Internet can contain vinuses. UIniles ynu need to edit, it's safer to stay in Protected Vilew. Fnable Fditing Di/xampplite/htdocs/Webtech/coursework/Chapter04/styles.css (Getting Started) 5. Again, File > New. You see an Untitled empty content document. 6. Still, File>Save As the empty file to your flash directory at: bug Help 17 h3 D \xampp\htdocs\webtech\coursework\chapter04 7. Name the file styles.css 8. Open the animal list02.html file and copy the contents of the color: #1875BB; span { font-weight: bold style element block in the document head. 9. Now, open the styles.css file and paste the CSS rules. Save the color: 585858 10. FTP the styles.css to your apollo server 11. Return to the animal list03.html 12. Still in the document head, add a link tag with the following 3 attributes pan o href: styles.css o rel: stylesheet font weight: bold; color : #5e5836 Famad Screens 11-12 of 14 +147% 1:43 O Type here to search