CBSE Class 10 Computer Science HTML Forms and CSS

Topic – 1 forms

Objective Type Questions

Choose the correct alternative.

Question. ………… method is used to send form data as HTTP post.
(a) get
(b) set
(c) post
(d) none of these
Answer : C

Question. HTML form, <input tye=pe=”text”> is used for
(a) one line text
(b) block of text
(c) one paragraph
(d) all the above
Answer : A

Question. Which element allows for the creation of group of options in a select menu?
(a) <select>
(b) <group>
(c) <option>
(d) <optgroup>
Answer : C

Question. A …….. can be inserted in HTML document which can act as a container for all the input elements.
(a) text field
(b) text area
(c) form
(d) command button
Answer : C

Question. Which option will be selected with the following code snippet?
(a) fiat
(b) saab
(c) selected
(d) audi
Answer : A

Question. ………… method is used to sent form data as U‘L variables.
(a) Get
(b) set
(c) post
(d) none of these
Answer : A

Question. The ……….. attribute specifies the page which handles the input from the user.
(a) method
(b) frame
(c) action
(d) target
Answer : C

Question. What is the purpose of a web form?
(a) an outdated feature still used to help the page load faster
(b) an useful way to send information from the user directly to the search engines
(c) a way to input data into a website or an application
(d) to enable the user to navigate the website with ease.
Answer : C

Very Short Answer Type Questions

Question. State the purpose of submit and reset buttons.
Answer : submit buttons: when activated, a submit button submits a from. A form may contain more than one submit buttons.
Reset buttons: when activated, a reset button resets all controls to their initial values.

Question. How text box and text area controls are different from each other?
Answer : text box accepts in one line while text area accepts multiple lines of input.

Question. What is difference between radio button and checkbox.
Answer : radio buttons let a user select only one of the choices while check boxes allow the user to select one or more of the choices.

Short Answer Type Questions

Question. Name different control types supported by HTML forms.
Answer : 1. Buttons
2. check boxes
3. radio buttons
4. menus
5. password
6. text input
7. hidden controls

Question. Explain method and action attributes of form tag.
Answer : method: the method attribute specifies how to send form data (the form data is sent to the page specified in the action attribute). The form data can be sent as URL variables (with method = “get”) or as HTTP post transaction (with method = “post”). Action: the action attribute submits collected information to a processing agent (a file containing a script to process this information).

Question. Write the tags to define the following:
(i) a text box (ii) a text area (iii) a radio button (iv) a check box
(v) a password box (vi) a pop up box (vii) submit button (viii) a label.
Answer : (i) <INPUT type = “text”>
(ii) <TEXTAREA>
(iii) <INPUT type = “radio”
(iv) <INPUT type “checkbox”>
(v) <INPUT type = “password”>
(vi) HTML type not have any pop component, for this we can use any scripting language.
(vii) <button type = “submit”>
(viii) <label for = male”> label name </label>

Question. Mention all the attributes of check box.
Answer : attributes of chackboxes:
NAME: it adds an internet name to the field so the program that hands the form can identify the fields.
VALUE: it defines what will be submitted if checked.
ALIGN: it defines how the text field will be aligned form.
Valid entries are: TOP, MIEELE, BOTTOM, RIGHT, LEFTTEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
TABINDEX: it defines in which order the different fields should be activated when the visitor clicks the tab key.

Question. Why forms are used in Web pages?
Answer : HTML forms are used to pass data to a server. A form can be inserted in HTML document using the
HTML form element which acts as a container for all the input element. All the information collected by a form can be submitted to a processing agent (a file containing a script made to process this information) that’s usually specified in the “action” attribute of the form tag.

Question. Which attributes are necessary to insert drop down list in a HTML pages?
Answer : the attributes are necessary to insert drop down list in a HTML page are
NAME: it adds an internet name to the field so the program that handles the form can identify the field.
SIZE: it defines the number of items to be visible when user clicks on the drop down box.
MULTIPLE: it allows for multiple selection.
VALUE: it defines what will be submitted when an item is selected.

Question. What do you understand by controls in forms?
Answer : user interact with through named controls. A controls control name is given by its name attribute.
Each control has both an initial value and a current value, both of which are character strings.

Question. Differentiate between Get & post methods of form tag.
Answer : get: it appends form data into the URL in name/value pairs. The length of a URL is limited about 3000 characters. Useful for form submissions where a user wants to bookmarks the result. It is better for non secure data, like query strings in google.
Post: it appends form data inside the body of the HTTP request (data is not shown in URL). It has no size limitations. Form submissions with post cannot be bookmarked.

