Negor q3 Etech11 Module8 v2

12
11
12 SENIOR HIGH SCHOOL
Empowerment Technologies
Quarter 3 – Module 8:
BASIC WEB PAGE CREATION
Il
NegOr_Q3_ETECH11_Module8_V2
Media and Information Literacy – Senior High School
Alternative Delivery Mode
Quarter 3 – Module 8: Basic Web Page Creation
Second Edition, 2021
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

Writer: Romie G. Benolaria
Editor: Reynald M. Manzano
Reviewers: Louelyn M. Lajot, Ruth Marie B. Eltanal,
Typesetter:
Layout Artist:
Management Team: Senen Priscillo P. Paulin, CESO V Rosela R. Abiera
Marcelo K. Palispis, EdD Maricel S. Rasid
Joelyza M. Arcilla, EdD Elmar L. Cabrera
Nilita L. Ragay, EdD
Printed in the Philippines by ________________________
Department of Education –Region VII Schools Division of Negros Oriental
Office Address: Kagawasan, Ave., Daro, Dumaguete City, Negros Oriental

Tele #: (035) 225 2376 / 541 1117
E-mail Address: [email protected]
Il
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-by-step 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
Il
What I Need to Know
This module was designed and written with you in mind. It is here to help you
master the context of Empowerment Technologies. It contains varied activities that
can help you as a Senior High School student to succeed in environments that
require the use of computer and the Internet.
The module contains lesson in Basic Web Page Creation
Happy learning!
Content Standard:
 The learners demonstrate an understanding of: apply the principles and

techniques of design using online creation tools, platforms, and
applications to develop ICT content for specific professional tracks.
Performance Standard:
 The learners shall be able to: independently apply the principles and
techniques of design using online creation tools, platforms, and applications
to create original or derivative ICT content for use in specific professional
tracks.
MOST ESSENTIAL LEARNING COMPETENCIES (MELC):
 Apply web design principles and elements using online creation tools,
platforms, and applications to communicate a message for specific purpose in
specific professional tracks. CS_ICT11/12-ICTPT-lg-h-10
After going through this module, you are expected to:
1. Create a web page using Microsoft Word

2. Create your own website using a free host; and
3. Design, edit, and insert elements for their website.
1 NegOr_Q3_ETECH11_Module8_V2
What I Know
A. True or False: Write T if the statement is correct otherwise, write F on your

notebook or worksheet.
1. The home page is the first page of your website.

2. You can insert YouTube videos in your weebly website.
3. WYSIWYG stands for What You Sense Is What You Get.
4. Aside from Microsoft Word, you can use Microsoft Excel to produce webpage.
5. Weebly is the bst builder for small business sites and portfolios.
6. Weebly has a free plan which you can stay on for as you like.
7. If you want to delete a larger section such as a background, simply click on
the area you want to remove.
8. Weebly has a single choice of mobile responsive themes, for industry.
9. Using weebly, you can customize you them even more by changing the background.
10. Adding elements in weebly is the same process for each page.
B. Matching Type: Match Column A with Column B.
Column A Column B
1. Weebly A. stands for Hypertext Markup Language
2. HTML B. an editor that allows you to create and design web pages
without any coding knowledge.
3. WISIWYG C. a free website provider with a WYSIWYG editor.
4. CSS D. the top most label of a website
5. Heading E. stands for Cascading Style Sheets
6. Photo Gallery F. a feature that maximizes the search engine optimization
feature so visitors can easily locate your website.
7. Template G. A page that contains photos
8. Search Engine H. A ready-made design for a website
Optimization (SEO)
9. Adding Element I. The main page of a website
10. Home page content J. This is where you add the fun stuff, like text, videos,
buttons, and more anywhere you like.
III. Rearrange the following steps in chronological order by numbering them from 1
to the last number of the steps. Write X if the step does not belong.
How to Make a Weebly Website

____ a. Add apps to boost your website
____ b. Choose your domain name
____ c. Sign up and start building for free
____ d. Select a theme to suit your needs
____ e. Improve and grow your site
____ f. Publish
____ g. Build your Weebly website using the Elements Bar
____ h. Choose a price plan
____ i. Create a Site Map
____ j. Add an online store
ICT Basic Web Page Creation
What’s In
Planning is important in building a webpage or a website. There are seven (7)

steps in the website development: (1) Identify a Web Project; (2) Developing site
contents; (3) Determining your audience; (4) Designing the site and navigation; (5)
Developing Web-media elements; (6) Constructing a website and webpages; (7)
Deploying a website on the World Wide Web (publishing).
After identifying a web project, you need to create a Site Map of your website,
it will be a great help for both the designer and the audience in many ways.
What’s New
Activity 1: Navigation. Complete the following Site Map of a Personal Website.
What is It
BASIC WEB PAGE CREATION

