2. Learning Competency:
Apply web design principles and elements using online creation tools,
platforms, and applications to communicate a message for a specific
purpose in specific professional tracks.
CS_ICT11/12-ICTPT-Ig-h-10
Create an original or derivative ICT Content using online creation tools,
Platforms, and applications to Effectively communicate messages Related
to specific professional Track CS_ICT11/12-ICTPT-Ig-h-11
4. Basic Web Page Creation
A Web page is a document for the World Wide Web
that can be accessed and displayed on a monitor or
smartphone using any web browser. Web pages are
made up of Hypertext Markup Language (HTML) and
can be created and modified by using basic application
like Notepad and professional HTML editors.
5. HTML is Easy to Learn and Use
HTML is easy to learn and understand. For
someone who wants to learn web development,
HTML is the first and foremost computer
language that you need to take note but do not
worry, it is not a sensitive case and as simple as
it is. It already has some tags that serve a specific
purpose to make.
6. HTML is Easy to Learn and Use
One can easily understand others’ code and
make changes in it when required without
reading a whole book of a manual. Moreover, it
does not throw any error or create any problem
like other programming languages do when the
developer forgets to close the tags or makes
mistakes in coding.
7. HTML is Free
One of the biggest advantages of HTML is that it
is free of all cost and there is no need to
purchase specific software for it to be used.
8. Online Website Builder - Easy Use
of Drag-And-Drop Interface
For those who love to make changes to
their website, a drag-and-drop interface is
convenient.
9. WYSIWYG
WYSIWYG is the acronym for What You See
Is What You Get. This means that whatever you
will type, insert, draw, place, rearrange, or
whatever you do on a web page is what the
audience will see. Just like using the Microsoft
Word, WYSIWYG shows and prints whatever you
will type on the screen.
10. HTML
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of a web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements are represented by TAGS
• HTML TAGS label pieces of content such as “heading”,
“paragraph”, “table” and so on...
• Browsers do not display the HTML tags, but use them to render
the content of the page
11. Requirements in creating a web
page using the html
1. Editor – using the Notepad (source
code) in text and extension name -
.html or .htm.
2. Browser – responsible for reading
HTML instruction and displaying the
web page output. (ex. Internet
Explorer, Mozilla Firefox, Google
Chrome)
13. Web Page Design Using Templates
and online WYSIWYG Platforms
The web is a gigantic place, and if you are using
internet every day, you probably visit several websites
whether for news, entertainment, business or
education. But have you ever wondered how these
websites actually work? How are they built? What
skills are necessary to build a website? With almost 1
billion websites now on the internet, the answers to
these questions could be your first step toward a
better understanding of website designing.
14. Web Page Design Using Templates
and online WYSIWYG Platforms
Web Page Design
A website is a collection of publicly accessible,
interlinked web pages that share a single domain
name. Websites can be created and maintained by
an individual, group, business or organization to
serve a variety of purposes. Together, all publicly
accessible websites constitute the World Wide Web.
15. Web Page Design Using Templates
and online WYSIWYG Platforms
Web design is a similar process of
creation, with the intention of presenting the
content on electronic web pages, which the
end-users can access through the internet
with the help of a web browser.
16. Web Page Design Using Templates
and online WYSIWYG Platforms
Every single web page in a website has
different content, but all the pages are using
a similar graphic design. Often, sites will use
website templates, which contain all the
basic elements of web design such as:
17. Web Page Design Using Templates
and online WYSIWYG Platforms
Layout – It means that your design should
align with a handful of soothing adjectives; it
should be simple, familiar, intuitive, clean, and
accessible. Use plenty of whitespace (or padding
and margins) to give the elements of your site
room to breathe, and use grid-based designs to
keep design items organized and orderly.
18. Web Page Design Using Templates
and online WYSIWYG Platforms
Strong photography, icons, or
graphics provide supplementary
information to your text but
make sure the images
complement each other and the
brand you’re looking to
represent.
19. Web Page Design Using Templates
and online WYSIWYG Platforms
Colour - As for choosing a color scheme, paying
attention to your topic, brand or industry
perspectives, along with your target audience
demographics will make this a somewhat a
painless process. Always look for ways to narrow
your scope from the roughly 7 million discernable
hues the eye can detect.
20. Web Page Design Using Templates
and online WYSIWYG Platforms
Navigation - Your site’s navigation is not a space
in which to be creative. First off, don’t fall into the
trap of overly animated hover effects and complex.
Navigational elements which can exist in a site’s
header, body, and footer simply serve to direct
your visitors to the information they desire as
quickly as possible.
21. Web Page Design Using Templates
and online WYSIWYG Platforms
22. Web Page Design Using Templates
and online WYSIWYG Platforms
Fonts - Your text should be easily readable, which generally
means body copy should be at least 16 pixels. Using a
complementary font is ideal for headings or accents, but
don’t go beyond three typefaces or unnecessary sizing
adjustments. Of course, you’ll want to make sure there’s
plenty of contrast between your text and the site’s
background colors, which generally means a light color
paired with a dark tone. Also, avoid that piercing red-font-
on-green-background eyesore.
23. Web Page Design Using Templates
and online WYSIWYG Platforms
Content - Your site visitors and potential
customers want information quickly such as, is your
brand trustworthy? Experienced? Is it capable of
delivering topnotch products and services? Given
people’s short attention spans and lightning-fast first
impressions, communicating clearly is critical, thus,
information should be easy to read and digest.
24. Web Template
It is a pre-designed webpage on set of HTML
webpages that anyone can use to “plugin”.
Website templates allow anyone to setup a
website.
A web design template is a catchall name for several
types of templates like;
25. Web Template
1. HTML templates – website design templates
represented with HTML code only
26. Web Template
2. PSD templates – templates which contain only
.psd files, graphics only, with no code
28. Web Template
4. Flash intro templates – templates of an intro
clip, developed with Flash only and used to
represent a company or/and a project.
29. Online WYSIWYG Platforms
Whether you’re attracted in learning to make
your own website or want to start a blog without
having to learn HTML or other coding languages,
you may want to consider using a website builder
that makes use of a WYSIWYG editor.
