lOMoARcPSD|41333232
Introduction to Web: Server
A web server accepts and fulfills requests from clients for static content (i.e., HTML pages,
files, images, and videos) from a website. Web servers handle HTTP requests and responses
only.
An application server exposes business logic to the clients, which generates dynamic
content. It is a software framework that transforms data to provide the specialized functionality
offered by a business, service, or application. Application servers enhance the interactive parts of
a website that can appear differently depending on the context of the request.
The illustration below highlights the difference in their architecture:
The columns below summarize the key differences between the two types of servers:
Web Server
Deliver static content.
Content is delivered using the HTTP protocol only.
Serves only web-based applications.
No support for multi-threading.
Facilitates web traffic that is not very resource intensive.
Application Server
Delivers dynamic content.
Provides business logic to application programs using several protocols (including
HTTP).
Can serve web and enterprise-based applications.
Uses multi-threading to support multiple requests in parallel.
Facilitates longer running processes that are very resource-intensive.
HTTP:-
The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed,
collaborative, hypermedia information systems. This is the foundation for data communication
for the World Wide Web (i.e. internet) since 1990. HTTP is a generic and stateless protocol
which can be used for other purposes as well using extensions of its request methods, error
codes, and headers.
lOMoARcPSD|41333232
Basically, HTTP is a TCP/IP based communication protocol, that is used to deliver data
(HTML files, image files, query results, etc.) on the World Wide Web. The default port is TCP
80, but other ports can be used as well. It provides a standardized way for computers to
communicate with each other. HTTP specification specifies how clients' request data will be
constructed and sent to the server, and how the servers respond to these requests.
Basic Features
There are three basic features that make HTTP a simple but powerful protocol:
HTTP is connectionless: The HTTP client, i.e., a browser initiates an HTTP request and
after a request is made, the client waits for the response. The server processes the request
and sends a response back after which client disconnect the connection. So client and
server knows about each other during current request and response only. Further requests
are made on new connection like client and server are new to each other.
HTTP is media independent: It means, any type of data can be sent by HTTP as long as
both the client and the server know how to handle the data content. It is required for the
client as well as the server to specify the content type using appropriate MIME-type.
HTTP is stateless: As mentioned above, HTTP is connectionless and it is a direct result
of HTTP being a stateless protocol. The server and client are aware of each other only
during a current request. Afterwards, both of them forget about each other. Due to this
nature of the protocol, neither the client nor the browser can retain information between
different requests across the web pages.
HTTP/1.0 uses a new connection for each request/response exchange, where as HTTP/1.1
connection may be used for one or more request/response exchanges.
Basic Architecture
The following diagram shows a very basic architecture of a web application and depicts where
HTTP sits:
lOMoARcPSD|41333232
The HTTP protocol is a request/response protocol based on the client/server based
architecture where web browsers, robots and search engines, etc. act like HTTP clients, and the
Web server acts as a server.
Client
The HTTP client sends a request to the server in the form of a request method, URI, and
protocol version, followed by a MIME-like message containing request modifiers, client
information, and possible body content over a TCP/IP connection.
Server
The HTTP server responds with a status line, including the message's protocol version
and a success or error code, followed by a MIME-like message containing server information,
entity meta information, and possible entity-body content.
HTML Docuements Structure
HTML used predefined tags and attributes to tells browser how to display content , means in
which formate ,style, font-size , images to display. Html is a case insensitive language. Case
insensitive means their is no difference in upper case and lower case ( capital and small letters)
both treated as same, for r example 8D9 and 8d9 both are same here.
There are generally two types of tags in HTML:
1. Paired Tags: These tags come in pairs. That is they have both opening(< >) and
closing(</ >) tags.
2. Empty Tags: These tags do not require to be closed.
lOMoARcPSD|41333232
Below is an example of (<b>) tag in HTML, which tells the browser to bold the text inside it.
Tags and attributes: Tags are individuals of html structure, we have to open and close any tag
with forwards slash like this <h1> </h1>. Their are some variation with tag some of them are self
closing tag which isn9t required to close and some are emty tag where we can add any attributes
init. Attributes are additional property of html tags which define the property of any html tags.
i.e. width, height, controls, loops , input and autoplay . This attributes also helps us to store
information in meta tags by using name , content, type attributes.
HTML Documents structured mentioned below:
Structure of an HTML Document
An HTML Document is mainly divided into two parts:
HEAD: This contains the information about the HTML document. For Example, Title of
the page, version of HTML, Meta Data etc.
BODY: This contains everything you want to display on the Web Page.
HTML Document Structure
Let us now have a look at the basic structure of HTML. That is the code that is a must for
every webpage to have:
<!DOCTYPE html>
<!-- Defines types of docuements : Html 5.O -->
lOMoARcPSD|41333232
<html lang="en">
<!-- DEfines lanuages of content : English -->
<head>
<!-- Information about website and creator -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Defines the compatiablity of version with browser -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- for make website responsive -->
<meta name="author" content="Mr.X">
<meta name="Linkedin profile" content="[Link]/Mr.X_123" >
<!-- To give information about auther or owner -->
<meta name="description " content="A better place to learn computer
science">
<!-- to explain about website in few words -->
<title>GeeksforGeeks</title>
<!-- Name of website or content to display -->
</head>
<body>
<!-- Main content of website -->
<h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
</body>
</html>
([Link]
Every Webpage must contain this code. Below is the complete explanation of each of the tag
used in the above piece of HTML code:
<!DOCTYPE html>: This tag is used to tells the HTML version. This currently tells that the
version is HTML 5.0
<html> </html> : <html> is a root element of html. It9s a biggest and main element in
complete html language, all the tags , elements and attributes inclosed in it or we can say wrap
init , which is used to structure a web page. <html> tag is parent tag of <head> and <body> tag
, other tags inclosed within <head > and <body>. In <html > tag we use <lang= attributes to
define languages of html page such as <html lang==en=> here en represents english language.
some of them are : es = spansih , zh-Hans = chinese, fr= french and el= greek etc.
<head>: Head tag contains metadata, title, page CSS etc. Data stored in <head> tag is not
displayed to user , it just write for refrence purpose aur as a water mark of owner.
Note: for better understanding refer above code of html.
<tittle> = to store website name or content to be displayed.
<link> = To add/ link css( cascading syle sheet) file.
<meta> = 1. to store data about website, organisation , creator/ owner
2. for responsive website via attributes
3. to tell compatiability of html with browser
<script> = to add javascript file.
lOMoARcPSD|41333232
<body>: Body tag is used to enclose all the data which a web page has from texts to links. All
the content that you see rendered in the browser is contained within this element. Following tags
and elements used in body.
1 . <h1> ,<h2> ,<h3> to <h6>
2. <p>
3. <div> and <span>
4. <b>, <i> and<u>
5. <li>,<ul>and<ol>.
6. <img> , <audio> , <video> and<iframe>
7. <table> <th> , <thead>and<tr>.
8. <form>
9. <label> and <input> others……….
Working with Text and Images with CSS
<!DOCTYPE html>
<html>
<title>Online CSS Editor</title>
<head>
<style>
div{
width:200px;
height:125px;
padding:10px;
background-color:red;
border:1px solid black;
}
#box{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
background-color:yellow;
}
</style>
</head>
<body>
<div>Real Time CSS Editor</div>
<div id="box">Hello, World!</div>
</body>
</html>
Output:-
Real Time CSS Editor
Hello, World!
lOMoARcPSD|41333232
Rounded Images:-
Example:1 Border Radius
<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 8px;
}
</style>
</head>
<body>
<h2>Rounded Image</h2>
<p>Use the border-radius property to create rounded images:</p>
<img src="[Link]" alt="Paris" width="300" height="400">
</body>
</html>
[[Link]
Example:2 [Circle image]
<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>circle Image</h2>
<p>Use the border-radius property to create circled images:</p>
lOMoARcPSD|41333232
<img src="[Link]" alt="Paris" width="300" height="400">
</body>
</html>
Thumbnail Images:-
Example: 3 [Thumbnail Image]
<!DOCTYPE html>
<html>
<head>
<style>
img {
border: 1px solid #ddd;
border-radius: 50px;
padding: 20px;
width: 550px;
}
</style>
</head>
<body>
<h2>Thumbnail Image</h2>
<p>Use the border property to create thumbnail images:</p>
<img src="[Link]" alt="Paris" style="width:150px">
</body>
</html>
Responsive Images:-
Example: 4 [Responsive Image]
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 200%;
height: auto;
}
Downloaded by Rohit Nag ([Link]@[Link])
lOMoARcPSD|41333232
</style>
</head>
<body>
<h2>Responsive Image</h2>
<p>Responsive images will automatically adjust to fit the size of the screen.</p>
<p>Resize the browser window to see the effect:</p>
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="4000" height="600">
</body>
</html>
[[Link]
:-
Example:-
<!DOCTYPE html> Transparent Image
<html>
<head>
<style>
img {
opacity: 1.4;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more
transparent:</p>
<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
</body>
</html>
[[Link]
Downloaded by Rohit Nag ([Link]@[Link])
lOMoARcPSD|41333232
Image Text
Example:-
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 20px;
}
img {
width: 500%;
height: auto;
opacity: 1.9;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topleft">hai</div>
</div>
</body>
</html>
[[Link]
Image Filters:-
Downloaded by Rohit Nag ([Link]@[Link])
lOMoARcPSD|41333232
Example:-
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:white;
}
img {
width: 33%;
height: auto;
float: left;
max-width: 235px;
}
.blur {filter: blur(4px);}
.brightness {filter: brightness(250%);}
.contrast {filter: contrast(180%);}
.grayscale {filter: grayscale(100%);}
.huerotate {filter: hue-rotate(180deg);}
.invert {filter: invert(100%);}
.opacity {filter: opacity(50%);}
.saturate {filter: saturate(7);}
.sepia {filter: sepia(100%);}
.shadow {filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>
<h2>Image Filters</h2>
<p><strong>Note:</strong> The filter property is not supported in Internet Explorer or Edge
12.</p>
<img src="[Link]" alt="Pineapple" width="300" height="300">
<img class="blur" src="[Link]" alt="Pineapple" width="300" height="300">
<img class="brightness" src="[Link]" alt="Pineapple" width="300" height="300">
<img class="contrast" src="[Link]" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="[Link]" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="[Link]" alt="Pineapple" width="300" height="300">
<img class="invert" src="[Link]" alt="Pineapple" width="300" height="300">
<img class="opacity" src="[Link]" alt="Pineapple" width="300" height="300">
<img class="saturate" src="[Link]" alt="Pineapple" width="300" height="300">
<img class="sepia" src="[Link]" alt="Pineapple" width="300" height="300">
<img class="shadow" src="[Link]" alt="Pineapple" width="300" height="300">
Downloaded by Rohit Nag ([Link]@[Link])