Back To My Website

HTML/CSS Quiz 1

 

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

 

Save as: last-first_day1-quiz

 

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

 

a)     “<  >”  à HTML  à  Tags

b)     “#”  à CSS  à Hex Color Code / ID

c)     “.”  à  CSS à  Class

d)     “{  }”  à CSS  à  Begin / End

 

2) T or F – “Formatting on a web page should be controlled by the CSS”

            TRUE

 

3) Fill in the blank

            ________ should be created in the HTML

             Content


 

HTML/CSS Quiz 2

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  à  Begin / End

b)  < >  à HTML  à  Tags

c)  body {  à CSS à  Body “begin”

d)  <body>  à HTML  à Body “tag”

 

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

            FALSE  à HTML controls the content of the page and the CSS controls that formatting of the page

3.  Fill in the blank

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

            Float

4.  List all that is wrong with the following:

#boxb {           à  #box-b {

            width: 100px;

            heigt: 100px               à  height: 100px;

            border: 1px solid black;

            float: left;

            clear: both;      à Delete the line. You never float and clear the same element

à }

 

#footer:           à “:” changes to a “{“

            with: 100px;    à width: 100px;

            height: 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, you never float and clear the same element

3.  Fill in the blanks

 Use ___________ and ___________ to center a box on the page

      Margin-left: auto;   margin-right: auto;

4.  List all that is wrong with the following:

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

 

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

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

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

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

 

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

            Margins 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”

                        FALSE!!! HTML is used to control the content of a page, while the CSS is use purely for the formatting of the webpage.

 

3.  Fill in the blank

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

         Float

4.  List all that is wrong with the following:

#box-b {

            width: 100px;

            height: 100px;

            border: 1px solid black;

            float: left;                    

            clear: both;     Never float and clear the element. Delete this line.

}

 

#footer {

            width: 100px;

            height: 100px;

            border: 1px solid black;

            clear: both;

}

1.      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 is used to push a box away from the edge of the webpage and padding enlarges a box to allow a space with a box for text to have the typical space away from the direct edge within the box and allows for text to be read easier.

 

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

            Done in class

 

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

            clear: both;

            Clear is used to move a box below another row of floated boxes and allows for better formatting and view of the webpage or to add logical order to the boxes within the webpage.

 

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

 

#box {

            Width: 80px;

            Height: 30px;

            Border: 5px solid green;

            Padding: 5px;

}

 

<div id=”box”> Box </div>


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

1)     Files to copy

2)     copy #6

3)     paste into painless quiz doc

Web1-site

  • See files to copy for web1-site folder
  • Copy/paste locally
  • Goals:

1)     Get familiar with structure

2)     Personalize all titles

3)     Personalize self description

o       Make sure to add <p> tags!

4)     Add your schedule

5)     Research and add favorite links??