IWP MQP Solpdf

1a. Explain (X)HTML document structure with example.
Example Explained
• 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
1b. Explain the rules of (X)HTML.
1. HTML Is Not Case Sensitive, XHTML Is Case Sensitive.

2. Attribute Values May Be Case Sensitive:
3. (X)HTML Is Sensitive to a Single Whitespace Character
4. (X)HTML Follows a Content Model
5. Elements Should Have Close Tags Unless Empty
6. Unused Elements May Minimize
7. Elements Should Nest
8. Attributes Should Be Quoted
9. Entities Should Be Used for Special Characters
10. Browsers Ignore Unknown Attributes and Elements
With 2-3 lines of explanation for each point.
1c. Explain the following tags with example: i) <p> ii) <img> iii) <br>

<p>Welcome to the world of HTML </p>
Welcome to the world of HTML
* <br> tag is used to insert a single line break, it doesn’t require end tag in HTML.
* The <img> tag is used to embed an image in an HTML page. Images are not technically inserted into a web page; images
<img> tag creates a holding space for the referenced image.
<img src=robot.gif height=10 width=10 alt=robot>
2a. Discuss the (X)HTML tags supported in document head.
The following elements are supported inside the <head> element:

 <title>
It is required in every HTML document, The <title> tag defines the title of the document. The title
must be text-only, and it is shown in the browser's title bar or in the page's tab
 <style>
The <style> tag is used to define style information (CSS) for a document. Inside
the <style> element you specify how HTML elements should render in a browser
 <base>
The <base> tag specifies the base URL and/or target for all relative URLs in a
document. The <base> tag must have either an href or a target attribute present, or
both. There can only be one single <base> element in a document, and it must be
inside the <head> element.
 <link>
The <link> tag defines the relationship between the current document and an
external resource. The <link> tag is most often used to link to external style sheets
or to add a favicon to your website. The <link> element is an empty element, it
contains attributes only.
 <meta>
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.
 <script>
The <script> tag is used to embed a client-side script (JavaScript).
The <script> element either contains scripting statements, or it points to an external
script file through the src attribute.
 <noscript>
The <noscript> tag defines an alternate content to be displayed to users that have
disabled scripts in their browser or have a browser that doesn't support script. The
<noscript> element can be used in both <head> and <body>.
2b. Construct a parse tree of elements allowed in the document body.

2c. Write an XHTML program to get the following output
3a. Explain different semantics elements in HTML5 with example.
Semantic elements have meaningful names which tells about type of content. For example <header>,
<footer>, <table>, etc. HTML5 introduces many semantic elements as mentioned below which make the
code easier to write and understand for the developer as well as instructs the browser on how to treat them. A
semantic element clearly describes its meaning to both the browser and the developer.
<article> Defines independent, self-contained content

<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<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>
3b. Explain the following tags i)audio ii)video
HTML <audio> Tag

HTML5’s audio element is quite similar to the video element. The element should support
common sound formats such as WAV files:
<audio src="http://htmlref.com/ch2/music.wav"></audio>
The <audio> tag is used to embed sound content in a document, such as music or other audio
streams. This tag contains one or more <source> tags with different audio sources. The browser will
choose the first source it supports. The text between the <audio> and </audio> tags will only be
displayed in browsers that do not support the <audio> element.
There are three supported audio formats in HTML: MP3, WAV, and OGG.
3c. Create an HTML5 form for the following output
<!DOCTYPE html>
<html>
<body>
<h2>Personal Details</h2>
<form>
<label for="fname">Name:
<input type="text" id="fname" name="fname" value=" "><br></label><br>
<label for="lname">Password:
<input type="text" id="lname" name="lname" value=" "></label><br><br>
<label for="fname">Email id:
<label>Gender:
Male<input type="radio" value="male" name="gender" /></label>
<label>Female<input type="radio" value="female" name="gender" /></label> <br> <br>
<label for="fname">Contact#:
</form>
<h2>Education Qualification</h2>
<label for="fname">Degree:
<select name="language">
<option value="indian"> - Select Group - </option>
</select></label><br><br>
<label for="fname">Engineering:
<select name="language">
<option value="indian"> - Select Group - </option></select>
<br><br>
<label>Hobbies:
Playing Chess<input type="radio" value="Playing Chess" name="gender" /></label>
<label>Reading Books<input type="radio" value="Reading Books" name="gender"
/></label> <br> <br>
<h2>Address</h2>
<form>
<textarea name="welcomeMessage" rows="3" cols="40"></textarea>
</form> <br><br>
<label for="fname">Attach Resume:
<input type="submit" value="Choose File"> <label for="fname">No file chosen:
<br><br>
<input type="submit" value="Submit">
</body>
</html>
4a. Briefly explain client side graphics with <canvas>
HTML <canvas> Tag

