HTML - Audio, Video and Forms and CSS
Uploaded by
man.u.forev44HTML - Audio, Video and Forms and CSS
Uploaded by
man.u.forev44HTML III — Audio, Video and Forms
Objective Type Questions
Question 1
Which of the following is/are not valid tag(s) for inserting audio files in an HTML page ?
1. embed
2. audio
3. sound
4. music
Answer
sound, music
Reason — <EMBED> and <AUDIO> tags are used to insert audio files in an HTML page. sound and music are
not valid tags.
Question 2
Which of the following is/are not valid tag(s) for inserting video files in an HTML pages?
1. embed
2. video
3. movie
4. VID
Answer
movie, VID
Reason — <EMBED> and <VIDEO> tags are used to insert video files in an HTML document. movie and VID
are not valid tags.
Question 3
Which are the ways to add an audio file in a web page ?
1. Linking via <A>
2. Embedding via <EMBED>
3. Embedding via <VIDEO>
4. All of these
Answer
Linking via <A>
Embedding via <EMBED>
Reason — We can link an audio file via anchor tag <A> in the following way :
<A HREF = "audio.mp3"> Click to Play </A>
We can link an audio file via embed tag <EMBED> in the following way :
<EMBED SRC = "audio.mp3" WIDTH = "100" HEIGHT = "50" AUTOSTART = "TRUE" LOOP = "TRUE">
<VIDEO> tag is used to insert a video file in HTML page.
Question 4
Which are the ways to add a video file in a web page ?
1. Linking via <A>
2. Embedding via <EMBED>
3. Embedding via <VIDEO>
4. All of these
Answer
All of these
Reason — We can add a video file in a web page using different tags in the following ways:
1. Using anchor tag <A>
<A HREF = "WORDS.MP4"> Click here to play video </A>
2. Using <EMBED> tag
<EMBED SRC = "WORDS.MP4" WIDTH = "100" HEIGHT = "50" AUTOSTART = "TRUE" LOOP =
"FALSE">
3. Using <VIDEO> tag
<VIDEO SRC = "WORDS.MP4" TYPE = "VIDEO/MP4"> Video cannot be played </VIDEO>
Question 5
Any tag allowed inside a <body> tag is allowed inside a <form> tag.
1. True
2. False
Answer
True
Reason — Any tag allowed inside a <body> tag is allowed inside a <form> tag to render the form in a presentable
way.
Question 6
A form has two required attributes. These are :
1. Method and Action
2. Get and Post
3. Start and Stop
4. Begin and End
Answer
Method and Action
Reason — The <FORM> tag always takes two attributes — ACTION and METHOD.
ACTION attribute specifies any script URL that will receive uploaded data and METHOD specifies the method
which will be used to upload data.
Question 7
The <input> tag has several kinds of controls which are dictated by the ............... attribute.
1. SRC
2. value
3. name
4. type
Answer
type
Reason — The <input> tag has several kinds of controls which are dictated by the TYPE attribute. It indicates the
type of input control we want to create. This element is used to create other form controls such as radio buttons
and checkboxes.
Question 8
It is possible to set the width of a text by specifying a ............... attribute.
1. limit
2. size
3. value
4. maxlength
Answer
size
Reason — It is possible to set the width of a text by specifying a SIZE attribute. SIZE attribute specifies the width
of the text input control in terms of characters.
Question 9
Which of the following tags will clear the contents of the form?
1. <INPUT TYPE="CLEAR" VALUE="Clear the form">
2. <INPUT TYPE="SUBMIT" VALUE="Clear the form">
3. <INPUT TYPE="RESET" VALUE="Clear the form">
4. <INPUT TYPE="BUTTON" VALUE= "Clear the form">
Answer
<INPUT TYPE="RESET" VALUE="Clear the form">
Reason — The RESET button is a special button which when clicked, resets all the form controls to default states.
Question 10
Consider the following form control in a HTML form :
x Male
x Female
Now choose the correct line of code for the above :
1.
<input type = "radio" name= "Gender" value= "male">Male<br>
<input type = "radio" name= "Gender" value= "female">Female<br>
2.
<input type = "radiobutton" name = "Gender" value= "male">Male<br>
<input type = "radiobutton" name = "Gender" value= female">Female<br>
3.
<input type = "radio", name = "Gender">< value= "male">Male
<input type = "radio", name = "Gender">< value= "female">Female
4.
<input type = "radio" name= "Gender" value= "male"><br>
<input type = "radio" name= "Gender" value = "female"><br>
Answer
<input type = "radio" name= "Gender" value= "male">Male<br>
<input type = "radio" name= "Gender" value= "female">Female<br>
Reason — The above HTML tags will render the desired output.
Question 11
A developer can restrict the values accepted in a text field by specifying a ............... attribute.
1. size
2. maxlength
3. value
4. You cannot restrict text values using HTML
Answer
maxlength
Reason — A developer can restrict the values accepted in a text field by specifying a maxlength attribute. It
specifies the maximum number of characters a user can enter into the text box.
Question 12
You can mask the input typed into a text field by specifying an <input> tag as ............... .
1. password
2. secure
3. invisible
4. hidden
Answer
password
Reason — You can mask the input typed into a text field by specifying an <input> tag as password. It hides the
characters input in the box and shows dots or asterisk in place of every character.
Question 13
Tag to create password field in HTML document :
1. <password>
2. <input>
3. <pwd>
4. <pword>
Answer
<input>
Reason — The password boxes are created using an <INPUT> element whose TYPE attribute has a value of
"password". An example is as follows:
<INPUT TYPE = "PASSWORD" NAME = "PWD" />
Question 14
HTML provides an attribute for the <input> tag that allows you to hide data with some designated character to
make it secure.
1. True
2. False
Answer
True
Reason — We can mask the input typed into a text field by specifying an <input> tag as password. It hides the
characters input in the box and shows asterisk in place of every character. Consider the following example,
<INPUT TYPE = "PASSWORD" NAME = "PWD" />
Question 15
Which of the following tag is used to define options in a drop-down selection list ?
1. <select>
2. <list>
3. <dropdown>
4. <option>
Answer
<option>
Reason — A drop down selection list is created with SELECT and OPTION tag pair. An example is given below:
<FORM ACTION = "WWW.GMAIL.COM" METHOD = "GET">
<SELECT NAME = "STREAM">
<OPTION VALUE = "SCIENCE"> Science </OPTION>
<OPTION VALUE = "COMMERCE"> Commerce </OPTION>
<OPTION VALUE = "HUMANITIES"> Humanities </OPTION>
</SELECT>
<INPUT TYPE = "SUBMIT" VALUE = "SUBMIT" />
</FORM>
<SELECT> tag specifies a selection drop down list and <OPTION> tag specifies the various options available to
select from.
Question 16
Which of the following restricts a user to one selection ?
1. checkbox
2. optionbox
3. radio button
4. drop down list
Answer
radio button
Reason — Radio buttons are used when only one option is required to be selected. All of its options are mutually
exclusive.
Question 17
You can pre-select a radio button by utilizing a ............... attribute.
1. select
2. choice
3. checked
4. marked
Answer
checked
Reason — You can pre-select a radio button by utilizing a checked attribute. It indicates that a particular option
should be selected by default when a page loads.
Question 18
If you want to display a list of 200 countries which control should you use:
1. radio button
2. checkbox
3. select list
4. slide widget
Answer
select list
Reason — A select list is used when we have many options available to be selected but only one or two options
will be selected. We can have a select list of 200 countries out of which a country can be selected.
Theoretical Questions
Question 1
Name some popular audio and video formats.
Answer
Some popular audio formats are mp3, wav, midi, m4a and ogg/oga.
Some popular video formats are asf, avi, mpeg, QuickTime and RealVideo.
Question 2
Name the tags that can be used to insert audio and video files in a webpage.
Answer
Following tags can be used to insert audio files in a webpage:
1. Anchor tag <A>
2. Embed tag <EMBED>
3. Audio tag <AUDIO>
Following tags can be used to insert video files in a webpage:
1. Anchor tag <A>
2. Embed tag <EMBED>
3. Video tag <VIDEO>
Question 3
What character is displayed on the password forms when the user inputs characters ?
1. a random character.
2. a '+' character.
3. an asterisk
4. a dot
Answer
an asterisk
Reason — We can mask the input typed into a text field by specifying an <input> tag as password. It hides the
characters input in the box and shows asterisk in place of every character.
Question 4
What attribute is used for radio buttons ?
1. radiobutton
2. radiob
3. radio
4. optionbutton
Answer
radio
Reason — Radio buttons are created in the following manner:
<form>
...
<input type = "radio" name = "Gender" value = "male"> Male <br>
<input type = "radio" name = "Gender" value = "female"> Female
<br>
...
</form>
The TYPE attribute is set to "radio".
Question 5
What attributes are valid for textarea input ?
1. just name
2. name, columns and rows
3. name and rows
4. columns and rows
Answer
name and rows
Reason — NAME, COLS and ROWS are the valid attributes which specify the name of the control, the number of
columns and the number of rows of text area box, respectively.
Question 6
What attributes can be used with the SELECT form ?
1. name and multiple
2. name, multiple, rows and cols
3. name, multiple and size
4. multiple and size
Answer
name, multiple and size
Reason — NAME, SIZE and MULTIPLE attributes can be used with the SELECT form which specify the name of
the control, present a scrolling list box and allow the user to select multiple items from the menu, respectively.
Question 7
Is the size attribute valid for the submit button ?
1. Yes
2. No
Answer
No
Reason — No, the SIZE attribute is not valid for the SUBMIT button.
Question 8
The two most important attributes of a form are :
1. Id and action
2. Class and method
3. Action and method
4. method and id
Answer
Action and method
Reason — The two most important attributes of a form are ACTION and METHOD.
ACTION attribute specifies any URL script which will receive uploaded data and METHOD specifies the method
which will be used to upload data.
Question 9
A label's for attribute should match the input's ............... .
1. type
2. id
3. name
4. size
Answer
id
Reason — The for attribute of a <label> tag should match the id attribute of the corresponding input element. The
for attribute is used to associate a label with a form control, providing a textual description or caption for the input
field.
Question 10
Creates blank text field, but shows the text as asterisks.
1. Type="text"
2. Type="hidden"
3. Type="password"
4. Type="null"
Answer
Type="password"
Reason — We can mask the input typed into a text field by specifying an <input> tag as password. It hides the
characters input in the box and shows asterisk in place of every character.
Question 11
Method attribute will always post data into the browser.
1. True
2. False
Answer
False
Reason — The method attribute will not always "post" data into the browser. The method attribute can be set to
"GET" or "POST" to determine how the data is sent to the server.
Question 12
Checkbox buttons let users select one or more of a particular set of choices.
1. True
2. False
Answer
True
Reason — Checkboxes are used when more than one option is required to be selected.
Question 13
<input type="submit" name="submit" id="submit" /> creates a reset button.
1. True
2. False
Answer
False
Reason — <input type="submit" name="submit" id="submit" /> creates a SUBMIT button. RESET button is
created by the following code:
<input type="reset" name="reset" id="reset" />
Question 14
What are forms ?
Answer
HTML forms are means to collect information/data from the site visitor. It is done with the help of controls that
collect the information and send it over.
Question 15
What do you understand by controls in forms ?
Answer
Users interact with forms through named objects called controls. A control's "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. Some
control types used in HTML are buttons, checkboxes, radio buttons, menus, password, text input etc.
Question 16
Name different control types supported by HTML forms.
Answer
The different control types supported by HTML forms are as follows:
1. Buttons
2. Checkboxes
3. Radio Buttons
4. Menus
5. Password
6. Text Input
7. Hidden Controls
Question 17
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) A text box
<INPUT TYPE = "TEXT" NAME = "NAME" />
(ii) A text area
<TEXTAREA NAME = "COMMENTS" ROWS = "5" COLS = "50">
Default Text
</TEXTAREA>
(iii) A radio button
<INPUT TYPE = "RADIO" NAME = "STREAM" VALUE = "Science" /> Science
(iv) A check box
<INPUT TYPE = "CHECKBOX" NAME = "S1" VALUE = "ENGLISH" /> English
(v) A Password box
<INPUT TYPE = "PASSWORD" NAME = "PASSWD" />
(vi) A pop up box
<SELECT NAME = "COLOUR">
<OPTION VALUE = "Red"> Red </OPTION>
<OPTION VALUE = "Blue"> Blue</OPTION>
<OPTION VALUE = "Green"> Green</OPTION>
</SELECT>
(vii) Submit button
<INPUT TYPE = "SUBMIT" NAME = "SUBMIT" VALUE = "SUBMIT" />
(viii) A Label
<LABEL FOR = "S1">Science</LABEL>
<INPUT TYPE = "RADIO" ID = "S1" NAME = "STREAM" VALUE = "Science">
Question 18
Write HTML code to produce following controls :
Grade : A B C
Subjects : English Maths
Computers Accounts
Economics
Business Studies
Answer
<TABLE BORDER = "0">
<TR>
<TD> Grade : </TD>
<TD> <INPUT TYPE = "RADIO" NAME = "GRADE" VALUE = "A" /> A </TD>
<TD> <INPUT TYPE = "RADIO" NAME = "GRADE" VALUE = "B" /> B </TD>
<TD> <INPUT TYPE = "RADIO" NAME = "GRADE" VALUE = "C" /> C </TD>
</TR>
<TR>
<TD VALIGN = "TOP" ROWSPAN = "4"> Subjects :</TD>
<TD COLSPAN = "2">
<INPUT TYPE = "CHECKBOX" NAME = "SUBJECTS" VALUE = "English" /> English
</TD>
<TD>
<INPUT TYPE = "CHECKBOX" NAME = "SUBJECTS" VALUE = "Maths" /> Maths
</TD>
</TR>
<TR>
<TD COLSPAN = "2">
<INPUT TYPE = "CHECKBOX" NAME = "SUBJECTS" VALUE = "Computers" /> Computers
</TD>
<TD>
<INPUT TYPE = "CHECKBOX" NAME = "SUBJECTS" VALUE = "Accounts" /> Accounts
</TD>
</TR>
<TR>
<TD COLSPAN = "2">
<INPUT TYPE = "CHECKBOX" NAME = "SUBJECTS" VALUE = "Economics" /> Economics
</TD>
</TR>
<TR>
<TD COLSPAN = "2">
<INPUT TYPE = "CHECKBOX" NAME = "SUBJECTS" VALUE = "Business Studies" /> Business Studies
</TD>
</TR>
</TABLE>
Output
Question 19
Write HTML code to produce these controls :
(i) a text box
(ii) a text area with 10 rows and 30 columns
(iii) A password text box
(iv) A pop up box to choose class from it.
Answer
(i) a text box
<INPUT TYPE = "TEXT" NAME = "FIRST NAME" />
(ii) a text area with 10 rows and 30 columns
<TEXTAREA ROWS = "10" COLS = "30" NAME = "COMMENTS">
Default Text
</TEXTAREA>
(iii) A password text box
<INPUT TYPE = "PASSWORD" NAME = "PWD" />
(iv) A pop up box to choose class from it.
<SELECT NAME = "CLASS">
<OPTION VALUE = "Class I" SELECTED> Class I </OPTION>
<OPTION VALUE = "Class II"> Class II</OPTION>
<OPTION VALUE = "Class III"> Class III</OPTION>
<OPTION VALUE = "Class IV"> Class IV</OPTION>
<OPTION VALUE = "Class V"> Class V</OPTION>
</SELECT>
Application Oriented Questions
Question 1
Create a form as given below by using different Form tags and attributes.
(Hint : Also use Pre, Input, Select, Option tags for this)
Answer
<HTML>
<BODY>
<FORM>
<H1> My Guest Book </H1>
<P>
Please let me know what you think of my Web Pages. Thanks !
</P>
<TABLE BORDER = "0" RULES = "NONE" FRAME = "VOID">
<TR>
<TD> <PRE>What is your name ?</PRE> </TD>
<TD> <INPUT TYPE = "TEXT" NAME = "NAME" /> </TD>
</TR>
<TR>
<TD> <PRE>What is your e-mail address :</PRE> </TD>
<TD> <INPUT TYPE = "TEXT" NAME = "EMAILID" /> </TD>
</TR>
</TABLE>
<BR>
Check all that apply:
<BR>
<INPUT TYPE = "CHECKBOX" ID = "C1" NAME = "C1" VALUE = "I really like your Web Site.">
<LABEL FOR = "C1">I really like your Web Site.</LABEL>
<BR>
<INPUT TYPE = "CHECKBOX" ID = "C2" NAME = "C2" VALUE = "One of the best site I've seen.">
<LABEL FOR = "C2">One of the best site I've seen.</LABEL>
<BR>
<INPUT TYPE = "CHECKBOX" ID = "C3" NAME = "C3" VALUE = "I have no taste so your site didn't do much
for me.">
<LABEL FOR = "C3">I have no taste so your site didn't do much for me.</LABEL>
<BR>
<BR>
Choose the one thing you love best of my pages:
<BR>
<INPUT TYPE = "RADIO" ID = "O1" NAME = "OPINION"
VALUE = "That gorgeous picture of you and your dogs.">
<LABEL FOR = "O1">That gorgeous picture of you and your dogs.</LABEL>
<BR>
<INPUT TYPE = "RADIO" ID = "O2" NAME = "OPINION"
VALUE = "The inspiring recap about your childhood.">
<LABEL FOR = "O2">The inspiring recap about your childhood.</LABEL>
<BR>
<INPUT TYPE = "RADIO" ID = "O3" NAME = "OPINION"
VALUE = "The detailed list of your hobbies.">
<LABEL FOR = "O3">The detailed list of your hobbies.</LABEL>
<BR>
<BR>
Imagine my site as a book, video or album.
<BR>
What do you think about my site?
<BR>
<SELECT NAME = "DETAILS" SIZE = "3">
<OPTION VALUE = "ADD MORE DETAILS ABOUT YOUR HOBBIES!" SELECTED>
ADD MORE DETAILS ABOUT YOUR HOBBIES!
</OPTION>
<OPTION VALUE = "ADD PICTURES OF YOUR CHILDHOOD">
ADD PICTURES OF YOUR CHILDHOOD
</OPTION>
<OPTION VALUE = "ADD YOUR FAVOURITES">
ADD YOUR FAVOURITES
</OPTION>
</SELECT>
<INPUT TYPE = "SUBMIT" NAME = "SUBMIT" VALUE = "Click here to submit" />
</FORM>
</BODY>
</HTML>
Output
Question 2
Create a webpage that receives pizza orders through a web form as shown below :
Answer
<HTML>
<BODY BGCOLOR = "YELLOW">
<FORM>
<H1> Pizza Factory </H1>
<HR>
<P>
<B> Pizza Order Form </B>
</P>
<TABLE WIDTH = "50%" BORDER = "0" FRAME = "VOID" RULES = "NONE">
<TR>
<TD>Name </TD>
<TD><INPUT TYPE = "TEXT" NAME = "NAME"></TD>
</TR>
<TR>
<TD>Address </TD>
<TD><INPUT TYPE = "TEXT" NAME = "ADDRESS"> </TD>
</TR>
<TR>
<TD><B> Size </B><BR> </TD>
<TD><B> Toppings </B><BR> </TD>
</TR>
<!-- This inserts a blank row -->
<TR>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD VALIGN = "TOP">
<INPUT TYPE = "RADIO" ID = "R1" NAME = "SIZE" VALUE = "SMALL" />
<LABEL FOR = "R1"> Small </LABEL>
<BR>
<INPUT TYPE = "RADIO" ID = "R2" NAME = "SIZE" VALUE = "MEDIUM" />
<LABEL FOR = "R2"> Medium </LABEL>
<BR>
<INPUT TYPE = "RADIO" ID = "R3" NAME = "SIZE" VALUE = "LARGE" />
<LABEL FOR = "R3"> Large </LABEL>
<BR>
</TD>
<TD>
<INPUT TYPE = "CHECKBOX" ID = "CB1" NAME = "C1" VALUE = "CHEESE" />
<LABEL FOR = "CB1"> Cheese </LABEL>
<BR>
<INPUT TYPE = "CHECKBOX" ID = "CB2" NAME = "C2" VALUE = "OLIVES" />
<LABEL FOR = "CB2"> Olives </LABEL>
<BR>
<INPUT TYPE = "CHECKBOX" ID = "CB3" NAME = "C3" VALUE = "PEPPERONI" />
<LABEL FOR = "CB3"> Pepperoni </LABEL>
<BR>
<INPUT TYPE = "CHECKBOX" ID = "CB4" NAME = "C4" VALUE = "BACON" />
<LABEL FOR = "CB4"> Bacon </LABEL>
<BR>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE = "SUBMIT" NAME = "Process Order" VALUE = "Process Order" />
</TD>
<TD ALIGN = "CENTER">
<INPUT TYPE = "RESET" NAME = "Clear" VALUE = "Clear" />
</TR>
</TD>
</TABLE>
<TEXTAREA NAME = "ORDER" COLS = "70" ROWS = "5" >
</TEXTAREA>
</FORM>
</BODY>
</HTML>
Output
Formative Assessment
Question 1(a)
Consider the following code fragments and determine how these code fragments would create form elements,
i.e., draw how their output would appear in browser.
<input type="text" size="3" maxlength="3">
<input type="text" size="2" maxlength="2">
<input type="text" size="4" maxlength="4">
Answer
The output of this code fragment in browser is shown below:
Question 1(b)
Consider the following code fragments and determine how these code fragments would create form elements,
i.e., draw how their output would appear in browser.
<input type="text" name="text1">
Answer
The output of this code fragment in browser is shown below:
Question 1(c)
Consider the following code fragments and determine how these code fragments would create form elements,
i.e., draw how their output would appear in browser.
<textarea cols="30" rows="6" name="textarea"> Please enter text </textarea>
Answer
The output of this code fragment in browser is shown below:
Question 1(d)
Consider the following code fragments and determine how these code fragments would create form elements,
i.e., draw how their output would appear in browser.
<select name= "colors">
<option>Red</option>
<option>Blue</option>
<option>Green</option>
<option>Orange</option>
</select>
Answer
The output of this code fragment in browser is shown below:
Question 1(e)
Consider the following code fragments and determine how these code fragments would create form elements,
i.e., draw how their output would appear in browser.
<select name= "colors" size="4">
<option>Red</option>
<option>Blue</option>
<option>Green</option>
<option>Orange</option>
</select>
Answer
The output of this code fragment in browser is shown below:
Question 1(f)
Consider the following code fragments and determine how these code fragments would create form elements,
i.e., draw how their output would appear in browser.
Male
<input type= "radio" value="male"><br>
Female
<input type= "radio" value="female">
Answer
The output of this code fragment in browser is shown below:
Question 1(g)
Consider the following code fragments and determine how these code fragments would create form elements,
i.e., draw how their output would appear in browser.
Male
<input type="radio" value="male"><br>
Female
<input type="radio" value="female" checked>
Answer
The output of this code fragment in browser is shown below:
Question 1(h)
Consider the following code fragments and determine how these code fragments would create form elements,
i.e., draw how their output would appear in browser.
YES
<input type="checkbox" value="yes"><br>
NO
<input type="checkbox" value="no">
Answer
The output of this code fragment in browser is shown below:
Question 1(i)
Consider the following code fragments and determine how these code fragments would create form elements,
i.e., draw how their output would appear in browser.
YES
<input type="checkbox" value="yes" checked><br>
NO
<input type="checkbox" value="no">
Answer
The output of this code fragment in browser is shown below:
Chapter 6
Cascading Style Sheets (CSS)
Objective Type Questions
Question 1
Which of the following is not one of the DHTML technologies ?
1. HTML
2. CSS
3. JavaScript
4. WWW
Answer
WWW
Reason — DHTML is a combination of HTML, CSS, JavaScript and DOM (Document Object Model) while the
World Wide Web (WWW) is the system of interconnected hypertext documents accessed through the internet, it is
not considered a DHTML technology itself. Instead, the WWW is the platform or environment where DHTML
technologies are utilized to create interactive and dynamic web pages.
Question 2
The acronym CSS stands for what ?
1. Carrot System Style
2. Correlated Styling System
3. Cascading Style Sheets
4. Canvas Styling System
Answer
Cascading Style Sheets
Reason — CSS stands for Cascading Style Sheets.
Question 3
What property would you use to create space between the element's border and inner content ?
1. margin
2. spacing
3. padding
4. border
Answer
padding
Reason — Padding defines the inner distance between the border and the content of the element.
Question 4
How do you tell the browser you are creating a styling section with an internal style sheet ?
1. <style type="css"></style>
2. <class type="css"></class>
3. class type="text/css"></class>
4. <style type="text/css"></style>
Answer
<style type="text/css"></style>
Reason — To embed a style sheet in a web page, we use the <style> tag only within the <head> tag of a web page
in the following way:
<HEAD>
<STYLE TYPE = "TEXT/CSS">
... CSS rules ...
</STYLE>
</HEAD>
Question 5
To reference a style sheet across multiple HTML pages, how would you define your CSS ?
1. Inline Style
2. Internal Style Sheet
3. External Style Sheet
4. CSS is meant for only one page
Answer
External Style Sheet
Reason — To reference a style sheet across multiple HTML pages, we define our CSS as an external style sheet.
Question 6
What is the correct CSS syntax for making all the <span> elements bold ?
1. span {text-size:bold}
2. span {font-weight:bold}
3. <span style="font-size:bold">
4. <span style="text-size:bold">
Answer
span {font-weight:bold}
Reason — The property font-weight specifies the boldness or heaviness for a font. In the given code, the content
of span is set to bold.
Question 7
In the following code snippet, what value is given for the left margin :
margin: 5px 10px 3px 8px;
1. 3px
2. 10px
3. 8px
4. 5px
Answer
8px
Reason — The order of border margin values is top, right, bottom and left. Thus, the value given for the left
margin is 8 pixels.
Question 8
What property is used to change the text color of an element ?
1. fontcolor:
2. textcolor:
3. color:
4. font-color:
Answer
color:
Reason — color property is used to change the text color of an element. For example:
p {color : red ;}
Question 9
Which is the correct CSS syntax ?
1. {p:color=black(p}
2. p {color: black;}
3. {p;color:black}
4. p:color=black
Answer
p {color: black;}
Reason — The correct CSS syntax is :
selector {color : value ;}
The option p {color: black;} follows correct CSS syntax.
Question 10
What is the correct CSS syntax to change the font name ?
1. font-name:
2. font:
3. font-family:
4. fontname:
Answer
font-family:
Reason — font-family: is used to define a list of fonts that should be used to display a given element or web page.
Question 11
Which HTML attribute is used to define inline CSS styles ?
1. css
2. style
3. type
4. id
Answer
style
Reason — STYLE attribute is used to define inline CSS styles. For example,
<H3 STYLE = "FONT-FAMILY = ARIAL">
Question 12
How do you make each word in a text start with a capital letter ?
1. text-transform:capitalize
2. text-transform:uppercase
3. You can't do that with CSS
4. text:capitalize
Answer
text-transform:capitalize
Reason — When the value of text-transform is set to capitalize, it will capitalize the first letter of each word.
Question 13
What is the correct CSS syntax for making all the <p> tag's font size 14px ?
1. p {14px}
2. p {font-size: 14px;}
3. p {text-size: 14px;}
4. p {font: 14px;}
Answer
p {font-size: 14px;}
Reason — The correct syntax for changing all the <p> tag's font size is :
p {font-size : value ;}
The given option follows the correct CSS syntax.
Question 14
Which CSS property controls the text size ?
1. font-height
2. text-size
3. font-size
4. text-style
Answer
font-size
Reason — font-size property is used to set the size of a font.
Question 15
How do you insert padding so that it is :
10 pixels at the top
15 pixels at the bottom
5 pixels at the right
10 pixels to the left
1. padding:10px 15px 5px 10px ;
2. padding:15px 5px 10px 10px ;
3. padding:10px 5px 10px 15px ;
4. padding:10px 5px 15px 10px ;
Answer
padding:10px 5px 15px 10px ;
Reason — The order of padding values is top, right, bottom and left. Thus, to insert the given padding, we write
the definition as follows:
padding:10px 5px 15px 10px ;
Question 16
How do you display hyperlinks without an underline?
1. a {decoration:no underline}
2. a {text-decoration:none}
3. a {hyperlink:no underline}
4. a {text-decoration:no underline}
Answer
a {text-decoration:none}
Reason — To display hyperlinks without an underline, the value of text-decoration property is set to none.
Theoretical Questions
Question 1
Which property is used to change the background color ?
1. background-color
2. bgcolor
3. bg-color
4. color
Answer
background-color
Reason — The background-color property is used to change the background color of an element. For example,
h1 {background-color : yellow; }
Question 2
Which property is used to increase and decrease the text size ?
1. font-width
2. font-size
3. text-width
4. text-size
Answer
font-size
Reason — font-size property is used to increase and decrease the text size in the following way:
h3 {font-size : 8pt; }
Question 3
What would this CSS rule do ?
p { color:red;
}
1. Make the background of all paragraphs red.
2. Make the fonts of all paragraphs red.
3. Make all text boxes red.
4. Make the border of all paragraphs red.
Answer
Make the fonts of all paragraphs red.
Reason — The breakup of the rule is as follows:
● p is a selector in CSS, which targets all <p> elements. In HTML, <p> elements represent paragraphs.
● {} encloses the declaration block, which contains one or more property-value pairs.
● color:red; is a property-value pair within the declaration block. Here, the color property is set to red, which
means the text color of all <p> elements will be changed to red.
So, applying this CSS rule to an HTML page would result in all paragraphs being displayed with red text color.
Question 4
What would this CSS rule do ?
h2 { font-size:2em;
}
1. Make fonts in a specific h2 tag double in size.
2. Make fonts in all h2 tags double in size.
3. Make fonts in all h2 tags double in size and italic.
4. Make all fonts that are size 2, empty.
Answer
Make fonts in all h2 tags double in size.
Reason — The breakup of the rule is as follows:
● h2 is a selector in CSS, which targets all <h2> elements. In HTML, <h2> represents a heading level 2.
● {} encloses the declaration block, which contains one or more property-value pairs.
● font-size:2em; is a property-value pair within the declaration block. Here, the font-size property is set to
2em. The value 2em means the font size will be twice the size of the default font size.
So, applying this CSS rule to an HTML page would result in all heading level 2 elements (<h2>) being displayed
with a font size that is twice the default font size.
Question 5
How do you link an external stylesheet to a page.
1. <link href='somefile.css'>
2. <link rel='stylesheet' src='somefile.css'>
3. <script rel='stylesheet' href=' somefile.css'> </script>
4. <link rel='stylesheet' href='somefile.css'>
Answer
<link rel='stylesheet' href='somefile.css'>
Reason — The correct syntax is explained below:
● <link> is an HTML tag used to include external resources, such as stylesheets.
● rel='stylesheet' is an attribute that specifies the relationship between the current document and the linked
resource. In this case, it indicates that the linked resource is a stylesheet.
● href='somefile.css' is the attribute that specifies the location (URL or file path) of the external CSS file. In
this case, it points to a file named "somefile.css".
By using this <link> tag with the correct attributes, we can connect an external CSS file (such as "somefile.css") to
our HTML document, allowing the styles defined in the CSS file to be applied to the web page.
Question 6
Which one of these name and value declarations would not work ?
1. margin:20px 0 0 30%;
2. margin;20px 30%:
3. margin:20px 30%;
4. margin:20px 23px 5% 30px;
Answer
margin;20px 30%:
Reason — In CSS, declarations follow the format of property: value;. The value is assigned to the corresponding
property, separated by a colon : and terminated by a semicolon ;.
The option margin;20px 30%: has an incorrect syntax. The semicolon ; should be a colon : before the value and the
colon : at the end should be a semicolon ;.
Question 7
Which of the following CSS types is defined in the header of a Web page and applies to the entire Web page
document ?
1. Inline
2. Embedded
3. Inbuilt
4. External
Answer
Embedded
Reason — Embedded or internal styles are defined in the header of a Web page using the <style> tag and apply to
the entire Web page document.
Question 8
Which of the following type of CSS is coded in the body of the Web page as an attribute of an HTML tag and
applies ONLY to the specific element that contains it as an attribute ?
1. Inline
2. Embedded
3. Inbuilt
4. External
Answer
Inline
Reason — Inline style of CSS is coded in the body of the Web page as an attribute of an HTML tag and applies
ONLY to the specific element that contains it as an attribute.
Question 9
Where in an HTML document is the correct place to refer to an external style sheet ?
1. In Body section
2. In Head section
3. In a paragraph
4. Top of the document
Answer
In Head section
Reason — A <LINK> tag is used in the head section of HTML document to link the HTML page to an external
CSS file.
Question 10
Use the CSS ............... property to configure the cellpadding of a table.
Answer
table { padding : 50px 20px 20px 20px ; }
Question 11
What is the utility of dynamic websites ?
Answer
The utility of dynamic websites are as follows:
1. Dynamic websites allow easy content updates.
2. They tailor content based on user preferences.
3. They enable feedback forms, comment sections, and social media integration.
4. They can fetch and display real-time data from databases or APIs enabling live updates like news feeds,
stock market information, weather updates, etc.
5. They support online transactions and inventory management.
6. They handle large amounts of content and user traffic.
7. They streamline processes and save time.
Question 12
What are some features of dynamic websites ?
Answer
Some features of dynamic websites are as follows:
1. User registration and authentication can be done.
2. Content management system (CMS) provides for easy content updates.
3. Search functionality to find specific content.
4. Database integration for dynamic content generation.
5. Interactive forms for user engagement.
6. E-commerce capabilities for online transactions.
7. Social media integration for sharing and interaction.
8. Personalization based on user preferences.
9. Dynamic content delivery for customized user experiences.
10. Analytics and tracking to gather data for analysis and optimization.
Question 13
What do you understand by Stylesheets? How are these useful ?
Answer
A style sheet is a file containing formatting guidelines that define the overall look of a document.
Style sheets are useful in the following ways:
1. It helps to separate structure and presentation. The HTML file can include structure tags and style sheet
takes care of the presentation of content.
2. Web pages download much faster.
3. Developers have to type less code, and the web pages are shorter and neater.
4. The look of the site is kept consistent throughout all the pages that work off the same style sheet.
5. Updating design and general site maintenance are made much easier.
6. Errors caused by editing multiple HTML pages occur less often.
Question 14
What is CSS style rule? How do you define it ?
Answer
A CSS rule is a single statement in a style sheet that identifies what should be styled (the selector) and how those
styles should be applied (the declaration).
We define a rule by writing the selector tag without angle brackets. The properties and their values are written in
the following syntax:
selector { propertyname : value ; propertyname : value ; ...}
For example, if we want <H3 tag to have font face Arial and red color then we define the style rule as follows:
h3 { font.family : Arial ; color : red ; }
Question 15
What are three ways of creating style rules? Give examples of each.
Answer
The three ways of creating style rules are as follows:
1. Inline — Styles are embedded right within the HTML code they affect. For example,
<h3 style = "font.family = Arial ; color = red ">
2. Internal — Styles are placed within the header information of the web page and then affect all the corresponding
tags on the page. For example,
<HEAD>
<STYLE TYPE = "TEXT/CSS">
h3 { font.family : Arial ; color : red ; }
</STYLE>
</HEAD>
3. External — Styles are coded in a separate document, which is then referenced from within the header of the
actual web page. For example, let there be a CSS file named sample.css :
h3 { font.family : Arial ; color : red ; }
p { font.family : Times New Roman ; color : blue ; }
...and so on...
To link sample.css file to an HTML document, we use the <link tag in the following manner:
<HEAD>
<LINK REL = "STYLE SHEET" TYPE = "TEXT/CSS" HREF = "SAMPLE.CSS">
</HEAD>
Question 16
What is the Cascading order of different style types ?
Answer
The cascading order of different style types from higher precedence to lower precedence is :
1. Inline
2. Internal
3. External
Question 17
Where do you place the code to associate a Web page with an external style sheet ?
Answer
To associate a Web page with an external style sheet, we place the code in the head tag in the following manner :
<HEAD>
<LINK REL = "STYLE SHEET" TYPE = "TEXT/CSS" HREF = "SAMPLE.CSS">
</HEAD>
where, sample.css is the name of the CSS file.
Application Oriented Questions
Question 1
How do you add a background color for all <h1> elements?
Answer
We define a rule for <h1> tag and use the property background-color to set the background color for all h1
elements.
For example, to set the background color of all <H1> elements to blue, we define the rule as follows:
h1 { background-color : blue ; }
Question 2
How do you display a border like this :
The top border = 10 pixels
The bottom border = 5 pixels
The left border = 20 pixels
The right border = 1pixel
Answer
To display the given border, we use the border-width property and write the values in the order — top, right,
bottom, left. Thus, the rule will be written as follows:
selector { border-width : 10px 1px 5px 20px ; }
Question 3
How do you make each word in a text start with a capital letter ?
Answer
To make each word in a text start with a capital letter we set the value of text-transform property to capitalize.
For example, to make each word in all <H1> elements start with a capital letter, we define a rule as: h1 {
text-transform : capitalize ; }
Question 4
Perform as instructed below.
(a) Create an HTML file namely index.html file with following guidelines :
x Make sure there are at least 2 paragraphs (<p>) in your HTML file
x Use h1, h2 and h3 headings
x Use a numbered and a bulleted list
x Use a table
x At least 4 hyperlinks
(b) Link to an external style sheet namely personal.css from your index.html file.
(c) Create a CSS document called personal.css (Make sure you save as type .css) with rules for the following :
x Have your h2 headings :
(a) Appear in a color of your choice
(b) Be centered on the page (text-align: center;)
(c) In the Serif font family of your choice
x Double the H1 headings size (relative font size)
x For paragraphs
(a) Specify a font family and font size.
(b) Give a background color with 5 px padding on each side
x For tables
(a) Specify a border of width 3px
(b) Table heading in bold
x Remove the underline in your links.
(d) View the html file in a browser
(e) Create another CSS file with different style rules for above mentioned elements and then link index.html to this
CSS file. Now view index.html and see the change.
Answer
index.html
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "personal.css">
<title>HTML Introduction</title>
</head>
<body>
<h1>Introduction to HTML</h1>
<h2> What is HTML ? </h2>
<p>
HTML (Hypertext Markup Language) is the standard markup language used for creating and structuring web
pages. HTML uses a system of tags and elements to define the different components and content of a web page.
</p>
<p>
HTML forms the foundation of web development and is often combined with CSS (Cascading Style Sheets) and
JavaScript to create interactive and visually appealing websites.
</p>
<h3> Advantages of HTML </h3>
<ol>
<li>Universal support across web browsers.</li>
<li>Easy to learn and understand syntax.</li>
<li>Platform independence for broad device compatibility.</li>
<li>Seamless integration with CSS and JavaScript.</li>
</ol>
<h3>Limitations of HTML</h3>
<ul>
<li>Limited styling and layout control.</li>
<li>Lack of built-in interactivity.</li>
<li>Insufficient data handling capabilities.</li>
<li>Browser compatibility issues.</li>
</ul>
<table>
<caption>Some tags of HTML</caption>
<tr>
<th>Tag</th>
<th>Description</th>
</tr>
<tr>
<td>B tag</td>
<td>Used to make text bold</td>
</tr>
<tr>
<td>I tag</td>
<td>Used to make text italic</td>
</tr>
</table>
<p>Check out these links to learn more about HTML:</p>
<ul>
<li><a href="https://www.w3schools.com">W3 Schools</a></li>
<li><a href="https://en.wikipedia.org/wiki/HTML">HTML Wikipedia</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML MDN</a></li>
<li><a href="https://www.html.com">HTML Code Tutorial</a></li>
</ul>
</body>
</html>
personal.css
h2 {
color: red ;
text-align: center ;
font-family: Times New Roman ;
}
h1 {
font-size: 2em ;
}
p{
font-family: Arial ;
font-size: 10px ;
background-color: cyan ;
padding: 5px 5px 5px 5px ;
}
table {
border: 3px solid;
}
th {
border: 3px solid; font-weight: bold ;
}
td {
border: 3px solid;
}
a{
text-decoration: none ;
}
Output
new-personal.css
h2 {
color: blue ;
text-align: left ;
font-family: Verdana ;
}
h1 {
font-size: 3em ;
}
p{
font-family: Georgia ;
font-size: 14px ;
background-color: green ;
padding: 3px 8px 3px 8px ;
}
table {
border: 1px dashed;
}
th {
border: 1px dashed; font-weight: normal ;
}
td {
border: 1px dashed;
}
a{
text-decoration: overline ;
}
Output
You might also like
- Question answer of HTML Audio Form VideoNo ratings yetQuestion answer of HTML Audio Form Video5 pages
- 803 Web Application Class XI Chap 2 Section 2No ratings yet803 Web Application Class XI Chap 2 Section 234 pages
- HTML Form and PHP HTML Form: ITS332 - LABNo ratings yetHTML Form and PHP HTML Form: ITS332 - LAB6 pages
- HTML Forms and Css - Chapter 7 Topic - 1 Forms Objective Type QuestionsNo ratings yetHTML Forms and Css - Chapter 7 Topic - 1 Forms Objective Type Questions22 pages
- Q3_MODULE4_G10_PROGRAMMING_MANGALDAN-NHS-FinalNo ratings yetQ3_MODULE4_G10_PROGRAMMING_MANGALDAN-NHS-Final11 pages
- Q3_MODULE3_G10_PROGRAMMING_MANGALDAN-NHS-FinalNo ratings yetQ3_MODULE3_G10_PROGRAMMING_MANGALDAN-NHS-Final12 pages
- 7. Adding Form Form tag, Action, Method Basic form controls — Textbox, Password field, Radio Button, Checkbox, Multiple line text areaNo ratings yet7. Adding Form Form tag, Action, Method Basic form controls — Textbox, Password field, Radio Button, Checkbox, Multiple line text area14 pages
- Unit 2 - Chapter 04 - Working With FormsNo ratings yetUnit 2 - Chapter 04 - Working With Forms24 pages
- Lecture 2 HTML Audio, Video, Tables and FormsNo ratings yetLecture 2 HTML Audio, Video, Tables and Forms10 pages
- This A Heading This Is A Paragraph. This Is Another Paragraph.No ratings yetThis A Heading This Is A Paragraph. This Is Another Paragraph.4 pages
- Microsoft Visual Basic Interview Questions: Microsoft VB Certification ReviewFrom EverandMicrosoft Visual Basic Interview Questions: Microsoft VB Certification ReviewNo ratings yet
- McLaren 720S Order V17BIMU Summary 2022-08-06No ratings yetMcLaren 720S Order V17BIMU Summary 2022-08-067 pages
- E2223s Wide Flat Panel Monitor User's GuideNo ratings yetE2223s Wide Flat Panel Monitor User's Guide32 pages
- Aircraft Systems: ATA Number ATA Chapter NameNo ratings yetAircraft Systems: ATA Number ATA Chapter Name4 pages
- How To Upgrade The Firmware of EAP Products PDFNo ratings yetHow To Upgrade The Firmware of EAP Products PDF6 pages
- Experiment Instructions: WL 372 Heat Conduction UnitNo ratings yetExperiment Instructions: WL 372 Heat Conduction Unit36 pages
- Region 4B - Module 3 - Jose Alvaro Severino C. NitoNo ratings yetRegion 4B - Module 3 - Jose Alvaro Severino C. Nito46 pages
- Shift Report - December 02, 2023-2nd ShiftNo ratings yetShift Report - December 02, 2023-2nd Shift4 pages
- Services Marketing Customer Defined Service StandardsNo ratings yetServices Marketing Customer Defined Service Standards12 pages
- HTML Forms and Css - Chapter 7 Topic - 1 Forms Objective Type QuestionsHTML Forms and Css - Chapter 7 Topic - 1 Forms Objective Type Questions
- 7. Adding Form Form tag, Action, Method Basic form controls — Textbox, Password field, Radio Button, Checkbox, Multiple line text area7. Adding Form Form tag, Action, Method Basic form controls — Textbox, Password field, Radio Button, Checkbox, Multiple line text area
- This A Heading This Is A Paragraph. This Is Another Paragraph.This A Heading This Is A Paragraph. This Is Another Paragraph.
- Microsoft Visual Basic Interview Questions: Microsoft VB Certification ReviewFrom EverandMicrosoft Visual Basic Interview Questions: Microsoft VB Certification Review
- Experiment Instructions: WL 372 Heat Conduction UnitExperiment Instructions: WL 372 Heat Conduction Unit
- Region 4B - Module 3 - Jose Alvaro Severino C. NitoRegion 4B - Module 3 - Jose Alvaro Severino C. Nito
- Services Marketing Customer Defined Service StandardsServices Marketing Customer Defined Service Standards