Imperial Valley College Faculty Websites

You are here:Robert Gallegos»Robert Gallegos - Imperial Valley College Faculty Websites
Robert Gallegos

Robert Gallegos

Website URL: http://faculty.imperial.edu/robert.gallegos E-mail: This e-mail address is being protected from spambots. You need JavaScript enabled to view it

Monday, 24 October 2011 18:08

Chapter 13 Review

CIS 212          Fall 2011         Chapter 13 Review                                                   Date handed out: 10/24/2011

Reading Assignment:            13 Getting Tabular: tables and more lists

  1. XHTML tables are used to structure tabular data.

  2. Use the HTML table elements, <table>, <tr>, <th>, and <td> together to create a table.

  3. The <table> element defines and surrounds the entire table.

  4. Tables are defined in rows, using the <tr> element.

  5. Each row contains one or more data cells, defined with the <td> element.

  6. Use the <th> element for data cells that are row or column headings.

  7. Tables are laid out in a grid. Each row corresponds to a <tr> … </tr> row in your HTML, and each column corresponds to the <td> … </td> content within the rows.

  8. You can provide additional information about your tables with the table summary attribute, and the <caption> element.

  9. Table data cells can have padding, borders, and border spacing, which is the space between cells.

  10. Just like you can control the padding, borders, and margins of elements, you can control the padding, borders, and border spacing of table cells with CSS.

  11. The border-collapse property is a special CSS property for tables that allows you to combine cell borders into one border for a cleaner look.

  12. You can change the alignment of the data in your table cells with the text-align and vertical align CSS properties.

  13. You can add color to your tables with the background –color property. Background color can be added to the entire table, to each row or to a single data cell.

  14. If you have no data for a data cell, put no content into the <td> … </td> element to maintain the alignment of the table, however.

  15. If your data cell needs to span multiple rows or columns, you can use the rowspan or colspan attributes of the <td> element.

  16. You can nest tables within tables by placing the <table> element and all its content inside a data cell.

  17. Tables should be used for tabular data, not for laying out your pages. Use CSS positioning to create multi-column page layouts as described in Chapter 12.

  18. Lists can be styled with CSS just like any other element. There are a few CSS properties specific to lists, such as list-style-type and list-style-image.

  19. List-style-type allows you to change the type of the marker used in your list.

  20. List-style-image allows you to specify an image for your list marker. 
Monday, 24 October 2011 18:03

Assignment for Week of 10/24/2011

CIS 212          Fall 2011                                              Week of 10/24/2011

Complete the following before the next class meeting on 10/31/2011.

Homework #8

Lab #7

Reading Assignment:

Getting Interactive: XHTML Forms
Appendix: The Top Ten Topics

 

Monday, 17 October 2011 18:44

Homework #7

CIS 212          Fall 2011         Homework 7                            Date handed out: 10/17/2011

Reading Assignment:
13 Getting Tabular: tables and more lists

Note: Your answers must be turned in handwritten, (no typed responses will be accepted). Students can print out the homework and write in their answers.

Homework is due at beginning of class on Monday October 24th, 2011.

  1. XHTML has a <____________________> element to take care of all your tabular needs.

  2. We call each piece of data a cell, or sometime just table ____________________.

  3. Each <_____> element forms a table row.

  4. Each <_____> element is a table heading for a column.

  5. Each <_____> elements each hold one piece of table data.

  6. Four elements used to create a single table: <_______> <_____> <_____> <_____>

  7. The <_______> tag is the tag that starts the whole thing off.

  8. The ____________________ doesn’t appear on the Web page display.

  9. The ____________________, on the other hand, is displayed in the browser.

  10. Remember, in browsers that don’t support the caption-side property, the caption will still be at the top of the ____________________.

  11. The ____________________ model is a good way to think about table cells, but they do differ when it comes down to margins.

  12. We call the space in between the cells ____________________-____________________. (Two words)

  13. You can’t set the “____________________” of an individual table cell; rather you set a common spacing around all cells.

  14. Yes     or      No     So border spacing is defined for the entire table, while a margin can be set for an individual element?

  15. Yes     or      No     Is there any way to have different border spacing on the vertical than I have on the horizontal?

  16. We’re sorry to report that ____________________ version 6 doesn’t support border-spacing.

  17. You can use a CSS property called ____________________-____________________ to collapse the borders so that there is no bordering spacing at all.

  18. Just like for any other element, all you need to do is set the ____________________-____________________ property on a table cell to change it color.

  19. You use the ____________________ attribute to specify how many rows a table data cell should take up, and then remove the corresponding table data elements from the other rows that the cell spans over.

  20. Yes     or      No     Can I have a colspan and rowspan in the same <td>?

  21. Nested tables in XHTML are straight forward. All you need to do is put another <table> element inside a <____>.

  22. The main list property is called ____________________-____________________-____________________ and it allows you to control the bullets (or “markers”, as they are called) used in your lists.

  23. List-style-image that lets you set an ____________________ to be the marker for the list.

  24. Using CSS you can control whether an ordered lists’ markers are decimal numbers, roman numerals or alphabetic letters (like a, b, c) with the ____________________-____________________-____________________ property.

  25. There’s a property called ____________________-____________________-____________________. If you set this property to “inside” then your text will wrap under the marker. If you set it to “outside” then it will wrap just under the text above it.
