Page 1 :
Empowerment, Technologies, Quarter 1 – Module 9:, Web Page Designing, , CO_Q1_Empowerment Technologies SHS, Module 9

Page 2 :
Empowerment Technologies, Alternative Delivery Mode, Quarter 1 – Module 9: Web Page Designing, 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, Writers: Ericelle Bianca A. Baltazar, Editors: Analisa I. Panaligan, Reviewers: Lorena J. Mutas, Illustrator: Ericelle Bianca A. Baltazar, Layout Artist: Melody Zulaybar De Castro, Management Team: Malcom S. Garma, Director IV, Genia V. Santos, CLMD Chief, Dennis M. Mendoza, Regional EPS In-Charge of LRMS, Micah S. Pacheco, Regional ADM Coordinator, Loida O. Balasa, CID Chief, Grace R. Nieves, Division EPS In-Charge of LRMS, Lorena J. Mutas, Division ADM Coordinator, Printed in the Philippines by ________________________, Department of Education – National Capital Region, Office Address:, Telefax:, E-mail Address:, , ____________________________________________, Misamis St., Bago Bantay, Quezon City, ____________________________________________, ____________________________________________, 02-929-0153, ____________________________________________, [email protected]

Page 3 :
Empowerment, Technologies, Quarter 1 – Module 9:, Web Page Designing

Page 4 :
Introductory Message, This Self-Learning Module (SLM) is prepared so that you, our dear learners,, can continue your studies and learn while at home. Activities, questions, directions,, exercises, and discussions are carefully stated for you to understand each lesson., Each SLM is composed of different parts. Each part shall guide you step-bystep as you discover and understand the lesson prepared for you., Pre-tests are provided to measure your prior knowledge on lessons in each, SLM. This will tell you if you need to proceed on completing this module or if you, need to ask your facilitator or your teacher’s assistance for better understanding of, the lesson. At the end of each module, you need to answer the post-test to self-check, your learning. Answer keys are provided for each activity and test. We trust that you, will be honest in using these., In addition to the material in the main text, Notes to the Teacher are also, provided to our facilitators and parents for strategies and reminders on how they can, best help you on your home-based learning., Please use this module with care. Do not put unnecessary marks on any part, of this SLM. Use a separate sheet of paper in answering the exercises and tests. And, read the instructions carefully before performing each task., If you have any questions in using this SLM or any difficulty in answering the, tasks in this module, do not hesitate to consult your teacher or facilitator., Thank you.

Page 5 :
What I Need to Know, This module will discuss the Basic Web Design using HTML (Hypertext, Markup Language) and the Free Online Website Builder. Aimed for both beginner, and intermediate web designer, this comprehensive, easy-to-understand module will, explain to the learners the fundamentals of web development tools and techniques., You should have a general background in using a computer, managing files,, and a basic knowledge of the internet. Also, you should be able to navigate to and, within a website using a web browser such as Chrome, Firefox, Internet Explorer, or, Safari. The learners do not need to purchase any software for this course., The module mainly focuses on one lesson:, •, , Lesson 1 – Basic Web Page Creation, , Learning Competency: Apply web design principles and elements using online, creation tools, platforms, and applications to communicate a message for a specific, purpose in specific professional tracks., This module outline provides a summary of topics that can be used as a guide, when progressing through this module, and upon its successful completion, you are, expected to:, 1., 2., 3., 4., , define HTML;, create a basic web page using Notepad;, identify the HTML structure in creating a website; and, design a website using an online WYSIWYG platform., , 1, , CO_Q1_Empowerment Technologies SHS, Module 9