Question. What is the purpose of SELECT tag?
Answer : <SELECT> is a container tag. Options are placed between tow select tags, each with particular value that gets associated with <SELECT> name attribute when chosen.
<select>
<option name = “a” selected> chocolate
</option>
<option name = “b”> ladoo>/option>
< option name = “c”> cake </option>
</select>

Question. What is INTPUT tag?
Answer : INPUT tag is used to provide an input field in a form where the user can enter the data. An input field may be a text file a checkbox, a radio button, a button, and more. Input element is always used within the form element. Thus, input element defines an object on the form which can receive user’s input.

Question. Explain the use of radio buttons in HTML with the help of a suitable example.
Answer : radio buttons allow selecting one of the two form lighting type i.e. either. Tube light or bulb.
Similarly, the user can select any one of the three from lighting size i.e., long medium and short. This is achieved by a set the same. Here all light ahs the name Ltype while all light is name Lsize.
This is where comes handy, especially if the value has to later on.

Long Answer Type Questions

Question. Design a web page with a form that uses all types of controls
Answer : 

Question. Write code to create a login screen.
Answer : <form?>
<fieldset>
<legend> log in </legend>
<label>username: <input type = “text”></label>
<BR>
<label>password: <input type=”password”></label>
<BR>
<input type=”submit” value = “submit”>
</form>
Log in
Username :
Password :
Submit

Question. Create a job enquiry form as given below:

Answer : <html>
<head>
<title> form </title>
</head>
<body>
<H3><center> JOB ENQUIRY </H3>
<br><br>
<form action=mailto:student @ study.com method=”post”
<table align = “center”
<tr>
<td align=”right”>user ID: </td>
<td colspan=”e”><input type=”password” name = “uid” size=”35px”></td>
</tr>
<tr>
<td align= “right”> gender:</td>
<td> <input type = “radio” name=”gender” value= “male” checked>male </td>
<td><input type=”radio” name=”gender” value =”female”> female</td>
<td> <input type=”radio name = “gender” value=”other> other </td>
</tr>
<tr>
<td align = “right”> interested in: </td>
<td> <input type = “checkbox name = “lang” value =”html” HTML</td>
<td> <input type =”checkox” name= “lang” value = “c”>c</td>
<td> <input type= “checkbox” name = “lang” value = “java”> java </td>
</tr>
<tr>
<td> describe your skills:</td>
<td colspan = 3>
<textarea name = “skills” “5” cols=”35px”></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td colspan = “2” ><input type= “submit” value=” submit”></td>
<td> </td>
</tr>
</table>
</form>
<//body>
</html>

Topic – 2 Cascading Style Sheet (CSS)

Objective Type Questions

Choose the correct alternative.

Question. Which of the following property is used as a shorthand to specify a number of other background properties?
(a) background-attachment
(b) background
(c) background repeat
(d) background position
Answer : B

Question. The ……….. repeats the image both horizontally and vertically to cover the entire screen.
(a) background image property
(b) foreground color property
(c) background color property
(d) background repeat property
Answer : D

Question. The ………. Makes it is possible to add different decorations or effects to text.
(a) text align property
(b) text indent property
(c) letter spacing property
(d) none of the above
Answer : D

Question. If we want to use a nice red dotted border around an image, which css property will we use?
(a) birder-color
(b) border-decoration
(c) border-style
(d) border-line
Answer : C

Question. Which property is used to give the specified spacing between the text characters?
(a) text decoration
(b) letter spacing
(c) text ransform
(d) none of the above
Answer : B

Question. The units …. And …….. allow the user to adjust the font size according to him her.
(a) '#’ and me
(b) % and em
(c) $ and es
(d) all of the above
Answer : B

