Scribd
Upload
7 views

Web Technology Lab Assignment 2

Uploaded by

animrt.kumar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views

Web Technology Lab Assignment 2

Uploaded by

animrt.kumar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Web Technology Lab: Assignment 2

Qns. 1
Program Statement: Create an XML document that describes a list of books. Each book
should have the following elements: tittle, author, publication year, genre, and price.
Ensure that the XML document is well-formed.

Ans:-
Here's a well-formed XML document that describes a list of books, including all the specified elements:

xml
Copy code
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book>
<title>The Great Gatsby</title>
<author>F. Scott Fitzgerald</author>
<publicationYear>1925</publicationYear>
<genre>Fiction</genre>
<price>10.99</price>
</book>
<book>
<title>1984</title>
<author>George Orwell</author>
<publicationYear>1949</publicationYear>
<genre>Dystopian</genre>
<price>8.99</price>
</book>
<book>
<title>To Kill a Mockingbird</title>
<author>Harper Lee</author>
<publicationYear>1960</publicationYear>
<genre>Classic</genre>
<price>7.99</price>
</book>
<book>
<title>The Catcher in the Rye</title>
<author>J.D. Salinger</author>
<publicationYear>1951</publicationYear>
<genre>Fiction</genre>
<price>6.99</price>
</book>
<book>
<title>The Hobbit</title>
<author>J.R.R. Tolkien</author>
<publicationYear>1937</publicationYear>
<genre>Fantasy</genre>
<price>12.99</price>
</book>
</books>

Explanation:

1. Root Element: The root element is <books>, which contains all the <book> elements.
2. Child Elements: Each <book> element contains:
o <title>: The title of the book.
o <author>: The author of the book.
o <publicationYear>: The year the book was published.
o <genre>: The genre of the book.
o <price>: The price of the book.
3. Structure: The document is well-formed because:
o It starts with an XML declaration.
o All tags are properly opened and closed.
o It follows a hierarchical structure.
Qns. 2
Program Statement: Create an XML document to represent a list of students and their grades. Each
student should have an ID attribute and elements for their name and grade. Ensure that each student
element has the ID attribute, and that the XML document is well-formed .

Ans:-
Here is a well-formed XML document to represent a list of students and their grades:

xml
Copy code
<?xml version="1.0" encoding="UTF-8"?>
<students>
<student id="101">
<name>John Doe</name>
<grade>A</grade>
</student>
<student id="102">
<name>Jane Smith</name>
<grade>B+</grade>
</student>
<student id="103">
<name>Michael Johnson</name>
<grade>A-</grade>
</student>
<student id="104">
<name>Emily Davis</name>
<grade>B</grade>
</student>
<student id="105">
<name>Chris Brown</name>
<grade>A</grade>
</student>
</students>

Explanation:

1. Root Element: The root element is <students>, which contains all the <student> elements.
2. Attributes:
o Each <student> element has an id attribute to uniquely identify the student.
3. Child Elements: Each <student> element contains:
o <name>: The student's name.
o <grade>: The student's grade.
4. Structure:
o Starts with an XML declaration (<?xml version="1.0" encoding="UTF-8"?>).
o All tags are properly opened and closed.
o Follows a clear hierarchical structure.
5. Well-Formed: The document meets XML syntax requirements, ensuring it can be processed by XML parsers.
Qns No.3
Program Statement: Develop a webpage with a heading and three buttons labelled "Red", "Green",
and "Blue". Write a VBScript function that changes the colour of the heading to red, green, or blue
depending on which button is clicked. Implement this using DHTML .

Ans:-
Here's the complete implementation of a webpage using DHTML and VBScript to change the color of a heading based on
button clicks:

html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Change Heading Color</title>
</head>
<body>
<h1 id="heading">Dynamic Heading</h1>

<!-- Buttons to change the color -->


<button onclick="changeColor('Red')">Red</button>
<button onclick="changeColor('Green')">Green</button>
<button onclick="changeColor('Blue')">Blue</button>

<!-- VBScript to change heading color -->


<script language="VBScript">
Sub changeColor(color)
Dim heading
Set heading = Document.getElementById("heading")
If Not heading Is Nothing Then
heading.style.color = color
End If
End Sub
</script>
</body>
</html>