The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript). This tag is
transparent, and is only a container for graphics, you must use a script to actually draw the graphics.
Any text inside the <canvas> element will be displayed in browsers with JavaScript disabled and in
browsers that do not support <canvas>.
• To begin a path, context.beginPath( ) is called to reset the path collection.

The context.beginPath( ); method begins a path, or resets the current path. Use moveTo( ),
lineTo( ), quadricCurveTo( ), bezierCurveTo( ), arcTo( ), and arc( ), to create paths. Then, any
variety of shape calls can occur to add a subpath to the collection.
• Context.moveTo( ) method is used to set the path’s starting point.

For ex: context.moveTo(300,50);
 Context.lineTo( ) method is used to add a line segment to the end of the path.
 Once all subpaths are properly added, context.closePath() can optionally be called to close
the loop.
 The createLinearGradient() method creates a linear gradient object. The gradient can be
used to fill rectangles, circles, lines, text, etc.
 The createRadialGradient() method creates a radial/circular gradient object.
 window. onload :
We can use this function to perform some task as soon as the page finishes loading. This
JavaScript function is used in different condition like displaying a print page or directing
focus to user input field as soon as the page is loaded.
 The getElementById() :
This method returns an element with a specified value. It returns null if the element does not
exist.
 The <canvas> element has a method called getContext() , used to obtain the rendering
context and its drawing functions. getContext() takes one parameter, the type of context.
 Drawing Arcs and Curves
Drawing on canvas is possible by using arc(), arcTo(), quadraticCurveTo(), and
bezierCurveTo().
 Scaling, Rotating, and Translating Drawings :
The canvas API provides a number of useful methods that accomplish the common tasks.
First let’s explore the scale(x,y) function, which can be used to scale objects. The x parameter
shows how much to scale in the horizontal direction and the y parameter indicates how much
to scale vertically.
4b. Explain Emerging elements & attributes to support web applications.

4c. Write a note on iframe element in HTML5
The <iframe> tag specifies an inline frame. An inline frame is used to embed another
document within the current HTML document. HTML5 continues to support
<iframe>; in fact, it not only supports it but extends the tag.
HTML5 proposes two new attributes for the iframe element: seamless and
sandbox. The seamless attribute effectively renders the iframe as an inline include,
which allows the parent document’s CSS to affect the contents of the iframe:
<iframe src="content.html" name="thisframe" width="200"

height="300" seamless">[alternate content]</iframe>
Here is the same example using XHTML style syntax:
<iframe src="content.htm" name="thisframe" width="200"
height="300" seamless="seamless">[alternate content]</iframe>
The sandbox attribute “sandboxes” the iframe, essentially preventing it from pulling
in content from any source other than the iframe itself. Used without attributes,
sandbox has the following effects on the iframe:
• New windows cannot be created from within the iframe.

