BASIC WEBPAGE

DESIGN
R.Tanhueco
 Have you ever wondered
what’s behind some of the
neat webpages you visit each
day on the internet?
Do any of you have social
media profiles?
WEBPAGE CREATION
VOCABULARY
Web page
• A document on the World Wide Web
consisting of an HTML file and any related
files for scripts and graphics, and often
hyperlinked to other documents on the
Web.
Website
• A set of interconnected webpages usually
including a homepage, generally located on
the same server, and prepared and
maintained as a collection of information by
a person, group, or organization.
Identify the Website and Webpages
Web Designer
• A web designer is someone who
creates well-organized and eye-
pleasing pages with text, graphics,
and color to convey a message to
the viewer.
Layout
• A rough sketch outlining the layout and
components of a webpage or website.
Web page Layout
• Web pages either have a left-hand, right-
hand, or top layout.
Web page Layout

Logo Header

Menu Content
Anchor Link
• Internal links within a webpage that
allow the user to “jump to” other areas
of the page.
Anchor Link
External Link
• A link to another webpage or website.
External Link
HTML
• HTML (HyperText Markup Language) is the
most basic building block of the Web. It
defines the meaning and structure of web
content.
HTML Editor
• A software application for creating
webpages using the HTML markup
language or a WYSIWYG interface.
WYSIWYG
• “What you see is what you get” editing
that is a graphical interface for the
HTML language.
• A WYSIWYG (pronounced "wiz-ee-
wig") editor or program is one that
allows a developer to see what the
end result will look like while the
interface or document is being
created.
Pell
OpenWYSIWYG
Summernote
WEBPAGE DESIGN
 WEBPAGE DESIGN

Apply
Collect Design
Ideas principles

Implement
these
ideas
WEB DESIGN ELEMENTS

LAYOUT COLOR GRAPHICS FONTS CONTENT

LAYOUT
• Maintain balance, consistency and the integrity of the
design.
 Logo Header

Tables
Menu Content
• Use tables to lay out your pages!
• Make the table borders invisible
• A 2x2 table works well
Table within a table
The outer table
The inner table
The inner table
Centered with three columns
Really complicated design!
COLOR
• Color should represent your personality or the brand of an
organization.
GRAPHICS
• Logos, images, and graphics that can help enhance your
design. Make sure to place them strategically. Use
graphics wisely!
FONTS
• Typography can enhance your design… when used
wisely.
CONTENT
• Should be useful and relevant.
Why is a layout sketch important in the
web design process?
• A storyboard allows the designer to
visualize how the page will look and
where images, text, and links (both
anchor and external) will be placed.
Consistency in Design
• Use the same font throughout!
• Use consistent graphics in website – do not
use ultra modern on one page and
calligraphy on another
• Use color scheme that is consistent
Group Activity
• Simple draft of your desired website. Using
an Oslo paper, make a draft of what you
think your website will look like.
• What is the difference of Webpage
and Website?
• What are the qualities of a well-
designed webpage?
Assignment
• Download websites of 4 companies local
and national. Compare how they create
their websites. What makes them unique to
others?
References
• https://1stwebdesigner.com/best-wysiwyg-html-editor/
• https://blog.capterra.com/wp-content/uploads/2019/06/f925e764-
e900-44e9-8645-3d5fcaed06c1_28329.png
• https://www.slideshare.net/katjuane/basic-web-design-and-
development
• https://www.slideshare.net/ts-lim/web-design-101-9144718