ETech_Module_1-6

MODULE 1
A website is a set of Web pages which are documents accessible through the
Internet. A web page can contain different types of information such as text, videos,
images, animations, and sounds.
HTML
It stands for Hypertext Markup Language which is a standard markup language

for Web pages. It describes the structure of a Web page. It consists of a series of
elements which tell the browser how to display the content.
Example of a simple HTML Document:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>.
 The <!DOCTYPE html> declaration defines that this document is an

HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in
the browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph
HTML Elements
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here...

</tagname>
The HTML element is everything from the start tag

to the end tag:
<h1>My First Heading</h1>

<p>My first paragraph.</p>
 HTML Tags – used to mark up the start of an HTML element and enclosed in
angle brackets. Tags should be opened (<tag>) and closed (</tag>) in order
to function. When using multiple tags, the tags must be closed in the order in
which they were opened.
Example: <strong><em>This is really important!</em></strong>
Some HTML Tag List with Description

(Complete list can be accessed at w3schools.com)
Tag Description
<!Doctype> Defines a document type
<a> Specific a anchor (hyperlink)
Use for link in internal/external web documents.
<b> Specific text weight bold
<body> Defines a main section (body) part in HTML document.
<br /> Specific a single line break
<button> Specifies a press/push button
<div> Define a division part
<em> Define a text is emphasize format
<h1> to <h6> Defines a Headings level from 1 to 6 different sizes, 1 being
the largest
<head> Defines header section of an HTML document
<hr /> Represent a thematic break between paragraph-level tags. It
is typically draw horizontal line
<html> Defines a document as an HTML markup language
<i> Defines italic format text
<iframe> Defines inline frame that embedded external content into
current web document
<img> Used to insert image into a web document
<ol> Defines an ordered (numbered) list of items
<p> Used to represent a paragraph text
<q> Represents the short quotation
<s> Text display in strikethrough style
<style> Used to add CSS (Cascading Style Sheet) to an HTML
document
<table> Used to define a table in an HTML document
<title> Represents title to an HTML document
<u> Represents underlined text
<ul> Defines an unordered (bulleted) list of items
<video> Used to embed video content
 HTML Attributes
All HTML elements can have attributes. These provide additional

information about elements. They are always specified in the start tag and
usually come in name/value pairs like: name=”value”. Some examples of
these attributes are described below:
1. The href Attribute

 belongs to the <a> tag which specifies the URL of the page the
link goes to.
<a href="https://www.w3schools.com">Visit W3Schools</a>
2. The src Attribute

 belongs to the <img> tag which specifies the path to the image
to be displayed.
<img src="img_girl.jpg">
3. The width and height Attributes

 belong to the <img> tag which provide size information for images
<img src="img_girl.jpg" width="500" height="600">
4. The alt Attribute

 belongs to the <img> tag which provides an alternate text for an
image
<img src="img_girl.jpg" alt="Girl with a jacket">
5. The style Attribute

 used to add styles to an element, such as color, font, size, and
more
<p style="color:red;">This is a red paragraph.</p>
6. The title Attribute

 defines some extra information about an element
<p title="I'm a tooltip">This is a paragraph.</p>
Creating a Web Page Using HTML
Try to create a web page using HTML that you have just learned by using a simple text
editor
:
1. Open a notepad application.
2. Write some HTML (copy the following HTML code):
3. Select File>Save as in the notepad menu.

4. Name the file “index.htm” and set the encoding to UTF-8 (which is the
preferred encoding for HTML files).
5. Open the saved HTML file using an Internet browser. The result will look
like this:
Creating a Web Page Using WYSIWYG
WYSIWYG stands for What You See Is What You Get. This means that
whatever you type, insert, draw, place, rearrange, and everything you do on a page
is what the audience will see. This platform was designed for anyone who has not or
does not have prior coding skills. Microsoft Word is an example of a WYSIWYG
platform. Follow the steps below to create a Web Page using Microsoft Word:
1. Open Microsoft Word.

2. Type anything on the page like “Welcome to my Website”
3. Click on File> Save As
4. On the Save As dialog box, specify the filename “Sample Web page”
5. Select “Web Page (*.htm;*.html)” as the file type.
6. Click Save.
7. Go to the folder where you have saved your file. You will see a new folder
generated including your .htm or .html file. The new folder is generated by
MS Word where all HTML files such as visual elements were saved.
8. Open the Sample Web page.htm file and you will see that you just created
a web page using MS Word.
Congratulations! You have just created a web page using MS Word as your
WYSIWYG platform, a technique that you can also use with MS Excel and other
office applications that support WYSIWYG.
Creating a Website Using an Online Application
With the ongoing innovations in technology, it is not so hard to create

