Web Programming

CHAPTER 1:
Overview of Web Programming

1
Outlines
• What is Programming?
• What is a website ?
• How a Web site works
• Types of websites
• What is scripting?
• Types of scripting?
• Intro to HTML and CSS
 Discussion
• What is Programming?
• What is Programming?
1.1 What is Programming?
• Programming is the intricate art of telling a computer what to do.
• It is giving written instructions in a logical manner that the
computer can understand.
• Essentially, you give the computer small steps of instructions, and
the computer goes down the list, doing each one in order.
• Programming allows you to make new software and have the
computer do new things.
• Web site programming is the same except you write applications
or web pages that are used by a web browser.
1.2 What Does Web Programming Mean?
• Web programming refers to the writing, markup and coding involved in
Web development, which includes Web content, Web client and server
scripting and network security.
• Web programming is the practice of writing applications that run on a web
server and can be used by many different people. Web programming
allows you to turn a simple, static HTML page into a dynamic masterpiece.
• The most common languages used for Web programming are XML, HTML,
JavaScript, Perl 5 and PHP.
• Web programming is different from just programming, which requires
interdisciplinary knowledge on the application area, client and server
scripting, and database technology.
• Web programming can be briefly categorized into client and server coding.
• The client side needs programming related to accessing data from users and
providing information.
• It also needs to ensure there are enough plugins to enrich user experience in a
graphic user interface, including security measures.
• To improve user experience and related functionalities on the client side,
JavaScript is usually used.
• It is an excellent client-side platform for designing and implementing Web
applications.
• HTML5 and CSS3 supports most of the client-side functionality provided by other
application frameworks.
• The server side needs programming mostly related to data retrieval, security and
performance.
• Some of the tools used here include ASP, Lotus Notes, PHP, Java and MySQL.
• There are certain tools/platforms that aid in both client- and server-side
programming.
• Some examples of these are Opa and Tersus.
• Most websites nowadays use server-side scripting to display all data the client
needs dynamically on the screen.
• These data are generally gathered from a database stored on a server and sent to
the client (The Browser).
• The client can now see it via other scripting codes such as JavaScript and HTML.
• One of the essential benefits of server-side scripting is that it gives access
to create website content for individual users.
• A dynamic website can highlight or make suggestions for the most relevant
content for the users; this process is based on users’ habits and history.
• One more benefit is that it can store your personal information. For more
illustration, when you use your stored credit card details for future
payments.
• Server-side scripting allows interacting with users, sending notifications &
updates through emails or any other channels. All of these features allow
for far more in-depth interaction with users.
What is a website ?
• Website is a collection of related web pages that may contain text, images,
audio and video.
• A web page is a way to display information on the internet.
• The first page of a website is called home page.
• Each website has specific internet address (URL) that you need to enter in
your browser to access a website.
• Based on the information those pages contain, they are organized into an
information hierarchy– this allows navigation from one page to another.
• The overall collection of those related web pages is a website.
• Website is hosted on one or more servers and can be accessed by visiting its
homepage using a computer network. A website is managed by its owner that
can be an individual, company or an organization.
How Websites Work ?