Explanation:

1. HTML Structure:
o A <h1> element with the id attribute set to heading serves as the target for color changes.
o Three buttons with onclick attributes call the changeColor VBScript function, passing the desired color as an
argument.

2. VBScript Function:
o The changeColor(color) function takes a color string (Red, Green, or Blue) as an argument.
o It retrieves the <h1> element using Document.getElementById("heading") and changes its style.color
property to the specified color.

3. DHTML (Dynamic HTML):


o The integration of VBScript with HTML creates dynamic behavior in the browser when interacting with the buttons.
Qns:-No 4
Create a webpage that contains a paragraph with the text "Original Text" and a button
labelled "Change Text". Write a VB script function that changes the text of the paragraph
to "Updated Text" when the button is clicked. Use DHTML techniques to implement this
functionality.

Ans:-
Here’s the implementation of a webpage using DHTML and VBScript to change the text of a paragraph when a button is
clicked:

html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Change Text Example</title>
</head>
<body>
<p id="textParagraph">Original Text</p>
<button onclick="changeText()">Change Text</button>

<!-- VBScript to change the paragraph text -->


<script language="VBScript">
Sub changeText()
Dim paragraph
Set paragraph = Document.getElementById("textParagraph")
If Not paragraph Is Nothing Then
paragraph.innerText = "Updated Text"
End If
End Sub
</script>
</body>
</html>

Explanation:

1. HTML Structure:
o A <p> element with the id attribute textParagraph displays the initial text "Original Text".
o A <button> element with an onclick event handler calls the VBScript function changeText() when clicked.

2. VBScript Functionality:
o The changeText() function retrieves the paragraph element using
Document.getElementById("textParagraph").
o The innerText property of the paragraph is updated to "Updated Text".

3. DHTML Integration:
o VBScript is used for dynamic interaction, enabling the button to modify the content of the paragraph in response to
user actions.
Qns:-5
Program Statement: Create a multi-frame HTML webpage that demonstrates the use of frames. The
main page should be divided into multiple frames, each displaying different types of content as
specified below. Create an HTML document named index.html that defines a frameset with six rows.
Frame Contents: First Frame: Display your name and address. Second Frame: Display a bulleted list of
your qualifications. Third Frame: Display a scrolling message.

Ans:-
Here’s how to create a multi-frame HTML webpage as per the requirements. The main page ( index.html) is a frameset
that divides the page into six rows, with content loaded into each frame as specified.

index.html (Main Page)


html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Multi-Frame Webpage</title>
</head>
<frameset rows="20%,20%,60%">
<frame src="name_address.html" name="frame1">
<frame src="qualifications.html" name="frame2">
<frame src="scrolling_message.html" name="frame3">
<noframes>
<body>
Your browser does not support frames. Please upgrade your browser.
</body>
</noframes>
</frameset>
</html>

name_address.html (First Frame Content)


html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Name and Address</title>
</head>
<body>
<h2>Your Name</h2>
<p>Your Address, City, State, Zip Code</p>
</body>
</html>

qualifications.html (Second Frame Content)


html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Qualifications</title>
</head>
<body>
<h2>Qualifications</h2>
<ul>
<li>High School Diploma</li>
<li>Bachelor's Degree in XYZ</li>
<li>Certified in ABC</li>
</ul>
</body>
</html>

scrolling_message.html (Third Frame Content)


html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Scrolling Message</title>
</head>
<body>
<marquee behavior="scroll" direction="left">
Welcome to my multi-frame webpage! Enjoy exploring the content.
</marquee>
</body>
</html>

Explanation:

1. Frameset in index.html:
o The <frameset> tag is used to divide the webpage into three rows.
o The rows attribute specifies the height of each row as a percentage (20%, 20%, 60%).

2. First Frame Content (name_address.html):


o Displays your name and address as a heading and a paragraph.

3. Second Frame Content (qualifications.html):


o Contains a bulleted list of qualifications.

4. Third Frame Content (scrolling_message.html):


o Displays a scrolling message using the <marquee> tag (note that <marquee> is deprecated and not recommended
for modern use; CSS animations or JavaScript are preferred).

5. NoFrames Fallback:
o The <noframes> section provides alternative content for browsers that do not support frames.
----The End----

You might also like