WT-1-offline

Syllabu
Module I : Web Technologies (8 Marks)

Markup and Scripting Languages : HTML, Cascading Style Sheets,
XML, Document Object Model, JavaScript, JSON, AJAX.
Web Servers : Sockets and ports, HTTP transactions, Web server,

Proxy server, Domain Name Service, Client-side scripting versus
server-side scripting, Multitier architecture.
OUTLIN
E
● WHAT IS INTERNET?
● WHAT IS WWW?
● WHAT IS HT TP?
● WHAT IS URL?
● WHAT IS HTML?
● WHAT IS DNS?
● HTML TAGS
● FORM C O N T R O L S
● EMBEDDING MULTIMEDIA
● What is Internet?
A global computer network providing a variety of
information and communication facilities, consisting
of interconnected networks using standardized
communication protocols
● What is WWW?
The World Wide Web is a way of exchanging

information between computers on the Internet, tying
them together into a vast collection of interactive
multimedia resources.
● What is H T T P?
HT TP stands for Hypertext Transfer Protocol. This is the protocol being
used to transfer hypertext documents that makes the World Wide Web
possible.
● What is U R L ?
U R L stands for Uniform Resource Locator, and is used to specify
addresses on the World Wide Web. A U R L is the fundamental network
identification for any resource connected to the web
● What is HTML?
HTML stands for Hyper Text Markup Language. This is the language
in which we write web pages for any Website.
● What is a web server?
A web server is software and hardware that uses HT TP and other

protocols to respond to client requests made over the World Wide Web.
The main job of a web server is to display website content through
storing, processing and delivering web pages to users.
● What is D N S
Domain Name Servers or D N S are very similar to a phone book that

contains all the public domains and their corresponding IP Addresses .
D N S is an internet service that translates the domain name into IP
addresses.
S E RV E R S O F T WA R E S
● Server software is primarily built to interact with a server’s hardware
infrastructure, including the processor, memory, storage, input/output
(I/O) and other communication ports.
● Depending on the type or usage of the server, server software may
be classified into various forms,
a. Web server software
b. Application server software
c. Database server software
d. Cloud computing server software
e. Game software
HTM
L
● HTML stands for Hyper Text Markup Language
● HTML is the standard markup language for creating Web pages
● HTML describes the structure of a Web page
● HTML consists of a series of elements
● HTML elements tell the browser how to display the content
● HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
● The <!DOCTYPE html> declaration defines that this document is an
HTML5 document
● The <html> element is the root element of an HTML page
● The <head> element contains meta information about the HTML
page
● The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
● The <body> element defines the document's body, and is a container
for all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
● The <h1> element defines a large heading
● The <p> element defines a paragraph
What is an H TM L Element?
An HTML element is defined by a start tag, some content, and an end

tag:
<tagname>Content goes here...</tagname>
<h1>My First Heading</h1>

H T M L AT TRIBUTES
● All HTML elements can have attributes
● Attributes provide additional information about elements
● Attributes are always specified in the start tag
● Attributes usually come in name/value pairs like: name="value"
● The href attribute of <a> specifies the U R L of the page the link goes to
● The src attribute of <img> specifies the path to the image to be displayed
● The width and height attributes of <img> provide size information for
images
● The alt attribute of <img> provides an alternate text for an image
● The style attribute is used to add styles to an element, such as color,
font, size, and more
● The lang attribute of the <html> tag declares the language of the Web
page
HTML
TAGS
● HTML tags are like keywords which defines that how web browser
will format and display the content.
● With the help of tags, a web browser can distinguish between an
HTML content and a simple content.
● All HTML tags must enclosed within < > these brackets.
● Every tag in HTML perform different tasks.
● If you have used an open tag <tag>, then you must use a close
tag
</tag> (except some tags)
● Syntax
<tag> content </tag>

HTML Heading
● A HTML heading or HTML h tag can be defined as a title or a
subtitle which you want to display on the webpage.
● There are six different HTML headings which are defined
with the
• <h1> to <h6> tags, from highest level h1 (main heading) to the
least level h6 (least important heading).
• <h1>Heading no. 1</h1>

