WD Material

WD_Study Material WD_Study Material WD_Study Material
Unit-I
1. What is Paragraph element in HTML
In HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and
after a paragraph.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
2. Write a short note on Headings in HTML
HTML headings are titles or subtitles that you want to display on a webpage.
Different Sizes:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
3. What is Body element in HTML

Body tag: Body tag contain some attributes such as bgcolor, background etc.
bgcolor is used for background color, which takes background color name or hexadecimal number and
#FFFFFF and background attribute will take the path of the image which you can place as the background
image in the browser.
Example: <body bgcolor=”cyan” background= “c:\amer\imag1.gif”>
4. What is “hr” tag in HTML

hr tag: This tag places a horizontal line across the system.
These lines are used to break the page.
This tag also contains attribute i.e., width which draws the horizontal line with the screen size of the browser.
5. What is font tag in HTML

font tag: This sets font size, color and relative values for a particular text.
Example: <font size=”10” color=”red”>
Example: <p><font size="30" color=”red”>Hello This is Vignan’s</font></p>
6. What is <b> Tag in HTML

bold tag: This tag is used for implement bold effect on the text
Example: <b> ....... </b>
1
7. What is <i> in HTML
Italic tag: This implements italic effects on the text.
Example: <i>.......</i>
8. What is <strong> in HTML

Strong tag: This tag is used to always emphasized the text
Example: <strong>..........</strong>
9. What is <tt>tag in HTML

tt tag: This tag is used to give typewriting effect on the text
Example :<tt>........</tt>
10. What is <sub> and <sup> tags in HTML

sub and sup tag: These tags are used for subscript and superscript effects on the text.
Example: <sub> ..........</sub>
<sup>...........</sup>
11. What is <a> tags in HTML

Anchor tag: This tag is used to link two HTML pages, this is represented by
Example <html>
<body>
<h1>The Anchor Element </h1>
<a href="https://www.irctc.co.in/nget/train-search">Book a Ticket</a>
GET &POST Methods

The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers.
HTTP works as a request-response protocol between a client and server.
Example: A client (browser) sends an HTTP request to the server; then the server returns a response to the
client. The response contains status information about the request and may also contain the requested content.
The GET Method
The HTML get Method is used to access the data from the server /other source "URL encoded" form.
 GET requests can be cached
 GET requests remain in the browser history
 GET requests can be bookmarked
 GET requests should never be used when dealing with sensitive data
 GET requests have length restrictions
 GET requests are only used to request data (not modify)
2
Example:
<form method="get" action="www.w3c.com/search">

<input type="search" name="location" placeholder="Search.." />
<input type="submit" value="Go" />
</form>
The POST Method

Used to send data to a server to update a resource
 POST requests are never cached
 POST requests do not remain in the browser history
 POST requests cannot be bookmarked
 POST requests have no restrictions on data length
Example:
<form method="post" action="www.w3c.com.com/user">

<label for="name">Name:</label>
<input type="text" name="name" />
<input type="submit" />
</form>
12. How Tag is different from Element.
HTML Tags HTML Elements
HTML tags are used to hold the HTML element. HTML element holds the content.
Whatever written within a HTML tag are HTML

HTML tag starts with < and ends with >
elements.
HTML tags are almost like keywords where every

HTML elements specify the general content.
single tag has unique meaning.
13.How absolute url is different from relative url.
Absolute url Relative url.
The complete address of a document on the internet is The relative URL is a document’s online partial
known as an absolute URL. address.
All the information needed to locate files online is Only file names or file names with folder names are
contained in the absolute URL. contained in relative URLs.
3
15. Construct ordered list.
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
16. Full form of url

A URL (Uniform Resource Locator) is a unique identifier used to locate a resource on the Internet. It is also
referred to as a web address.
17. List the attributes of <img> tag.
The <img> tag has two required attributes:
 src - Specifies the path to the image

 alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
18. How each of these forms shall sent/retrieve data across web:
a form for accessing your bank account online _get__
a form for collecting long essay entries post
19. Describe the purpose of alternative text?

