Basic Web Page Creation

Learner’s Module in Empowerment

Technologies 11/12
Quarter 3● Module 7

Ranjit Reginald D. Alangui

Developer

Department of Education • Cordillera Administrative Region

i
 Republic of the Philippines
DEPARTMENT OF EDUCATION
Cordillera Administrative Region
SCHOOLS DIVISION OF BAGUIO CITY
Military Cut-off, Baguio City

Published by
DepEd Schools Division of Baguio City
Curriculum Implementation Division

COPYRIGHT NOTICE
2020

Section 9 of Presidential Decree No. 49 provides:

“No copyright shall subsist in any work of the Government of the Philippines.
However, prior approval of the government agency of office wherein the work is
created shall be necessary for exploitation of such work for profit.”

This material has been developed for the implementation of the K-12
Curriculum through the DepEd Schools Division of Baguio City – Curriculum
Implementation Division (CID). It can be reproduced for educational purposes and the
source must be acknowledged. Derivatives of the work including creating an edited
version, an enhancement or a supplementary work are permitted provided all original
work is acknowledged and the copyright is attributed. No work may be derived from
this material for commercial purposes and profit.

ii
 What I Know

Read each item carefully. Answer all the test items in this pretest. Encircle the letters of your
answer.
1. Which of the following is a text editor allows you to edit HTML tags and elements?
a. Wordpress.com b. Notepad
c. Wix.com d. Sticky Notes
2. What part of a website is found at the top portion and contains the website logo as well
as the main menu.
a. Navigation b. Body
c. Header d. Article
3. Which of the following is NOT a web free website builder?
a. Jimdo b. Weebly
c. Wix d. Microsoft Word
4. Jimdo is a website-builder and all-in-one hosting solution built by whom?
a. German b. Russian
c. Chinese d. Indian
5. What is the name of the artificial intelligence used by Wix?
a. Dolphin b. Artificial Design Intelligence
c. Jarvis d. Gingerbread
6. What part of a website contains c copyright and date stamp?
a. Menu b. Sidebar
c. Footer d. Links
7. Which of the following is NOT an example of Content Management System?
a. Joomla b. Drupal
c. Ghost d. Cascading Style Sheet
8. What do you call the part of the website where you navigate the website in an easy
way that is located inside the header?
a. Menu b. Link
c. Content d. Button
9. What do you call the process of improving your site to increase its visibility for relevant
searches?
a. Filtering b. Search Engine Optimization
c. Funneling d. Sorting
10. After creating your website in Microsoft Word and you wish to view it in a browser, what
type of file should you save your work?
a. .xlx b. .exe
c. .html d. .bat
11. What do you call a programmer who specializes in, or is specifically engaged in the
development of World Wide Web applications using a client–server model?
a. Engineer b. Web Developer
c. Web Designer d. Content Analyst
12. What do you call the structure of web pages, creating the foundation of all websites?
a. Cascading Style Sheet b. Microsoft Word
c. Hypertext Markup Language d. Content Management System

13. Who are the people responsible for the aesthetics and lay out of website?
a. Web Designer b. Network Engineer

3
 c. Content Analyst d. Web Developer
14. What part of a website contains the most content?
a. Article b. Sidebar
c. Header d. Body
15. What is the process of navigating a network of information resources in the World Wide
Web, which is organized as hypertext or hypermedia?
a. Web Management b. Web Navigation
c. Web Content d. Web Development

What’s In
Web design is the planning and creation of websites. This includes a number of
separate skills that all fall under the umbrella of web design.
Some examples of these skills are information architecture, user interface, site
structure, navigation, layout, colors, fonts, and overall imagery. All of these skills are combined
with the principles of design to create a website that meets the goals of the company or
individual from whom that site is being created.
Microsoft Word is a word processing software tool that provides an option to create
websites without needing to use special code. It allows for customization and easy formatting
that translate well into an html or xml page. Users can create as many pages as needed and
link to those pages within the website. Special features, such as Java and Flash are not
available when creating a page through Word, but it is a good option for anyone who needs to
create a quick, simple site.
Wix provides customizable website templates and a drag-and-drop HTML5 web site
builder that includes apps, graphics, image galleries, fonts, vectors, animations and other
options. Users also may opt to create their web sites from scratch. In October 2013, Wix
introduced a mobile editor to allow users to adjust their sites for mobile viewing.
Wix App Market offers both free and subscription-based applications, with a revenue
split of 70% for the developer and 30 percent for Wix. Customers can integrate third-party
applications into their own web sites, such as photograph feeds, blogging, music playlists,
online community, e-mail marketing, and file management.
Custom JavaScript code can be inserted into Wix webpages using the Corvid API.
The graphical user interface allows for HTML scripting by first labeling page elements, like
buttons or text boxes, and event handlers with aliases from the properties menu before the
user adds behavior using the Corvid code editor.

4
 What’s New
Activity: Matching Type.
Instructions: Match the word from column A to its definition on column B.

