Scribd
Upload
5 views

LESSON-6-Basic-Web-Elements

The document outlines the basic elements of web design, including headers, navigation bars, images, text, web-friendliness, color schemes, and footers. It emphasizes the importance of these elements in creating an engaging and functional website. Additionally, it encourages readers to apply their learning by designing their own web page layout.

Uploaded by

mariscalcharles30
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

LESSON-6-Basic-Web-Elements

The document outlines the basic elements of web design, including headers, navigation bars, images, text, web-friendliness, color schemes, and footers. It emphasizes the importance of these elements in creating an engaging and functional website. Additionally, it encourages readers to apply their learning by designing their own web page layout.

Uploaded by

mariscalcharles30
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

EMPOWERMENT

TECHNOLOGIES
BASIC WEB
DESIGN
ELEMENTS
OBJECTIVES
1. Explain the role of each web design element
2. Value the significance of web elements in
creating a website.
3. Create a basic webpage layout by incorporating
the elements.
"Imagine this: You have
the power to create
something that millions of
people could see, interact
with, and be inspired
by. What would it be?
Websites are like digital
playgrounds, and
today, you get to be the
designer! Imagine creating your
very own web page—a place
where you can share your
Think about it: What if
you could design a
website about your
favorite sport, a cool
video game, or even a
In this lesson, you’ll learn
the basic web design
elements—like headers,
navigation bars, images,
and text—that make
websites look awesome
So, are you ready
to become a web
designer for a day?
WEB DESIGN
Is the process of creating
websites. It encompasses
several different aspects,
including webpage layout,
content production, and
graphic design.
WEB DESIGN
The layout and
appearance of the
elements within a
webpage are typically
defined using CSS or
BASIC WEB
DESIGN
ELEMENTS
BASIC WEB DESIGN ELEMENTS
1. Header
2. Navigation Bar
3. Images
4. Text
5. Web Friendly
6. Color Scheme
7. Footer
ELEMENT
#1: HEADER
• The top
part of the
web page,
often with
a logo or
title.
ELEMENT #2:
NAVIGATION BAR
• Easy to navigate.
• The viewer should
always know exactly
where they are on the
website and have easy
access to where they
would like to be.
• Menu items should easily
accessible from any
ELEMENT #3:
IMAGES
• Pictures that
make the
page look
nice and give
more
information.
ELEMENT # 4: TEXT
• This is the backbone of your
website
• Your website text should be
informative, easy to read, and
concise.
• Your text should be easily
readable.
ELEMENT # 5: WEB
FRIENDLY
• No matter how
informative, beautiful,
and easy to use your
website design is, it’s
useless unless it’s web-
ELEMENT # 6:
COLOR SCHEME
• The style of text and colors
that make the page appealing
and easy to read.
ELEMENT # 7:
FOOTER

• The bottom part of the


page, usually with
copyright information
or contact details.
BASIC WEB DESIGN
ELEMENTS
• Header
• Navigation Bar
• Images
• Text
• Web Friendly
• Color Scheme
• Footer
“REFLECTIVE QUESTION”
• Can you think of any situations
where these skills might be
useful in the future?
“REFLECTIVE QUESTION”
• How do you think the skills you learned in
creating a webpage, such as organizing
information, being creative, and using
digital tools, can help you in your chosen
track or in your daily life?
Design Your Own Web Page:
DIRECTION:
1. Draw a header at the top of the page (this could be the name of
their site, like "My Favorite Animals").
2. Add a navigation bar with links to other pages (like "Home,"
"Gallery," "Contact").
3. Include at least one image (they can draw it or label it, like a
picture of their favorite pet or hobby).
4. Use text to describe what their web page is about.
5. Draw a footer with some details (like a small "About Me" section
or their contact information).
6. Make sure to choose some colors and fonts that make the page
look nice and easy to read.
ACTIVITY
(Create Your Dream
Web Page)
Thank you!
Insert a parting or
call-to-action message here.

You might also like