Scribd
Upload
26 views

WT UNIT-I

Uploaded by

LAKSHMI CHAITANYA V
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
26 views

WT UNIT-I

Uploaded by

LAKSHMI CHAITANYA V
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 143

Full Stack Development-I

HTML:
HYPER TEXT MARKUP LANGUAGE
•Primary scripting language for
developing web pages.
• HTML allows to write instructions
for web pages & web browser
interpret the instructions and render
the web page on the screen.
• HTML documents are written using tags.
Tag is written within angular brackets (< >).
<tag> - opening tag
</tag> - closing tag
Types:
1. Embedded tag – has both opening & closing
tags.
2. Standalone tags – which do not have
corresponding closing tags.
Ex:
1. This is an example for <i>Embedded tag</i>
2. <hr> - inserts horizontal rule.
3. <br>

 HTML tags are Case-insensitive.


 Tags that are not known to the browser are
ignored.
 Tags must be properly nested.
Element: An element Consists of a tag, its
attributes and content.
•Format: <tag> content </tag>

Element
Attributes: Tags may have properties that can be
optionally assigned to change the behavior of
tags…these are called as Attributes.
• Attributes are place within starting tag.
name= “value”

Ex: <hr width=“200” color=“red”>


Basic structure of HTML Program:

<html>
<head>
<title>First Program</title>
</head>
<body>
<b>WELCOME to Full Stack
Development-I </b>
</body>
</html>
HTML Comments:
<!-- comment text here -->
HTML background:
Color: <body bgcolor=“yellow”>
Image: <body background=“mypic.jpg”>
TAG DESCRIPTION

<p> …</p> Starts a new Paragraph


<br> Inserts a line break

<b> … </b> Makes the text bold

<u> … </u> Makes the enclosed text Underlined.

<i> … </i> Makes the text italic

<center>…</ Aligns the enclosed text in center.


center>
<strong> … Bold. Same as <b>
</strong>

<q>…</q> Qutations

<bdo>…</bdo> Bidirectional text


Ex: <bdo dir=“rtl”>SAMPLE</bdo>

<s> …</s> Strike through


<sub>..</sub> - subscript
<sup>…</sup> - superscript
<del> …</del> - deleted text
<big>…</big> - bigger text
<small>…>/small> - smaller text
<pre>…</pre> - preformatted text
(keeps text as it is)
&nbsp; - single space
HEADINGS:
Some web pages contains different section
headings with different size and font.
There are six levels of Headings from h1 to h6.
Ex:
<h1> Heading 1</h1> ….largest

<h6>Heading 6</h6> ……smallest


HTML Links – Hyperlinks:
•HTML links are hyperlinks.
•You can click on a link and jump to another document.
•When you move the mouse over a link, the mouse
arrow will turn into a little hand.

Tag: <a> ……..</a>


attribute: href - indicates the links destination
Ex:
<a href=“https://www.google.com/”> GOOGLE </a>
By default, links will appear as follows in all browsers:
•An unvisited link is underlined and blue
•A visited link is underlined and purple
•An active link is underlined and red
HTML Links - The target Attribute
By default, the linked page will be displayed in the current
browser window. To change this, you must specify another
target for the link.
The target attribute specifies where to open the linked
document.
The target attribute can have one of the following values:
_self - Default. Opens the document in the same window/tab as
it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window

Ex: <a href="https://www.gmail.com/" target="_blank">Visit MY


ACCOUNT</a>
HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag inside
the <a> tag:
Ex:
<a href="default.asp“><img src="smiley.gif" alt="HTML
tutorial“ >
</a>
HTML Images :
The HTML <img> tag is used to embed an image in a
web page.
The <img> tag is empty, it contains attributes only,
and does not have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Ex:
<img src=“sample.jpg" alt=“Better luck next
time" width="500" height="600">
HTML Tables
- To arrange data in rows and cols.
<table> tag defines an HTML table.
<tr> - defines table row.
<th> - defines table header.
<td> - defines table data.

By default, the text in <th> elements are bold and


