Web Technologies

ITSE 2302

Dr. Moamar Elyazgi

 Chapter 1
Basic Concepts

Dr. Moamar Elyazgi

1.1 Introduction
• In 2020 the Internet celebrated its 40th
anniversary, and the World Wide Web
had been in existence for over 25 years.
• The concepts of computer networks and
hypertext on which these technologies
rely are only a little older.
• And yet the speed of development of
these technologies, the speed of uptake
by companies, and the speed of
acceptance by consumers is unlike
3
anything mankind has witnessed.
1.2 Technology
• The practical Application of • According to the National
knowledge especially in a Assistive Technology Research
particular area, a manner of Institute.
accomplishing a task especially • Technology utilizes equipment
using Technical processes, such as computers, mobile phones,
methods, or knowledge. multimedia, software, games and
apps. Email, blogs, texting, instant
• The specialized aspects of a messaging, social networks, twitter
particular field of endeavour and video conferencing are all
are called technology. forms of technology-mediated
4
communication.
1.3 Web Technology
• Web technology is the development of the mechanism that allows two of
more computer devices to communicate over a network. For instance, in a
typical office setting, a number of computers plus additional devices such as
printers may be interconnected via a network, allowing for quick and
convenient transmission of information.
• The processes involved in web technology are complex and diverse.
• Web technology has revolutionized communication methods and has made
operations far more efficient.
• Computers and other network devices need to communicate. A mechanism
must make it possible for a computer to communicate with another computer
on the same network or another network. 5
1.3 Web Technology
• There are some examples of web technologies include:
Mark-up languages including HTML, CSS, XML, CGI and HTTP HTML
stands for Hypertext Markup Language.
HTML is the primary markup language that is used for Web pages. HTML
tells the browser what to display on a page.
CSS stands for cascading style sheets. Cascading style sheets provide the
ability to change the appearance of text on Web pages.
Using CSS, one can also position elements on the page, make certain
elements hidden, or change the appearance of the browser, such as
changing the color of scroll bars in Microsoft Internet Explorer. 6
1.4 Programming Languages and Technologies
• JavaScript is an interpreted scripting language commonly used on
the Internet for creating Web pages that respond to user actions.
• VBScript is an interpreted scripting language that is a subset of
Microsoft Visual Basic. As a result, the structure and syntax are
similar to Visual Basic.
• PHP is an interpreted scripting language that is used as an
alternative to ASP on UNIX-based servers. PHP is commonly used
to access databases and provide server-side form and e-commerce
processing.
7
 1.4 Programming Languages and Technologies
• Visual Basic.NET is the next generation of the Visual Basic
programming language. Visual Basic .NET is a compiled, object-
oriented language that leverages the .NET Framework for
developing powerful ASP.NET Web applications.
• CGI stands for Common Gateway Interface. Similar to ASP and
PHP, CGI is used for server-side processing for Web applications.
• ASP is an abbreviation for Active Server Pages. ASP is a server-side
scripting technology that you can use to create dynamic Web pages.
8
 1.5 Web Servers and Server Products
• A Web server is the computer on which you host your Web site.
• It is connected directly to the Internet and sends hosted Web pages to the client
using the Hypertext Transfer Protocol (HTTP).
• If you host your FrontPage site through an Internet service provider (ISP),
Web presence provider (WPP), or Web host provider (WHP), you may have
access to several different types of Web servers.
• The most common Web servers available are
• 1. Windows-based servers running Microsoft Internet Information Services
(IIS) and
• 2. UNIX-based servers running Apache. 9
1.5 Web Servers and Server Products

10
 1.6 Windows SharePoint Services
• Databases allow you to store information for easy retrieval. On the
Internet, databases are used to store users' logon information,
product information, and customers' orders, among other things.
• Microsoft Access is an easy database application with which to
work and provides powerful database capabilities.
• Microsoft SQL Server is a secure, robust, and scalable database
application that can grow with the needs of e-commerce and
financial Web applications.

11
 1.6 Windows SharePoint Services
