Internet 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

 Visitor-centric, clear purpose

 Progressive disclosure
 Displays quickly
 Browser compatible
 Intuitive navigation(Navigation menus and structure should be intuitive and easy to use )
 Spelling, grammar, writing
 Secure
 Attractive design, easy to read
 No technical problems (broken links, buggy scripts)
 Maintainable (separate content from style)
 Search Engine Accessible
 Well-organized
 Up-to-date
 Mouse over

30 05/08/2024
 Home Work(Read about them)
Most commonly used HTML5 tags:

31 05/08/2024
32 05/08/2024