Navigating Websi

t es
Us i n g E s s e n t i a l
Fe a t u re s

Prepared by: Lyzi

e Pascual
 OBJECTIVES:
At the end of the lesson, 80% of the students should
be able to;
a. define words used in website navigation;
b. identify the types and structure of a website;and
c.navigate websites using essential features
Logo-link challenge 1
Logo-link challenge 2
Logo-link challenge 3
Logo-link challenge 4
Logo-link challenge 5
Web page -is a document,
commonly written in
Hypertext Markup
Language (HTML) that
is viewed in an internet
browser.
 HTML
- is a standard markup language
used in creating web pages. It uses
codes
which will later be transformed into
graphics through the help of a
browser ( Chrome, Firefox, Safari,
etc.)
Example:
Website -a well-structured
collection of related
web pages located
under a single domain
name
Example: The MSN website
-is a Microsoft-owned portal
that provides various internet
services and content. It offers
news, weather, entertainment,
and other features.
Example: 1st image
Example: 2nd image
Example: 3rd image
Example: 4th image
Take note that the domain name suffix changes based on what type the
institution or owner of the website belongs.
 After typing the URL, the next thing
that you will see on your screen is the
homepage of the website. The
homepage is the first webpage of the
website. Let us study its structure.
Website address

Home page of a Website

 Basic Website Structure
1. Header – the top part of a website containing the logo, site name, and usually
the site’s navigation menu. It stays constant and visible as visitors click around
the site.
 Basic Website Structure

2. Navigation Bar / Main Menu – the links at the

top of the page to help you find what you’re
looking for.
When a site is viewed on a mobile device, the navigation usually
morphs into an icon with 3 stacked lines also known as a
“hamburger”.
The most common format of navigation menu
is the “drop-down” menu
 Basic Website Structure

3. Sidebar– the narrow vertical column right

next to your website content. It often contains
advertisements, links to other content, call to
action, or a search box.
 Basic Website Structure

4. Main content - a big area that contains most

content of a given webpage. For example, the video
you want to watch, the story you are reading,
the map you want to view, or the news, headlines,
etc.
Main content
 Basic Website Structure

5. Article – refers to a written piece of

content that provides information, analysis,
or commentary on a specific topic. It is a
form of digital publishing commonly found
on blogs, news websites, or online
magazines.
 Basic Website Structure
6. Footer – performs the same function as the header – it is
a region on a website that is constant from page to page,
except a footer is at the bottom of a page. The contact
information, privacy policy, terms of use, sitemap social
media icons and links to other pages are usually in the
footer
World wide web
-collection of all
the websites that
the public has
access to
 Types of website
1. Blog – is an online journal or
informational page that is regularly
updated. It usually talks about
anything – whether it is travel tips,
financial advice, or reviews
 Blog website
WordPress is a popular platform that allows users to create and
manage their own blogs. It offers a user-friendly interface,
customizable templates, and various features for individuals and
businesses to publish content, share their thoughts, and engage
with readers.
 Types of website
2. Corporate– provides information about one’s
business. It is a website typically includes
sections like Home, About Us, Products/Services,
Careers, and Contact
 Corporate website
APPLE WEBSITE
Apple's website showcases their latest
products and innovations with high-
quality visuals. The navigation is
intuitive, featuring sections like iPhone,
Mac, iPad, Watch, and more
 Types of website
3. E- Commerce – is otherwise known as an online store
 Types of website
4. Portfolio – displays and promotes examples of previous
works
Ex. Behance Website
-The site typically includes sections for projects, a brief
bio, and contact information. The design is tailored to
highlight the individual's artistic style and
accomplishments.
Behance website
 Types of website
5. Brochure – can be likened to digital business cards. It advertises
service and display contact information with just a few pages

Ex. The Neat Space Website

 Types of website
6. Crowdfunding – is designed to raise fund for a project
or people who need financial help

Ex. Kickstarter Website

It allows individuals and businesses to present their creative projects,
seek funding from the public, and offer backers various rewards
based on their contribution level.
 Types of website
7. News or Magazine – keeps the readers up
to date on current affairs and for
entertainment

Ex. CNN WEBSITE

CNN Digital is the world leader in online news and information and
seeks to inform, engage and empower the world.
Types of website
Activity 1.
Direction:Unscramble the letters to form the word
being defined.
Activity 1.
Direction:Unscramble the letters to form the word
being defined.
Activity 1.
Direction:Unscramble the letters to form the word
being defined.
Activity 1.
Direction:Unscramble the letters to form the word
being defined.
Activity 1.
Direction:Unscramble the letters to form the word
being defined.
B. Identify the basic website structure

1. 2.
 B. Identify the basic website structure

3.
 B. Identify the basic website structure

4.
 B. Identify the basic website structure

5.
Assignment
On a long bond paper, design your website’s homepage. Include the
following
information in your design.
For the Header: Your company or business logo Your site’s name
For the Navigation Bar/ Main Menu Include at least 5 menus that
users can see when they visit your site
For the sidebar: Related links and advertisements
For the main content At least two titles of articles that you want the
users to see/ read from your website
For the Footer: Contact numbers and e-mail address