Tingnan ang lahat ng mga set ng pag-aaral

Quiz 1-8: HTML/ CSS/ BOOTSTRAP

Pataasin ang iyong marka sa homework at exams ngayon gamit ang Quizwiz!

#1 col-md-12 | #2 col-md-6 | #3 col-md-6 | #4 col-md-12

#1 col-sm-6 | #2 col-sm-6 | #3 col-sm-6 | #4 col-sm-6

Given the HTML below:<p id="closing">You stay classy, San Diego.</p>how would you select it by its ID in your CSS? #closing { } closing { } /closing { } .closing { }

#closing { } closing { } /closing { } .closing { } (ID use #; class use .)

Consider the following HTML element: <input type="text" id="street"> Which of the following CSS rules would make the element span exactly half way across the form? .street { width: 50%; } text { width: 50%; } #street { width: 50%; } None of the options are correct

#street { width: 50%; } ID use # class use .

Given the HTML below: <p class="callout" >Sixty percent of the time it works every time.</p> how would you select it by its Class in your CSS? callout { } /callout { } .callout { } #callout { }

.callout { } (ID use #; class use .)

What is the first character after a "<" in a closing tag? & > / !

How many columns make up a row in the Bootstrap grid system? 20 10 6 12

Which character do we put at the end of each property:value combination? = ] ! ;

;

Different HTML documents can be linked together using the ______ element <html> <hyperlink> <a> <link>

<a>

Most of the form controls that we covered in the video are actually different "types" of which element? <select> <textarea> <box> <input>

<input>

A <select> element would not be very useful without one or more of these elements inside of it. <item> <option> <choice> <input>

Which of the following is NOT one of the page structure elements? <nav> <page> <main> <header>

<page>

Which of the following lines of code will display a badge with the number 6 in it? <badge>6</badge> <span class="badge-6"></span> <badge class="badge-6"></badge> <span class="badge">6</span>

****If you want to display one of the Bootstrap glyphicons, which html element did the video say to use? <div> <glyphicon> <img> <span>

<span>

This generic structure element creates a block of space on your page that is only as big as the content it contains. <block> <generic> <div> <span>

<span>

Which of these is the correct order of elements in a table? <thead> is placed inside <th> <td> is placed inside <tr> <thead> is placed inside <tr> <td> is placed inside <th>

<td> is placed inside <tr>

Which of the following tags will you use to add cells to the table header? <head> <td> <tr> <th>

<th>

When using Bootstrap, to create a dropdown menu in the navigation you need which of the following? A nested list to serve as the menu The <dropdown> element The <menu> element dropdown menus are not possible using Bootstrap

A nested list to serve as the menu

****Bootstrap is _____. A set of custom HTML elements A set of CSS classes A set of CSS classes and JavaScript code A set of JavaScript code

A set of CSS classes and JavaScript code

Consider the structure of an HTML table. Which of the following best describes how a table is organized? A table contains columns and each column contains rows A table contains rows and each row has a header, body, and footer A table contains rows and each row contains cells A table contains cells and each cell contains rows

A table contains rows and each row contains cells

***Which of the following allows you to display important information to the user but also enables the user to dismiss the content? List group item Alert Display Well

Alert

***Which of the following html elements can be defined as a "row" in your Bootstrap layout? <main> <div> <header> <footer> All options listed here can be set as a "row" in Bootstrap

All options listed here can be set as a "row" in Bootstrap

Which of the following border properties are we able to control with CSS? width color All these options are valid style

All these options are valid

****Bootstrap provides a number of classes to style a table. According to the video, what is one area where you will likely have to create your own rule? Applying borders to your table cells Applying a stripped pattern in your rows You Answered Applying hover effects Applying color styles to the header and footer sections

Applying color styles to the header and footer sections

How many elements should your document have? As few as possible 42 As many as you need or want to make it clear and organized Less than 128

As many as you need or want to make it clear and organized

****Which of the following statements is FALSE when it comes to having access to Bootstrap? Uncompiled Bootstrap source files can be download and edited before being installed on your web server. You can link to Bootstrap files that are hosted on other websites called CDNs. Bootstrap is a feature that comes with all major web server platforms. Compiled Bootstrap files can be downloaded and installed on your web server.

Bootstrap is a feature that comes with all major web server platforms.

A quality HTML/CSS development tool is able to make ___. Only value suggestions Only code suggestions Neither code nor value suggestions Both code and value suggestions

Both code and value suggestions

The attribute colspan="2" will do which of the following? Causes the cell to include its current position and extend into the column to the right Creates one column with two cells in it The attribute colspan is not a valid HTML attribute Causes the cell to include its current position and extend down to the row below it

Causes the cell to include its current position and extend into the column to the right

Lists in HTML can be ___. Only numbered Either bulleted or ordered with numbers HTML does not support lists Only bulleted

Either bulleted or ordered with numbers

True or False: Once I establish a row layout in my page, all other rows in the page must follow the exact same pattern.

FALSE