● H T M L Paragraph
HTML paragraph or HTML p tag is used to define a paragraph in a
webpage.
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
● H T M L Anchor
The H TM L anchor tag defines a hyperlink that links one page to another
page. It can create hyperlink to other web page as well as files, location,
or any URL. The "href" attribute is the most important attribute of the
HTML a tag. and which links to destination page or URL.
<a href = "..........."> Link Text </a>
HTML Text Formatting Elements
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text

● H T M L Image
1. H T M L img tag is used to display image on the web page.
2. HTML img tag is an empty tag that contains attributes only, closing
tags are not used in HTML image element.
<img src="good_morning.jpg" alt="Good Morning Friends"/>

● H T M L Table-H T M L table tag is used to display data in tabular form
Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for formatting.
<col> It is used with <colgroup> element to specify column properties for each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.

<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sona</td><td>Jai</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swathi</td><td>Siva</td><td>82</td></tr>
<tr><td>Chathni</td><td>joshi</td><td>72</td></tr>
</table>
H T M L Lists
● HTML Lists are used to specify lists of information.

● All lists may contain one or more list elements.
● There are three different types of HTML lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
H T M L Ordered List or Numbered List
● In the ordered HTML lists, all the list items are marked with numbers
by default.
● It is also known as numbered list.
● The ordered list starts with <ol> tag and the list items start with
<li> tag.
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>
H T M L Unordered List or Bulleted List
● In HTML Unordered list, all the list items are marked with bullets.
● It is also known as bulleted list.
● The Unordered list starts with <ul> tag and list items start with the
<li> tag.
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
HTML Description List or Definition List
● HTML Description list is also a list style which is supported by HTML
and XHTML.
● It is also known as definition list where entries are listed
like a dictionary or encyclopedia.
● The HTML definition list contains following three tags:
1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).
<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>
OUTLINE
● HTML TAGS
○ Blocks and Inline tags
○ Class and id attribute
○ Marquee
○
● FORM C O N T R O L S
○ Form elements
○ Form attributes
○ Sample
● QUESTIONS
HTML TAGS (continuation)
● Block-level Elements
○ A block-level element always starts on a new line.
○ A block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
○ A block level element has a top and a bottom margin, whereas
an inline element does not.
○ The <div> element is a block-level element
● Inline Elements
○ An inline element does not start on a new line.
○ An inline element only takes up as much width as necessary.
○ This is a <span> element inside a paragraph.
● The clas s Attribute
○ The HTML class attribute is used to specify a class for an HTML
element.
○ Multiple HTML elements can share the same class.
○ The class attribute is often used to point to a class name in a
style sheet. It can also be used by a JavaScript to access and
manipulate elements with the specific class name.
○ The class name is case sensitive
○ Different HTML elements can point to the same class name
○ JavaScript can access elements with a specific class name with
the getElementsByClassName() method
○ <h2 class="city">London</h2>
● id Attribute
○ The id attribute is used to specify a unique id for an HTML
element
○ The value of the id attribute must be unique within the
HTML
document
○ The id attribute is used by C S S and JavaScript to style/select a
specific element
○ The value of the id attribute is case sensitive
○ The id attribute is also used to create HTML bookmarks
○ JavaScript can access an element with a specific id with the
getElementById() method
○ <h1 id="myHeader">My Header</h1>
FRAMES
● HTML frames are used to divide your browser window into multiple
secti ons where each section can load a separate HTML document
● A collection of frames in the browser window is known
as a frameset.
● The window is divided into frames in a similar way the tables are
organized: into rows and columns.
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">

<frame name = "top" src = "https://www.ABC.com/html/top_frame.htm" />
<frame name = "main" src = "https://www.XYZ.com/html/main_frame.htm" />
<frame name = "bottom" src = "https://www.ABC.com/html/bottom_frame.htm" />
</frameset>
</html>
HTML Forms
● HTML Form is a document which stores information of a user on a
web server using interactive controls
● The HTML <form> element is used to create an HTML form for user
input:
<form>
form elements
.</form>
HTML Form Elements
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element

<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down
list
<option> Defines an option in a drop-down list

<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input
controls
<output> Defines the result of a calculation

The <input>
Element
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one

of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or

more of many choices)
<input type="submit"> Displays a submit button (for submitting

the form)
<input type="button"> Displays a clickable button

HTML Form Attributes
● The Acti on Attribute
The action attribute defines the action to be performed when the form is
submitted.
Usually, the form data is sent to a file on the server when the user clicks
on the submit button.
<form action="/action_page.php">
● The Target Attribute
The target attribute specifies where to display the response that is
received after submitti ng the form
● The Method Attribute
a. The method attribute specifies the HT TP method to be used when
submitti ng the form data.
b. The form-data can be sent as U R L variables (with method="get") or
as HT TP post transaction (with method="post").
c. The default HT TP method when submitti ng form data is GET.
●
GET:
● Appends the form data to the URL, in name/value pairs
● NEVER use G E T to send sensitive data! (the submitted form data is
visible in the URL!)
● The length of a U R L is limited (2048 characters)
● Useful for form submissions where a user wants to bookmark the
result
● G E T is good for non-secure data, like query strings in Google
● <form action="/action_page.php" method="get">
POST:
● Appends the form data inside the body of the HT TP request (the
submitted form data is not shown in the URL)
● P O S T has no size limitations, and can be used to send large amounts
of data.
● Form submissions with P O S T cannot be bookmarked
● <form action="/action_page.php" method="post">
Attribute Description
accept-charset Specifies the character encodings used for form submission
autocomplete Specifies whether a form should have autocomplete on or off
enctype Specifies how the form-data should be encoded when submitting it to the server
(only for method="post")
name Specifies the name of the form
novalidate Specifies that the form should not be validated when submitted
rel Specifies the relationship between a linked resource and the current document
target Specifies where to display the response that is received after submitting the form
SAMPLE
CODE
<Html>
<head>
<title>
Registration Page
</title>
</head>
<body bgcolor="Lightskyblue">
<br>
<br>
<form>
<label> Firstname </label>
<input type="text" name="firstname" size="15"/> <br> <br>
<label> Middlename: </label>
<input type="text" name="middlename" size="15"/> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"/> <br> <br>
<label>
Course :
</label>
<select>
<opti on value="Course">Course</option>
<opti on value="BCA">BCA</opti on>
<opti on value="BBA">BBA</opti on>
<opti on value="B.Tech">B.Tech</option>
<opti on value="MBA">MBA</option>
option value="MCA">MCA</option>
<opti on value="M.Tech">M.Tech</option>
</select>
<br>
<br>
<label>
Gender :
</label><br>
<input type="radio" name="male"/> Male <br>
<input type="radio" name="female"/> Female <br>
<input type="radio" name="other"/> Other
<br>
<br>
<label>
Phone :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="text" name="phone" size="10"/> <br> <br>
Address
<br>
<textarea cols="80" rows="5" value="address">
</textarea>
<br> <br>
Email:
<input type="email" id="email" name="email"/> <br>
<br> <br>
Password:
<input type="Password" id="pass" name="pass"> <br>
<br> <br>
Re-type password:
<input type="Password" id="repass" name="repass"> <br> <br>
<input type="button" value="Submit"/>
</form>
</body>
</html
QUESTIONS
1) How to insert an image in HTML?
a. <img href = "jtp.png" />

b. <img url = "jtp.png" />
c. <img link = "jtp.png" />
d. <img s rc = "jtp.png" />
Ans:D
2) How to create a checkbox in HTML?
a. <input type = "checkbox">