How basic is basic? Imagine of our ancestors do fishing. They used fishing rod
or spear to catch fish. Today, huge companies rule the fishing in the stray with their
huge fishing vessels with huge nets to catch by the truckload. Unfortunately, those
fishing vessels are not affordable so we will still be using our fishing rod or spear.
However, that is not the case in web page creation. First of all, the Internet is
free. Secondly, it is of free courtesy of many website providers that provide basic
functionalities for our website to function. Back in the day, you actually have to learn
HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) to be able to
create a decent website. Today, we use WYSIWYG editor.
WYSIWYG
WYSIWYG is the acronym for What We 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 were see. Like using the Microsoft Word, WYSIWYG shows and
prints whatever you type on the screen.
Other Ways to Create a Website

As mentioned earlier, people used HTML codes to create pages and CSS codes
to design them. If you have taken up these coding skills before, it will help you in
creating pages using WYSIWYG. If you have not, WYSIWYG is design for anyone who
has not or does not have prior coding skills.
Creating a Website using Microsoft Word

1. Open Microsoft Word
2. Type anything on the page like “Welcome to my Website”
3. Click on File >Save As >Browse
4. On the Save As dialog box, locate your activities folder and create a new folder
named “Sample Web page”.
5. Specify the file name “Sample Web page”.
6. On the Save As type, select “Web Page (*.htm; *.html)”.
7. Click the Change Title button.
8. Input the title as seen below, then click OK then Save.
9. Check the files on your Sample Web page folder. You will see a new folder
generated including your .htm or .html file.
10. Open the Sample Web page.htm file and you will see that you just created a
web page using MS Word.
Tip: Any file inside the Sample Web page files folder is generated by MS Word.
These are the files that make HTML files display visual elements correctly.
You have just created a Web page using Microsoft Word – a technique you can
also use using Microsoft Excel. These office applications can be use as WYSIWYG
platform. The next step is uploading these files to a web server. However, we will skip
that step because we are going to use a match easier approach in creating websites.
We are going to use an online application that is actually design to create websites.
Creating Your Own Website using Weebly
Weebly is the best builder for small business sites and portfolios. It’s easy to
use and comes packed with apps and features to help grow your site, from SEO to
ecommerce. You can build a simple, stylish site with Weebly’s drag-and-drop editor,
and it’s a great choice for portfolios, blogs, online stores, and business sites.
Weebly powers over 50 million websites worldwide, but what makes it so

popular? Well, it’s an easy to use website builder that’s perfect for small business
and portfolio websites. It’s one of the best website builders of the world.
Who Is Weebly Best For?
Weebly is best for small businesses, because it equips you with all the tools
you need to get a business website off the ground. Its straightforward editor cuts out
the hassle of building your site – meaning you can get online sooner – and its huge
app store means you can customize your site with all the tools you need.
It’s also a good choice for personal portfolios, because of its simple, stylish themes.
If you want a portfolio that looks good without you having to worry over the design
too much, Weebly is perfect.
We don’t recommend Weebly if you want a lot of customization control over
your website. Wix provides tons more creative freedom, and Squarespace has much
more professional designs than Weebly – chances are you’ll find Weebly limiting if
you’re after anything too advanced.
Is Weebly Easy to Use?
Yes, Weebly is easy to use! It’s a drag-and-drop website builder where you
build your site exactly as you’d see it on-screen – instead of dealing with abstract
lines of code, you drag actual images, text boxes, buttons, and more around your
page until you’re happy.
Weebly scored 3.5 stars out of 5 for ease of use in our testing. It’s not
quite as easy to use as Weebly’s top competitor Wix, due to user frustrations over
limited customization. But for beginners looking for an easy start, Weebly is a solid
choice.
What Kind of Website Can You Make With Weebly?
Weebly has such a wide range of tools that it can be used by bloggers,
businesses, online sellers, and artists. However, it’s best for small business
websites – its scalable tools, SEO support, and simple designs combine to make it a
winner for entrepreneurs, freelancers, and other types of small business websites
looking for online growth.
How Good Are Weebly’s Themes?
Weebly’s themes are pretty good. They’re not the most stunning designs on
the block, but they’re clean and simple, and you can switch themes any time you
like. You won’t get total creative freedom, so if you’re looking for something with a
bit of structure to guide your website design, Weebly is a great choice.
Weebly wowed us with its super scalable features. It has a huge app center,
helpful SEO guides, strong blogging tools, and a solid suite of ecommerce features.
On top of that, you’ve got 24/7 support, marketing and analytics tools, and built-in
site security.
Steps on How to Make a Weebly Website
Step 1: Sign Up
Firstly, head over to Weebly.com. You can build and publish your site
totally free, so there’s plenty of time to see if you enjoy using it.
To kick things off, click ‘Get Started’ – either in the top right or bottom left
corner. Now type in your name, email, and new password. The Weebly ball is
rolling.
Getting started with Weebly is easy, with two clear action buttons in sight.
After clicking ‘Sign Up’, you’re taken to a page with one question and two options:
‘What kind of website would you like to create?’ Choose from ‘I just need a website’
or ‘I need a website with an online store,’ depending on your ecommerce ambitions.
Don’t worry – this decision isn’t final, as you can add a store to your Weebly site any
time you like.
.
You can set up an online store anytime with Weebly, showing its flexibility
Weebly has a free plan which you can stay on for as long as you like. This is why
you can create, publish, and edit your site without paying a single cent.
You can upgrade to a paid plan any time, but we’ll help you with that later –
for now, just enjoy building your website!
Before moving on, make sure you have:

 Created a free Weebly account
 Chosen the type of website you want to create for now