• MySQL is an open-source relational database management system
that provides powerful and reliable database management for Web
applications.
• MySQL can run on UNIX, Linux, and Windows based Web
servers.
• Oracle Database is a powerful relational database management
system developed by . Oracle, like SQL Server, is a database
application for large, transaction-based and e-commerce Web
applications.
12
1.7 Hypertext
• Hypertext systems allow for non- • The main use of hypertext is in
sequential or non-linear reading. information retrieval applications.
This is the underlying idea of a
• The ease of linking different pieces
hypertext system.
(fragments) of information is the
• The result is a multidimensional important aspect of hypertext
document that can be read by information retrieval.
following different paths through it.
• The information can be of various
• In this section we will look into the media: it may be fragments of
application of hypertext in textual documents, structured data
computer systems, mainly the from databases, or list of terms and
13
World Wide Web hypertext system. their definitions.
1.7.1 Anchors and Links
• A hypertext document contains links referring to
other parts of the document, or even to whole other
documents.

14
1.7.1 Anchors and Links
• A hypertext
document does not
have to be read
serially; the
fragments of
information can be
accessed directly via
the links contained in
the document. 15
1.7.1 Anchors and Links
• The links embedded in a document
are known as hyperlinks. When
selected, these hyperlinks allow for
the portion of the document linked
to by the hyperlink to be displayed.
• This allows the reader to jump to
another part of the same page,
another page in the same
document, or another document.
• By following a series of
hyperlinks, the reader can follow
their own path through the 16
document.
1.7.2 Chain of Links
• A series of successive jumps
constructs a chained path through a
series of documents.
• There is no limit as to the number
of jumps, therefore the size of the
chain is not constrained.
• There may be more than one link in
a page and the reader is free to
choose any of these links to follow.
17
1.7.2 Chain of Links
• The path a reader takes will
then be different from the path
of another reader.
• Each sequence of jumps forms
a different path to fragments of
the overall information in the
hypertext document.
• Generally, there is no rigid
order to read the information in.
1.7.2 Chain of Links
• There are two different but complementary purposes of chaining
documents via links:

Focusing: each jump along the path, the user can narrow the scope of
1 the search until the fragment containing the topic of their interest is
reached.
Broadening: Multiple outgoing links from a document allow the
user to broaden their search. This is useful when the user does not
2 have a precise idea of what is being searched for, or wishes to
conduct a broad search in a certain domain.
• Travelling through hypertext documents usually poses no technical
19
difficulty.
1.7.3 Hypermedia
• One of the original purposes for • This means that music and videos
hypertext was the storage and can be accessed via hyperlinks.
management of textual documents. • This addition of multimedia to
• As computer and hypertext is known as Hypermedia.
telecommunications technology has • A combination of text, graphics,
improved, the capabilities of video or sound can now easily be
hypertext systems have been interlinked in hypermedia document
extended to include any digitised to offer a rich, often interactive,
media, such as sound and images. environment.

20
1.7.4 Authoring Hypertext
• Authors of hypertext documents
• The process of preparing hypertext
are not only responsible for the
documents or, quite often, of
content of these documents, but
converting a flat (linear) collection
of documents into hypertext, is
must link documents together,
referred to as authoring. create paths through them, and
build references that point to
• Often an initial collection of external documents associated to
documents has to be reorganised by them.
splitting up the original documents
into multiple sub-documents. • Conceptually, related information
is ultimately presented as a single,
• Then links between these new unique collection of hypertext 21
documents must be constructed. documents.
1.8 The Ultimate Hypermedia System: The World
Wide Web (WWW)
1.8.1 Basic Ideas of the Web
• The World Wide Web (Web) is a hypermedia
system. It has largely achieved the goal of
Tim Berners- Lee, its British inventor, of a
universal information space.
• Tim Berners- Lee invented the World Wide
Web in October 1994.
• It connected the world in a way that was not possible before and made it much
easier for people to get information, share and communicate. It allowed people to
share their work and thoughts through social networking sites, blogs and video
22
sharing. The world wide web made it much easier for people to share information.
1.8.1 Basic Ideas of the Web
• Web servers and clients may be • This location mechanism allows the
located at any part of the world and actual implementation of
connected to each other by geography-independent feature of
telecommunication links. the Web.