True or False: The padding property controls the spacing outside the border of an element.

FALSE

True or False: When creating a button, I can either use the btn or btn-primary class but not both at the same time.

FALSE

True or False? <th> is just a shorter way to write <thead>?

FALSE

True or False? Every cell in a table will be the exact same size (same height and width).

FALSE

[QUIZ 8] If you are using Bootstrap to make your pages responsive, you must also use it to style other elements such as buttons, text, lists, etc...

FALSE

***It is acceptable to have multiple elements with the same ID. (T/F)

False

True or False: elements are the same as tags.

False

True or False? The anchor element is only used to link from one page to another within the same site.

False

True or False? You need to use both height and width attributes to shrink your image by half. False

False

[QUIZ 2] True or False? The closing tag for image is </img>. True False

False

[QUIZ 5] True or False: When creating the base structure for navigation with Bootstrap, you no longer use a <ul> list with links inside the <li> element, and instead use Bootstrap's custom HTML navigation element <navigation>.

False

***Which of the following statements about global attributes is true? Global attributes only apply to elements that do not have any attributes of their own Global attributes can be used with all elements Only 'type' and 'start' are global attributes All global attributes are of type boolean

Global attributes can be used with all elements

Which of the following is true about front-end web technologies? HTML can be thought of as the functionality like turning things on and off while JavaScript provides the base structure CSS can be thought of as the base structure while HTML is the decoration CSS can be thought of as the base structure while JavaScript is the decoration HTML can be thought of as the base structure while CSS is the decoration

HTML can be thought of as the base structure while CSS is the decoration

What is the difference between HTML and HTTP? HTML and HTTP are the same thing HTML describes what's on a page and HTTP allows the page to be communicated between computers HTTP describes what's on the page and HTML allows sites to communicate with each other

HTML describes what's on a page and HTTP allows the page to be communicated between computers

Why should you split your table into header, body and footer using the 'thead', 'tbody' and 'tfoot' elements? You cannot use <th> without <thead> The browser needs to know the thead, tbody, and tfoot of a table to display a table Header, body and footer rows can make styling your table easier This is wrong. You should never split your tables into thead, tbody, and tfoot

Header, body and footer rows can make styling your table easier

Which of the following is NOT an image class discussed in the video? img-circle img-thumbnail Img-width img-rounded

Img-width

What is the purpose of the 'alt' attribute in an <img> element? It is the text that will display if the image can't load It links to a URL It is used to identify the location of the image It shows an alternative image if the user doesn't like the first one

It is the text that will display if the image can't load

****Developer tools in a browser allow you to ___. Make permanent changes to the CSS of a page Only allows you to view CSS values but does not allow you to edit the values Make temporary changes to the CSS of a page Browsers do not have developer tools

Make temporary changes to the CSS of a page

Your page contains several paragraphs of text (<p>). You want more space between the individual paragraphs. What CSS property should you use to put more space between the paragraphs? Font-size Border Spacing Margin

Margin

What does the 'M' in HTML stand for? Markup Managment Model Magic

Markup HTML = HyperText Markup Language

***What do we call the part of a CSS rule that attaches the style to a specific type of HTML element? Definition Selector Value Property

Selector

Which of the following is NOT a valid value for a form's "method" attribute? Get Post All of the options are valid Send

Send Only 2 options: Get or Post

Bootstrap allows you to create expandable and collapsible content on your pages without having to write your own CSS rules.

TRUE

True or False: You can use the btn classes to make an anchor <a> element look like a button.

TRUE

True or False? It is possible to have a Web page with only HTML and no CSS?

TRUE

[QUIZ 7] True or False: By default, a table's width and height are determined by the content in the cells of the table.

TRUE

Which CSS property will let you remove the underline from an element such as a hyperlink? Font-style Text-decoration Underline Font

Text-decoration

In front-end prototypes, what goes in the "action" attribute of a form? Nothing The ID of the form The name of the server script that should be activated after the user clicks Submit The name of the HTML page that the user should see after clicking Submit

The name of the HTML page that the user should see after clicking Submit

What is the purpose of attributes? They can be added to your page instead of one of the basic HTML elements They identify the end of an element They identify the beginning of an element They are used to add extra info to an element, like a unique identifier

They are used to add extra info to an element, like a unique identifier

***It is acceptable to have multiple elements with the same class. (T/F)

True

In an HTML document, can some elements contain other elements? Yes No

Yes

*****If you include the links to the Bootstrap files on your pages, which of the following is true about the use of Bootstrap classes? You must use Bootstrap classes for elements that are covered in Bootstrap and can only use your own style rules for things that Bootstrap doesn't cover Bootstrap doesn't provide classes to style the content on your pages You can choose to write your own style rules and/or use the built-in Bootstrap classes for styling page content You must use Bootstrap classes for all your page content styling

You can choose to write your own style rules and/or use the built-in Bootstrap classes for styling page content