Step 2: Select a Theme
Weebly has around 50 themes, all of which are totally free! There are plenty
of categories to choose from: ‘Business,’ ‘Portfolio’, ‘Personal’, ‘Blog’, and more. From
your choice, Weebly then suggests some more specific themes.
Weebly has a wide

choice of mobile responsive
themes, for almost any
industry
Weebly themes are
modern, sleek, and all mobile
responsive. This means they
look awesome on any screen.
And, unlike Wix, you can
change templates at any time,
so you’re not restricted by
your choice.
Can’t decide? You can
preview each one by clicking
the thumbnail to see how it
looks on a full screen. Then, if
you like it, hit ‘Start Editing’ in
the top right. Make sure you
click around for your favorite theme.
Weebly also offers industry-specific options. It has delicious restaurant

templates, fresh cleaning service designs, strong-looking personal training themes –
you get the idea. These options save you even more design time – you just need to
edit the text boxes and images and you’re good to go.
The template is what your visitors see first, so make sure it says what you
want it to. Do you want a clear CTA (Call To Action) button, like ‘Book Now’? Or would
a series of images work better? Whichever you choose, there’s a Weebly theme to
suit.
Weebly’s
travel industry-
specific
templates come
with well-placed
action buttons
Before you move on, make sure you have:

 Browsed Weebly’s themes
 Previewed your favorite designs
 Picked your perfect theme
Step 3: Choose Your Domain
Before you start editing, you’ll need to name your website. The name of your
website appears in your website address and is called a domain name. For example,
ours is websitebuilderexpert.com! So, how do you go about getting a domain for your
Weebly website?
It’s easy – Weebly will automatically prompt you to type in a domain name!
You can get a free domain by choosing the Weebly subdomain. This means your
website address will contain ‘.weebly.com’ – it’s not very attractive or professional,
but it means you don’t have to pay a cent for your domain.
See the image below for an example of a Weebly subdomain as well as
professional, or custom, domains.
Weebly offers a free subdomain
name, ideal for cost-conscious users.
If you want a custom domain (like
ours), you can simply register one
through Weebly. Just click ‘Choose’ to
register your favorite domain. You will
have to pay for this, however, and
upgrade to a paid plan to actually use
your domain.
The upside of using a custom domain
is that it’s more professional,
memorable, and attractive. Your
domain is unique – think of it like your
site’s fingerprint – so it’s worth finding
the perfect one.Just how much is a custom domain, though? Is it worth it?
Domains vary in price, but usually fall between $14 and $20 per year.
Weebly’s domain prices fall into three options:
 1 Year ($19.95)
 2 Years ($16.95/yr)
 5 Years ($14.96/yr)
Weebly offers discounted domain

names, saving you dollars down the
line. There are cheaper prices
elsewhere (check out Domain.com for
great deals – you can get 25% off using
the code WBE25), but registering your
domain through Weebly is the easiest
and quickest option.
Already have a domain? You can easily connect it by clicking ‘connect or
transfer now’ at the bottom of the popup – then just type in your URL and press
‘Search’. No guide on building a website would be complete without some tips on how
to create the best domain! So, here are our top tips – for a great domain, we
recommend that you: 1. Keep the name short, 2. Include popular keywords, 3. Target
your area, 4. Make it memorable

 Decided if you want a free or custom domain
 Created your ideal domain name
 Registered your domain, either by paying or simply clicking ‘Done’
Step 4: Design Your Weebly Website
After choosing your domain name, you’re taken to the Weebly website builder
screen. This is where you’ll let your creative juices flow. We’ll go through the menus
and features one by one, but here’s what it looks like at first glance:
The Weebly editing homepage is easy to navigate and use
Editing Text Boxes
Weebly is a ‘What You See Is What You Get’ (WYSIWYG) website builder.
This means you can click and edit, as well as drag and drop media, without
needing to know any code. So to update the text, simply click the box and type.
Editing text boxes takes just a couple of clicks with Weebly
Editing the Background
You can customize your theme even more by changing the background.
Simply click the background image and select ‘Edit Background’. From there you can
change the image, scrolling effect, and page alignments.
Adding Elements
This is where you add the fun stuff. Using the ‘Element
Menu’, on the left hand side, simply drag and drop your chosen
media icon anywhere on the page. You can throw text, videos,
buttons, and more anywhere you like. Take a look at the Element
Bar below for just some of the elements you can choose from:
The Weebly Elements Bar clearly shows what you can
drag and drop onto your site.
Any element with the lightning bolt symbol next to it can’t

