Web programming
CSEB 294
Created by Sufyian <powered by HTML
5.0>
POWERED BY HTML 5.0
CHAPTER 1
INTRODUCTION TO INTERNET
Created by Sufyian <powered by HTML 5.0>
Topics
Introductio Introductio Introductio
n to the n of World n of Web
Internet Wide Web Browsers
Tools and
Introductio Uniform Web
n of Web Resource Programmi
Servers Locator ng
Languages
Created by Sufyian <powered by HTML
5.0>
Expected Learning outcome
Understand a
Understand number of tools
history and and web
concepts related programming
to Internet and languages that
World Wide Web. are used in web
development.
4
Created by Sufyian <powered by HTML 5.0>
Introduction to the Internet
A network is a collection of
computers and devices
connected together, often
wirelessly, via
communications devices and
transmission media
5
Created by Sufyian <powered by HTML 5.0>
Introduction to the Internet
The Internet is a worldwide collection of networks that
connects millions of businesses, government agencies,
educational institutions, and individuals
6
Created by Sufyian <powered by HTML 5.0>
Evolution of the Internet
The Internet originated as ARPANET in September
1969 and had two main goals:
Allow scientists
Function even if
at different
part of the
physical
network were
locations to
disabled or
share
destroyed by a
information and
disaster
work together
7
Created by Sufyian <powered by HTML 5.0>
Evolution of the Internet
1986 NSF
connects
NSFnet to
ARPANET
and
1969 becomes
ARPANET known as 1996
becomes the Internet2
functional Internet is founded
1984 1995 Today
ARPANET NSFNet More than
has more terminates 550
than 1,000 its million
individual network hosts
computers on the connect to
linked as Internet the
hosts and Internet
resumes
status as
research 8
Created by Sufyian <powered by HTML 5.0>
network
Evolution of the Internet
Wireless
Online
ISP (Internet Internet
service
service service
provider
provider) provider
Regional ISPs (OSP) Provides
provide Internet (WISP)
wireless
Has many
access to a Internet access
members-only
specific to computers
features
geographical and mobile
area Popular OSPs devices
National ISPs
include AOL
provide Internet
(America May require a
access in cities
Online) and wireless modem
and towns
MSN (Microsoft
nationwide
Network)
9
Created by Sufyian <powered by HTML 5.0>
Evolution of the Internet
10
Created by Sufyian <powered by HTML 5.0>
Evolution of the Internet
• An IP address is a number that uniquely identifies each
computer or device connected to the Internet
• Form: 32-bit binary number.
• Usually written as four 8-bit numbers, separated by periods.
• A domain name is the text version of an IP address
• Top-level domain (TLD)
• A DNS server translates the domain name into its associated
IP address
11
Created by Sufyian <powered by HTML 5.0>
Evolution of the Internet
• New standard, IPv6, has 128 bits (1998)
• Example: 2001:cdba:0000:0000:0000:0000:3257:9652
• Organizations are assigned groups of IPs for their computers.
• Example: A small organization may be assigned 256 IP
addresses, such as 191.57.126.0 to 191.57.126.255.
12
Created by Sufyian <powered by HTML 5.0>
Evolution of the Internet
Internet
Domain
13
Created by Sufyian <powered by HTML 5.0>
The World Wide Web & Browser
• The World Wide Web, or Web, consists of a worldwide collection of
electronic documents (Web pages)
• A Web site is a collection of related Web pages and associated items
• A Web server is a computer that delivers requested Web pages to
your computer
• Web 2.0 refers to Web sites that provide a means for users to
interact
14
Created by Sufyian <powered by HTML 5.0>
The World Wide Web & Browser
• A Web browser, or browser, allows users to access
Web pages and Web 2.0 programs
Interne
t
Firefox Opera
Explor
er Google
Safari Chrom
e
15
Created by Sufyian <powered by HTML 5.0>
The World Wide Web & Browser
• Mosaic is the FIRST browser - NCSA
(Univ. of Illinois), in early 1993.
First to use a GUI, led to explosion of
Web use initially for X-Windows, under
UNIX, but was ported to other platforms
by late 1993.
• Netscape Navigator was later
developed by Netscape
Employed many of the original Mosaic
authors. Netscape Navigator's code
descendant is Mozilla Firefox
• Web browser mostly requests are for
existing documents, using HyperText
Transfer Protocol (HTTP).
Created by Sufyian <powered by HTML 5.0>
The World Wide Web & Browser
17
Created by Sufyian <powered by HTML 5.0>
The World Wide Web
• A home page is the • Some Web pages are
first page that a Web designed specifically
site displays for microbrowsers
• Web pages provide
links to other related
Web pages
• Surfing the Web
• Downloading is the
process of receiving
information
18
Created by Sufyian <powered by HTML 5.0>
The World Wide Web
• A Web page has a unique address called a URL or Web address
19
Created by Sufyian <powered by HTML 5.0>
Web Server
• Provide responses to browser
requests, either existing
documents or dynamically built
documents.
• Primary function of web server is
to store, process and deliver web
pages to client (browser)
• Example of web server: Apache,
Microsoft Internet Information
Server.
Created by Sufyian <powered by HTML 5.0>
The World Wide Web
• Two types of search tools are search engines and subject directories
Subject
Search
directo
engine
ry
Classifies
Finds
Web pages in
information
an organized
related to a
set of
specific topic
categories
21
Created by Sufyian <powered by HTML 5.0>
The World Wide Web
22
Created by Sufyian <powered by HTML 5.0>
The World Wide Web
A search engine is helpful in locating items such as:
Images Videos Audio News
People
or
Maps Blogs
Busines
ses
23
Created by Sufyian <powered by HTML 5.0>
The World Wide Web
24
Created by Sufyian <powered by HTML 5.0>
Uniform Resource Locator (URL)
Common Internet Protocols
• There are several protocols used commonly on
the Internet to get to a variety of sites which
support them.
• The protocol which supports the World Wide Web
- just one component of the Internet - is http -
hypertext transfer protocol.
Created by Sufyian <powered by HTML 5.0>
Uniform Resource Locator (URL)
Common Internet Protocols
Protocol Type Example Description/Function
file:/// Local file:///c:/sample.java •Loads a local file from PC or from a
File network.
ftp:// File ftp://oak.oakland.edu/SimTel/ •Opens a file transfer session that allows
Transfer user to download and upload (if allowed)
Protocol between local PC and the remote computer.
•Anonymous access may be permitted.
•Some FTP sites will require valid accounts.
http:// Hyper http://www.uncg.edu/~bucknall/ti •The protocol for transfer of hypertext
Text m/ documents written in HTML and JAVA.
Transfer • The primary protocol for the WWW.
Protocol
mailto: Email mailto:
[email protected] •This protocol calls up the browser's email
screen and posts the completed message to
the email address provided.
•The browser needs to be set up properly to
identify the email server and the identity of
the sender.
Created by Sufyian <powered by HTML 5.0>
Uniform Resource Locator (URL)
Common Internet Protocols
Protocol Type Example Description/Function
news: Newsgroups news:comp.infosystems •Provides access to Bitnet, Usenet and
other newsgroup systems.
•User need to know the name of the
newsgroup that they want to access.
•Internet service provider has to allow
access.
•Some newsgroups are not for everyone.
telnet:// Telnet telnet://steffi.uncg.edu/ •Telnet provides a link to a remote
computer.
• In many cases an account to login is
needed.
•In others, user may be allowed to login
as a guest or with a special visitor's ID.
•User needs to know login procedures.
•User also needs to have a telnet
application set up for their browser.
Created by Sufyian <powered by HTML 5.0>
Uniform Resource Locator (URL)
Host Domain Names
• Form of host domain names:
Service/Machin
Location Domain
e
www uncg edu
Example: www.uncg.edu
• The Location name is almost always mnemonic - an
abbreviation of the location name or an acronym for
it.
• A lot of the time the location name is not
abbreviated at all.
Created by Sufyian <powered by HTML 5.0>
Uniform Resource Locator (URL)
The domain can tell us what type of site we
can expect to be visiting.
Common Domain Acronyms
Domain Description
.com Commercial or corporate sites.
.edu Educational institutions.
.gov Government sites.
.mil Military sites.
Sites of associations, organizations,
.org
etc.
.net Network sites.
.fm Frequency Modulation
Created by Sufyian <powered by HTML 5.0>
Uniform Resource Locator (URL)
• Some sites use a geographical approach in their
domains.
• The last two positions in the domain of a WWW
site outside the US often represents the country.
• Universal two-letter country codes are used. For
example: my= Malaysia, sa = Saudi Arabia, uk =
The United Kingdom, sg = Singapore
Created by Sufyian <powered by HTML 5.0>
Uniform Resource Locator (URL)
Paths in URLs
• The tilde (~) generally precedes the name of a
directory assigned to a person.
• In the URL http://metalab.uniten.edu.my/~mia,
for example, the mia part indicates an account
name associated with the author mia.
Created by Sufyian <powered by HTML 5.0>
Tools and Web Programming
Languages
Created by Sufyian <powered by HTML 5.0>
WEBSITE BREAKDOWN
•Site markup: HTML, CSS, and XML organize, style, and house the content of your site.
Scripts and CSS files are embedded into the HTML file, and interact with the HTML
elements to create an interactive site.
•Client-side scripting: This code runs in a web browser and determines what your
customers or clients will see when they land on your website. It gives a site
functionality—anything from drop-down menus to animation.
•Server-side scripting: This code executes on a web server and powers the behind-the-
scenes mechanics of how a website works. It’s builds a site’s architecture and serves as
a go-between with the database.
•Database technology: It stores all the site data that’s requested, retrieved, and edited
via scripts. It helps keep a website running smoothly and requires management and
maintenance as a site evolves.
Created by Sufyian <powered by HTML 5.0>
THE BASICS: MARKUP LANGUAGES AND STYLE SHEETS
Basic languages like HTML and cascading style sheets (CSS) are the building blocks of
most sites—the structure, organization, and the look and feel. HTML5 is the latest
version, with advantages like more cross-platform compatibility and fewer errors. XML
and JavaScript Object Notation (JSON) are data exchange formats.
•HTML (HTML5)
•CSS
•XHTML
•XML
•JSON
Created by Sufyian <powered by HTML 5.0>
CLIENT-SIDE SCRIPTING LANGUAGES &
FRAMEWORKS
Other languages are used specifically for client-side
scripting—namely, JavaScript. These scripts are embedded
in the HTML markup, and transform your website from a
static page to a hard-working, interactive application.
Client-side code runs in the browser—it’s temporarily
downloaded from the server to the browser so it can run
independently of the server. Client-side scripts have a
number of frameworks to support developers and add extra
functionality.
Created by Sufyian <powered by HTML 5.0>
Browser-
based, • JavaScript
• ActionScript
front-end • VBScript
languages • Silverlight (for gaming)
include:
Popular • jQuery
client-side • AngularJS, Angular 2
Aurelia
frameworks
•
• Backbone.js
and •
•
Ember
Knockout.js
libraries •
•
Mercury.js
Meteor.js
include:
Created by Sufyian <powered by HTML 5.0>
To keep pace with these
Popular CSS pre-
more advanced dynamic processors and front-
websites, there are also end frameworks
CSS preprocessors and include:
LESS
front-end frameworks Sass
which make it easier to Bootstrap
style your websites and Foundation
keep pace with the ever Gumby
evolving world of web Material UI
MaterializeCSS
design.
Created by Sufyian <powered by HTML 5.0>
SERVER-SIDE SCRIPTING LANGUAGES &
FRAMEWORKS
All sites are hosted on a powerful computer called a server.
Without getting too technical, server-side code lives on your
server and has direct access to your database. By running
on the server, it serves as go-between architecture,
transferring data to the browser, minimizing the browser’s
workload (and necessary client-side scripting), and making
your site more secure.
Created by Sufyian <powered by HTML 5.0>
Server- • PHP
Side
• C#
• C, C++ languages
• Java language
Scriptin •
•
Scala language
ColdFusion language
g
• Ruby programming language
• Perl & Perl 5
• Python
Langua •
•
JavaScript via Node.js
Erlang
ges:
• SQL, a language for database queries
Popular server-side frameworks and
libraries include
• ASP.NET framework
• Node.js
• The Ruby on Rails framework
• The Django framework (Python)
• Laravel, CakePHP
Created by Sufyian <powered by HTML 5.0>
SOFTWARE TO CREATE
WEBSITE
Dreamwea
Pictaculous
ver
Wamp/Xam
Sketch
pp
Created by Sufyian <powered by HTML 5.0>
