Introduction of Web Programming
Introduction of Web Programming
Introduction
1 05/08/2024
Objectives
After the completion of this chapter, students will
be able to:
Define basic internet terminologies.
Identify types of web page.
List out the different types web page design
tools.
Differentiate client side and sever side scripting
language.
2 05/08/2024
Overview of the internet and web
3 05/08/2024
Introduction
What is the internet?
The Internet is the network of networks around the world.
Connecting large number of machines world wide.
Any two connected computers can be considered as a network.
Decentralized design that there is no centralized body controls how
the Internet functions.
Information travels over the internet through a variety of languages
known as protocols.
Protocol is a defined set of rule for communication on the internet.
4 05/08/2024
Introduction...
www (world wide web) simply Web
A collection of websites
A collection of documents that are interconnected by
hyper-links.
– These documents are accessed by web browsers
and provided by web servers.
It is a way of accessing information over the internet.
5 05/08/2024
Introduction...
A website
A location on the World Wide Web (and Internet) that
contains information about a specific topic.
A website usually contains multiple pages with
different types of information about specific topic.
Website is a collection of resources:
text, pictures, sound and video.
Has a globally unique name
E.g. www.du.edu.et
6 05/08/2024
INTRODUCTION
• Any website contains the following basic components.
A header
A navigation bar
Main content
Side content
A footer
Introduction...
A web page
The basic unit of information storage on the www
Home Page
The first page you see on a website is like the title
page of a book.
This is the home page, or welcome page.
The home page usually provides general information
about the site and directs you to other pages on the
site.
8 05/08/2024
Introduction...
Client
Any computer on the network that requests services from
another computer on the network.
Server
Any computer that receives requests from client computers
processes and sends the output.
Web Development
The process of creating, modifying web pages.
9 05/08/2024
Introduction...
How does the www work
Websites (with unique names) are stored on web
servers
A user sends requests for resources from a server with
the help of the a user agent (browser)
The server sends the requested resource to the browser
The browser renders the resource for the user to view.
10 05/08/2024
Introduction...
11 05/08/2024
Introduction...
Type a URL like ‘www.build-it-yourself.com’ in
the address bar of your Web browser.
Your local ISP (or Internet Service Provider) will
convert this URL to an IP (or Internet Protocol)
address by looking it up on a Domain Name
Server.
Your local ISP will then request a Web page from
the Internet at the appropriate IP address.
12 05/08/2024
Type of webpage
Web site in WWW can be grouped into 2 categories:
Static webpage
Dynamic webpage
Static webpage:
fixed-content, created and stored in the a server.
static Web pages contain the same content each time
the page is loaded.
They change only when a web author manually
updates them.
Standard HTML pages are static Web pages.
13 05/08/2024
Dynamic webpage
Created by a Web server whenever a browser requests
the document.
Contents can vary from one request to another.
The content of dynamic web page will not be the
same every time you look at it.
it will change dynamically depending on certain factors
such as the actions of the person viewing the page.
14 05/08/2024
Dynamic webpage …
Web pages such as PHP, ASP and JSP are server-
side scripting languages used to create dynamic
Web pages.
These pages contain "server-side" code, which
allows the server to generate unique content each
time the page is loaded.
For example, the server may display the current time
and date on the Web page.
15 05/08/2024
Comparing Static & Dynamic Webpage
Static Webpage
Advantages:
Static pages are simple, secure, less prone to
technology errors and breakdown, and easily visible by
search engines.
Disadvantage:
Inflexibility: must be revised whenever information
changes; not useful for reporting information that
changes frequently
16 05/08/2024
Comparing Static & Dynamic Webpage …
Dynamic Webpage
Advantage:
Able to report current information
Disadvantage:
Increase cost: more expensive to develop than static
document
Unless they are carefully optimized, dynamic web
content delivery systems are often much less visible to
search engines than static pages.
17 05/08/2024
Internet terminologies
HTTP
HTTP (HyperText Transfer Protocol)
Client (web browser) and Server (web server) communicate via
the HTTP to exchange request/response messages.
A communications protocol is simply a set of rules that
computers use to communicate over a www.
A stateless protocol
Each request a browser sends to a web server is independent of
any other request
HTTPS is the secure version of HTTP.
HTTPS is used on web sites where sensitive information such
as bank details is exchanged.
18 05/08/2024
Internet terminologies…
How are websites uniquely named?
DNS (Domain Name System)
Resolves a human friendly name (eg www.google.com) to
a machine friendly IP address (eg 64.233.187.99)
For this purpose, DNS servers store a table containing
name-IP (among other things) pairs and do a look-up when
requested
Three letter code: indicating the type of organization
com, edu, gov, org, biz, …
Two letter country codes: indicating the country
et, us, uk, …
19 05/08/2024
Internet terminologies…
URL (Uniform Resource Locator)
The exact address of a resource on the web
protocol://host[:port]/path/file[#section]
eg: http://www.csc.kth.se:8080/dd1335/gruint09/labs/#lab2
Protocol – identifies the type of protocol to be used for
communication
http, ftp, mailto, …
Host – identifies the machine on which the requested
resource is stored
Path – identifies the name and path of the resource on the
server
20 05/08/2024
Internet terminologies…
Web application
Web Applications are web programs or real programs designed
to be used on the web site using a browser over the internet.
Internet applications(Web Applications) are based on remote
servers, which means that the programs that accept and
process information are not run locally on the user's machine.
This is the key difference between Internet and desktop
applications, where all processing is done locally.
Example of web application would be e-commerce web site,
web banking, stock exchange on the web and many others.
Web applications are becoming very popular due to wide
availability of the Internet access.
21 05/08/2024
Internet terminologies…
Hypertext
Hypertext allows a user to move from one web page to
another by using a mouse to click on special hypertext
links.
A Hypertext is a piece of text (or a picture) on a Web page,
which when clicked on will automatically:-
Take you to a different part of the same page
Take you to a different page within the Web site
Take you to a page in a different Web site
Enable you to download a file
Launch an application, video or sound
22 05/08/2024
Internet terminologies…
ISP
ISP stands for Internet Service Provider, a company
whose business is to provide Internet connections to
paying customers.
An ISP is like a phone company that sells access to the
Internet for organizations and individual users.
23 05/08/2024
Internet terminologies…
W3C
The web is governed by the w3c (world wide web
consortium) (www.w3.org)
The World Wide Web Consortium is a group of
experts who meet regularly to develop common
protocols for the evolution of the WWW.
The W3C agrees on standards for HTML, XML and
other web technologies, and for how web browsers
should interpret them.
24 05/08/2024
Internet terminologies…
Downloading
Downloading is transmitting data from a remote
computer to a local computer.
Downloading enables users to save files on their own
computers for later use, which reduces the time spent
online and the corresponding charges.
Uploading
Uploading is the transmission of data from a local
computer to a remote computer
It allows users to easily exchange files over networks.
25 05/08/2024
Web page Design tools
HTML
CSS
Java Script
Ajax (Asynchronous JavaScript and XML)
JQuery
DOM (Document Object Model)
DHTML (Dynamic HTML)
Server-side Programming
26 05/08/2024
Web page Design tools
HTML
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup
language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages
Web authors can use a simple text editor such as
Notepad to write the HTML.
27 05/08/2024
Web page Design tools …
CSS
Cascading Style Sheets (CSS) is a style sheet language
used for describing the look and formatting of a
document written in a markup language.
While most often used to change the style of web
pages and user interfaces written in HTML
Styles define how to display HTML elements
28 05/08/2024
Web page Design tools …
JavaScript
JavaScript is the most popular scripting language on the
internet, and works in all major browsers, such as
Internet Explorer, Firefox, Chrome, Opera, and Safari.
JavaScript was designed to add interactivity to HTML
pages
JavaScript is usually embedded directly into HTML
pages
Enhance dynamics and interactive features of a web page
29 05/08/2024
Characteristics of Good Web Design
30 05/08/2024
Home Work(Read about them)
Most commonly used HTML5 tags:
31 05/08/2024
32 05/08/2024