be used on the free plan – you’ll need to upgrade to use these
features. However, everything else is free for you to play with!
Let’s say you want to add an image. Drag the icon where
you want, then click ‘Upload Image’. A popup will then give you
some options: you can upload from your computer, or press
‘Search’ and find a free Weebly image.
Weebly provides a wide

choice of free images to keep
your design costs down
To edit other pages on your Weebly website, simply click ‘Pages’ on the top Navigation
Menu and choose a
different page.
Adding elements is the

same process for each
page – just drag, drop,
and click your way to a
beautiful website.
Switching pages is a breeze with the Weebly navigation menu. From the
Navigation Menu, you can make the most of Weebly’s flexibility. Change your theme,
edit your site settings, move to a different page – it’s all there.
Check out the video link below on how to use Weebly’s basic elements.
https://youtu.be/XdTe6NCVXqw
Adding New Pages
It’s easy to add new pages to your website. Simply
go to the Pages tab in your menu and click the plus icon
in the left-hand sidebar. A drop-down menu will appear
with different types of pages.
Weebly provides different types of pages you can

create. Select the type of page you want to create – a blog
page, for example – and give it a name. As you do this,
Weebly automatically loads the page for you, with pre-
filled images and content for you to make your own.
Remember to click ‘Done’ to save your new page’s

settings. Once you’ve done this, return to the ‘Build’
menu tab to edit the page just like you would normally!
Changing the Color Scheme

You can
change the color
theme of your page
by heading to the Theme section of your
dashboard. For some themes you simply have the
options of light or dark, while others give you
actual colors to switch between.
This is fairly basic and you won’t see

massive changes to your theme, but you can
add a custom color to the range of choices if you
want to.
It's super easy to change your color scheme, although it's not a very
advanced feature
Adding New Layouts
To really personalize your website, you’ll want to add new sections to the pages
you’re editing. Apart from adding new elements, there’s also the option to add new
sections.
This element sits at the top of the left-hand sidebar above all the other
elements – simply drag it to where you want it on the page and let go.
The Sections element sits above all the others in the left-hand sidebar
It’ll give you a list of options: Gallery, Contact, Menu, Featured, and Team. Select
the one you want to add.
You can choose the type of section you want to add to your page
Weebly then gives you a list of different layouts to choose from, so you can
pick the one you like the best. Click on the layout you want, and it’ll appear on your
page. Click save in the popup box, and get editing!
You can choose the layout of the section you want to add
Deleting Sections
We all make mistakes, we all change our minds, and we all learn differently –
we’re only human after all! That’s why it’s important to know how to delete elements
on your site, as well as adding them.
You might want to try out a gallery on your
homepage, but then decide it doesn’t work.
You’re not stuck with it forever – simply click on
the element, and look for the small blue cross
that appears in the top right corner of the editing
box.
Click on that cross, the box will turn red,

and you’ll have the option to delete that element.
Deleting elements is easy - simply click the cross!
This is how to delete small elements such as galleries, text boxes, images,
buttons, and more.
If you want to delete a larger section such as a background, simply click on

the area you want to remove. You’ll see a few options appear: Edit, Move, and Delete.
Click the Delete button and you’ll see a popup asking you if you’re sure you want to
delete. At this point you can either cancel or confirm – if you click ‘Delete’ then that
section and everything inside it will be deleted.
You can delete whole sections of your page if you want to - just click Delete and then confirm your
decision!
This ‘are you sure?’ method means you won’t scrap any bits of your website
by accident, which is a relief!

 Edited text boxes
 Edited the background
 Added new elements
 Added new pages
 Experimented with your color scheme
 Added new layouts
 Checked you can delete unwanted elements
 Customized your Weebly site!
Step 5: Add Apps
Also in the Navigation Bar is ‘Apps’. You guessed it – this takes you to the
Weebly App Center. Whatever your website, Weebly has an application to help boost
your performance. We recommend adding
some popular apps like ‘Site Booster’, and
‘Content Color Box’.
Not only does it categorize apps for

