Website & Web Design

by Hilda V. Putong




A website is a collection of web pages, images, videos or other digital assets that are hosted on one or more
web servers, usually accessible via the Internet.

Web page

Web page is a document, typically written in HTML (hypertext markup langguage) , PHP ( hypertext preprocessor)
that is almost always accessible via HTTP (hypertext transfer protocol) protocol that transfers information from the web server
to display in the user's web browser.

Web Server

A computer program that is responsible for accepting HTTP
requests from clients (user agents such as web browsers), and
serving them HTTP responses along with optional data contents,
which usually are web pages such as HTML documents
and linked objects (images, etc.).

Web Browser

A program to show web page.
- Internet Explorer
- Nestcape Navigator
- Opera
- Mozilla Firefox.

Who will do the Website ?

“ Webmaster ”

Webmaster is mention for an expert in world web so that a webmaster do not only can just design web page but can
also make its system and take care of the website.

What does Webmaster do ? Salena Sol (

1. Content Creation
2. Architectural Design
3. Visual Design
4. Website Management

Webmaster Profession:

1. Web designer

2. Web Programmer

3. Web Animator

4. Web Adiministrator

Website System


- Determine the aim of the website and goals to be reached after making the web
- Determine your visitor
- Determine your program system to be used so that the website become stabilize, and reliable
- Determine your website scheme or web architecture
- Collecting data for the website
- Making a time schedule


- Making disign of web pages

- Design needed by a unique color combination, layout, and font type

- Decide on web interaction

- Decide on how to categorized information

- Web design should be unique


- Scripting cover the technology to create the idea from design
to become a reality

- Scripting from design result to web language to launch on the internet

- If you have reached the target desired, continue with the testing phase


- Promotion represent the very important phase to recognized the website

- Subscribe the website to search engine to assist the visitor
in searching other website so that they can put your website in
their website.

Search Engine


– This phase is to test the function from the form of interactive
and validation of data input by visitor

– This phase serve as a control of quality examination of local server
and the host server


- Keep the web fresh with the new contents consistenly
- Constantly evaluate and improve the web
- Add the newest information and throw away the obsolete information
- Keep the security web
- This phase also cover the existing structures web distorting
or new feature addition according to technological growth
to add the interest of all visitor to your web

Website Type

– Static Website

- Static Web contains web of information having the character of static.
- Static Web usually appears a lot of graphics so that designing is not needed by a reliable programmer

– Dynamic Website

- Dynamic Web is web presenting information having the character of dynamic and can interact by user.
- Dynamic Web need a lot of continous data processing by a good
web programmer

eg: - libray website with catalog online
- bookstore online


- Macromedia Dreamweaver (
- Nestcape Composer (
- MS. Frontpage
- Joomla (
- etc

Chapter 2: Web Design


- Specifying the layout

- Make or choose 1, 2, or 3 frames (1 frame for beginner)

- Give title in each page

- Prepare 1 blank layout to add pages

Layout can do in the web program or other program
eg: Adobe Photoshop


- All htm/html program have the facility of background color

- Select the colour which you take a fancy

- Colour file as background can also taken away from files image or
files picture

- Use small bacground file (eg:Tif File)

Effective File Image Format

Use the GIF format if :
- Picture containing a lot of empty area and smooth colour
- Assure that your graph is acceptable by all browser
and platform
- Make area in graph become transparent

Use JPEG format if :
- The graph have many tonal variation
- The photography is full of colour

Web with animation technology, voice, video can make
a website more interesting and interaktif but usually use
big space and sometimes need internet connection
which enough quickly.

Software eg:
- Macromedia Flash
- Flash intro & banner maker
- etc

Preparing Document
- Prepare a document with compatible program
(eg: MS Word, Excell etc)
- Copy and paste the document to htm/html or save the ms word document as web page type
- Give shortly and clear name for html file with small font without space
- Give name “index.html” for main page
(index html will be entrance way to find information at the web)

Link File

- Link is entrance to other file

- Link can contain the target: certain shares from related file

- Link is also opened at separate window
(specially link to separate website)

- Test the website: appearance, link etc


Arrange your files and put it in a folder according to
its contents category

eg: image folder, papers folder, newsletter folder etc

Web Managing

- Change the content of the website by online or offline

- Do not change name of the file if you have rivised the file
to keep the link

- Upload all of the new files and revised files

- Test all of the web pages and link files

Make an Intresting Website

1. Loading process have to quickly
2. Information/data updated
3. Making link network to the same web
4. Making intresting features (eg: search engine, discussion room, chat room, etc)
5. Use sophisticated web technology


Burns, Joe. 2002. Site Design Goodies. USA, Que.

Prihatna, Hengky. 2005. Kiat Praktis Menjadi Webmaster Profesional. Jakarta: Elex Media Komputindo.

Rachmat, Eric & Onno W. Purbo. Beberapa Tips untuk Membuat Situs Web Menjadi Lebih ‘Populer’ untuk- membuat- situs-web-menjadi-lebih-populer-1.rtf (25 Februari 2009)

Riyanto, Slamet Riyadi. Konsep Dasar Membuat Website,, (25 Feb 2009)

presented at ForATL Meeting: Singapore, Trinity Theological College, 11 March 2009
























































Contact Persons *

Mrs. Elizabeth T. Pulanco, Convenor, email:
Mr. Yesan Sellan, Secretary,,

Copyright ForATL 2007. All rights reserved.

webdesign by: Hilda V. Putong@2003-2009