A B
_____ 1. WYSIWYG a. Web pages either have a left-hand, right-hand, or
top layout.
_____ 2. Website b. A document on the World Wide Web consisting of
an HTML file and any related files for scripts and
graphics, and often hyperlinked to other
documents on the Web.
_____3. Webpage Layout c. Internal link within a webpage that allows the user
to “jump to” other areas of the page.
_____4. Webpage Designer. d. A link to another webpage or website.

_____5. Webpage e. “What you see is what you get” editing that is a
graphical interface for the HTML language.
_____6. Anchor Link f. Someone who creates well organized and eye
pleasing pages with text, graphics, and color to
convey a message to the viewer
_____7. Copyright g. A software application for creating webpages
using the HTML markup language or a
WYSIWYG interface.
_____8. External Link h. A rough sketch outlining the layout and
components of a webpage or website.
_____9. HTML Editor i. A set of interconnected web pages usually
including a homepage, generally located on the
same server, and prepared and maintained as a
collection of information by a person, group, or
organization.
_____10. Layout Sketch j. The legal right granted to an author, composer,
playwright, publisher, or distributor to exclusive
publication, production, sale, or distribution of a
literary, musical, dramatic, or artistic work.

Activity: Create a simple site using Microsoft Word.

Instructions: kindly follow this step-by-step guide to how to create an HTML

document, including items such as typing text and adding images and hyperlinks to
your HTML document.

In this activity kindly attached your output together with your answer sheet. You may print,
do a screen capture or draw your output in the space provided on your answer sheet.

Create Your HTML Document

Use one of the following two methods to create your new HTML document.

5
Method 1
1. Start Microsoft Word.
2. In the New Document task pane, click Blank Web Page under New.
3. On the File menu, click Save.
NOTE: The Save as type box defaults to Web Page (*.htm; *.html).
4. In the File name box, type the file name that you want for your document, and then
click Save.
Method 2
Start Microsoft Word.
1. Create a new blank document.
2. On the File menu, click Save as Web Page.
3. In the File name box, type the file name that you want for your document, and then
click Save.

Add Text and Hyperlinks to Your HTML Document

1. Open the HTML document that you created earlier in this article. To do this, follow
these steps:
1. On the File menu, click Open.
2. Browse to the location that you saved your article to, in the "Create Your HTML
Document" section of this article.
3. Select the file and then click Open.
2. Type the following text into the document:
You can use Microsoft Word to create HTML documents as easily as you can create
normal Word documents.
3. To create a hyperlink, select the words "Microsoft Word" in the text that you typed.
4. On the Insert menu, click Hyperlink.
5. In the Insert Hyperlink dialog box, type http://www.google.com in the Address box, and
then click OK.
6. Save your changes to the document.

Add an Image to Your HTML Document

1. Place your insertion point where you want to place an image in your document.
2. On the Insert menu, point to Picture, and then click ClipArt.
3. In the Insert ClipArt task pane, click Search.
NOTE: If you click Search without typing anything into the Search Text box, the search
result will display all of the currently available images on your system.
4. In the Results section, select the image that you want to insert into the page.
5. Save your changes and then close the document.

Open an HTML Document in Word

Do one of the following.
If the New Document task pane is still displayed:
In the New Document task pane, select the document under Open a document. This opens
the document directly.
-or-
If the New Document task pane is not displayed:
1. On the File menu, click Open.
2. In the Open dialog box, locate the HTML document that you created earlier, and then
select it.
3. Click Open.

6
Activity: Pros and Cons
Instructions: In this activity kindly write what do you think are the advantages and
disadvantages of using a free hosting website.
Advantages Disadvantages

What Is It

Design Is Key Part of Web Design

Design, obviously, is a key part of "web design." What does this mean exactly? Design
includes both the principles of design — balance, contrast, emphasis, rhythm and unity — and
the design elements — lines, shapes, texture, color, and direction.
By putting these things together, a web designer creates websites, but a good web
designer understands not only the principals of design but also the constraints of the Web. For
example, a successful web designer will be skilled in typographic design principals, while also
understanding the challenges of web type design and specifically how it differs from other
kinds of type design.
In addition to understanding the limitations of the Web, a successful web professional
also has a firm grasp on the strengths of digital communication.

Web Design Has Many Different Roles