i) The purpose of alt text is to improve accessibility by describing what an image is showing to visitors
who do not have the ability to see them
ii) In place of images the website will return the alt attributes instead, describing what image should be
showing
20. What is Table tag in HTML and list their attributes.

The <table> tag defines an HTML table.
An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements.
The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a
table cell.
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
4
21. Discuss the functionality of block and inline elements.
A block-level element always starts on a new line, and the browsers automatically add some space (a margin)
before and after the element.
Two commonly used block elements are: <p> and <div>.
The <p> element defines a paragraph in an HTML document.
The <div> element defines a division or a section in an HTML document
An inline element does not start on a new line.
This is a <span> element inside a paragraph.
22. Draw and explain the format of HTML program
23. List and write the syntax of few formatting tags

The HTML <i> element displays the content inside in italic.
<i>This text is italic</i>
HTML <sup> Element
<p>This is <sup>superscripted</sup> text.</p
HTML <sub> Element
<p>This is <sub>subscripted</sub> text.</p>
HTML <ins> Element
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
HTML <small> Element
<small>This is some smaller text.</small>
5
24. List Tag and its classification
Unordered List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
HTML Unordered List or Bulleted List displays elements in bulleted format. We can use unordered list
where we do not need to display items in any particular order. The HTML ul tag is used for the unordered
list. There can be 4 types of bulleted list:
o disc
o circle
o square
o none
The list items will be marked with bullets (small black circles) by default:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Circle/Square
<ul type="circle"/”square”>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
25. List the Table Tag attributes and explain with an example
Table border <table border="">...</table>
Alignment <table align=center/left/right>...</table>
Colspan in table <table colspan=" ">...</table>
Rowspan in table <table rowspan=" ">...</table>
Add caption <caption>..</caption>
6
<table border=”1”>
<caption>Demo Table</caption>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
26. What do you mean by column spanning?
<html>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Surisetty</td>
<td>Tarun</td>
<td>43</td>
</tr>
</table>
</html>
27. How Image mapping is achieved explain with its syntax
The HTML <map> tag defines an image map. An image map is an image with clickable areas.
The areas are defined with one or more <area> tags.
The image is inserted using the <img> tag.
<img src="Taj.jpg" alt="Tajmahal" usemap="#taj">
Shape:
You must define the shape of the clickable area, and you can choose one of these values:
 rect - defines a rectangular region
 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

<area shape="circle" coords="337, 300, 44" href="coffee.htm">
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,1
03,161,128,147" href="croissant.htm">
7
Syntax:
<img src="worldmap.jpg" alt="World_map" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="34,44,270,350" alt="AP" href="andhra.htm">
<area shape="rect" coords="290,172,333,250" alt="TS" href="telangana.htm">
<area shape="circle" coords="337,300,44" alt="Kerala" href="Kerala.htm">
</map>
28. Display a web page to register student details using input elements
<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>
<br> <br>
<label> Gender : </label><br>
<input type="radio" name="male"/> Male <br>
<input type="radio" name="female"/> Female <br> <br> <br>
<label>Email: </label>
<input type="email" id="email" name="email"/> <br>
<label> Password: <label>
<input type="Password" id="pass" name="pass"> <br><br><br>
</form>
</body>
</html>
30. Create html page for various bullet styles

Circle
<ul type="squae">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
8
</ul>
Square
<ul type="circle">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
None
<ul type="none">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
31. Mention the various form elements with examples
The HTML <form> element can contain one or more of the following form elements:
 <input>
The <input> element can be displayed in several ways, depending on the type attribute.
<label for="fname">First name:</label>

<input type="text" id="fname" name="fname">
 <label>
The <label> element defines a label for several form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud the
label when the user focus on the input element.
 <select>
The <select> element defines a drop-down list:
<label for="cars">Choose a car:</label>

<select id="cars" name="cars">
<option value="volvo">Volvo</option>
</select>
9
 <textarea>
