Online Creation Tools, Platforms, and Applications for ICT Content Development

LAS for Empowerment Technologies (Grade 11)

Quarter 2 - Week #4

Name: ___________________________________________ Strand: ________________________ Date:

______________
I – Background HTML
• HTML stands for Hyper Text Markup Language
Good day, students! Are you doing well? This Learning • HTML describes the structure of a web page
Activity Sheet (LAS) was written for you in mind. It is here to help you • HTML consists of a series of elements
master the nature of computer. The scope of this module permits it to be • HTML elements tell the browser how to display the content
used in many different learning situations. The language used recognizes
the diverse vocabulary level of students. The lessons are arranged to
• HTML elements are represented by TAGS
follow the standard sequence of the course. But the order in which you • HTML TAGS label pieces of content such as “heading”,
read them can be changed to correspond with the textbook you are now “paragraph”, “table” and so on...
using. • Browsers do not display the HTML tags, but use them to render
the content of the page
II- Learning Competencies:
Requirements in creating a web page using the html
In this LAS, Apply web design principles and elements using 1. Editor – using the Notepad (source
online creation tools, platforms, and applications to communicate a
code) in text and extension name -
message for a specific
purpose in specific professional tracks. .html or .htm.
2. Browser – responsible for
After going through this LAS, you are expected to: reading HTML instruction
1. define HTML; and displaying the web page
2. create a basic web page using Notepad; output. (ex. Internet
3. identify the HTML structure in creating a website; and Explorer, Mozilla Firefox,
4. design a website using an online WYSIWYG platform. Google Chrome)
III- Essential knowledge, concepts and activities Creating a Website Using Notepad
Web pages can be created and modified using professional
Web Page Designing
HTML editors. However, in learning HTML, it is better to use a
What does Web Page mean?
A Web page is a document for the World Wide Web simple text editor like Notepad.
that can be accessed and displayed on a monitor or
smartphone using any web browser. Web pages are made Follow the steps below to create your first web page with
up of Hypertext Markup Language (HTML) and can be Notepad.
created and modified by using basic application like
Notepad and professional HTML editors. Step 1: Open Notepad
For Windows 8 or above computers:
HTML is Easy to Learn and Use a. Open the Start Screen (the window symbol at the bottom left on
HTML is easy to learn and understand. For someone your screen).
who wants to learn web development, HTML is the first and b. Search and open the Notepad
foremost computer language that you need to take note but
Step 2: Write the following HTML:
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 HTML document is divided into two main sections the head and
Interface the body. Each section contains specific information. The head
For those who love to make changes to their section contains information about the documents like title, search
website, a drag-and-drop interface is convenient. engine or keywords but is not visible to the reader. The body
section contains the information or content that you want to appear
WYSIWYG on the web page.
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.

Step 3: Save the HTML Page 7. Publish your Wix website

Save the file on your computer. Select File > Save as
in the Notepad menu.

To make your website publicly accessible, you need to

publish it. To do so, click “Publish” from the top menu. However,
Step 4: View the HTML Page in Your Browser before Wix will publish your site, the last step in the process is to
Open the saved HTML file in your browser create your own subdomain or connect a custom domain. For a
(double click on the file, or right-click - and choose serious website, you should connect your own custom domain
"Open with"). name, rather than using a Wix subdomain.

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 V- Assessment
websites and mobile sites through the use of online drag-and-
I. Directions: Read each item carefully. Choose the letter of
drop tools.
the best answer. Write the letter of the correct answer on the
space provided.
For this topic, you _____1. What section that holds the most of the page's
will create your own
information or content?
personal website that
A. HTML B. BODY C.TITLE D.HEAD
focuses on your passion
_____2. What application used to convert HTML codes and
or hobby
display the webpage output?
A. Browser C. Internet Explorer
B. Text Editor D. Source
1. Create an account on Wix through their website _____3. What web page editors works on a ____ principle.
www.wix.com and click GET STARTED. A. www B. HTML C. WYSIWYG D. Browser
2. Select “Create a New Site” from the drop down _____4. What is the name of the address of the hypertext
menu in the top right corner of the dashboard. Once documents?
it’s clicked, Wix will ask what type of website do you A. URL B. Server C. domain name D. Web address
want to create. There are options for everyone, from _____5. What are shared on the Internet and are called as
online stores to personal portfolios. Web pages?
A. Programs C. Hypertext documents
B. Cables D. Server
_____6. Which tag is used to display text in title bar of a web
document?
A. Body tag B. Title Tag C. Meta 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 B. Text Editor C. Internet Explorer D.
3. Customize your website with the Wix Editor.
Once you select a template, you can be able to customize it HTML
in the Wix Editor using simple drag-and-drop editing. _____8. What does HTML stand for?
4. Update the Texts and Images A. Hypertext Markup Language C. Hyperlinks and Text
At this point, you can get to see a preview page of your Markup Language
chosen template. This is where you can play around with simple B. Home Tool Markup Language D. None of the above
but brilliant editing features, like the dragand-drop design and _____9. What is the correct sequence of HTML tags for
text boxes. starting a webpage?
5. Personalize the Background A. HTML, HEAD, BODY C. HTML, TITLE, BODY
If small images are still not enough, you can also change B. HTML, HEAD, TITLE D. HTML, TITLE, HEAD
your template background. The left-hand sidebar features a
‘Background’ button, which you can use to click and change with _____10. Which of the following tags is the start of web pages?
ease. A. <Body> B. <Title> C. <HTML> D. <Form>
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.
communities and networks.
Examples:
1. Facebook
2. Twitter
3. Instagram
D. Mapping
This online platform provides detailed
information about geographical regions and sites
around the world. It allows the embedding of maps into
proprietary sites.
Examples:
1. Google Maps
2. Bing Maps
3. Wikimapia
E. File Management
This online platform allows you to convert and
manage files like images, videos, documents, audio,
and more to other formats without downloading a
software tool.
Examples:
1. Zamzar
2. Word2pdf
3. CloudConvert
F. Web Page Creation
It is an online platform that lets you build a web
page that includes colors, texts, images, and often
contains links to media such as video and audio.
Examples:
1. WordPress
2. Wix
3. Weebly

V- Assessment

I. Directions: Read each item carefully. Choose the letter of

the best answer. Write the letter of the correct answer on the
space provided.

_____1. Which of the following is a digital service that

enables collaboration between two or more different but
interdependent groups of users who interact through
the
internet?
A. Word Processor C. Online Platform
B. World Wide Web D. ICT Content
Development
______2. Which of the following online creation tools
will be used if a person wants to create a video
presentation?
A. Piktochart C. Powtoon
B. Prezi D. Zamzar
_____3. What type of online platform is Facebook?
A. Web Page Creation C. Social Media
B. Cloud Computing D. Dating App
_____4. Which of the following is an example of a
presentation/visualization platform?
A. Google Drive C. Zamzar
B. Wikimapia D. Prezi
_____5. Which online application will allow the user to
publish, edit, manipulate, organize, and delete web
content?
A. Rage Comic Generator
B. Content Management System
C. Microsoft Office 365
D. Youtube Video Edito