sales, traffic, social and Weebly-specific,
but it even recommends apps just for your
website. It’s like having your own personal
shopper – the American Dream, right?
Weebly has over 300 apps to boost your website’s performance and appearance
Weebly has an impressive amount of apps – over 300 apps, to be (sort of)
precise. More than 50 are free, and there are always new apps being added, so you
won’t struggle for choice.
Don’t feel overwhelmed – you
can sort by ‘Popular’, ‘Highest
Rated’, ‘New’, and ‘Free’. Or just
search for whichever type you
want, whether it’s an FAQ section,
countdown timer, or social feed.
You can even categorize them on the left hand side.
You can search for specific apps to make things even easier. Also, before
making any purchases, you can check the user ratings on each thumbnail. Can’t
find one you like? Scroll to the very bottom and you can submit a new app idea, or
even develop your own (if you can code).
To install apps, click on the one you
want and then find the ‘Add’ button. A
popup box will appear – you need to
click ‘Connect’ to install the app and
agree to any terms.
Anyone can install apps on Weebly -

simply click Connect and Weebly does
the rest!
Once the app has installed, you’ll be

taken back to your website. The app
will automatically appear at the bottom
of the left-hand sidebar, under the
‘Installed Apps’ section.
This is where your apps will appear once you've

installed them
Once your app is installed, drag it onto your page as

you would any other element.

 Explored the app center
 Installed some apps
 Added apps to your website
Want to Explore Weebly's App Center?

You’ll find plenty of extra functionalities that you can
use to spice up your website.
Step 6: Add a Store
Back at Step 1, you had the choice of setting up an online store. If you chose
not to and changed your mind, no worries – you can easily set one up. Close your
editor for now and go to your account dashboard. Open up the menu in the top left
corner, and click ‘Store.’ This takes you to the clear and simple setup page.
This is your dashboard, and

the page where you can start
adding a store to your site.
Another way of adding a store is by staying in the editor and selecting the
‘Products’ element. If you don’t have a store already, then Weebly will direct you to
the store setup page. Don’t want a store? You can skip this step!
Setting up an online store is

explained clearly, with
simple action buttons
From here, you can see all

the steps you need to create
an online store, including
everything from adding
products to setting up taxes.
You can then integrate each feature with just a few clicks. Just use the
action buttons on the right hand side.
The options follow a natural order for setting up an online store. So, starting
from the top, setting up a Weebly online store looks like this:
1. Add Store Information
2. Add a Product
3. Start Accepting Payments
4. Set up Shipping
5. Set up Taxes
6. Publish and Start Accepting Orders
However, you’ll need to upgrade to the Professional plan to access premium

tools like a shipping calculator, or the Performance plan to send abandoned cart
emails and access advanced analytics. Check out the table below to see what sales
features you get with each Weebly plan.
Free plan Personal plan Professional plan Performance plan

Shopping Cart ✔️ ✔️ ✔️ ✔️
Items ✔️ ✔️ ✔️ ✔️
Item badges ✔️ ✔️ ✔️ ✔️
Item options ✔️ ✔️ ✔️ ✔️
Quick shop ✔️ ✔️ ✔️ ✔️
Inventory management ✔️ ✔️ ✔️ ✔️
Free plan Personal plan Professional plan Performance plan
In-store pickup ✔️ ✔️ ✔️ ✔️
Automatic tax calculator ✔️ ✔️ ✔️ ✔️
Coupons ✔️ ✔️ ✔️ ✔️
Square gift cards ✔️ ✔️ ✔️ ✔️
Shipping Calculator ❌ ❌ ✔️ ✔️
Shipping labels ❌ ❌ ❌ ✔️
Shipping discount ❌ ❌ ❌ ✔️
Abandoned cart emails ❌ ❌ ❌ ✔️
Item reviews ❌ ❌ ❌ ✔️
Accept payments through PayPal ❌ ❌ ❌ ✔️
Advanced ecommerce insights ❌ ❌ ❌ ✔️
Remember that the Professional plan also removes adverts, and unlocks a
free domain, unlimited storage, and password protected pages. As you can see, the
Performance plan is the most robust plan for selling online.
Changing your Weebly price plan is easy with

the ‘Upgrade’ prompts

 Added a store to your site
 Followed Weebly’s steps to set up your store
 Added products
 Upgraded your plan if necessary
Step 7: Choose a Price Plan
Up until now we’ve assumed you’re happily building on the free plan. However,
as we’ve seen there are cases where you might want to upgrade – for example, to
unlock advanced features or start selling online!
Let’s take a quick look at Weebly’s prices and how you can upgrade if you
want to.
Click to see Weebly's

pricing plans in detail
You already know

about Weebly’s free plan.
There’s no time limit on it,
and you can actually publish
your site without paying a dime. However, it has its drawbacks – no custom domain,
limited features, and Weebly adverts displayed on your site.
The free plan is perfect for cost-conscious website creators, but luckily its
paid plans are pretty budget-friendly too! There are three price plans to choose
from:
 Personal: $6 per month (billed annually)
 Professional plan: $12 per month (billed annually)
 Performance: $26 per month (billed annually)
Here’s who we recommend each plan for:

 Personal: Best for hobby sites and personal blogs or portfolios, the Personal