• Let’s start with the most obvious way of using the internet: You visit a
website like academind.com.
• The moment you enter this address in your browser and you hit
ENTER, a lot of different things happen:
1. The URL gets resolved
2. A Request is sent to the server of the website
3. The response of the server is parsed
4. The page is rendered and displayed
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:
Advanced URLs
• Anchor: jumps to a given section of a page
• http://en.wikipedia.org/wiki/HTML_element#Anchor
• Fetches the HTML_element document, then jumps to the part of the
page labeled Anchor
• Port: for web servers on ports other than the default port 80
• http://portquiz.net:8080/index.php
Advanced URLs
• Query string: a set of parameters passed to a web application
http://www.google.com/search?q=miserable+failure&start=10
• parameter named q is set to value miserable+failure
• Parameter named start is set to value 10
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 Transfer Protocol (HTTP)
• Defines a set of commands understood by a Web server and sent
from a browser
• Some HTTP commands (your browser sends these internally)
• GET resource -- requests data from a specified resource
• POST resource -- submits data to be processed to a specified resource
• PUT resource -- uploads a representation of the specified URL
• DELETE resource -- deletes the specified resource
HTTP status codes
• When a request is made by the browser, a response is sent back by
the server with a
• status code, possibly followed by a Web resource
How Websites Work
Types of websites
• A website can be of two types:
• Static Website
• Dynamic Website
Static Website
• Static website is the basic type of website that is easy to create. You don't need the
knowledge of web programming and database design to create a static website. Its
web pages are coded in HTML.
• The codes are fixed for each page so the information contained in the page does not
change and it looks like a printed page.
• A static web page is straightforward, known as a flat or stationary web page.
• They are exactly loaded as they are on the web server into the client’s browser.
• Written in languages such as (HTML, CSS, JS, Bootstrap …) Hardcoded content cannot
be changed by the user but only from the code itself. On the static page, when the
server receives some request from the browser by HTTP “GET” request, it sends a
response to the client-side containing the document and success status (200 OK)
without doing any additional process.
Advantages of Static Website:

• No programming skills are required to create a static page.

• Inherently publicly cacheable (i.e. a cached copy can be shown to
anyone).
• No particular hosting requirements are necessary.
• Can be viewed directly by a web browser without needing a web
server or application server, for example directly from a CDROM or
USB Drive.
Disadvantages of Static Website:

• Any personalization or interactivity has to run client-side (ie. In the

browser), which is restricting.
• Maintaining large numbers of static pages as files can be impractical
without automated tools
Application areas of Static Website:

• Need of Static web pages arise in the following cases.

• Changes to web content is infrequent
• List of products / services offered is limited Simple e-mail based ordering
system should suffice
• No advanced online ordering facility is required
• Features like order tracking, verifying availability of stock, online credit card
transactions, are not needed
• Web site not required to be connected to back-end system.
Dynamic Website
• Dynamic website is a collection of dynamic web pages whose content changes
dynamically.
• It accesses content from a database or Content Management System (CMS).
• Therefore, when you alter or update the content of the database, the content of the
website is also altered or updated.
• Dynamic website uses client-side scripting or server-side scripting, or both to generate
dynamic content.
• Written in languages such as (AJAX, PHP, ASP.NET …) When the content on a website
changes regularly, such as stock prices or weather forecasts, dynamic web pages are used.
• The dynamic pages’ content is generated dynamically only when needed or allowed to be
generated. It is generated from the database on the server. For example, when displaying
all the posts posted by your friends on Facebook on your timeline.
Application areas of Dynamic Website
• Dynamic web page is required when following necessities arise:
• Need to change main pages more frequently to encourage clients to return
to site.
• Long list of products / services offered that are also subject to up gradation
• Introducing sales promotion schemes from time to time
• Need for more sophisticated ordering system with a wide variety of
functions
• Tracking and offering personalized services to clients.
• Facility to connect Web site to the existing back-end system
What is scripting?
• Before talking about server-side scripting, First, we need to know some main
points before we go deeper. We have to know firstly, what is the scripting?
• Secondly, what is the difference between Server-Side Scripting & Client-Side
Scripting?

• Scripting means all series of commands that can be executed without

compiling (the transformation from Source Code (human-readable) into
machine code).