The <textarea> element defines a multi-line input field (a text area):
<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.
</textarea>
 <button>
The <button> element defines a clickable button:

<button type="button" onclick="alert('Hello World!')">Click Me!</button>
 <fieldset>
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John"><br>
<input type="submit" value="Submit">
</fieldset>
</form>
 <datalist>
The <datalist> element specifies a list of pre-defined options for an <input> element.
33. Explain about html form tag with its attributes
The <form> tag is used to create an HTML form for user input.
The <form> element can contain one or more of the following form elements:
 <input>
 <textarea>
 <button>
 <select>
 <option>
 <optgroup>
 <fieldset>
 <label>
 <output>
10
<html>
<body>
<h1>The form element</h1>
<form >
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the
server called "action_page.php".</p>
</body>
</html>
34. What is meta tag? What are its attribute and usage?
The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.
<meta> tags always go inside the <head> element, and are typically used to specify character set, page
description, keywords, author of the document, and viewport settings.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other
web services.
Example:
Define a description of your web page:
<meta name="description" content="Free Web tutorials for HTML and CSS">
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
35. Create a simple timetable for two days using Table Tag.
<html>
<body>
<h1>TIME TABLE</h1>
<tr> <th > Hour</th>
<th >I(9-10)</th>
<th >II(10-11)</th>
<th >III(11-12)</th>
<th>IV(1-2)</th>
<th >V(2-3) </th>
11
</tr>
<tr> <td >Monday</td>
<td >Mat</td>
<td >phy</td>
<td >Eng</td>
<td >Che</td>
<td >LIBRARY </td>
</tr>
<tr> <td >Tuesday</td>

<td >Phy</td>
<td >Che</td>
<td >Mat</td>
<td >TEC</td>
<td >LIBRARY </td>
</tr>
</table >
</body>
</html>
36. What is basic text markup? Explain with example

In HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before
and after a paragraph.
<p>This is another paragraph.</p>
HTML headings are titles or subtitles that you want to display on a webpage.
Different Sizes:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
hr tag: This tag places a horizontal line across the system.

These lines are used to break the page.
This tag also contains attribute i.e., width which draws the horizontal line with the screen size of the browser.
font tag: This sets font size, color and relative values for a particular text.
Example: <font size=”10” color=”red”>
Example: <p><font size="30" color=”red”>Hello This is Vignan’s</font></p>
bold tag: This tag is used for implement bold effect on the text
Example: <b> ....... </b>
12
Italic tag: This implements italic effects on the text.
Example: <i>.......</i>
Underline: This The <u> tag represents some text that is unarticulated and styled differently from normal text.
Example: <p>This is some <u> mispled </u> text.</p>
Strong tag: This tag is used to always emphasized the text

Example: <strong>..........</strong>
tt tag: This tag is used to give typewriting effect on the text

Example :<tt>........</tt>
sub and sup tag: These tags are used for subscript and superscript effects on the text.
Example: <sub> ..........</sub>
<sup>...........</sup>
13
Unit-II
1. Explain <article> element in HTML5.
The <article> tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the
site.
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most
popular web browser today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most
popular web browser since January, 2018.</p>
</article>
2. Describe <footer> element in HTML5.
A <footer> element typically contains:
 authorship information
 copyright information
 contact information
 sitemap
 back to top links
 related document
<footer>
<p>Author: Galvin</p>
<p><a href="mailto:galvin@example.com">galvin@example.com</a></p>
</footer>
3. Discuss <header> element in HTML5.
The <header> element represents a container for introductory content or a set of navigational links.
A <header> element typically contains:
 one or more heading elements (<h1> - <h6>)

 logo or icon
 authorship information
<header>
<h1>Main page heading here</h1>
<p>Posted by John Doe</p>
</header>
14
4. Discuss <nav> tag in HTML5.
The <nav> tag defines a set of navigation links.
All links of a document should not be inside a <nav> element.
The <nav> element is intended only for major blocks of navigation links.
<nav>
<a href="/html/">HTML</a>
<a href="/python/">Python</a>
</nav>
5. What is <mark> element in HTML5.