Monday, 17 October 2011 18:40

Chapter 11 and 12 Review

CIS 212          Fall 2011                                                          Date handed out: 10/17/2011

Chapter Review:
11 Advanced Web Construction: divs and spans
12 Arranging Elements: layout and positioning

         Chapter 11 Review

  1. <div> elements are used to group related elements together into logical sections.

  2. Creating logical selections can help you identify the main content areas, header, and footer of your page.

  3. You can use <div> elements to group elements together that need a common style.

  4. Use nested <div> elements to add further structure to your files for clarity or styling.

  5. Once you have grouped together sections of content with <div> elements, you can style the <div>s just like you would any other block element.

  6. The width property sets the width of the content area of an element.

  7. The total width of an element is the width of the content area, plus the width of any padding, border, and margins you add.

  8. Once you set the width of an element, it no longer expands to fit the entire width of the browser window.

  9. Text-align is a property for block elements that centers all inline content in the block element. It is inherited by any nested block elements.

  10. You can use descendant selectors to select elements nested within other elements.

  11. You can use shortcuts for related properties.

  12. Padding, margin, border, background, and font properties can all be specified with shortcuts.

  13. The <span> inline element is similar to the <div> element: it is used to group together related inline elements and text.

  14. The <a> element is an example of an element with different states. The main <a> element states are unvisited, visited, and hover.

  15. You can style each of these states separately with pseudo-classes.

    Chapter 12

  16. Browsers place elements in a page using flow.

  17. Block elements flow from the top down, with a linebreak between elements. By default, each block element takes up the entire width of the browser window.

  18. Inline elements flow inside a block element from the top left to the bottom right.

  19. The top and bottom adjacent margins of two block elements in the normal page flow collapse to the size of the larger margin, or to the size of one margin if they are the same size.

  20. Floated elements are taken out of the normal flow and placed to the left or right.

  21. Floated elements sit on top of block elements and don’t affect their flow.

  22. The clear property is used to specify that no floated elements can be on the left or right (or both) of a block element.

  23. A floated element must have a specific width set to a value other than auto.

  24. A liquid layout is one in which the content of the page expands to fit the page when you expand the browser window.

  25. A frozen layout is one in which the width of the content is fixed and it doesn’t expand or shrink with the browser window.

  26. A jello layout is one in which the content width is fixed, but the margins expand and shrink with the browser window.

  27. There are four values the position property can be set to: static, absolute, fixed, and relative.

  28. Static positioning is the default, and places an element in the normal flow of the page.

  29. Absolute positioning lets you place elements anywhere in the page.

  30. If an absolutely positioned element is nested within another positioned element, then its position is relative to the containing element that is positioning.

  31. Absolutely positioned elements can be layered on top of one another using the z-index property. A larger z-index value indicates it is higher in the stack (closer to you in the screen).

  32. Fixed position elements are always positioned relative to the browser window and do not move when the page is scrolled.

  33. Relatively positioned elements are first flowed into the page as normal, and then offset by the specified amount, leaving empty the space where they would normally sit.

  34. When using relative positioning, left, right, top, and bottom refer to the amount of offset from the element’s position in the normal flow.

  35. Float provides a flexible solution for multi-column layouts and allows elements to clear floated elements from their sides, something that can’t be done with absolute positioning.

 

Monday, 17 October 2011 18:36

Assignment for Week of 10/17/2011

CIS 212          Fall 2011                                              Week of 10/17/2011