• Plug-ins are prohibited; embed, object, and applet will not function in
a sandboxed iframe.
• Nested inline frames are prohibited.
• A completely sandboxed iframe is considered, in essence, a new subdomain on
the client side. Access to JavaScript is not allowed; cookies can’t be read or written.
• A completely sandboxed inline frame cannot submit forms or run scripts.
5a. Explain the different levels of Style Sheets are available in Cascading Style Sheets.
CSS can be added to HTML documents in 3 ways:
• 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
The most common way to add CSS, is to keep the styles in external CSS files.
Inline CSS:
An inline CSS is used to apply a unique style to a single HTML element. It uses
the style attribute of an HTML element.
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:
Internal CSS :
An internal CSS is used to define a style for a single HTML page. It is defined in
the <head> section of an HTML page, within a <style> element.
5b. With an example, Explain various Selector Forms
A CSS selector selects the HTML element(s) we want to style. They are used to "find" (or select) the
HTML elements we want to style.
We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute value)
The CSS element Selector

The element selector selects HTML elements based on the element name.
The CSS 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.
The CSS 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.
The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.
The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
5c. Explain span and div elements with an example.
span and div Elements
The div and span elements are generic elements in that they don’t provide any
special meaning when they’re used by themselves. They are simply placeholders to
which CSS is applied. Think of div and span as vanilla ice cream and CSS as the
various toppings you can add to the ice cream, such as chocolate chips, mint
flavoring, and Oreos. Yummm!
6a. With examples, Explain BOX, padding and margin properties in CSS
In Figure given above, the dashed lines indicate the perimeters of the margin and padding areas.
When a web page is displayed, only the border can be made visible; the dashed lines shown in the
figure are only for illustration purposes. .
padding and margin Properties :
The padding property specifies the width of the area on the interior of an element’s border, whereas
the margin property specifies the width of the area on the exterior of an element’s border. Here’s an
example CSS rule that uses padding and margin properties:
.label {border: solid; padding: 20px; margin: 20px;}

Just like border-width property, we can specify different padding widths for the four different sides.
We can use multiple values with one padding property. Or we can use separate padding side
properties—padding-top, padding-right, padding-bottom, and padding-left. Likewise, we can
specify different margin widths for the four different sides. — margin-top, margin-right, margin-
bottom, and margin-left.
The margin and padding properties allow negative values. While a positive value forces two
elements to be separated by a specified amount, a negative value causes two elements to overlap
by a specified amount.
6b. Explain different types of Text properties available in CSS.

6c. Explain various Color Properties used in style sheets
7a. Create a HTML5 document for the following screenshot.
7b. Explain how a responsive web page’s layout can display differently on different platform.
7c. With an example explain how to link a Specified Location Within a Different Web Page in
HTML5.
Using an absolute URL, it is possible to link a specified location within a different web page.
8a. Create a HTML5 document for the following screenshot.

8b. Explain how images are inserted in html document with an example.
8c. Write a note on Shortcut Icons and iframe Element with example.
9a. Develop a JavaScript program to print Hello World message using Function.
9b. Explain how forms are processed in Client side and server side
9c. Explain how to Access a Form’s Control Values with an example.
10a. Write a note on :Document Object Model
10b. Develop a JavaScript code that displays text “HTML5” with increasing font size in the
interval of 100ms in RED COLOR, when the font size reaches 50pt it displays “HTML” in
BLUE color. Then the font size decreases to 5pt.
<html>
<body>
<p id="demo">
</p>
<script>
var var1 = setInterval(inTimer,1000);
var size = 5;
var ids = document.getElementById("demo");
function inTimer(){
ids.innerHTML = ' HTML 5 ';
ids.setAttribute('style',"font-size:"+size+"px: color:blue");
size +=5;
if(size>=){
clearInterval(var1);
}
}
</script>
</body>
</html>
10c. Explain popular controls and the elements of forms used JavaScript
1a. List and explain most common elements used in (X)HTML documents
• 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-h6> elements defines large heading to small heading.
1b. What do mean by Document Type Definition (DTD). Write the basic structure
(X)HTML documents derived from the specifications.
DOM explained in first paper.

