collegefile

NAME – AMIT KUMAR
ROLL_ NO – 2201330109009
SECTION – CSE-C
Qn 1. Implementing HTML program that represent in the document as a start

tag, which gives the name and attributes.
Program –
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>Hello, Duniya</h1>
</body>
</html>
Output –
Qn 2. Implementing HTML program that represents a document.
Program-
<!DOCTYPE html>
<html lang="en">
<head>
<title>College File</title>
</head>
<body>
<h1>NIET GREATER NOIDA</h1>
</body>
</html>
Output –
Qn 3. Implementing HTML program to display your simple CV .

Program-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Resume</title>
</head>
<body>
<style>
.name{
text-align: center;
</style>
<body>
<div style="text-align: center;">
<h1>Amit Kumar</h1>
<p>Web Developer</p>
</div>
<h2>About Me</h2>
<p>I am a passionate web developer with a strong foundation in HTML, CSS, and
JavaScript</p>
<h2>Experience</h2>
<p>Fresher</p>
<h2 >Education</h2>
<p style="font-family: Areial;">Bachelor of Technology in Computer Science Engineering -

A.K.T.U University Lucknow Uttar Pradesh(2022-2025)</p>
<p>Diploma in Mechanical Engineering - BTE.U.P Lucknow</p>

<h2>Skiils</h2>
<li>Web Developer</li>
<li>Software Developer</li>
<h2>Contact</h2>
<p style="color: blue;">Phone-no - 8958015813</p>
<p style="color: rgb(74, 197, 26);">Email - amitkumar1234@gmail.com</p>
<Address style="color: blue;">Vill - Doully jawaher lal Shahi, Bareilly(243505) Uttar

pradesh</Address>
</body>
</html>
Output –
Qn4. Creating html document that represents document object
model.
Program-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Object Model Example</title>
</head>
<body>
<div id="container">
<h1>Welcome to the DOM Example</h1>
<p>This is a paragraph inside a div element.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<script>
// JavaScript code manipulating the DOM can go here
</script>
</body>
</html>
Output –
Qn-5. To Create a table to show your class time table.
Program-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Class Timetable</title>
</head>
<body>
<h1>College Timetable</h1>
<table border = "1">
<tr style="background-color: gray;">
<th>Day/Time</th>
<th>9.0-10.0</th>
<th>10.0-11.0</th>
<th>11.0-12.0</th>
<th>12.0-1.0</th>
<th colspan="5">1.0-2.0</th>
<th>2.0-3.0</th>
<th>3.0-4.0</th>
<th>4.0-5.0</th>
</tr>
<tr style="background-color: aqua;">
<th>Monday</th>
<td> Comptative Coding</td>

<td>CD</td>
<td>DT</td>
<td>Elective-1</td>
<td colspan="5">Lunch</td>
<td>Elective-2</td>
<td>COI</td>
<td>DBMS</td>
</tr>
<th>Tuesday</th>
<td>CD</td>
<td>DBMS</td>
<td>COI</td>
<td>WT</td>
<td>Elective-1</td>
<td>Elective-2</td>
<td>DT</td>
</tr>
<tr style="background-color: brown;">
<th>Wednwsday</th>
<td>InternShip</td>
<td>Inetrnship</td>
<td>DT</td>
<td>DBMS</td>
<td>CD</td>
<td>DT</td>
<td>CD</td>
</tr>
<tr style="background-color: blueviolet;">
<th>Tharusday</th>
<td>DBMS(LAB)</td>
<td>DBMS(LAB)</td>
<td>Comptative Coding</td>
<td>Comptative Coding</td>
<td>InternShip</td>
<td>CD(LAB)</td>
<td>CD(LAB)</td>
</tr>
<tr style="background-color: aqua;">
<th>Friday</th>
<td>DBMS</td>
<td>MOOCS</td>
<td>COI</td>
<td>MOOCS</td>
<td>CD</td>
<td>WT</td>
<td>DBMS</td>
</tr>
</table>
Output-
Qn-6. Implementing HTML program that for Heading .
Program –
<!DOCTYPE html>
<html lang="en">
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is a Heading Level 1 (H1)</h1>
</body>
</html>
Output-
Qn-7 Implementing program that implement paragraph and line-break.
Program-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Paragraph and Line Break Example</title>
</head>
<body>
<p>This is a paragraph. It can contain <br>line breaks to break the content into multiple
lines.</p>
</body>
</html>
Output-
Qn-8 Use tables to provide layout to your HTML page describing your college
infrastructure.
Program –
<!DOCTYPE html>
<html lang="en">
<head>
<title>College Infrastructure</title>
</head>
<body>
<table border="1" style="width: 850px;">
<th >Building</th>
<th>Floors</th>
<th>Rooms</th>
<th>Facilities</th>
</tr>
<tr>
<td style="background-color: cornflowerblue;">Main Building</td>
<td style="background-color: rgb(143, 245, 245);">5</td>
<td style="background-color: aqua;">Lecture Hall & offices</td>
</tr>
<td style="background-color: red;">Library</td>
<td style="background-color: white;">2</td>
<td style="background-color: blueviolet;">1</td>
<td style="background-color: gray;">Study Matarial & Book Collection</td>

</tr>
<tr>
<td style="background-color: darkgreen;">Science Block</td>
<td style="background-color: rgb(70, 220, 130);">Labs & Classes</td>
</tr>
<tr>
<td style="background-color: rgb(167, 126, 205);">Sports</td>
<td style="background-color: rgb(166, 219, 113);">Indore Sports</td>
</tr>
</table>
</body>
Output-
Qn-9 Use <span> and <div> tags to provide a layout to the above page instead
of a table layout.
Program –
<!DOCTYPE html>
<html lang="en">
<head>
<title>College Infrastructure</title>
<style>
.building {
margin-bottom: 20px;
.floor {
font-weight: bold;
.facilities {
margin-left: 20px;
</style>
</head>
<body>
<h1>College Infrastructure</h1>
<div class="building">
<span class="floor">Main Building (5 Floors)</span>
<div class="facilities">
Classrooms, Labs, Auditorium
</div>
</div>
<span class="floor">Library Building (2 Floors)</span>
Library, Reading Rooms
</div>
</div>
<span class="floor">Science Building (3 Floors)</span>
Physics, Chemistry, Biology Labs
</div>
</div>
</body>
</html>
Output-
Qn-10 Apply various colors to suitably distinguish keywords , also apply font
styling like italics, underline and two other fonts to words you find
appropriate , also use header tags.
Program –
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styled Keywords</title>
<style>
.keyword {
font-weight: bold;
color: blue;
font-style: italic;
text-decoration: underline;
font-family: "Arial", sans-serif;
</style>
</head>
<body>
<h1>HTML and CSS Example</h1>
<p>In HTML, the <span class="keyword">header</span> tag is used for defining headings. It is
an example of a keyword.</p>
<p>The <span class="keyword">div</span> tag is a container that can be used to group other
HTML elements together.</p>
<p>You can style HTML elements using <span class="keyword">CSS</span> to enhance the
appearance of your web page.</p>
</body>
</html>
Output-
Qn-11Create a webpage with HTML describing your department use
paragraph and list tags.
Program-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Department Information</title>
</head>
<body>
<h1>Department of Computer Science</h1>
<p>Welcome to the Department of Computer Science at XYZ University. Our department offers a
wide range of courses
covering topics such as programming, algorithms, databases, and computer networks.</p>
<h2>Our Programs</h2>
<ul>
<li>Bachelor of Science in Computer Science</li>
<li>Master of Science in Computer Science</li>
<li>Ph.D. in Computer Science</li>
</ul>
<h2>Facilities</h2>
<ul>
<li>State-of-the-art computer labs</li>
<li>Dedicated research facilities</li>
<li>Expert faculty members</li>
</ul>
</body>
</html>
Output-
Qn-12Create links on the words e.g. ―Wi-Fi and ―LAN to link them to
Wikipedia pages
Program-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Links Example</title>
</head>
<body>
<h1>Internet Technologies</h1>
<p>We provide services like <a href="https://en.wikipedia.org/wiki/Wi-Fi">Wi-Fi</a> and <a

href="https://en.wikipedia.org/wiki/LAN">LAN</a> to connect you to the world!</p>
</body>
</html>
Output-
Qn-13 Insert an image and create a link such that clicking on image takes user
to other page.
Program-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Link</title>
</head>
<body>
<h1>Click the Logo to Visit Our Homepage</h1>
<a href="https://www.example.com">
<img src="example_logo.png" alt="Example Logo">
</a>
</body>
</html>
Output-
Qn-14 Change the background color of the page; At the bottom create a link
to take user to the top of the page.
Program –
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styled Page</title>
<style>
body {
background-color: lightgray;
.top-link {
position: fixed;
bottom: 20px;
right: 20px;
</style>
</head>
<body>
<h1>Welcome to My Page</h1>

<a class="top-link" href="#top">Go to Top</a>

<a id="top"></a>
</body>
</html>
Output-
Qn-15Use frames such that page is divided into 3 frames 20% on left to show
contents of pages, 60% in center to show body of page, remaining on right to
show remarks.
Program-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Frames Example</title>
</head>
<frameset cols="20%, 60%, 20%">
<frame src="contents.html" name="contents">
<frame src="body.html" name="body">
<frame src="remarks.html" name="remarks">
</frameset>
</html>
Output-
Qn-16 Design a HTML registration form that takes user name, user password
and mobile number with submit button control.
Program-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration Form</title>
</head>
<body>
<h1>User Registration</h1>
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="mobile">Mobile Number:</label>

<input type="tel" id="mobile" name="mobile" pattern="[0-9]{10}" required><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
Output-
Qn-17 Design a HTML5 document that implement of date, number, range,

email, search and data list.
Program-
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Form Elements</title>
</head>
<body>
<h1>HTML5 Form Elements</h1>
<label for="date">Date:</label>
<input type="date" id="date" name="date"><br><br>
<label for="number">Number:</label>
<input type="number" id="number" name="number" min="1" max="100" step="1"><br><br>
<label for="range">Range:</label>
<input type="range" id="range" name="range" min="0" max="100" step="1"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="search">Search:</label>
<input type="search" id="search" name="search"><br><br>
<label for="datalist">Choose a fruit:</label>
<input list="fruits" id="datalist" name="datalist">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Orange">
<option value="Mango">
<option value="Grapes">
</datalist>
</body>
</html>
Output-
Qn-18 Implementation in HTML5 that include native audio and video support
without the need for Flash.
Program-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Audio and Video Example</title>

</head>
<body>
<h1>Native Audio and Video Support</h1>
<h2>Audio</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<h2>Video</h2>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</body>
</html>
Output-
Qn-19 Creating HTML program to implement three articles with independent,
self-contained content.
Program-
<!DOCTYPE html>
<html lang="en">
<head>

<title>Three Articles</title>
</head>
<body>
<h1>Articles</h1>
<article>
<h2>Article 1: Introduction to HTML</h2>
<p>HTML, which stands for HyperText Markup Language, is the standard markup language
used to create web pages.
It provides the basic structure of a website by defining different elements such as headings,
paragraphs,
links, images, and more.</p>
</article>
<article>
<h2>Article 2: CSS Styling</h2>
<p>Cascading Style Sheets (CSS) is a stylesheet language used for describing the look and
formatting of a
document written in HTML. With CSS, you can control the layout, colors, fonts, and spacing
of your web
pages, making them visually appealing and user-friendly.</p>
</article>
<article>
<h2>Article 3: JavaScript for Interactivity</h2>
<p>JavaScript is a versatile programming language commonly used in web development to

create interactive and
dynamic user experiences. With JavaScript, you can add functionalities like form validation,
animations,
and asynchronous data loading to your websites, enhancing their interactivity and
responsiveness.</p>
</article>
</body>
</html>
Output-
Qn-20 Creating a XML document that defines the self-descriptive tags.
Program-
<?xml version = "1.0"?>
<contact-info>
<name>Prince Singh</name>
<company>GOOGLE</company>
<phone>01123344444</phone>
</contact-info>
Output -
Qn-21.Designing XML document that store various book data such as: book
category, title, author, year and price.
Program-
<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
</book>
<book category="web">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
</book>
</bookstore>
Output-
Qn. 22 To Describe the various types of XML key components.
Program-
<?xml version="1.0" encoding="UTF-8" ?>
<website>
<company category="COSFINIX">
<title>Machine learning</title>
<author>Prince </author>
<year>2022</year>
</company>
<title>Web Development</title>
<year>2020</year>
</company>
<company category="COSFINIXe">
<title>XML</title>
<author>Prakash </author>
<year>2009</year>
</company>
</website>
Output-
Qn. 23 Design XML DTD to define the structure and legal element and
attribute of XML document.
Program-
<!DOCTYPE website [
<!ELEMENT website (company)>
<!ELEMENT company (title,author,year)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT year (#PCDATA)>
]>
<website>
<title>Machine learning</title>
<year>2022</year>
</company>
<title>Web Development</title>
<year>2020</year>
</company>
<company category="COSFINIXe">
<title>XML</title>
<author>Prakash </author>
<year>2009</year>
</company>
</website>
Output-
Qn. 24 To implement internal and external DTD.

Program-
<!DOCTYPE bookstore [
<!ELEMENT bookstore (book,book)>
<!ELEMENT book (title,author,year,price)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT price (#PCDATA)>
<!ATTLIST book category CDATA "children">
<!ATTLIST book category CDATA "web">
]>
<bookstore>
<book category="children">
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
</book>
<book category= "web">
<title>Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
</book>
</bookstore>
Output-
Qn. 25 Design a XML Schema that describes the structure of an XML document.
Program-
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">


<xs:element name="addressBook">
<xs:complexType>
<xs:sequence>

<xs:element name="contact" maxOccurs="unbounded">
<xs:complexType>
<xs:sequence>
<xs:element name="firstName" type="xs:string"/>
<xs:element name="lastName" type="xs:string"/>
<xs:element name="email" type="xs:string"/>
<xs:element name="phone" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
Output-
Qn-26 Design a XML document that describe the well-formed XML document.
Program-

<!DOCTYPE document [
<!ELEMENT document (title, author, content)>
<!ELEMENT content (#PCDATA)>
]>
<document>
<title>Sample XML Document</title>
<author>John Doe</author>
<content>This is a sample XML document that describes a well-formed
XML document.</content>
</document>
Qn-27 Design a XML document of CD Catalog through
each <CD> element, and displays the values of the
<ARTIST> and the <TITLE> elements in an HTML table.
Program-
?xml version="1.0" encoding="UTF-8"?>

<CD_CATALOG>
<CD>
<ARTIST>Artist 1</ARTIST>
<TITLE>Title 1</TITLE>
</CD>
<CD>
</CD>
<CD>
</CD>
</CD_CATALOG>
<!DOCTYPE html>
<html>
<head>
<title>CD Catalog</title>
</head>
<body>
<h1>CD Catalog</h1>
<table border="1">
<tr>
<th>Artist</th>
<th>Title</th>
</tr>

<?xml-stylesheet type="text/xsl" href="27_1.xsl"?>
<tr>
<td>Artist 1</td>
<td>Title 1</td>
</tr>
<tr>
<td>Artist 2</td>
<td>Title 2</td>
</tr>
<tr>
<td>Artist 3</td>
<td>Title 3</td>
</tr>
</table>
</body>
</html>

collegefile

Uploaded by

Copyright:

Available Formats

collegefile

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

collegefile

Uploaded by

Copyright:

Available Formats

NAME – AMIT KUMAR

Qn 1. Implementing HTML program that represent in the document as a start

<h1>NIET GREATER NOIDA</h1>

Qn 3. Implementing HTML program to display your simple CV .

<div style="text-align: center;">

<p style="font-family: Areial;">Bachelor of Technology in Computer Science Engineering -

<p>Diploma in Mechanical Engineering - BTE.U.P Lucknow</p>

<p style="color: blue;">Phone-no - 8958015813</p>

<p style="color: rgb(74, 197, 26);">Email - amitkumar1234@gmail.com</p>

<Address style="color: blue;">Vill - Doully jawaher lal Shahi, Bareilly(243505) Uttar

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document Object Model Example</title>

<h1>Welcome to the DOM Example</h1>

<p>This is a paragraph inside a div element.</p>

// JavaScript code manipulating the DOM can go here

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<table border = "1">

<tr style="background-color: gray;">

<tr style="background-color: aqua;">

<td> Comptative Coding</td>

<tr style="background-color: gray;">

<tr style="background-color: brown;">

<tr style="background-color: blueviolet;">

<tr style="background-color: aqua;">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<h1>This is a Heading Level 1 (H1)</h1>

<h2>This is a Heading Level 2 (H2)</h2>

<h3>This is a Heading Level 3 (H3)</h3>

<h4>This is a Heading Level 4 (H4)</h4>

<h5>This is a Heading Level 5 (H5)</h5>

<h6>This is a Heading Level 6 (H6)</h6>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Paragraph and Line Break Example</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<table border="1" style="width: 850px;">

<tr style="background-color: gray;">

<td style="background-color: cornflowerblue;">Main Building</td>

<td style="background-color: rgb(143, 245, 245);">5</td>

<td style="background-color: rgb(187, 43, 146);">50</td>

<td style="background-color: aqua;">Lecture Hall & offices</td>

<td style="background-color: red;">Library</td>

<td style="background-color: white;">2</td>

<td style="background-color: blueviolet;">1</td>

<td style="background-color: gray;">Study Matarial & Book Collection</td>

<td style="background-color: darkgreen;">Science Block</td>

<td style="background-color: rgb(237, 95, 123);">3</td>

<td style="background-color: rgb(183, 238, 88);">20</td>

<td style="background-color: rgb(70, 220, 130);">Labs & Classes</td>

<td style="background-color: rgb(167, 126, 205);">Sports</td>

<td style="background-color: rgb(119, 119, 229);">1</td>

<td style="background-color: rgb(118, 229, 229);">1</td>

<td style="background-color: rgb(166, 219, 113);">Indore Sports</td>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<span class="floor">Main Building (5 Floors)</span>

<span class="floor">Library Building (2 Floors)</span>

Library, Reading Rooms

<span class="floor">Science Building (3 Floors)</span>

Physics, Chemistry, Biology Labs

<meta name="viewport" content="width=device-width, initial-scale=1.0">

font-family: "Arial", sans-serif;