HTML/CSS Quiz 2

Back

How much can you remember??  Answer as best you can in a word document

Save as: last-first_day2-quiz

1.  Write “CSS” or “HTML”, whichever applies best for each that follows:

a)  {  } CSS

b)  < >html

c)  body { css

d)  <body> html

2. T or F- “Content on a web page should be controlled by the CSS”

F shoud be html

3.  Fill in the blank

 Use _float in css_____ to make boxes “pile” horizontally across the page

4.  List all that is wrong with the following:

#boxb {

            width: 100px;

            heigt: 100px

            border: 1px solid black;

            float: left;

            clear: both;

 

#footer:

            with: 100px;

            height: 100px

            border: 1px solid black;

            clear: both;

}

No semi colon after heigt: 100px. Misspelled height  misspelled width, No brackets after footer, no closing bracket after clear: both; no semi colon after height: 100px, never float and clear both,

 

5.      What CSS property allows you to move divs below floated boxes?

Clear

HTML/CSS Quiz 3

How much can you remember??  Answer as best you can in a word document

Copy/paste this quiz into your “painless-quizzes.doc” document

Insert a page break so this quiz is on its own page

 

1.  Write “CSS” or “HTML”, whichever applies best for each that follows:

a) id=”html

b)  .text-emphasis css

c)  body {css

d)  <body>html

 

2. T or F- “Always float and clear the same box” F Never!

3.  Fill in the blanks

 Use __margin-left:_auto;________ and _margin-right: auto;__________ to center a box on the page

 

4.  List all that is wrong with the following:

a. <div id=box-r>red box<div/>

no quotes id= “box-r” slash goes before div

b. <div id="inner-wrapper">

                                    <div #="box-w>white box/div>

                                    <div id="box-b">blue box/div>

            </div> <--closes inner-wrapper-->

2 line needs id not #, missing quotes in “box-w” need </div> on both lines, needs closing bracket, needs  <!--close…

5.  What CSS property allows you to push boxes away from one another?

Margin in general


HTML/CSS Quiz 4

How much can you remember??  Answer as best you can in a word document

 

1.  Write “CSS” or “HTML”, whichever applies best for each that follows:

a)  {  } CSS

b)  < >HTML

c)  body {CSS

d)  <body>HTML

 

2. T or F- “Content on a web page should be controlled by the CSS”

F content is html, control format

3.  Fill in the blank

 Use _FLOAT_____ to make boxes “pile” horizontally across the page

 

4.  List all that is wrong with the following:

#box-b {

            width: 100px;

            heigt: 100px

            border: 1px solid black;

            float: left;

            clear: both;

No closing bracket, misspelled height, no semi colon, don’t float and clear

 

#footer:

            with: 100px;

            height: 100px

            border: 1px solid black;

            clear: both;

}

No opening bracket, no colon in beginning, misspelled width, no semi colon,

5.  What CSS property allows you to move divs below floated boxes?

clear

HTML Quiz #5

 

Copy/paste the 4 questions below into your painless-quiz.doc file

Make sure all 5 quizzes are in one document

 

1)  Describe the difference between the effects of padding and margin in CSS

 

Margin for space between boxes, padding is words in box and makes it bigger

 

 

2)  Draw a picture that helps explain your answer to #1

 

In class

 

3)  Describe what this CSS code does when applied correctly:

            clear: both;

 

moves boxes below floats.   no float

helps with dynamic text

 

4)  Write the CSS and HTML that will achieve the following result:

· Creates a box 100px wide and 50px tall

· Has a green border of 5px

· When text is entered in the box, there’s 5px between any word and any border

<div id=”box-g”> box-g</div>

#box-g {

    width: 95px;

    height: 45px;

    border-width: 5px;

    border-color: green;

    padding: 5px;

    }


Painless Quiz #6

Directions:

The text below has no formatting 

The user will have trouble understanding the info

Add:

·  Headings

·  Bullet/numbered lists and

·  Bolding to assist the user for easy understanding

 

 

 

Painless Quiz #6

Same ol' drill

Files to copy

Web1-site

Goals: