Unit2_Ankur Chaudhary
Unit2_Ankur Chaudhary
Unit2_Ankur Chaudhary
Unit: 2
Subject Name:
WEB TECHNOLOGY (ACSE0505) Ankur Chaudhary
Assistant Professor
Course Details
Department of
( B. Tech 5th Sem)
Information Technology
• StevenM.Schafer,“HTML,XHTML,andCSSBible,5ed”,WileyIndia
• IanPouncey,RichardYork,“BeginningCSS:CascadingStyleSheetsfor
WebDesign”,WileyIndia
Sample Applications
CO5 Creating and evaluating dynamic web pages using the K5, K6
concept of PHP
1 3 3 2 3
2 3 3 3 2
*3= High *2= Medium *1 = Low
3 3 3 2 2
4 3 2 3 2
5 3 2 2 2
PEO3: Able to inculcate professional and social ethics, team work and
leadership serving the society.
B TECH
(SEM-V) THEORY EXAMINATION 20__-20__
Time: 3 Hours Total
Marks: 100
Note: 1. Attempt all Sections. If require any missing data; then choose
suitably.
SECTION A
1.Attempt all questions in brief. 1 x 10 =
10Q.No. Question Marks CO
1 1
2 1
. .
10 1
SECTION B
3. Attempt any five part of the following: 5 x 6 = 30
1 6
. 6
7 6
DecemberAnkur
15, 2024
Chaudhary WT UNIT 2 23
End Semester Question Paper Templates
4. Attempt any one part of the following: 1 x 10 = 10
1 10
2 10
5. Attempt any one part of the following: 1 x 10 = 10
Q.No. Question Marks CO
1 10
2 10
1 10
2 10
1 10
2 10
5. Attempt any one part of the following: 1 x 10 = 10
Q.No. Question Marks CO
1 10
2 10
1 10
2 10
Prerequisites:
Recap:
•Previous unit was focused on web development strategies with some internet services
and tools and connecting cables for internet .
•The main concepts discussed of core java are: Object, classes, inheritance,
polymorphism ,package and interfaces in Java language.
• Introduction to HTML
• Introduction to DOM
• Structure of HTML Document
• Markup Tags
• Heading-Paragraphs, Line Breaks
• HTML Table
• HTML List
• Working of Hyperlinks
• HTML images and frames
• HTML form and control
• Audio, Video and Article Tags
Objective of Unit 2:
Topic’s Objective:
To understand the concepts of HTML, List, Tables attributes
and Borders.
HTML is an acronym which stands for Hyper Text Markup Language which
is used for creating web pages and web applications. Let's see what is
meant by Hypertext Markup Language, and Web page.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>
December 15, 2024 Ankur Chaudhary WT UNIT 2 34
HTML (Cont..)
Example Explained
• 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
<html>
<head>
<title>Page title</title> The content inside the
<body> section (the white
</head> area above) will be
<body> displayed in a browser.
The content inside the
<h1>This is a heading</h1> <title> element will be
<p>This is a paragraph.</p> shown in the browser's
title bar or in the page's
<p>This is another paragraph.</p> tab.
</body>
</html>
December 15, 2024 Ankur Chaudhary WT UNIT 2 38
Markup Tags
Paragraph:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Use the <br> tag to enter line breaks, not to add space between
paragraphs.
Output:
To force
line breaks
in a text,
use the br
element.
In the ordered HTML lists, all the list items are marked with
numbers by default. It is known as numbered list also. 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>
Output:
1.Aries
2.Bingo
3.Leo
4.Oracle
• In HTML Unordered list, all the list items are marked with
bullets
• The Unordered list starts with <ul> tag and list items start
with the <li> tag.
<ul>
•Example of Unordered List: <li>Australia</li>
<li>Japan</li>
<li>India</li>
<li>America</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>-One of the hypertext mark-up language.</dd>
<dt>Javascript</dt>
<dd>-One of my scripting language</dd>
<dt>Oracle</dt>
<dd>-It is one of database</dd>
<dt>Java</dt>
<dd>-It is platform independent language.</dd>
</dl>
• E.g. header section, navigation bar, body content, footer section etc.
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</
th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Aggarwal</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
<table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</
th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Aggarwal</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
<style> <style>
table, th, td { table, th, td {
border: 1px solid black border: 2px solid black;
; border-
} collapse: collapse;
</style> }
</style>
•You can specify padding for table header and table data by
two ways
<style>
table, th, td {
border: 1px solid pink;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
• If you want to make a cell span more than one column, you
can use the colspan attribute.
CSS code:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
HTML code:
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Mobile No.</th>
</tr>
<tr>
<td>Ajeet Maurya</td>
<td>7503520801</td>
<td>9555879135</td>
</tr>
</table>
table>
<caption>Student Records</caption>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</
th></tr>
<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
<tr><td>Mike</td><td>Warn</td><td>60</td></tr>
<tr><td>Shane</td><td>Warn</td><td>42</td></tr>
<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
</table>
A link does not have to be text. A link can be an image or any other
HTML element!
Example
• src
It is a necessary attribute that describes the source or path of
the image.
• alt
Topic’s Objective:
Disadvantages of Frames
Creating Frames
<html>
<frameset rows="10%,80%,10%">
<frame name="top" src="top_frame.htm" />
<frame name="main" src="main_frame.htm" />
<frame name="bottom" src="bottom_frame.htm" />
<noframes>
<body> Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
<html>
<frameset cols ="10%,80%,10%">
<frame name="top" src="top_frame.htm" />
<frame name="main" src=ols"main_frame.htm" />
<frame name="bottom" src="bottom_frame.htm" />
<noframes>
<body> Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
HTML Forms
• HTML Forms are required when you want to collect some data
from the site visitor.
• A form will take input from the site visitor and then will post it
to a back-end application such as CGI, ASP Script or PHP script
etc.
• Disadvantage
• Creating Frames
• Example
Topic’s Objective:
•To understand the concepts of HTML in forms.
• <input>
• <textarea>
• <button>
• <select>
• <option>
• <optgroup>
• <label>
<form action="my.html">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
• The size of a text area can be specified by the cols and rows
attributes, or even better;
• Example:-
<textarea rows="5" cols="50" name="description">Enter
description here...</textarea>
<select>
<option value="volvo">Volvo</option>
<option value="safari">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select>
<optgroup label="Indian Cars">
<option value="volvo">Volvo</option>
<option value="Alto">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
<html>
<head>
<title>Checkbox Contro
</title>
</head>
<body>
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on">
Physics
</form>
Date:
To define an e-mail field that allows multiple e-mail addresses, add the
"multiple" attribute.
Note: Remember to set a name for the search field, otherwise nothing
will be submitted. The most common name for search inputs is q.
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
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 controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which
the browser may choose from. The browser will use the first recognized
format.
The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.
Add muted after autoplay to let your audio file start playing automatically
(but muted):
Add muted after autoplay to let your audio file start playing
automatically (but muted):
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and
width are not set, the page might flicker while the video loads.
The <source> element allows you to specify alternative video files which
the browser may choose from. The browser will use the first recognized
format.
The text between the <video> and </video> tags will only be displayed in
browsers that do not support the <video> element.
December 15, 2024 Ankur Chaudhary WT UNIT 2 99
Article Tag
• HTML Forms
•Elements of HTML
• Form Controls
• Checkbox Control
• Radio Button Control
• Select Box Control
• Hidden Box Control
The topic was focused on web designing concepts which include Frames
• Creating Frames
• HTML Forms
• Elements of HTML
•Form Controls
•Checkbox Control
•Radio Button Control
•Select Box Control
•Hidden Box Control
•New Form Elements
•Audio, Video and Article tag
Topic’s Objective:
•To learn the concept of XML DTD, XML schema
XML Definition
XML Validation
Example Of XML
<?xml version="1.0"?>
<employee>
<firstname>vimal</firstname>
<lastname>jaiswal</lastname>
<address>Gaziabad</address>
<email>vima.jaiswal@gmail.com</email>
</employee>
XML DTD
• Actually DTD and XML schema both are used to form a well
formed XML document.
<address>
<name>Devendra Kumar</name>
<company>NIET</company>
<phone>(011) 123-4567</phone>
</address>
External DTD
address.dtd
• Syntax
<xs:schema xmlns:xs="http://www.org/2001/XMLSchema">
• Complex Type
• Global Types
<xs:element
name="Address"><xs:complexType><xs:sequence>
<xs:element name="name" type="xs:string" /> <xs:element
name="company" type="xs:string" /> <xs:element
name="phone" type="xs:int" /> </xs:sequence>
</xs:complexType></xs:element>
• Introduction
• XML Examples
• Syntax
• Features
• Benefits
Topic’s Objective:
•To learn the concept of XML document object
model and its presentation using XML.
• A W3C standard
<p id="demo"></p>
<script>
var xhttp
= new XMLHttpRequest();
xhttp.onreadystatechange = function
() {
if (this.readyState == 4 && this.s
tatus == 200) {
myFunction(this); } }
December 15, 2024 Ankur Chaudhary WT UNIT 2 125
Introduction XML(cont..)
• Example Of XML DOM(cont..)
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")
[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>
• The topic was focused on Object Model concepts in XML which includes
• Introduction
• XML Examples
• Syntax
• Features
• Benefits
Topic’s Objective:
•To learn the concepts about presenting and using XML by
DOM and SAX parsers.
• An XML processor reads the XML file and turns it into in-
memory structures that the rest of the program can access.
• XML Parsers
• XML Parsers(cont..)
Disadvantages
• It consumes more memory because the whole XML
document needs to loaded into memory.
• Clients does not know what methods to call, they just overrides
the methods of the API and place his own code inside method.
Advantages
• It is simple and memory efficient.
Disadvantages
• It is event-based so its API is less intuitive.
• Introduction
• Syntax
• Features
• Benefits
• The topic focused on Parser and DOM Parser
• Also discussed about SAX (Simple API for XML)
• It was discussed the concepts about presenting and using XML by DOM and SAX
parsers.
• Namespaces
XML Namespaces provide a method to avoid element name conflicts.
Name Conflicts
In XML, element names are defined by the developer. This often
results in a conflict when trying to mix XML documents from
different XML applications.
This XML carries HTML table information:
This XML <table>
<table> carries <name>African Coffee
<tr> information Table</name>
<td>Apples</td> about a <width>80</width>
<td>Bananas</td> table (a <length>120</length>
</tr> piece of </table>
</table> furniture):
December 15, 2024 Ankur Chaudhary WT UNIT 2 140
Introduction XML(cont..)
<f:table>
<f:name>African Coffee
Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
In the example above, there will be no conflict because the two
<table> elements have different names.
Often a plus (+) or minus sign (-) to the left of the elements can be
clicked to expand or collapse the element structure.
To view raw XML source, try to select "View Page Source" or "View
Source" from the browser menu.
In the table below we have listed some XPath expressions and the result of the expressions:
XSLT is far more sophisticated than CSS. With XSLT you can add/remove
elements and attributes to or from the output file. You can also rearrange
and sort elements, perform tests and make decisions about which elements
to hide and display, and a lot more.
for $x in doc("books.xml")/bookstore/book
where $x/price>30
order by $x/title
return $x/title
<homepages xmlns:xlink="http://www.w3.org/1999/xlink">
<homepage xlink:type="simple" xlink:href="https://
www.w3schools.com">Visit W3Schools</homepage>
<homepage xlink:type="simple" xlink:href="http://www.w3.org">Visit
W3C</homepage>
</homepages>
Example explained:
The XLink namespace is declared at the top of the document
(xmlns:xlink="http://www.w3.org/1999/xlink")
The xlink:type="simple" creates a simple "HTML-like" link
The xlink:href attribute specifies the URL to link to (in this case - an
image)
The xlink:show="new" specifies that the link should open in a new
window
XML files are plain text files just like HTML files.
XML can easily be stored and generated by a standard web server.
• https://www.youtube.com/watch?v=uEmF74eHRO8
• https://www.youtube.com/watch?v=7GjHjZuYuAo
• https://www.youtube.com/watch?v=ukazLQCyArY
• https://www.youtube.com/watch?v=itRkLa2kq6w
• https://www.youtube.com/watch?v=itRkLa2kq6w
• https://www.youtube.com/watch?v=KJHYdkKtafU
• https://www.youtube.com/watch?v=uUhOEj4z8Fo
• https://www.youtube.com/watch?v=cXtUhpZJYz8&list=PLfn3cNtmZdPOe
3R_wO_h540QNfMkCQ0ho&index=18
A) Control attributes
B) Semantic elements
C) Graphic elements
D) Multimedia elements
A) Safari
B) Firefox
C) Internet Explorer
D) All the mentioned above
A) Yes
B) No
• What is the replacement for cookies in HTML5?
A) Web beacons
B) Java scripts
C) Local Storage
D) All the above
• Which of the following tags below are used for a multi-line text
input control?
A. textml tag
B. text tag
C. textarea tag
D. Both b and c above
• Which of the following attributes below are used for a font name?
A. fontname
B. fn
C. font
D.face
A. list tag
B. ls tag
C. li tag
D. ol tag
• HTML Practice Test - HTML Online Test - HTML Quiz Test
• The World Wide Web’s markup language has always been HTML.
A. True
B. False
a. <scroll>
b. <marquee>
c. <ciruler>
d. <tab>
a. font
b. class
c. styles
d. style
a. Xpath
b. XSLT
c. XLink
d. XPointer
a. Frameset
b. Master Document
c. Template
d. Timeline
11. Which is used about text data that should not be parsed by the XML
parser
a. CDATA
b. PCDATA
c. None of the above
13. Find the correct syntax of the declaration which defines the XML
Version?
a. True
b. False
a. Schema
b. DTD
c. Both A & B
d. None of the above
188
December 15, 2024 Ankur Chaudhary WT UNIT 2
Old Question Paper(cont..)