Scribd
Upload
27 views39 pages

WAD Module 1

Web Application Devlopnment

Uploaded by

Madhav Yamjala
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
27 views39 pages

WAD Module 1

Web Application Devlopnment

Uploaded by

Madhav Yamjala
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

MODULE-1

PART-A
1)Write a program for Shifting Images Between Transparent and Opaqu?

A) <!DOCTYPE html>

<html>

<head>

<style>

img {

opacity: 0.5;

img:hover {

opacity: 1.0;

</style>

</head>

<body>

<h1>Image Transparency</h1>

<p>The opacity property is often used together with the :hover selector to change the opacity on
mouse-over:</p>

<img src="img_forest.jpg" alt="Forest" width="170" height="100">

<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">

<img src="img_5terre.jpg" alt="Italy" width="170" height="100">

</body>

</html>

2) Design a web application with paragraph tag and use some text formatting tags.

A) <!DOCTYPE html>
<html>

<body>

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

<strong>This text is important!</strong>


<i>This text is italic</i>
<em>This text is italic</em>
<small>This text is italic</small>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>Do not forget to buy <del>milk</del> today.</p>
<p>Do not forget to buy <sub>milk</sub> today.</p>
<p>Do not forget to buy <sup>milk</sup> today.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
</body>

</html>

3) Design the webpage while defining different elements under the fieldset.

A) <form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
4) Design the static web pages required for an online book store web site
A)

5) Embed Audio and Video into your HTML web page

A)part-c q.no-9
6) Create a webpage with HTML describing your department

A) <!DOCTYPE HTML>

<html>

<head>

<title> department of data science </title>

</head>

<body>

<font color="blue" size="6"> Computer Science and Engineering (Data


Science)</font>

<hr color="blue">

<p>

This B.Tech program in Computer Science and Engineering (Data Science)


is<br>

specifically designed and offered by the department of Computer Science


and<br>

Engineering in response to the rapidly developing field of Data Science from


the<br>

academic year 2021-2022 with an intake of 180.

</p>

<br>

<p><strong> Data Science is an emerging area of Computer Science and


Engineering (CSE).<br>

The B.Tech Program in CSE has been accredited by National


Board<br>

of Accreditation (NBA) successively four times i.e. in 2008, 2011,


2016, and<br>

2019 and the M.Tech program in CSE got accredited by National


Board of<br>

Accreditation (NBA) in the year 2019 (Valid till 30 June, 2022)

</strong></p>

<br>

<p> Data Science is an interdisciplinary field of Computer Science, which<br>

continuously evolve as one of the most promising and in-demand career


paths<br>
for skilled professionals. Today, successful data professionals should master
the<br>

full spectrum of the data science life cycle and programming skills.<br>

</p>

<p>

the main objective of the department is :

<ol type="1">

<li> Career Focused Learning</li>

<li> Enhance Knowledge</li>

<li> Employment</li>.

</ol>

</p>

<p>

Skills gained includes, creating algorithms and models to extract, process,


visualize and find hidden patterns from the raw information. <br>

Data Extraction and Transformation, Statistical Analysis, Data Manipulation,


visualization, Machine Learning, and predictive<br>

Modeling.These skills are required in almost all industries, causing skilled


data scientists to be increasingly valuable to companies.<br>

</p>

<table border="2" bordercolor="skyblue" width="60%" >

<thead bgcolor="skyblue">

<tr> <td><font color="white"> CAREER PROSPECTIVE FOR DATA


SCIENCE STUDENTS </td> </tr></font>

</thead>

<tbody><td>

<ul>

<li> Data Analyst</li>

<li> Data Specialist</li>

<li> Data Consultant </li> </td></ul>

</tbody>

</table>
</body>

</html>

7) Write a program and Apply various colors to suitably distinguish key words, also apply font styling
like italics, underline and two other fonts to words you find appropriate, also use header tags

A) <!DOCTYPE html>

<html>

<body>

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

<strong>This text is important!</strong>


<i>This text is italic</i>
<em>This text is italic</em>
<small>This text is italic</small>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>Do not forget to buy <del>milk</del> today.</p>
<p>Do not forget to buy <sub>milk</sub> today.</p>
<p>Do not forget to buy <sup>milk</sup> today.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
</body>

</html>

8) Write a program to display the images scrolling,text scrolling

A) <!DOCTYPE html>

