IP UNIT 1.pptx

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.

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.

Two connections used in FTP processing

• 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.

• 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.

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.

HTTP Request Message Structure
< Start line >
< Header fields >
< Blank line >
<Message Body>

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

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

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

HTTP Response Message Structure
< Status line >
< Header fields >
< Blank line >
<Message Body>

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.

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

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

Web Browsers
• First graphical browser running on general-purpose platforms:
Mosaic (1993)

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

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

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

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

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

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>

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>

XHTML Syntax and Semantics
Sample.html
<html>
<head>
<title>My WebPage</title>
</head>
<body>
This is my first Web page!!!
</body>
</html>

Displaying Header
There are some header tags to display the text as header
<html>
<head>
</head>
<body>
<h1>This is my first Web page!!!<h1>
</body>
</html>

Displaying Header
The header tags is denoted by h1,h2 ..and so on up-to h6
<html>
<head>
</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>

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

Formatting text
<html>
<head>
</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>

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>

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>

Setting Font
The tag <basefont> is used to set font, size, color of text in
webpage
<html>
<head>
</head>
<body>
Kings Engineering College<br/>
<font face="arial" size="10">
Arun is new comer in this group
</body>
</html>

Setting Font Color
The tag <basefont> is used to set font, size, color of text in
webpage
<html>
<head>
</head>
<body>
Kings Engineering College<br/>
<font face="arial" size=“10” color=“red”>
Arun is new comer in this group
</body>
</html>

Background Color
<html>
<head>
<title>Coloring Background</title>
</head>
<body bgcolor="#FFFF00">
<h1>This is my first Web page!!!<h1>
<br></br>
</body>
</html>

Image
<html>
<head>
</head>
<body>
<center>
<h1>Nature<h1>
<img src="C:UserssaravananDesktopWeb
Technology ClassNature.gif"/>
</body>
</html>

Hyperlink
<html>
<head>
</head>
<body>
<h1>To see the Nature picture Click the following Link<h1>
<a href="Image.html">Nature</a>
</body>
</html>

Image as Hyperlink
<html>
<head>
</head>
<body>
<center>
<h1>Nature<h1>
<a href="Settingfont.html">
<img src="C:UserssaravananDesktopWeb
Technology ClassNature.gif"/></a>
</body>
</html>

List
<html>
<head></head>
<body> <h1>Operating Systems
<ul>
<li>DOS</li>
<li>UNIX</li>
<li>Windows 98</li>
<li>Windows XP</li>
<li>Windows Vista</li>
<li>Windows 7</li>
</ul> </h1>
</body> </html>

Ordered List
<html>
<head> </head>
<body>
<h1>Operating Systems</h1>
<ol type="i">
<li>DOS</li>
<li>UNIX</li>
<li>Windows 98</li>
<li>Windows XP</li>
<li>Windows Vista</li>
<li>Windows 7</li>
</ol>
</body></html>

Table
<html>
<head></head>
<body>
<table border="5">
<tr> <td> Name</td>
<td> Age</td>
</tr>
<tr> <td> Sankar</td>
<td> 28</td>
</tr>
<table>
</body>
</html>

Table Attributes
<html>
<head></head>
<body>
<table border="5">
<caption align="top"><b><h1>Student Record</h1></b></caption>
<th> Name</th>
<th> Age</th>
<tr> <td bgcolor="yellow"> Sankar</td>
<td> 25</td>
</tr>
<tr> <td align="center"> Arun</td>
<td> 20</td>
</tr>
</table>
</body>
</html>

Form
<html>
<head></head>
<body>
<form>
<h1>Enter the Name</h1>
<input type="text" size="25" value="">
</form>
</body>
</html>

Text area
<html>
<head>
</head>
<body>
<form>
<textarea cols="40" rows="5" name="myname“>
</textarea>
</form>
</body>
</html>

Check Box
<html>
<head>
</head>
<body>
<form>
<input type="checkbox" name="option1" value="mango"
checked="checked">Mango<br>
<input type="checkbox" name="option2“
value ="apple“>Apple<br>
<input type="checkbox" name="option3"
value="orange">Orange<br>
</form>
</body>
</html>

Text area, Check Box, Radio Button, Button, Menu
<html><head></head><body> <form>
<input type="text" size="25" value="">
<textarea cols="40" rows="5" name="myname“></textarea><center>
<br/><br/><br/>
<input type="checkbox" name="option1" value="mango"
checked="checked">Mango<br>
<input type="checkbox" name="option2" value="apple">Apple<br>
<input type="checkbox" name="option3" value="orange">Orange<br>
<br><br>
<input type="radio" name="option1" value="rose" checked="checked">Rose<br>
<input type="radio" name="option2" value="lotus">Lotus<br>
<input type="radio" name="option3" value="jasmine">Jasmine<br> <br><br>
<input type="Submit" value="Save"> <br><br></center>
<select name="mymenu">
<option value="CSE">cse</option>
<option value="IT">it</option>
<option value="ECE">ece</option>
</select>
</form></body></html>

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.

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.

HTML5
CANVAS-EXAMPLE
<!DOCTYPE html>
<html>
<body>
<canvas id=”myid”width=”300” height=”200 ” style=”border:1px
solid#000000”>
</canvas>
<script>
Var c = document.getElementById(“myid”);
Var ctx=c.getContext(“2d”);
Ctx.font=”40px Arial”;
Ctx.fillText(“Mycanvas!!!”,20,60);
</script>
</body>
</html>

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”.

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.

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.

HTML5 AUDIO TAGS
EXAMPLE:
<html>
<head>
<title></title>
</head>
<body>
<audio controls>
<source src=“song.mp3”type=“audio/mpeg”>
</audio>
</body>
</html>