Page 6 :
What I Know, Directions: Choose the best answer for each question. Write the letter of your, answer on a separate sheet., 1. What does HTML stand for?, a. Hypertext Markup Language c. Hyperlinks and Text Markup Language, b. Home Tool Markup Language d. None of the above, 2. What is the correct sequence of HTML tags for starting a webpage?, a. HTML, HEAD, BODY, c. HTML, TITLE, BODY, b. HTML, HEAD, TITLE, d. HTML, TITLE, HEAD, 3. What does markup tags tell the web browser?, a. How to organize the page, c. How to display message box on page, b. How to display the page, d. None of these, 4. Which of the following tags is the start of web pages?, a. <Body>, c. <HTML>, b. <Title>, d. <Form>, 5. Which one of these is the basic web-designing program?, a. Dreamweaver, c. Notepad++, b. Wix, d. Notepad, , 6. Which website builder enables you to create Web pages directly and, update the site without the need of uploading files?, a. online site builder, c. HTML, b. offline site builder, d. FTP uploader, 7. Which of the following statements is false?, a. You can make a website without using HTML, b. You can make a website without using PHP, c. You can make a website without using CSS, d. You can make a website without using Javascript, 8. Which of the following statements is true?, a. It shouldn’t just be concerned about the looks but also about user, interface, b. Usability is very important in web design, c. a and b, d. None of the above, 9. What section that holds the most of the page's information or content?, a. HTML, c. TITLE, b. BODY, d. HEAD, 10. What application used to convert HTML codes and display the webpage, output?, a. Browser, c. Internet Explorer, b. Text Editor, d. Source, 11. What web page editors works on a ____ principle., a. www, c. WYSIWYG, b. HTML, d. Browser, , 2, , CO_Q1_Empowerment Technologies SHS, Module 9

Page 7 :
12. What is the name of the address of the hypertext documents?, a. URL, c. domain name, b. Server, d. Web address, 13. What are shared on the Internet and are called as Web pages?, a. Programs, c. Hypertext documents, b. Cables, d. None, 14. Which tag is used to display text in title bar of a web document?, a. Body tag, c. Meta Tag, b. Title Tag, d. Head Tag, 15. What computer language that instructs the browser on how to display the, hypertext, and adds pictures to the document is __?, a. Browser, c. Internet Explorer, b. Text Editor, d. HTML, , 3, , CO_Q1_Empowerment Technologies SHS, Module 9

Page 8 :
Lesson, , 2, , Basic Web Page Creation, , The purpose of this module is to introduce the web-based application so that, the learners can understand more about the design of a website. The learners will, also learn about the use of web-based applications., , What’s In, Assessing Web design, Directions: In this activity, you will study a given Web page to assess how the, developer applied concepts of Website design. After studying, write your, answers to the questions below on your answer sheet., NOTE: The questions posed in this activity are intended to help, understand the discussion., , 1. Does the design of the Web page deliver an appropriate message to users?, _____________________________________________________________________, 2. What message do you think it delivers?, _____________________________________________________________________, 3. The main goal in Web design is giving users what they want, instead of what, the developer thinks they want. Do you think this page achieves that goal?, Why or why not?, _____________________________________________________________________, , 4, , CO_Q1_Empowerment Technologies SHS, Module 9

Page 9 :
What’s New, Directions: Write down 3 things that you think a website can do., , 1, , WEBSITE 2, 3, What is It, What does Web Page mean?, A Web page is a document for the World Wide Web that can be accessed and, displayed on a monitor or smartphone using any web browser. Web pages are made, up of Hypertext Markup Language (HTML) and can be created and modified by using, basic application like Notepad and professional HTML editors., , HTML is Easy to Learn and Use, HTML is easy to learn and understand. For someone who wants to learn web, development, HTML is the first and foremost computer language that you need to, take note but do not worry, it is not a sensitive case and as simple as it is. It already, has some tags that serve a specific purpose to make. One can easily understand, others’ code and make changes in it when required without reading a whole book of, a manual. Moreover, it does not throw any error or create any problem like other, programming languages do when the developer forgets to close the tags or makes, mistakes in coding., , HTML is Free, One of the biggest advantages of HTML is that it is free of all cost and there is no, need to purchase specific software for it to be used., , 5, , CO_Q1_Empowerment Technologies SHS, Module 9

Page 10 :
Online Website Builder - Easy Use of Drag-And-Drop Interface, For those who love to make changes to their website, a drag-and-drop interface is, convenient., , WYSIWYG, WYSIWYG is the acronym for What You See Is What You Get. This means that, whatever you will type, insert, draw, place, rearrange, or whatever you do on a web, page is what the audience will see. Just like using the Microsoft Word, WYSIWYG, shows and prints whatever you will type on the screen., , HTML, •, •, •, •, •, •, •, , HTML stands for Hyper Text Markup Language, HTML describes the structure of a web page, HTML consists of a series of elements, HTML elements tell the browser how to display the content, HTML elements are represented by TAGS, HTML TAGS label pieces of content such as “heading”, “paragraph”, “table”, and so on..., Browsers do not display the HTML tags, but use them to render the content, of the page, , Requirements in creating a web page using the html, 1. Editor – using the Notepad (source, code) in text and extension name .html or .htm., , 2. Browser – responsible for, reading HTML instruction, and displaying the web page, output. (ex. Internet, Explorer, Mozilla Firefox,, Google Chrome), , Creating a Website Using Notepad, Web pages can be created and modified using professional HTML editors. However,, in learning HTML, it is better to use a simple text editor like Notepad., , 6, , CO_Q1_Empowerment Technologies SHS, Module 9

Page 11 :
Follow the steps below to create your first web page with Notepad., , Step 1: Open Notepad, For Windows 8 or above computers:, a. Open the Start Screen (the window symbol at the bottom left on your, screen)., b. Search and open the Notepad, Step 2: Write the following HTML:, HTML DOCUMENT, <html>, <head>, <title> My First Website </title>, </head>, <body>, <h1> Hello World </h1>, </body>, </html>, HTML document is divided into two main sections the head and the body., Each section contains specific information. The head section contains information, about the documents like title, search engine or keywords but is not visible to the, reader. The body section contains the information or content that you want to appear, on the web page., , Step 3: Save the HTML Page, Save the file on your computer. Select File > Save as in the Notepad menu., , Name the file "MyfirstWebsite.html", , 7, , CO_Q1_Empowerment Technologies SHS, Module 9

Page 12 :
Step 4: View the HTML Page in Your Browser, Open the saved HTML file in your browser (double click on the file, or right-click and choose "Open with")., , Creating a Website Using an Online Website Builder, Wix.com is a WYSIWYG cloud-based web development platform that was first, developed and popularized by the Israeli company also called Wix. It allows users to, create websites and mobile sites through the use of online drag-and-drop tools., , For this topic, you will create your own personal, website that focuses on your passion or hobby., , 1. Create an account on Wix through their website www.wix.com and click GET, STARTED., , 8, , CO_Q1_Empowerment Technologies SHS, Module 9

Page 13 :
2. Select “Create a New Site” from the drop down menu in the top right corner of the, dashboard. Once it’s clicked, Wix will ask what type of website do you want to, create. There are options for everyone, from online stores to personal portfolios., , 3. Customize your website with the Wix Editor., Once you select a template, you can be able to customize it in the Wix Editor, using simple drag-and-drop editing., 4. Update the Texts and Images, At this point, you can get to see a preview page of your chosen template. This is, where you can play around with simple but brilliant editing features, like the dragand-drop design and text boxes., 5. Personalize the Background, If small images are still not enough, you can also change your template background., The left-hand sidebar features a ‘Background’ button, which you can use to click and, change with ease., 6. Add Pages, Once you created a stunning homepage, there are few other more pages you can add, to ensure that your website has everything visitors are looking for. For example,, make sure to include a “Home”, “About” and a “Contact Us” page., , 9, , CO_Q1_Empowerment Technologies SHS, Module 9

Page 14 :
7. Publish your Wix website, , To make your website publicly accessible, you need to publish it. To do so, click, “Publish” from the top menu. However, before Wix will publish your site, the last step, in the process is to create your own subdomain or connect a custom domain. For a, serious website, you should connect your own custom domain name, rather than, using a Wix subdomain., , What’s More, Activity 1.1 Adding Content to Your Website, It is now the time to add the content to your website. Here are some site pages and, elements that you should add:, 1. Home Page Content – entice your visitors with contents like photos of your, hobby or interest plus text content., 2. About Me/Contact – add a page containing a form element which allows, visitors to email you. You may also add links to your social media accounts., 3. Photo Gallery – a page that contains photos from your social media, accounts., 4. Community – a page that contains links to ten of your classmates’ websites, including a short description., , 10, , CO_Q1_Empowerment Technologies SHS, Module 9

Page 15 :
Notes to the Teacher, In this activity you may inform your, students to send you a copy of link that, they will post. This will serve as your, evidence., , What I Have Learned, , Directions: Complete each sentence with information from the module. Write your, answer on a separate sheet of paper., 1. HTML is short for __________ and is the language of the World Wide Web., 2. HTML web pages can be read and rendered by _________., 3. Tags and texts that are directly displayed on the page are written in _____, section., 4. __________ site is a creation tool which enables you to create web pages directly, on the web host's computer with drag-and drop function., 5. __________ is a single online document that contains information., , What I Can Do, Directions: Think of a business you would like to build and how you can use your, knowledge in creating a website to promote it., Create a website using WIX.com to tell something about your business including its, nature, products or services you offer, and how website can be helpful for your, business to become successful., , 11, , CO_Q1_Empowerment Technologies SHS, Module 9

Page 16 :
Assessment, Directions: Choose the best answer for each question. Write the letter of your, answer on a separate sheet., 1. What section that holds the most of the page's information or content?, a. HTML, c. TITLE, b. BODY, d. HEAD, 2. What application used to convert HTML codes and display the webpage, output?, a. Browser, c. Internet Explorer, b. Text Editor, d. Source, 3. What web page editors works on a ____ principle., a. www, c. WYSIWYG, b. HTML, d. Browser, 4. What is the name of the address of the hypertext documents?, a. URL, c. domain name, b. Server, d. Web address, 5. What are shared on the Internet and are called as Web pages?, a. Programs, c. Hypertext documents, b. Cables, d. None, 6. Which tag is used to display text in title bar of a web document?, a. Body tag, c. Meta Tag, b. Title Tag, d. Head Tag, 7. What computer language that instructs the browser on how to display the, hypertext, and adds pictures to the document is __?, a. Browser, c. Internet Explorer, b. Text Editor, d. HTML, 8. What does HTML stand for?, a. Hypertext Markup Language c. Hyperlinks and Text Markup Language, b. Home Tool Markup Language d. None of the above, 9. What is the correct sequence of HTML tags for starting a webpage?, a. HTML, HEAD, BODY, c. HTML, TITLE, BODY, b. HTML, HEAD, TITLE, d. HTML, TITLE, HEAD, 10. What does markup tags tell the web browser?, a. How to organize the page, c. How to display message box on page, b. How to display the page, d. None of these, 11. Which of the following tags is the start of web pages?, a. <Body>, c. <HTML>, b. <Title>, d. <Form>, 12. Which one of these is the basic web-designing program?, a. Dreamweaver, c. Notepad++, b. Wix, d. Notepad, 13. Which website tool enables you to create Web pages directly on the online, editor and automatically update the site, without the need to upload files?, a. An online site builder, c. HTML, b. An offline site builder, d. FTP content autoloader, , 12, , CO_Q1_Empowerment Technologies SHS, Module 9

Page 17 :
14. Which of the following statements is false?, a. You can make a website without using HTML, b. You can make a website without using PHP, c. You can make a website without using CSS, d. You can make a website without using Javascript, 15. Which of the following statements is true, a. It shouldn’t just be concerned about the looks but also about user, interface, b. Usability is very important in web design, c. a and b, d. None of the above, , Additional Activities, 1. What are the advantages and disadvantages of a WYSIWYG notepad, editor?, 2. What is the difference between a website created using a Notepad and WIXcreated website?, 3. List down three or more WYSIWYG web hosting services and their URLs., , 13, , CO_Q1_Empowerment Technologies SHS, Module 9

Page 18 :
CO_Q1_Empowerment Technologies SHS, Module 9, What I Know, 1. a, 11. c, 2. a, 12. a, 3. b, 13. c, 4. c, 14. b, 5. d, 15. d, 6. a, 7. a, 8. c, 9. b, 10.a, , 14, , What I Have, Learned, 1. Hypertext, Markup, Language, Browser, Body, Wix, Web page, 2., 3., 4., 5., , Assessment, 1.b, 2.a, 3.c, 4.a, 5.c, 6.b, 7.d, 8.a, 9.a, 10.b, , 11.c, 12.d, 13.a, 14.a, 15.c, , Answer Key