Font size
Worksheetsretake
Total questions: 105
Worksheet time: 58mins
You have a Hypertext Markup Language (HTML) page with an unordered list. You want browsers to render each element side-by-side, use a fixed width, and fit as many elements on each line as possible.
To which value should you set the display Cascading Style Sheet (CSS) property?
inline-block
BLOCK
INLINE
LIST-ITEM
Which class provides a responsive fixed width container?
.container-fixed
.container
.container-fluid
None of above
What will happen when you add a number of columns greater than 12?
it will add up to the existing columns
it will not be displayed properly in Bootstrap
it will wrap up in a new line
Nothing will happen
Contextual color "text-muted" would result to what color of text?
light color
blue
gray
black
How do you change the background color of a button to gold yellow?
.bg-orange
.background-yellow
.btn-warning
.bg-warning
Which of the following codes below is needed to produce the sample screenshot in this question? Tick all that applies.
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<span class="d-block p-2 bg-primary text-white">d-block</span>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
<span class="d-block p-2 bg-dark text-white">d-block</span>
Which of the following codes below is needed to produce the sample screenshot in this question? Tick all that applies.
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<span class="d-block p-2 bg-primary text-white">d-block</span>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
<span class="d-block p-2 bg-dark text-white">d-block</span>
What is the meaning of this code in Bootstrap 5?
d-none .d-sm-block
Hidden on all
Hidden only on sm
Hidden only on xs
Hidden starting sm
What is the meaning of this code in Bootstrap 5?
.d-sm-none .d-md-block
Hidden on all
Hidden only on sm
Hidden only on xs
Hidden starting sm then onwards
What is the meaning of this code in Bootstrap 5?
.d-xl-none .d-xxl-block
Hidden only on xl
Hidden only on xxl then displays on xl block
Hidden only on xl as well as xxl
hidden starting xl and stops showing after that
What is the meaning of this code in Bootstrap 5?
.d-none .d-xl-block .d-xxl-none
Visible only on xs up to xl
Visible only on xl to xxl
Visible only on xl
visible on all excelpt xl and sm
What is the meaning of this code in Bootstrap 5?
<div class="d-print-none">
its just a print display class
hides on all breakpoints but always shows on print
print only
screen only, hides on print
What is the meaning od pt-4 in the following codes?
<div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
padding at the top equal to 4
padding with a value 4
padding for all corners eqal to 4
padding space of 4 outside the container
What is the range of value for padding utility?
0-5
1-5
0-7
1-7
How do you create a horizontal centering in Bootstrap 5?
mx-center
mx-0
mx-auto-center
mx-auto
What Bootstrap class would you use to hide an element on small screens but show it on medium and larger screens?
.d-md-none
.d-none .d-md-block
.d-hidden-md
.hide-sm
Which class would make text color white in Bootstrap?
.text-dark
.text-white
.text-light
.text-primary
What form elements are used in creating this drop-down list?
<select> and <option>
<label> and <input>
<textarea> and <input>
<select> and <input>
What form elements are used in creating this text field?
<select> and <option>
<label> and <input>
<textarea> and <input>
<select> and <input>
What HTML input type is used to create this password field?
<input type="text">
<input type="submit">
<input type="password">
<input type="radio">
What HTML input type is used to create this submit button?
<input type="text">
<input type="submit">
<input type="password">
<input type="radio">
What are some common CSS properties used to style HTML forms?
width, height, text-align, display, float
background-color, text-decoration, outline, overflow, position
border-radius, box-shadow, opacity, visibility, cursor
color, font-size, padding, margin, border, background
What is the purpose of using input types in HTML forms?
To change the font style of the input
To add a background color to the input
To specify the type of data expected from the user
To display a message to the user
What attribute specifies if the submitted result will open in a new browser tab, or in the current window.
name
method
target
action
How can you ensure that a user enters a required field in an HTML form?
Require the user to enter the field in a separate confirmation page
Use the 'mandatory' attribute in the HTML form
Use the 'required' attribute in the HTML form
Add a pop-up warning message for empty fields
To group sections of a form to make it easier to read, use
fieldset
group
groupset
formset
The action attribute of a form
tells how the information should be sent to the server.
tells what web page or script will process the form.
lets the user select from a set of options
is a button command that processes the form
The method attribute of a form
tells which web page or script should process the form
lets a user select from a set of options
tells how the form data should be sent to the server
verifies whether an email address is valid
<th> is used for:
one cell in a row of headers
one data cell
one row of headers
one column of headers
rowspan="2"
one td or th spans 2 columns
all td or th spans 2 columns
one td or th spans 2 rows
one tr spans 2 rows
The use of <tr> is to add:
one column on the right
one cell in a table
one row of table
one column of table
This attribute is used to give the file name that should be loaded in the frame
name
border
frame
src
What is the purpose of the <colgroup> element in an HTML table?
A. Defining groups of columns
B. Adding a title or caption to the table
C. Merging cells horizontally or vertically
D. Setting the background color of the table
What is the purpose of the <tbody> element in an HTML table?
A. Defining body cells
B. Displaying tabular data
C. Merging cells horizontally or vertically
D. Adding a title to the table
Which attribute is used to specify the width of the borders around table cells?
D. cellspacing
C. cellpadding
B. width
A. border
True or False?
Border-Collapse Collapses the borders of adjacent cells into a single border instead of separating them.
True
False
What is a rowspan?
An attribute that is used with <th> or <td> element to horizontally span two or more columns.
An open-source and front-end framework that contains HTML and CSS design templates.
An attribute that is used with <th> or <td> element to vertically span two or more rows
This is an element that we used on every website
What is a colspan?
An attribute that is used with <th> or <td> element to horizontally span two or more columns.
An open-source and front-end framework that contains HTML and CSS design templates.
An attribute that is used with <th> or <td> element to vertically span two or more rows
This is an element that we used on every website
What is padding?
An Attribute that identifies the number of table rows a single cell can occupy
A property used to manipulate the amount of space between cell content and the cell's inner border
A property used to manipulate the amount of space between borders of adjacent table cells
A property that determines how far the table or cell will extend horizontally across the page
What is border-spacing?
An Attribute that identifies the number of table rows a single cell can occupy
A property used to manipulate the amount of space between cell content and the cell's inner border
A property used to manipulate the amount of space between borders of adjacent table cells
A property that determines how far the table or cell will extend horizontally across the page
What is a table header?
Creates a table. Contains all other table elements.
Typically designates cells in the top row or left column. By default, text in a header cell will appear bold and centered.
Contains all data for a table row
Designates table cell contents. By default, the data is left-justified.
Which tag declares that the document is a HTML document
<body>
<head>
<title>
<html>
Which tag contains information about your HTML file
<head>
<title>
<p>
<h1>
Which tag creates the most important heading?
<h4>
<h2>
<h1>
<h3>
Which tag is used in ordered lists and unordered lists to define a list item
<b>
<i>
<p>
<li>
This element is used to separate content or define a change in an HTML page
<br>
<hr>
<ol>
<body>
Fill in the blank on the code above.
src
href
hrf
target
What is the purpose of the target attribute in the code above?
It tells the browser to make your screen blank when you click the link.
It tells the browser to open the link in the same tab when you click the link.
It tells the browser to open the link in a new tab when you click the link.
It tells the browser to open the link in a different browser when you click the link.
Mr. Sutton is ranking his favorite nicknames for his dog Pippin. What tags should he use for his list?
ol
ul
a
li
What tag is always included in the code for an ordered or unordered list?
<li>
<ol>
<ul>
<list>
Ordered lists are used...
To display a list of items that need to be in a specific order
To display a list of items that can be in any order
To display descriptions of items in a list
To display a list of randomly generated items
TRUE OR FALSE:
Ordered Lists can only order items by using numbers
True
False
The <img> tag needs the following attribute to display an image...
src="image location"
scr="image location"
loc="image location"
file="image location"
An attribute does which of the following...
Applies changes to everything
Provides different options for each tag
Prevents changes to the site
Gives structure and text
Which of these are used when adding a picture to a webpage?
src
alt
img
pic
file
Which of these tags creates a bulleted list?
<LI>
<OL>
<UL>
<BL>
An unordered list is often called a(n) _______ list.
Numbered
Bulleted
Documented
Sequential
A numbered list is called a(n) ______ list in HTML.
Numbered
Ordered
Sequential
Indexed
Which of these correctly adds a picture to a webpage?
<img src="tree.jpg" alt="Grand Oak" />
<img src="Grand Oak" alt="tree.jpg" />
<img src="tree.jpg" />
<img alt="tree.jpg" />
What should I change about this tag to change the image that will appear?
<img src="cat.jpeg" alt="cat jumping"/>
img
src
cat.jpeg
cat jumping
Which of the following BEST explains the difference between a <p> tag and a <br> tag?
The <br> tag produces a blank line, while the <p> tag does not
The <p> tag produces a blank line, while the <br> tag does not
A shorthand property used to specify the individual border properties: border-width, border-style and border-color.
border-bottom
border
border-left
border-top
Select the correct code.
h1 {border: 8 px dotted green;}
h1 {border: 8px dotted solid;}
h1 {border: 8px dotted #008080;}
Identify the CSS code use to create this border.
p {border: 5px solid pink;
border-radius:25px; }
p {border: 5px double pink;
border-radius:25px; }
p {border: 5px solid pink; }
p {border: 5px dotted pink;
border-radius:25px; }
Which CSS code create a white and dotted styled border.
h3 {border: 10px white pink;}
h3 {border: 10px dotted gold;}
h3 {border: 10px white dotted;}
h3 {border: 10px dotted white;}
Which is the correct way to code CSS.
p {border-left: 10px dotted orange}
p {border-right: 80px gold red;}
p {border-right: 80px outset solid;}
p {border-right: 80px inset silver;}
Which of the following values does not belong to the overflow property?
visible
hidden
scroll
invisible
The CSS overflow property controls what happens to content that is too big to fit into an area.
True
False
Change the border size of the body or image
border-style
border-width
border-color
width
Which of the following property of a table element specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style?
nth-child
border-spacing
border-collapse
empty-cells
Select the most appropriate CSS declaration to position a <div> element so that other elements that follow after it may occupy space to the left of it.
float: right;
position: left;
float: none;
position: right;
Label the box model diagram below based on their respective number.
margin, padding, border, content
margin, border, padding, content
padding, border, margin, content
padding, margin, border, content
How can one have more control over the background image they have selected for an element?
Use background-repeat
Use image-control
Use the Float Property
Use img src
If you would like to have a block element and restrict everything around it to a gap of 20 pixels. What code snippet should you use to do this?
{margin: 20px;}
{padding: 20px;}
{spacing: 20px;}
{border: 20px;}
How would you style an element so that the next element would appear right next to it not underneath it if both elements widths were collectively smaller than the container element?
display and bottom
display:inline-block;
display:inline
display:left
How do you set a particular style for a link that a user has already been to before arriving at your page?
a:visited
a:hover
a:active
a:link
Which of the following properties controls how to display content that is too large for its container?
overflow
display
float
position
What will be the final color of the <div>?
red
blue
purple because both colors will be combined
uses the default white background color
What CSS code is needed if you ONLY wanted to select a password field?
.password
input#password
input[type="password"]
input.password
You have a Hypertext Markup Language (HTML) page with an unordered list. You want browsers to render each element side-by-side, use a fixed width, and fit as many elements on each line as possible.
To which value should you set the display Cascading Style Sheet (CSS) property?
inline
block
inline-block
list-item
One of your clients has asked for a new form to be added to their HTML5 friendly website. This form accepts several pieces of information including first name, surname and phone number. You want to ensure that the user enters information into each of the fields before the form is submitted. Which attribute should you use?
disabled
readonly
compulsory
required
Consider the following code for a text box in a Web form:
<input type="text" name="UserName"/>
Which modified tag should you use if you want the text box to appear with default text that reads "Enter Name Here"?
<input value="text" name="UserName" placeholder="Enter Name Here"/>
<input type="name" text="Enter Name Here" value="text"/>
<input type="area" value="default" text="UserName"/>
<input type="text" name="UserName" value="Enter Name Here"/>
You are creating a Web form in HTML5 for your site. You want to make sure you code it correctly to process data. You have included the action attribute in the <form> element. What else do you need to include?
The method attribute of the <form> element
The method attribute of the <input> element
The type attribute of the <form> element
The type attribute of the <input> element
In the Web form you are creating, you want a multiple-option select list to appear with five options. Which line of HTML code will help accomplish this?
<input type="multiselect" name="work" default="5"/>
<select name="work" multiple="multiple" size="5">
<input type="select" name="work" multiple="yes" default="5"/>
<select name="work" multiple="multiple" defaultsize="5">
Consider the following example code from a Web form:
How often do you want to be updated about Habitat for Humanity?
<select name="Frequency">
<option> Once a month </option>
<option> Once a quarter </option>
<option> Once a year </option>
<option value="NotAtAll"> Never </option>
</select>
Which Web form field will this code create?
A group of radio buttons
A group of check boxes
A multiple-select drop-down list
A single-select drop-down list
In an HTML form, what is the purpose of the name attribute in an <input> tag?
It labels the form field so the user knows the type of input expected.
It identifies the form input received in a name=value pair by the site's administrator.
It is required for the form to render in all browsers.
It identifies the type of field or button that will appear in the form.
Consider the following example code from a Web form:
What is your favorite hobby?
<select name="Hobby">
<option> Kayaking </option>
<option> Swimming </option>
<option> Fishing </option>
<option value="NoneAbove" > None of the Above </option>
</select>
You have been directed to change this form field so that users can select more than one option from this list. In addition to rewording the page text, which change must you make to the code?
Change the <select name="Hobby"> tag to <select list="Hobby>.
Create a drop-down list, remove all references to the <select> element, then replace <option> with <list>.
Add the multiple="multiple" attribute and value to the <select> element.
Remove the <select> element and replace it with the <list> element.
You are creating form fields on a Web page. Which attribute should you include in the <input> element to specify the type of form fields that will appear in the form?
The type attribute
The name attribute
The value attribute
The placeholder attribute
Where do you put the attribute and value autocomplete="on" in the HTML forms?
inside the <form> tag
before the body section, include the code inside any element or tag declared in the HTML body
inside any <input> tag
inside the <textarea> only
What CSS code is needed in order to prevent textarea from being resized?
resize:disabled;
resize:off;
resize
resize:none;
The iframe has a border around it by default. However, if you want to modify or remove the iframe borders, the best way to do it is by ______________?
setting the value of the border to none
setting the value of the border to 0
setting the value of the border to off
setting the value of the border to disable
Which of the following statement is NOT true about <colgroup>?
column groups are declared from right to left so that the first group will hold the first column
colgroup must be declared at the beginning of the table
colgroup are used to group columns together if they refer to the same product or same magnitude
colgroup is defined with the help of the span attribute
You need to create an HTML table to display summary information for an online checkout page. This table will display all the products that the visitor has added to their basket, in addition to a total price for all the items.
Which of the following HTML tags is not a valid child item for the table element?
table
tr
td
th
What property is used in CSS to create a "zebra striped tables"?
nth-child
border-collapse
border shorthand property
border-box
Which of the following class applies the hover color to a particular row or cell of a table?
.active
.success
.warning
.danger
Which of the following class will style a table with a nice alternating stripes?
table-stripes
table-stripe
table-striped
striped-table
What is the meaning of the following Boostrap code?
<table class="table border-warning table-bordered">
table with full border colored yellow
table with a yellow border on the left and right side
table with no borders
table with full border and a background color of yellow
What Boostrap code should be used in order to create a borderless table
table-borderless
table-border-0
table-border{border-0)
border{table:0;}
What contextual class color should be used in a table to give it a cyan background color?
class="table-primary"
class="table-info"
class="table-danger"
class="table-cyan"
What is the meaning of the following Boostrap code?
<h1 class="bg-danger text-white d-none">This is a heading one </h1>
The value of heading one will be displayed in a red text and white background
The value of the heading one will be displayed with a background color of red and a text color of white.
The value of the heading one will NOT be displayed.
The value of the heading one will be displayed with a background color of red and a text color of white and without a padding.
What will happen to a table when you use the class="table-responsive"?
the table will behave normally and no horizontal scrollbar will be displayed
the table will automatically adjust depending on the size of the viewport
the table will be displayed properly with respect to its breakpoint.
the table will behave normally and no vertical scrollbar will be displayed