centered.
By default, the text in <td> elements are regular and
left-aligned.
Apply border for table by using border attribute.
Ex:
<table border=“1”>
<caption>College details</caption>
<tr>
<th>COLLEGE</th>
<th>PLACE</th>
</tr>
<tr>
<td> SREC</td>
<td>Nandyal</td>
</tr>
<tr>
<td>GPREC</td>
<td>Kurnool</td>
</tr>
</table>
Rowspan - indicates the number of rows a
cell spans.
Colspan - indicates the number of
columns a cell spans.
Ex:
<table border=“1”>
<tr>
<th rowspan=2>Name</th>
<th colspan=2>Marks</th>
</tr>
<tr>
<th>WIT</th>
<th> WIT LAB</th>
</tr>
<tr>
<td>Abhi</td><td>80</td><td>75</td>
</tr>
<tr>
<td>Keerthi</td><td>100</td><td>95</td>
</tr>
</table>
Attributes of table tag:
Align
Background
Bgcolor
Border
Bordercolor
Height
width
LISTS
 A List is collection of one or more items.
3 types of lists:
1. unordered list
2. ordered list
3.definition list
The Lists can also be nested.
1. Unordered List:
An Unordered list created by using <ul> tag.
List items are created using <li> tag.
Ex:
<ul>
<li>WIT</li>
<li>DP</li>
<li> LINUX</li>
</ul>
bullet options:
Attribute :type=“disc/circle/square”
<ul type=“square”>
<li>WIT</li>
<li>DP</li>
<li> LINUX</li>
</ul>
1. Ordered List:
items displayed by using numbers
An Ordered list created by using <ol> tag.
List items are created using <li> tag.
Ex:
<ol>
<li>WIT</li>
<li>DP</li>
<li> LINUX</li>
</ol>
<ol> - default number type
<ol type=“A”>
<ol start=“3”>
<ol type=“A” start=“4”>
<ol type=“a>
<ol type=“i”>
<ol type=“I”>
<ol type=“i” start=“2”>
3. Definition lists:
used when list items consist of 2 parts.
: term & description
• created using <dl> tag.
•Term created using - <dt>
•Description - <dd>
Example:
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>

<dt>HTTP</dt>
<dd>Hyper Text Transfer Protocol</dd>

<dt>SMTP</dt>
<dd>Simple Mail Tranfer Protocol</dd>
</dl>
Nested Lists:
<ul>
<li>III-I</li>
<ol>
<li>OOAD
LAB</li>
<li>OS LAB</li>
</ol>
<li>III-II</li>
<ol>
<li>WIT LAB</li>
<li>DWDM
LAB</li>
</ol>

<li> I</li>
<ol>
<li>C LAB</li>
<li>ITW LAB</li>
</ol>
EMOJIS IN HTML:
•Emojis look like images, or icons, but they are not.
•They are letters (characters) from the UTF-8 (Unicode)
character set.
• A web browser must know the character set used in
the page.
<meta charset="UTF-8">

•To let the browser understand that you are displaying


a character, you must start the entity number with &#
and end it with ; (semicolon).
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>My First Emoji</h1>
<p>&#128512;</p>
<p>&#128525;</p>
</body>
</html>
FORMS
An HTML form is used to collect user input. The user
input is most often sent to a server for processing.
<form> ……</form>
•2 optional attributes
• action - specifies target URL, which handles the data.
•method – specifies HTTP method to be used.
•Values are: GET (default) & POST

Data append to the Data not append to


URL. Visible in the URL. Not Visible
address bar in address bar
name attribute: used to refer the form.

Ex:

<form action=“handler.jsp” method=“post” name=“loginform”>


……..
</form>
FORM ELEMENTS:
Most of the control elements are created using <input> tag.
It has an attribute type specifies the type of input.

1. Text filed: used to get single line textual data.


Ex: Name: <input type=“text” name=“name”>

2. Password Filed: same as text field but characters entered