Given the following CSS code, what would you put in place of AAAA so that these rules apply only when the user's mouse is over a hyperlink? AAAA {background-color: red;color: white;} a:mouseover a hyperlink a:hover

a:hover

[QUIZ 4] Examine the HTML and the CSS below. <style>#opening-paragraph { color: blue; }.callout { color: red; }</style> <p id="opening-paragraph" class="callout">Breaking Story! Bloomington Indiana rated as the number one place to live.</p> Consider the order of precedence with CSS. The text in the paragraph on the page will appear as which of the following colors? green blue black (the default) red

blue REASON: Precedence Rule ID > Class > Basic Element # > .

******Which of the following is the correct way to specify that a block element should occupy 4 columns of the Bootstrap grid when viewed on a typical smart phone? class="col-phone-4" class="col-xs-4" class="col-4" class="col-size-4"

class="col-xs-4" • Mobile: col-xs-# • Tablet: col-sm-# • Laptop: col-md-# • Desktop: col-lg-#

[QUIZ 3] Which of the following will turn the paragraph text blue if put inside the following CSS rule? p { // code here} font-color-blue; color: blue; font-color = blue text-color: blue

color: blue;

Which of the following is NOT a benefit of CSS can make all HTML documents look similar creates the content for the page easily maintainable styles content authors don't have to worry about style

creates the content for the page

[QUIZ 6] Which of these input field types are part of the newer list that are now available? select date password text

date

Tables are best used for which of the following? displaying data records with multiple fields Controlling image size Controlling overall page layout Displaying data records with a single field

displaying data records with multiple fields

<!DOCTYPE html><html lang="en"> <head> <title>My HTML page</title> <style> ... </style> </head> <body> <p> This is HTML element 1 </p> <p> This is HTML element 2 </p> <div> This is HTML element 3 </div> </body></html> If these CSS rules: body { color: crimson;} p { color: cream;} were included in the above HTML, which elements in the body would have crimson text? element 1 all three elements correct elements 1 and 2 element 2 element 3

element 3 REASON: If rules conflict on the same level, the most recent (i.e. lowest on the list of rules) will apply.

Consider the following code:<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <title>My HTML page</title></head><body> <p> This is HTML element 1 </p> <p> This is HTML element 2 </p> <div> This is HTML element 3 </div></body></html> If this CSS rule: p { color: orange;}was included in the above HTML, which element(s) inside the body would have orange text? element 3 elements 1 and 2 element 1 element 2 all three elements elements 2 and 3

elements 1 and 2

If you want to have the largest heading possible, which kind of tag would you use? h1 head h6 h

The property font-weight controls which of the following? the actual font that will be used if the text is italic or not the size of the text if the text is bold or not

if the text is bold or not

If you have the following CSS rules: input {color: #cccccc;border: 1px solid black;} select {color: #cccccc;border: 1px solid black;} textarea {color: #cccccc;border: 1px solid black;} how can those be re-written into one rule? input.select.textarea {color: #cccccc; border: 1px solid black;} input, select, textarea {color: #cccccc; border: 1px solid black;} none of the above input select textarea {color: #cccccc; border: 1px solid black;}

input, select, textarea {color: #cccccc; border: 1px solid black;}

[QUIZ 1] A 'ul' element wouldn't be useful unless it contained one or more of these elements p br li blockquote

According to the video, it is best practice to include both the name and ID attributes for every form input. What is true about these two attributes: The video does not recommend setting both a name and an ID ID is what the server script will use to identify the field while name is how JavaScript and CSS will identify the field name and ID must always have the same value name is what the server script will use to identify the field while ID is how JavaScript and CSS will identify the field

name is what the server script will use to identify the field while ID is how JavaScript and CSS will identify the field

The "value" attribute is used for which of the following: specify a specific value for a form control specify that only numbers can be typed into a field there isn't a value attribute in HTML change text into a number value

specify a specific value for a form control

Given the following code... <label for="???">Spouse</label><input type="text" id="spouse2"> What should we enter in place of ??? to associate the label with the input field? text spouse2 input Nothing. The For attribute is not a valid attribute

spouse2

Which of the following is a required attribute in an image tag? src width title height

src

Which two Bootstrap classes would be applied to get the following result?Hello world! text-good bg-good text-success bg-success text-darkgreen bg-lightgreen text-green bg-green

Quiz 1-8: HTML/ CSS/ BOOTSTRAP

Kaugnay na mga set ng pag-aaral

Income Tax Exam Chapter 5

BIOL 202 Exam 1

Music 13personalizing the Conversation: Beethoven and the Classical Sonata

EXST FINAL

17. Local and humoral control of tissue blood flow

ch 7

Bio Chapter 8

western renaissance final

Citi Trainings: Research Involving Human Subjects (RCR-Basic)

micro econ

LEVEL 3 FINALS NETWORKING

POLS 1101: Chapter 10

NEC

Global exam

HESI Review- Health Assessment

Chapter 12: South Asia

Chapter 9

Psychology - Learning

CIS5373: CHAPTER 6 Extended

Ch 8