• If the Web is in some sense a digital • Generally speaking, there is no

library, it is one with no single central authority controlling the
geographical location. Web, although fully qualified
domain names are subject to
• The Uniform Resource Location controlled allocation, and Internet
(URL) format unambiguously Service Providers may be subject to
specifies locations of 'documents' the laws of the countries in which
23
on the Web. they operate.
1.8.2 Fields of Application
• The Web began as a tool to share • For example, chat rooms and
knowledge and has successfully bulletin boards are integral to
evolved into a general interactive discussion of all kinds of
communications mechanism. subjects. Frequently Asked
Questions (FAQs) published on Web
• With the support of transactions and sites, offer answers to users'
synchronous communications, the questions on how to do certain kinds
Web has application in many of tasks.
different fields.
• Education includes a variation of
• A primary use is the dissemination the dissemination of knowledge.
of knowledge, which takes many Open- or distance-learning programs
24
forms. spearhead this aspect of the Web.
1.9 Uniform Resource Locator (URL)

• An URL is needed to locate any resources on the Web. It is an

address format that specifies how and where to find a document.

• Overview of a URL
• Below is additional information about each of the sections of the http URL
for this page.

25
 1.9 Uniform Resource Locator (URL)
http:// or https://
The "http" stands for Hypertext Transfer Protocol. It let's the browser to know which
protocol it is going to use to access the information specified in the domain. An "https"
protocol is short for "Hypertext Transfer Protocol Secure" and indicates that information
transmitted over HTTP is encrypted and secure. After the http or https is the colon ( : )
and two forward slashes ( // ) that separate the protocol from the remainder of the URL.
• www.
• Next, "www" stands for World Wide Web and is used to distinguish the content. This
portion of the URL is not required and many times can be left out. For example,
typing "http://computerhope.com" would still get you to the Computer Hope website.
This portion of the address can also be substituted for an important sub page known as
a subdomain. 26
 1.9 Uniform Resource Locator (URL)
• computerhope.com
• Next, "computerhope.com" is the domain name for the website. The last portion of
the domain is known as the domain suffix, or top-level domain (TLD). It is used to
identify the type or location of the website. For example, ".com" is short for
commercial, ".org" is short for an organization, and ".co.uk" is the United Kingdom.
There are several domain suffixes available. To get a domain, you would register the
name through a domain registrar.
• /jargon/u/
• Next, "jargon" and "u" are the directories where the web page is on the server. In this
example, the web page is two directories deep. To find the file on the server, it would
be in the /public_html/jargon/u directory. With most servers,
27
the public_html directory is the default directory containing the HTML files.
 1.9 Uniform Resource Locator (URL)
• url.htm
• Finally, url.htm is the actual web page on the domain you're viewing. The trailing .htm is the
file extension of the web page that indicates the file is an HTML file. Other common file
extensions on the Internet include .html, .php, .asp, .cgi, .xml, .jpg, and .gif. Each of these
file extensions performs a different function, like all the different types of files on your
computer.

• Where is the URL located?

• A URL is located at the top of the browser window in the address bar or omnibox depending
on your browser window. On desktop computers and laptop, unless your browser is being
displayed in fullscreen the URL is always visible. In most smartphone and tablet browsers,
the address bar containing the URL will disappear as you scroll down and only show
the domain when visible. When the address bar is not visible, scroll up the page. If only the
28
domain is shown, tapping on the address bar shows the full address.
1.10 Hyper Text Markup Language (HTML)

• This language provides the format for specifying simple logical

structure and links in a hypertext document.
• As a markup language, special formatting commands are placed in
the text describing how the final version should appear.
• These formatted documents are interpreted by a Web browser which
uses the HTML code to format the page being displayed.
• Although most professionals use special authoring tools to write
HTML documents and to manage sites, developers of e-commerce
sites and applications need to know the nitty-gritty detail of HTML,
29
and this is what you will study
1.10 Hyper Text Markup Language (HTML)

• HTML has had several versions over the years. "HTML 2.0" was
the first standard HTML specification which was published in
1995.
• HTML 4.01 was a major version of HTML and it was published in
late 1999.
• Though HTML 4.01 version is widely used but currently we are
having HTML 5 version which is an extension to HTML 4.01, and
this version was published in 2012.
• This course will take you through website creation using HTML5. 30
 1.11 Hyper Text Transfer Protocol (HTTP)
• HTTP is a network protocol used to retrieve documents from a variety of machines in a
minimum amount of time.
• It was invented by Tim Berners-Lee to support a project in developing a distributed
hypertext system.
• Distributed hypertext requires the retrieval of documents from many different machines.
• As a request-response protocol, HTTP gives users a way to interact with web resources such
as HTML files by transmitting hypertext messages between clients and servers. HTTP
clients generally use Transmission Control Protocol (TCP) connections to communicate
with servers.

31
1.11 Hyper Text Transfer Protocol (HTTP)
• Therefore, to support browsing, HTTP has the following characteristics:
Connection-less; a connection is established only for the period of transfer,
and the connection need not be maintained after thereafter;
Stateless; the server has no 'history' of client visits (although the
implementation of cookies overcomes this);
Comprehensive addressing; diverse files on any HTTP server world-wide
can be referenced via URLs;
Diverse data; HTTP servers can supply information of every possible data
types; and
32
Rapid; allows request-response cycles of less than 100 milliseconds.
 1.12 The Client-server Computing Model
• When you are surfing the Web, you
are using a Web browser.
• When you go to a website for
documents, the site delivers them
using software called the Web server.
• The browser is considered to be a
client in the relationship with the
server as it is requesting information
services from the server.
• This is just one particular example of
the client server model of computing. 33
 1.12.1 A Definition and some History
• The client-server model has been defined as:
A software partitioning paradigm in which a distributed system is split
between one or more server tasks which accept requests, according to some
protocol, from (distributed) client tasks, asking for information or action.
There may be either one centralized server or several distributed ones. This
model allows clients and servers to be placed independently on nodes in a
network.
Client-server computing is mainly about the client computer possessing its
own computing power.
 The client 'terminals' were little more than a television that could send and 34
receive characters.
 1.12.1 A Definition and some History
When microprocessors became available, it was possible to make the
terminals more powerful so that they could handle some of the processing.
Over time this has meant that mainframes have been replaced by smaller
server machines and terminals have been replaced by more powerful client
workstations.
The client-server model provides a good division of processing power, since
the server primarily provides information to the client, which is responsible for
interpreting and displaying it.
This means that servers do not have to be powerful machines, allowing more
people to become service providers. 35
 1.12.1 A Definition and some History
A more important characteristic is that because the client-server model
provides for significant processing power at the (remote) client end, the
operator of the client system has considerable autonomous power in
contributing to the enterprise of which he or she is a part.
This means that local decisions can be made possibly faster than if they were
made remotely and action taken.
You may hear client-server computing being talked about as a modern
computing 'paradigm'.
In particular, it is the current model for distributed business systems, and fits
nicely into the emerging Web. 36
 1.13 Information and Processing on the Web
• Information is passed from the server to the browser. This information may be in
the form of HTML documents, GIF files, Excel spreadsheets, movies — just about
any digital content.
• Information can also be passed from the browser to the server.
• When you click on a hyperlink you are sending information to the server, and
when you fill in an online form, you are usually sending information to the server.
• In addition to passing information backwards and forwards, some processing can
also be done in the browser.
• For instance, you might have a simple Web page that calculates the overall cost of
a loan once the initial value of the loan, the interest rate and the length of the loan
37
have been entered.
 1.13 Information and Processing on the Web
• But where does the processing take place? Does the server process the information and
generate the result, or is it the client that processes the information? If the client does the
processing, then this is a client-side application; if it is the server, it is a server-side
application.
• In the loan example above, the client has the information (the principle, rate and time). It
could send this information to the server to process the information, generate the result
and send it back to the client.
• Alternatively, the server could send a program to the client that will carry out the
processing. In the latter case, since the client has all the information and the program is
pretty small, it is probably better to run the application on the client side.
• To summarize, where the processing is undertaken largely depends on where the
information is, but it also depends on the processing loads of the machines as well as the
38

size of the program being run.

39