are displayed using dots.
Ex: password: <input type=“password” name=“pwd”>
3. Checkbox:
•It is a toggle switch.
•Have 2 states: Checked or Unchecked.
•Allows to select 1 or more options from set of alternatives.
Ex:
<input type=“checkbox” name=“c1” value=“yes”>CRICKET
<input type=“checkbox” name=“c2” value=“yes”>FOOTBALL
<input type=“checkbox” name=“c1” value=“yes”>TENNIS
<input type=“checkbox” name=“c2” value=“yes”>HOCKEY
4. Radio button:
• used to select anyone among the list of
alternatives.
•2 states: checked
unchecked (default)
Ex:
<input type=“radio” name=“r1”>Male <br>
<input type=“radio” name=“r1”>FeMale
5.Selection list:
• also called as drop down list.
• allows users to choose options from set of
alternatives.
•Selection list created by - <select>
•Items of list -<option>
Ex:
Choose the course:
<select >
<option>C
<option>C++
<option selected>JAVA
</select>
Text Area:
• text can span multiple lines.
•Users enter a large amount of data.
Text area created by using ….<textarea>
Ex:
Comment: <br>
<textarea rows=“4” cols=“20”>
Enter comments here
</textarea>
File Upload:
-used to select one or more files to be sent to
server.

Select a File:
<input type=“file” name=“f1”><br>
<input type=“submit” value=“upload”>
Button:
-Buttons can be created using <input> tag using
type attribute set to “button”.
-Ex:
-<input type=“button” value=“LOGOUT”>
-Or

-<button> LOGOUT</button>
Action Buttons:
-2 types of buttons used in all forms: submit
reset
•Submit: is used to send information to the
server script whose URL is specified the action
attribute of form tag.
<input type=“submit” value=“SEND”>
•Reset :when clicked form fields are assigned to
their default values.

•<input type=“reset” value=“Restore defaults”>

•<input type=“reset” value=“Restore defaults”


onclick=“return confirm(‘Do you really want to
reset’)”>
FRAMES
•HTML Allows us to divide webpage
into several blocks called FRAMES.
• Displays multiple HTML documents
in one browser window.
• The Layout of HTML document is
specified using the <frameset>
Element.
• <frameset> contains <frame> elements each
of which creates a frame.
•Ex:
<frameset cols=“40%,60%”>
<frame name=“left” src=“left.html”>
<frame name=“right” src=“right.html”>
</frameset>
Frame Element:
-Specifies the HTML document to be loaded in each
frame.
Attributes:
• name - name of frame
• src - location of web page to be loaded
•noresize - frame is not resizable
•Scrolling - scroll info
values: auto - scrollbar added when necessary.
yes - always scrollbar added
No - no scrollbars provided
• frameborder – border for the frame.
• 0 - frame will not have any border.
• 1 - border will be drawn.

Layout:
The Orientation and relative size of frames
specified using rows and cols attributes of
frame element.
cols - used to create frames vertically.
rows - used to create frames
horizontally.
Main.html
<frameset rows=“40%,60%”>
<frame name=“top” src=“top.html”>

<frameset cols=“40%,60%”>
<frame name=“left” src=“left.html”>
<frame name=“right” src=“right.html”>
</frameset>

</frameset>
Target Attribute:
-The value of target attribute refers to the frame where the
document is to be loaded.

-Ex: <html> TOP.HTML

-<head>
- <title>top frame program</title>
-</head>
-<body bgcolor="blue">
-<center><h1>SANTHIRAM ENGINEERING COLLEGE
</H1></center>
-<marquee>Welcomes U to Dept of CSE......</marquee>
-</body>
-</html>
<html>
Left.html
<head>
<title>left frame</title>
</head>
<body>
<a href="http://www.google.com" target="right">
GOOGLE</a> <br>
<br>
<a href="http://www.gmail.com" target="right">GMAIL</a>
</body>
</html>
<html>
RIGHT.HTML
<head>
<title>right frame</title>
</head>
<body>
<br>
<br>
<center><h2 style="color:red"> WELCOME TO
SREC </h2></center>
</body>
</html>
Inline frames or iframes or
Floating frames:
• Inline frames allows us to insert a frame even
with in a block of text.
•May contain other web pages, images.
•Iframes are created by using <iframe> tag.
•If not supported by browser …
than…
<iframe>
Your Browser not supports this ifrmaes
</iframe>
Ex:
<iframe src=“sample.html” width=“100”
height=“200”>
Try in another browser
</iframe>

