Que Bank With Solution
Uploaded by
chandanam.24.beecQue Bank With Solution
Uploaded by
chandanam.24.beecDepartment of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
Course Title: Introduction to Web Programming
Course Code: BPLCK205A
Questions (Module-1 and Module-2)
1. What is HTML? Explain the structure of HTML document with an example.
HTML (HyperText Markup Language) is the standard markup language used to
create and design pages on the World Wide Web. It structures the web content using
elements like headings, paragraphs, links, images, tables, etc.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Main Heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
<!DOCTYPE html> Declares the document type and version (HTML5 here).
<html> Root element that wraps the entire HTML document.
<head> Contains meta-information (title, styles, scripts, etc.).
<title> Sets the title of the web page (shown in the browser tab).
<meta charset> Declares the character encoding (usually UTF-8 for universal compatibility)
<body> Contains the visible content of the web page.
<h1> Represents a top-level heading.
<p> Defines a paragraph of text.
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
2. Explain the following elements with an example for each.
a. <a> ii) <br> iii) <img> iv) <p> v)<hr>
<a> (Anchor Tag)
Creates hyperlinks to link to other pages, websites, or resources.
<a href="https://www.example.com">Visit Example Website</a>
The href attribute defines the link's destination. The text between the tags is clickable.
<br> (Line Break Tag)
Inserts a single line break without starting a new paragraph.
The <br> tag in HTML stands for "break", and it’s used to create a line break — like pressing
"Enter" on your keyboard to move text to the next line. It’s an empty tag — meaning it doesn't
have a closing tag (</br> is not needed). It just inserts a simple line break wherever you place it.
<img> (Image Tag)
Embeds images into a webpage.
Attributes:
src (source of the image)
alt (alternative text if the image fails to load)
<img src="https://via.placeholder.com/150" alt="Sample Image">
<p> tag
The <p> tag in HTML stands for "paragraph" — it's used to define a block of text as a
paragraph.
Ex: <p>This is a paragraph of text.</p>
It automatically adds some space (margin) before and after the paragraph. It wraps the text
neatly and makes your content more readable. It requires a closing tag, like this: </p>.
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
<hr> tag:
The <hr> tag in HTML stands for "horizontal rule", and it's used to insert a horizontal line across
the page.
It’s mainly used to separate sections of content.
It’s an empty tag — no closing tag needed (like <br>).
Visually, it shows a thin line that helps break up your page and make it easier to read.
Basic example:
<p>This is the first section.</p>
<hr>
<p>This is the next section.</p>
This would show two paragraphs with a horizontal line between them.
3. List and explain most common elements used in (X)HTML documents.
In (X)HTML (Extensible Hypertext Markup Language), which is a stricter version of HTML,
elements are used to structure web content. Here are some of the most common elements
you’ll encounter:
<!DOCTYPE>
Declares the document type and version of HTML/XHTML.
<!DOCTYPE html>
It helps browsers render the page correctly.
<html>
The root element that wraps all other elements.
<html lang="en">
</html>
In XHTML, it must be closed properly (</html>), and attributes should be in lowercase.
<head>
Contains meta-information about the document (like title, styles, scripts).
<head>
<title>My Page</title>
<meta charset="UTF-8">
</head>
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
Key elements inside <head>
<title>: Sets the page title (visible on the browser tab).
<meta>: Provides metadata (e.g., character encoding, viewport settings).
<link>: Links to external resources like CSS files.
<style>: Defines internal CSS styles.
<script>: Embeds JavaScript.
<body>
Contains all the visible content of the web page.
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
</body>
In XHTML, all tags inside the body must be properly closed.
Heading Elements (<h1> to <h6>)
Define headings, with <h1> being the largest and <h6> the smallest.
<h1>Main Heading</h1>
<h2>Subheading</h2>
Helps organize content hierarchically
<p> (Paragraph)
Represents a paragraph of text.
<p>This is a paragraph of text.</p>
Automatically adds space before and after the paragraph.
4. What do you mean by Document Type Definition (DTD). Write the basic
structure specification for document type statements.
A DTD indicates the syntax that can be used for the various elements of a language such as
HTML.
The < DOCTYPE> statement, which indicates the particular version of HTML or
XHTML being used in the document.
The DTDs define the allowed syntax for documents written in that version of (X)HTML.
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
Basic Structure Specification
(X)HTML documents should begin with a declaration. This statement identifies the type of
markup that is supposedly used in a document.
For example,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
A <!DOCTYPE> declaration might get a bit more specific and specify the URI (Uniform
Resource Identifier) of the DTD being used as shown here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
In the case of an XHTML document, the situation really isn’t much different:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5.List and explain the rules of (X)HTML.
HTML Is Not Case Sensitive, XHTML Is
These markup examples are all equivalent under traditional HTML:
<B>Go boldly</B>
<B>Go boldly</b>
<b>Go boldly</B>
<b>Go boldly</b>
Attribute Values May Be Case Sensitive
Consider <img SRC="test.gif"> and <IMG src="test.gif">. Under traditional HTML, these
are equivalent because the <img> tag and the src attribute are not case sensitive.
However, given XHTML, they should always be lowercase.
(X)HTML Is Sensitive to a Single Whitespace Character
Any white space between characters displays as a single space.
This includes all tabs, line breaks, and carriage returns. Consider this markup:
<strong>T e s t o f s p a c e s</strong><br>
<strong>T e s t o f s p a c e s </strong><br>
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
<strong>T e s t o f s p a c e s</strong><br>
As shown here, all the spaces, tabs, and returns are collapsed to a single
element: However, it is possible to force the whitespace issue.
If more spaces are required, it is possible to use the nonbreaking space entity, or
Further note that in some situations, (X)HTML does treat whitespace characters
differently.In the case of the pre-element, which defines a preformatted block of text,
white space is preserved rather than ignored because the content is considered
preformatted.
It is also possible to use the CSS property white-space to change default whitespace
handling
(X)HTML Follows a Content Model
All forms of markup support a content model that specifies that certain elements are
supposed to occur only within other elements.
For example, markup like this <ul> <p>What a simple way to break the content model!</p>
</ul>
Elements Should Have Close Tags Unless Empty
Under traditional HTML, some elements have optional close tags. For example, both of the
paragraphs here are allowed, although the second one is better:
<p>This isn't closed
<p>This is</p>
A few elements, like the horizontal rule (hr) and line break (br), do not have close tags
becausethey do not enclose any content. These are considered empty elements and can be
used as is in traditional HTML. However, under XHTML you must always close tags, so
you would have to write <br></br> or, more commonly, use a self-closing tag format with a
final “/” character, like so: <br />.
6.Why few HTML4 Elements Removed from HTML5? Give the Removed HTML
Elements list and also CSS alternatives.
A few elements are removed from the HTML5 specification simply because they are archaic,
misunderstood, have usability concerns, or have a function that is equivalent to the function of
other elements.
Table summarizes some of the elements that have been removed from the HTML5 specification.
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
7.Write the snippet of code to demonstrate the following semantic inline elements
a. Indicating Dates and Time (ii) Inserting Figures
Code snippet to indicate Date and time
<p><label>datetime-local:
<input type="datetime-local" name="datetime2">
</label></p>
<p><label>time:
<input type="time" name="time">
</label></p>
Code snippet to insert figure
<p>
<figure style="display: inline-block; margin: 0;">
<img src="mascot.png" alt="Company Mascot" width="100">
<figcaption style="font-size: small; text-align: center;">Our beloved
mascot!</figcaption>
</figure>
</p>
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
8.Explain the meaning of following HTML elements in HTMLs:
<dd> ii) <dt> iii> <menu>
<dd> — Definition Description
It is used inside a <dl> (description list).
<dd> gives the description or definition for a term specified by <dt>.
Example:
<dl>
<dt>Coffee</dt>
<dd>A brewed drink made from roasted coffee beans.</dd>
</dl>
<dt> — Definition Term
It is also used inside a <dl>.
<dt> defines the term or name you are explaining.
It is usually followed by one or more <dd> elements giving the meaning or details.
Example:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, used to structure web pages.</dd>
</dl>
<menu> — Menu List
It is used to create a list of commands or options.
Originally meant for context menus (like right-click options), but now it's often used as a
simple list, like a navigation menu.
Example:
<menu>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</menu>
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
9.Explain the following tags :
i)<audio> ii><Video>
OR
Design a HTML script to play a video and audio in webpage.
HTML script to play video :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 video example</title>
</head>
<body>
<h1>Simple Video Examples</h1>
<video src="video.mp4" width="640" height="360" controls>
<strong>HTML5 video element not supported</strong>
</video>
<br><br><br>
<video width="640" height="360" controls poster="loading.png">
<source src="a.mp4 " type="video/mp4">
<source src="b.mp4 " type="video/ogg">
<strong>HTML5 video element not supported</strong>
</video>
</body>
</html>
HTML script to play audio
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 audio examples</title>
</head>
<body>
<h1>Simple Audio Examples</h1>
<h2>wav Format</h2>
<audio src="http://htmlref.com/ch2/music.wav" controls></audio>
<h2>ogg Format</h2>
<audio src="http://htmlref.com/ch2/music.ogg" controls></audio>
<h2>Multiple Formats and Fallback</h2>
<audio controls autobuffer autoplay>
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
<source src="http://htmlref.com/ch2/music.ogg" type="audio/ogg">
<source src="http://htmlref.com/ch2/music.wav" type="audio/wav">
<bgsound src="http://htmlref.com/ch2/music.wav">
</audio>
</body>
</html>
10.Explain different semantics elements in HTML5 with an example.
Semantic elements clearly describe their meaning in a human- and machine-readable way (for
both browsers and developers).
Element Meaning
<header> Defines the header section of a page or section
<nav> Defines a block of navigation links
<section> Defines a section (thematic grouping) of a page
<article> Defines a self-contained piece of content
<aside> Defines content aside from the main content (like a sidebar)
<footer> Defines the footer section of a page or section
<main> Defines the main content of the document
<figure> Groups media and their caption
<figcaption> Defines a caption for a <figure>
<mark> Highlights text
<time> Represents a specific time/date
Example:
Here’s a simple HTML5 structure showing semantic elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic HTML5 Example</title>
</head>
<body>
<header>
<h1>Welcome to My Blog</h1>
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<main>
<article>
<header>
<h2>HTML5 Semantic Elements</h2>
<p><time datetime="2025-04-26">April 26, 2025</time></p>
</header>
<section>
<p>Semantic elements make the structure of web pages clearer and easier to
maintain.</p>
</section>
<figure>
<img src="semantic-example.png" alt="HTML5 Semantics" width="400">
<figcaption>Illustration of semantic tags in HTML5</figcaption>
</figure>
</article>
<aside>
<h3>Related Links</h3>
<p>Check out more on <a href="#">HTML5 best practices</a>.</p>
</aside>
</main>
<footer>
<p>© 2025 My Blog. All rights reserved.</p>
</footer>
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
</body>
</html>
11.Implement a code snippet to show the usage of section header and footer tags in HTML5
document structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Section, Header, and Footer Example</title>
</head>
<body>
<header>
<h1>My Awesome Website</h1>
<p>Welcome to my site all about tech and tutorials!</p>
</header>
<section>
<header>
<h2>About Me</h2>
</header>
<p>Hi, I'm Alex, a web developer passionate about building beautiful and functional
websites.</p>
<footer>
<p>Written by Alex - Updated on <time datetime="2025-04-26">April 26,
2025</time></p>
</footer>
</section>
12.Explain in detail emerging elements and attributes to support web applications.
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
menu Element Repurposed
One element that will be implemented in browsers but might not perform the actions defined
in HTML5 is the menu element.
<menu type="list" id="oldStyle">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</menu>
Command Element
The menu element may contain not just links but also other interactive items, including the
newly introduced command element.
This empty element takes a label and may have an icon decoration as well.
<menu type="command" label="Main Menu">
<command type="command" label="Add" icon="add.png">
<command type="command" label="Edit" icon="edit.png">
<command type="command" label="Delete" icon="delete.png">
meter and progress Element
Two fairly similar elements have been introduced in HTML5 to show current status. First, the
meter element defines a scalar measurement within a known range, similar to what might be
represented by a gauge.
The following example is a reading of velocity for some fantastically fast space vessel:
<p>Warp Drive Output: <meter min="0" max="10" low="3" optimum="7" high="9"
value="9.5" title="Captain she can't take much more of this!"></meter></p>
Slightly different from meter is the progress element, which defines completion progress for
some task.
<p>Progress: <progress id="progressBar" max="100.00" value="33.1"> 33.1%</progress></p>
13.Create the following table using XHTML tags. Properly align cells, give suitable cell
Padding and cell spacing, and apply background color, bold and emphasis necessary.
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
table, th, td
{
border: 1px solid black;
border-collapse: collapse;
}
th, td
{
padding-left: 10px;
padding-bottom: 20px
}
table
{
border-spacing: 30px;
}
</style>
</head>
<body>
<h3>Tables in XHTML</h3>
<table align="center" width="70%" style="height:450px">
<tr>
<td rowspan="9" align="center" bgcolor=blue>
<b>Department</b>
</td>
<td rowspan="3" align="center" bgcolor=green>
<b>Sem1</b>
</td>
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
<td padding:15px>
<em>Subject A</em>
</td>
</tr>
<tr>
<td><em>Subject B</em></td>
</tr>
<tr>
<td><em>Subject C</em></td>
</tr>
<tr>
<td rowspan="3" align="center" bgcolor=red>
<b>Sem2</b>
</td>
<td><em>Subject E</em></td>
</tr>
<tr>
<td><em>Subject F</em></td>
</tr>
<tr>
<td><em>Subject G</em></td>
</tr>
<tr>
<td rowspan="3" align="center" bgcolor=purple>
<b>Sem3</b>
</td>
<td><em>Subject H</em></td>
</tr>
<tr>
<td><em>Subject I</em></td>
</tr>
<tr>
<td><em>Subject J</em></td>
</tr>
</table>
</body>
</html>
14.Demonstrate the following HTML5 Semantic tags –
< article >, < aside >, < details >, < figcaption >, < figure >, < footer >, < header >,
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
< main >, < mark >, < section >
for a webpage that gives information about travel experience.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Semantic Tags Demo</title>
<style>
body
{
background-color: yellow;
}
aside
{
float: right;
width: 25%;
background-color: cyan;
font-style: italic;
padding: 15px;
}
main
{
float: left;
width: 70%;
}
footer
{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
mark
{
background-color: yellow;
color: black;
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
figure
{
display: inline-block;
margin: auto;
}
figcaption
{
font-style: italic;
}
</style>
</head>
<body>
<article>
<header>
<h1>My Travelogue</h1>
<p>Random Escapades</p>
</header>
<main>
<figure>
<img src="journey.jpg" alt="Example Image" width="350" height="235">
<figcaption>The road never ends</figcaption>
</figure>
<section>
<h2>Ooty</h2>
<p>Ooty is a popular hill station located in the Nilgiri Hills. It is popularly called the
"Queen of Hill Stations".</p>
</section>
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
<section>
<h2>Mysore</h2>
<p> The city is also known as the City of Palaces, Mysuru has always enchanted its
visitors
with its quaint charm.</p>
</section>
</main>
<aside>
<section>
<p>Upcoming Trek planned to <mark>Kumara Parvata</mark> will be sharing detils
soon</p>
<details>
<summary>Tentative Dates</summary>
<p>24th January 2023</p>
</details>
</section>
</aside>
<footer>
<p>© 2023 Prabodh C P</p>
</footer>
</article>
</body>
</html>
15.Write a XHTML program to get the following output
ORDERED LIST
making coffee
1. Sugar
2. Coffee
3. Milk
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ordered List Example</title>
</head>
<body>
<h2>ORDERED LIST</h2>
<p>Ingredients for making coffee</p>
<ol>
<li>Sugar</li>
<li>Coffee</li>
<li>Milk</li>
</ol>
</body>
</html>
16.Use HTML 5 for performing following tasks: Draw a square using HTML5 SVG , fill
the square with green color and make 6px brown stroke width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Square Example</title>
</head>
<body>
<h2>Green Square with Brown Border</h2>
<svg width="200" height="200">
<rect x="20" y="20" width="100" height="100" fill="green" stroke="brown" stroke-width="6" />
</svg>
</body>
</html>
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
17.With an example, describe any 3 important tags which can be embedded inside <head>
tag.
<head>
Contains meta-information about the document (like title, styles, scripts).
<head>
<title>My Page</title>
<meta charset="UTF-8">
</head>
Key elements inside <head>
<title>: Sets the page title (visible on the browser tab).
<meta>: Provides metadata (e.g., character encoding, viewport settings).
<link>: Links to external resources like CSS files.
<style>: Defines internal CSS styles.
<script>: Embeds JavaScript.
18.Create an XHTML page using tags to accomplish the following:
A paragraph containing text “All that glitters is not gold”. Bold face and italicize this text
𝑥 = 1/3 (𝑦12 + 𝑧12
Create equation:
Put a background image to a page and demonstrate all attributes of background image
Create unordered list of 5 fruits and ordered list of 3 flowers
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>SAMPLE XHTML PAGE</title>
<meta name="author" content="Putta" />
<meta name="date" content="2023-02-17T04:15:01+0530" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
<meta http-equiv="content-style-type" content="text/css"/>
<meta http-equiv="expires" content="0"/>
<style>
Body
{
background-image: url("image.jpg");
background-position: right bottom;
background-repeat:no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<h4>Paragraph</h4>
<p>
<b><i>All that glitters is not gold</i></b> is an aphorism stating that not everything that
looks precious or true turns out to be so. While early expressions of the idea are known from
at least the 12th-13th century, the current saying is derived from a 16th-century line by
William Shakespeare,
<b><i>All that glisters is not gold</i></b>.
<br /><br />
<b><i>All that glisters is not gold</i></b><br />
Often have you heard that told.<br />
Many a man his life hath sold<br />
But my outside to behold.<br />
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
Gilded tombs do worms enfold.<br />
Had you been as wise as bold,<br />
Young in limbs, in judgment old,<br />
Your answer had not been inscrolled<br />
Fare you well. Your suit is cold<br />
-William Shakespeare, Merchant of Venice, Act II Scene 7
</p>
<h4>Equation</h4>
<i>x</i> = 1/3(<i>y</i><sub>1</sub><sup>2</sup> +
<i>z</i><sub>1</sub><sup>2</sup>)
<h4>Unordered Fruit List</h4>
<ul>
<li>Banana</li>
<li>Mango</li>
<li>Grapes</li>
<li>Apples</li>
</ul>
<h4>Ordered Flower List</h4>
<ol>
<li>Jasmine</li>
<li>Rose</li>
<li>Lotus </li>
<li>Tulip</li>
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
</ol>
</body>
</html>
19.Describe how the <canvas> tag is used to create client-side graphics in web applications
The <canvas> tag is used to draw graphics on the web page, right inside the browser, on the
client side. You can use it to draw: Shapes (like rectangles, circles),Lines, Text, Images, Even
create animations, graphs, games, and visual effects
Basic Structure:
<canvas id="myCanvas" width="400" height="300" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
id = give it a name to reference it with JavaScript.
width and height = size of the drawing area (in pixels).
style = optional CSS styling (like borders).
We can draw any shapes on canvas using java script which is shown below:
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw a blue rectangle
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 200, 100); // (x, y, width, height)
</script>
The above snippet when placed in html script draws a blue rectangle
20.Discuss major XHTML themes with an example.
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
Department of Information Science and Engineering
Acharya Institute of Technology
Affiliated to VTU, Recognized by GOK and Approved by AICTE, New Delhi (Accredited by NAA
Radhakrishnan Road, Acharya P.O., Soladevanahalli, Bangalore-560107, INDIA
www.acharya.ac.in, Email: [email protected]
Logical and Physical Markup Physical markup refers to using a markup language such
as (X)HTML to make pages look a particular way; logical markup refers to using
(X)HTML to specify the structure or meaning of content while using another
technology, such as CSS, to designate the look of the page.
Physical markup is obvious; if you want to highlight something that is important to
the reader, you might embolden it by enclosing it within a <b> tag: <b>This is
important! </b>
Logical markup is a little less obvious; to indicate the importance of the phrase, it
should be enclosed in the logical strong element: <strong>This is important. </strong>
Remember, the <strong> tag is used to say that something is important content, not to
indicate how it looks.
If a CSS rule were defined to say that important items should be big, red, and italic
<style="text/css">
strong {font-size: xx-large; color: red; font-style: italic;}
</style>
Confusion would not necessarily ensue, because we shouldn’t have a predisposed view of
what strong means visually.
HTML unfortunately mixes logical and physical markup thinking.
Even worse, common renderings are so familiar to developers that tags that are logical are
assumed physical. The benefits of logical elements might not be obvious to those
comfortable with physical markup. To understand the benefits, it’s important to realize that on
the Web, many browsers render things differently. Whether you subscribe to the physical
(specific) or logical (general) viewpoint, traditional HTML is neither purely physical nor purely
logical.
Acharya Dr. Sarvepalli Radhakrishnan Road, Soladevanahalli, Acharya P. O., Bangalore-560 107
https://ait.ac.in Ph.: 080 22555555
You might also like
- BCA - (WEB PROGRAMMING) (Total 5 Units PDF100% (2)BCA - (WEB PROGRAMMING) (Total 5 Units PDF153 pages
- University Institute of Computing UNIT-1: Bachelor of Computer Applications Web Designing CAT-151No ratings yetUniversity Institute of Computing UNIT-1: Bachelor of Computer Applications Web Designing CAT-15130 pages
- DCA1109 & INTRODUCTION TO WEB PROGRAMMING-Bhushan 266No ratings yetDCA1109 & INTRODUCTION TO WEB PROGRAMMING-Bhushan 26619 pages
- Practical File of Computer Application - Ii: Bba 4 SemesterNo ratings yetPractical File of Computer Application - Ii: Bba 4 Semester44 pages
- Cbse Notes For Class 10 Foundation of Information Technology - HTML (Hypertext Markup Language)0% (1)Cbse Notes For Class 10 Foundation of Information Technology - HTML (Hypertext Markup Language)2 pages
- Cape It Unit 2 Notes Mod 2 So 13 HTML PDFNo ratings yetCape It Unit 2 Notes Mod 2 So 13 HTML PDF26 pages
- Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp ShareNo ratings yetVisit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share36 pages
- It Spring Edutech: Chapter 1: Getting Started With HTMLNo ratings yetIt Spring Edutech: Chapter 1: Getting Started With HTML12 pages
- Internet and World Wide Web: Sahithi Rao J Class: V-E, Roll No: 14No ratings yetInternet and World Wide Web: Sahithi Rao J Class: V-E, Roll No: 1440 pages
- Maharaja Surajmal Institute: Project Impact of Deep Web On Cyber Security ResearchNo ratings yetMaharaja Surajmal Institute: Project Impact of Deep Web On Cyber Security Research9 pages
- AJava GTU Study Material Presentations Unit-4 24052021042157AMNo ratings yetAJava GTU Study Material Presentations Unit-4 24052021042157AM101 pages
- Instalación de Oracle y APEX en CentOS 8 - LinodeNo ratings yetInstalación de Oracle y APEX en CentOS 8 - Linode11 pages
- Client Side Session Handling For AngularNo ratings yetClient Side Session Handling For Angular8 pages
- Lab-1 Web Server Controls and Validation ControlsNo ratings yetLab-1 Web Server Controls and Validation Controls5 pages
