Chapter 4 - Web Page Development
Chapter 4 - Web Page Development
Chapter 4 - Web Page Development
STID1103
Topic 3
Chapter 4
WEB PAGE DEVELOPMENT
Webpage Development
Learning Objectives
STID 1103 2
Introduction
• Web page is a single page containing text and graphics
that has been labeled with the appropriate HTML coding
for the web.
• Web site is a collection of linked Web pages containing
various content that easily be navigated using a Web
browser. It includes a beginning file called a home page.
• From the home page, you can navigate to all other pages
on the site.
Web Page
• A web page can contain any of the following:
– Text
– Graphics (gif or jpeg)
– Audio (.mid or .wav)
– Interactive multimedia content that requires a plug-in
such as Flash, Shockwave or VML
– applets (subprograms that run inside the page) which
often provide motion graphics, interaction, and sound
Types of Websites
• A web search engine is software that finds
websites, webpages, images, videos, news, maps,
and other information related to a specific topic
• A subject directory classifies webpages in an
organized set of categories, such as sports or
shopping, and related subcategories
5
Types of Websites
• Search operators can help to refine your search
6
Types of Websites
News, weather,
Media sharing Bookmarking sports, and other
mass media
7
Types of Websites
Business,
Educational governmental, and Blogs
organizational
Wiki and
Health and fitness Science
collaboration
8
Types of Websites
Retail and
Mapping
auctions
9
Types of Websites
Careers and
E-commerce Portals
employment
Website
Content
creation and
aggregation
management
10
Webpage Development
11
Learning
• Discovering and understanding what you need to
build in the first place is the most important part
of the entire website design process.
• The more you know about what you need to
accomplish, the better your chances will be of
creating a successful website.
• Use a creative brief ~ basically a series of
questions that you ask your clients so that you
can understand the scope and goals of a project.
Plan
• Once you’ve learned what you need to build, it’s
time to start planning how you are going to make
it happen.
• Provide answers to the following planning
questions.
– What are the goals of the web?
– What will its content be?
– How will it be organized?
– What do you want it to look like?
Plan (cont…)
• Design strategy
– Before you can start designing a website, you need to
know exactly what, and how, to design it in the first
place
• Research and Note-Taking
– visit competing websites and see what types of designs
are already out there in the target market so you will
know how to differentiate your own design.
– While you are researching, you’ll also start
brainstorming about what colors to use, where to place
the call(s)-to-action, what kind of fonts you should use
and other similar details.
Plan (cont…)
• Sketching
– start by sketching out my ideas on a regular old piece of
paper, as do many other web designers.
– start thinking seriously about the layout of the site, but
also the structure of your site and how the navigation
will shape up.
• Pick Your Tools
– assess which tools you will need to use.
– what content management system would work the best
considering the site’s goals, whether or not including
Flash at all is a good idea, and so on.
Hierarchical Structure of Web Site
• Prepare a sketch of your proposed website that
shows the relationships between the pages.
Sketching out a structure before creating a site After you've sketched a map of your site,
can save you lots of work later. it's time to start sketching a common layout
for each of your pages.
Design
• Once you are ready to start designing, keep in mind that
you need to design more than just a home page.
• You’ll need a design for the sub-pages of your site as well
• The design phase itself is straightforward. Just open up
Front Page or any other web authoring tools and start
bringing up your web to life.
Hierarchical Structure of Web Site (cont…)
Code
• Once you have a killer design, you’ll need to turn it into a
real, live website.
• Start with a Base Template
– add in your title, descriptions and meta tags, or at least make a
note of what they should be.
• Lay Out the Main Sections and Content
– begin adding your text and image content.
• Validate and Test
– make sure your code validates by using the validation tool provided
by the W3C
Launch
Graphics Animation
Audio Video 23
Digital Media on the Web
• A graphic is a visual
representation of
nontext information
• Graphic formats include
BMP, GIF, JPEG, PNG,
and TIFF
24
Digital Media on the Web
• An infographic is a
visual representation of
data and information,
designed to
communicate quickly,
simplify complex
concepts, or present
patterns or trends
25
Digital Media on the Web
Animation is the appearance of motion created
by displaying a series of still images in sequence
Digital Media on the Web
27
Digital Media on the Web
28
Digital Media on the Web
29
Essentials of Good Web Design
• Navigation buttons or bars are easy to understand and use.
• A large site has an index or site map.
– a list of pages of a web site accessible to users
• The navigation bar or button give the visitor a clue as to where they are,
what page of the site they are currently on.
• The hierarchy of information is perfectly clear.
• Text is big enough to read, but not too big.
• Graphics and backgrounds use safe colors.
– Color combinations of text and background that make the text hard to read
• Page download quickly.
• Consistency from page to page every web page in the site looks like it
belongs to the same site.
Website Navigation
• All web navigation must answer these
questions:
– Where am I?
– Where have I been?
– Where can I go next?
– Where's the Home Page?
– Where's the Home Home Page?
• Navigation must be simple and consistent.
Web Page Development
• Web page can be created in a number of
ways:
– Using a plain text editor such as Notepad
(writing HMTL code).
– Using a WYSIWYG editor (web authoring tool)
such as Microsoft FrontPage or Macromedia
Dreamweaver.
– Online templates such as WIX, WordPress, and
etc.
Writing HTML Code
• Exercise
– All you need is a text editor (eg: Notepad)
– Open Notepad
– Type the following code into your file and then save as index.html
<html>
<head>
<title> My First Web Page </title>
</head
<body>
Hello World
</body>
</html>
Writing HTML Code (cont…)
• Open browser to view your page
Writing HTML Code (cont…)
<html>
<head>
<title> My First Web Page </title>
</head
<body>
<center><H1>Hello World</h1><br>
<a href=http://www.uum.edu.my>
Universiti Utara Malaysia</a>
</body>
</html>
Writing HTML Code (cont…)
HTML Code: Meaning