Lecture 12 - Internet Applications
Lecture 12 - Internet Applications
Contents
• HTML
• XML
• HTTP
• Dynamically Generated Web Contents
• Common Gateway Interface
HTML
• HTML (HyperText Markup Language) is the most basic building
block of the Web. It defines the meaning and structure of web content.
Other technologies besides HTML are generally used to describe a
web page's appearance/presentation (CSS) or functionality/behavior
(JavaScript).
• “Hypertext” refers to links that connect web pages to one another,
either within a single website or between websites. Links are a
fundamental aspect of the Web. By uploading content to the Internet
and linking it to pages created by other people, you become an active
participant in the World Wide Web.
HTML
• HTML uses "markup" to annotate text, images, and other content for
display in a Web browser. HTML markup includes special "elements"
such as <head>, <title>, <body>, <header>, <footer>, <article>,
<section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>,
<datalist>, <details>, <embed>, <nav>, <search>, <output>,
<progress>, <video>, <ul>, <ol>, <li> and many others.
HTML
• An HTML element is set off from other text in a document by "tags",
which consist of the element name surrounded by "<" and ">".
• The name of an element inside a tag is case-insensitive. That is, it can
be written in uppercase, lowercase, or a mixture.
• For example, the <title> tag can be written as <Title>, <TITLE>, or in
any other way.
• However, the convention and recommended practice is to write tags in
lowercase.
XML
• XML is a software- and hardware-independent tool for storing and
transporting data.
• XML stands for eXtensible Markup Language
• XML is a markup language much like HTML
• XML was designed to store and transport data
• XML was designed to be self-descriptive
• XML is a W3C Recommendation
The Difference Between XML and HTML
• XML and HTML were designed with different goals:
• XML was designed to carry data - with focus on what data
is
• HTML was designed to display data - with focus on how
data looks
• XML tags are not predefined like HTML tags are
XML Does Not Use Predefined Tags
• The XML language has no predefined tags.
• The tags in the example above (like <to> and <from>)
are not defined in any XML standard. These tags are
"invented" by the author of the XML document.
• HTML works with predefined tags like <p>, <h1>,
<table>, etc.
• With XML, the author must define both the tags and the
document structure.
XML is Extensible
• Most XML applications will work as expected even if new
data is added (or removed).
• Imagine an application designed to display the original
version of note.xml (<to> <from> <heading>
<body>).
• Then imagine a newer version of note.xml with added
<date> and <hour> elements, and a removed
<heading>.
HTTP
• HTTP stands for Hyper Text Transfer Protocol
• WWW is about communication between web clients and servers
• Communication between client computers and web servers is done by
sending HTTP Requests and receiving HTTP Responses
• The World Wide Web is about communication between web clients
and web servers.
• Clients are often browsers (Chrome, Edge, Safari), but they can be any
type of program or device.
• Servers are most often computers in the cloud.
HTTP Request / Response
• Communication between clients and servers is done by requests and
responses:
• A client (a browser) sends an HTTP request to the web
• A web server receives the request
• The server runs an application to process the request
• The server returns an HTTP response (output) to the browser
• The client (the browser) receives the response
The HTTP Request Circle
• A typical HTTP request / response circle:
1. The browser requests an HTML page. The server returns an HTML
file.
2. The browser requests a style sheet. The server returns a CSS file.
3. The browser requests a JPG image. The server returns a JPG file.
4. The browser requests JavaScript code. The server returns a JS file
5. The browser requests data. The server returns data (in XML or
JSON).
XHR - XML Http Request
• All browsers have a built-in XMLHttpRequest Object (XHR).
• XHR is a JavaScript object that is used to transfer data between a web browser and a web
server.
• XHR is often used to request and receive data for the purpose of modifying a web page.
• Despite the XML and Http in the name, XHR is used with other protocols than HTTP, and
the data can be of many different types like HTML, CSS, XML, JSON, and plain text.
• The XHR Object is a Web Developers Dream, because you can:
• Update a web page without reloading the page
• Request data from a server - after the page has loaded
• Receive data from a server - after the page has loaded
• Send data to a server - in the background
XHR - XML Http Request
• The XHR Object is the underlying concept of AJAX and JSON:
Dynamically Generated Web Contents
• Dynamic content is web content that adjusts in real time to the user’s
behavior, preferences, and interactions. This can be done by showing
users things relevant to their location or previous visits. Here are some
key benefits of the dynamic content:
• Enhanced Personalization: Content adapts to individual user
preferences.
• Increased Conversion Rates: More targeted user engagement.
• Improved User Experience: Content resonates more effectively with
users.
• Efficient Content Management: Streamlines the creation process.
• Data-Driven Insights: Gathers useful data to refine strategies.
What Is Dynamic Content?
• Dynamic content (aka adaptive content) refers to web content that
changes based on users’ behavior, preferences, and interests.
• It refers to websites as well as e-mail content and is generated at the
moment a user requests a page.
• Dynamic content is personalized and adapts based on the data you
have about the user and on the access time, its goal being to deliver an
engaging and satisfying online experience for the visitor.
• Generally powered by applications and scripts, dynamic content works
in tandem with static content.
What Is Dynamic Content?
• A classical example is the HTML content of a landing page or of an e-
mail that changes to display information that is relevant for the viewer
based on location or previous interactions with the website.
• Another example of dynamically generated content is an e-mail where
the user’s name is retrieved from the database and inserted
automatically via HTML text.
Dynamic Content vs. Static Content
Common Gateway Interface
• The Common Gateway Interface (CGI) is a standard that facilitates
communication between web servers and external databases or
information sources.
• It acts as middleware, allowing web servers to interact with
applications that process data and send back responses.
• The CGI standard was defined by the World Wide Web Consortium
(W3C) and specifies how a program interacts with a Hyper Text
Transfer Protocol
Features of CGI:
• It is a very well-defined and supported standard.
• CGI scripts are generally written in languages such as Perl, C, or shell
scripts. For example, a simple Perl script could be used to process form
data submitted from a web page and generate a dynamic response.
• CGI allows applications to interface with HTML, enabling dynamic
content generation for web pages. For example, a CGI script can be
used to fetch data from a database and generate dynamic HTML content
for display on a web page.
• CGI is the best method to create a counter because it is currently the
quickest
• CGI standard is generally the most compatible with today’s browsers
Example
• Here is an example of a simple CGI script written in Perl that prints
"Hello, CGI World!" as an HTML document:
• The first line of the script indicates the location of the Perl interpreter.
• The second line prints the content type header, followed by a blank line.
• The rest of the script prints the HTML content.