Basic structure of (X)HTML is explained in first paper.
1c. Name the rendering modes of Modern Web browsers. How browser typically
chooses in which mode to parse a document.
2a. List and demonstrate the rules of (X)HTML.
Explained in first paper
2b. Differentiate between Logical versus physical markup.

2c. Discuss the any three Myths and Misconceptions About HTML and XHTML.
Myths and Misconceptions About HTML and XHTML

1. Misconception: WYSIWYG(What You See Is What You Get) Works on the Web
This is not True, because, in HTML4 and HTML5, if we make mistakes and some closing tags can be
omitted and some errors may be present, but the browsers render the web pages in correct way by
correcting the error automatically. In case of XHTML, since it is strict, such type of errors are not
allowed and it generates the errors.
2. Misconception: HTML Is a Programming Language

No it is a Markup language. In programming languages, the user writes the programs which contain
logics to solve the problems. In HTML the user writes the HTML pages to display some information
with some styles and other decorative things, which contain no logic.
3. Misconception: XHTML Is the Only Future

No it is not the only future, we can say HTML5 and later versions may become popular in future
because the ease of use and flexibility. XHTML is strict version, everybody will not like to use.
4. Misconception: XHTML Is Dead
No it is not dead, there are some people who want to design web pages and sites in strict manner by
following strict rules, they opt only XHTML to use.
5. Myth: Traditional HTML Is Going Away

No, but the use of traditional HTML is reducing slowly because of latest versions flexibility and ease
of use.
6. Myth: Someday Standards Will Alleviate All Our Problems

Not true, because standards are to be followed to make sure that the HTML pages are designed to
generate the web pages according to end user requirements. So standards are not for reducing the
problems.
7. Myth: Hand-Coding of HTML Will Continue Indefinitely

No, because the technology changes everyday, nowadays the latest versions of application are
available to allow the web designers to use them to design the pages attractively without any
problems, which slowly reduces the hand-coding process.
8. Myth: (X)HTML Is the Most Important Technology Needed to Create Web Pages
No, it is also one of the technologies available, in addition to it, so many other readymade applications
which are flexible and with more features are available for the same purpose.
3a. Why few HTML4 Elements Removed from HTML5? Give the Removed
HTML Elements list and also CSS alternatives.
3b. Write the snippet of code to demonstrate the following semantic inline elements (i)
Indicating Dates and Time (ii) Inserting figures.
<figure> element is used to add self-contained content, like illustrations, diagrams, photos,
code listings, etc.
The <figcaption> tag defines a caption for a <figure> element.
The <figcaption> element can be placed as the first or as the last child of a <figure> element.
The <img> element defines the actual image/illustration.
3c. Comment on the internationalization supporting changes in the HTML5

specification.
4a. How HTML5 perform the Drawing and Styling Lines and Shapes? Explain with an
example to draw few different shapes with fills and styles.
4b. What is the use of command Element and its attributes in HTML5. Explain with the help
of code snippet.
4c. Mention the rules to remember while mappings between markup and script.
5a. Briefly explain CSS Syntax and Style.

Style is explained in 1st paper. Inline, Internal and External CSS.
5b. Suppose you want to apply CSS to text that doesn‟t coincide with any of the HTML5
elements. What should you do? Give an illustrative example.
If a piece of text does not coincide with the HTML5 elements, it cannot be styled with CSS.
However, there are other methods that can be used to add styling to text.
For example: by using <span> element, we can group elements and style them with CSS.
<p>Welcome to my <span class=”highlighted”>website</span></p>