<html>

<head>

<style>

html {

scroll-behavior: smooth;

}
#section1 {

height: 600px;

background-color: pink;

.bg-image {

/* Full height */

height: 50%;

/* Center and scale the image nicely */

background-position: center;

background-repeat: no-repeat;

background-size: cover;

.img1 { background-image: url("img_snow.jpg"); }

.img2 { background-image: url("img_girl.jpg"); }

</style>

</head>

<body>

<h1>Smooth Scroll</h1>

<div class="main" id="section1">

<h2>Section 1</h2>

<p>Click on the link to see the "smooth" scrolling effect.</p>

<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>

<p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>

</div>

<div class="bg-image img1"></div>

<div class="bg-image img2"></div>

<p><strong>Note:</strong> The scroll-behavior property is not supported in Internet Explorer.</p>


</body>

</html>

9) Create your class time table in a webpage.


A) <!DOCTYPE html>

<html>

<body>

<h1>TIME TABLE</h1>

<table border="5" cellspacing="0" align="center">

<!--<caption>Timetable</caption>-->

<tr>

<td align="center" height="50"

width="100"><br>

<b>Day/Period</b></br>

</td>

<td align="center" height="50"

width="100">

<b>I<br>9:30-10:20</b>

</td>

<td align="center" height="50"

width="100">

<b>II<br>10:20-11:10</b>

</td>

<td align="center" height="50"

width="100">

<b>III<br>11:10-12:00</b>

</td>

<td align="center" height="50"

width="100">
<b>12:00-12:40</b>

</td>

<td align="center" height="50"

width="100">

<b>IV<br>12:40-1:30</b>

</td>

<td align="center" height="50"

width="100">

<b>V<br>1:30-2:20</b>

</td>

<td align="center" height="50"

width="100">

<b>VI<br>2:20-3:10</b>

</td>

<td align="center" height="50"

width="100">

<b>VII<br>3:10-4:00</b>

</td>

</tr>

<tr>

<td align="center" height="50">

<b>Monday</b></td>

<td align="center" height="50">Eng</td>

<td align="center" height="50">Mat</td>

<td align="center" height="50">Che</td>

<td rowspan="6" align="center" height="50">

<h2>L<br>U<br>N<br>C<br>H</h2>

</td>

<td colspan="3" align="center"

height="50">LAB</td>

<td align="center" height="50">Phy</td>


</tr>

<tr>

<td align="center" height="50">

<b>Tuesday</b>

</td>

<td colspan="3" align="center"

height="50">LAB

</td>

<td align="center" height="50">Eng</td>

<td align="center" height="50">Che</td>

<td align="center" height="50">Mat</td>

<td align="center" height="50">SPORTS</td>

</tr>

<tr>

<td align="center" height="50">

<b>Wednesday</b>

</td>

<td align="center" height="50">Mat</td>

<td align="center" height="50">phy</td>

<td align="center" height="50">Eng</td>

<td align="center" height="50">Che</td>

<td colspan="3" align="center"

height="50">LIBRARY

</td>

</tr>

<tr>

<td align="center" height="50">

<b>Thursday</b>

</td>

<td align="center" height="50">Phy</td>

<td align="center" height="50">Eng</td>


<td align="center" height="50">Che</td>

<td colspan="3" align="center"

height="50">LAB

</td>

<td align="center" height="50">Mat</td>

</tr>

<tr>

<td align="center" height="50">

<b>Friday</b>

</td>

<td colspan="3" align="center"

height="50">LAB

</td>

<td align="center" height="50">Mat</td>

<td align="center" height="50">Che</td>

<td align="center" height="50">Eng</td>

<td align="center" height="50">Phy</td>

</tr>

<tr>

<td align="center" height="50">

<b>Saturday</b>

</td>

<td align="center" height="50">Eng</td>

<td align="center" height="50">Che</td>

<td align="center" height="50">Mat</td>

<td colspan="3" align="center"

height="50">SEMINAR

</td>

<td align="center" height="50">SPORTS</td>

</tr>

</table>
</body>

</html>

10) Design the static web pages required for an online shopping cart.
A)part-a q.no-4

PART-B
1)Name some new features which were not present in HTML but are
added to HTML5?
A) Intro to audio and video:- Audio and Video tags are two major
addition to html5.It allows developers toembed audio andvideo on
their websites.html5 video can use css and css3 to style the video tag
Ex:- <video width = "300" height = "200" controls autoplay>

