WYSIWYG

WEB PAGE DESIGN
USING TEMPLATES
AND OLINE
(WYSIWYG)
PLATFORMS
OBJECTIVES:
01 Define WEB PAGE DESIGN and it's
basic elements;
02 and WYSIWYG platforms and;

Identify the different Web templates
03 WYSIWYG platform.
Design a website using an online
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.
Web design is a similar process of creation, with the

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. Strong photography, icons,
or graphics provide supplementary information to
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 is
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
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex
ABOUT US
ea commodo consequat.
TUTORIAL OVERVIEW
Write a main topic here Write a main topic here
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et eiusmod tempor incididunt ut labore et
dolore magna aliqua. dolore magna aliqua.
WHAT IS HTML?
EXAMPLE DEFINITION
<!DOCTYPE html> Lorem ipsum dolor sit amet,
<html> consectetur adipiscing elit, sed do
<head> eiusmod tempor incididunt ut labore et
<title>My First Web Page</title>
dolore magna aliqua.
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML document.</p>
</body> PURPOSE
</html> Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et
dolore magna aliqua.
BASIC STRUCTURE
01 02 03
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do consectetur adipiscing elit, sed do consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et eiusmod tempor incididunt ut labore et eiusmod tempor incididunt ut labore et
dolore magna aliqua. dolore magna aliqua. dolore magna aliqua.
123,456,789
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
BRAINSTORM & IDEAS
Lorem ipsum dolor sit amet,
Idea 1 consectetur adipiscing elit.
A
IDEA
1 Lorem ipsum dolor sit amet,
B
MAIN TOPICS &
Topic 01
DETAILS Topic 02
consectetur adipiscing elit. consectetur adipiscing elit.
Topic 03 Topic 04
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing elit. consectetur adipiscing elit.
STEP-BY-STEP CODING
01 02 03 04
Topic 01 Topic 02 Topic 03 Topic 04

Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur amet, consectetur amet, consectetur
adipiscing elit. adipiscing elit. adipiscing elit. adipiscing elit.
"LEARNING HTML IS LIKE
LEARNING THE ALPHABET
BEFORE YOU WRITE YOUR
FIRST NOVEL."
MAIN TOPICS &
DETAILS
01 Topic 01
02 Topic 02
03 Topic 03
CAUSE &
EFFECT
Problem Topic 01 adipiscing elit, sed do eiusmod tempor incididunt

ut labore et dolore magna aliqua.
Solution Topic 01 adipiscing elit, sed do eiusmod tempor incididunt

ut labore et dolore magna aliqua.
STEP 01
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
STEP 02
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit

A esse cillum dolore eu fugiat nulla pariatur.

B esse cillum dolore eu fugiat nulla pariatur.

C esse cillum dolore eu fugiat nulla pariatur.
STEP 03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<header>
<h1>Welcome to My Webpage</h1>
<p>This is a simple example of an HTML document.</p>
</header>
THANK
YOU
Write a brief description here
RESOURCE
PAGE
Use these design resources
in your Canva Presentation.
This presentation template

uses the following free fonts:
Titles: Paytone One

Headers: Lato
Body Copy: Lato
You can find these fonts

online too. Happy designing!
Don't forget to delete this

page before presenting.
CREDITS
This presentation template is free for
everyone to use thanks to the following:
SLIDESCARNIVAL for the presentation template
PEXELS for the photos

WYSIWYG

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

WYSIWYG

Uploaded by

Copyright:

Available Formats

WEB PAGE DESIGN

02 and WYSIWYG platforms and;

Web design is a similar process of creation, with the

Topic 01 Topic 02 Topic 03 Topic 04

Problem Topic 01 adipiscing elit, sed do eiusmod tempor incididunt

Lorem ipsum dolor sit amet, consectetur

Solution Topic 01 adipiscing elit, sed do eiusmod tempor incididunt

Duis aute irure dolor in reprehenderit in voluptate velit

Duis aute irure dolor in reprehenderit in voluptate velit

Duis aute irure dolor in reprehenderit in voluptate velit

This presentation template

Titles: Paytone One

You can find these fonts

Don't forget to delete this

SLIDESCARNIVAL for the presentation template

PEXELS for the photos

You might also like