plan is for having fun on. The only difference between this and the free plan
is that you can connect a custom domain – it won’t remove adverts from your
site, so we don’t recommend it for professional websites!
 Professional: Best for business sites, professional portfolios, or any website
you want taken seriously online. This is the cheapest plan to remove adverts
– you also get a free domain, unlimited storage, password protection, and a
shipping calculator. This is the plan we recommend to most Weebly users!
 Performance: Best for online stores and large businesses, especially if you’re
aiming for growth. You unlock premium selling features such as abandoned
cart emails and shipping discounts, as well as advanced ecommerce analytics.
We recommend upgrading to the $12 per month Professional plan, as it

offers much better value for money than the Personal plan. Considering how many
more features you get compared to the Personal plan, paying $12 per month for the
Professional plan seems like a total steal! It’s the cheapest plan for creating a truly
professional website.

 Explored and compared Weebly’s prices
 Decided if you want to upgrade
 Chosen a price plan
 Signed up
Step 8: Publish Your Weebly Website
If you’re happy with what you’ve created, you can now publish. Great! If you’re
not completely happy, don’t worry – you can revisit the Weebly website editor to make
some changes after you publish.
To publish your site, hit the

blue ‘Publish’ button in the top right
corner. You will then receive a popup
telling you it’s published, and how to
integrate a ‘Pro Tip’. Weebly really
wants your site to succeed.
After publishing, Weebly

provides a helpful Pro Tip
You’ve now published your

Weebly website. Like we said, it’s easy
to update and edit at any time. You
can also upgrade your plan if you
want to. Just head back to Step 1 to view the plans and their benefits.
If you publish your site, but then change your mind, you can head to your
Settings and scroll down to the very bottom. There, you’ll find an option to unpublish
your site with a single click. Easy!
 Published your site!
Step 9: Improve and Grow Your Website
Once your site is live, there are a few things you can do to encourage its growth
and success. Don’t just leave it to languish all alone – instead, make regular tweaks,
edits, and changes to keep your site fresh and relevant.
Edit Content
Go back and edit content – update old information, write new articles, and
add extra sections to old pages. Fresh content will not only keep your visitors happy,
it’ll show Google that your site is relevant and active.
Optimize for Google

You want your site to rank in Google’s search results, right? Right. It’s the
best way of getting more traffic and boosting your online presence. The way to climb
up through the ranks is by mastering SEO (Search Engine Optimization).
SEO is the process of boosting your site’s chances of ranking highly in the
search results, and involves lots of factors. Some are super simple, like using
headings to structure your content, while others are a little more advanced.
Weebly has a great range of SEO tools to help your site rank, as well as
beginner-friendly guides to walk you through each step. Start off with its Ultimate
SEO Guide and you’ll be a pro in no time!
Promote via Social Media
Everyone is on social media these days – and you want everyone to see your
site! Pick a couple of social channels that suit your site – for example, Instagram is
perfect for photographers, and Pinterest is ideal for selling handmade items. Then
start sharing snippets of content, blog posts, images, and more to engage your
visitors and gain followers.
Get Marketing
Email marketing can be your best friend. It’s a great way of releasing new
product information, letting your visitors know about news and events, or enticing
them back with sales and discounts.
Weebly has its own email marketing system called Weebly Promote, which
helps you build your mailing list, easily create customized emails, and track your
emails’ performance. This is free to use for your first two campaigns; after that it
costs $8 per month.
Weebly also has fantastic blogging tools, so you can combine blog posts with
email campaigns and newsletters to keep your visitors informed and engaged.
Before moving on, make sure you have:

 Updated your site
 Familiarized yourself with SEO
 Shared your site on social media
 Set up blogging and email campaigns
Now you’re ready to create a Weebly website. Feels good, doesn’t it? We’re sure
you’ve nailed the steps already, but let’s go through the stages one more time:

1. Sign up and start building for free
2. Select a theme to suit your needs
3. Choose your domain name
4. Build your Weebly website using the Elements Bar
5. Add apps to boost your website
6. Add an online store
7. Choose a price plan
8. Publish
9. Improve and grow your site
So, from Sign Up to Publish, these are the nine steps for creating a Weebly
website.
Weebly offers you the option to fine-tune your site using HTML and CSS, and even
export it for editing elsewhere, meaning it isn’t only for beginners. It also offers numerous
subscription levels, including ecommerce plans.
To get the best out of Weebly, we recommend that you start with a free website. This
is your chance to get to know the editing interface, and judge for yourself how easy (and
difficult) its various features are.
Once you’re ready to upgrade, we recommend skipping the Personal plan – you get
more for your money on the Professional plan!
Advantages Disadvantages
1. Best website builder for small
businesses, with all the basic tools you 1. Drag-and-drop customization is
need to build a great business site – or limited – unless you’re confident with
even an online store code (and feel comfortable using the
2. Cool customizable templates – all Weebly Code Editor), you might find
Weebly’s themes are simple, stylish, Weebly frustrating in its lack of creative
and mobile responsive, and you can freedom.
even switch between them 2. No personal restore option, so if your
3. Really helpful SEO guides in Weebly’s site goes down you’re totally reliant on
help and support center, for advice on the Weebly support team to restore your
coding, keyword optimization, and tips site for you.
on boosting your site’s ranking. 3. No ADI option – Artificial Design
Intelligence (ADI) is where a website
builder uses information you provide to
automatically create a site for you, saving
What’s More
Activity 1:
1. What are the advantages and disadvantages of a WYSIWYG editor?
____________________________________________________________________
___________________________________________________________________________
______________________________.
1. What is the difference between your WordPress blog and your Jimdo website?
_______________________________________________________________
_____________________________________________________________________
___________________________.
2. List down the three more WYSIWYG web hosting services and their URL.
_______________________________________________________________
_____________________________________________________________________
__________________________.
What I Can Do
Activity 3: Personal Website
Following the nine (9) steps on how to make website using weebly.com:
A. Prepare a Site Map of your personal website (1 bondpaper)
B. Go to weebly’s homepage by typing www.weebly.com on the

address bar of the browser and use Sign Up Free Form. If
registered already click “Log-in”
Activity 4:
Create a blog post on your WordPress blog advertising your newly created
website. Make sure you insert details about your website that will entice your readers
to visit it.
Assessment
A. Multiple Choice: Select the letter of the best answer from the given choices.
1. What tab gives you access to the pages in your website and at the same time
add or remove pages.
A. Reference B. Add-Ins C. Mailings D. Pages
2. What is the most basic Weebly element?
A. Titles B. Sentences C. Words D. Paragraphs
3. Which element in weebly.com allows you to add videos and games to the created
website.
A. Add B. Multimedia C. Insert D. Uploader
4. What button will be clicked so that you can open your weebly.com account?
A. Open B. Log In C. Log Off D. Restore
5. What should be the first move in order to avail a weebly.com account?
A. Log In B. Sign Out C. Sign Up D. Shut Down
B. True or False: Write T if the statement is correct otherwise, write F on your

notebook or worksheet.
1. The home page is the first page of your website.

2. You can insert YouTube videos in your weebly website.
3. WYSIWYG stands for What You Sense Is What You Get.
4. Aside from Microsoft Word, you can use Microsoft Excel to produce webpage.
5. Weebly is the best builder for small business sites and portfolios.
6. Weebly has a free plan which you can stay on for as you like.
7. If you want to delete a larger section such as a background, simply click on
the area you want to remove.
8. Weebly has a single choice of mobile responsive themes, for industry.
9. Using weebly, you can customize you them even more by changing the
background.
10. Adding elements in weebly is the same process for each page.
B. Matching Type: Match Column A with Column B.

Column A Column B
1. Weebly A. stands for Hypertext Markup Language
2. HTML B. an editor that allows you to create and design web pages
without any coding knowledge.
3. WISIWYG C. a free website builder with a WYSIWYG editor.
4. CSS D. the top most label of a website
5. Heading E. stands for Cascading Style Sheets
6. Photo Gallery F. a feature that maximizes the search engine optimization
feature so visitors can easily locate your website.
7. Template G. A page that contains photos
8. Search Engine H. A ready-made design for a website
Optimization (SEO)
9. Adding Element I. The main page of a website
10. Home page content J. This is where you add the fun stuff, like text, videos,
buttons, and more anywhere you like.
III. Rearrange the following steps in chronological order by numbering them from 1
to the last number of the steps. Write X if the step does not belong.
____ a. Add apps to boost your website
____ b. Choose your domain name
____ c. Sign up and start building for free
____ d. Select a theme to suit your needs
____ e. Improve and grow your site
____ f. Publish
____ g. Build your Weebly website using the Elements Bar
____ h. Choose a price plan
____ i. Create a Site Map
____ j. Add an online store
Additional Activity
Activity 5: Answer the following questions briefly.
1. For social change activity, which platform do you prefer: WordPress or Weebly?
___________________________________________________________________________
_______________________________.
2. What are the advantages of using Weebly?

_____________________________________________________________________
_____________________________.
3. What are the disadvantages of using Weebly?

