Professional Documents
Culture Documents
Negor q3 Etech11 Module8 v2
Negor q3 Etech11 Module8 v2
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.
Il
Introductory Message
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:
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.
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
1 NegOr_Q3_ETECH11_Module8_V2
What I Know
2 NegOr_Q3_ETECH11_Module8_V2
ICT Basic Web Page Creation
What’s In
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
3 NegOr_Q3_ETECH11_Module8_V2
What is It
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.
4 NegOr_Q3_ETECH11_Module8_V2
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)”.
9. Check the files on your Sample Web page folder. You will see a new folder
generated including your .htm or .html file.
5 NegOr_Q3_ETECH11_Module8_V2
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.
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 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.
6 NegOr_Q3_ETECH11_Module8_V2
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.
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.
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.
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.
7 NegOr_Q3_ETECH11_Module8_V2
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!
8 NegOr_Q3_ETECH11_Module8_V2
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’s
travel industry-
specific
templates come
with well-placed
action buttons
9 NegOr_Q3_ETECH11_Module8_V2
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)
10 NegOr_Q3_ETECH11_Module8_V2
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:
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.
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.
11 NegOr_Q3_ETECH11_Module8_V2
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.
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.
To edit other pages on your Weebly website, simply click ‘Pages’ on the top Navigation
Menu and choose a
different page.
Check out the video link below on how to use Weebly’s basic elements.
https://youtu.be/XdTe6NCVXqw
12 NegOr_Q3_ETECH11_Module8_V2
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.
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
13 NegOr_Q3_ETECH11_Module8_V2
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.
This is how to delete small elements such as galleries, text boxes, images,
buttons, and more.
14 NegOr_Q3_ETECH11_Module8_V2
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!
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’.
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.
15 NegOr_Q3_ETECH11_Module8_V2
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 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.
16 NegOr_Q3_ETECH11_Module8_V2
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.
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!
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
17 NegOr_Q3_ETECH11_Module8_V2
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.
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.
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)
18 NegOr_Q3_ETECH11_Module8_V2
Performance: $26 per month (billed annually)
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.
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!
19 NegOr_Q3_ETECH11_Module8_V2
Before you move on, make sure you have:
Published your site!
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.
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.
20 NegOr_Q3_ETECH11_Module8_V2
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:
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:
21 NegOr_Q3_ETECH11_Module8_V2
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
Following the nine (9) steps on how to make website using weebly.com:
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.
22 NegOr_Q3_ETECH11_Module8_V2
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
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.
23 NegOr_Q3_ETECH11_Module8_V2
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
Additional Activity
1. For social change activity, which platform do you prefer: WordPress or Weebly?
___________________________________________________________________________
_______________________________.
4. Using search engine, research on the features of other online free host website?
_____________________________________________________________________
_____________________________.
Answer Key
24 NegOr_Q3_ETECH11_Module8_V2
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
Build a professional website that grows with your business, accessed January 20,
2021, https://www.weebly.com/