Scribd
Upload
49 views

WEB Module 1 - Answers

Uploaded by

Vinayak Telsang
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
49 views

WEB Module 1 - Answers

Uploaded by

Vinayak Telsang
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

MODULE - I

Q. no Questions and answers Year/


marks
1 Briefly explain the history of markup language. (Jan-2019)
HTML is defined as a markup language. A markup language is simply a way of annotating a (04 marks)
document in such a way as to make the annotations distinct from the text being annotated. At
its simplest, markup is a way to indicate information about the content that is distinct from
the content. The information about content in HTML is implemented via tags. In addition to
specifying the information about content many markup languages are able to encode
information how to display the content for the end user.
2 Write a note on XHTML and HTML 5. (Jan-2019)
XHTML: The goal of XHTML with its strict rules was to make page rendering more (04 marks)
predictable by forcing web authors to create web pages without syntax errors. The payoff of
XHTML Strict was to be predictable and standardized web documents.
HTML 5: The idea of semantic markup and how it improves the maintainability and
accessibility of web pages. 3 main aims to HTML5 are
1. Specify unambiguously how browsers should deal with invalid markup.
2. Provide an open, nonproprietary programming framework (via JavaScript) for creating rich
web applications.
3. Be backwards compatible with the existing web.
3 Explain a) <a> b) <img> c) <p> d) <div> elements with examples (Jan-2019)
a) <a> element, the “a” stands for anchor: has two main parts: the destination and the (08 marks)
label. The label of a link can be text or another HTML element
Ex: <a href="index.html"><img src="logo.gif" /></a>
b) <img> element, displaying an image: has src - Specifies the URL of the image to
display
Ex: <img src="images/central-park.jpg"/>
c) <p> element, defines paragraphs and is most basic unit of text in a HTML document
Ex: <p>This is HTML page</p>
d) <div> element, This element is also a container element and is used to create a
logical grouping of text and other HTML elements it is frequently used in
contemporary CSS-based layouts to mark out sections.
Ex: <div>
<p>By Ricardo on <time>September 15, 2015</time></p>
<p>Easy on the HDR buddy.</p>
</div>
4 With an example explain different levels of style sheets. (Jan-2019)
1. Inline style: This style rules placed within an HTML element via the style attribute. (08 marks)
An inline style only affects the element it is defined within and overrides any other
style definitions for properties used in the inline style.
Ex: <h2 style="font-size: 24pt"> Description</h2>
2. Embedded style: This style rules placed within the <style> element inside the
<head> element of an HTML document. This style is used in multiple places within a
single HTML document.
Ex: <head lang="en">
<meta charset="utf-8">
<title>Test</title>
<style>
h1 { font-size: 24pt; }
</style>
</head>
<body>
<h1>Share Your Travels</h1>
</body>
3. External style: This style rules placed within a external text file with the .css
extension. This is by far the most common place to locate style rules because it
provides the best maintainability. we change an external style sheet, all HTML
documents that reference that style sheet will automatically use the updated version.
Ex: <head lang="en">
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="styles.css" />
</head>
//style.css
h1 { font-size: 24pt; }
5 List the different selectors available in CSS and explain in detail. (Jan-2019)
1. Element selectors select all instances of a given HTML element. (08 marks)
Ex: <head lang="en">
<meta charset="utf-8">
<title>Test</title>
<style>
h1 { font-size: 24pt; }
</style>
</head>
<body>
<h1>Share Your Travels</h1>
</body>
2. class selector allows you to simultaneously target different HTML elements
regardless of their position in the document tree.
Ex: <style>
.first {
font-style: italic;
color: red;
}
</style>
</head>
<body>
<h1 class="first">Reviews</h1>
3. id selector allows you to target a specific element by its id attribute regardless of
its type or position. Element has been labeled with an id attribute, then you can
target it for styling by using an id selector.
Ex:
<head>
<style>
#latestComment {
font-style: italic;
color: red;
}
</style>
</head>
<body>
<h1>Reviews</h1>
<div id="latestComment">
<p>By Ricardo on <time>September 15, 2015</time></p>
<p>Easy on the HDR buddy.</p>
</div>
4. attribute selector provides a way to select HTML elements either by the
presence of an element attribute or by the value of an attribute. <style>
<head>
<style>
[target] {
background-color: yellow;
}
</style>
</head>
<body>
<a href="https://www.w3schools.com" target="_blank">w3schools.com</a>
</body>
</html>
6 What are the three aims of HTML5 and expand the following (Jul-2019)
Three main aims to HTML5 are (08 marks)
1. Specify unambiguously how browsers should deal with invalid markup.
2. Provide an open, nonproprietary programming framework (via JavaScript) for creating rich
web applications.
3. Be backwards compatible with the existing web.
HTML: Hypertext Markup Language, XML: Extensible Markup Language, DOCTYPE:
Document type, PHP: Hypertext Preprocessor, WHATWG: Web Hypertext Application
Technology Working Group
7 List out three types of lists and explain them with example. (Jul-2019)
1. Unordered lists: The collections of items which need no particular order, these are by (08 marks)
default rendered by the browser as a bulleted list.
Ex:
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
2. Ordered lists. Collections of items that have a set order; these are by default rendered
by the browser as a numbered list.
Ex:
<ol>
<li>Introduction</li>
<li>Background</li>
<li>My Solution</li>
</ol>
3. Definition lists. Collection of name and definition pairs.
Ex:
<dl>
<dt>DBMS</dt>
<dd> Subject of V semester</dd>
<dt> ML</dt>
<dd> Subject of VII semester</dd>

8 Define CSS and list out its benefits with explanation. (Jul-2019)
Cascading Style Sheets (CSS) used to define the presentation of HTML documents. CSS can (08 marks)
be added directly to any HTML element or in a separate text file that contains only CSS.
Benefits:
1. Improved control over formatting: The degree of formatting control in CSS is
significantly better than that provided in HTML. CSS developers fine-grained control
over the appearance of their web content.
2. Improved site maintainability: Websites become significantly more maintainable
because all formatting can be centralized into one CSS file. This allows you to make
site-wide visual modifications by changing a single file.
3. Improved accessibility: CSS-driven sites are more accessible. By keeping
presentation out of the HTML, screen readers and other accessibility tools work
better, thereby providing a significantly enriched experience for those reliant on
accessibility tools.
4. Improved page download speed: A site built using a centralized set of CSS files for
all presentation will also be quicker to download.
5. Improved output flexibility: CSS can be used to adopt a page for different output
media. This approach to CSS page design is often referred to as responsive design.
9 What are selectors? List and explain selectors with an example. (Jul-2019)
The selector identifies which element or elements in the HTML document will be affected by (08 marks)
the declarations in the rule. Another way of thinking of selectors is that they are a pattern that
is used by the browser to select the HTML elements that will receive the style.
1. Element selectors select all instances of a given HTML element.
Ex: <head lang="en">
<meta charset="utf-8">
<title>Test</title>
<style>
h1 { font-size: 24pt; }
</style>
</head>
<body>
<h1>Share Your Travels</h1>
</body>
2. class selector allows you to simultaneously target different HTML elements
regardless of their position in the document tree.
Ex: <style>
.first {
font-style: italic;
color: red;
}
</style>
</head>
<body>
<h1 class="first">Reviews</h1>
3. id selector allows you to target a specific element by its id attribute regardless of
its type or position. Element has been labeled with an id attribute, then you can
target it for styling by using an id selector.
Ex:
<head>
<style>
#latestComment {
font-style: italic;
color: red;
}
</style>
</head>
<body>
<h1>Reviews</h1>
<div id="latestComment">
<p>By Ricardo on <time>September 15, 2015</time></p>
<p>Easy on the HDR buddy.</p>
</div>
4. attribute selector provides a way to select HTML elements either by the
presence of an element attribute or by the value of an attribute. <style>
<head>
<style>
[target] {
background-color: yellow;
}
</style>
</head>
<body>
<a href="https://www.w3schools.com" target="_blank">w3schools.com</a>
</body>
</html>
10 Explain the role of <ul> and <ol> HTML tags with syntax and examples. (Jan-2020)
1. Unordered lists: The collections of items which need no particular order, these are by (06 marks)
default rendered by the browser as a bulleted list.
Ex:
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
2. Ordered lists. Collections of items that have a set order; these are by default rendered
by the browser as a numbered list.
Ex:
<ol>
<li>Introduction</li>
<li>Background</li>
<li>My Solution</li>
</ol>
11 Explain the need of ‘cascade’ in CSS. Illustrate 3 principles of cascade with suitable CSS (Jan-2020))
script segments (06 marks)
The “Cascade” in CSS refers to how conflicting rules are handled. How a given style will
continue to take precedence with child elements.
Inheritance is the first of these cascading principles. Many (but not all) CSS properties
affect not only themselves but their descendants as well.
Ex: div {
font-weight: bold;
margin: 50px;
border: 1pt solid green;
}
p{
border: inherit;
margin: inherit;
}
<h3>Reviews</h3>
<div>
<p>By Ricardo on <time>September 15, 2015</time></p>
<p>Easy on the HDR buddy.</p>
</div>
Specificity is how the browser determines which style rule takes precedence when more than
one style rule could be applied to the same element.
body {
font-weight: bold;
color: red;
}
div {
font-weight: normal;
color: magenta;
}
p{
color: green;
}
<body>
This text is not within a p element.
<p>Reviews</p>
<div>
<p>By Ricardo on <time>September 15, 2015</time></p>
<p>Easy on the HDR buddy.</p>
This text is not within a p element.
</div>
Location: When inheritance and specificity cannot determine style precedence, the principle
of location will be used. The principle of location is that when rules have the same
specificity, then the latest are given more weight.
<head>
<link rel="stylesheet" href="stylesA.css" />
<link rel="stylesheet" href="stylesWW.css" />
<style>
#example {
color: orange; color: magenta;
}
</style>
</head>
<body>
<p id="example" style="color: red;"> sample text </p>
</body>
12 Explain class selector and pseudo selectors of CSS with relevant scripts. (Jan-2020)
class selector allows you to simultaneously target different HTML elements regardless of (04 marks)
their position in the document tree.
Ex: <style>
.first {
font-style: italic;
color: red;
}
</style>
</head>
<body>
<h1 class="first">Reviews</h1>
pseudo selectors:
A pseudo-class selector does apply to an HTML element, but targets either a particular state
or a variety of family relationships.
Ex: <style>
a.highlight : hover {
color: #ff0000;
font-size: 22px;
}
</style>
</head>
<body>
<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>
</body>
</html>
A CSS pseudo-element is used to style specified parts of an element. For example, it can be
used to Style the first letter, or line, of an element.
Ex:
<style>
p :: first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a
text. Some more text. And even more, and more, and more, and more, and more, and more,
and more, and more, and more, and more, and more, and more.</p>
</body>
</html>
13 Explain two types of URL referencing techniques with suitable scripts in HTML5. (Jan-2020)
Absolute reference is required: that is, a complete URL with a protocol (typically, http://), (04 marks)
the domain name, any paths, and then finally the file name of the desired resource.
Ex: <a href="https://www.bgmitm.ac.in/">W3C</a></p>
Relative URL can only be used to locate a file if you are on the same website. Rather than
give an absolute address, it shows where the file is in relation to where you currently are on
the website.
Ex: <a href="/css/test.php">CSS Tutorial</a>
14 Explain the role of the following semantic elements of HTML5 with syntax and script (Jan-2020)
segments: a) <nav> b) <section> c) <aside> (06 marks)
a) <nav> element represents a section of a page that contains links to other pages or to
other parts within the same page
Ex: <nav>
<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
<a href="/js/">JavaScript</a>
<a href="/python/">Python</a>
</nav>
b) <section> element represents a generic section of a document or application. A
section, in this context, is a thematic grouping of content, typically with a heading.
Ex: <h1>The section element</h1>
<section>
<h2> Some heading</h2>
<p>You are studying HTML5</p>
</section>
<section>
<h2> Some heading </h2>
<p>You are in VI semester </p>
</section>
c) <aside> element that defines a section that is tangentially related to the content
around it in the HTML document.
Ex: <body>
<article>
<h1>Heading for Article</h1>
<p>Text that appears under article</p>
</article>
<aside>
<p>Text that appears under aside</p>
</aside>
</body>
15 Explain the CSS properties with suitable examples (Jan-2020)
a) float b) position c) overflow (06 marks)
a) The float property specifies whether an element should float to the left, right, or not at
all.
Ex: <head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<p><img src="abc.jpg">
b) The position property specifies the type of positioning method used for an element
Ex: h2 {
position: absolute;
}
</style>
</head>
<body>
<h2>This is a heading with an absolute position</h2>
</body>
</html>
c) The overflow property specifies what should happen if content overflow an element's
box.
Ex: .box-element {
width: 400px;
height: 200px;
border: dashed;
}
.box-element {
overflow: scroll;
}
16 With example explain HTML syntax. (Sept-2020)
The <html> element is the root element and it defines the whole HTML document. (04 marks)
It has a start tag <html> and an end tag </html>. Then, inside the <html> element there is a
<body> element: The <body> element defines the document's body. It has a start tag <body>
and an end tag </body>. Then, inside the <body> element there basic content tags: <h1> and
<p>, <ul> <li>List item text</li></ul>, hyper text tags <a href="url">Link text to click
on</a>, <img src="url" />
Ex:
<html>
<body>
<h1> Heading</h1>
<p> paragraph.</p>
<a href="url">Link text to click on</a>
<img src="url"> <img src="url" />
</body>
</html>
17 Discuss the structure of HTML documents. (Sept-2020)
<!DOCTYPE html> (06 marks)
<html>
<head lang="en">
<meta charset="utf-8" />
<title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css" />
<script src="js/html5shiv.js"></script>
</head>
<body>
<h1>Main heading goes here</h1>
...
</body>
</html>
DOCTYPE (short for Document Type Definition) element, which tells the browser (or any
other client software that is reading this HTML document) what type of document it is about
to process.
The <html> element is sometimes called the root element as it contains all the other HTML
elements in the document. Notice that it also has a lang attribute.
HTML pages are divided into two sections: the head and the body, which correspond to the
<head> and <body> elements. The head contains descriptive elements about the document,
such as its title, any style sheets or JavaScript files it uses.
The body contains content (both HTML elements and regular text) that will be displayed by
the browser.
The link specifies an external CSS style sheet file that is used with this document.
The script references an external JavaScript file.
18 Explain any six html elements. (Sept-2020)
<p> element the most basic unit of text in an HTML document. (06 marks)
<a> element (the “a” stands for anchor). A link can be text or another HTML element such as
an image.
<ol> Ordered lists, collections of items that have a set order.
<ul> Unordered list, collections of items that do not need set of order.
<nav> element represents a section of a page that contains links to other pages or to other
parts within the same page
<div> element, This element is also a container element and is used to create a logical
grouping of text and other HTML elements
19 What is CSS? Explain the benefits of CSS (Sept-2020)
CSS is used to define the presentation of HTML documents. (06 marks)
Refer Q. 8
20 With example explain the location of styles. (Sept-2020)
Refer Q. 5 (06 marks)
21 Explain any two selectors with respect to CSS. (Sept-2020)
Refer Q. 9 (04 marks)
22 Illustrate the CSS Box model besuge to label each of the components of the box. (Feb-2021)
(04 marks)

23 List the different text properties with a description. (Feb-2021)


text-align: Aligns the text horizontally in a container element in a similar way as a word (04 marks)
processor.
text-indent: Indents the first line of a paragraph by a specific amount.
text-shadow: A new CSS3 property that can be used to add a drop shadow to a text.
letter-spacing: Adjusts the space between letters.

You might also like