The <mark> tag defines text that should be marked or highlighted.
<html>
<head>
<style>
mark {
background-color: yellow;
color: black;
}
</style>
</head>
<body>
<p>A mark element is displayed like this:</p>
<mark>Highlighted text!!</mark>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
6. Discuss <figure> element in HTML5.

The <figure> tag specifies self-contained content diagrams, photos, code listings, etc.
<figure>
<img src="Tajmahal.jpg" alt="Hindustan" style="width:100%">
<figcaption>Fig.1 - Tajmahal, Aagra, India.</figcaption>
</figure>
7. Discuss <figcaption> element in HTML5.

The <figcaption> tag defines a caption for a <figure> element.<figure>
<img src="Tajmahal.jpg" alt="Hindustan" style="width:100%">
<figcaption>Fig.1 - Tajmahal, Aagra, India.</figcaption>
</figure>
8. What is <embed> element in HTML5.

The <embed> tag defines a container for an external resource, such as a web page, a picture, a media player, or a
plug-in application.
<embed type="image/jpg" src="Tajmahal.jpg" width="300" height="200">
15
9. List CSS font properties of HTML5.

font
font- family
font- size
font- style
10. List different types of selectors in HTML5.
1. Simple Selector
2. Id Selector
3. Class Selector
4. Universal Selector
5. Group Selector and
11. Write anatomy of style rule
body { background-color : grey; } Terminator
Selector Declaration Property Value Separator
12. What are four ways to specify style information in a document

Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file
Embedded- by using CSS rules into an HTML document using the <style> element that is called
embedded CSS. This tag is placed inside <head>...</head> tags.
13. Construct a program using Universal selectors.
Universal-selector: The Universal selector (*) in CSS is used to select all the elements in a HTML document.
It also includes other elements which are inside under another element. Example: * { color: white;
background-color: black; }
The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
16
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p>Me too!</p>
<p>And me!</p>
</body>
</html>
14. Box Model

The CSS box model is a container that contains multiple properties including borders, margin, padding, and
the content itself.
It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of
different elements.
The web browser renders every element as a rectangular box according to the CSS box model.
Box-Model has multiple properties in CSS.
Some of them are given below:
Content: This property is used to displays the text, images, etc, that can be sized using the width & height
property.
Padding: This property is used to create space around the element, inside any defined border.
Border: This property is used to cover the content & any padding, & also allows to set the style, color, and
width of the border.
Margin: This property is used to create space around the element ie., around the border area. Content Area:
This area consists of content like text, images, or other media content. It is bounded by the content edge and
its dimensions are given by content-box width and height.
Padding Area: It includes the element’s padding. This area is actually the space around the content area and
within the border-box. Its dimensions are given by the width of the padding-box and the height of the padding
box.
Border Area: It is the area between the box’s padding and margin. Its dimensions are given by the width and
height of the border.
Margin Area: This area consists of space between border and margin. The dimensions of the Margin area are
the margin-box width and the margin-box height. It is useful to separate the element from its neighbors
17
15. CSS Implementation

<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>

</body>
</html>
16. How CSS is useful ?

 Faster Page Speed. More code means slower page speed. ...
 Better User Experience. CSS not only makes web pages easy on the eye, it also allows for user-friendly
formatting. ...
 Quicker Development Time. ...
 Easy Formatting Changes. ...
 Compatibility Across Devices.
18
17. How HTML-5 is useful ?

 Improved code: HTML5 will enable web designers to use cleaner, neater code. ...
 Elegant forms: HTML5 enables designer to develop fancier/attractive forms. ...
 Consistency: ...
 Supports rich media elements: ...
 Offline Application Cache:
18. Font Attributes

 font-family.
 font-size.
 font-stretch.
 font-style.