Complete the following before the next class meeting on 10/24/2011.

Homework #7

Lab #6

Reading Assignment:
Getting Tabular: Tables and More Lists

 

Tuesday, 11 October 2011 10:00

Homework #6

CIS 212  Fall 2011 Homework 6               Date handed out: 10/10/2011

Reading Assignment:
11 Advanced Web Construction: divs and spans
12 Arranging Elements: layout and positioning

Note: Your answers must be turned in handwritten, (no typed responses will be accepted). Students can print out the homework and write in their answers.

Homework due at beginning of class on Monday October 17th, 2011.

  1. We can’t use <p> because <p> can’t contain other block elements and the headings and the headings and paragraphs are obviously ____________________ elements.

  2. A <_______> lets you divide your page into logical sections or groupings.  

  3. What’s a ____________________ ____________________ (two words)? It’s just a group of elements that are related on the page.

  4. The common way to do this is to place <div> opening and closing tags around the elements that belong to a
    ____________________ ____________________ (two words).

  5.  Use an id ____________________ to provide a unique label for <div>.

  6. It’s common to ____________________ structure, too.

  7. Yes     or      No       A <div> acts like a container that you can put elements in to keep them all together?

  8. Always keep your ____________________ as simple as possible to get the job done.

  9. Remember that an element can have an id and be in one or more ____________________ at the same time.

  10. A <div> is just a ____________________ element and you can apply any style you want to it.

  11. The <div> is a box like every other element, so, you can ass a border, the border goes around the content, which is all the elements in the ____________________.
     
  12. The ____________________ property lets you specify the width of the element’s content area.

  13. The width property ____________________ the width for the content area only.

  14. Don’t forget, that you have to include ____________________ the border width, because there is a border on the left and the right.

  15. The width of the content area, the padding, the border, and the margin. All that added together is the width of the entire ____________________. 

  16. The default width for a block element is “____________________”, which means that it will expand to fill whatever space is available.

  17. In general, the height if an element is left at the default, which is ____________________, and the browser expands the content area vertically so all the content is visible.

  18. The default padding on <div> is _______ pixels.
     

  19. Use text-align on block elements to align the text they ____________________. 

  20. Setting the background-repeat property to repeat-x, will tile the image only on the ____________________ direction.

  21. Text-align will align all ____________________ content in a block element.

  22. The text-align property should be set on block elements only. It has no effect if it’s used directly on inline ____________________ (like <img>).

  23. What does the following rule do?

    #elixirs h2 {
                color: black;
    }

    ________________________________________________________________________________________.

  24. Line-height is a bit special because you can use just a number instead of a relative measure. When you use just a number, you’re telling each element in the <div> to have a line-height of _____ times it’s own font-size, rather than the font-size of the <div>.

  25. If your padding values or margins are the same values on all sides,

                padding-top:              20px;
                padding-right:             20px:
                padding-bottom:        20px;
                padding-left:               20px;

    you can make the shorthand really short:

                padding:                     _____px;

  26. If the top and bottom, as well as the right and left margins are the same,
                margin-top:                  0px;
                margin-right:               20px;
                margin-bottom:          0px;
                margin-left:                20px;
    then you can  use a shorthand.

                margin:                       _____px _____px:

  27. The border shorthand is even more flexible than margins or padding because you can specify them in any other you ____________________.

  28. You can also use shorthand for backgrounds:
                background-color:                  white;
                background-image:                 url (images/cocktail.gif);
                background-repeat:                 repeat-x;
    Like border, values can go in any order in this shorthand.

                background: ____________________  ____________________   ____________________;
     

  29. Shorthands do have the advantage of reducing the size of your CSS files, and certainly they are more quickly entered because they require less typing. However, when there is a problem, they are a little more difficult to “____________________”.

  30. A <span> gives you a way to create a grouping of ____________________ characters and elements.

  31. As always, you want to mark up your content with the ____________________ that most closely matches the meaning of your content.

  32. Yes     or      No     Can I set properties like width on <span> elements?

  33. If you hold your mouse over a link without clicking, this is called “____________________”.

  34. A ____________________ can be in a few states: it can be unvisited, visited, or in the “hover” state.

  35. The right ordering is generally considered to be link, visited, focus, hover, and then ____________________.

  36. You can style ____________________, but no one ever types them into their XHTML.

  37. Yes     or    No     There are all these classes out there that the browser is adding and removing elements from behind the scenes.

  38. Priority is given first to the author’s style, then to the reader’s styles and then finally to the browser’s default
    ____________________.

  39. The browser itself maintains a set of default styles that are used if you don’t define the styles for an ____________________.

  40. We only sort within the author, reader, and browser ____________________.

  41. Yes     or    No     When you sort for specificity, you don’t re-sort everything?

    CHAPTER 12

  42. Flow is what the browser uses to lay out a page of ____________________ elements.

  43. Inline elements are flowered next to each other, ____________________, from top left to bottom right.

  44. If the inline content of each block fits the width of the content area, then it’s placed there; otherwise, more vertical room is made for the content and it’s contained on the next ____________________.

  45. The browser treats margins differently depending on which type of elements is being placed on the ____________________.

  46. When the browser places two block elements on top of each, it collapses their shared margins together. The height of the collapsed margin is the height of the largest ____________________

  47. Whenever you have two vertical margins touching, they will ____________________, even if one element is nested inside the other.

  48. The float property first takes element and floats it as far left or right as it can (based on the value of ____________________).
     

  49. A requirement for any floating element is that it have a ____________________.

  50. The ____________________ property can be set to either left or right.

  51. When the inline elements are flowed within the block elements, they flow around the borders of the floating ____________________.

  52. When you float an element, you need to move the XHTML for the element directly below the element that you want it to float ____________________.

  53. The problem with setting a width on both the content area and the sidebar us that this doesn’t allow the page to expand and contract correctly because booth have fixed ____________________.

  54. Yes     or      No     The CSS clear property. You cans set this property on an element to request that as the element is being flowed onto the page, no floating content is allowed to be on the left, right, or booth sides of the elements.

  55. Yes     or    No     Can I float to the center?

  56. Yes     or    No     Do margins collapse on floated elements?

  57. Yes     or    No     Can I float an inline element?

  58. Yes     or    No     Is it correct to think about floated elements as elements that are ignored by block elements, while inline elements know they are there?

  59. ____________________  ____________________  expand to fill whatever width we resize the browser to.
     
  60. ____________________  ____________________  lock the elements down, frozen to the page, so they can’t move at all, and so we avoid a lot of issues that are caused by the window expanding.

  61. The outer “____________________” <div> is always 800 pixels, even when the browser is resized, so we’re effectively frozen the <div> to the page, along with everything inside it.

  62. Jello layouts lock down the width of the content area in the page, but center it in the ____________________.

  63. With “auto” ____________________, the browser figures out the correct  margins are, but also makes sure the left and right margins are the same, so that the content is centered.

  64. A feature of CSS that allows you to precisely position elements on the page. It’s called ____________________   ____________________.

  65. When an element is absolutely positioned, the first thing the browser does is ____________________ it completely form the flow.

  66. Absolutely positioned elements have no ____________________ whatsoever on the other elements.

  67. Each positioned element has a property called a ____________________ that specifies its placement.

  68. What is the default position property set to by default? The default value for positioning is “____________________”.

  69. You can absolutely position any element, block or inline. Just remember that when an element is absolutely positioned, it is removed from the normal flow of the ____________________.

  70. Are there are position property values other than static and absolute? What are they?
    ____________________    ____________________    ____________________    ____________________

  71.  Yes    or      No    Do I have to specify a width for an absolute positioned element just like the floated elements?

  72. Yes     or      No     Do I have to use pixels for positioning?

  73. Yes     or      No     Do I have to know how to use z-indexes ti use absolute positioning?

  74. Using ____________________ positioning you can place it anywhere on the page you want, and since it isn’t in the flow it won’t affect any other element in the page.

  75. If you want to absolutely position an element from the bottom of the page, rather than the browser window, you need to place your element inside an element that ____________________ to the bottom of your page, and is positioned.

  76. With fixed positioning, you specify the position of an element just like you do with absolute positioning, but the position is an offset from the edge of the browser’s ____________________ rather than the page.

  77. Fixed position elements don’t move; they are there fir good as long as the page is ____________________.

  78. Unfortunately, Internet Explorer version 6 (and earlier) doesn’t support fixed ____________________.

  79. Unlike absolute and fixed positioning, an element that is relatively positioned is still part of the flow of the page, but at the last moment, just before the element is displayed, the browser offsets its ____________________.

  80. The browser first flows a relative element onto the page, and only then does it offset where it is ____________________.

 