HTML5 VIDEO TAGS
EXAMPLE:
<html>
<head>
<title></title>
</head>
<body>
<video width=“400” height=“300” controls>
<source src=“wildlife.mp4”type=“video/mp4”>
</video>
</body>
</html>
The <video> tags supports various file formats such as MP4,WebM
and Ogg

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

Syntax CSS
h1 Selector string
{
font-family:Arial; Declaration block
color:green
}
Property name value

Selector Strings
• Simple Selector
• Universal Selector
• Class Selector
• Generic Selector
• ID Selector

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

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>

Universal Selector
<html>
<head>
<title>Universal Selector Form</title>
*
{
font-family:Arial;
color:green;
}
</style>
</head>
<body>
</body>
</html>

Class Selector
<html>
<head>
<title>Simple Selector Form</title>
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>

Generic Selector
<html>
<head>
<title>Generic Selector Form</title>
.greentext
{
font-family:Arial;
color:green;
}
</style>
</head>
<body>
<h1 class=greentext>India is my country</h1> <br/> <br/>
</body>
</html>

ID Selector
<html>
<head>
<title>ID Selector Form</title>
#cse
{
font-family:Arial;
color:green;
}
</style>
</head>
<body>
<div id="cse">India is my country</div> <br/> <br/>
</body>
</html>

Types of CSS
• Embedded Style Sheets
• External Style Sheets

External Style Sheets
<html>
<head>
<title>External Style Sheets</title>
<link rel="stylesheet" type="text/css" href="ex1.css">
</style>
</head>
<body>
</body>
</html>

Border Style
<html>
<head><title>Border Demo</title>
h4.a h4.b
{ {
border-style:none; border-style:dotted;
} }
h4.c h4.d
{ {
border-style:dashed; border-style:double;
} }
</style>
</head>
<body>
<h4 class="a">CSE</h4>
<h4 class="b">IT</h4>
<h4 class="c">ECE</h4>
<h4 class="d">MECH</h4>
</body>
</html>

Border Width
<html>
<head>
<title>Border Width Demo</title>
h4.thick h4.thicker h4.thickest
{ { {
border-style:solid; border-style:solid; border-style:solid;
border-width:3px; border-width:5px; border-width:7px;
} } }
</style>
</head>
<body>
<h4 class="thick">IT</h4>
<h4 class="thicker">CSE</h4>
<h4 class="thickest">ECE</h4>
</body>
</html>

Border Color
<html>
<head>
<title>Border Color Demo</title>
h4.thick h4.thicker h4.thickest
{ { {
border-style:solid; border-style:solid; border-style:solid;
border-width:3px; border-width:5px; border-width:7px;
border-color:red; border-color:green; border-color:blue;
} } }
</style>
</head>
<body>
<h4 class="thick">IT</h4>
<h4 class="thicker">CSE</h4>
<h4 class="thickest">ECE</h4>
</body>
</html>

Border Sides
<html>
<head>
<title>Each side Border</title>
h4.method1 h4.method2
{ {
border-top-style:solid; border-style:solid solid dashed dotted;
border-right-style:solid; border-color:green;
border-bottom-style:dashed; }
border-left-style:dotted;
}
</style>
</head>
<body>
<h4 class="method1">IT</h4>
<h4 class="method2">CSE</h4>
</body>
</html>

Margin
<html>
<head><title>Margin</title>
h4.method1
{
border-style:solid;
margin-top:80px;
margin-bottom:160px;
margin-left:30px;
margin-right:70px;
}
</style>
</head>
<body>
<h4 class="method1">CSE Department</h4>
<pre> Note: Change margin values and check </pre>
</body>
</html>

Text Properties
• Font – family
• Font – length
• Font – variants
• Font – style
• Font – weight
• Font – Shorthands
• Font – Decoration
• Font – Alignment
• Font - <span> and <div> tags

Text Properties
<html><head><title>Text Properties</title>
h1
{
font-family:Arial;
font-size:30px;
font-variant:small-caps;
font-style:italic;
font-weight:bolder;
text-decoration:underline;
text-align:center;
}
.mystyle
{
color:blue;
}
</style></head>
<body>
<h1>cse</h1> <br/> <br/>
<h2 >IT <span class="mystyle">ECE </span>Mech</h2>
</body></html>

CSS3
• Various texts effects mainly used in CSS3
1.Text shadow Effect
2.Text Wrap Effect
3.Gradient Effect

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>

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

Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.wrapdemo
{
Width:130px;
Border:1px solid red;
Word-wrap:break-word;
}</style>
</head>
<body>
<div class=”wrapdemo”>There was once a merchant who had three
daughters,the youngest of whom was so beautiful that everybody called
her beauty</div>
</body.
</html>

Gradient Effect
• CSS3 gradient effect allows the developer to display the transition
between two or more colors.
1.Linear Gradients
2.Radial Gradients.

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,…)

Example:
<!DOCTYPE html>
<html>
<head>
<style>
#gradID
{
Height:100px;
Weight:100px;
Background:linear-gradient(red,yellow);
}
</style>
</head>
<body>
<div id=”gradID”</div>
</body.
</html>

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)

Example:
<!DOCTYPE html>
<html>
<head>
<style>
#gradID
{
Height:100px;
Weight:100px;
Background:radial-gradient(yellow,red);
}
</style>
</head>
<body>
<div id=”gradID”</div>
</body.
</html>

IP UNIT 1.pptx

More Related Content

Similar to IP UNIT 1.pptx

Recently uploaded

IP UNIT 1.pptx