19. HTML-5 features

 Video and Audio Features.
 Header and Footer.
 Input tag kinds have been expanded.
 Figure and figcaption.
 Placeholders.
 Preload Videos.
20. HTML-5 Supported Audio Files

audio/ogg .oga
audio/wav .wav
video/ogg .ogv .ogg
video/mp4 .mp4
21. List the Tags used for HTML-5 graphics
 <canvas> element
 The HTML <svg> element (SVG stands for Scalable Vector Graphics)
22. External style sheet and Linking Process

External Program Segment to be linked (named demo.css):
body{ background-color : cyan}
h1{color:white;
text-align:center}
Actual Program:
<html>
<head>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<h1> Vignan </h1>
19
</body>
</html>
Output:
23. Few HTML-5 Elements

<article>
<html>
<body>
<h1>The article element</h1>
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most
popular web browser today!</p>
</article>
</body>
</html>
<aside>
<html>
<body>
<h1>The aside element</h1>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I
had a great summer together with my family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions,
award-winning fireworks and seasonal special events.</p>
</aside>
</body>
</html>
<figcaption>
<html>
<body>
<h1>The figure and figcaption element</h1>
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
20
</figure>
</body>
</html>.
<figure>
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<html>
<body>
<h1>The figure and figcaption element</h1>
<figure>
<img src="taj.jpg" alt="Tajmahal" style="width:100%">
<figcaption>Fig.1 - Taj, Aagra, India.</figcaption>
</figure>
</body>
</html>.
24. Meta Tag:

The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.
<meta> tags always go inside the <head> element, and are typically used to specify character set, page
description, keywords, author of the document, and viewport settings.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other
web services.
Example:
<meta name="description" content="Free Web tutorials for HTML and CSS">
25. Canvas Tag:

The HTML <canvas> element is used to draw graphics on a web page.
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
The <canvas> element must have an id attribute so it can be referred to by JavaScript.
The width and height attribute is necessary to define the size of the canvas.
Canvas Example..
In HTML, a <canvas> element looks like this:
<canvas id="myCanvas" width="200" height="100"></canvas>
<html>
<body>
<h1>The canvas element</h1>
<canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 100);
</script>
</body>
21
</html>
Output of above Program:
26. CSS Table Properties:

i) Table Borders
To specify table borders in CSS, use the border property.
Example:
table, th, td
{
border: 1px solid;
}
ii) Table Width and Height (Size)

The width and height of a table are defined by the width and height properties.
table {
width: 100%;
}
th {
height: 70px;
}
iii) Table Alignment

The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.
By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.
To center-align the content of <td> elements as well, use text-align: center:
Example:
td {
text-align: center;
}
iv) Table Padding

To control the space between the border and the content in a table, use the padding property on <td>
and <th> elements:
th, td {
padding: 15px;
text-align: left;
}
22
v) Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to display the full content:
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
27. Media Tags used in HTML

<audio> Tag: It is a useful tag if you want to add audio such as songs, or any sound files into your
webpage.
Syntax:
<audio>
<source src="sample.mp3" type="audio/mpeg">
</audio>
<video>: It is a standard way to embed a video into your web page.
Syntax:
<video src="" controls> </video>
<source>: As you can observe that <audio>, <video> elements contain the <source> element, the
<source> tag is used to attach multimedia files.
Syntax:
<source src="" type="">
...
</source>
28. Tags used for HTML-5 forms.

The <input> element can be displayed in several ways, depending on the type attribute.
<input type="text" id="fname" name="fname">
The <label> Element

The <label> element defines a label for several form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label
when the user focus on the input element.
The <select> Element

The <select> element defines a drop-down list:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):
23
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
The <button> Element

The <button> element defines a clickable button:
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
29. CSS font properties with examples?
1) CSS Font Color
CSS font color is a standalone attribute in CSS although it seems that it is a part of CSS fonts. It is used to
change the color of the text.
There are three different formats to define a color:
 By a color name
 By hexadecimal value
 By RGB
