The document defines and explains the key elements and anatomy of a typical website, including the header, body, links, navigation, breadcrumbs, sidebar, and footer. It also covers important related terms such as HTML, CSS, domains/URLs, meta data, sitemaps, forms, resolutions, and WYSIWYG editors.

2. Anatomy
of
a
Website
Header
Source:
www.womensrefugeecommission.org/
Header:
top
area
of
a
website;
typically
iden;fies
the
site/organiza;on
name.
OCen
includes
logo
or
iden;fying
factor.
This
stays
the
same
throughout
every
page
in
the
site.

3. Anatomy
of
a
Website
Body
Source:
www.womensrefugeecommission.org/
Body:
Area
of
main
text
and
images
on
a
webpage.
Can
also
include
images
and
links.

4. Anatomy
of
a
Website
Links
Source:
www.womensrefugeecommission.org/
Links:
Code
connec;ng
one
page
to
another
on
the
Internet,
or
to
download
programs
or
files.
Links
should
be
visually
separate
from
the
rest
of
the
body
text,
such
as
underlining,
italicizing
or
making
a
different
color.

5. Anatomy
of
a
Website
Links
Source:
www.womensrefugeecommission.org/
Internal
Link:
Link
to
another
page
within
the
same
website
External
Link:
that
points
to
another
website
on
the
Internet
(highlighted
above
in
yellow)

6. Anatomy
of
a
Website
Naviga;on
Source:
www.womensrefugeecommission.org/
Naviga=on:
Links
to
all
the
pages
and
content
contained
within
a
website

7. Anatomy
of
a
Website
Breadcrumbs
Source:
www.womensrefugeecommission.org/
Breadcrumbs:
Part
of
the
naviga;on
that
indicates
the
page
a
viewer
is
currently
on,
and
its
loca;on
within
the
site.

8. Anatomy
of
a
Website
Sidebar
Source:
www.womensrefugeecommission.org/
Sidebar:
Area
on
leC
or
right
side
of
webpage
template
oCen
containing
items
of
interest
such
as
links,
RSS
feeds
and
social
media
updates,
etc.

9. Anatomy
of
a
Website
Footer
Source:
www.womensrefugeecommission.org/
Footer:
Area
at
the
boUom
of
the
page
that
typically
contains
copyright
info,
contact
e-­‐mail
address,
terms
and
condi;ons,
etc.

10. Anatomy
of
a
Website
Other
Important
Terms
HTML
(Hypertext
Markup
Language)
The
basic
language
of
the
Internet,
HTML
uses
a
series
of
tags
to
format
and
place
content
on
a
website,
link
pages,
etc.

11. Anatomy
of
a
Website
Other
Important
Terms
CSS/Style
Sheets:
External
document
that
controls
the
appearance
of
a
website.

