Scribd
Upload
30 views

Lesson 1

This document provides an introduction to HTML5 and the process of web design and development. It discusses the objectives of learning HTML5, the history of HTML, and the key parts of a website. The document also outlines the typical steps in the web design and development process, including information gathering, planning, design, content creation, coding, testing, and maintenance. It distinguishes the roles of a web designer from a web developer.

Uploaded by

ANIMATION
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
30 views

Lesson 1

This document provides an introduction to HTML5 and the process of web design and development. It discusses the objectives of learning HTML5, the history of HTML, and the key parts of a website. The document also outlines the typical steps in the web design and development process, including information gathering, planning, design, content creation, coding, testing, and maintenance. It distinguishes the roles of a web designer from a web developer.

Uploaded by

ANIMATION
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

LESSON 1:

INTRODUCING HTML5
Prepared by:
Ms. Joserie M. Mirabeles
OBJECTIVES
At the end of the lesson, you
should be able to:
• D i ff e r e n ti a t e We b D e s i g n a n d
We b D e v e l o p m e n t .
• I d e n ti f y t h e p h a s e s o f We b
D e s i g n a n d We b D e v e l o p m e n t .
• Know the brief history of
Wo r l d W i d e We b a n d H T M L .
• Know the parts of the
website.
What to expect with HTML?
• Familiarization of HTML tags, and its function.
• Writing an HTML document, and running using
your browser.
• Make use of multimedia such as image, video,
audio, and animations.
• Also supports different graphic effects like
vector, 3D, lighting and shadows.
• The codes types supported is dependent on
the browser used.
Add a footer 3
FR
BRIEF HISTORY OF HTML
The world wide web was a vision of Sir Timothy
“Tim” Berners-Lee in 1898. He created HTML in
late 1991.

Add a footer 4
FR
What is HTML?
• HTML or Hypertext Markup Language is a • HYPERTEXT - Refers
standard for describing the structure and to the way in which
presentation of information via the Internet. web pages or HTML
• This is the widely used language for creating documents are
linked together. This
web pages. is the link available
• Web developers use HTML keywords or tags to on a web page.
instruct the Web browser application how to • MARKUP - uses tags
format and display the content. to define elements
within a document.
• HTML editors: Notepad, Notepad++, TextEdit.

Add a footer 5
FR
WEB DESIGN AND WEB DEVELOPMENT
Web Design Web Development
• Is the creation of the layout • Is the creation of web
of the visual elements of the pages using HTML, CSS,
website using various design JavaScript, and other
programs. scripting languages. It
involves all the codes that
make a website work.

Add a footer 6
FR
WEB DESIGNER AND WEB DEVELOPER
FR
WEB DESIGNER AND WEB DEVELOPER

• Specializes on coding and


• Focuses on the appearance
works on making websites
of a website. with emphasis on its
• Considers various design functionality,
principles to achieve a • Also called a programmer
pleasing layout for the who converts a static layout
website. into a dynamic website using
links, buttons, etc.
FR
WEB DESIGN AND WEB DEVELOPMENT
PROCESS
1
Information
Things we need to consider:
Gathering
• Purpose of the website
• Goals we wish to accomplish
• Target audience
• Content our target audience
will be looking for
FR
WEB DESIGN AND WEB DEVELOPMENT
PROCESS
2
Planning
• Putting together the
information gathered.
• Do the planning by creating a
site map.
SITE MAP
Site map
• Describes how the
entire site will look
like.
• List all the areas of
the website, and its
sub-areas.
• Helps build a user-
friendly and easy
navigation website.
FR
WEB DESIGN AND WEB DEVELOPMENT
PROCESS
3
Design
• Determines the look and feel of
the website.
• Incorporate the design
elements: themes, colors, logos,
etc.
• Visualize content and create the
actual graphic design of the
website layout.
FR
WEB DESIGN AND WEB DEVELOPMENT
PROCESS
4
Content Writing
and Assembly
• Very important part of the
process – writing the content.
• Choosing appropriate text,
images, and videos.
• Includes also proofreading and
editing.
FR
WEB DESIGN AND WEB DEVELOPMENT
PROCESS
5
Coding
• Start of creating the website
itself.
• Create the home page first,
then all the other pages in the
site map.
• The developer writes the code.
FR
WEB DESIGN AND WEB DEVELOPMENT
PROCESS
6
Testing, Delivery,
• and Launching
Everything in the website should be tested: links, forms,
scripts, and typography.
• Once uploaded to the server, run another test.
FR
WEB DESIGN AND WEB DEVELOPMENT
PROCESS
7
Maintenance and
• Regular Updating
Development of the
publishing.
website does not stop after

• To keep users from visiting the website, make changes and


additions on a regular basis.
• Keep the website up-to-date.
FR
PARTS OF WEBSITE

Homepage
• The start or the main
web page of the
website.
• User’s navigation
should be available
here.
FR
PARTS OF WEBSITE
PRODUCTS AND SERVICES

• Allows visitor to see


enough information
about the different
products or services
an individual, group,
or company offers.
FR
PARTS OF WEBSITE

ABOUT
• Introduces the
creator/s or the
company, including its
history, people, etc.
• Make sure to impress
the user with its
content.
FR
PARTS OF WEBSITE
DYNAMIC CONTENT

• Includes blog, video,


photo gallery, news,
events, FAQ,
testimonials, etc.
FR
PARTS OF WEBSITE
SITE LINKS

• Displays links relative


to other sites that
the customers would
find interesting.
WIRE FRAME

Wire frame
• Describes the user
interface of the
website.
• Note: does not
contain any design
elements.

You might also like