<source src = "/html5/foo.ogg" type ="video/ogg" />


<source src = "/html5/foo.mp4" type = "video/mp4" />
</video>

<audio controls autoplay>


<source src = "/html5/audio.ogg" type = "audio/ogg" />
<source src = "/html5/audio.wav" type = "audio/wav" />
</audio>
2)Vector Graphics:-It is used to draw graphics with various shapes
and colors via scripting usually js.these are scalable easy to edit and
create.it also supports inter activity and animations.
Ex:- <svg id = "svgelem" height = "200" xmlns =
"http://www.abc.org/2000/svg">

<circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red"


/>
</svg>
3)Header and footer:-header is placed at the top of the webpage and
footer is placed at the bottom of the webpage.header contain
headings,logo and authorship information.footer contains authorship
information,copyrights,contact information and next link to load.
Ex:- <header>

<h1>This is the heading.</h1>


<h4>This is the sub-heading.</h4>

<p>This is the metadata.</p>

</header>
<footer>
<nav>

<p>
<a href=
"https://www.geeksforgeeks.org/about/">About Us</a>

</p>

</nav>

<p>@geeksforgeeks, Some rights reserved</p>

</footer>
4)Figure and figcaption:- HTML5 allows to use a <figure> element to
mark up a photo in a document, and a <figcaption> element to
define a caption for the photo. The <figcaption> tag defines a caption
for a <figure> element.
Ex:- <figure>

<img
src="https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/
download3.png" alt="GFG" style="width:50%">
<figcaption>Fig.1 - Geeksforgeeks.</figcaption>
</figure>
5) Nav tag:-The <nav> tag defines a set of navigation links. It is used
for the part of an internet site that links to different pages at the
website. The hyperlinks can be organized through a number of
approaches.
Ex:- <nav>

<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
<a href="/js/">JavaScript</a>
<a href="/jquery/">jQuery</a>
</nav>
2) What is Anchor tag and how can you open an URL into a new tab
when clicked?
A) The HTML anchor tag defines a hyperlink that links one page
to another page. It can create hyperlink to other web page as
well as files, location, or any URL. The "href" attribute is the
most important attribute of the HTML a tag. and which links to
destination page or URL.
Syntax:- <a href = "..........."> Link Text </a>
To open link:- we use target as _blank to open link in new tab
<a href="https://www.w3schools.com/" target="_blank">Visit
W3Schools!</a>
3) Write an HTML code to form a table to show the below values in a
tabular form with heading as Roll No., Student name, Subject Name,
and values as Ram, Physics Shyam, Math Murli, Chemistry?
A) <!DOCTYPE html>
<html>
<head>
<title>CODE</title>
<style type="text/css">
table{
border : 1px solid black;
}
td{
border : 1px solid black;
}
th{
border : 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<th>Roll No.</th>
<th>Student Name</th>
<th>Subject Name</th>
</thead>
<tr>
<td>1</td>
<td>Ram</td>
<td>Physics</td>
</tr>
<tr>
<td>2</td>
<td>Shyam</td>
<td>Math</td>
</tr>
<tr>
<td>3</td>
<td>Murli</td>
<td>Chemistry</td>
</tr>
</table>
</body>
</html>
4) Explain the structure of the HTML webpage.

• A) The <!DOCTYPE html> declaration defines that this document is an


HTML5 document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page (which is shown
in the browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph

5) Explain list elements in HTML.

A) Unordered HTML List


An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</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:

Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

HTML Description Lists


HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
6) Define iframe in HTML.

A) The <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML
document.

Tip: Use CSS to style the <iframe> (see example below).

Tip: It is a good practice to always include a title attribute for the <iframe>.
This is used by screen readers to read out what the content of the <iframe> is.

Ex:- <iframe src="https://www.w3schools.com" title="W3Schools Free


Online Web Tutorials"></iframe>
7) Define forms in HTML.

A) HTML Form
An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for
processing such as name, email address, password, phone number, etc. .

HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the
form such as shipping address and credit/debit card details so that item can be sent
to the given address.

1. <form>
2. <label for="password">Password: </label>
3. <input type="password" id="password" name="password"/> <br/>

