ICT Webpage Design Grade 10 Module 7 PDF

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 7 Module 7 BUILDING A SIMPLE WEBPAGE 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, view, save, and exit an HTML document; and  insert header, footer, navigation, article, and section in an HTML document. PRE-TEST: Multiple Choice Directions: Choose the letter of the correct answer and write it on the space provided. ____ 1. Which of the following is not a way in opening the Notepad program in Windows 10? a. Press Windows(logo)+R, type Notepad and then select Ok. b. Select the Start button on the taskbar and then choose Notepad. c. Select Start. Choose Programs and then select Windows Accessories. Scroll to Notepad and select it. d. Type note in the search box and select Notepad in the search results. ____ 2. When saving an HTML document, always change the file type to All Files and use __________ file extension. a..html b..txt c..web d..xsl ____ 3. What program is used to view HTML documents? a. Adobe Reader b. MS Office c. Notepad d. web browser ____ 4. If changes are made to HTML code, which button should be clicked to view the changes? a. back b. home c. next d. refresh ____ 5. Which element serves as a container for introductory contents or navigational links in an HTML document? a. footer b. header c. navigation c. section ____ 6. Which element allows the web developer to link important contents? a. footer b. header c. navigation d. section ____ 7. Which element identifies self-contained composition which could be distributed and shared to other websites and platforms independently? a. articles b. header c. navigation d. section ____ 8. Which element is a structural element used to create a group for related elements? a. article b. footer c. header d. section ____ 9. Which of the following is an example of content that can be an article? a. advertisements b. Facebook posts c. news articles d. videos ____ 10. Which of the following is not intended in the contents a header may contain? a. copyright b. links c. logo d. search box 3 LOOKING BACK TO YOUR LESSON Directions: Write the correct opening and closing tags on the different elements below. 1. Title 2. Head 3. Heading 1 4. Body 5. Section 6. Heading group 7. Article 8. Footer 9. Header 10. Navigation 4 BRIEF INTRODUCTION Webpages can be created, formatted, and developed using professional HTML editors. However, for learning HTML it is recommended to use a simple text editor like Notepad (PC) or TextEdit (Mac). Using a simple text editor can provide more room in learning the basic structure and formatting of a webpage. Creating an HTML Document An HTML editor or Word processing program can be used in creating an HTML document, but the Notepad is the easiest and most common program used. There are several ways to open Notepad in Windows 10. 1. Select the Start button on the taskbar and then choose Notepad. 2. Type note in the search box and select Notepad in the search results. 3. Right-click in a blank area in the desktop. Select New in the menu and select Text Document. Double-click the document. 4. Press Windows(logo)+R, type Notepad and then select OK. 5. Select Start. Choose All Apps and then select Windows Accessories. Scroll to Notepad and select it. 5 Saving an HTML Document After writing the codes, the HTML document should be saved so it can be viewed and worked on again in the future. 1. On the Menu bar, click File and click Save or Save As. 2. On the Save As dialog box, type your file name in the File name box. 3. When saving, always change the file type to All Files and use.html or.htm file extension. 4. Click Save. Viewing an HTML Page HTML documents are viewed using a web browser. 1. Find the HTML file to be viewed, right-click on it, and choose Open With from the menu. 2. Select the web browser to use in viewing the webpage. In the example below, Google Chrome is the web browser used. 6  The HTML file can now be viewed in the web browser. If changes are made to the HTML code, click the Refresh button to apply and view the changes made. Using Header The header element serves as a container for introductory contents or navigational links of your HTML document. Header element uses the tags. The said element may also contain the following:  one or more heading elements ( - )  logo or icon  main navigation  links  search box 7 Using Navigation Navigation allows the web developer to link important contents. The tag defines a set of navigation links. Links in a element may go to contents within the page, to other pages or both. Always remember that not all links of a document should be inside the element. The element is intended only for major block of navigation links. Creating an Article The element identifies self-contained composition which could be distributed and shared to other websites and platforms independently. The element is can be used in blog posts, news articles, magazine articles, reviews, product description, and similar contents. 8 Creating a Section The element is a structural element used to create a group for related elements. Each usually comes with one or more heading elements. 9 Using Footer The element is a structural element used to identify the footer of a page, document, article, or section. A may include the copyright, authorship information, contact information, or navigational elements related to the contents of the parent element. Several elements can be used in one HTML document. 10 ACTIVITY: A. Directions: Write TRUE if the statement is correct and FALSE if not. ________ 1. The section element represents a universal section of a document that may contain just about anything and usually comes with a heading. ________ 2. An article element represents a self-contained composition in a document which can be distributed and shared to other websites independently. ________ 3. Navigation element allows users to link important groups. ________ 4. The header and footer element always come in a pair. ________ 5. The header element may contain a footer, article, and section. ________ 6. Google Chrome is a web browser. ________ 7. An HTML document can be viewed using any web browser. ________ 8. Each tag has a different purpose. ________ 9. Attributes should always have a value. ________ 10. A footer may contain a newspaper or magazine article, forum post, blog entry, book, review, or product description. B. Directions: Practice creating and aligning headings. Copy the codes below and apply the following format:  Use Heading 1 in the title “Our Core Values”  Align heading 1 to the center Department of Education  Save HTML document with file name: depedcorevalues Our Core Values Maka-Diyos Maka-tao Makakalikasan Makabansa REMEMBER An HTML editor or Word processing program can be used in creating an HTML document, but the Notepad is the easiest and most common program used. After writing the codes, the HTML document should be saved with the.html or.htm file extension so it can be viewed and worked on again in the future. HTML documents are viewed using a web browser. The header element serves as a container for introductory contents or navigational links of your HTML document. Navigation allows the web developer to link important contents. The element identifies self-contained composition which could be distributed and shared to other websites and platforms independently. The element is a structural element used to create a group for related elements. The element is a structural element used to identify the footer of a page, document, article, or section. 11  CHECKING YOUR UNDERSTANDING Directions: Choose the letter of the correct answer and write it on the space provided. ____ 1. Carl just finished writing the codes of his HTML document. He was instructed by his teacher to use the file name assignment1. What should be the complete file name of his HTML document? a. assignment1.html c. assignment1.web b. assignment1.txt d. assignment1.xsl ____ 2. After saving his HTML document, Carl would like to check if his assignment by viewing it. Which of the following programs would you suggest he use? a. Adobe Reader c. Google Chrome b. Google Classroom d. Microsoft Word ____ 3. Cia’s assignment is to create a webpage of their school. All of them in the class were given a soft copy of their school’s logo. Which element should contain the school logo in her HTML document? a. article c. footer b. header d. section ____ 4. Part of Cia’s a webpage is a news article about their school’s recent program. Which element should contain this content in her HTML document? a. article c. footer b. header d. section ____ 5. Lastly, Cia needs to put the copyright information of the school webpage. Which element should contain this content in her HTML document? a. article c. footer b. header d. section 12  POST-TEST Multiple Choice Directions: Choose the letter of the correct answer and write it on the space provided. ____ 1. What program is used to view HTML documents? a. Adobe Reader b. MS Office c. Notepad d. web browser ____ 2. When saving an HTML document, always change the file type to All Files and use __________ file extension. a..html b..txt c..web d..xsl ____ 3. If changes are made to HTML code, which button should be clicked to view the changes? a. back b. home c. next d. refresh ____ 4. Which element serves as a container for introductory contents or navigational links in an HTML document? a. footer b. header c. navigation c. section ____ 5. Which element is a structural element used to create a group for related elements? a. article b. footer c. header d. section ____ 6. Which element identifies self-contained composition which could be distributed and shared to other websites and platforms independently? a. articles b. header c. navigation d. section ____ 7. Which element allows the web developer to link important contents? a. footer b. header c. navigation d. section ____ 8. Which of the following is an example of content that can be an article? a. advertisements b. Facebook posts c. news articles d. videos ____ 9. Which of the following is not intended in the contents a header may contain? a. copyright b. links c. logo d. search box ____ 10. Which of the following is not a way in opening the Notepad program in Windows 10? a. Press Windows(logo)+R, type Notepad and then select Ok. b. Select the Start button on the taskbar and then choose Notepad. c. Select Start. Choose Programs and then select Windows Accessories. Scroll to Notepad and select it. d. Type note in the search box and select Notepad in the search results. 13 ANSWER KEY Pre-test 1. C 3. D 5. B 7. A 9. C 2. A 4. D 6. C 8. D 10. A Looking Back To Your Lesson 1. 6.