STID1103 Computer Applications in Management

Topic 4
WEB PAGE DEVELOPMENT

1
Learning Objectives

After completing this chapter you will be able to:-

• Introduce Web Page: functions and categories
• The methods in designing, creating and publishing
website
• The contents of website
• Introduce HTML coding in creating a simple homepage.

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

• There are several types of websites

Online social Informational

Search engine
network and research

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

Banking and Travel and

Entertainment
finance tourism

Retail and
Mapping
auctions

9
Types of Websites

Careers and
E-commerce Portals
employment

Website
Content
creation and
aggregation
management

10
Webpage Development

• Web publishing is the creation and maintenance

of websites

Design Create Maintain

Plan the Host the
the the the
website website
website website website

11
12
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 After you've sketched a map of

creating a site can save you lots of your site, it's time to start
sketching a common layout for
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

• When you’ve finally perfected the site, it’s time to release it

to the public.
Maintain

• You need to maintain your website in order not to become

out-of-date.
• Your website will be up-to-date.
Digital Media on the Webpage

• Multimedia refers to any application that

combines text with media

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

• Audio includes music, speech, or any other sound

– Compressed to reduce file size
• You listen to audio on your computer using a media
player

27
Digital Media on the Web

• Video consists of images displayed in motion

• Virtual reality (VR) is the use of computers to simulate a
real or imagined environment that appears as a three-
dimensional space

28
Digital Media on the Web

A plug-in, or add-on, is a program that extends the capability of a browser

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

• HTML is written in the form of HTML elements consisting

of tags enclosed in angle brackets (like <html>)
• HTML tags most commonly come in pairs
like <h1> and </h1>
• The first tag in a pair is the start tag, the second tag is the
end tag (they are also called opening tags and closing
tags).
• In between these tags web designers can add text, tags,
comments and other types of text-based content.
HTML Code: Element

• <html>...</html>
– The Root element of an HTML document; all other elements are
contained in this.
– the beginning and the end of an HTML document.
• <head>...</head>
– Container for processing information and metadata for an HTML
document.
• <body>...</body>
– Container for the displayable content of an HTML document.
• <title>...</title>
– Define a document title.
– Web browsers usually display it in a window's title bar when the
window is open
HTML Code: Element (cont…)

• <h1>...</h1> <h2>...</h2>
– Section headings at different levels.
• <center>...</center>
– Creates a block-level center-aligned division.
• <a>...</a>
– An anchor element is used to anchor a URL to some text on a web
page.
• <p>...</p>
– Creates a paragraph
• <br>
– A forced line-break.
• <img>
– Used by visual user agents to insert an image in the document. The
src attribute specifies the image URL.
Web File Types

• .htm / .html ~ Hypertext Markup Language

• .php / .php3 ~ Personal Home Page
• .asp / .aspx ~ Active Server Pages
• .cgi ~ Common Gateway Interface
• .jsp ~ JavaServer Pages

• Default webpage filename: index

– index.html
– index.jsp
Publishing Your Web Site

• After completed the web site, ready to publish the Web so

that your web site can be accessed by many people.
• Publishing the Web means place all the folders and files in
the Web onto a Web server.
• The Web server then serves up your site to visitors on the
WWW.
• A user cannot simply copy his or her files to a server.
• Two different ways/routes to get your Web onto the
server:
– HTTP (to upload your Web files to the server)
– FTP (to move the files to the server).