In the above example, we have defined all these formats.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { color: red; }
h2 { color: #9000A1; }
p { color:rgb(0, 220, 98); }
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>
2. CSS font family can be divided in two types:
 Generic family: It includes Serif, Sans-serif, and Monospace.
24
 Font family: It specifies the font family name like Arial, New Times Roman etc.
 Serif: Serif fonts include small lines at the end of characters. Example of serif: Times new roman,
Georgia etc.
Sans-serif: A sans-serif font doesn't include the small lines at the end of characters. Example of Sans-serif:
Arial, Verdana etc.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { font-family: sans-serif; }
h2 { font-family: serif; }
p { font-family: monospace; }
}
</style>
</head>
<body>
<h1>This heading is shown in sans-serif.</h1>
<h2>This heading is shown in serif.</h2>
<p>This paragraph is written in monospace.</p>
</body>
</html>
3) CSS Font Size
CSS font size property is used to change the size of the font.
<html>
<head>
<title>Practice CSS font-size property</title>
</head>
<body>
<p style="font-size:xx-large;"> This font size is extremely large. </p>
<p style="font-size:smaller;"> This font size is smaller. </p>
<p style="font-size:larger;"> This font size is larger. </p>
<p style="font-size:200%;"> This font size is set on 200%. </p>
<p style="font-size:20px;"> This font size is 20 pixels. </p>
25
</body>
</html>
30. Formatting tools of CSS (formatters in css)
 Text Color: This property is used to set the color of the text and the color can be set by using a color
name like “red”, hex value “#ff0000”, or by its RGB value “rgb(255,0,0)”;
 Text-align: This property in CSS is used to specify the horizontal alignment of text in an element inside
a block element or table-cell box.
 Text-align-last: It is used to set the last line of the paragraph just before the line break. It sets the
alignment of all the last lines occurring in the element in which the text-align-last property is applied.
 Text-decoration: text-decoration property is used to “decorate ” the content of the text.
 Text-decoration-color: It is used to set the color of the decorations (overlines, underlines, and line-
throughs) over the text.
 Text-decoration-line: It is used to set the various kinds of text decorations. this may include many
values such as underline, overline, line-through, etc.
31. Class Selector

The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
32. 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.
<html>
<head>
<style>
#para1 {
26
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>
</body>
</html>
33. Compare HTML & HTML-5
HTML HTML-5
It didn’t support audio and video without the It supports audio and video controls with the
use of flash player support. use of <audio> and <video> tags.
Does not allow JavaScript to run in browser. Allows JavaScript to run in background. This
is possible due to JS Web worker API in
HTML5.
It works with all old browsers. It supported by all new browser like Firefox,
Mozilla, Chrome, Safari, etc.
Older version of HTML are less mobile- HTML5 language is more mobile-friendly.
friendly.
Elements like nav, header were not present. New element for web structure like nav,
header, footer etc.
Being an older version , it is not fast , flexible , and It is efficient, flexible and more fast in comparison to
efficient as compared to HTML5. HTML.
34. Inline CSS- Internal CSS-External CSS

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the text color of the <p> element
to red:
<!DOCTYPE html>
<html>
<body>
27
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text
color of ALL the <p> elements to red. In addition, the page will be displayed with a "powderblue"
background color:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML page:
External Program Segment to be linked (named demo.css):
body{ background-color : cyan}
h1{color:white;
text-align:center}
Actual Program:
<html>
<head>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<h1> Vignan </h1>
</body>
</html>
35. Display Below page using CSS
28
Vignan (use div)
hyperlink1 hyperlink2 hyperlink3 (use nav)
ASSAM (should (BENGAL) ODISHA (should

be a div) be a div)
Central area
footer (should be a div)
<html>
<head>
<style>
div.a {
text-align: center;
font-size: 200%;
}
div.b {
text-align: left;
font-size: 200%;
}
div.c {
text-align: right;
font-size: 200%;
}
</style
</head>
<body>
<h1><Center>Vignan Engg College</center></h1>