<iframe src=“aa.png”>
Try in another browser
</iframe>
CSS
(CASCADING STYLE SHEET)
• to improve and change the appearance of
web pages.
•If we write style information in web
pages…….complexity increases.
 A Style sheet is a document that contain style
information about one or more documents.

 It enables to control rendering of styles such as


font, color, typeface, size,spacing…etc.

A style sheet is composed of a set of style rules


written in specified format.

This instructs browser how to present document


on the screen.
CSS is a Style sheet Language that specifies how to
incorporate style information in a style sheet.

Advantages:
• easy to develop
• written once and used for multiple documents.

Document
Content Style
Types:

1. External Style sheet


2. Embedded Style sheet
3. Imported Style sheet
4. Inline Style sheet
1. External Style sheet:

 Style information is written in separate file and is


referred from HTML document.
 It is useful when the same style is applied on
different documents.

The external style sheet specified by using <link>


tag.
Ex:
<ink rel=“stylesheet” type=“text/css”
href=“mystyle.css” />

External stylesheets---------3 types.


1. persistent
2. alternate
3. preferred
i) rel – specifies the type of stylesheet used.
ii) href - stylesheet name

Write the <link> tag in head section


Ex:
Example1.html

<html>
<head>
<title>right frame</title>
<link rel="stylesheet" type="text/css” href="mystyle.css"/>
</head>
<body>
<h1> WEB & INTERNET TECHNOLOGIES</h1>
</body>
</html>
body { mystyle.css

background-color: red;
}

h1 {
color: navy;
margin-left: 20px;
}
color:red;
text-align:center;
text-decoration:underline;
text-transform:lowercase;
text-indent:50px;
font-style:oblique;
font-size:30px;
margin-top:100px;
2. Embedded Style Sheet:

 In this Style information is placed under the


<style> tag in the head section of HTML page.

Ex:
<style>
p{
color:green;
}
</style>
Example:
<html>
<head>
<title>Example2</title>
<style>
p
{ color:green;}
</style>
</head>
<body>
<p>SREC</p>
</body>
</html>
3. Imported Style sheet:
 importing a style sheet is to use @import statement.
It allows importing a style sheet from another style
sheet.
Import statement should be written with in <style>
tags in HTML Document.
Ex: <style>
@import url(“style1.css”);
</style>
4. Inline Style sheets:

In this type style information is incorporated


directly into HTML tags.
 This is least flexible styling method.
 to modify…..work through entire document.

Ex:
< p style=“color:red”> SREC, Nandyal</p>
To resolve conflicts…….

Inline Internal External Imported Browser’s


Style Style style Style Default Style

Highest importance lowest importance


Anatomy of a Style Rule:

A Style rule has basically 2 parts:


selector and declaration.

body { background-color:red; }

selelctor Declaration

Specifies which HTML elements Specifies what the effect will be.
are affected by this style rule. Property:value ;
Selectors

Selectors determine on which rules are to be applied.


2 Types
1. Simple Selector: Selector may simply be the name of
the element.
2. Complex Selector: consists o Contextual pattern.

 Contains 1or more simple selectors separated


by combinators such as > , +,whitespace.
1. Grouping:
Selectors having common declarations are grouped
into a comma separated list.
Ex:
h1 { color:red;}
h2 {color:red; }
h3 {color:red; }

Equivalent to …..

h1,h2,h3 { color:red;}
2. Type Selector:

 It is a simple selector which is the name of a


element and it matches every single element of the
document.

Ex: p { color:green ;}

3. Universal Selectors:
CSS has special selector * , matches every single
element in the document.
Ex:
* {color:red; }
4. Descendant Selectors:
 also called contextual selectors.
It Selects only those elements that are descendants of a
specified element.
 These consists of more than 1 simple selector separated
by white space.
Ex: p b {color:blue;}
p i b {color:red;}
5. Child Selectors:

 Child selectors select elements that are immediate


children of a specified element.
 The combinator used here is >

Ex:
<p>This <b> is</b> a <i> <b>Paragraph </b></i> </p>

