ICT Webpage Design Grade 10 Module 8 PDF

Summary

This is a module for Grade 10 students in the Philippines on the topic of Formatting Webpages Using Tags and Attributes. It includes questions and activities.

Full Transcript

Republic of the Philippines Department of Education National Capital Region DIVISION OF CITY SCHOOLS – MANILA Manila Education Center Arroceros Forest Park Antonio J. Villegas St. Ermita, Manila Information and Communications Technol...

Republic of the Philippines Department of Education National Capital Region DIVISION OF CITY SCHOOLS – MANILA Manila Education Center Arroceros Forest Park Antonio J. Villegas St. Ermita, Manila Information and Communications Technology (ICT) Grade 10 Webpage Design Special Science Course Quarter 1 Week 8 Module 8 FORMATTING WEBPAGES USING TAGS AND ATTRIBUTES HOW TO USE THIS MODULE? Before starting the module, I want you to set aside other tasks that will disturb you while enjoying the lessons. Read the simple instruction below to successfully enjoy the objectives of this kit. Have fun! 1. Follow carefully all the contents and instructions indicated in every page on this module 2. Write on your notebook or any writing pad the concepts about the lessons. Writing enhances learning, which is important to develop and keep in mind. 3. Perform all the provided activities in the module. 4. Let you facilitator/guardian assess your answers. 5. Analyze conceptually the post-test and apply what you have learned. 6. Enjoy studying! PARTS OF THE MODULE  Expectations - These are what you will be able to know after completing the lessons in the module.  Pre-test - This will measure your prior knowledge and the concepts to be mastered throughout the lesson.  Looking Back - This section will measure what learnings and skills that you understand from the previous lesson.  Brief Introduction-This section will give you an overview of the lesson.  Activities - These are activities designed to develop critical thinking and other competencies. This can be done with or without a partner depending on the nature of the activity.  Remember - This section summarizes the concepts and applications of the lessons.  Checking your Understanding - It will verify how you learned from the lesson.  Post-test - This will measure how much you have learned from the entire module. 2 LESSON 1: CREATING A SIMPLE WEBPAGE EXPECTATIONS Upon completion of the module, learners should be able to:  create a paragraph;  use attributes for ;  add single and multiple breaks;  add horizontal rule;  use attributes for ; and  insert ordered and unordered list. PRE-TEST: Multiple Choice Directions: Choose the letter of the correct answer and write it on the space provided. ____ 1. Which element defines a paragraph and always starts a new line? a. header b. horizontal rule c. line break d. paragraph ____ 2. What is the opening and closing tag of the paragraph element? a. b. c. d. ____ 3. Which attribute of indicates its horizontal alignment? a. adjust b. align c. placement d. position ____ 4. Which tag creates a line break or a new line? a. b. c. d. ____ 5. Which of the following content is using line break most useful? a. essays b. poems c. tables d. titles ____ 6. Which tag defines a thematic break in an HTML page and places a horizontal rule or line that extends to the web browsers width? a. b. c. d. ____ 7. Which attribute of horizontal rule indicates its size in pixels? a. area b. height c. size d. unit ____ 8. Which attribute of horizontal rule removes its default shading? a. nocolor b. nohue c. noshade d. notone ____ 9. Which type of list is used to list items for which the order of items matter? a. definition list b. ordered list c. random list d. unordered list ____ 10. Which tag is used to list item in both ordered and unordered list? a. b. c. d. 3 LOOKING BACK TO YOUR LESSON Directions: Write the function and correct opening and closing tags of the following elements below. Element Function Opening & Closing Tag 1. Header 2. Footer 3. Article 4. Navigation 5. Section 4 BRIEF INTRODUCTION Most of the HTML elements that make up a webpage are usually text elements. All of the text that can be seen in a webpage, which includes the titles, headers, and paragraphs, are made using text elements. That is why text elements play a very important role in final design and appearance of a webpage. Creating a New Paragraph The HTML element defines a paragraph. A paragraph always starts on a new line, and web browsers automatically add white space (margin) before and after a paragraph. Aligning a Paragraph HTML paragraphs can be aligned using the paragraph tag pair , or. 5 Attribute Function Values align It indicates the horizontal alignment of the left paragraph right Ex. This paragraph center should appear at the right side of justify the screen In HTML, the display cannot be changed by adding extra spaces or extra lines in the HTML code. The browser automatically removes any extra spaces and lines when the page is displayed. 6 Adding Line breaks The tag create a line break or a new line. It is useful for writing addresses or poems since web browsers ignore white spaces and pressing Enter in the keyboard does not necessarily create a new line. The tag is an empty tag which means that is has no end tag. 7 Adding Horizontal Rule The tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule. The horizontal rule tag places a horizontal rule or line that extends to the web browser’s width. The element is used to separate content (or define a change) in an HTML document. Attribute Function Values align It indicates the horizontal alignment of the left horizontal rule. right Ex. center size It indicates the size of the horizontal rule in number of pixels pixels. Ex. 8 width It indicates the width of the horizontal rule number of pixels or number in pixels or percent of the width displayed expressed as percent by the web browser. Ex. noshade It removes the default shading of the none horizontal rule. Ex. color It indicates the color of the horizontal rule. assigned name or Ex. hexadecimal value of the color Modifying Horizontal Rules The width, length, and shading of horizontal rules can also be adjusted. GIF images can also be used to create graphic horizontal rules. 9 Ordered List Ordered lists are used to list items for which the order of items matter. To create an ordered list, the tag is used. This is the type of list where each item is numbered usually starting at 1 but this can be changed using the start attribute. Each item in this list is starts with the tag. The ordered list has different types of numbering and can be specified by putting the specified value for the type attribute.  1 for regular numbering (1, 2, 3, 4, 5, etc.) (default)  a for lowercase alphabet (a, b, c, d, e, etc.) 10  A for uppercase alphabet (A, B, C, D, E, etc.)  i for lowercase Roman Numeral (i, ii, iii, iv, v, etc.)  I for uppercase Roman Numerals (I, II, III, IV, V, etc.) Attribute Function Values type It indicates the type of numbering to be used in the list. 1, a, A, i, I Ex. start It indicates the value or number of the first item in the any number list. Ex. Unordered List An unordered list is a list which the order of the list items does not matter. The ul element opens and closes an unordered list. The items on the list are enclosed with list item, , tags. 11 There are different types of bullet for unordered list. It can be specified by putting the specified value for the type attribute.  disc to set the list item marker to a bullet (default), ex.  circle to set the list item marker to a circle, ex.  square to set the list item marker to a square, ex.  none to list the items without mark Attribute Function Values type It indicates the type of bullet to be used in the list. disc Ex. circle square 12 ACTIVITY: Directions: Write the codes for the following outputs. 1. 2. REMEMBER The HTML element defines a paragraph. A paragraph always starts on a new line, and web browsers automatically add white space (margin) before and after a paragraph. HTML paragraphs can be aligned using the paragraph tag pair , or. In HTML, the display cannot be changed by adding extra spaces or extra lines in the HTML code. The browser automatically removes any extra spaces and lines when the page is displayed. The tag create a line break or a new line. It is useful for writing addresses or poems since web browsers ignore white spaces and pressing Enter in the keyboard does not necessarily create a new line. The tag is an empty tag which means that is has no end tag. The horizontal rule tag places a horizontal rule or line that extends to the web browser’s width. The element is used to separate content (or define a change) in an HTML document. The width, length, and shading of horizontal rules can also be adjusted. GIF images can also be used to create graphic horizontal rules. Ordered lists are used to list items for which the order of items matter. To create an ordered list, the tag is used. This is the type of list where each item is numbered usually starting at 1 but this can be changed using the start attribute. An unordered list is a list which the order of the list items does not matter. The ul element opens and closes an unordered list. Each item in this list is starts with the tag. 13 CHECKING YOUR UNDERSTANDING Directions: Choose the letter of the correct answer and write it on the space provided. ____ 1. Elona would like to put an About Me content in her own webpage. This content will contain a short description or introduction about her. Which element should she use to properly display her content? a. article c. line break b. header d. paragraph ____ 2. After inserting her About Me content, Elona realized her page would look better if she will put a horizontal line below her title “About Me”. Which element should she use? a. horizontal rule c. ordered list b. line break d. paragraph ____ 3. Aside from her brief description, Elona would also like to insert the poem she wrote about herself. Which element should she use to properly display it in the web browser? a. horizontal rule c. ordered list b. line break d. paragraph ____ 4. After her poem, Elona would also like to list down her hobbies. Which is the correct type of list to use in this? a. definition list c. random list b. ordered list d. unordered list ____ 5. Lastly, Elona would like to include a list of her Top 5 most favorite songs. Which is the correct type of list to use in this? a. definition list c. random list b. ordered list d. unordered list 14 POST-TEST Multiple Choice Directions: Choose the letter of the correct answer and write it on the space provided. ____ 1. Which element defines a paragraph and always starts a new line? a. header b. horizontal rule c. line break d. paragraph ____ 2. Which attribute of indicates its horizontal alignment? a. adjust b. align c. placement d. position ____ 3. What is the opening and closing tag of the paragraph element? a. b. c. d. ____ 4. Which of the following content is using line break most useful? a. essays b. poems c. tables d. titles ____ 5. Which tag creates a line break or a new line? a. b. c. d. ____ 6. Which tag defines a thematic break in an HTML page and places a horizontal rule or line that extends to the web browsers width? a. b. c. d. ____ 7. Which attribute of horizontal rule removes its default shading? a. nocolor b. nohue c. noshade d. notone ____ 8. Which attribute of horizontal rule indicates its size in pixels? a. area b. height c. size d. unit ____ 9. Which type of list is used to list items for which the order of items matter? a. definition list b. ordered list c. random list d. unordered list ____ 10. Which tag is used to list item in both ordered and unordered list? a. b. c. d. 15 ANSWER KEY Pre-test 1. D 3. B 5. B 7. C 9. B 2. A 4. A 6. B 8. C 10. C Looking Back To Your Lesson Opening & Element Function Closing Tag 1. Header represents a container for introductory content or a set of navigational links 2. Footer used to identify the footer of a page, document, article, or section 3. Article identifies a self-contained piece of content which could theoretically be distributed to other websites and platforms as a stand-alone unit 4. Navigation represents a section of a page that links to other pages or to parts within the page: a section with navigation links 5. Section used to group together related elements Activity 1. 2. Activity 1 Activity 2 London City of Manila London is the capital city of England. It is District 1 the most populous city in the United Kingdom, District 2 with a metropolitan area of over 13 million District 3 inhabitants. District 4 District 5 District 6 Checking Your Understanding 1. D 2. A 3. B 4. D 5. B Post-test 1. D 3. A 5. A 7. C 9. B 2. B 4. B 6. B 8. C 10. C REFERENCES Books: Online Sources: Web Design 3rd Edition https://www.w3schools.com/html/html_paragraphs.asp by Jemma Development Group https://www.w3schools.com/tags/tag_br.asp https://www.w3schools.com/html/html_lists.asp https://html.com/lists/ 16 Acknowledgement First Edition 2020 Republic Act 8293, section 176 states that: No copyright shall subsist in any work of the Government of the Philippines. However, prior approval of the government agency or office wherein the work is created shall be necessary for exploitation of such work for profit. Such agency or office may, among other things, impose as a condition the payment of royalties. Borrowed materials (i.e. songs, stories, poems, pictures, photos, brand names, trademarks, etc.) included in this module are owned by their respective copyright holders. Every effort has been exerted to locate and seek permission to use these materials from their respective copyright owners. The publisher and authors do not represent nor claim ownership over them. Published by the Department of Education Secretary: Leonor Magtolis Briones Undersecretary: Diosdado M. San Antonio Development Team of the Module Writer: Jessica Frances B. Dominguez, MTE Teacher, Manuel G. Araullo High School Editor: Ariel D. Tosio Education Program Supervisor – TLE-TE/Voc Reviewer/Validator: Anthony H. Ducta Head Teacher, Manila Science High School Management Team: Malcolm S. Garma, Regional Director Genia V. Santos, CLMD Chief Dennis M. Mendoza, Regional EPS in Charge of LRMS and Regional ADM Coordinator Maria Magdalena M. Lim, CESO V Schools Division Superintendent Aida H. Rondilla, Chief-CID Lucky S. Carpio, Division EPS in Charge of LRMS and Division ADM Coordinator 17

Use Quizgecko on...
Browser
Browser