4. </form>
8) In how many ways can a heading be written in HTML?
A) HTML defines six levels of headings, and these heading elements are H1, H2, H3, H4, H5, and H6.
The H1 element is the highest or most important level, and the H6 element is the least important.
These different heading levels help to communicate the organization and hierarchy of the content
on a page. For example, headings with an equal or higher ranking indicate the start of a new
section, and headings with a lower rank indicate the start of a new subsection that is part of a
higher-ranked section.
9) What are the various formatting tags in HTML?.

A) Formatting elements were designed to display special types of text:

• <b> - Bold text


• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text

10) Explain the layout of HTML.


A) A page layout defines the appearance of a website. An HTML layout is a structure that
helps the user navigate through web pages easily. It is a way in which you can design web
pages using simple HTML tags.

HTML Layout Elements

HTML contains different elements that define the structure of a web page:

• <header>:This defines a header for a web page


• <nav>: This defines a container for navigation links

• <section>: This defines a section in a web page

• <article>: This is the primary element that contains information about the
web page

• <aside>: The <aside> content is often placed as a sidebar in a document

• <footer>: This defines a footer for a document or a section

• <details>: This is used to define additional details

• <summary>: This defines a heading for the <details> element

11) What is the difference between DIV and SPAN in HTML?


A) HTML <div> tag: The div tag is known as Division tag. The div tag is used in HTML to make
divisions of content on the web page like (text, images, header, footer, navigation bar, etc). Div tag
has both opening(<div>) and closing (</div>) tags and it is mandatory to close the tag. As we know
Div tag is a block-level tag. In this example, the div tag contains the entire width. It will be displayed
div tag each time on a new line, not on the same line.
Ex:- <body>
<div> div tag </div>
</body>
HTML <span> tag: The HTML span element is a generic inline container for inline elements and
content. It used to group elements for styling purposes (by using the class or id attributes). A better
way to use it when no other semantic element is available. The span tag is very similar to the div tag,
but div is a block-level tag and span is an inline tag.
Ex:- <p><span style="background-color:lightgreen">
GeeksforGeeks</span> is A Computer Science Portal
where you can<span style="color:blue;">
Publish</span> your own <span
style="background-color:lightblue;">articles</span>
and share your knowledge with the world!!
</p>
12) How to make a picture of a background image of a web page?

A) To add a background image on an HTML element, use the


HTML style attribute and the CSS background-image property:
Ex:- <style>
body {
background-image: url('img_girl.jpg');
}
</style>
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
13) How do you create text on a webpage that allows you to send an email when clicked?
A) <a href="mailto:[email protected]">Send email</a>
14) What is the advantage of grouping several checkboxes together?

A) Although checkboxes don’t affect one another, grouping checkboxes together help
to organize them. Checkbox buttons can have their name and do not need to belong
to a group. A single web page can have many different groups of checkboxes.

15)repeated q no-5

16) What are logical and physical tags in HTML?

A)

S.No. Logical tags Physical tags

Physical tags are used to decide the


Logical tags describe the behaviour, nature of appearance of the text and do not
content for the text enclosed inside the tag. They provide any information about the
1. represent the function of text on the page. text.

2. It carries certain obligations. It is extremely straightforward.

It is used to indicate the specific


3. It is used to mention visually impaired texts. characters which need formation.

Page accessibility is comparatively


4. Here, the pages are more accessible. low.

This concept is dependent upon


5. It supports the latest technology. weak tools.

Logical tags are used to provide information by Physical tags are used to style the
6.
giving the special importance to the text. For content only. For instance, <i> is
S.No. Logical tags Physical tags

instance, <em> tag is used to emphasize the text used to display the text in italic
by representing it in italic format. format.

S.No.

Logical tags

Physical tags

1.

Logical tags describe the behaviour, nature of content for the text enclosed inside the
tag. They represent the function of text on the page.

Physical tags are used to decide the appearance of the text and do not provide any
information about the text.

2.

It carries certain obligations.

It is extremely straightforward.

3.

It is used to mention visually impaired texts.

It is used to indicate the specific characters which need formation.

4.

Here, the pages are more accessible.

Page accessibility is comparatively low.

5.
It supports the latest technology.

This concept is dependent upon weak tools.

6.

Logical tags are used to provide information by giving the special importance to the
text. For instance, <em> tag is used to emphasize the text by representing it in italic
format.

Physical tags are used to style the content only. For instance, <i> is used to display the
text in italic format.