b. <input type = "button">
c. <checkbox>
d. <input type = "check">
Ans:A
3)A HTML form is to be designed to enable purchase of office stationery.
Required items are to be selected (checked). Credit card details are to be
entered and then the submit button is to be pressed. Which one of the
following options would be appropriate for sending the data to the server.
Assume that security is handled in a way that is transparent to the form
design.
(a) Only GET

(b) Only P O S T
(c) Either of G E T or P O ST
(d) Neither G E T nor P O ST
Ans: B
4)Which of the following is the correct way to start an ordered list with the
count of numeric value 4?
a. <ol type = "1" initial = "4">

b. <ol type = "1" begin = "4">
c. <ol type = "1" num = "4">
d. <ol type = "1" start = "4">
Ans:D
5 )Consider a HTML table definition given below:
<table border=1>
<tr> <td rowspan=2> ab </td>
<td colspan=2> cd </td>
</tr>
<tr> <td> ef </td>
<td rowspan=2> gh </td>
</tr>
<tr> <td colspan=2> ik </td>
</tr>
</table>
The number of rows in each column and the number of columns in each
row are:
(a) (2,2,3) and (2,3,2) (c) (2,3,2) and (2,3,2)
(b) (2,2,3) and (2,2,3) (d) (2,3,2) and (2,2,3)
Ans: C
OUTLINE
● EMBEDDING MULTIMEDIA
○ HTML Video element
○ HTML Audio element
○ Object element
○ Embed element
○ Playing youtube video in HTML
● CSS
○ Syntax
○ Selectors
○ Form attributes
○ Sample
● QUESTIONS
● HTML VIDEO E L E M E N T
■ To show a video in HTML, use the <video> element:
Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
● HTML Audio element
○ The HTML <audio> element is used to play an audio file on a
web page
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
● The <object> Element
○ The <object> element defines an embedded object within an
HTML document.
○ It was designed to embed plug-ins (like Java applets, PDF
readers, and Flash Players) in web pages, but can also be used
to include HTML in HTML:
○ Example
<object width="100%" height="500px” data="snippet.html"></object>

● The <embed> Element
● The <embed> element also defines an embedded object within

an HTML document.
Example
<embed src="audi.jpeg">
Playing a YouTube Video in HTML
● Define an <iframe> element in your web page
● Let the src attribute point to the video U R L
● Use the width and height attributes to specify the dimension of the
player
Example
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
CSS
● C S S is the language we use to style an HTML document.
● C S S describes how HTML elements should be displayed
● C S S stands for C a s ca di ng Style Sheets
● C S S saves a lot of work. It can control the layout of multiple web pages
all at once
● External stylesheets are stored in C S S files
C S S SYNTAX
A C S S rule consists of a selector and a declaration block.
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by
semicolons.
Each declaration includes a C S S property name and a value, separated
by a colon.
Multiple C S S declarations are separated with semicolons, and declaration
blocks are surrounded by curly braces.
EXAMPLE
p{
color: red;
text-align: center;
}
C S S SELECTORS
C S S selectors are used to "find" (or select) the HTML elements you want
to style.
● Simple selectors (select elements based on name, id, class)

● Combinator selectors (select elements based on a specific
relationship between them)
● Pseudo-class selectors (select elements based on a certain
state)
● Pseudo-elements selectors (select and style a part of an
element)
● Attribute selectors (select elements based on an attribute or attribute
value)
The C S S element Selector
The element selector selects HTML elements based on the element
name.
p{
text-align: center;
color: red;}
The C S S id Selector
● The id selector uses the id attribute of an HTML element to select a
specific element.
● The id of an element is unique within a page, so the id selector is used to
select one unique element!
● To select an element with a specific id, write a hash (#) character,
followed by the id of the element.
#para1 {
text-align: center;
color: red;
}
The C S S class Selector
● The class selector selects HTML elements with a specific class attri
● To select elements with a specific class, write a period (.) character,
class name.
.center {
text-align: center; color: red;

}
The C S S Universal Selector
● The universal selector (*) selects all HTML elements on the page.
*{
text-align: center;
color: blue;
}
The C S S Grouping Selector
● The grouping selector selects all the HTML elements with the
same style definitions.
•h1, h2, p {
• Text-align: center;
color: red;
•}
Three Ways to Insert C S S
There are three ways of inserting a style sheet:
● External C S S
● Internal C S S
● Inline C S S
External C S S
● With an external style sheet, you can change the look of an entire
website by changing just one file!
● Each HTML page must include a reference to the external style sheet
file inside the <link> element, inside the head section.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">

</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
" mystyle.css"
body {
background
-color:
lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal C S S
● An internal style sheet may be used if one single HTML page has a
unique style.
● The internal style is defined inside the <style> element, inside the
head section.
<!DOCTYPE html>
<html>
<head><style>
body {
background-
color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style></head>
<body>
<h1>This is a
heading</h1>
<p>This is a
Inline C S S
● An inline style may be used to apply a unique style for a single
element.
● To use inline styles, add the style attribute to the relevant element. The
style attribute can contain any C S S property.
<!DOCTYPE html>
<html><body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body></html>
QUESTIONS
1) If we want define style for an unique element, then which c s s selector
will we use ?
A.Id B.text
C.class D.name
Ans: A
2) Which element is used in the <HEAD> section on an HTML / XHTML
page, if we want to use an external style sheet file to decorate the page ?
A.<src> B.<link>
C.<style> D.<css>
Ans:B
3)In C S S , h1 can be called as
a. Selector
b. Attribute
c.Valu
e d.Tag
Ans:A
4)In css, “color:red” can be called as
a.Selector
b.Rule
c.Declarati on
d.Value
Ans:C

WT-1-offline

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WT-1-offline

Uploaded by

Copyright:

Available Formats

Syllabu

Module I : Web Technologies (8 Marks)

Web Servers : Sockets and ports, HTTP transactions, Web server,

The World Wide Web is a way of exchanging

● What is a web server?

A web server is software and hardware that uses HT TP and other

Domain Name Servers or D N S are very similar to a phone book that

<h1>My First Heading</h1>

An HTML element is deﬁned by a start tag, some content, and an end

<tagname>Content goes here...</tagname>

<h1>My First Heading</h1>

<tag> content </tag>

• <h2>Heading no. 2</h2>

• <h3>Heading no. 3</h3>

<b> Defines bold text

<em> Defines emphasized text

<i> Defines a part of text in an alternate voice or mood

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

<img src="good_morning.jpg" alt="Good Morning Friends"/>

<table> It deﬁnes a table.

<tr> It deﬁnes a row in a table.

<th> It deﬁnes a header cell in a table.

<td> It deﬁnes a cell in a table.

<caption> It deﬁnes the table caption.

<colgroup> It speciﬁes a group of one or more columns in a table for formatting.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

● HTML Lists are used to specify lists of information.

<frameset rows = "10%,80%,10%">

<form> Deﬁnes an HTML form for user input

<input> Deﬁnes an input control

<textarea> Deﬁnes a multiline input control (text area)

<label> Deﬁnes a label for an <input> element

<ﬁeldset> Groups related elements in a form

<legend> Deﬁnes a caption for a <ﬁeldset> element

<option> Deﬁnes an option in a drop-down list

<output> Deﬁnes the result of a calculation

<input type="text"> Displays a single-line text input ﬁeld

<input type="radio"> Displays a radio button (for selecting one

<input type="checkbox"> Displays a checkbox (for selecting zero or

<input type="submit"> Displays a submit button (for submitting

<input type="button"> Displays a clickable button

accept-charset Specifies the character encodings used for form submission

autocomplete Specifies whether a form should have autocomplete on or off

name Specifies the name of the form

a. <img href = "jtp.png" />

a. <input type = "checkbox">

(a) Only GET

a. <ol type = "1" initial = "4">

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

<object width="100%" height="500px” data="snippet.html"></object>

● The <embed> element also deﬁnes an embedded object within

<iframe width="420" height="315"

● Simple selectors (select elements based on name, id, class)