<style>
.highlighted { font-weight: bold; text-decoration: underline;}
</style>
5c. What are the different methods used specify the RGB Values for Color explain any one of
them.
6a. Discuss font-style, font-variant, font-weight properties of CSS.
6b. Explain Text-align, text-decoration, text-transform, and text-indent properties of CSS.
It is explained in first paper.
7a. Give the code to create a webpage with the output as shown below.
7b. Explain different href attribute values and their jumping effects
7c. Mention and briefly describe the Common formats for web page bitmap image files.
8a. What is the need of Responsive web design (RWD)? Explain resolutionswitching
with an example.
8b. Illustrate the situation in which webpage designer thiks of CSS rule uses the float
property and a value of left or right.Justify how the propety and values are useful in such
situations
8c. What is browsing context? Name the element used to create it.
9a. What is a function in JavaScript? Explain syntax for a function definition with an
example.
9b. List Some of the more popular controls and the elements used to implement them.
9c. Write a Java Script program that on clicking a button, displays scrolling text which moves
from left to right with a small delay.
10a. Explain text control attributes.
10b. Write a note on reset and focus Methods
10c. Create a webpage containing 3 overlapping images using HTML, CSS and JS. Further
when the mouse is hover any image, it should be on the top and fully displayed.
<html>
<head>
<style>
#imagecontainer { position: absolute; padding: 10px; width: 300px; height: 300px;}
#image1 { z-index: 3; top: 10px; left: 10px;}

#image2 {z-index: 2; top: 20px; left: 20px;}
#image3 { z-index; 1; top: 30px; left: 30px;}
</style>
<script>
Function showbig (bigimage) { document.getElementById(“bigimage”) src=bigimage;}
</script>
</head>
<body>
<div id=”imagecontainer”><img id=”image?” src=”showbig(„flower1.jpg‟)”1>
<img id=”image2” src=”flower2.jpg” onmouseover=”showbig(„flower2.jpg‟)”1>
<img id=”image3” src= “flowers.jpg” onmouseover= “showbig(„flower3.jpg‟)1> </div>
<img id= “bigimage” src= “flower1.jpg”>
</body>
</html>

IWP MQP Solpdf

Uploaded by

Copyright:

Available Formats

IWP MQP Solpdf

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

IWP MQP Solpdf

Uploaded by

Copyright:

Available Formats

1a. Explain (X)HTML document structure with example.

1b. Explain the rules of (X)HTML.

1. HTML Is Not Case Sensitive, XHTML Is Case Sensitive.

* The <p> element defines a paragraph

2a. Discuss the (X)HTML tags supported in document head.

The following elements are supported inside the <head> element:

2b. Construct a parse tree of elements allowed in the document body.

3a. Explain different semantics elements in HTML5 with example.

<article> Defines independent, self-contained content

HTML <audio> Tag

3c. Create an HTML5 form for the following output

HTML <canvas> Tag

• To begin a path, context.beginPath( ) is called to reset the path collection.

• Context.moveTo( ) method is used to set the path’s starting point.

4b. Explain Emerging elements & attributes to support web applications.

<iframe src="content.html" name="thisframe" width="200"

• New windows cannot be created from within the iframe.

CSS can be added to HTML documents in 3 ways:

• Inline - by using the style attribute inside HTML elements

5b. With an example, Explain various Selector Forms

The CSS element Selector

The CSS class Selector

The CSS Universal Selector

The CSS Grouping Selector

span and div Elements

padding and margin Properties :

.label {border: solid; padding: 20px; margin: 20px;}

6b. Explain different types of Text properties available in CSS.

8a. Create a HTML5 document for the following screenshot.

• The <html> element is the root element of an HTML page

DOM explained in first paper.

2a. List and demonstrate the rules of (X)HTML.

Explained in first paper

2b. Differentiate between Logical versus physical markup.

Myths and Misconceptions About HTML and XHTML

2. Misconception: HTML Is a Programming Language

3. Misconception: XHTML Is the Only Future

5. Myth: Traditional HTML Is Going Away

6. Myth: Someday Standards Will Alleviate All Our Problems

7. Myth: Hand-Coding of HTML Will Continue Indefinitely

3c. Comment on the internationalization supporting changes in the HTML5

5a. Briefly explain CSS Syntax and Style.

<p>Welcome to my <span class=”highlighted”>website</span></p>

It is explained in first paper.

It is explained in first paper.

It is explained in first paper.

#image1 { z-index: 3; top: 10px; left: 10px;}

You might also like