17) How can you apply JavaScript to a web page?

A) 1 | Create a JavaScript file


In your project, in the same folder as your index.html page, create a
new file called my-project.js. All of your project’s JavaScript code
should be written in .js files.

2 | Add some test code to the file

In your new file my-project.js, add the code below:


console.log('It works!');

This code will show the message “It works!” in your browser’s
developer output window, which we will look at soon.

3 | Add the file to your web page

In your index.html file, add a script tag to load your new JavaScript.
The script tag should be the last line of code before your
closing body tag.
This is the line you need to add:
<script src="my-project.js"></script>

And this is an example HTML file including the new line:


<!doctype html>
<html> <head>
<title>Example Page</title>
</head> <body> <h1>Welcome to my Example Page</h1>
<p>This is some page content.</p> <script src="my-
project.js"></script> </body></html>

4 | Save your files

Make sure you have saved all your files, especially your new my-
project.js and your changes to index.html.

5 | Open the web page in Google Chrome

In your normal operating system’s folder browser, find


your index.html file. Right click the file and choose “Open with
Google Chrome”.

6 | Open the Developer Console

In Chrome, click on the options menu at the top right, which looks
like three little dots. Go to More Tools then click Developer
Tools.

In the developer tools, click on the tab called Console and you
should see your message “It works!”

If you do not see the message, you will need to double-check that
you have followed the steps correctly.
18)What is the use of a span tag? Give one example.
A)refer Q.no-11
19) What are the features of HTML?

A) 1) It is a very easy and simple language. It can be easily understood and modified.

2) It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.

3) It is a markup language, so it provides a flexible way to design web pages along


with the text.

4) It facilitates programmers to add a link on the web pages (by html anchor tag), so
it enhances the interest of browsing of the user.

5) It is platform-independent because it can be displayed on any platform like


Windows, Linux, and Macintosh, etc.

6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages
which makes it more attractive and interactive.

7) HTML is a case-insensitive language, which means we can use tags either in lower-
case or upper-case.

20) What is the difference between HTML elements and tags?


A)

HTML Tags HTML Elements HTML Attributes

HTML attributes are used to


describe the characteristic
HTML tags are used to HTML element of an HTML element in
hold the HTML element. holds the content. detail.

Whatever written
within a HTML tag
HTML tag starts with < are HTML HTML attributes are found
and ends with > elements. only in the starting tag.

HTML tags are almost HTML attributes specify


like keywords where HTML elements various additional
every single tag has specifies the properties to the existing
unique meaning. general content. HTML element.
MODULE-1
PART-C
1)What are tags and attributes in HTML?

A) HTML Tags: Tags are the starting and ending parts of an HTML element. They begin with < symbol
and end with > symbol. Whatever written inside < and > are called tags.
Example:

• html

<b> </b>

HTML elements: Elements enclose the contents in between the tags. They consist of some kind of
structure or expression. It generally consists of a start tag, content and an end tag.
Example:

• html

<b>This is the content.</b>

This is the content.

Where, <b> is the starting tag and </b> is the ending tag.
HTML Attributes: It is used to define the character of an HTML element. It always placed in the
opening tag of an element. It generally provides additional styling (attribute) to the element.
Example:

• html

<p align="center">This is paragraph.</p>

This is paragraph.

2) What are void elements in HTML?


A) Most of the HTML elements are surrounded by start and end tags to specify the starting and end
of the element.

There is a special group of elements that only have start tags and does not contain any content
within it, these elements are called void elements. Void elements doesn’t have ending tags and can
only have attributes but do not contain any kind of content. These elements can have backslash
before ending of start tag but that is completely optional. Example of such elements
are <br>, <hr>, <img>, <input>, <link>, <base>, <meta>, <param>, <area>, <embed>, <col>, <track>,
<source> etc.

Characteristics:

• Void elements do not have end tags.

• Void elements cannot have content inside it.

• Void elements have attributes.

• Void elements cannot be nested.

2) What are HTML Entities?

A) Some characters are reserved in HTML and they have special meaning when used
in HTML document. For example, you cannot use the greater than and less than signs
or angle brackets within your HTML text because the browser will treat them
differently and will try to draw a meaning related to HTML tag.

HTML processors must support following five special characters listed in the table
that follows.

Symbol Description Entity Name Number Code

" quotation mark &quot; &#34;