• Note: All scripting languages are programming languages, but not all
programming languages are scripting languages!
Client Side Scripting
• Client-side scripting generally refers to the class of computer
programs on the web that are executed client-side, by the user's web
browser.
• Client-side scripts are often embedded within an HTML or XHTML
document (hence known as an "embedded script"), but they may also
be contained in a separate file, to which the document (or
documents) that use it make reference (hence known as an "external
script").
• instructions can be followed without further communication with
the server
• By viewing the file that contains the script, users may be able to see
its source code.
 ---cont
• Many web authors learn how to write client-side scripts partly by
examining the source code for other authors' scripts.
• The client-side environment used to run scripts is usually a browser.
• The processing takes place on the end users computer. The source
code is transferred from the web server to the user‘s computer over
the internet and run directly in the browser.
• The scripting language needs to be enabled on the client computer.
• Sometimes if a user is conscious of security risks they may switch the
scripting facility off. When this is the case a message usually pops up
to alert the user when script is attempting to run.
Client Side Scripting example
Server Side Scripting
• Server-side scripting language, which means that the scripts are, executed on the
server, the computer where the Web site is located.
• Server-side scripting is a web server technology in which a user's request is fulfilled
by running a script directly on the web server to generate dynamic web pages.
• It is usually used to provide interactive web sites that interface to databases or
other data stores.
• This is different from client-side scripting where scripts are run by the viewing web
browser.
• The primary advantage to server-side scripting is the ability to highly customize the
response based on the user's requirements, access rights, or queries into data
stores.
• From security point of view, server-side scripts are never visible to the browser as
these scripts are executes on the server and emit HTML corresponding to user's
input to the page.
 ---cont
• In contrast, server-side scripts, written in languages such as PHP,
ASP.NET, Java, ColdFusion, Perl, Ruby, Go, Python, and server-side
JavaScript, are executed by the web server when the user requests a
document.
• They produce output in a format understandable by web browsers
(usually HTML), which is then sent to the user's computer.
• The user cannot see the script's source code (unless the author
publishes the code separately), and may not even be aware that a
script was executed.
• Documents produced by server-side scripts may, in turn, contain
client-side scripts.
 ---cont
• Server-side Web scripting is mostly about connecting Web sites to
back end servers, such as databases. This enables two-way
communication:
• Client to server: Customer-entered information as request.
• Server to client: Web pages can be assembled from back end-server to give
output.
 ---cont
• Server-side scripting is about "programming" the behavior of the server while
client-side scripting is about "programming" the behavior of the browser.
• Normally, when a browser requests an HTML file, the server returns the file.
However, if the file contains a server-side script, the script is executed on the
server before the file is returned to the browser as plain HTML.
• A server script can do:-
• Dynamically edit, change or add any content to a Web page
• Respond to user queries or data submitted from HTML forms
• Access any data or databases and return the result to a browser
• Customize a Web page to make it more useful for individual users
• Provide security since server code cannot be viewed from a browser
 ---cont
• In server side script, since the scripts are executed on the server, the browser that
displays the file does not need to support scripting at all. The followings are server-side
scripts:
• PHP (*.php)
• Active Server Pages (ASP)
• ANSI C scripts
• Java via JavaServer Pages (*.jsp)
• JavaScript using Server-side JavaScript (*.ssjs)
• Lasso (*.lasso) etc
• The main focus here is PHP, which is a server-side scripting language, which can be
embedded in HTML or used as a standalone binary, and could be run with open source
software like WAMP server.
• PHP can dynamically create the HTML code that generates the Web page.
• Web page visitors see the output from scripts, but not the scripts themselves.
Client Side Scripting example in PHP
 Key Differences Between Server-Side Scripting & Client-Side
Scripting

• Server-Side Scripting is used in the back-end, where the website’s source

code is hidden at the client-side. On the other hand, client-side scripting is
used at the front-end, which users can see from their browser.
• When a server-side script is run, it sends a request to the server. Client-side
scripting, on the other hand, does not require any server interaction.
• HTML, CSS, and JavaScript are examples of client-side scripting languages.
Programming languages such as PHP, ASP.net, Ruby, ColdFusion, Python, C#,
Java, C++, and others, on the other hand.
• Server-side scripting helps personalize web pages and make dynamic changes
to websites. On the other side, the client-side script will effectively reduce
the load on the server.
Introduction to Web Servers

• A web Server is a program that automatically downloads pages from the Web
• An application server works with a Web server to handle requests for dynamic content,
such as servlets, from Web applications. A Web server uses a Web server plug-ins to
establish and maintain persistent HTTP and HTTPS connections with an application server.
• The web server software offers access to documents stored on the server.
• Clients can browse the documents in a web browser.
• The documents can be for example static Hypertext Markup Language (HTML) files, image
files or various script files, such as Common Gateway Interface (CGI), Javascript or Perl files.
The communication between clients and server is based on the Hypertext Transfer Protocol
(HTTP)
• We have the Following Web Servers
• Apache 2.WAMP 3.XAMPP
Apache