p > b { color:red; }
……….selects only first <b> element.
but descendent selector matches both……….
Ex:

p > i > b {color:blue;}

selects <b> element whose parent is <i>element whose


parent is inturn <p> element.
Pseudo Classes and Elements:

• These are used to add style to elements not accessible by


traditional selectors.
Ex: to refer first letter of line…..?????

Format:
selector:pseudo class{declaration }
:first-child - selects all elements that are the
children of ant element.
:last-child
:only-child

Ex:
<ul>
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
</ul>

li:first-child {color:red;}
Links:
we can apply styles to links.
<a> - anchor tag

:link
:visited
:hover
:active
:focus
Ex:

a:hover { color:red;}
a:focus { color:yellow;}

<a href=“https://www.google.com”>
GOOGLE</a>
Pseudo Elements:
:first-line
:first-letter

Ex:
P:first-line{text-decoration:underline;}
P:first-letter{font-sixe:200%;float:left;}
Background image:

body {
background-image: url(“aa.png");
}
XHTML
XHTML stands for Extensible Hypertext Mark-up
Language .
 XHTML is almost identical to HTML
XHTML is stricter than HTML
 XHTML is HTML defined as an XML application
XHTML is supported by all major browsers
The XHTML 1.0 is the first document type in the
XHTML family.
XHTML combines strength of HTML and XML.

What is XML?

XML stands for EXtensible Markup Language.

 XML is a markup language much like HTML and it

was designed to describe data.


 XML tags are not predefined. You must define your
own tags according to your needs.
Difference between HTML and XML:
XML was designed to carry data - with focus on
what data is
HTML was designed to display data - with focus
on how data looks
XML tags are not predefined like HTML tags are
Ex:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="test.css"?>
<friendlist>
<friend>
<name>Sharmila</name>
</friend>
<friend>
<name>Laxmi</name>
</friend>
<friend>
<name>Madhu</name>
</friend>
</friendlist>
name
{
background-color:blue;font-size:50px;}
friend
{color:red;}
DOCTYPE Declaration
All XHTML documents must have a DOCTYPE
declaration at the start.
 There are three types of DOCTYPE declarations, which
are discussed in detail in XHTML Doctypes chapter.

Here is an example of using DOCTYPE


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Case Sensitivity
XHTML is case sensitive markup language.
 All the XHTML tags and attributes need to be
written in lower case only.

<!-- This is invalid in XHTML -->


<A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>

<!-- Correct XHTML way of writing this is as follows -->


<a href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</a>
Closing the Tags
Each and every XHTML tag should have an equivalent closing
tag, even empty elements should also have closing tags.

<!-- This is valid in XHTML -->


<p>This paragraph is not written according to XHTML
syntax.</p>

<!-- This is also valid now -->


<img src="/images/xhtml.gif" />
Attribute Quotes
All the values of XHTML attributes must be quoted.
Otherwise, your XHTML document is assumed as an invalid
document. Here is the example showing syntax −

<!-- This is invalid in XHTML -->


<img src="/images/xhtml.gif" width=250 height=50 />

<!-- Correct XHTML way of writing this is as


follows -->
<img src="/images/xhtml.gif" width="250" height="50"
/>
Attribute Minimization
XHTML does not allow attribute minimization. It means
you need to explicitly state the attribute and its value

<!-- This is invalid in XHTML -->


<option selected>

<!-- Correct XHTML way of writing this is as


follows -->
<option selected="selected">
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">

<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">


<head>
<title>Every document must have a title</title>
</head>
<body> ...your content goes here... </body>
</html>
The XHTML standard defines three Document Type
Definitions (DTDs).
The most commonly used and easy one is the XHTML
Transitional document.

XHTML 1.0 document type definitions correspond to three


DTDs −
 Strict
 Transitional
 Frameset
XHTML 1.0 Strict
If you are planning to use Cascading Style Sheet (CSS)
strictly and avoiding to write most of the XHTML attributes,
then it is recommended to use this DTD.
 A document conforming to this DTD is of the best quality.
If you want to use XHTML 1.0 Strict DTD then you need to
include the following line at the top of your XHTML
document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
If you are planning to use many XHTML attributes as
well as few Cascading Style Sheet properties, then you
should adopt this DTD and you should write your XHTML
document accordingly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
XHTML 1.0 Frameset
You can use this when you want to use HTML Frames to
partition the browser window into two or more frames.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">
Handling HTTP Request and Response
HTTP:
 means Hyper Text Transfer Protocol.
It is an Application layer protocol in the TCP/IP
Protocol suite.
It is developed to transfer files and data.
The first version, HTTP/1.0 was released in Feb-
1996.
Specification of current version HTTP/1.1 was
released in June 1999.
 HTTP protocol is basically a request response
protocol between clients and server.
It is simple, as well as powerful.
 in TCP/IP protocol suite a process in a machine is assigned a locally
unique positive integer called port number.
This port number can be used to identify a process within a machine
uniquely.
 a device connected to Internet is assigned a unique 32-bit address
called IP address.
So, IP address with port number uniquely identifies a process
all over the world.
This pair (IP address+ port number) called SOCKET ADDRESS.

---To communicate with a web server, web clients need to specify the
socket address of the web server.
URL and its Anatomy:
 A Resource on the web is identified by an address called Uniform
Resource Locator(URL).
URIs (Uniform Resource Identifiers) identify resources on the
Internet.
URIs that start with http:// are called URLs (Uniform Resource
Locators).
If you know the URL of a publicly available resource anywhere
on the web, you can enter that URL into a web browser‘s address
field and the browser can access that resource.
•A URL contains information that directs a browser to the
resource that the user wishes to access.
•Web servers make such resources available to web clients