' apostrophe &apos; &#39;

& ampersand &amp; &#38;

< less-than &lt; &#60;

> greater-than &gt; &#62;

3) What is the significance of ¡head¿ and ¡body¿ tag in HTML?


A) Html Head and body tags
The <body> tag defines the document’s body.
The <body> element contains all the contents of an HTML document,
such as text, hyperlinks, images, tables, lists, etc.

The <head> element is a container for all the head elements.


The <head> element must include a title for the document, and can
include scripts, styles, meta information, and more.
The following elements can go inside the <head> element:

• <title>
• <style>
• <base>
• <link>
• <meta>
• <script>
• <noscript>
5) How is Cell Padding different from Cell Spacing?

• A) Cellpadding:

Cellpadding specifies the space between the border of a table cell and
its contents (i.e) it defines the whitespace between the cell edge and
the content of the cell.

Syntax:
<table cellpadding="value" >.....</table>
where, value determines the padding
(space between the border of a table and its content)
• Cellspacing:
Cellspacing specifies the space between cells (i.e) it defines the
whitespace between the edges of the adjacent cells.
Syntax:
<table cellspacing="value" >.....</table>
where, value determines the padding
(space between adjacent cells)

6) How can we club two or more rows or columns into a single row or column in an HTML table?
A) To merge cells in HTML, use the colspan and rowspan attribute. The rowspan
attribute is for the number of rows a cell should span, whereas the colspan attribute is
for a number of columns a cell should span.

Both the attribute will be inside the <td> tag. The number will be a numeric value, for
example, 2 for 2 rows if rowspan, 2 for 2 columns if column span.

Example
Firstly, we will see how to create a table in HTML with 3 rows and 3 columns

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
width: 100px;
height: 50px;
}
</style>
</head>

<body>
<h1>Heading</h1>
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

7) Is it possible to change an inline element into a block level element?


A) You can change the visual presentation of an element using the CSS display property. For
example, by changing the value of display from "inline" to "block", you can tell the browser to render
the inline element in a block box rather than an inline box, and vice versa. However, doing this will
not change the category and the content model of the element. For example, even if the display of
the span element is changed to "block", it still would not allow to nest a div element inside it.

8) How to handle events in HTML?

A) HTML events are "things" that happen to HTML elements.

When JavaScript is used in HTML pages, JavaScript can "react" on these


events.

HTML Events
An HTML event can be something the browser does, or something a user
does.

Here are some examples of HTML events:

• An HTML web page has finished loading


• An HTML input field was changed
• An HTML button was clicked

Often, when events happen, you may want to do something.


JavaScript lets you execute code when events are detected.

HTML allows event handler attributes, with JavaScript code, to be added to


HTML elements.

With single quotes:

<element event='some JavaScript'>

With double quotes:

<element event="some JavaScript">

In the following example, an onclick attribute (with code), is added to


a <button> element:

Example
<button onclick="document.getElementById('demo').innerHTML =
Date()">The time is?</button>
9) How can we include audio or video in a webpage?

1. A) Intro of audio and video:

Audio and Video tags are the two major addition to HTML5. It allows developers to embed a video
or audio on their website. HTML5 video can use CSS and CSS3 to style the video tag. You can change
the border, opacity, reflections, gradients, transitions, transformations, and even animations. HTML5
makes adding video super-fast and without having to build a video player. This saves time for the
developer and offers the client a superior and more affordable solution.

Example:

o HTML

<!DOCTYPE html>

<html>

<body>

<h2>Example of video and audio tag</h2>

<video width = "300" height = "200" controls autoplay>

<source src = "/html5/foo.ogg" type ="video/ogg" />

<source src = "/html5/foo.mp4" type = "video/mp4" />

Your browser does not support the video element.


</video>

<audio controls autoplay>

<source src = "/html5/audio.ogg" type = "audio/ogg" />

<source src = "/html5/audio.wav" type = "audio/wav" />

Your browser does not support the audio element.

</audio>

</body>

</html>

Output: The resulting UI looks something like this:

video output

10) Is drag and drop possible using HTML5 and how?

A) Drag and drop is a very common feature. It is when you "grab" an object
and drag it to a different location.
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div


>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(e


vent)" width="336" height="69">

</body>
</html>
11)What type of audio files can be played using HTML5?