websites anymore. They can be created with online applications. One of these
applications is Google Sites which can be accessed at sites.google.com. With this
application, building websites is easy. Just drag content where you need it.
Features:
1. Responsive – your site is optimized for tablets, smartphones, desktops, and

laptops. Phones, tablet, and large screen previews of your website are also
available.
2. Collaborative – your site can be edited together with someone else in real
time and see each other’s changes live.
3. Free – unlike other web hosts, Google Sites can be published for everyone to
see for free.
4. Security – sharing your site can be restricted, making it accessible only to
people you want to share it with (as viewer or editors).
Steps in Creating your site:
1. Create your site

 Go to sites.google.com and log-in with your Gmail account.
 Click Blank to create a blank site or choose a template from the template
gallery.
 Note that all sites created will be stored in your Google Drive.
2. Name your site

 Name different parts of your site:
1) Site document name – enter a unique name to keep track of your site.
The site document is only visible to you.
2) Site name – the site name appears in the header and in the web or
mobile window title bar after you publish the site. You need to have 2
or more pages in your website for your site name to appear.
3) Page title – each page in your site has a title, which appears at the top
of the page. The page title also appears in the navigation menu.
4) Select a layout
 Click Layouts on the right and choose a different layout for your
sections.
5) Select a background image, header type, and theme

 Choose a look for your site. Each theme comes with a preset
background, color scheme, and font selection. You can adjust
fonts, colors, and the background even after publishing the site.
6) Add, reorder, and nest pages

 Add pages for more content. You may add subpages by clicking
the Pages tab on the right corner. Click the three dots on the
right
side of the page where you want the subpage to be added
then select Add subpage.
 Keep related information together by nesting pages.

Nested pages appear as a subtopic of another page.
 Embed files if you want them to appear directly on the web page.
 Image Carousel is used to display images.
7) Set up site navigation

 Point to the site name and click Navigation settings.
Choose between Top navigation or Side navigation.
8) Publish your site

 Click the Publish button on the top right corner of your site.
 Type your Web address.
 Select who can view your site by clicking the MANAGE
link (make it PUBLIC)
 Click Publish button.
MODULE 2
Online Collaborative Tools
Working together with a team does not necessarily require you to be

physically together. The beauty with technology now is that it allows you to
collaborate with one another online. There are plenty of online collaborative tools
that are available.
What are Standard Team Collaboration Tool Features?
1. Third-Party Integrations
A collaborative tool must

integrate with existing third-party
software such as business
communication tools, project
management software, or chat
messaging platforms. If these
applications are integrated to the
tool, team members can use
their preferred applications
within the
same interface that they use the team collaboration tool. Some of these tools
with high level of integrations are Salesforce, Slack, Skype, Microsoft Office
365, Google Sheets, Dropbox, and Outlook or Gmail.
2. File Sharing and Editing
One of the most important

features of a collaborative tool is
real-time collaboration through
file sharing and file editing. This
with allow automatic syncing and
version control of the project.
Team members should be able
to view, edit, comment on, tag
other users, and highlight text
without worrying about whether
or not
they’re working on the most current version of the document. In addition, it
should offer file storage, searchable file folders, access control to file, and
ensure compatibility with variety of file formats.
3. Video Conferencing
For geographically diverse

teams, video conferencing is a
must. When assessing a
collaborative tool’s video
conferencing, the following
elements should be considered:
 Host controls
(mute/unmute
users)
 Background screen
 Virtual hand raising
 Live streaming
 Security (encryption, password protection, waiting room,
remove/block users)
4. Screen Sharing
This allows the users to

share either their entire screens or
select applications with other
members of the team. Other
collaborative tools can offer
remote screen control to help
solve issues or demonstrate how
a tool works. One great example
is the whiteboard feature that
allows users to share, draw on,
and make
notes on blank pages, presentations, and webpages.
5. Task Management Capabilities
This feature separates a

collaborative tool from a standard
video conferencing software. This
allows the team leader to create
and assign team members tasks
and subtasks to ensure that even
when working remotely, everyone
has a clear idea of their
responsibilities and deadlines. This will also allow users to check the progress
of multiple tasks simultaneously, address missed deadlines, see timelines for
longer-term projects, and even monitor monthly accomplishments. Google
Calendars and Outlook Calendars may be integrated to update schedules,
accept/reject invitations, and let other team
members know when they’re available to meet.
Collaboration with Google Sites
In the previous module, you have learned how to

create your own website using Google Sites. In this
module, you will learn to collaborate with other students to
enhance the design and content of your website.
How to share your website with other collaborators?
1. Open the editable file of your created website.