An HTTP URL has the following form:

protocol://host:[port] / [path [ ? Params] [#anchor] ]


Protocol:
• it indicates the protocol to be used for this URL.
• for HTTP url, the protocol is http.

Host:
•This is the Fully Qualified Domain Name(FQDN) or the IP
address of the computer where web server runs.
• The Domain name is assigned to a host according to DNS.
• A FQDN consists of a series of domain levels seperated by
dots.
Ex: Case insensitive

www.google.com

• The IP address, which also identifies a computer uniquely all


over the world.
• It is a 32-bit address of the computer used by the IP of the
TCP/IP protocol suite.
•IP address divided into 4 parts each having 8-bits, separated by
dots.
Ex: 64.233.169.147
 port:
• this indicates optional port number of the process to connect to.
• web servers typically runs on port number 80.
•In URL no port is specified, port 80 is assumed.

 Path:
• This is location of a file or a program.
 Params:
• It contains parameters to be passed to web applications.
• The path and params are seprated by ?
• the params consists of name=value pair separated
by &.

Ex: login=ukr&sid=15465&page=ibox

Anchor:
• this part indicates a specific location in the web
page.
Ex: #appendix ….specifies appendix section

of webpage.
The location is created using <a>.
Ex:

http://www.it.jusl.ac.in:8080/report.jsp?
type=student&sort=byName
Message Format:

• wkt HTTP is request response Protocol.


• specifies set of rules that clients and servers to communicate.

1. HTTP server process is created on a port, which waits for


clients to establish a connection.
2. Clients initiate a TCP connection.
3. http server accepts the connection
4. Client sends a request for a resource to server.
5. Server process the request and sends response.
6. Server closes connection.
7. Clients receives the response.
HTTP Message

Request Message Response Meassage


1. Request Message:
A Request message is sent by a client to web server.
Form:
• Request line
• Header
• Emptyline
• Body
• Request line:
It consists of 3 parts:
Req type URL HTTP version

Request type - it indicates type of the request, a client


wants to send. Also called as methods.
HTTP methods…
GET
HEAD
POST
PUT
PATCH
COPY
MOVE
DELETE
LINK
UNLINK
CONNECT
TRACE
1. GET -
• frequently use in www.
•It is specified client wants to retrieve information from
the server.
•Also used to send information to the server for
processing, information is sent by appending it to URL
using name-value pair.
2. HEAD –
• it is used to know when the client wants to knows the
header information about a resource but not resource
content.
3. POST:
• It is used when a client wants to send information to
the server.
• The actual information included in the body part of
request message instead of appending to the URL.
4. PUT:
• It is used to upload a new resource or replace an
existing document.
5. PATCH:
• Similar to PUT method except some differences.
5. COPY:
• The HTTP protocol used to be copy a file from one
location to another.