Tuesday, 11 October 2011 09:58

Chapter 9 and 10 Review

CIS 212          Fall 2011         Lecture Review Week 7                                                                     Date: 10/10/2011

Chapters:
9 Expanding your Vocabulary: Styling with fonts and colors
10 With Elements: The Box Model

Chapter 9 Review
1. CSS gives you lots of control over the look of your fonts.

2. The font families for the Web are serif, sans-serif, monospace, cursive and fantasy. Serif and sans-serif fonts are most common.

3. Fonts that your visitors will see in your Web page depend on the fonts they have installed on their computer.

4. Specify font alternatives in your font-family CSS property in case users do not have your preferred fonts installed on their system.

5. Always make the last font a generic font like serif or sans-serif, so that the browser can make an appropriate substitution if no other fonts are found.

6. Font-sizes are usually specified using pixels, em, percent or keywords.

7. Using relative sizes for your fonts can make your pages more maintainable.

8. Use the font size keywords to set the base font size in your body rule, so that all browsers can scale the font sizes if users want the text to be bigger or smaller.

9. CSS has 17 predefined colors, including black, white, red, blue, and green.

10. An easy way to find the hex code of a color you want is to use a photo-editing application’s color picker or one of many online Web tools.

11. Hex codes have 6 digits, and each digit can be from 0-F. The first two digits represent the amount of red, the second two the amount of green, and the last two the amount of blue. (Just remember RGB)