<nav>
<align=left><a href="https://www.jntuk.edu.in/">JNTUK</a> |
<a href="https://www.andhrauniversity.edu.in/">AU</a> |
<a href="https://vignaniit.edu.in/">VIIT</a>
</nav>
29
<body bgcolor="aquablue">
<div class="a">
<p font size=20>Assam</p>
</div>
<div class="b">
<p>Bengal</p>
</div>
<div class="c">
<p>Odisha</p>
</div>
<footer>
<p>Author: AI_DS<br>
<a href="https://vignaniit.edu.in/">Click here to open VIIT Website</a></p>
</footer>
</body>
</html>
Unit-III
1. What is XML?
 XML stands for eXtensible Markup Language
 XML is a markup language much like HTML
 XML was designed to store and transport data
 XML is a W3C Recommendation
 XML simplifies data sharing
 XML simplifies data transport
 XML simplifies platform changes
 XML simplifies data availability
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
The XML above is quite self-descriptive:
 It has sender information

 It has receiver information
 It has a heading
 It has a message body
 XML was designed to carry data - with focus on what data is

 HTML was designed to display data - with focus on how data looks
 XML tags are not predefined like HTML tags are predefined.
30
2. Schema/xsd: (schema file will be saved with .xsd extension)

An XML Schema describes the structure of an XML document, just like a DTD.
An XML document with correct syntax is called "Well Formed".
An XML document validated against an XML Schema is both "Well Formed" and "Valid".
 XML Schemas are written in XML

 XML Schemas are extensible to additions
 XML Schemas support data types
 XML Schemas support namespaces
 It is easier to describe document content

 It is easier to define restrictions on data
 It is easier to validate the correctness of data
 It is easier to convert data between different data types
3. Document Type Definition

An XML document with correct syntax is called "Well Formed".
An XML document validated against a DTD is both "Well Formed" and "Valid".
DTD stands for Document Type Definition.
31
A DTD defines the structure and the legal elements and attributes of an XML document.
With a DTD, independent groups of people can agree to use a standard DTD for interchanging data.
With a DTD, you can verify that the data you receive from the outside world is valid.
You can also use a DTD to verify your own data.
4. Namespaces:
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.
<table>
<tr>
<td>Apples</td>
<td>Bananas</td>
</tr>
</table>
<table>
<name>African Coffee Table</name>
<width>80</width>
<length>120</length>
</table>
If the above XML fragments were added together, there would be a name conflict. Both contain a <table>
element, but the elements have different content and meaning.
Name conflicts in XML can easily be avoided using a name prefix.
<h:table>
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>
<f:table>
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
32
5. List the Characteristics of XML
 Extensible and Human Readable. Even if additional data is added, most XML applications will continue to
function as intended.
 Overall Simplicity. ...
 Separates Data from HTML. ...
 Allows XML Validation. ...
 XML Supports Unicode. ...
 Used to Create New Languages.
6. #PCDATA in xml
PCDATA means Parsed Character Data. It is used in DTDs to describe the type of the XML data. It simply
means the specific element contains data that should be parsed by the parser and should not be ignored.
The CDATA on the other hand tells the parser not to worry about the data. ie., telling it not to parse it.
7. Convert the given information into a xml file
Ration
PAN NAME AREA PIN
AW54325 MURTHY SIRIPURAM 533006
AW22563 MOHAN TUNI 530404
AW57325 RAMESH GOA 531212
<Ration>
<PAN>AW54325</PAN>
<NAME>MURTHY</NAME>
<AREA>SIRIPURAM</AREA>
<PIN>533006</PIN>
<PAN> AW22563</PAN>
<NAME> MOHAN </NAME>
<AREA> TUNI </AREA>
<PIN>530404</PIN>
<PAN> AW57325</PAN>
<NAME> RAMESH </NAME>
<AREA> GOA </AREA>
<PIN>531212</PIN>
</Ration>
Output:
33
8. DTD and XSD Comparison
No. DTD XSD
1) DTD stands for Document Type XSD stands for XML Schema Definition.
Definition.
2) DTDs are derived from SGML syntax. XSDs are written in XML.
3) DTD doesn't support datatypes. XSD supports datatypes for elements and
attributes.
4) DTD doesn't support namespace. XSD supports namespace.
5) DTD doesn't define order for child XSD defines order for child elements.
elements.
6) DTD is not extensible. XSD is extensible.
7) DTD is not simple to learn. XSD is simple to learn because you don't need to
learn new language.
8) DTD provides less control on XML XSD provides more control on XML structure.
structure.
9. xml document validation steps

