Caitlin Stellingwerf

Web1

“Painless” Quiz 1

 

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

a)     < >       HTML    (à tag)

b)      #         CSS      (à hex color code, ID)  

c)       .          CSS      (à class)

d)     { }         CSS      (à “block”)

 

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

·        True

 

  1. Fill in the blank:

 

_Content_ should be creates in the HTML

 

HTML/CSS Quiz 2

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”

·        False, should be done in HTML

 

3.  Fill in the blank

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

 

4.  List all that is wrong with the following:

#boxb {

            width: 100px;

            height: 100px;

            border: 1px solid black;

            float: left;

            clear: both;  (shouldn’t be there)

}

 

 

#footer {

            width: 100px;

            height: 100px;

            border: 1px solid black;

            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”

·        FALSE

 

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/>

·        <div id=”box-r”>red box</div>

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

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

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

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

 

  • <div id="inner-wrapper">

                                    <div id="box-w”>white box</div>

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

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

 

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

  • Margins

 

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”

·        False - Formatting

 

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;

            height: 100px;

            border: 1px solid black;

            float: left;

            clear: both;

}

<!—cant float and clear bothà

 

#footer{

            width: 100px;

            height: 100px;

            border: 1px solid black;

            clear: both;

}

 

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

 

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

 

 

 

 

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

 

 

 

 

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

            clear: both;

 

 

 

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

 

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

1.      copy #6

2.      paste into painless quiz doc

  • Web1-site

1.      See files to copy for web1-site folder

2.      Copy/paste locally

Goals:

  • Get familiar with structure
  • Personalize all titles
  • Personalize self description
  • Make sure to add <p> tags!
  • Add your schedule
  • Research and add favorite links??

 

Click link to go back è http://spraguehs.com/students/students11/stellingwerf_caitlin/web1-site/index.htm