Chapter 10

1. CSS uses a box model to control how elements are displayed.

2. Boxes consist of the content area and optional padding, border, and margin.

3. The content area contains the content of the element.

4. The padding is used to create visual space around the content area.

5. The border surrounds the padding and content and provides a way to visually separate the content.

6. The margin surrounds the border, padding and content, and allows space to be added between the element and other elements.

7. Padding, border, and margin are all optional.

8. An element’s background will show under the content and the padding, but not under the margin.

9. When setting margins, padding, or the border, CSS provides properties for setting all the sides (top, right, bottom, left) at once, or it allows them to be set independently.

10. Use the line-height property to add space between lines of text.

11. You can place an image in the background of an element with the background-image property.

12. Use the background-position and background-repeat properties to set the position and tiling behavior of the background image.

13. Use the class attribute for elements that you want to style together, as a group.

14. Use the id attribute to give an element a unique name. You can also use the id attribute to provide a unique style for an element.

15. There should only be one element in a page with a given id.

16. You can select elements by their id using the id # selector.

17. An element can have only one id, but it can belong to many classes.

18. If two style sheets have conflicting property definitions, the style sheet that is last in the HTML file will receive preference.

19. You can target media devices such as “print” or “handheld” by using the media attribute in your <link> element.

 

Tuesday, 11 October 2011 09:29

Assignment for Week of 10/10/2011

CIS 212          Fall 2011                                              Week of 10/10/2011

Complete the following before the next class meeting on 10/17/2011.

Homework #6

Lab #5

Reading Assignment:
11 Advanced Web Construction: divs and spans
12 Arranging Elements: layout and positioning


Tuesday, 04 October 2011 07:28

Assignment for Week of 10/03/2011

CIS 212          Fall 2011                                                                                                                 Week of 10/03/2011

Class session on 10/03/2011was used as a production day for all students. No new homework was assigned and no quiz was given. Students who attended class were given credit for the day. The following assignment are now due on 10/10/2011.

Reading Assignment: Please read the following chapters before the next class meeting on October 10.
9 Expanding your Vocabulary: Styling with fonts and colors
10 With Elements: The Box Model

Complete Homework #5

Complete Lab #4
If students did not complete the lab in class, they have the option to hand it in at the beginning of class on October10.

Quiz #5
Students need to be prepared for Quiz #5 based off of Chapters 9 and 10 on Monday October 10th.

Tuesday, 27 September 2011 11:44

Assignment for Week of 09/26/2011

CIS 212          Fall 2011                                                                                                                 Week of 09/26/2011

Reading Assignment: Please read the following chapters before the next class meeting on October 3.
9 Expanding your Vocabulary: Styling with fonts and colors
10 With Elements: The Box Model

Complete Lab #4
If students did not complete the lab in class, they have the option to hand it in at the beginning of class on October 3.

Quiz #5
Students need to be prepared for Quiz #5 based off of Chapters 9 and 10 on Monday October 3rd.

Page 2 of 4