WEB PROGRAMMING
Chapter 1
Introduction to Web/Internet Programming
Hayelom Muleta (Ph.D. Candidate)
INTRODUCTION TO INTERNET
It is a world-wide global system of interconnected
computer networks.
A computer network is the interconnection of
many individual computers to exchange message.
Network is a group of two or more computer
connected together.
It uses the standard Internet Protocol TCP/IP.
Every computer in internet is identified by a
unique IP address.
IP Address is a unique set of numbers which
identifies a computer location.
Domain Name server (DNS) is used to give name
to the IP Address so that user can locate a
computer by a name.
CONT..
Advantage of Internet
Information sharing
Communication i.e social networking
Sharing of resource
Disadvantage of Internet
Threat to personal information
Virus attack
Phishing
Cyber crime
Social engineering
TERMINOLOGIES
On-line: you may sometimes hear people talk
about “being on-line”. This is just another
way of saying that they are using the Internet.
World-Wide-Web (WWW): Tim Berners-Lee, a
physicist in Switzerland, invented the World Wide
Web in 1992 as a way to organize and access
information on the Internet.
Web browser: A web browser is a program that
runs on users' computers and allows them to
view and interact with the web pages on the
World Wide Web.
The
most common web browsers are called Internet
Explorer and Google Chrome.
CONT..
Hypertext:
Hypertext is a text document that contains links to
other text document.
It allows a user to move from one web page to
another by using a mouse to click on special
hypertext links.
For example, a user viewing web pages that describe
airplanes might encounter a link to jet engines from one of
those pages. By clicking on that link, the user automatically
jumps to a page that describes jet engines.
Webpage
Webpage is a single document that may contain text,
graphics, and icon.
They are created using HTML/HTML5.
Web site
It
is a group of well-structured and interlinked
webpages.
Uniform Resource Locator (URL)
To visit a Web site, users type the URL, which is the
site's address, into the web browser. An example of a
URL is www.yahoo.com.
A complete URL is generally made up of three
components: the protocol, the site name, and the
absolute path to the document or resource as shown
in the figure below:
Web server
A web server is a computer that stores a web site,
and is responsible for checking requests for viewing
that web site.
Client computers send requests for particular URLs
to the web server, which then finds the appropriate
web page, and sends it back to the client computer.
A web server on the Internet must have a permanent
Internet connection, so that whenever a client
computer requests a URL, the web server can respond
straight away.
Internet Service Provider (ISP)
A company that provides Internet connections to
customers.
Protocol
It is a set of rules that govern the communication.
CONT..
Hypertext Transfer Protocol (HTTP/HTTPS)
It is a communications protocol.
It defines mechanism for communication between
browser and the web server. It is also called
request and response protocol because the
communication between browser and server takes
place in request and response pairs. Simply, it is the
means by which computers on the WWW
communicate.
HTTPS is the secure version of HTTP. It is used on web
sites where sensitive
information such as bank details is exchanged.
Hypertext Markup Language
(HTML)
Itis the language used to write web
pages on the WWW.
World Wide Web Consortium
(W3C)
Itis 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.
Domain Names
REAL LIFE EXAMPLE (DNS)
1. A User opens a web browser and tries to connect to
www.google.com . The operating system not knowing the IP
Address for www.google.com , asks the ISP's DNS Server for this
information.
2. The ISP's DNS Server does not know this information, so it
connects to a Root Server to find out what name server, running
somewhere in the world, know the information about
google.com.
3. The Root Server tells the ISP's DNS Server to contact a particular
name server that knows the information about google.com.
4. The ISP's DNS Server connects to Google's DNS server and asks
for the IP Address for www.google.com.
5. Google's DNS Server responds to the ISP's DNS server with the
appropriate IP Address
6. The ISP's DNS Server tells the User's operating system the IP
Address for google.com.
7. The operating system tells the Web Browser the IP Address for
www.google.com.
8. The web browser connects and starts communication with
www.google.com.
DO’S FOR GOOD WEBSITE
Keep your interface consistent
Design easy-to-use navigation
Change the color of visited links
Make it easy to scan your pages
Take content seriously
Check your website for errors
Label buttons according to what they do
Make things look like they work
Make your website responsive and mobile-friendly
design
Search engine optimization
DON’TS FOR GOOD WEBSITE
Don’t make users wait for content to load
Don’t open internal link in new tabs
Don’t use too many typefaces
Don’t use too many colors on your website
Don’t show automatic pop-ups too early
Don’t use generic photos of people
Don’t play background music or autoplay videos
with music
Don’t use horizontal scroll
STATIC AND DYNAMIC WEBPAGES
Static web pages
are simple and written in the HTML language and
stored in web server.
Whenever server receives a request regarding a web
page, it sends a response along with the requested
web page to the client without performing any
additional processing.
It just locates that page on its hard disk and add HTTP
headers, and reply back an HTTP response.
DYNAMIC WEB PAGES
Provide a solution for the static web pages.
The dynamic web page content can vary
depending on the number of parameters.
The web server calls a program located on the
hard disk which can access a database, perform
transaction procedure, etc.
DIFFERENCE B/N STATIC & DYNAMIC
Static web pages are difficult to alter because it
requires the change to be implemented at each
point manually.
Dynamic pages contain server code and allows
the server to generate unique content each time
the page is loaded with the same source code.
The static web page is simple to construct while
dynamic web pages are complex to construct and
design.
Static web page involves technology such as
HTML, JavaScript, CSS, etc for its construction.
Dynamic web pages are created using CGI
(Common Gateway Interface) and languages like
AJAX, ASP, PERL, PHP, etc server-side scripting
languages.
CONT..
The static web pages display the same content
each time when someone visits it, whereas in
dynamic web pages the page content changes
according to the user.
Basic HTML pages can be loaded quickly by
consuming less time, Conversely, the dynamic
web pages take more time while loading.
A database is used in at the server end in a
dynamic web page. In contrast, there is no
database used in a static web page.
WEB PAGE DESIGN TOOLS
HTML (HyperText Markup Language) is the most
basic building block of the Web.
It defines the meaning and structure of web
content.
HTML uses "markup" to annotate text, images,
and other content for display in a Web browser.
HTML consists of a series of elements, which you
use to enclose, or wrap, different parts of the
content to make it appear a certain way, or act a
certain way.
CSS
CSS stands for Cascading Style Sheets language and
is used to stylize elements written in a markup
language such as HTML.
It separates the content from the visual
representation of the site.
The relation between HTML and CSS is strongly tied
together since HTML is the very foundation of a site
and CSS is all of the aesthetics of an entire website.
CSS describes how elements should be rendered on
screen, on paper, in speech, or on other media.
CSS brings style to your web pages by interacting with
HTML elements using syntax.
Properties are things like font size, color, and margins,
while values are the settings for those properties, and
you can change these by applying changes to the
selector.
JAVASCRIPT
JavaScript is the magic third element. Once
you’ve created your structure (HTML) and your
aesthetic vibe (CSS), JavaScript makes your site or
project dynamic.
JavaScript is a client-side scripting language,
which means the source code is processed by the
client's web browser rather than on the web
server.
It was originally developed by Netscape as a
means to add dynamic and interactive elements
to websites.
While JavaScript is influenced by java, the
syntax is more similar to C and is based on
ECMAScript, a scripting language developed by
Sun Microsystems.
CONT..
JavaScript is a scripting language used to create
and control dynamic website content, i.e.
anything that moves, refreshes, or otherwise
changes on your screen without requiring you to
manually reload a web page. Features like:
animated graphics
photo slideshows
autocomplete text suggestions
interactive forms
SERVER SIDE SCRIPTING (PHP)
PHP Stands for Hypertext Preprocessor.
PHP is a scripting language web developers use to
create dynamic websites.
It is often installed by default on Apache web
servers, alongside MYSQL.
When a website visitor accesses a PHP page, the
web server processes the PHP code, which can
output HTML to the webpage.
PHP scripts can range from simple one-line
commands to complex functions.
PHP code is processed before the HTML is loaded,
users cannot view the PHP code within a
webpage. They can only see the HTML output by
the PHP scripts.
Q&A
I Thank You
