Download Web technologies Concept and more Study notes Computer science in PDF only on Docsity!
Web technology
The World Wide Web (or "Web") is a hypertext and hypermedia information system built on top of the Internet. Web clients and Web servers communicate via HTTP and exchange documents and information that is formatted with HTML and XML. The Web browser interface has made a world of information available to everyone. Hypermedia and hypertext is nonlinear information, presented to users in a way that lets them jump from one reference to another with the click of a button. This has created a global library of instantly available information.
On the application development side, distributed object computing technologies and Web-based languages such as Java have changed the way that applications are designed and developed. Wireless technologies are making the Web more available to people wherever they are. Bluetooth and wireless PANs (personal area networks) let people in the same vicinity create spontaneous wireless networks to exchange information. This is "edge-of-the- Internet" networking. Collaborative computing, messaging, groupware systems, unified messaging, instant messaging, videoconferencing and related technologies help people stay in touch and work together over long distances.
Web appliances, Webcasting, embedded systems, and voice telephony, along with improved bandwidth and many other new technologies are making the Web more exciting. Refer to the following topics for more information.
Browsers
It seems a little ridiculous to define a Web browser since they are as well known as television or radio, so this section contains mostly references to related topics and an extensive list of Web sites that have information on all the Web browsers available. Here are the basic facts about Web browsers:
Web browsers run on TCP/IP networks. HTTP (Hypertext Transfer Protocol) is the protocol that a Web browser uses to access a Web server. HTML is the traditional document formatting (markup) language used to display information inside Web browsers. Hyper linking is the most unique feature of Web browsers. Users click hyperlinks to move to related Web sites and documents. This is where the term "browser" comes from. Web browsers are considered a "universal front end" for accessing information on almost any server, including Web servers, data base servers, and so on. Web browsers are "containers" that are capable of displaying graphics and video content and running all sorts of applications. Component technologies such as ActiveX and Java were designed to take advantage of the container metaphor of the browser. Plug-ins such as Shockwave give Web browsers additional capabilities
The World Wide Web (WWW) is a collection of servers distributed all over the world that respond to various
clients. The WWW allows you to click on links to text, pictures, music, or video located on these servers and then
to play the selected files on your local client PC, workstation, or terminal, along with more links to related
information. You never need to know where the information is located or to learn any obscure commands to
access it.
The on-line version of this paper is available as a linked set of files or as a large single
file. Downloading this paper as a single file may take some time, but has the advantage
of making it convenient to save or print the entire paper with your Web browser.
WWW Introduction
TO UNDERSTAND THE WWW, IT HELPS IF YOU UNDERSTAND SOME BASIC WEB
CONCEPTS. FUNDAMENTAL TO THIS UNDERSTANDING IS THE CONCEPT OF
CLIENT/SERVER COMPUTING ON A GLOBAL SCALE.
The Language of the Web
Whether you're reading WWW documents or creating your own, it helps if you understand the basic components of the WWW language.
WWW Clients
One powerful feature of the WWW is that the information you publish on your server can be read by many different clients. In this section, we provide a quick introduction to some of the popular WWW clients.
WWW Servers
If you want to make your own information available to WWW clients, you'll want to set up your own server. In this section, we discuss some common WWW server software and give our suggestions for how WWW server information should be designed.
INTRODUCTION
The WWW is a new way of viewing information -- and a rather different one. If, for example, you are viewing
this paper as a WWW document, you will view it with a browser, in which case you can immediately access
hypertext links. If you are reading this on paper, you will see the links indicated in parentheses and in a different
font. Keep in mind that the WWW is constantly evolving. We have tried to pick stable links, but sites reorganize
and sometimes they even move. By the time you read the printed version of this paper, some WWW links may
have changed.
by their IP-address. This address is a 32-bit number that is usually represented by four octets (e.g.,
192.40.254.0). Fortunately, you can usually refer to a computer by its name.
THE LANGUAGE OF THE WEB
In order to use the WWW, you must know something about the language used to communicate in the Web.
There are three main components to this language:
Uniform Resource Locators (URLs)
URLs provide the hypertext links between one document and another. These links can access a variety of protocols (e.g., ftp, gopher, or http) on different machines (or your own machine).
Hypertext Markup Language (HTML)
WWW documents contain a mixture of directives (markup), and text or graphics. The markup directives do such things as make a word appear in bold type. This is similar to the way UNIX users write nroff or troff documents, and MPE users write with Galley, TDP, or Prose. For PC users, this is completely different from WYSIWYG editing. However, a number of tools are now available on the market that hides the actual HTML.
Common Gateway Interfaces (CGI)
Servers use the CGI interface to execute local programs. CGIs provide a gateway between the HTTP server software and the host machine.
UNIFORM RESOURCE LOCATORS (URLS)
Uniform Resource Locators (URLs) specify the access-method (how), the server name (where), and the location
(what) needed for a WWW client to find and access a WWW object. The general form of a URL is
Access-method: //server-name[:port]/location
ACCESS METHODS
The three most popular access methods are
Http:
This is the method provided by WWW servers. It includes hypertext linking, the hypertext markup language, and server scripts.
Gopher:
Gopher was developed at the University of Minnesota as a distributed campus information service. There are gopher servers everywhere -- many of them provide campus-wide information systems.
Gopher information is organized into menus. Because hypertext provides the same services as gopher and more, many sites are moving from gopher-supplied information to WWW-supplied information.
Ftp:
The File Transfer Protocol is one of the oldest and most popular of all Internet services. You can access millions of files, documentation, source code, and other useful objects on anonymous FTP archives. You can use a WWW browser to view and to retrieve information from FTP archives.
SERVER NAME
The server name is an IP host name or an IP address. WWW servers often start with the name "www" as in
www.robelle.com or www.mayfield.hp.com. The port number is usually not needed. If there are many servers
on one machine (e.g., two different WWW servers on the same host), you would use a port number to select
one of them. By default, WWW servers are on port 80. Other protocols have different ports (e.g., the default for
FTP is 21). Most users never need to know about port numbers.
WELCOME PAGE
Most WWW servers provide a welcome or home page. This is the document that you see if you specify a
machine name, but not a document name (see all the examples above under "Server Name"). Good WWW
welcome pages provide a short description of the information the WWW server provides, as well as links to all
the other information available on the server. The welcome page must be explicitly configured for each WWW
server. If you access a WWW server without giving a document name, and receive the error message "no
document found", you should try one of the following common document names: welcome.html, index.html, or
default.html.
LOCATION
The location can be a filename, a directory, a directory and filename, a server-script name, or something specific
to the access-method. Filenames and directory structure often change, so don't be surprised if a URL that
worked a few months ago no longer works now.
NETWORK INFRASTRUCTURE
How you connect to the Internet affects how you view the WWW. If you connect via a modem, you won't be
able to view large WWW pages, images, sounds, or video; if you have a T1 connection (1.544M bits/second), you
will be able to enjoy these features. Some WWW pages assume that you have a fast connection to the Internet.
LOCAL AREA NETWORKS
If your Local Area Network has a gateway to the Internet (there are several different methods to do this), you
should be able to use a graphical browser on your own workstation to cruise the WWW. If you are using a PC
with Microsoft Windows, you'll need to have a Winsock interface installed (in addition to the regular networking
configuration). Macintosh users already have network support via MacTCP. UNIX workstation users should also
have built-in support for networking.
network. This creates an additional advantage to this architecture: greater ease of maintenance. For example, it is possible to replace, repair, upgrade, or even relocate a server while its clients remain both unaware and unaffected by that change. All data is stored on the servers, which generally have far greater security controls than most clients.[ citation needed ]^ Servers can better control access and resources, to guarantee that only those clients with the appropriate permissions may access and change data. Since data storage is centralized, updates to that data are far easier to administer in comparison to a P2P paradigm. In the latter, data updates may need to be distributed and applied to each peer in the network, which is time-consuming as there can be thousands or even millions of peers. Many mature client–server technologies are already available which were designed to ensure security, friendliness of the user interface, and ease of use.[ citation needed ] It functions with multiple different clients of different capabilities.
DISADVANTAGES
As the number of simultaneous client requests to a given server increases, the server can become overloaded.[ citation needed ]^ Contrast that to a P2P network, where its aggregated bandwidth actually increases as nodes are added, since the P2P network's overall bandwidth can be roughly computed as the sum of the bandwidths of every node in that network. The client–server paradigm lacks the robustness of a good P2P network.[ citation needed ]^ Under client–server, should a critical server fail, clients’ requests cannot be fulfilled. In P2P networks, resources are usually distributed among many nodes. Even if one or more nodes depart and abandon a downloading file, for example, the remaining nodes should still have the data needed to complete the download.
BASIC CONCEPTS OF HTML
Before getting into the details of making HTML documents accessible, an understanding of basic HTML
concepts is needed. If you are familiar with the general structure and coding of HTML, you can skip this
page and move onto the first common HTML element to be covered, Making Images Accessible.
TAGS, ATTRIBUTES, AND ELEMENTS
There are several versions of HTML that have evolved since its inception in 1989; HTML 4.0 is the latest
and most prevalent version. HTML code, or mark-up, consists of tags, which are a set of symbols
defined in HTML to have special meaning.
Tags start with a less-than sign (<) followed by a keyword, and conclude with a greater-than sign (>). (These
signs are known as angle brackets.) For example: , , are all tags and respectively
represent images, forms, and tables.
Note: Tags are not case-sensitive, so , , and all have the same meaning.
There are two types of tags:
Start tags always begin the effect, such as
for a paragraph and may take certain attributes which affect the tag's behavior. End tags close the effect and repeat the keyword with a slash in front, such as
.
An attribute is a word separated from the keyword by a space which generally requires a value in
quotes preceded by an equal sign, such as (which calls for a table that is 90 percent
of the width of the screen display.)
When many web developers talk about tags, their preferred term is "element". An HTML element
defines the structures and behaviors of the different parts of a document. Most elements consist of
three parts:
a start tag, the content, and an end tag.
For example:
This is a paragraph
creates a paragraph element.
Empty elements have no content and never have end tags. Some common empty elements are:
(image), (line-break), (horizontal rule).
In this module, you will be taught the proper use of the most common HTML elements along with any
necessary accessibility-related attributes of the start tag.
BASIC STRUCTURE OF AN HTML DOCUMENT
Every HTML document consists of four basic structure elements: html, head, title, and body. Each of
these is explored in detail below:
Html Element o Start tag: - First tag in the document which declares you are writing an HTML element. o End tag: - Last tag in the document. Head Element o Start tag: - Second tag, follows the tag, and starts the head section, which describes the document. o End tag: - Fifth tag, follows the tag and closes the head section. Title Element o Start tag: - Third tag, follows the <head> tag, and contains the title you want for the document. This information will be displayed in the title bar at the top of the browser window. o End tag: - Fourth tag, immediately follows, without any spaces, the title you want for the document and precedes the tag. Body Element
- Start tag: - Sixth tag, follows the tag to denote starting the content of the document.
Step 1 Open up a text editor (SimpleText for Mac or Notepad for Windows)
Step 2 Enter the following:
This is my first web page
Hello world. This is my first web page. There's more to come.
HTML Introduction
My First Heading
My first paragraph.
What is HTML?
HTML is a language for describing web pages.
HTML stands for H yper T ext M arkup L anguage HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages
HTML Tags
HTML markup tags are usually called HTML tags
HTML tags are keywords surrounded by angle brackets like HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags
HTML Documents = Web Pages
HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages
The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:
HTML Element Syntax
An HTML element starts with a start tag / opening tag An HTML element ends with an end tag / closing tag The element content is everything between the start and the end tag Some HTML elements have empty content Empty elements are closed in the start tag Most HTML elements can have attributes
NESTED HTML ELEMENTS
Most HTML elements can be nested (can contain other HTML elements).
HTML documents consist of nested HTML elements.
EMPTY HTML ELEMENTS
HTML elements with no content are called empty elements.
is an empty element without a closing tag (the tag defines a line break).
HTML Attributes
HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value"
HTML Attributes Reference
A complete list of legal attributes for each HTML element is listed in our:
Complete HTML Reference
Below is a list of some attributes that are standard for most HTML elements:
Attribute Value Description
class classname Specifies a classname for an element
id id Specifies a unique id for an element
style style_definition Specifies an inline style for an element
title tooltip_text Specifies extra information about an element (displayed as a tool tip)
Generally an internal style sheet is used or placed within the web page where you want
to apply style sheet.
The styles are placed within the openning and closing tags.
In-line CSS Method:
You have need to use "style" attribute within the relevant HTML tag where you want in-
line css method.
Beyondmart.com
Now, it is cleared from above that how to insert css stylesheet into web page or how css
style is called from page.
GROUPING AND NESTING SELECTORS IN CSS
Sometimes in CSS style sheets there are some elements that have the same style, writing separate block for every element consume space, so in order to get optimized CSS you should consider using grouping and nesting selectors.
These days, lots of programming involving in the website development process, resulting in the large file sizes. Hence the need of code optimization is greater than before. Specifically talking about CSS code optimization, grouping selectors and using nesting selector practice can be helpful in doing so. If different elements have same style you can group the selectors like this
h1,h2,p
{
color:red;
}
Grouping Selectors
In style sheets there are often elements with the same style.
h { color:green; } h { color:green; } p { color:green;
To minimize the code, you can group selectors.
Separate each selector with a comma.
In the example below we have grouped the selectors from the code above:
h1,h2,p { color:green; }
Nesting Selectors
It is possible to apply a style for a selector within a selector.
In the example below, one style is specified for all p elements, and a separate style is specified for p elements nested within the "marked" class:
P { COLOR:BLUE; TEXT-ALIGN:CENTER ; } .MARKED
CSS PSEUDO-CLASSES
CSS pseudo-classes are used to add special effects to some selectors.
Syntax
The syntax of pseudo-classes:
selector:pseudo-class {property:value;}
CSS classes can also be used with pseudo-classes:
NO!Java and JavaScript are two completely different languages in both concept and design!
Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.
What can a JavaScript do?
JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("" + name + "") can write a variable text into an HTML page
JAVASCRIPT CAN REACT TO EVENTS - A JAVASCRIPT CAN BE SET TO EXECUTE WHEN
SOMETHING HAPPENS, LIKE WHEN A PAGE HAS FINISHED LOADING OR WHEN A USER
CLICKS ON AN HTML ELEMENT
JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer JavaScript Comments JavaScript comments can be used to make the code more readable.
JavaScript Comments
Comments can be added to explain the JavaScript, or to make the code more readable. Single line comments start with //. The following example uses single line comments to explain the code:
JavaScript Multi-Line Comments
Multi line comments start with /* and end with */. JavaScript Statements
JavaScript is a sequence of statements to be executed by the browser.
JavaScript is Case Sensitive
Unlike HTML, JavaScript is case sensitive - therefore watch your capitalization closely when you write JavaScript statements, create or call variables, objects and functions.
JavaScript Statements
A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser what to do. This JavaScript statement tells the browser to write "Hello Dolly" to the web page:
document.write("Hello Dolly");
document.write("Hello Dolly");
It is normal to add a semicolon at the end of each executable statement. Most people think this is a good programming practice, and most often you will see this in JavaScript examples on the web. The semicolon is optional (according to the JavaScript standard), and the browser is supposed to interpret the end of the line as the end of the statement. Because of this you will often see examples without the semicolon at the end. Note: Using semicolons makes it possible to write multiple statements on one line.
JavaScript Code
JavaScript code (or just JavaScript) is a sequence of JavaScript statements. Each statement is executed by the browser in the sequence they are written. This example will write a heading and two paragraphs to a web page:
The term Architecture in IT generally refers to Client Server Architecture. A client is defined as a
requester of services and a server is defined as the provider of services. A single machine can be both a
client and a server depending on the software configuration. There are different types of Client-Server
architecture available. Some of them are 2-tier architecture, 3 tier architecture, 4 tier architecture and
n tier architecture.
2-tier architecture
In 2-tier, the application logic is either buried inside the User Interface on the client or within the
database on the server (or both). With two tier client/server architectures (see Two Tier Software
Architectures), the user system interface is usually located in the user's desktop environment and the
database management services are usually in a server that is a more powerful machine that services
many clients. Processing management is split between the user system interface environment and the
database management server environment. The database management server provides stored
procedures and triggers
3-tier architecture
In 3-tier, the application logic (or) process lives in the middle-tier, it is separated from the data and the
user interface. 3-tier systems are more
, robust and flexible. In addition, they can integrate data from multiple sources. In the three tier
architecture, a middle tier was added between the user system interface client environment and the
database management server environment. There are a variety of ways of implementing this middle
tier, such as transaction processing monitors, message servers, or application servers. The middle tier
Client-server architectures are sometimes called two-tier architectures.
A Tier 2 Network is an Internet service provider who engages in the practice of peering with other
networks, but who still purchases IP transit to reach some portion of the Internet.Tier 2 providers are
the most common providers on the Internet as it is much easier to purchase transit from a Tier 1
network than it is to peer with them and then attempt to push into becoming a Tier 1 carrier.
DIFFERENCE BETWEEN CLIENT SIDE & SERVER SIDE PROGRAMMING
1. CLIENT-SIDE
o Client-side programming is run on the user's computer. An example of client-side programming
is Javascript. Javascript can be used to run checks on form values and send alerts to the user's
browser. The problem with client-side scripts is the limit of control and problems with
operating systems and web browsers. Since programming a website involves users with several
options of computer software, it's difficult for programmers to account for any bugs in the code
or compatibility issues with browsers.
SERVER-SIDE
o Server-side scripts are run on the server. It reduces the amount of bugs or compatibility issues
since the code is run on one server using one language and hosting software. Server-side
programming can also be encrypted when users send form variables, protecting users against
any hack attempts. Some examples of server-side programming languages are C#, VB.NET, and
PHP.
Introduction to 2-Tier Architecture
2 - tier architecture is used to describe client/server systems where the client requests resources and
the server responds directly to the request, using its own resources. This means that the server does
not call on another application in order to provide part of the service.
Introduction to 3-Tier Architecture
In 3-tier architecture, there is an intermediary level, meaning the architecture is generally split up
between:
1. A client, i.e. the computer, which requests the resources, equipped with a user interface (usually a web
browser) for presentation purposes
2. The application server (also called middleware ), whose task it is to provide the requested resources,
but by calling on another server
3. The data server, which provides the application server with the data it requires
Introduction to XML
XML was designed to transport and store data. HTML was designed to display data.