_____________________________________________________________________
_____________________________.
4. Using search engine, research on the features of other online free host website?
_____________________________________________________________________
_____________________________.
Answer Key
NegOr_Q3_ETECH11_Module8_V2 25
Assessment
I. Multiple Choice
1. D
2. A
3. B What I Know
4. B
5. C I. True or False
11. T
II. True or False 12. T
1. T 13. F
2. T 14. T
3. F 15. T
4. T 16. T
5. T 17. T
6. T 18. F
7. T 19. T
8. F 20. T
9. T
10. T II. Matching Type
III. Matching Type
11. C
1. C 12. A
2. A 13. B
3. B 14. E
4. E 15. D
5. D 16. G
6. G 17. H
7. H 18. F
8. F 19. J
9. J 20. I
10. I
IV. How to Make a Weebly Website III. How to Make a Weebly Website
__5_ a. Add apps to boost your website __5_ a. Add apps to boost your website
__3_ b. Choose your domain name __3_ b. Choose your domain name
__1_ c. Sign up and start building for free __1_ c. Sign up and start building for free
__2_ d. Select a theme to suit your needs __2_ d. Select a theme to suit your needs
__9_ e. Improve and grow your site __9_ e. Improve and grow your site
__8_ f. Publish __8_ f. Publish
__4_ g. Build your Weebly website using __4_ g. Build your Weebly website using
the Elements Bar the Elements Bar
__7_ h. Choose a price plan __7_ h. Choose a price plan
__X_ i. Create a Site Map __X_ i. Create a Site Map
__6_ j. Add an online store __6_ j. Add an online store
References
Books
Empowerment Technologies. Rex Book Store Inc. and Innovative Training Works,
Inc., First Edition 2016
Web Sites
Barraclough, Dan, “How to Use Weebly: A Simple Step-by-Step Guide”, accessed

January 20, 2021, https://www.websitebuilderexpert.com/website-
builders/how-to-use-weebly/
Build a professional website that grows with your business, accessed January 20,
2021, https://www.weebly.com/
Building Your Own Portfolio Website, accessed January 20, 2021,

https://www.portfoliobox.net/?s=googleph&gclid=Cj0KCQjwyN-
DBhCDARIsAFOELTkJqWD4c8_Quy3kQYjtj7RaEQhZB_xYATGcaXjtRE
ZjHIuiG8E7aVoaAizgEALw_wcB
Weebly Review 2021, accessed January 20, 2021,

https://www.websitebuilderexpert.com/website-builders/weebly-
review/
For inquiries or feedback, please write or call:
Department of Education – Schools Division of Negros Oriental

Kagawasan, Avenue, Daro, Dumaguete City, Negros Oriental
Tel #: (035) 225 2376 / 541 1117

Email Address: [email protected]
Website: lrmds.depednodis.net

Negor q3 Etech11 Module8 v2

Uploaded by

Copyright:

Available Formats

Negor q3 Etech11 Module8 v2

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

Negor q3 Etech11 Module8 v2

Uploaded by

Copyright:

Available Formats

12

Published by the Department of Education

Development Team of the Module

Printed in the Philippines by ________________________

Department of Education –Region VII Schools Division of Negros Oriental

Office Address: Kagawasan, Ave., Daro, Dumaguete City, Negros Oriental

This Self-Learning Module (SLM) is prepared so that you, our dear

 The learners demonstrate an understanding of: apply the principles and

MOST ESSENTIAL LEARNING COMPETENCIES (MELC):

After going through this module, you are expected to:

1. Create a web page using Microsoft Word

A. True or False: Write T if the statement is correct otherwise, write F on your

1. The home page is the first page of your website.

How to Make a Weebly Website

Planning is important in building a webpage or a website. There are seven (7)

Activity 1: Navigation. Complete the following Site Map of a Personal Website.

BASIC WEB PAGE CREATION

Other Ways to Create a Website

Creating a Website using Microsoft Word

7. Click the Change Title button.

8. Input the title as seen below, then click OK then Save.

Creating Your Own Website using Weebly

Weebly powers over 50 million websites worldwide, but what makes it so

Who Is Weebly Best For?

Is Weebly Easy to Use?

What Kind of Website Can You Make With Weebly?

How Good Are Weebly’s Themes?

Steps on How to Make a Weebly Website

Before moving on, make sure you have:

Weebly has a wide

Weebly also offers industry-specific options. It has delicious restaurant

Before you move on, make sure you have:

Step 3: Choose Your Domain

Weebly offers discounted domain

Before you move on, make sure you have:

The Weebly editing homepage is easy to navigate and use

Editing Text Boxes

Editing text boxes takes just a couple of clicks with Weebly

Editing the Background

Any element with the lightning bolt symbol next to it can’t

Weebly provides a wide

Adding elements is the

Weebly provides different types of pages you can

Remember to click ‘Done’ to save your new page’s

Changing the Color Scheme

This is fairly basic and you won’t see

Click on that cross, the box will turn red,

Deleting elements is easy - simply click the cross!

If you want to delete a larger section such as a background, simply click on

Before you move on, make sure you have:

Step 5: Add Apps

Not only does it categorize apps for

You can even categorize them on the left hand side.

Anyone can install apps on Weebly -

Once the app has installed, you’ll be

This is where your apps will appear once you've

Once your app is installed, drag it onto your page as

Before you move on, make sure you have:

Want to Explore Weebly's App Center?

This is your dashboard, and