6. MOVE:
• It is similar to COPY method except that it deletes the
source file.
7. DELETE:
8. LINK:
9. UNLINK:
Safe and unsafe methods
GET,HEAD,OPTIONS,TRACE

DELETE,MOVE,UNLINK

HTTP version:
- Specifies the version of HTTP protocol being used.
- HTTP/1.0
- HTTP/1.1
RESPONSE MESSAGE:
- Response message is sent by a server to the client.
Parts:
• A Status line
• A Header
• An Empty Line
• Optional body
1. Status Line:
Consists of 3 parts
 HTTP version
 Status code
 Status Phrase
HTTP version : specifies the version of HTTP protocol
being used by the server.
Current version is: HTTP/1.1
Status Code:
- It is a 3 digit code that indicates the status of the
response.
Status are classified in to 5 groups:

 1XX series: ( informational)

 2XX series: (Success)

 3XX series (Redirectional)

 4XX series (Client Error)

 5XX series (Server Error)


GET:

/test/demo_form.php?name1=value1&name2=value2

POST:

POST /test/demo_form.php HTTP/1.1


Host: w3schools.com
name1=value1&name2=value2
STATIC & DYNAMIC WEB PAGE

STATIC WEB PAGE DYNAMIC WEB PAGE


• In static web pages, Pages will • In dynamic web pages, Content of
remain same until someone pages are different for different
changes it manually. visitors.
• Static web pages are generally • On other Dynamic web pages are
written in simpler languages such written in more complex
as HTML, JavaScript, CSS, etc languages such as CGI, AJAX, ASP,
ASP.NET, etc.
STATIC WEB PAGE DYNAMIC WEB PAGE
• Static Web Pages are simple in • Dynamic web pages are
terms of complexity. complicated.
• In static web pages, Information • In dynamic web page,
are change rarely. Information are change
• Static Web Page takes less time frequently
for loading than dynamic web • Dynamic web page takes more
page. time for loading.
• In Static Web Pages, database is • In dynamic web pages, database
not used. is used.
• Static web pages require less • Dynamic web pages require
work and cost in designing them. comparatively more work and
cost in designing them.
DHTML stands for Dynamic Hypertext Markup
language i.e., Dynamic HTML.

Dynamic HTML is not a markup or programming language


but it is a term that combines the features of various web
development technologies for creating the web pages dynamic
and interactive.

Usage:
It is used for designing the animated and interactive web pages that
are developed in real-time.
DHTML helps users by animating the text and images in their
documents.
Components of Dynamic HTML:
DHTML consists of the following four components
or languages:
 HTML 4.0
 CSS
 JavaScript
 DOM.
Features of DHTML
Its simplest and main feature is that we can create the web page
dynamically.
Dynamic Style is a feature, that allows the users to alter the font,
size, color, and content of a web page.
It provides the facility for using the events, methods, and
properties. And, also provides the feature of code reusability.
It also provides the feature in browsers for data binding.
Using DHTML, users can easily create dynamic fonts for their web
sites or web pages.
With the help of DHTML, users can easily change the tags and their
properties.
Meta tag:
The <meta> tag defines metadata about an HTML document.
Metadata is data (information) about data.
<meta> tags always go inside the <head> element, and are
typically used to specify character set, page description,
keywords, author of the document, and viewport settings.
Metadata will not be displayed on the page, but is machine
parsable.
Metadata is used by browsers (how to display content or reload
page), search engines (keywords), and other web services.
The CSS Box Model
In CSS, the term "box model" is used when talking about
design and layout.
The CSS box model is essentially a box that wraps around
every HTML element.
It consists of: margins, borders, padding, and the actual
content.

The image below illustrates the box model:


Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is
transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is
transparent
The box model allows us to add a border around elements, and to
define space between elements.
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML
element. It consists of: borders, padding, margins, and the actual content.</p>

<div>content here……...</div>

</body>
</html>

You might also like