A) Currently, there are 3 supported “audio formats” for the HTML5 “audio” tag: .mp3, .ogg, and
.wav.
Internet Explorer supports: .mp3 (Yes), .ogg (No), .wav (No)
Chrome supports: .mp3 (Yes), .ogg (Yes), .wav (Yes)
Firefox supports: .mp3 (some browsers Yes, some No), .ogg (Yes), .wav (Yes)
Safari supports: .mp3 (Yes), .ogg (No), .wav (Yes)
Opera supports: .mp3 (No), .ogg (Yes), .wav (Yes)

12) What is CSS?.

A) Cascading Style Sheets, fondly referred to as CSS, is a simple design language


intended to simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the
color of the text, the style of fonts, the spacing between paragraphs, how columns
are sized and laid out, what background images or colors are used, layout
designs,variations in display for different devices and screen sizes as well as a variety
of other effects.

CSS is easy to learn and understand but it provides powerful control over the
presentation of an HTML document. Most commonly, CSS is combined with the
markup languages HTML or XHTML.

Advantages of CSS
• CSS saves time − You can write CSS once and then reuse same sheet in
multiple HTML pages. You can define a style for each HTML element and
apply it to as many Web pages as you want.
• Pages load faster − If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So less code means faster download times.
• Easy maintenance − To make a global change, simply change the style, and
all elements in all the web pages will be updated automatically.
• Superior styles to HTML − CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison to
HTML attributes.
• Multiple Device Compatibility − Style sheets allow content to be optimized
for more than one type of device. By using the same HTML document, different
versions of a website can be presented for handheld devices such as PDAs
and cell phones or for printing.
• Global web standards − Now HTML attributes are being deprecated and it is
being recommended to use CSS. So its a good idea to start using CSS in all
the HTML pages to make them compatible to future browsers.
13) Discuss about Color attributes

A) Colors are very important to give a good look and feel to your website. You can
specify colors on page level using <body> tag or you can set colors for individual tags
using bgcolor attribute.

The <body> tag has following attributes which can be used to set different colors −

• bgcolor − sets a color for the background of the page.


• text − sets a color for the body text.
• alink − sets a color for active links or selected links.
• link − sets a color for linked text.
• vlink − sets a color for visited links − that is, for linked text that you have
already clicked on.

HTML Color Coding Methods


There are following three different methods to set colors in your web page −

• Color names − You can specify color names directly like green, blue or red.
• Hex codes − A six-digit code representing the amount of red, green, and blue
that makes up the color.
• Color decimal or percentage values − This value is specified using the rgb(
) property.

Now we will see these coloring schemes one by one.

HTML Colors - Color Names


You can specify direct a color name to set text or background color. W3C has listed
16 basic color names that will validate with an HTML validator but there are over 200
different color names supported by major browsers.

Note − Check a complete list of HTML Color Name.


W3C Standard 16 Colors
Here is the list of W3C Standard 16 Colors names and it is recommended to use
them.

Black Gray Silver White

Yellow Lime Aqua Fuchsia

Red Green Blue Purple

Maroon Olive Navy Teal

14)Define list and types of lists?

A)part-b q.no-15

15) Define Web Application?

A) It is a type of computer program that usually runs with the help of a web browser
and also uses many web technologies to perform various tasks on the internet.

A web application can be developed for several uses, which can be used by anyone
like it can be used as an individual or as a whole organization for several reasons.

In general, a web application can contain online shops (or we can also say them e-commerce
shops), webmail's, calculators, social media platforms, etc. There is also some kind of web
application that usually requires a special kind of web browser to access them. We cannot
access those kinds of web applications by using regular web- browsers. However, most of the
web applications available on the internet can be accessed using a standard web browser.

If we talk about the web application in general, a web application usually uses a
combination of the server-side scripts such as PHP, ASP, for handling the information/
data storage and retrieval of the data.

Some of them also use the client-side scripts such as JavaScript, HTML to represent
the data/information in front of the users, and some of the web applications are also
using both server-side and client-side at the same time.

16) What is server?


A) A server is a computer program or device that provides a service to
another computer program and its user, also known as the client. In a data
center, the physical computer that a server program runs on is also
frequently referred to as a server. That machine might be a dedicated
server or it might be used for other purposes.

In the client/server programming model, a server program awaits and fulfills