2. Click the Share with others button on the upper right corner of
your screen.
3. Type the Gmail account of your team member.
4. Choose Editor as the access for your member. Published Viewer access is
used for your intended audience.
5. Click the Send button.

Important Reminders:
 Members may access the editable file of
the site you shared with them by going to the
Shared With Me tab in Google Drive.
 Editors can be removed or be changed access.
 Any files to be embedded in the site from
Google Drive should be shared in publicly before
it can be viewed by anyone when the site is
published.
How to track changes in your website?
In collaborative project, it is a must that whatever changes

made can be traced. One feature of Google Sites is the Version
history which include the name of the editor and the timestamp. This
allows you to restore that version, name that version, and even make
a copy of that version.
1. Open the editable file of your created website.

2. Click the More button (3 dots) located on the
upper right corner of the screen near Publish button.
3. Choose Version history.
4. Series of versions will be displayed.
5. Click the version that you may want to restore, copy, or name.
MODULE 4
ICT AS A PLATFORM FOR CHANGE
Social Issue
It is a problem that influences a considerable number of individuals within a

society. It is often the consequence of factors extending beyond an individual’s control.
Examples:
1. Unemployment
2. Homelessness
3. Pollution
4. Online Bullying
5. Broken Family
6. Gender Discrimination
7. School Truancy
.
Roles of ICT in Philippine History
There are remarkable events in the Philippine history

where Information and Communications Technology played
its major part, that is, to promote and initiate social change.
These events have changed and affected the country in a
major way.
1. EDSA (People Power Revolution)
 lasted from 1983 to 1986

 a major protest along EDSA from February 22 to 25, 1986
 Cardinal Sin encouraged the Filipinos to help end the regime of
President Ferdinand Marcos using a radio broadcast of Radyo
Veritas
2. EDSA DOS
 2001 EDSA Revolution

 January 17 to 21, 2001
 fueled after 11 prosecutors of President Joseph Estrada walked out of
the impeachment trial.
 the crowd in EDSA grew through text brigades
3. MILION PEOPLE MARCH
 Series of protests in Luneta Park from Aug. 22 to 26, 2013
 to condemn the misuse of Philippines Development Assistance Fund
(PDAF)
 Though dubbed as the Million People March, the number of total
attendees was only around 400,000
 the organizers used Facebook and Change.org
4. YOLANDA PEOPLE FINDER
 Nov 3 – 11, 2013

 Catastrophic destruction in Samar & Leyte
 Use of People/Person finder database powered by Google
 People across the globe can track the situation of their relatives
Global Websites for Social Change:
A blog by Kristina Guzikova which is entitled “Best Websites for Social Change”
discusses the various websites that were used in order to initiate social change.
1. Earth Day Network
 a modern environmental movement

 catalyzing global environmental activism
 leading its networks in thousands of Earth Day events and actions
worldwide each year.
2. EarVolunteerMatch
 connects good people with good causes

 with millions of visitors a year, VolunteerMatch has become the
preferred internet recruiting tool for more than 89,000 nonprofit
organizations
3. EarVoted
 a non-profit community platform that brings together:

- the world's smartest thinkers;
- greatest visionaries; and
- most-inspiring teachers.
 Goal: to foster the spread of great ideas on how to face greatest issues
in the world and be inspired to make a change.
4. Rescue Social Change Group
 offers strategic and marketing services to organizations committed to

- improving the lives of youth
- encouraging social change through tobacco, alcohol,
obesity, violence and HIV prevention programs
- promoting the importance of school
5. Change.org
 online petition platform that allows the online community to create or
sign petitions
 uses the power of business to promote social good through social
movements
 helps nonprofits grow their membership, by connecting them to people
passionate about their cause and empowering people around the
globe.
6. Chicago International Social Change Fest

 dedicated to “Ideas with Action”
 helps filmmakers relay their message to the world
 a film grant opportunity and funding is given to one
filmmaker, to help them create a story with the power to
enrich the lives of others and can inspire change.
MODULE 5
ICT Project Publication and Statistics
Monitoring Site Statistics on Different Platforms
In the business world, companies would use site statistics to check how
popular their website is and at which day and time they get the most traffic. This way
their new content could reach more people.
WordPress
WordPress is an open source Content Management System (CMS), which

allows the users to build dynamic websites and blogs. WordPress is the most
popular blogging system on the web and allows updating, customizing and managing
the website from its back-end CMS and components.
Features of WordPress
 User Management − It allows managing the user information such as