Question. Which of the below is the correct way to set a font size?
(a) h2 (font-size:200%;
(b) h2 {font-size:200px;}
(c) h2 {font-size:200;}
(d) both (b) and (c)
Answer : D

Question. Which property describes how bold or “heavy” a font should be presented?
(a) font style
(b) font size
(c) font weight
(d) font variant
Answer : C

Question. Which of the following property is used to increase or decrease the size of a font?
(a) font-size
(b) font
(c) font variant
(d) font weight
Answer : A

Question. The units px and …… make the font size absolute.
(a) pr
(b) pn
(c) pz
(d) pt

Answer : D

Question. Which of the following is a way to associate styles with your HTML document?
(a) external CSS- the element
(b) imported CSS- @import rule
(c) both (a) and (b)
(d) external CSS-@import rule
Answer : C

Question. ………… is a style sheet language used for describing the look and formatting of a document written in
a markup language.
(a) document filters(DOM)
(b) multimedia filters
(c) cascading style sheets (CSS)
(d) DHTML
Answer : C

Question. Which of the following selector matches a element based on its id?
(a) the id selector
(b) the universal selector
(c) the descendant selector
(d) the class selector
Answer : A

Fill in the blanks

Question. The fount-variant property refers to the ……….. variant of the font face.
Answer : lettercase

Question. The …………….. property describes the foreground color of a text to be displayed in browser.
Answer : color

Question. The C““ specification also allows browser to render any …….. value as normal.
Answer : default

Question. The property ………….. is used to apply prioritized list of fonts in a web page.
Answer : font family

Question. The text decoration has to rendered with ………….
Answer : effects

Question. Font-family style differentiates between …………… ,………… and …….. font faces.
Answer : serif, sans-serif and monospace

Question. Font variant property is used to select ……….. or ……….. variants of a font
Answer : normal or small-caps

Question. The ……… property describes the background color of browser window.
Answer : background-color

Question. The text transform property controls the ………… of a text.
Answer : capitalization

Question. The …………… property allows you to add effects to text paragraphs by applying an indent to the first of the first line of the paragraph.
Answer : text-intent

Question. The ……….. property is used to insert a background images in a web page.
Answer : background-image

Question. C““ uses a numeric scale of multiples of …………. To ……….
Answer : 100,900

Question. The property defines the chosen font either in ………. , ……… or ………… .
Answer : normal, italic, oblique

Very Short Answer Type Questions

Question. What are cascading sheets?
Answer : cascading style is a list of statements that can assign various rendering properties to HTML element.

Question. What is the extension of a CSS file?
Answer : extension of CSS file is CSS.

Question. What is a CSS rule? Give an example.
Answer : a CSS rule is a grouping of one or more CSS properties which are to be applied to one more target HTML element.

Question. What is the difference between a static and dynamic website?
Answer : a static is delivered to a user exactly the way it’s stored. There are no user interactions, no comments or any activity.

Question. Mention the properties of CSS used to insert letter spacing in a line.
Answer : Letter-spacing : 1px;(px can be vary)

Question. How can we specify that the text of a div element should use font arial if available, else calibri?
Answer : div {font-family: arial, calibri;}

Short Answer Type Questions

Question. How many types of text alignments can be included in a CSS page.
Answer : there are three types of text alignments can be included in a CSS page. The text can either be aligned to the left, to the right or center of the screen.

Question. Explain CSS reference to DHTML.
Answer : CSS is a style sheet language used for describing the look and formatting of a document written in a markup language. It is a way to provide style to HTML. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document. DHTML is merely a browser feature or enhancement that gives your browser the ability to be dynamic.

Question. Form a CSS code with in the <head>..</head> for the following specifications:
Background color: blue For the paragraph, Font family is dotum and colour of the text is red heading should be black color.
Answer : <head>
<style>
Body
{ background color: blue;}
P
{color: red;}
H1 {color: red; }
<</style>
</head>

Question. How can we use CSS with HTML document?
Answer : to link an HTML document with a stylesheet, perform the following steps:
(i) create an HTML document and save it as a file with the html externsion.
(ii) crate a separate CSS stylesheet and save it as a file with the. Css extension.
(iii) link noth the files using following code. <link rel = stylesheet type = text/css” href= text.css>

Question. Explain how would we embedded style in your HTML.
Answer : there are three ways to apply CSS to an HTML document. By inline internal or using external style sheet in HTML page.

Question. Explain font-weight.
Answer : font-weight property describes how bold or heavy a font should be presented. A font can either be normal or bold. Some browsers support the use of numbers 100-900[in hundreds] To describe the weight of a font.

Question. List some advantages and disadvantages of CSS.
Answer : 1. It controls layout of many documents from one single style sheet.
2. it has more precise control of layout
3. it applies different layouts to different media-types.
4. it has numerous advanced and sophisticated techniques to be applied one web pages.
Disadvantage of CSS are:
1. CSS is very limited in browser compatibility.
2. when you design a web page and you want it to display exactly as you like it. The problem with CSS is that it displays webpages very different in the different browser.

Question. How the text in a webpage can be capitalized using CSS properties?
Answer : the text-transform property controls the capitalization of a text. We can choose to capitalize effects to be applied on text I the HTML code.

Question. What do you mean by font variant? Gave example or each.
Answer : the font-variant property is used to select normal or small caps variants of a font.
Sans book SC sans bold SC serif book SC serif bold SC
ABC abc ABC abc ABC abc ABC abc

Question. How can we set the image as background property?
Answer : the background image property specifies an image to use as the background of an element. By default, the background of an of an element. By defaut the image is repeated so it covers the entire element. The background can be se as body {background image:url(scene 1.gif)}

Question. Why stylesheets are used?
Answer : the main use of CSS is to improve HTML pages be decorating them, and displaying them in better way than they would normally do. They simpligy the web creator work by using one CSS stylesheet for more than one document.

Question. Gave an example of linking CSS with HMTL.
Answer : 

Question. Explain can we set the image as background property?
Answer : color property is used to set the foreground color while background color of the webpage.

Long Answer Type Questions

Question. Explain CSS inline style.
Answer : <!DOCTYPE html>
<html>
<head>
Title> learning HTML </title>
</head>
<body>
<p style=”font size: xx-large; color;maroon;
Text-align: center; border; groove 5px orange>
Learning HTML </p>
<p style=”font-size: medium; medium; color:navy; text-align. Left; border: dashed 4px green”> learning
HTML</p>
</body></html>

Question. Create a simple web page on different types of rocks” set suitable properties for the text. Draw a
horizontal line after each paragraph. Use inline style to set the properties.
Answer : 1. Open notepad and type the following HTML code. You will observe that each paragraph
following a different style of formatting
<!DOCTYPE html>
<html><head>
<title> types of rocks </h1>
</dead>
<body>
<h1> different type of rocks </h1>
<h2> ligneous rocks </h2>
<p style=”font-size: xx-;large; color: maroon; text-align: centre. Border: solid 4px 4
Px blue.>
The earth’s core is made up of molten rock. When a volcano erupts this molten rock flown out. It later
cools and solidifies to forb igneous and magnesium granite pumice and <hr style=”margin left 200px;
margin-right: 100px; border-width: thick; border-style: double; color: blue;>
<h2> sedimentary rocks </h2>
<p style = “font-size: x-large; color: green; text- align; border: dashed 3px down mountains, etc., wear
down rocks on mountains and carry small bits of them down to deposit elsewhere. Repeated deposition presences down the lower layers and hardens them into rock. Such rocks are called sedimentary rocks. Sandstone limestone and shale are some of the examples of sedimentary rocks. </p>
<hr style = “border: 4px groove yellow”>
<h2> metamorphic rocks are rocks that may be formed due to physical and chemical changes in igneous, sedimentary or older metamorphic rocks. These changes happen due to heat and preassure. Marble, slate, quartzite are some examples of metamorphic rocks. </p>
</body></html>
2. save the document as example. Html
3. open internet explorer and then open the document example. Html in it.

Question. Explain style different CSS style linking.
Answer : (a) internal style sheet: an internal style sheet holds the CSS code for the web page in the head section of the particular file. This makes it easy to apply styles like classes of id’s in order to reuse the code. The downside of using an internal style sheet is that changes to the internal style sheet only affect the page the code is inserted into.
(b) external style sheet: an external style sheet is a separate file where you can declare all the styles that you want to use on your website. You can then link to the external style sheet from all your HTML pages.
A cascading style sheet file will have an extension as css and it will be included in HTML files using <link> tag.
(c) inline styles: the inline style is specific to the tag itself. It uses the HTML style attribute to style a specific tag

Question. Design a web page demonstrating all style sheet types: generate a nested list as follos: (display fruits and vegetables in red font color using inline style, display mango, banana and apple in font color blue and tomato, potato and carrot in font color yellow internal stylesheet.
Hint: use id/class attributes and/or styles for nested tags.
Fruits
Banana
Apple
Mango
Vegetables
Tomato
Potato
Carrot
Answer : 

Question. Crate a contact similar to the one shown below, using CSS.

Answer :  <!DICTYPE html>
<html>
<head>
<meta name = ”vie􀇁port“ content=“device-width, initial scale=1“>
<style>
Body {font family: arial, Helvetica, sans serif:}
{box-sizing: border-box:}
Input{type=text], select, textarea{width:100%;
Padding: 12px;
Border: 1px solid #ccc;
Border-radius:4px;
Box-sizing: border-box;
Margin-top:6px;
Margin bottm: 16px;
Resize: vertical;}
Input[type=submit]{background-color:#4CAF50;
Color; white;
Padding: 12px 20px;
Border: none
Border-radius:4px;
Cursor: pointer;}
Input[type=submit]:hover{background-color:#45a049;} container {
Border-radius: 5px;
Background-color: #f2f2f2;
Padding: 20px;}
</style>
</head>
<body>
<h3>contact form </h3>
<div class=“container“>
<form action=“/action-page.php“>
<label for=“fname“> first name</label>
<input type = “text“ id=“fname name=“firstname“ placeholder=“your name.“>
<lable for =“lname“>last name <label>
<input type=“text“ id = fname“ name = last name placeholder=“your last name”>
<label for=“country“> country</label>
<select id=“ country“ name=“country“>
<option value=“ selected> india</option>
<option value=“ Canada“>Canada</option>
<option value=“usa“> U“A</option>
</select>
<label for=“subject“>name=“subject placeholder=“􀇁rite something.“
“tyle= “height:200x“></textarea>
<input type=“submit“ value=“ submit“>
</form>
</div>
</body>
<html>