requests from client programs, which might be running in the same, or
other computers. A given application in a computer might function as a
client with requests for services from other programs and as a server of
requests from other programs.

How servers work

The term server can refer to a physical machine, a virtual machine or to software
that is performing server services. The way that a server works varies considerably
depending on how the word server is being used.

Physical and virtual servers

A physical server is simply a computer that is used to run server software.

A virtual server is a virtual representation of a physical server. Like a physical


server, a virtual server includes its own operating system and applications. These
are kept separate from any other virtual servers that might be running on the
physical server.

The process of creating virtual machines involves installing a lightweight software


component called a hypervisor onto a physical server. The hypervisor's job is to
enable the physical server to function as a virtualization host. The virtualization
host makes the physical server's hardware resources -- such as CPU time, memory,
storage and network bandwidth -- available to one or more virtual machines.

An administrative console gives administrators the ability to allocate specific


hardware resources to each virtual server. This helps dramatically drive
down hardware costs because a single physical server can run multiple virtual
servers, as opposed to each workload needing its own physical server.
Server software

At a minimum, a server requires two software components: an operating system


and an application. The operating system acts as a platform for running the server
application. It provides access to the underlying hardware resources and provides
the dependency services that the application depends on.

The operating system also provides the means for clients to communicate with the
server application. The server's IP address and fully qualified domain name, for
example, are assigned at the operating system level.

17) List various types of attributes.

A) The href Attribute


The <a> tag defines a hyperlink. The href attribute specifies the URL of the
page the link goes to:

Example
<a href="https://www.w3schools.com">Visit W3Schools</a>

Try it Yourself »

You will learn more about links in our HTML Links chapter.

The src Attribute


The <img> tag is used to embed an image in an HTML page. The src attribute
specifies the path to the image to be displayed:

Example
<img src="img_girl.jpg">

Try it Yourself »

The width and height Attributes


The <img> tag should also contain the width and height attributes, which
specifies the width and height of the image (in pixels):

Example
<img src="img_girl.jpg" width="500" height="600">

Try it Yourself »

The alt Attribute


The required alt attribute for the <img> tag specifies an alternate text for an
image, if the image for some reason cannot be displayed. This can be due to
slow connection, or an error in the src attribute, or if the user uses a screen
reader.

Example
<img src="img_girl.jpg" alt="Girl with a jacket">

Try it Yourself »

Example
See what happens if we try to display an image that does not exist:

<img src="img_typo.jpg" alt="Girl with a jacket">

The style Attribute


The style attribute is used to add styles to an element, such as color, font,
size, and more.

Example
<p style="color:red;">This is a red paragraph.</p>

Try it Yourself »

You will learn more about styles in our HTML Styles chapter.
The lang Attribute
You should always include the lang attribute inside the <html> tag, to declare
the language of the Web page. This is meant to assist search engines and
browsers.

The following example specifies English as the language:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

18)repeated-17

19) define fieldset and legend tag with some examples

A) The legend tag is used to define the title for the child contents. The legend elements are
the parent element. This tag is used to define the caption for the <fieldset> element.

Syntax

<legend> Text </legend>

Attribute :

• align: It sets the alignment of the legend element.

The <fieldset> tag in HTML5 is used to make a group of related elements in the
form, and it creates the box over the elements. The <fieldset> tag is new in
HTML5. The <legend> tag is used to define the title for the child’s contents. The
legend elements are the parent element. This tag is used to define the caption for
the <fieldset> element.

Syntax:
<fieldset>Contents</fieldset>

Attribute:

disabled: It is used to specify that the group of related form elements is disabled. A
disabled fieldset is un-clickable and unusable.

form: It is used to specify the one or more forms that the <fieldset> element
belongs to.

name: It is used to specify the name for the Fieldset element.

autocomplete: It is used to specify that the fieldset has autocompleted on or off


value.

Example: This simple example illustrates the use of the <fieldset> tag in order to
make a group of related elements in the HTML Form.

<fieldset>

<!-- Legend tag using -->

<legend>STUDENT::</legend>

<label>Name:</label>

<input type="text">

<br><br>

<label>Email:</label>
<input type="text">

<br><br>

<label>Date of birth:</label>

<input type="text">

<br><br>

<label>Address:</label>

<input type="text">

<br><br>

<label>Enroll No:</label>

<input type="text">

</fieldset>

20)define how to design the layouts

A)part-b q.no-10

You might also like