o It must begin with the XML declaration.
o It must have one unique root element.
o All start tags of XML documents must match end tags.
o XML tags are case sensitive.
o All elements must be closed.
34
o All elements must be properly nested.
o All attributes values must be quoted.
o XML entities must be used for special characters.
10. Distinguish XML and HTML
XML HTML
The main purpose is to focus on the transport of Focuses on the appearance of data. Enhances the
data and saving the data appearance of text
XML is dynamic because it is used in the transport HTML is static because its main function is in the
of data display of data
It is case-sensitive. The upper and lower case needs It is not case-sensitive. Upper and lower case are of
to be kept in mind while coding not much importance in HTML
You can define tags as per your requirement, but It has its own pre-defined tags, and it is not
closing tags are mandatory necessary to have closing tags
Any error in the code shall not give the final Small errors in the coding can be ignored and the
outcome outcome can be achieved
11. Document Type Definition

xml program
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
Document Type Definition for the Above xml program
<?xml version="1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to, from, heading, body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
35

WD Material

Uploaded by

Copyright:

Available Formats

You might also like

WD Material

Uploaded by

Document Information

Original Description:

Original Title

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

WD Material

Uploaded by

Copyright:

Available Formats

WD_Study Material WD_Study Material WD_Study Material

3. What is Body element in HTML

4. What is “hr” tag in HTML

5. What is font tag in HTML

6. What is <b> Tag in HTML

8. What is <strong> in HTML

9. What is <tt>tag in HTML

10. What is <sub> and <sup> tags in HTML

11. What is <a> tags in HTML

GET &POST Methods

<form method="get" action="www.w3c.com/search">

The POST Method

<form method="post" action="www.w3c.com.com/user">

12. How Tag is different from Element.

HTML Tags HTML Elements

Whatever written within a HTML tag are HTML

HTML tags are almost like keywords where every

13.How absolute url is different from relative url.

Absolute url Relative url.

16. Full form of url

The <img> tag has two required attributes:

 src - Specifies the path to the image

a form for collecting long essay entries post

19. Describe the purpose of alternative text?

20. What is Table tag in HTML and list their attributes.

22. Draw and explain the format of HTML program

23. List and write the syntax of few formatting tags

Ordered HTML List

Table border <table border="">...</table>

Alignment <table align=center/left/right>...</table>

Colspan in table <table colspan=" ">...</table>

Rowspan in table <table rowspan=" ">...</table>

Add caption <caption>..</caption>

27. How Image mapping is achieved explain with its syntax

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

<label> Firstname </label>

30. Create html page for various bullet styles

31. Mention the various form elements with examples

<label for="fname">First name:</label>

The <label> element defines a label for several form elements.

<label for="fname">First name:</label>

The <select> element defines a drop-down list:

<label for="cars">Choose a car:</label>

The <textarea> element defines a multi-line input field (a text area):

<textarea name="message" rows="10" cols="30">

The <button> element defines a clickable button:

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

<label for="fname">First name:</label><br>

33. Explain about html form tag with its attributes

<h1>The form element</h1>

<tr> <td >Tuesday</td>

36. What is basic text markup? Explain with example

hr tag: This tag places a horizontal line across the system.

Strong tag: This tag is used to always emphasized the text

tt tag: This tag is used to give typewriting effect on the text

The <article> tag specifies independent, self-contained content.