Scribd
Upload
167 views17 pages

Topic 1 - Introduction To Website Design and Development

The document provides an introduction to website design and development. It defines what a website is and explains that websites consist of web pages that are linked together and hosted on a web server. It describes the purposes of websites which can include advertising, selling products, or sharing information. It then explains how the client-server model works, with the server hosting the website and clients accessing it through browsers by entering the URL. Finally, it outlines different technologies used to build static and dynamic websites, including HTML, CSS, JavaScript, PHP, MySQL, and web servers.

Uploaded by

Temitope Osadare
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
167 views17 pages

Topic 1 - Introduction To Website Design and Development

The document provides an introduction to website design and development. It defines what a website is and explains that websites consist of web pages that are linked together and hosted on a web server. It describes the purposes of websites which can include advertising, selling products, or sharing information. It then explains how the client-server model works, with the server hosting the website and clients accessing it through browsers by entering the URL. Finally, it outlines different technologies used to build static and dynamic websites, including HTML, CSS, JavaScript, PHP, MySQL, and web servers.

Uploaded by

Temitope Osadare
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

LIFESKILLS COMPUTER

TRAINING AND
CONSULTING LIMITED
PRESENTS

INTRODUCTION TO WEBSITE DESIGN AND


DEVELOPMENT
LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
What is a WEBSITE?
A website is combination of different contents
(images, texts, videos, animations) which are saved
or hosted on a computer but can be viewed
anywhere in the world through the internet.

A website consists of one or more pages called


web pages that are linked together. The computer
on which the website is stored or hosted is called
webserver.
LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
PURPOSE OF A WEBSITE
A website can be for the purpose of advertising a
product, business or school, selling online forms,
admission process, course registration, lecture
delivery, or just making information available for
the public.

The website can be a shopping cart, social network


(e.g. facebook) or a search engine.
LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
SERVER AND CLIENT
The computer on which the website is stored or hosted is called
webserver. The webserver or host computer can be located in
Nigeria, USA or anywhere in the world. The webserver must be
connected to the internet 24hours! A user visits or accesses a
website using a computer. That computer is called client. This is
illustrated in the Fig. 1 below:
Webserver
(Nigeria)

Client INTERNET

Webserver
(USA)

LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
Web Browser and URL
The user accesses the website on a client computer by typing
the address of the website in a web browser installed on the
client computer.
A web browser is a software or application that connects a user
to a web page online. Examples of web browser include Mozilla
Firefox, Internet Explorer, Opera, etc. The web address of a
website is called URL i.e. Uniform Resource Locator. For
example the URL or web address of Yahoo website is
www.yahoo.com. Once you type www.yahoo.com on the client
computer that is connected to the internet, the internet will
search for the webserver that has the URL.
LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
Types of Website
1. Static Websites – These are websites that display only
information and provides little or no interaction with
users.

2. Dynamic Websites – Dynamic websites usually


contains databases. There is much interaction of the
site with the users. The users can enter data, modify
some information, upload data and even download
resources from the site.
LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
Technologies / Tools Used for
Building a Dynamic Website
A website is developed or built using one or more of the
following softwares:

1. HTML 2. CSS 3. JavaScripts

4. PHP 5. MySQL 6. Web Server

7. Text Editor / IDE


LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
Technologies / Tools Used for Building a
Dynamic Website
HTML
It stands for Hypertext Marked-Up Language. It is not a
total programming language but a set of tags or codes
which are used to design web pages. It gives the
structure of the website. HTML tags are written in a text
editor such as Notepad or an IDE such as Adobe
Dreamweaver and then run in the browser of the Client
computer.

LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
Technologies / Tools Used for Building a
Dynamic Website

CSS
Cascading Style Sheet. It is used to style any HTML
element to change its dimensions, colors, borders,
spacing, and so on and also add animated transitions
and transformations to web pages. It is used for layout
of a website.

LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
Technologies / Tools Used for Building a
Dynamic Website
JavaScript
JavaScript is used for validation of web pages and forms and works on
the client side. It is not the same as Java Programming Language.
JavaScript is a scripting language used in website development.
JavaScript is used to dynamically manipulate CSS elements and validate
web forms.
In other words, it provides a means for dynamic user interaction such as
checking email address validity in input forms, displaying prompts such
as “Enter correct password” or “Username required” and so on
(although it cannot be relied upon for security, which should always be
performed on the web server).
LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
Technologies / Tools Used for Building a
Dynamic Website
PHP
It stands for HyperText Preprocessor. It is a scripting language
designed specifically for creating dynamic web pages especially
website that has databases.

PHP handles connecting to the database and communicating


with it. You tell PHP the name of the database and where it is,
and PHP handles the details. It connects to the database,
passes your instructions to the database, and returns the
database response to you. PHP works on the server side.
LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
Technologies / Tools Used for Building a
Dynamic Website
MySQL
SQL means Structured Query Language which is a
special-purpose programming language designed for
managing data held in a relational database
management system (RDBMS). It is a database software
that is used to create, store and manipulate database in
a web database application. MySQL also works on the
server side.

LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
Technologies / Tools Used for Building a
Dynamic Website
Web Server
The common type of web server is the Apache web
server. The Web server is the software that delivers Web
pages to the world. When you type a URL into your Web
browser, you’re sending a message to the Web server at
that URL, asking it to send you an HTML file. The Web
server responds by sending the requested file. Your
browser reads the HTML file and displays the Web page.

LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
Technologies / Tools Used for Building a
Dynamic Website
Programming Editors and Integrated Development
Environments
In addition to the software for building your website, you need
software to write the programs or codes for the website.
Because PHP programs are just text files, like HTML files are just
text files, you can use your favorite text editor (such as
WordPad or NotePad on Windows) to write PHP programs.
However, there are tools that offer features that make program
writing much easier. These are called programming editors and
integrated development environments (IDEs).
LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
Programming Editors and IDEs

Programming editors and IDEs offer features that can save you
enormous amounts of time during development. Programming
editors offer many features such as colour highlighting of parts
of codes, line numbers, indentation, etc for writing programs. A
good example is PHP Designer.

An IDE is an entire workspace for developing applications. It


includes a programming editor as well as other features such as
debugging, previewing, testing, FTP (File Transfer Protocol), and
back-ups. A common example is Adobe Dreamweaver
LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
Client and Server Side of a Website
Among the technologies or tools used in building a website, only the HTML,
CSS, JavaSripts and VBscripts run on the Client computer while PHP and
MySQL run on the Server. This is illustrated in Figure below:

Client Side INTERNET Server Side

Browser Opera, Mozilla, IE Database


HTML MySQL

CSS Oracle
Programming Language
JavaScripts
PHP
ASP
ASP.net
C#
JSP
Figure 2. Client and Server Sides of a Dynamic Website

LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
IN THE NEXT VIDEO

In the next video, you will start learning:

HTML BASICS

LifeSkills Computer Training and Consulting Limited. Get Skill Get Life

You might also like