12. Anatomy
of
a
Website
Other
Important
Terms
Source:
www.marque4e.edu/comm/MUJournalism100
Domain
Name/URL:
leUers,
numbers,
hyphens
and
underscores
used
to
define
where
a
website
is
located
on
the
Internet.
URLs
are
case
insensi;ve
and
typically
begin
with
“www”
(some;mes
just
hUp://)

13. Anatomy
of
a
Website
Other
Important
Terms
Source:
www.marque4e.edu
Index
Page:
Home
page
or
main
landing
site
that
visitors
reach
when
typing
in
the
website
URL.

14. Anatomy
of
a
Website
Other
Important
Terms
Meta
Data:
Invisible
bits
of
code
added
to
a
site’s
header
that
communicates
informa;on
about
the
site
to
search
engines.

15. Anatomy
of
a
Website
Other
Important
Terms
Sitemap:
Index
of
all
informa;on
and
content
on
a
site.
Typically
found
on
home
page
of
the
site
(oCen
near
footer).
Helps
people
find
what
they
are
looking
for
on
the
site
and
to
help
search
engines
find
pages
and
links
on
the
site.

16. Anatomy
of
a
Website
Other
Important
Terms
Source:
www.marque4e.edu/comm/MUJournalism100
Form:
Area
with
informa;on
fields
that
allows
user
input,
which
is
collected
and
sent
back
to
the
server.

17. Anatomy
of
a
Website
Other
Important
Terms
Source:
www.marque4e.edu
Resolu=on:
Design
for
the
most
common
viewing
resolu;ons:
800
x
600,
1024
x
768
are
commonly
used
and
are
easily
viewable
by
most
people.
The
way
that
a
site
displays
on
a
screen
is
dependent
on
the
browser
used
and
whether
it’s
set
for
op;mized
viewing;
size
of
monitor
and
device
on
which
the
site
is
being
viewed.
800
x
600
size
makes
the
site
most
accessible
for
the
largest
number
of
people.

18. Anatomy
of
a
Website
Other
Important
Terms
Source:
www.marque4e.edu/comm/MUJournalism100
Resolu=on:
Design
for
the
most
common
viewing
resolu;ons:
800
x
600,
1024
x
768
are
commonly
used
and
are
easily
viewable
by
most
people.
Larger
size
of
1280x1024
are
easily
viewable
by
people
with
large
monitors
and
op;mized
browsers.
Viewers
visi;ng
the
website
on
smaller
devices
(phones,
laptops
and
tablets)
will
need
to
scroll
horizontally
across
the
screen.

19. Anatomy
of
a
Website
Other
Important
Terms
Source:
www.weebly.com
WYSIWYG
Editor:
Visual
editor
that
allows
the
site
designer
to
primarily
work
with
the
layout
and
design
of
the
page
rather
than
the
code.
Stands
for
“what
you
see
is
what
you
get.”

20. Website
Design
Basics
Before
You
Begin
Designing
Source:
h4p://www.aarp.org
Target
Your
Audience.
What
type
of
visitor
is
most
likely
to
visit
your
site?
Consider
age,
gender,
geographic
loca;on.
What
are
their
values
and
goals?
What
types
of
colors
and
imagery
might
they
find
appealing?
What
common
vernacular
do
they
use?
As
the
designer,
consider
any
unique
challenges
posed
by
working
with
this
audience.
Are
there
any
technological
limita;ons?
Are
there
any
physical
challenges,
such
as
disabili;es
or
visual
impairment
that
must
be
taken
into
considera;on?

21. Website
Design
Basics
Before
You
Begin
Designing
Source:
h4p://www.aarp.org
The
goal
is
to
make
sure
that
the
message
reaches
the
audience
and
emphasizes
the
overall
mission
statement.
Consider
running
your
design
by
someone
in
the
target
demographic
to
make
sure
that
the
site
is
easily
used
and
understood.

22. Website
Design
Basics
White
Space
Source:
www.leica.com
White
Space:
Leave
visual
“breathing
room”
on
the
page
to
avoid
over
cluUering
informa;on
on
the
page.
Keep
pages
simple
and
cluUer-­‐free.
Avoid
cramming
too
much
informa;on
in
one
area
of
the
site–
this
helps
emphasize
the
informa;on
present
on
each
page.

23. Website
Design
Basics
Type
Source:
www.alistapart.com
Type:
Type
should
be
legible.
Site
uses
clean,
readable
fonts
and
color
combina;on
with
enough
contrast.
Tip:
Avoid
large
areas
of
“reversed
out”
type
(light
text
on
a
dark
background),
as
this
leads
to
eyestrain
for
viewers.
Make
sure
that
text
and
background
have
enough
contrast
to
stand
apart
as
separate
elements
on
a
page.
Dark
text
on
light
background
oCen
works
best.
S;ck
to
common
system
fonts
(Arial,
Helve;ca,
Times
New
Roman,
etc)

24. Website
Design
Basics
Type
Source:
www.alistapart.com
Type:
Break
up
large
blocks
of
text
into
smaller
paragraphs.
This
also
helps
with
the
visual
flow
of
informa;on.

25. Website
Design
Basics
Type
Avoid
large
areas
of
light
type
on
a
dark
background;
this
leads
to
eye
strain
for
site
visitors.

26. Website
Design
Basics
Type
Source:
www.pallian.com
Type:
Header
can
use
more
decora;ve
fonts;
in
this
case,
design
the
header
as
a
graphic
element
in
a
design
program
such
as
Adobe
Photoshop
so
that
it
reads
as
an
image
instead
of
text,
yet
s;ll
preserves
the
appearance
of
the
font.

27. Website
Design
Basics
Unity
and
Consistency
Source:www.memphiszoo.org
Create
a
consistent
system
of
page
templates
and
use
these
throughout
the
site
design.
Keep
the
header,
footer,
sidebars
and
any
naviga;on
in
the
same
spot
throughout
the
design.
This
helps
;e
the
individual
pages
together
into
one
unit
and
avoids
crea;ng
too
many
varia;ons
that
lead
to
confusion
on
the
part
of
the
visitor.

28. Website
Design
Basics
Unity
and
Consistency
Source:www.one.org/us
Layout:
Keep
the
most
important
content
toward
the
top
of
the
page.
Hierarchy:
Separate
the
informa;on
on
the
page
according
to
its
importance
and
the
order
in
which
you
want
the
reader
to
read
it.

29. Website
Design
Basics
Unity
and
Consistency
Source:www.one.org/us
Proximity:
Similar
and
related
content
should
be
grouped
close
together
on
a
page
to
indicate
connec;ons.

30. Website
Design
Basics
Unity
and
Consistency
Source:www.deliveringafrica.org
Create
different
type
treatments
for
text
headings,
subheadings,
pull
quotes
and
body
text
to
differen;ate
these
areas
of
a
website;
keep
this
design
consistent
throughout
the
en;re
site.

31. Website
Design
Basics
Color
Source:www.aidsresearch.org
Design
should
use
appropriate
color
and
font
choices
to
convey
the
site’s
intended
message.
Keep
a
consistent
use
of
a
company’s
brand
color
paleUe.
Keep
color
paleUe
consistent
throughout
the
en;re
site
design
in
order
to
create
unity
between
pages.

32. Website
Design
Basics
Color
Source:h4p://mannafoodbank.org/
Consider
color
theory
basics
and
how
different
colors
work
together.
Colors
should
work
well
together,
not
clash
or
compete.

33. Website
Design
Basics
Color
Source:h4p://wisergirls.org
Colors
also
have
different
psychological
meanings
across
world
cultures.
Consider
the
geography
of
your
primary
audience
and
how
the
viewers
may
perceive
individual
colors.

34. Website
Design
Basics
Color
Source:
www.december.com/html/spec/color.html
Op=onal:
When
choosing
colors,
refer
to
a
hexadecimal
chart
to
create
a
consistent
paleUe
of
colors.
This
will
help
to
ensure
consistency
every
;me
you
use
the
same
color
throughout
the
site.

35. Website
Design
Basics
Op;mizing
Images
When
including
photos
or
graphics,
make
sure
to
op;mize
for
best
quality
and
fastest
loading
;me.
Adobe
Photoshop
has
a
useful
“Save
for
Web
&
Devices”
feature
that
helps
compress
images
for
online
viewing
keeping
them
looking
their
best.

36. Website
Design
Basics
Op;mizing
Images
The
“Save
for
Web
&
Devices”
feature
allows
the
designer
to
compare
up
to
4
images
side
by
side
at
different
quality
and
compression
se/ngs.
The
boUom
leC-­‐hand
corner
of
this
window
also
displays
file
size
and
load
;me
for
each
op;on.

37. Website
Design
Basics
Forma/ng
Images:
Image
Types
JPEG
(Joint
Photographic
Expert
Group)
Another
commonly
used
and
compressed
online
image
format.
Suitable
for:
photographic
images
and
anything
with
complex
gradients
and
areas
of
blended
color.

38. Website
Design
Basics
Forma/ng
Images:
Image
Types
GIF
(Graphics
Interchange
Format)
A
compressed
format
used
to
save
and
display
online
images
with
flat
areas
of
color
rather
than
gradients.
Images
are
reduced
to
256
colors
or
less;
this
allows
the
file
to
remain
small
in
size
and
load
quickly.
Loss
of
quality
if
images
are
too
compressed.
Suitable
for:
logos,
computer/vector
drawn
graphics

39. Website
Design
Basics
Forma/ng
Images:
Image
Types
PNG
(Portable
Network
Graphics)
A
format
for
encoding
a
picture
pixel
by
pixel
and
sending
it
over
the
web.
Small
file
sizes
with
no
loss
in
quality
when
saved.
Recommended
by
the
W3
(World
Wide
Web)
ConsorLum
as
a
replacement
for
GIF
images.

40. Website
Design
Basics
Forma/ng
Images
Watch
image
size
and
resolu=on.
Pay
aUen;on
to
the
rela;onship
between
image
size/document
size
(pixel
dimensions
with
actual
width
and
height),
document
size,
resolu;on
and
file
size.
Images
should
be
set
at
a
resolu;on
of
72
ppi
for
online
viewing.
Note:
Using
the
“Save
for
Web
&
Devices”
feature
in
Photoshop
will
do
this
automaLcally,
also
allowing
user
to
opLmize
file
quality.

41. Website
Design
Basics
Forma/ng
Images
Avoid
resizing
small
images
to
make
them
bigger.
The
result
is
oCen
blurry
or
pixelated
images,
which
makes
the
quality
look
poor.

42. Website
Design
Basics
Quality
Control
Check
for
spelling
errors
and/or
any
inconsistent
or
inaccurate
informa;on.
Make
sure
that
the
company’s
name
and
the
names
of
its
employees
and
management
are
spelled
correctly
and
that
all
contact
informa;on
is
up
to
date.
Naviga=on
should
be
easy
to
use
and
consistent
throughout
the
site.
Forms
should
func=on
properly.
Always
test
any
forms
that
will
appear
on
the
website.
Links:
Make
sure
all
links
are
working,
and
that
they
point
to
the
right
target
page.
When
using
links
to
third
party
sites,
make
sure
that
the
link
opens
the
page
in
a
new
tab
on
the
viewer’s
Internet
browser;
this
helps
avoid
steering
traffic
away
from
your
site.
Use
ALT
tags
when
placing
images.
Using
“ALT”
tags
helps
text
reading
soCware
iden;fy
images
on
your
site,
which
in
turn
makes
the
site
accessible
for
visitors
with
visual
disabili;es.
Cap=ons
are
provided
for
audio,
video
and
photo
files

43. Website
Design
Basics
Quality
Control
Use
search-­‐friendly
page
=tles
that
are
self-­‐explanatory
to
visitors.
Be
sure
to
use
short,
descrip=ve
and
relevant
keywords
in
all
page
;tles
Test
your
site
for
compa=bility
in
a
variety
of
browsers,
especially
the
most
commonly
used
ones
(Internet
Explorer,
Firefox,
Safari,
Chrome,
etc).
Content
should
be
kept
updated
frequently,
and
should
sound
conversa;onal
to
the
reader.
Naviga=on
should
be
simple
and
all
pages
should
be
within
3
pages
of
every
other
page
on
the
site.
Avoid
burying
pages
several
levels
deep
on
a
website
where
it
can’t
be
easily
located.
Loading
=me:
2-­‐5
seconds;
no
more
than
10
seconds

44. Website
Design
Basics
Quality
Control
Avoid
using
Flash
script.
Flash
content
is
not
compa;ble
with
the
majority
of
mobile
devices
such
as
smart
phones
and
iPads;
avoiding
this
ensures
that
your
site
can
be
viewed
by
the
maximum
number
of
people.
Alterna;vely,
you
can
also
use
style
sheets
to
link
to
different
versions
of
a
website,
providing
a
mobile-­‐friendly
HTML
version
for
viewers
using
cell
phones
and
tablets
to
view.
Avoid
adding
automa;c
music,
anima;ons
on
the
site,
cluUered
content,
pixelated
images.