HTML — This is the structure of web pages, creating the foundation of all websites.
CSS — This is how web pages are visually styled. CSS (Cascading Style Sheets) handles the
entire look of sites, including layout, typography, colors, and more.
JavaScript — This governs certain behaviors on websites and can be used for a variety of
interactions and features.
CGI programming — CGI, and the next few entries (PHP, ASP, etc.) are all different flavors
of programming languages. Many sites do not require any of these languages, but sites that
are more feature-rich will certainly need to be coded using some of these languages
PHP - (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source
general-purpose scripting language that is especially suited for web development and can be
embedded into HTML.
ASP - ASP stands for Active Server Pages. ASP is a development framework for building web
pages.

7
XML - Extensible Markup Language (XML) is a markup language that defines a set of rules
for encoding documents in a format that is both human-readable and machine-readable. The
World Wide Web Consortium's XML 1.0 Specification of 1998 and several other related
specifications—all of them free open standards—define XML.
Information architecture — The way a site's content and navigation is structured and
presented helps make for a successful site that is easy and intuitive to use.
SEO — Search engine optimization ensures that websites are attractive to Google and other
search engines and that people looking for the products, services, or information features on
that site can find it once they look for it online.
Server management — All websites need to be hosted. The management of the servers that
host those sites is an important web design skill.
Web strategy and marketing — Having a website is not enough. Those sites will also need
to be marketed with an ongoing digital strategy E-commerce and conversions.
Design — Creating the visual look and feel of websites has always been an important aspect
of the industry.
Speed — A successful site is one that loads quickly on a wide variety of devices, regardless
of a visitor’s connection speed. Being able to tune the performance of sites is a very valuable
skill.
Content — People come to websites for the content that those sites contain. Being able to
create that content is a critically important component in the world of website design

There's also so much more areas and skills that cross into the field of web design, but
most designers don't try to cover all of them. Instead, a web designer will generally focus on
one or two areas where they can excel. The other items in web design that are needed are
ones that they can partner with others one as part of a larger web design team.

Free Website Builder 2020

Wix is a big-name website builder
which offers a free plan, enabling you to
have the run of this service without
having to put your hand in your pocket.
And you benefit from one of the most
impressive website editors in the
business.
This editor can be run in ADI
(Artificial Design Intelligence) mode,
which has a very basic interface to keep
everything really simple and user-
friendly. This is great for beginners, as
you can create a basic site without even
remotely breaking a sweat (a range of
attractive templates are provided, as
well).
Those who want to get more involved with tweaking the design of their website can
step up to the full Wix editor, which boasts powerful functionality, and the ability to really hone
your website and get it looking just as you want. Visual previews of page elements make it
easy to pick what you need for any particular part of a web page, too.
Wix is so polished that putting together your site using the editor feels more like using
a native application rather than a website builder, and it also sports excellent support for a
diverse range of media, and quality customer support as well, even on the free plan. In

8
addition, Wix Turbo was recently released which improves the performance and speed of all
Wix websites.
Powerful blogging functionality rounds things off nicely, and you’re getting a truly high
quality offering with the free version of this website builder.

Constant Contact provides an

intelligent website builder and
ecommerce store platform, both of which
are free to use. Setting up a website is
easy using drag-and-drop functionality,
allowing you to set up a design simply
and easily, and insert the features you
need.
Settings are automatically
optimized for mobile platforms and SEO,
and there is a free image library with over 50,000 images included as part of the package. The
ecommerce platform allows for online payments through Paypal, Mollie, or Stripe. There are
order and inventory features that automatically updates inventory with orders, and sends an
email alert when items become out-of-stock.While the basic level website is free, there are
paid plans which add more features. Additionally, there is also a paid email marketing option
available to allow you to reach new customers.
Overall, Constant Contact does a good job of setting up the basics. The free plan is a
great way to set up your website, but if you want to publish a website, you'll need to pay.

Weebly offers you two ways to build your website. Both involve creating it online, and
both are as quick and painless as possible.
The simplest option is to use the basic editor builder which will guide you through a
series of questions before automatically creating a site for you. There is scope for
customization, but the focus here is
really on fast results for anyone who is
terrified of designing websites.
A more hands-on approach is
available if you decide to use the
standard Editor. There are literally
hundreds of stylish templates to choose
from – and, yes, they are genuinely
impressive – which you can tweak and
tailor to your needs using a beautiful
WYSIWYG editor.
Despite being a cloud-based website builder, Weebly gives you a great degree of
control over the look of your site and placement of page elements. You can also liven it up
using additional features such as a newsletter and live chat. This power and flexibility make
Weebly a top-notch website builder.

9
 Wordpress Ideal for static sites, portfolios, online stores and blogs causing a slight
degree of confusion, there are actually two different versions of WordPress. The more complex
variant can be downloaded from wordpress.org, and you will need to upload it to your own
web space and install it using the
automated online installer. You can then
customize the templates and use add-ons
to make the site your own.
This is the route many bloggers go
down, but there is a simpler option for
people who don’t want the hassle of fiddling
about with scripts and getting dirty with
hardcore editing.
The hosted version of WordPress
lets you create your own site on
wordpress.com. You can create everything
from a blog or photo site, to a fully-fledged online store, and there are a number of templates
to choose from. Additionally, Mailchimp users have a benefit of adding a Mailchimp block,
which can grow your mailing list among other things.
Whether you're creating a static site, or a blog-style site with regularly updated content,
the online editor is a joy to use and allows just about anyone to create an impressive,
professional-looking site. The only downside is the limited range of plugins and templates
compared with the desktop website builder.

Incomedia WebSite X5 received an overhaul in April 2019 with new templates, an

updated interface, new paid versions and more. The main thing to note is that the service now
has a free version for everyone (note that the free version for TechRadar readers is still
available to download). There are two paid
versions, Evo and Pro, priced at €29.95
($27.5) and €69.95 ($64.3) respectively. This
is a one time purchase and naturally, both
versions come with additional and improved
features compared to the free one. There is
also a demo version of both paid versions
that you can try out.
Unlike WordPress and Wix, WebSite
X5 is a desktop website builder, which
means you can work on your site offline and
have more freedom to make your website
look exactly the way you want.
There's a range of ready-made templates to choose from, or you can create your own
design from scratch. Next, build up your site map, showing the hierarchy of your pages and
how they connect to one another – a feature you won't find in most web-based site builder
apps. There is also e-commerce support with features like product search page and optimized
checkout.
Once that's done, you're ready to start building your pages using Website X5's simple
drag-and-drop interface, which includes tools for editing both rich text and photos.
If you don't want to be tied down to an online site builder, WebSite X5 is the tool for
you.

10
 CoffeeCup Free HTML Editor is one of a dying breed of web building programs that
don't use a CMS (content management system). While not in the same league as the likes of
Adobe Dreamweaver, Free HTML Editor packs quite a professional punch. With split screen
code/preview views, it's possible to see
the effect the changes you make have
straight away.
To help you get started quickly,
there are a number of templates built
into the program, and there are some
very nice features such as tag and code
suggestions as you type.
For absolute beginners, the
program might seem a little
overwhelming to start with, but it's worth sticking with – assuming you have some HTML
knowledge. There is one slight issue; a number of features, such as spell-checking and code
optimization, are only included in the paid-for version of the program.

Joomla is a well-known name in the

CMS world. It may not be as popular as
WordPress, but it offers the same two
options: build a site using the web app at
launch.joomla.org and have it hosted on the
company's servers, or download the
software from joomla.org and host it yourself.
If you choose the latter option, you'll notice that the interface is much less approachable
than WordPress. It's not completely impenetrable, but there are lots of menus and options to
work through and it doesn't feel quite as polished as WordPress.
Joomla's online website builder is nearly as complex, but doesn't involve the same
setup process, making it a better option for beginners. Its key selling point is a huge collection
of themes and extensions, which provide endless ways to customize the way your site looks
and works.
Jimdo is a German website-builder and all-in-one hosting solution, designed to enable
users to build their own websites without any
web design experience. The company is
privately held and headquartered in
Hamburg, Germany, with offices in Munich
and Tokyo.
Jimdo Dolphin is an AI-powered
website-builder designed for users with basic
computer skills and automates most of the
website building process. It uses artificial
intelligence to get to know the user, their business, and their goals, then builds a website that
is already fully personalized to meet their needs.
Jimdo Creator is a drag and drop style website builder and hosting service which is
suitable for users with some coding skills.

13 Basic parts of a Website

The following is a basic home page of an example website. While many of the
parts of a website are represented in this image, these are not the only website
constituents available to you when designing your website.

11
1. Website logo - The logo section of the website will commonly be the space for identifying
the website brand. While personal blogs and other non-brand-driven websites may only
include the name of the website here, this spot is the first point of call for establishing a brand
on the website. This image or text is often linked to the website main page, often known as
“home”.

2. Header - The header is the top portion of the website, often containing the website logo as
well as the main menu. The header is often a permanent fixture of the website, where the main
content might scroll beneath it. The header contains information that is important to website
navigation.

3. Menu - Menus, often placed at an easy-to-reach place on the website, provide a way to
navigate the website in an easy way. A main menu is often contained in the header, or on a
collapsible pane (especially in mobile views of websites), and allows navigation through the
pages of the website.

4. Body -The body area of a website is the area of the website that contains the most content.
There are a number of different kinds of content. Specific pages will contain specific content.
The home page depicted contains examples of these types of content in ways that would be
displayed on a home page.

5. Highlighted content - Highlighted content, often exclusively on the home page, guides
visitors to parts of your website that will convert into website goals. Website goals are the
actions, interactions, etc. on your website that fulfil the very purpose of your website. Booking
a flight on a travel agent’s website, or buying goods on an online store are examples of this.

6. Call To Action (CTA) - CTAs are important for guiding visitors to your website to important
information, completing website goals, and navigating your website. CTAs can be obvious,
such as buttons, or more subtle, like linking within text, but all serve the same purpose: guiding
visitors to information that is relevant to them.

7. Sidebar - While many modern websites with flat design elements frame the body content
within the full width of the website, sidebars are very common website elements that haven’t
disappeared entirely. Sidebars, like menus, often help with navigation. When large amount of
information, like multiple blog posts, or products need to be ordered, a sidebar can help.
Sidebars are often used in displaying related bits of information, contain CTAs, or guide
visitors to the next step after they’ve read a post or added a product to their cart (for example).

8. Posts and “feed” content - A handy way to get visitors to your website engaging with the
content on your website is by offering a “feed” of content. This, like a slideshow of
recommended products or, in this case, the latest blog posts, serves to pique the visitor’s
interest and guide them to completing website goals (in the case of the dummy website,
reading a blog post).

9. Internal Links - Internal links are useful for creating an ideal flow through your website. In
the example, the link takes users to the blog page, where they can peruse the full list of blog
posts and find something that interests them and effectively completing a website goal.
Sidebar content and highlighted content CTAs are another way of achieving the same thing,
with an even more effective attention grabbing effect.

12
10. Forms - Forms are ideal ways of gathering information from your visitors. Contact forms
are very common, and work to get the name and a means of contacting visitors at the very
least. Sign-up forms, application forms, shipping information forms, and the like are other
examples of how forms are used on websites. Forms are an easy and intuitive way for your
visitors, from whatever level of technological background, to get the correct information to you.

11. Buttons - As CTAs, prompts to complete an interaction like a form, or simply as a link to
another part of your website (menus use this often) buttons are handy interactive parts of your
website that prompt engagement. Unique styling to these parts of the website can be helpful
in brand building, highlighting the CTA related, and guiding the visitor’s eye to a particular
piece of information.

12. Footer - The footer is the round-up of the website. Typically, the footer will contain
important links on the website, or, sometimes, links to all of the pages of the website. A
copyright and date stamp is common, to protect the information on your website and let visitors
know when your website was last updated. Any other pertinent information – perhaps a mini
contact form, a CTA, a scrolling photo gallery, or any other permanent information you would
like to display at the end of every page – is contained in the footer.

13. Social links - Social media links are a popular addition to most websites. Most websites
shows the links in the footer, social media links can be displayed on any part of the website.
If a visitor likes your website, wants to get updates from your website via social media, or
simply prefers getting in contact via social media, these links will prompt further engagement
with your website. A social media presence is almost essential to creating and maintaining a
brand online and is a huge help with engaging with your online audience.

While Microsoft Word isn't usually thought of as webpage software, you can use the
venerable word processor to create webpages and post them online. The three ways to do
this are to save your Word document as an HTML file, export it to a blog, or use Word as a
makeshift code editor.

Saving Word Docs as HTML Files

Whenever you save a document, Microsoft Word gives you the option to save it in
HTML format. Simply select "Save As" from the File menu options, choose a folder and then
select "Web Page" from the "Save As Type" menu. By default, Word 2016, as well as Word
365, saves the page with a ".htm" file extension, but you can change this to ".html" if you
prefer. Both extensions work as HTML files. If you plan to upload the page to a website,
remove any blank spaces in the file name. You can use hyphens or underscore characters
to replace any spaces, such as "my_webpage.html" or "my-webpage.html."
In addition to the HTML file, Word creates a folder with support files including several
XML files, which are used to help render the webpage you saved. If you have images in the
document, copies of the images are placed in the folder that has the same name as the
document you saved. If you move the webpage file or upload it to a web server, the
supporting folder must go to the same location.
To examine the code inside the webpage, right-click it while viewing it in a web
browser and select "View Source Code." In addition to what you wrote in Word, you will likely
find thousands of lines of code. While much of the additional code is grayed out, these extra
lines and Word's unique way of rendering webpages makes it less than ideal if you want a
fast-loading webpage.

13
Note: You can use the web layout view in Word to see an approximation of how your
document content will appear on the web, but is not an exact match. The web layout view
does not contain HTML coding.

Exporting a Document as a Blog Post

Word contains a feature that exports documents as blog posts for sites that include
WordPress and TypePad. From the File menu, select "Share" and then click the "Post to
Blog" icon. The first time you go through the process, Word prompts you for your account
name and password to allow access to your blog. Your document is automatically
transformed to the blog template.
Make sure you add your blog post title to the Title section at the top of the first page.
Enter the content you want as you normally would using Word including hyperlinks, pictures,
fonts and font colors, and select the alignment you prefer. To add a category to your post,
click the "Insert Category" icon at the top of the screen.

Using Word to Code Webpages

While Microsoft Word offers no advantages over other text-editing apps, you can use
it to type HTML webpages from scratch or other files like JavaScript or Cascading Style
Sheets – provided you save the files carefully. To do this, select "Save As" from the File
menu and select "Plain Text" from the "Save As Type" menu. When the File Conversion
window opens, select "Unicode." After the file is saved, locate it in File Explorer and change
the file extension from ".txt" to ".html," ".jss," or whatever is appropriate for the code you
wrote. Note that if you accidentally save the file in any format other than Unicode, Word will
most likely add additional code to what you wrote, thus corrupting it. To verify that the file
was saved correctly, open it with any web browser to view the content.

How to Make a Website With Wix

Here’s a quick look at the highlights of using Wix:
 Visual, drag-and-drop editor – Easily customize any template without
needing to touch a line of code.
 500+ pre-made templates – Choose from over 500 highly optimized,
customizable, and eye-catching templates.
 Artificial intelligence design tool – Wix can create a website for you using
its artificial design intelligence tool (ADI).
 Wix Apps – The Wix app marketplace contains both free and premium apps,
including business, promotional, and blogging tools.
 eCommerce functionality – While it’s not a heavy-duty eCommerce
platform, Wix includes everything you need to sell some products.
 Built-in hosting, security, and maintenance – Because Wix is a fully hosted
solution, hosting, security, and the maintenance of your website are all taken
care of for you.
 Support – Wix has a well-organized knowledge base to help you get started.
You can also submit a support ticket or chat on the phone to one of the help
team if you have a problem.

14
Make a Website with Wix

1. Create a Wix account

To make a website with Wix, you will first need
to register for an account. Open the Wix
homepage and select Get Started. You will then
be asked to enter your email address and create
an account.

2. Let Wix ADI create a website for you

After answering a few short questions about your
new website, the sign-up process is complete.
Next, you will be asked whether you want to
create a website within the Wix Editor or let the
Wix ADI tool design a website for you…

After selecting Start Now, the tool will then ask you a
few questions about your new project. Make sure you
carefully choose the design options that most appeal
to you as the ADI tool will design a website based on
your answers.

Mastering the ADI editor

The ADI Editor is easy to navigate. But

here are just a few pointers to get you
started…
 Elements – Click on an element
to customize it. The settings for a
selected element will appear in
the left-hand menu bar where you
can then make any necessary
alterations. Options include
changing the images, writing text,
adding buttons, and more.
 Add a Page – Select Pages > Add Page from the top menu bar. Then select from a
range of new page types and pre-made page templates.
 Design – Click on Design in the top menu to change your website’s theme and layout,
or alter global colors, fonts, and more.

However, if you want more control over your website, you’ll be better off skipping the ADI and
selecting your own template

3. Choose a Wix website template

To get started with the Wix Editor, select Choose a Template.

To find designs that match your site, you can filter the templates by category, and you can
also View each template in demo mode. Once you have found a template that fits with your
project, select Edit.

15
4. Customize your website with the Wix Editor

Once you select a template, you’ll be

able to customize it in the Wix Editor using
simple drag-and-drop editing.
To get started, click on an element on
the page to alter its settings, resize or
reposition it, change colors, rewrite text, and
much more. Any changes you make will
appear in real-time, so you’ll instantly know
how your site will look to visitors.
For further customization, you’ll use the
options in the menu on the left-hand side. Let’s go through what you can do here…

Menus and pages

Under Menus and Pages, you will find

your site’s pages. Here you can add new
pages, as well as rename, hide or delete
pages, and change the order that they
appear in the menu.
This is also where you can access your
pages’ Setting options, which house a few
key options:
 SEO – Add metadata to each page
to help your content get found in
the search engines.
 Social Share – Add the images and text that will be displayed when each page is
shared on social media.
 Permissions – Select who can view each page and create restricted content or
members-only pages.

Background
Wix allows you to change the background color or image, or display a video
background. Wix has an extensive free media library to select from or you can upload your
own media.

Elements
Under Add, you can add a wide assortment of
elements to your website pages including…
 Galleries and images
 Interactive slideshows
 Videos and music
 Buttons
 Forms

16
To add an element to your site, drag and drop it in the appropriate place on a page.

Top menu

There are a couple of other important Wix Editor features that you can find in the top menu
bar. These include…
 Page – Quickly toggle between the pages on your site and your blog.
 Desktop / Mobile – Switch between desktop and mobile mode to edit your site for both
device types.
 Settings – Access global settings for your website, add a favicon, view analytics, and
much more.
 Save / Preview / Publish – It is important to save your website as you go. You can
also then preview your site on the front end and publish it when you are ready.

5. Use Wix apps to add new functionality
The Wix App Marketplace offers a variety of free and premium apps that can add extra
functionality to your website. To access the marketplace, click on the Apps icon and
then browse the apps to find one that interests you.
Here are just a few of the most popular apps currently available…

 Online Store – Turn your

website into an online store with this
powerful eCommerce app.
 Wix Events – Easily create and
manage your events online.
 Instagram Feed – Showcase
your Instagram images and videos.

To install a free app, open the app’s page and click Add to Site.

6. Publish your Wix website

To make your website publicly accessible, you need to publish it. To do so, click publish
from top menu.

17
 What’s More
Assessment: True or False
Read each statement below carefully. Write the word TRUE on the line if you think a statement
is TRUE. Write FALSE on the line if you think the statement is FALSE.

_____1. Search engine optimization ensures that websites are attractive to Google and other
search engines and that people looking for the products, services, or information
features on that site can find it once they look for it online.
_____2. Hypertext Preprocessor is a widely-used open source general-purpose scripting
language that is especially suited for web development and can be embedded into
HTML.
_____3. JavaScript governs certain behaviors on websites and can be used for a variety of
interactions and features.
_____4. Wordpress Ideal for static sites, portfolios, online stores and blogs.
_____5. Joomla is a free and open-source content management system for publishing web
content.
_____6. Cascading Style Sheets is the structure of web pages, creating the foundation of all
websites.
_____7. Jimdo is a Russian website – builder and all-in-one hosting solution.
_____8. When developing a website, a designer takes into consideration both the principles
of design — balance, contrast, emphasis, rhythm and unity— and the design elements.
_____9. All websites created and uploaded by any developer needs to be hosted.
_____10. The header is the top portion of the website, often containing the website logo as
well as the main menu.

Assessment:
Instructions: State the steps on how to create Microsoft Word text hyperlink in your
webpage.

_________________________________________________________________________
_________________________________________________________________________
_________________________________________________________________________
_________________________________________________________________________
_________________________________________________________________________
_________________________________________________________________________
_________________________________________________________________________
_______________________________________________________________

18
Assessment: Word Search
The words are not difficult, but finding them can prove challenging. Just the fact that
the words are smaller, with not too many letters, adds to the level of difficulty. And trying to
find smaller words in a sea of letters can be tough.
The words of this Web free hosting using Wix are hidden in every possible direction –
horizontally, vertically and diagonally: forwards and backwards. Encircle all the words related
to Web Creation and Web free hosting. Use the list of words below as your guide.
A G N E R E B R T U E F R O R C B N G O B N L O T
N Q N V U R Y N G H U Y U N P G C R N Q G A N O
C O B A O E L E M E N T S S C I H A D I O E S T E
O U I G N C I Y T H S O C S H P S A L B M O A Y
C O L T D I T A N T H O I E E A G W W H S T N G O
T Y C O A N S T Y S C L D S C D E X A T E A T I N
I C I A Y C I O N N E R G E B R A S X S T G A O L
N E E V L O I A L I M A M W A V I B I N T I G V I
G P S N I T I L H A E K N O I G N W E I I O I S N
G P L E R T S N P G E R T H B S H A G E N V A L E
H U R E Y A G D O P S S P E P I M V H N G S G Y S
U B N V R G H I L A A E L G O E L N K R S L S U T
O L A E C I T H I T O C E M A N S E P Y T Y L O O
A I D S X O W E H E F X D O S Q W T T P T P Y V R
E S N Q N V E T U E F T I P A S A N W A A Y U R E
R H A W O S G O B N V A T I O P C U E E V A V E O
H U E T I L R N Q G W G O B S R V O Q D X G V T N
N S H O E Y D I O E A I R O B O K C E A L T N H T
E Q E M N U A L B M C O G T U M S C S E A U G P A
P O U L A L T A S T H V N O B T A A P S H L E O G
L E D A E R I W C S R E I N Q S Y A N O T R M R I
S D A E R Y V N X E N I T I O E P Y L N S N T D O
T E B R T U B X E O E U E R Y E L T P T N A S D V
W I X E T S R T R P R R M E T S Y S E A I D E N S
Q T Q U A L I Y T A S R M A N E R W S G O N N A L
E E D A G E A N G Y I O S Q C A A W I P A G G Y
X D Q U E N U E H E N L P A S B B C A L C S E A U
C M S A V K L S A S R M A N E R S S C M I E M R R
P I T U E F G A R E E T I S B E W E H K O U N D T
V I V T U A L S V W R O S D B E E V R Y N G H U E

Application Elements Drag and Drop Online Store Website Wix

Online Accounts Visual Publish System Mobile Settings
Editor Design

19
 What I Have Learned

Activity: Which one will you use?

When you work as a web designer, you may be tasked with creating (or working on)
entire sites or just individual pages and there is a lot to learn to be a well-rounded designer.
There are numerous software and application released by multiple companies to help young
web designers to finish and create stunning websites.
What application program/s or software are you going to use to create or develop a
website for a client to create their website. State the application program or software/s that
you would use and give your reasons why you would like to use said software/s.

_________________________________________________________________________
_________________________________________________________________________
_________________________________________________________________________
_________________________________________________________________________

_________________________________________________________________________
_________________________________________________________________________
_________________________________________________________________________
_________________________________________________________________________

20
 Assessment

1. What do you call the process of improving your site to increase its visibility for relevant
searches?
a. Filtering b. Search Engine Optimization
c. Funneling d. Sorting
e.
2. What part of a website is found at the top portion and contains the website logo as well
as the main menu.
a. Navigation b. Body
c. Header d. Article

3. Which of the following is NOT a web free website builder?

a. Jimdo b. Weebly
c. Wix d. Microsoft Word
e.
4. Jimdo is a website-builder and all-in-one hosting solution built by whom?
a. German b. Russian
c. Chinese d. Indian
e.
5. What is the name of the artificial intelligence used by Wix?
a. Dolphin b. Artificial Design Intelligence
c. Jarvis d. Gingerbread
e.
6. What do you call the structure of web pages, creating the foundation of all websites?
a. Cascading Style Sheet b. Microsoft Word
c. Hypertext Markup Language d. Content Management System

7. Which of the following is NOT an example of Content Management System?

a. Joomla b. Drupal
c. Ghost d. Cascading Style Sheet

8. What do you call the part of the website where you navigate the website in an easy
way that is located inside the header?
a. Menu b. Link
c. Content d. Button

9. After creating your website in Microsoft Word and you wish to view it in a browser, what
type of file should you save your work?
a. .xlx b. .exe
c. .html d. .bat

10. What do you call a programmer who specializes in, or is specifically engaged in, the
development of World Wide Web applications using a client–server model?
a. Engineer b. Web Developer
c. Web Designer d. Content Analyst

21
11. Who are the people responsible for the aesthetics and lay out of website?
a. Web Designer b. Network Engineer
c. Content Analyst d. Web Developer

12. What part of a website contains the most content?

a. Article b. Sidebar
c. Header d. Body

13. What is the process of navigating a network of information resources in the World Wide
Web, which is organized as hypertext or hypermedia?
a. Web Management b. Web Navigation
c. Web Content d. Web Development

14. Which of the following is a text editor allows you to edit HTML tags and elements?
a. Wordpress.com b. Notepad
c. Wix.com d. Sticky Notes

15. What part of a website contains c copyright and date stamp?

a. Menu b. Sidebar
c. Footer d. Links

22
 23
What I Know
1. B 6. C 11. B
2. B 7. D 12. C
3. D 8. A 13. A
4. A 9. B 14. D
5. B 10. C 15. B
LESSON 1
Activity
1. e 6. c
2. I 7. j
3. a 8. d
4. f 9. g
5. b 10. H
Assessment
1. TRUE 6. FALSE
2. TRUE 7. FALSE
3. TRUE 8. TRUE
4. TRUE 9. TRUE
5. TRUE 10. TRUE
LESSON 2
Activity:
Output may be attached or draw
Assessment
1. highlight/Select the text you want to be the hyperlink
2. Choose Insert > Hyperlink
3. Browse to any folder or location you saved a word document
4. Find and click on the word document you wish to linked
5. Click OK
Answer may vary from each student
LESSON 3
Activity:
*Answer may vary
Assessment: Please refer to the image below
What I Have Learned
*Answers may vary
Assessment
ANSWER KEY
 24
What I Have Learned
*Answers may vary
Assessment
1. B 6. C 11. A
2. C 7. D 12. D
3. D 8. A 13. B
4. A 9. C 14. B
5. B 10. B 15. C
ANSWER KEY
 REFERENCES
“13 Parts of a Website You Should Know About.” DigiWorks, October 22, 2015.
https://www.digiworks.co.za/13-parts-of-a-website-you-should-know-about/.

Google Image Result for

https://cdn.mos.cms.futurecdn.net/250abe28a17ff5cbfa81ff300dbb3133-1200-
80.jpg. Accessed September 3, 2020.
https://images.app.goo.gl/zFsetD2YTgxKjiPW7.

Google Image Result for

https://cdn.mos.cms.futurecdn.net/oNXtE6iAY8RupPvmsmifw5.jpg. Accessed
September 3, 2020. https://images.app.goo.gl/WwLve1hhbWe3xKBMA.

Google Image Result for https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-

1234-1234-1234567890ab/8769cf44-f342-494c-b25f-
cc98c9da3e82/2019/04/04/3666385e-f0e7-402d-a711-29e6ebb759ab/72ffffb8-
ac06-4efd-9b3e-d1668d2aa04e.png. Accessed September 3, 2020.
https://images.app.goo.gl/qQnpSsAjHJMBCKZc6.

Google Image Result for https://img.utdstc.com/screen/1/coffeecup-html-editor-

002.jpg:300. Accessed September 3, 2020.
https://images.app.goo.gl/YU2ZrVRWfcG5ETJv8.

Google Image Result for

https://lh3.googleusercontent.com/CRSXMl3_D7BAhOh6dfmFHjDFxMETggjKp
2EgXWmGI0IdKIKmnhuf5ot1jQGELz_YKhpejyMFtRM=w640-h400-e365-rj-
sc0x00ffffff. Accessed September 3, 2020.
https://images.app.goo.gl/9eAH4sqFcr3Wft8X7.

Google Image Result for https://s.w.org/images/home/screen-themes.png?3.

Accessed September 3, 2020.
https://images.app.goo.gl/dpq3ynMZXmSTgexy9.

Google Image Result for https://www.jimdo.com/u1jUrWr0RA5Iu-9OlOSYZkzLZ.jpg.

Accessed September 3, 2020.
https://images.app.goo.gl/U1H6Q2YDoYZ9ZATm7.

Jones, Megan. “How to Make a Website With Wix: Your Step-by-Step Guide.”
ThemeIsle Blog. ThemeIsle Blog, February 9, 2020.
https://themeisle.com/blog/make-a-website-with-wix/.

Kyrnin, Jennifer. “What Is Web Design: An Introduction to the Basics.” Lifewire,

August 5, 2020. https://www.lifewire.com/introduction-to-web-design-3470022.

Wycislik-Wilson, Mark, and Brian Turner. “Best Free Website Builder 2020.”
TechRadar. TechRadar pro, August 12, 2020.
https://www.techradar.com/news/the-best-free-website-builder.

25
“{{search404Captions.content404Title}}.” Microsoft Support. Accessed September 3,
2020. https://support.microsoft.com/en-ph/help/310521/how-to-create-and-edit-
an-html-document-with-microsoft-word-2002.

For inquiries or feedback, please write or call:

Department of Education – Cordillera Administrative Region
Schools Division of Baguio City
No. 82 Military Cut-off Road, Baguio City
Telefax: 442-7819
Email Address: [email protected]
Social Media: facebook.com/DepEdTayoBaguioCity

26