changing the role of the users to (subscriber, contributor, author, editor or
administrator), create or delete the user, change the password and user
information. The main role of the user manager is Authentication.
 Media Management − It is the tool for managing the media files and folder, in
which you can easily upload, organize and manage the media files on your
website.
 Theme System − It allows modifying the site view and functionality. It
includes images, stylesheet, template files and custom pages.
 Extend with Plugins − Several plugins are available which provides custom
functions and features according to the users need.
 Search Engine Optimization − It provides several search engine
optimization (SEO) tools which makes on-site SEO simple.
 Multilingual − It allows translating the entire content into the language
preferred by the user.
 Importers − It allows importing data in the form of posts. It imports custom
files, comments, post pages and tags.
Once you log in to your WordPress account, you are on the Reader tab by
default. Simply click on My Sites and from there you will see the statistics for your
blog.
Facebook
Facebook is an American online social network service that is part of the
company Meta Platforms. Facebook was founded in 2004 by Mark Zuckerberg,
Eduardo Saverin, Dustin Moskovitz, and Chris Hughes, all of whom were students
at Harvard University. Facebook became the largest social network in the world, with
nearly three billion users as of 2021, and about half that number were using
Facebook every day. The company’s headquarters are in Menlo Park, California.
Access to Facebook is free of charge, and the company earns most of its money
from advertisements on the website.
Features of Facebook
Facebook has quite a lot of features but its main features are the
- Newsfeed where the user see contents from his Facebook friends and pages
he follows; Messenger for messaging;
- Timeline where it shows the user’s information and content posted or shared;
the Wall, a space for the user’s content; and
- Events where user can see events related to him or his Facebook friends like
birthdays or social gatherings.
In your Facebook page, a summary of the statistics will appear on the right side
of your cover photo: Hovering your mouse pointer over “Post Reach” will give you
more insights on which recent post reached the most people.
Clicking on the Insights tab will give more in-depth statistics:
Overview– contains the summary of statistics about your page
Definition of terms on your Facebook statistics:
Reach: Organic – your posts seen through the page’s wall, shares by users,
and the news feed
Reach: Paid – your posts seen through paid ads
Post Clicks – number of clicks done to your posts
Likes, Comments, and Shares – actual interaction done by your audience

either through liking the post, commenting on it, or sharing it on their walls.
1. Likes– contains the statistics about the trend of page likes

2. Reach– contains information about the number of people who was reached by
your post
3. Visits– contains data of the number of times your page tabs (like the Timeline)
are visited
4. Post– contains data showing when (day and time) you site visitors visit your site
5. People– contains statistics about your audience’s demographics (age, location,

gender, language, and country). It is also includes demographics about the
people you have reached and engaged with.
Demographics refers to the statistics characterizing human population usually
divided by age, gender, income, location, and language.
MODULE 6
ICT Project Maintenance: Reflection and Learnings
ICT Project Maintenance
Creating Online Survey/Feedback Forms
The internet will give you plenty of options in gathering your audience
feedback. Some of the services represented are free to use but have too many ads
or some features are lacking. In any case it is your choice which of there services is
not unmanageable to use to reach its objective.
Creating Feedback Forms Using Google Forms
Google offers one of the easiest way to gather user feedback. Google forms
allow your audience to answer a set of question you have set. these can be used for
surveys, feedback, online registrations and customer care support.
Here are some steps in creating survey form using Google Forms
1. Open your browser and go to drive.google.com.

2. Sign on or create an account.
3. On the left-hand side of your My Drive page, click New > More > Google
Forms.
4. You will be taken to Google Form’s interface:
5. You may now fill out the form with questions:
a. Question Title - Includes the question that will be answered by you

audience.
b. Help Text - Creates a subtext under the question to give more information
about a question.
c. Question Type - Changes the type of question according to your
preference. These options Include:
I. Text - a question can be answered in a short text.
II. Paragraph text - a question that can be answered in a long text.
III. Multiple Choice - a question that can be answered by only one
answer in a set of options
IV. Check Boxes - a question that can be answered with multiple
answer in a set of options.
V. Choose from a list - similar to a multiple choice question but the
options are revealed in a drop down list.
VI. Scale - a question that can be answered with numerical range.
(1-5, 1-10)
VII. Grid - question that contains sub – questions with similar options
6. Once you are done editing the question, click Done.

7. To add a new question or item, click on Add Item. Tip: Clicking on the drop-down
arrow at the right side of the Add Item button will bring up other options for layout:
a. Section header – adds a header for specific part of your survey.

