EMPOWERMENT TECHNOLOGIES
NAME: ________________________________________________________ SECTION: ________________________
TEACHER: ____________________________________________________
SECOND SEMESTER - QUARTER 2 – MODULE 9: Web Page Designing
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. define HTML;
2. create a basic web page using Notepad;
3. identify the HTML structure in creating a website; and
4. design a website using an online WYSIWYG platform.
LESSON 2: Basic Web Page Creation
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.
[Link]
d3OGdwbHZQTUs3c3J0YwZhcHBfaWQQMjIyMDM5MTc4ODIwMDg5MgABHuNo7GfrIZKn4A_2k5NrYROjblQehH
9IuEHzv-A9CR37ZKK0ls0tBCMpIBjT_aem_dqMr0DkOuyCGIy5gHa05ew
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?
_____________________________________________________________________
What’s New
Directions: Write down 3 things that you think a website can do.
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.
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.
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 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 "[Link]"
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
[Link] 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 [Link]
and click GET STARTED.
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 drag and-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.
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.
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.
Let’s Do It!
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 [Link] 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.