3. Web Essentials
• Internet
- Internet is global system in which millions of computers are
connected together.
• World Wide Web
- WWW is collection of software and corresponding protocols used
to access the resource over the network.
4. Internet Protocol
• File Transfer Protocol(FTP)
- The file transfer protocol transfer sets the rules for transferring
files between computers.
- When user wants to download a file from the server, FTP is used.
- FTP uses two connections between client and server. One
connection is used for actual data transfer and other is used for control
information.
6. • HTTP
- The Hyper Text Transfer Protocol(HTTP) is a request/response
protocol.
- It is a communication protocol used to transfer the information on
local area network and world Wide Web(WWW).
• SNMP
- Simple Netwok Management Protocol(SNMP) is a protocol which
enables network administrators to manage network devices and to
diagnose network problems.
• SMTP
- Simple Mail Transfer Protocol(SMTP) is a simple protocol which is
extensively used for transfer of e-mails to remote servers.
7. • POP3
- Post Office Protocol version 3(POP3) is used by local email clients
(such as Microsoft Outlook Express).
- The POP3 protocol works only at the receivers end and has no works
at the sender's end.
• TCP
- Transmission Control Protocol (TCP) is used for safe delivery of
data, Error detection.
- Connection oriented protocol.
• UDP
- User Datagram Protocol (UDP) is a connectionless protocol without
any error detection facility.
- This protocol is used for simply transmission of data.
8. HTTP Request-Response Message
• HTTP ( Hyper Text Transfer Protocol) take two part, web
browser and web server communication.
• HTTP is communication protocol that it follows request –
response model.
• Client request for web page by giving URL in address bar to
web server.
• Web server gives response to the web browser by returning
required web page.
9. HTTP Request Message Structure
< Start line >
< Header fields >
< Blank line >
<Message Body>
10. HTTP Request Message Structure
Start line:
Start line consists of three parts which is separated by a single space.
i) Request method
ii) Request URI
iii) HTTP version
i) Request method:
• The method defines the CONNECT method which is used
during web browser and server communication.
• It is always written in uppercase letters.
• The primary method in HTTP is GET. Various method used by
HTTP are GET, POST, HEAD, OPTION, PUT, and TRACE
11. HTTP Request Message Structure
ii) Request URI:
• The Uniform Resource Identifier (URI) is a string used to
identify the names or resources in the internet.
• The URI is the combination of URL and URN. URL stands
for Uniform Resource Locator and URN stands for Uniform
Resource Name.
• The web address denotes the URL and specific name of the
place or a person or item denotes the URN.
Example URL: mailto:myself@website.org
iii) HTTP version:
The first HTTP version was HTTP/0.9 but the official version of
HTTP was HTTP/1.1
12. HTTP Request Message Structure
Header fields and Message body
The header fields are in the form of field
name and field value.
HTTP Request message structure
GET /pub/WWW/HTTP/1.1 Start line
Host:www.sga.com
accept:text.html Header fields
connection:keep alive
Blank line
Hello world Message body
13. HTTP Response Message Structure
< Status line >
< Header fields >
< Blank line >
<Message Body>
14. HTTP Response Message Structure
Status line:
Status line consists of three parts which is separated by a single
space.
i) HTTP version
ii) Status code
iii) Reason phrase
HTTP version: It denotes HTTP version such as HTTP/1.1
Status code: Status code is a numeric code indicating the type
of response.
Reason phrase: It is in the text string form and presents the
information about the status code.
15. HTTP Response Message Structure
HTTP Response message structure
HTTP/1.1 200 OK Status line
Host:www.sga.com
accept:text.html Header fields
connection:keep alive
Blank line
Hello world Message body
16. Web Clients
• Many possible web clients:
• Text-only “browser” (lynx)
• Mobile phones
• Robots (software-only clients, e.g., search engine “crawlers”)
• etc.
• We will focus on traditional web browsers
17. Web Browsers
• First graphical browser running on general-purpose platforms:
Mosaic (1993)
19. Web Browsers
• Primary tasks:
• Convert web addresses (URL’s) to HTTP requests
• Communicate with web servers via HTTP
• Render (appropriately display) documents returned by a server
20. HTTP URL’s
• Browser uses authority to connect via TCP
• Request-URI included in start line (/ used for path
if none supplied)
• Fragment identifier not sent to server (used to
scroll browser client area)
http://www.example.org:56789/a/b/c.txt?t=win&s=chess#para5
host (FQDN) port
authority
path query fragment
Request-URI
21. Web Browsers
• Standard features
• Save web page to disk
• Find string in page
• Fill forms automatically (passwords, CC numbers, …)
• Set preferences (language, character set, cache and HTTP parameters)
• Modify display style (e.g., increase font sizes)
• Display raw HTML and HTTP header info (e.g., Last-Modified)
• Choose browser themes (skins)
• View history of web addresses visited
• Bookmark favorite pages for easy return
22. Web Browsers
• Additional functionality:
• Execution of scripts (e.g., drop-down menus)
• Event handling (e.g., mouse clicks)
• GUI for controls (e.g., buttons)
• Secure communication with servers
• Display of non-HTML documents (e.g., PDF) via plug-ins
23. Web Servers
• Basic functionality:
• Receive HTTP request via TCP
• Map Host header to specific virtual host (one of many host names sharing
an IP address)
• Map Request-URI to specific resource associated with the virtual host
• File: Return file in HTTP response
• Program: Run program and return output in HTTP response
• Map type of resource to appropriate MIME type and use to set Content-
Type header in HTTP response
• Log information about the request and response
24. Introduction to HTML
• HTML stands for Hyper-Text Markup Language
• HTML is basically a scripting language for the
creation of web page.
• XHTML stands for eXtensible Hyper-Text Markup
Language
• HTML program should be written between
<html> and </html>
25. XHTML Syntax and Semantics
An XHTML document consists of three parts:
1. DOCTYPE declaration.
2. <head> section
3. <body> section
<!DOCTYPE>
<html>
<head>
<title> ….. </title>
</head>
<body>
……..
</body>
</html>
26. XHTML Syntax and Semantics
Sample.html
<html>
<head>
<title>My WebPage</title>
</head>
<body>
This is my first Web page!!!
</body>
</html>
27. Displaying Header
There are some header tags to display the text as header
<html>
<head>
<title>My WebPage</title>
</head>
<body>
<h1>This is my first Web page!!!<h1>
</body>
</html>
28. Displaying Header
The header tags is denoted by h1,h2 ..and so on up-to h6
<html>
<head>
<title>My WebPage</title>
</head>
<body>
<h1>This is a first header<h1>
<h2>This is a second header<h2>
<h3>This is a third header<h3>
<h4>This is a forth header<h4>
<h5>This is a fifth header<h5>
<h6>This is a sixth header<h6>
</body>
</html>
29. Formatting Text
The following tags are commonly used formatting text
Tag Meaning
<p> This tag is put at the beginning and end
of every paragraph
<br> This tag causes single line break
<pre> This tag is used to preserve white spaces
and lines in the text
<div> This tag is used to make division of
sections in the document
30. Formatting text
<html>
<head>
<title>My WebPage</title>
</head>
<body>
<p> <h1>Once upon a time, there was a king who kept a monkey as a pet.
The monkey served the king by all the possible ways.</h1>
</p>
<div>
It was very hot in those days.So one day, when the king was sleeping,monkey was
fanning the king.Suddenly monkey
noticed a fly on the chest of the king.The monkey tried to swish it away.
</div>
<div> So monkey decided to teach lesson to fly</div>
<pre> <h1>Once upon a time, there was a king who kept a monkey as a pet.
The monkey served the king by all the possible ways.</h1>
</pre>
</body>
</html>
31.
32. Text Alignment
The text can be aligned at left,right and center using <div> tag
<html>
<head>
<title>Font Style Demo</title>
</head>
<body>
<h1>
<div align="center">This line is aligned at center</div>
<div align="left">This line is aligned at left</div>
<div align="right">This line is aligned at right</div>
</h1>
</body>
</html>
33. Setting Font Style
The text can be displayed in boldface, italics and a strike through
<html>
<body>
<h1>
<b>This is a bold text</b> <br/> <br/>
<i>This is in italics</i> <br/> <br/>
<strong>This is strongly emphasized text</strong> <br/><br/>
<strike>This is striked text</strike> <br/> <br/>
<center>This will appear at center</center> <br/> <br/>
</h1>
</body>
</html>
34. Setting Font
The tag <basefont> is used to set font, size, color of text in
webpage
<html>
<head>
<title>My WebPage</title>
</head>
<body>
Kings Engineering College<br/>
<font face="arial" size="10">
Arun is new comer in this group
</body>
</html>
35. Setting Font Color
The tag <basefont> is used to set font, size, color of text in
webpage
<html>
<head>
<title>My WebPage</title>
</head>
<body>
Kings Engineering College<br/>
<font face="arial" size=“10” color=“red”>
Arun is new comer in this group
</body>
</html>
48. HTML5
CANVAS
• The html canvas is the rectangular area on an HTML page.
• The HTML <canvas> elements is introduced in HTML 5.
• It is actually a container for canvas graphics.
• Using <canvas> element one can draw boxes, circles, text and
graphics and images.
49. HTML5
CANVAS
• The <canvas> element in HTML5 is similar to the <img> element.
• This element has two attribute-width and height.these are optional .
• The id attribute is not specific to<canvas>element but it is actually used to
identify elements in global html.
51. HTML5
CANVAS
• The canvas is initially blank. To display something ,a script first
needs to access the rendering context and draw on it.
• The <canvas> element has a method called getcontext(),used to
obtain the rendering context and its drawing function. the
getContext() takes one parameter,the type of context.
• For 2D graphics need to specify the context as”2d”.
52. HTML5
CANVAS
• Then can set the font with the size in pixel and the name
of the font.
• The font size is 40piexel and the type of font is Arial.
• The filltext() is for displaying the text on the canvas along
with x,y position .The text to be displayed on the canvas
is written in double quotes.
53. HTML5 AUDIO VIDEO TAGS
• The audio and video can be played in the HTML document.The
HTML5 supports for <audio> and <video> tags
• The simplest method to play the audio in HTML documents is to
make use of <audio> tags.
• Normally <audio> supports three types of audio files
.mp3,.wav,.ogg.
56. Introduction to CSS
• Cascading Style Sheet is a markup language
used in the web document for presentation
purpose.
• Main intension is separate out the web content
and web presentation.
Features:
Any change in presentation does not affect information.
presentation is persistent
Consistent appearance and look
Precise control over size, color, background and margin
57. Syntax CSS
h1 Selector string
{
font-family:Arial; Declaration block
color:green
}
Property name value
58. Selector Strings
• Simple Selector
• Universal Selector
• Class Selector
• Generic Selector
• ID Selector
59. Selector Strings
• Simple Selector to a single element
property and value applied
• Universal Selector applied to all the
elements
• Class Selector assign different styles
to same element
• Generic Selector particular class
assigned to any tag
• ID Selector assign one style
to same element
60. Simple Selector
<html>
<head>
<title>Simple Selector Form</title>
<style type="text/css">
h1 h2
{ {
font-family:Arial; font-family:Monotype Corsiva;
color:green; color:red; font-size:28pt;
} }
</style>
</head>
<body>
<h1>India is my country</h1> <br/> <br/>
<h2>This is in times new roman</h2>
</body>
</html>
61. Universal Selector
<html>
<head>
<title>Universal Selector Form</title>
<style type="text/css">
*
{
font-family:Arial;
color:green;
}
</style>
</head>
<body>
<h1>India is my country</h1> <br/> <br/>
<h2>This is in times new roman</h2>
</body>
</html>
62. Class Selector
<html>
<head>
<title>Simple Selector Form</title>
<style type="text/css">
h1.bText h1.rText
{ {
font-family:Arial; font-family:Monotype Corsiva;
color:blue; color:red;
font-size:14pt }
}
</style>
</head>
<body>
<h1 class=bText>India is my country</h1> <br/> <br/>
<h1 class=rText>This is in times new roman</h1>
<h3>Welcome</h3>
</body>
</html>
63. Generic Selector
<html>
<head>
<title>Generic Selector Form</title>
<style type="text/css">
.greentext
{
font-family:Arial;
color:green;
}
</style>
</head>
<body>
<h1 class=greentext>India is my country</h1> <br/> <br/>
<h2>This is in times new roman</h2>
</body>
</html>
64. ID Selector
<html>
<head>
<title>ID Selector Form</title>
<style type="text/css">
#cse
{
font-family:Arial;
color:green;
}
</style>
</head>
<body>
<div id="cse">India is my country</div> <br/> <br/>
<h2>This is in times new roman</h2>
</body>
</html>
66. External Style Sheets
<html>
<head>
<title>External Style Sheets</title>
<link rel="stylesheet" type="text/css" href="ex1.css">
</style>
</head>
<body>
<h1>India is my country</h1> <br/> <br/>
<h2>This is in times new roman</h2>
</body>
</html>
74. Text Properties
• Font – family
• Font – length
• Font – variants
• Font – style
• Font – weight
• Font – Shorthands
• Font – Decoration
• Font – Alignment
• Font - <span> and <div> tags
76. CSS3
• Various texts effects mainly used in CSS3
1.Text shadow Effect
2.Text Wrap Effect
3.Gradient Effect
77. Text shadow Effect
• The CSS3 allows to incorporate many advanced text effects in web design. Out
of which the text shadow effect is very commonly used.
• The text-shadow property can be given below:
• Text-shadow:horizontal_shadow vertical_shadow blur_distance color
_of_shadow
Example:
<html>
<head>
<style>
H2
{
Text-shadow:-5px 15px 3px gray;
}
</style>
</head>
<body>
<h2>catch me if you can</h2>
</body>
</html>
78. Text Wrap Effect
• The text in a paragraph gets wrapped on the next line
• This effect can be achieved by breaking the word.
Word-wrap:break-word
80. Gradient Effect
• CSS3 gradient effect allows the developer to display the transition
between two or more colors.
1.Linear Gradients
2.Radial Gradients.
81. Linear Gradients:
• The linear gradient property must have atleast two color stops.These
color stops are required for the smooth transition from one color to
another.
• SYNTAX:
background:linear-gradient(direction,colorstop1,colorstop2,…)
83. Radial Gradient:
• The gradient effect is circular in appearance .it much have atleast two
color stops for having the gradient effect.
• Syntax:
Background;radial-gradient(shape size at position,start-color,….,last-
color)