b. Page break – adds a page break which means that the items at the button
of the page will be added to the next page; necessary if your survey is too
long.
c. Image – adds an image to your survey.
d. Video – adds a video to your survey.
8. Edit the Confirmation page options at the bottom as you see fit.
a. show link to submit another response - allows user to answer the same
form again
b. Publish and show a public link to form result - allows user to see the
summarized results from your survey
c. Allow responders to edit responses after submitting - allows user to go back
and edit their answers.
9. Click the Send Form button. The Send Form dialog box will appear. Edit these
options as you see fit.
a. link to share - contains the URL that you can share on your website
b. embed - contains an embed code to attach to your HTML
c. short url - generates a shorter URL necessary for a limited space like
sharing on twitter.
d. share link via - allows you to share the link to Google+, Facebook, and
Twitter
e. share form via email - allows you to share via email
f. add collaborators - allows others to edit your form, necessary when working
in groups
Analyzing Your Google Forms Result
1. The easiest way to view the result is viewing a summary of the responses.
Click on Responses > Summary of Responses.
2. You will be taken to a Summary of Responses page. This is particularly useful

for viewing your results from time to time.
However, after a set amount of time, you may want to use this data in a
spreadsheet and eventually create your own charts.
3. To use the data collected through responses, click View Responses button
found on the upper part of the page.
4. Choose if you want to create a new Google Sheets as the destination of your
response results or if you want to put it on an existing Google Sheet.
5. Once you click Create, you will be taken to a Google Sheet which includes
the responses for your survey.
6. You may now create chart for your numerical data in either Google Sheets or
Microsoft Excel. Note that you must be online to use Google Sheets. Tip: Google
Sheets are automatically saved when the Internet connection is constant.
ICT: Reflection and Learnings
Information and Communications Technology (ICT) plays a crucial role in the

development of our society. It gives convenient access to every part of the world in
different settings. It is the era of what we are living now and the thing that will be
harder to live without. ICT gives a tremendous advantage of saving time and effort,
especially in times of crisis like a pandemic. People nowadays are shifting and
upgrading their skills in ICT because they see it as an opportunity to grow and to
cope up with the innovations, so they won’t be left behind.
Information and Communications Technology (ICT) has an immense impact

on humanity. It covers all developing sectors to improve their service, lifestyle, and
as the basis of economic growth. However, these impacts may seem to have both
advantages and disadvantages despite its progress
How can the process of ICT change your view in the sectors below

ETech_Module_1-6

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ETech_Module_1-6

Uploaded by

Copyright:

Available Formats

MODULE 1

It stands for Hypertext Markup Language which is a standard markup language

Example of a simple HTML Document:

<h1>My First Heading</h1>

 The <!DOCTYPE html> declaration defines that this document is an

<tagname> Content goes here...

The HTML element is everything from the start tag

<h1>My First Heading</h1>

Some HTML Tag List with Description

All HTML elements can have attributes. These provide additional

1. The href Attribute

<a href="https://www.w3schools.com">Visit W3Schools</a>

2. The src Attribute

3. The width and height Attributes

<img src="img_girl.jpg" width="500" height="600">

4. The alt Attribute

<img src="img_girl.jpg" alt="Girl with a jacket">

5. The style Attribute

6. The title Attribute

<p title="I'm a tooltip">This is a paragraph.</p>

Creating a Web Page Using HTML

3. Select File>Save as in the notepad menu.

1. Open Microsoft Word.

Creating a Website Using an Online Application

With the ongoing innovations in technology, it is not so hard to create

1. Responsive – your site is optimized for tablets, smartphones, desktops, and

Steps in Creating your site:

1. Create your site

2. Name your site

5) Select a background image, header type, and theme

6) Add, reorder, and nest pages

 Keep related information together by nesting pages.

7) Set up site navigation

8) Publish your site

Working together with a team does not necessarily require you to be

What are Standard Team Collaboration Tool Features?

A collaborative tool must

2. File Sharing and Editing

One of the most important

For geographically diverse

This allows the users to

5. Task Management Capabilities

This feature separates a

Collaboration with Google Sites

In the previous module, you have learned how to

How to share your website with other collaborators?

1. Open the editable file of your created website.

5. Click the Send button.

How to track changes in your website?

In collaborative project, it is a must that whatever changes

1. Open the editable file of your created website.

ICT AS A PLATFORM FOR CHANGE

It is a problem that influences a considerable number of individuals within a

Roles of ICT in Philippine History

There are remarkable events in the Philippine history

1. EDSA (People Power Revolution)

 lasted from 1983 to 1986

 2001 EDSA Revolution

4. YOLANDA PEOPLE FINDER

 Nov 3 – 11, 2013

1. Earth Day Network

 a modern environmental movement

 connects good people with good causes

 a non-profit community platform that brings together: