Академический Документы
Профессиональный Документы
Культура Документы
PART – A
1. CSS stands for Cascading Style Sheets and is a simple styling language which
allows attaching style to HTML elements. Every element type as well as every occurrence
of a specific element within that type can be declared an unique style, e.g. margins,
positioning, color or size.
3. CSS is a language that adds style (colors, images, borders, margins…) to your
site. It’s really that simple. CSS is not used to put any content on your site, it’s just there to
take the content you have and make it pretty. First thing you do is link a CSS-file to your
HTML document. Do this by adding this line:
The line should be placed in between your <head> and </head> tags. If you
have several pages you could add the exact same line to all of them and they will all use the
same stylesheet, but more about that later. Let’s look inside the file “style.css” we just
linked to.
h1 {
font-size: 40px;
height: 200px;
}
.warning {
color: Red;
font-weight: bold;
}
#footer {
background-color: Gray;
}
4. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g.
fonts, colors, spacing) to Web documents. This is also where information meets the artistic
abilities of a web-designer. CSS helps you spice up your web-page and make it look neat in
wide variety of aspects.
2.What are the advantages and disadvantages of Cascading Style Sheets?
Advantages
Greater Control. Style sheets allow far greater control over the appearance of a
document. Many different elements can be defined and customised, including margins,
indents, font size, line and letter spacing. In addition, elements can be positioned
absolutely on the page.
Disadvantages
Browser Support. This is the one major drawback to style sheets. They are only
supported at all by IE 3 and above and Netscape 4 and above, but even then, the way in
which the two browsers interpret them can vary considerably. However, older browsers
will still display your website, simply ignoring the elements they do not understand.
By setting the properties margin-left and margin-right to auto and width to some
explicit value:
In this case, the left and right margins will each be four ems wide, since
they equally split up the eight ems left over from (30em - 22em). Note that it was not
necessary to set an explicit width for the BODY element; it was done here to keep the
math clean.
Another example:
4.If background and color should always be set together, why do they exist as
separate properties?
There are several reasons for this. First, style sheets become more legible -- both for
humans and machines. The background property is already the most complex property in
CSS1 and combining it with color would make it even more complex. Second, color
inherits, but background doesn't and this would be a source of confusion.
5.What is class?
1) The rule P {color: red} will display red text in all paragraphs. By classifying the
selector P different style can be attached to each class allowing the display of some
paragraphs in one style and some other paragraphs in another style.
2) A class can also be specified without associating a specific element to it and then
attached to any element which is to be styled in accordance with it's declaration. All
elements to which a specific class is attached will have the same style.
CSS
P.name1 {color: red} /* one class of P selector */
P.name2 {color: blue} /* another class of P selector */
.name3 {color: green} /* can be attached to any element */
HTML
<P class=name1>This paragraph will be red</P>
<P class=name2>This paragraph will be blue</P>
<P class=name3>This paragraph will be green</P>
<LI class=name3>This list item will be green</LI>
It is a good practice to name classes according to their function than their appearance;
e.g. P.fotnote and not P.green. In CSS1 only one class can be attached to a selector. CSS2
allows attaching more classes, e.g.:
P.name1.name2.name3 {declaration} <P class="name1 name2 name2">This paragraph
has three classes attached</P>
6.What is grouping ?
Grouping is gathering (1) into a comma separated list two or more selectors
that share the same style or (2) into a semicolon separated list two or more declarations
that are attached to the same selector (2).
1. The selectors LI, P with class name .first and class .footnote share the same style, e.g.:
LI {font-style: italic}
P.first {font-style: italic}
.footnote {font-style: italic}
To reduce the size of style sheets and also save some typing time they can all be grouped
in one list.
LI, P.first, .footnote {font-style: italic}
2. The declarations {font-style: italic} and {color: red} can be attached to one selector,
e.g.:
H2 {font-style: italic}
H2 {color: red}
and can also be grouped into one list:
H2 {font-style: italic; color: red}
Cascading Style Sheets (CSS) is not case sensitive. However, font families,
URLs to images, and other direct references with the style sheet may be.
The trick is that if you write a document using an XML declaration and an XHTML
doctype, then the CSS class names will be case sensitive for some browsers.
It is a good idea to avoid naming classes where the only difference is the case, for
example:
div.myclass { ...}
div.myClass { ... }
If the DOCTYPE or XML declaration is ever removed from your pages, even by mistake,
the last instance of the style will be used, regardless of case.
* fonts
* colors
* layout
* positioning
* imagery
* accessibility
Style sheets give you a lot of power to define how your pages will look. And
another great thing about them is that style sheets make it really easy to update
your pages when you want to make a new design. Simply load in a new style
sheet onto your pages and you're done.
10.What is CSS rule 'ruleset'?
There are two types of CSS rules: ruleset and at-rule. Ruleset identifies
selector or selectors and declares style which is to be attached to that selector or selectors.
For example P {text-indent: 10pt} is a CSS rule. CSS rulesets consist of two parts:
selector, e.g. P and declaration, e.g. {text-indent: 10pt}.
Embedded style is the style attached to one specific document. The style
information is specified as a content of the STYLE element inside the HEAD element
and will apply to the entire document.
<HEAD>
<STYLE TYPE="text/css">
<!--
P {text-indent: 10pt}
-->
</STYLE>
</HEAD>
Note: The styling rules are written as a HTML comment, that is, between <!-- and --> to
hide the content in browsers without CSS support which would otherwise be displayed.
12.What is ID selector?
<P ID=abc123>This and only this element can be identified as abc123 </P>
The element CODE will be displayed in red but only if it occurs in the context of the
element P which must occur in the context of the element TD.
The element CODE will be displayed in red as described above AND the element EM
will also be red but only if it occurs in the context of H1
Any element with CLASS footnote will be red but only if it occurs in the context of P
Any element with attribute LANG will be red but only if it is classed as "footnote" and
occurs in the context of P
Inline style is the style attached to one specific element. The style is specified
directly in the start tag as a value of the STYLE attribute and will apply exclusively to
this specific element occurrence.
Imported Style Sheet is a sheet that can be imported to (combined with) another
sheet. This allows creating one main sheet containing declarations that apply to the
whole site and partial sheets containing declarations that apply to specific elements (or
documents) that may require additional styling.
By importing partial sheets to the main sheet a number of sources can be
combined into one.
To import a style sheet or style sheets include the @import notation or notations in
the STYLE element.
The @import notations must come before any other declaration.
If more than one sheet is imported they will cascade in order they are imported -
the last imported sheet will override the next last; the next last will override the second
last, and so on.
If the imported style is in conflict with the rules declared in the main sheet then it
will be overridden.
Preferred style is a default style that applies automatically and is declared by setting the
TITLE attribute to the LINK element. There can only be one preferred style, e.g.:
Alternate style gives an user the choice of selecting an alternative style - a very
convenient way of specifying a media dependent style. Note: Each group of alternate
styles must have unique TITLE, e.g.:
To place text or image over an image you use the position property. The
below exemple is supported by IE 4.0. All you have to do is adapt the units to your need.
<div style="position: relative; width: 200px; height: 100px">
<div style="position: absolute; top: 0; left: 0; width: 200px">
<image>
</div>
<div style="position: absolute; top: 20%; left: 20%; width: 200px">
Text that nicely wraps
</div>
</div>
ID identifies and sets style to one and only one occurrence of an element
while class can be attached to any number of elements. By singling out one occurrence of
an element the unique value can be declared to said element.
CSS
#eva1 {background: red; color: white}
.eva2 {background: red; color: white}
HTML - ID
<P ID=eva1>Paragraph 1 - ONLY THIS occurrence of the element P (or single
occurrence of some other element) can be identified as eva1</P>
<P ID=eva1>Paragraph 2 - This occurrence of the element P CANNOT be identified as
eva1</P>
HTML - CLASS
<P class=eva2>Paragraph 1 - This occurrence of the element P can be classified as
eva2</P>
<P class=eva2>Paragraph 2 - And so can this, as well as occurrences of any other
element, </P>
All text except for the level 1 headings will be displayed in a 10 point font.
H1 will be displayed in a 14 point font (or in a font that is 80% larger than the one
set to BODY). If the element H1 contains other elements, e.g. EM then the EM
element will also be displayed in a 14 point font (or 180%) it will inherit the
property of the parent H1. If the EM element is to be displayed in some other font
then own font properties must be declared to it, e.g.:
The above declaration will display all EM elements in 15 point font or font
that is 10% larger than font declared to the parent element. If this specific font is to
apply to EM elements but only if they are inside H1 and not every occurrence of
EM then EM must take a form of a contextual selector.
Not all properties are inherited. One such property is background. However,
since it's initial value is transparent the background of the parent element will shine
through by default unless it is explicitly set.
21.What is JavaScript?
scripts[0] = "PHP";
scripts[1] = "ASP";
scripts[2] = "JavaScript";
scripts[3] = "HTML";
Now our array scrips has 4 elements inside it and we can print or access them by using
their index number. Note that index number starts from 0. To get the third element of the
array we have to use the index number 2 . Here is the way to get the third element of an
array.
document.write(scripts[2]);
We also can create an array like this
var no_array = new Array(21, 22, 23, 24, 25);
GET: Parameters are passed in the querystring. Maximum amount of data that can be sent
via the GET method is limited to about 2kb.
POST: Parameters are passed in the request body. There is no limit to the amount of data
that can be transferred using POST. However, there are limits on the maximum amount
of data that can be transferred in one name/value pair.
28.How to access an external javascript file that is stored externally and not
embedded?
This can be achieved by using the following tag between head tags or between
body tags.
<script src="abc.js"></script>How to access an external javascript file that is stored
externally and not embedded? where abc.js is the external javscript file to be accessed
31.How to hide javascript code from old browsers that dont run it?
The delete operator is used to delete all the variables and objects used in the program ,but
it does not delete variables declared with var keyword.
Continue statement continues the current loop (if label not specified) in a new iteration
whereas break statement exits the current loop.
<html><head>
<title>CSS Included</title>
<style type="text/css">
BODY {background-color: black}
P {font-family: arial; font-size: 12pt; color: yellow}
STRONG {font-weight: bold}
EM {font-style: italic}
</style>
</head><body>
<p>Welcome to <strong>GlobalGuideLine.com</strong>.
You should see this text in <em>yellow</em>
on black background.</p>
</body></html>
As you can, the font family, size and color in <STRONG> and <EM> are
inherited from <P>.
• Linked Styles -Style information is read from a separate file that is specified in the
<LINK> tag
• Embedded Styles -Style information is defined in the document head using the
<STYLE> and </STYLE> tags.
• Inline Styles -Style information is placed inside an HTML tag and applies to all
content between that tag and it companion closing tag.
48. What are the style precedence rules when using multiple approaches?
Inline styles override both linked style sheets and style information stored in the
document head with <STYLE> tag.
{Characteristic: value}
• font-family
• font-size
• font-weight
• font-style
• font-variant
52.Define scriptlets?
Scriptlets enable you to create small, reusable web applications that can be used
in any web page. Scriptlets are created using HTML, scripting and Dynamic HTML. To
include them in an HTML document use the <OBJECT> tag.
Data binding is DHTML feature that lets you easily bind individual elements in
your document to data from another source such as database or comma delimited text
file.
• In Server side scripting the script program is executed at Server Side the required
html program is sent to the client.
• The job of the server is more in server side scripting
• Here the script program is processed and executed in the client side itself.
• So that it reduces the burden of the server.
Advantages
<HTML>
<HEAD>
</SCRIPT>
</HEAD>
<BODY>
</SCRIPT>
</BODY>
</HTML>
• A dense array is an array that has been created with each of its elements being
assigned a specific value
• Dense arrays are used exactly in the same manner as other arrays.
• Dense arrays are declared and initialized at the same time.
Array Methods
Join() – returns all elements of the array joined together as a single string.
Reverse() – reverses the order of the elements in the array.
Comparison operators
String operators
Currently Java Script supports only one string concatenation (+) operator.
Example
Dialog boxes are used to display small windows. This is also used to get input from user.
SYNTAX
alert(“message”)
alert(“Click here to continue”)
prompt(“Enter your name”, name)
• Math Object
• String Object
• Date Object
• Boolean and Number Object
• Document Object
• Window Object
Style program alone is stored in a separate file with an extension of .css file.
Explicit LINK REL statement is needed to connect with .CSS file. Styles used in .CSS
file can be used in any HTML program file.
• Font Attributes
• Color and Background attributes
• Text Attributes
• Border Attributes
• Margin Attributes and
• List Attributes.
<HTML>
<HEAD>
<STYLE>
</HEAD>
<BODY>
</BODY> </HTML>
70. List out the differences between Java script & VB script.
76. Write a java script program to print Armstrong numbers between 1 to 500.
PART B
6. What are the various java script objects? Explain each with an example.
10. What is html? explain the various html tags to develop the web pages.
11. What is the use of HTML Forms? Create a HTML Form page for Railway
Registration Form
12. What is CSS ? List out the Various CSS Properties. Explain the various concepts of
CSS properties with neat example.
13. What are the types of CSS? Explain any two with neat example.
16. With a neat diagram write a SCRIPT PROGRAM with validation for the following
(each program carries 16 marks)
• Inventory System
• When you introduce any number field, always check it is negative or not, if it so do not
accept the input value
• For calculations always use program concept, do not ask the user to enter total, gross
etc.
• Always use val or ParseInt function when you perform calculation with numbers.
• for avoiding too much of validation better use the following in the design itself
• Radio button
• Command button
• Check box
• List box
• Must introduce SUBMIT & RESET button at the end of the design
18. Explain in detail about all the types of Cascading Style sheet with an example
Program draw the form design
• Object modeling
• Object Referencing
• Dynamic Styles
• Dynamic Positioning
32. What are Style Sheets? List down the ways of including style information in a
document. Explain about types of cascading style sheet? Explain with example.
33. What are the methods associated with array object in JavaScript? Explain each one
with an example.
35. What do you mean by CSS? Discuss the properties of CSS-level-1 in detail with
suitable example.
38. Write the complete JavaScript to prompt the user for the radius of the sphere and call
function sphere Volume to calculate and display the volume of the sphere. Use the
statement. Volume=(4.0/3.0)*Math.PI*Math.pow(radius,3)
39. To calculate the volume, the user should input the radius through an HTML text field
and press an HTML button to initiate the calculations.
40. What are the objectives of using Cascading style sheet? Briefly explain about linking
of external Style sheets and fixing the backgrounds.
41. Explain the concept of CSS and its properties and its uses with an example.
42. Using a JavaScript create a web page using two image files , which switch between
one another as the mouse pointer moves over the images.
43. Write JavaScript for the following. Provide a text box for the user enter user name.
validate the username for the no. of characters(assume some no. say 6). Provide a
SUBMIT button for the validation to happen. On successful validation display a new
page with an image and two text boxes for entering the width and height of the image
respectively with a RESIZE button below. On clicking the Resize button validate the
width and height numbers and on successful validation display the image with the
requested width and height.
44. Develop a simple online shopping application using JavaScript(Assume your own
data)
45. What are Style Sheets? List down the ways of including style information in a
document. Explain about types of cascading style sheet? Explain with example.
46. What is CSS ? List out the Various CSS Properties. Explain the various concepts of
CSS properties with neat example.
47. Explain the various event handlers in java script. Give an example of each. Write a
java script program to develop the arithmetic calculator .
48. develop the web page for employee management system and validate all the fields
using java script. (Note: The web page should contain all the html forms control)
50. Write a XHTML program to create a web page for your college information using
any one CSS type (Assume your own data) .Explain the various CSS properties in detail.
Write a suitable code each property.
52. Design a web page with a text box (username) where the user can enter a name and
another text box (ID) where the user enter an only four digit ID.NO and a button
“validate”. Validate the entered username and ID field for the following using java script.