• Introduced in 1995 and based on the popular NCSA httpd 1.3, Apache
is now the most used web server in the world.
• One of the reasons to its popularity is that it is free to use. Also, since
the source code is free, it is possible to modify the web server
• Being threaded (threaded or process-driven depending on the
operating system, on Unix, Apache uses processes, while threads are
used in Win32 environments) means that Apache maintains a pool of
software threads ready to serve incoming requests.
• When a request enters the web server, it is assigned one of the free
threads, that serves it throughout the requests’ lifetime.
• Apache puts a limit on the number of threads that are allowed to run
simultaneously.
• If that number has been reached, requests are rejected.
• Over 56% of Internet Web servers run Apache or an Apache derivative
• Apache is the most commonly used Web Server on Linux systems.
Web Servers are used to serve Web Pages requested by client
computers. Clients typically request and view Web Pages using Web
Browser applications such as Firefox, Opera, or Mozilla
HTML Overview
Basics of HTML
• Defines the content and structure of information on a page
• Not the same a presentation (appearance in the browser)
• Surrounds text content with opening and closing tags
• Each tag’s name represents an HTML element
• Syntax: <tagname>Content goes here...</tagname>
• Most whitespace is collapsed or ignored in HTML
• We will use HTML5 syntax
Structure of HTML page
• DOCTYPE tells browser to interpret
code as HTML5
• HTML page is save in a file with
extension .html
• The header describes the page,
and the body holds the page’s
content
HTML
• What is Markup language?
• A markup language is a programming language that is used to make text more
interactive and dynamic. It can turn a text into images, tables, links etc.
• What is Hyper Text Markup Language (HTML)?
• It is the standard markup language for creating Web pages.
• It is a language for describing web pages.
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages
• It consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements are represented by tags
• HTML tags label pieces of content such as heading, paragraph, table, and so on
• Browsers do not display the HTML tags, but use them to render the content of the page
What is HTML Tag?
• HTML tags are element names surrounded by angle brackets:
• <tagname> content goes here...</tagname>
• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, but with a forward slash
inserted before the tag name
The structure of an HTML element
HTML Element

• The <!DOCTYPE html> declaration defines this document to be HTML

version 5
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the document
• The <title> element specifies a title for the document
• The <body> element contains the visible page content
• The <h1> element defines a large heading
• The <p> element defines a paragraph
HTML tags! typography!
• <p>- paragraph!

• <h1>…<h6>- headings!

• <a>- link / anchor!

• <ul>,<ol>,<li>- lists!

• <table>,<tr>,<td>- tables!

• <img/>,<video>- images, videos

HTML tags! text formatting
• <b>,<strong>- bold!
• <i>,<em>- italics!
• <sup>,<sub>- super/subscript!
HTML tags! organization!
• <div>- container!

• <section>- section!

• <article>- article!

• <br/>- line break!

• <hr/>- horizontal rule!

 HTML <form> Tag
• An HTML form with two input fields and one submit button:
• <form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>
CSS overview
CSS basics! inline styling!

<p style=“font--‐size:14px;”>…</p>
CSS basics! block styling!

<style>
p{font--‐size:14px;}
</style>
CSS basics! separate file!

p{
font--‐size:14px;
}
 CSS basics!
rule syntax!
selector {
property: value;
property: value;
…
}
 CSS basics!
properties!

Typography! Colors! Positioning!

font--‐size color position
font--‐weight background--‐color width,height
background--‐image margin
font--‐family
line--‐height padding
line--‐height text--‐align border
text--‐align
 CSS basics!
selectors!
HTML element! CSS rule!

<p> P { font--‐size:14px;
}
<p class=“bp”> .bp{color:gray;
}

<p id=“headline”> #headline

{
font--‐size:20px;
}
 CSS basics!
cascading selectors!

HTML element! CSS rule!

<div class=“intro”> .intro h1 {

<h1>…</h1> font--‐size:18px;
</div> }

style h1 inside every element with class=“intro”

 Assignment: Registration Form
• Create the following Page using HTML and CSS
Thank you