This set of Tricky HTML Questions and Answers focuses on “Responsive Overview – 3”.
1. To enable slideshow, what we should not be included?
a) jquery.js
b) button
c) foundation.js
d) foundation.orbit.js
View Answer
Explanation: To construct HTML for slideshow simply wrap the content or the images within unordered list element with data-orbit. For enabling slideshow we will need to include jquery.js, foundation.js, foundation.orbit.js or zepto.js within HTML.
2. Which tag is used to let control over the viewport?
a) <meta>
b) <acronym>
c) <em>
d) <address>
View Answer
Explanation: HTML5 introduced a method to let web designers take control over the viewport by using <meta> tag. We should include <meta> viewport element in all the web pages. <meta> viewport element gives the browser instructions on how to control page’s dimensions and scaling.
3. What should be the set value of the background-size property such that image will fit in the content area?
a) 100%100%
b) contain
c) cover
d) 100%
View Answer
Explanation: If the background-size property is set to “contain”, the background image will scale and will try to fit in the content area. Still, the image will keep its aspect ratio i.e. the proportional relationship between the image’s width and height.
4. What should be the set value of background-size property such that image will stretch to cover entire content area?
a) 100%100%
b) cover
c) contain
d) 100%
View Answer
Explanation: If background-size property is set to “100%100% “ the background image will stretch to cover the entire content area. E.g. div { width: 100%; height: 300px; background-image: url(‘img_khj.jpg’); }
5. What should be the set value of background-size property such that image will cover the entire content area?
a) 100%
b) contain
c) cover
d) 100%100%
View Answer
Explanation: If background-size property is set to “cover”, background image will scale to cover entire content area. “cover” value keeps the aspect ratio and some part of background image may be clipped. E.g. div {width: 100%; height: 390px; background-image: url(‘img_tyu.jpg’); background-size: cover;}
6. Bootstrap does not use _________
a) HTML
b) jQuery
c) PHP
d) CSS
View Answer
Explanation: Bootstrap is a popular framework. It uses HTML, CSS and jQuery to make responsive web pages. Bootstrap helps us to develop sites that look nice at any size i.e. screen. Tablet, laptop or phone.
7. Which plugin allows the element to become locked or sticky?
a) .active
b) .alert
c) .affix
d) .alert-link
View Answer
Explanation: .alert simply creates an alert message. Affix plugin allows an element to become affixed i.e. sticky or locked to an area on the page. It toggles position:fixed on and off, .alert-link is used on links inside alerts to add matching colored links.
8. Which of the following will display red alert box?
a) .alert
b) .alert-danger
c) .alert-info
d) .alert-link
View Answer
Explanation: .alert-danger displays red alert box. It indicates a dangerous or potentially negative action, .alert simply creates an alert message, .alert-info displays a light-blue alert box which indicates some information, .alert-link used on links inside alerts to add matching colored links.
9. Which of the following indicates blue background color representing something important?
a) .bg-success
b) .bg-info
c) .bg-primary
d) .bg-danger
View Answer
Explanation: .bg-primary adds blue background color to an element. It represents something important. .bg-danger adds red background color to an element representing danger or a negative action, .bg-info adds light-blue color to an element representing some information. A successful or positive action is given by .bg-success.
10. Which of the following indicates current page’s location within the navigational hierarchy?
a) .breadcrumb
b) .btn
c) .active
d) .bg-warning
View Answer
Explanation: .breadcrumb is a pagination. It indicates the current page’s location within a navigational hierarchy, .btn creates a basic button i.e. gray background and rounded corners, .bg-warnong adds the yellow background color to an element.
11. Which of the following groups button together on a single line?
a) .btn-group-lg
b) .btn-group-justified
c) .btn-default
d) .btn-group
View Answer
Explanation: .btn-group groups buttons together on a single line, .btn-group-lg is for large button group, it makes all button group larger-increased font-size and padding, .button-group-justified makes a group of buttons span the entire width of the screen.
12. Which of the following makes a button group appear vertically?
a) .btn-group-vertical
b) .btn-group-xs
c) .btn-group-sm
d) .btn-info
View Answer
Explanation: .btn-group-vertical makes a button group appear vertically stacked, .btn-group-sm is for small button group which makes all buttons in a button group smaller, .btn-group-xs is for extra small button group, .btn-info is light-blue button representing information.
13. What creates a carat arrow icon?
a) .carousel
b) .caret
c) .carousel-caption
d) .caption
View Answer
Explanation: .caret creates arrow icon, which indicates that the button is a dropdown, .carousel creates a carousel (slideshow), .carousel-caption creates caption text for each slide in carousel, .caption adds caption text inside a .thumbnail.
14. Which is a container for slide items?
a) .carousel-control
b) .caousel-indicators
c) .carousel-inner
d) .carousel-caption
View Answer
Explanation: .carousel-inner is a container for slide items, .carousel-caption creates a caption text for each slide in the carousel, .carousel-control is container for next and previous links, .carousel-indicators adds little dots at the bottom of each slide.
15. What clears floats?
a) .close
b) .clearfix
c) .checkbox
d) .col-*-*
View Answer
Explanation: .clearfix clears floats, .close indicates a close icon, .checkbox ia a container for checkboxes, .col-*-* is a responsive grid (span 1-12 column), extra small devices phones (<786px), tablets (>=786px), medium devices desktops (>=992px), large devices desktops (>=1200px).
Sanfoundry Global Education & Learning Series – HTML.
To practice tricky questions and answers on all areas of HTML, here is complete set of 1000+ Multiple Choice Questions and Answers.
If you find a mistake in question / option / answer, kindly take a screenshot and email to [email protected]
- Check HTML Books
- Check Computer Science Books
- Practice Information Science MCQs
- Practice MCA MCQs
- Apply for Computer Science Internship
