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

Tuesday, 27 September 2011 11:24

Chapter 7 and 8 Review

CIS 212          Fall 2011         Lecture Review Week 6

Chapters:         7 Putting an “X” into HTML: Moving to XHTML

                        8 Adding a Little Style: Getting started with CSS

Textbook:       Head First HTML with  CSS & XHTML

Chapter 7 Review

● XHTML is the new standard for HTML

● The DOCTYPE you apply for XHTML 1.0 Strict is:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

● The <html> tag must be the first tag after the DOCTYPE and the </html> closing tag must be the last tag in the
   document!

● The <html> element now has an xmls attribute, and lang and xml:lang attribute, which looks like this:

<html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”>

● Your <head> element must contain the <meta> tag information:

<meta http-equiv=“Content-Type” content=“text/html; charset=ISO-8859-1” />

● All opening tags must have closing tags. Or, if an element is empty, the tag must end with a space and then />.
            Example:

                        <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />

● All attributes must have values, and those values must be surround by double quotes.

● Do not use & in the content of your XHTML. & is for starting entities, so use &amp; instead. Also convert any
   other special characters to entities..

● Reasons why you want to use XHTML

            - Future-proofing your web pages to take advantage of all the latest browser advances to come

            - XHTML’s strict syntax allows aural screen readers for the visually impaired to surf the web more easily

            - XHTML is designed to include new or future markup elements

            - XHTML is the language of choice for browsers on mobile devices and cell phones

            - XHTML can be read by current software applications that already know how to read XML

            - XHTML gives us the benefits of XML (which is great for storing large structured document collections

            - XHTML fives us benefits of HTML, such as CSS for creating presentation.

(continued)

Chapter 8 Review

● You can control they way you present your web pages with CSS (Style Sheets)

● Style sheets consist of “rules” you create to control the presentation of your web pages.

● Basic format for applying a rule used in a style sheet:

            p {

                        background-color: red;

            }

            _____________________________________________________________________________

            Breakdown of format:

            p                                  -           this is called your selector and it selects the element you want to style

            {                                  -           starts the beginning of the properties you are setting

            background-color        -           specifies the property you want to style

            :                                   -           a colon must be used in between the property and it’s value
            red                               -           value you are setting the property to (in this case background-color = red)

            ;                                   -           ends the declaration of this property

● You can add as many properties and values as you like in each CSS  rule.

   Example:

            p {

                        background-color: red;

                        border: 1px solid gray;

            }

● You can include your rules directly into your XHTML by using the <style> element.

Example of direct rules in your XHTML document using <style> element.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

<html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=ISO-8859-1” />

<title>Example of Direct Styles in Your XHTML</title>

                <style type=“text/css”>

                p {

                        background-color: red;

                        border: 1px solid gray;

            }

                </style>

</head>

● You can also have external files linked to your XHTML document by using the <link> element.
This is what your XHTML code will look like when using the <link> element:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

<html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=ISO-8859-1” />

<title>Example of Direct Styles in Your XHTML</title>

<link type=“text/css” rel=“stylesheet” href=“external.css” />

</head>

The rest of your XHTML is the same

A separate document created and named “external.css”. In this case, the .css file is located within the same
root folder as the XHTML document.

You list all your rules here and can have as many as needed. Formatting is the same as before.

                                p {

                                    background-color: red;

                                    border: 1px solid gray;

                        }

Nothing but your rules and any comments you might want to include should be in your external style sheet!

● Elements can inherit styles from their parents.

● You can override inheritance by supplying a specific rule just for an element of your choice.

Example:

            body {

                        font-family: sans-serif;

            }

            em {

                        font-family: serif;

            }

● Using both XHTML and CSS, you can define a class of elements, and then apply styles to any of those elements that belong to that class.

● To add an element to a class:

Add the attribute “class” along with the name you choose for that class after the element you want to include.

            This is what you would write within your XHTML:

<p class=“greentea”>your content</p>

                                    p                      -           is the element you want to include in the “greentea” class

                        greentea           -                     is the name of the class (you can choose any name you like),

                                                                       but it must be place in quotations!

● You define your class within your linked external style sheet by following the basic rule format, but the only difference is your selector is followed by a period then the name of the class.
                        Example:

                                    p.greentea {

                                                color: green;

                                    }

● If you want all elements that are in the greentea class to have a style, then you can just write your rule like this:

                        Example:

                                    .greentea {

                                                color: green;

                                    }

           

If you leave out all the elements names (selectors) and just use a period followed by a class name, then
the rule will apply to all members of the class.

● Elements can be in more than one class! Place each class name into the value of the class attribute, with a space in
   between each. The ordering does not matter!

● If there are no selectors that match your element, then you rely on inheritance.

● If you can’t resolve a conflict because two selectors are equally specific, then you use the ordering of the rules in
   your style sheet file.

 

Tuesday, 27 September 2011 11:20

Homework #5

CIS 212          Fall 2011         Homework 5                                                  Date handed out: 09/26/2011

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

Note: Your answers must be turned in handwritten (no typed responses will be accepted).

Homework due at beginning of class on Monday October 3rd:

  1. A lot of the CSS ____________________ are dedicated to helping you style text.
     
  2. Using CSS, you can control typeface, style, ____________________ and even the decorations that are put on your text.

  3. Customize the  ____________________ in your pages with the font-family property.

  4. In CSS, fonts are divided into “____________________   ____________________” from which you can specify the fonts you’d like used in each element of your page. (Two words)

  5. Only certain fonts are ____________________ installed on most computers, so you need to be careful in your font choices.

  6. Control the size of your fonts with the ____________________ - ____________________ property. (Two words)

  7. Add ____________________ to your text with the color property.

  8. Affect the ____________________ of your fonts with the font-weight property.

  9. Add even more style to your text with the ____________________ - ____________________ property.

  10. Using the ____________________ - ____________________ property you can decorate your text with decorations including overlines, underlines, and line–throughs.

  11. There are five font families: ____________________, ____________________, ____________________, ____________________, and ____________________.

  12. Keep in mind that ____________________ on your machine may differ from what is available to your users.

  13. The ____________________ family is made up of fonts that have constant width characters.

  14. ____________________ fonts have an elegant, traditional look, while sans-serif fonts have a very clean and readable look.

  15. These fonts are usually not widely available and are ____________________ used for serious Web designs.

  16. Usually your font-family specification contains a list of ____________________ fonts, all from the same family.

  17. Always put a generic font family name at the end, like “____________________”, “sans-serif”, “cursive”, or “monospace”.

  18. If none of the specific fonts can be found, just use whatever the ____________________ considers its default “sans-serif” font.

  19. The ____________________ - ____________________ property gives you a way to create a list of preferred fonts. (Two words)

  20. You’ll see ____________________ on most PC’s. And ____________________ on most Macs. ____________________ is common on both. And if all else fails, we have the default ____________________.

  21.  Because font-family is an ____________________ property, all elements on the page are now using a sans-serif font,

  22. How do I specify a font with multiple words in the name, like Courier New?
    _______________________________________________________________________________________________________________________________________________________________________.

  23. Yes     or      No     The font-family property is really a set of alternative fonts?

  24. The unfortunate thing about fonts is that you can’t control what fonts are on your ____________________ computers.

  25.  The best you can do is to create a list of fonts that are most appropriate for your pages and then hope the user has one of those  ____________________ installed.

  26. You can specify your font size in  ____________________ just like the pixel dimensions you used for images.

  27. Sett5ng a f6nt to 14 pixels high means that there will be 14 pixels between the ____________________ part of the letters and the highest.

  28. A font size specified as a percentage tells the font how big it should be ____________________ to another font size.

  29. You can also specify sizes using “em”, which , like percentage, is another ____________________ unit of measure. (NOTE: DO NOT CONFUSE THIS ATTRIBUTE WITH THE EM ELEMENT TO EMPHASIS TEXT IN A PARAGRAPH!)

  30. With em you don’t specify a ____________________ percentage, instead you specify a scaling factor. (NOTE: DO NOT CONFUSE THIS ATTRIBUTE WITH THE EM ELEMENT TO EMPHASIS TEXT IN A PARAGRAPH!)

  31. There’s one more way to specify font sizes: ____________________.

  32. You can specify a font size as xx-small, x-small, small, medium, large, x-large, or xx-large and the browser will translate these keywords into ____________________ values using defaults that are defined in the browser.

  33. Keep in mind, however, that the keywords aren’t always defined the same way in every browser, and that users can ____________________ them if they want.

  34. By defining your fonts relative to the body font size, it’s really easy to change the font sizes in your____________________ page simply by changing the body font size.

  35. Internet Explorer does ____________________ support text scaling when the font size is specified using pixels.

  36. Yes     or      No      By defining a font size in the <body> element, I’m somehow defining a default size for the page?

  37. Yes     or     No      Do we really need to worry about users resizing their browser fonts?

  38. <h1> is 200% of the default body text font size, <h2> is 150%, <h3> is 120%, <h4> is 100%, <h5> is 90%, and <h6> is ____________________%.

  39. The ____________________-____________________ property allows you to control how bold the text looks.

  40. You can also go the other way. If you have an element that is set to bold by default, or is inheriting bold from a parent, then you can remove the bold style like this:
    ____________________: ____________________;

  41. It’s a good idea to combine properties into one ____________________ like this to avoid duplication.

  42. You can add an italic style to your text in CSS using ____________________-____________________ property.

  43. Not all fonts support the italic style, so what you get instead is called____________________ text.

  44. You can use the font-style property to get oblique text too, like this:
    ____________________-____________________: ____________________;

  45. Web colors are specified in terms of how much red, green and blue make up the ____________________.

  46. You certainly can use color names all you like, butt CSS defines the names of only ____________________ colors.

  47. ____________________ ____________________, which is shorthand for describing the red, green and blue components of the color. (Two words)

  48. Let’s say you want to specify the color “silver” as the background color of a body element; here’s how you write that is CSS:
                body {
                            ____________________-____________________: ____________________;
                }

  49. You can also specify a color as the amount of ____________________, ____________________, and ____________________. (Three words)

  50. Each set of two digits of a hex code just represents the red, green and blue ____________________ of the color.

  51. Each set of two digits represent a number from 0 to ____________________.

  52. Computer scientist decided they could represent all 255 values with the help of some letters too ____________________ through ____________________. (Two letters)

  53. The first thing you need to know about hex codes is that they aren’t based on ten digits (0 to 9) – the are based on ____________________ digits.

  54. Unless you have a special set of users that you know have a limited color displays, you can pretty much count “web-safe colors” as a thing of the ____________________.

  55. The most important is to use colors with high contrast for the text and the ____________________ to aid readability.

  56. I’ve seen hex codes like #cb0; what does that mean?
    ____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

  57. Yes      or       No      So if I have two different rules for an <em>, and one specifies overline and the other underline, will they be added together so I get both?

  58. The color property really controls the ____________________ color of an element, so it controls the text and the border color, although you can give the border its own color with the border-color property.

  59. Font-sizes are usually specified using px, em, %, or ____________________.

  60. To do advanced Web ____________________ you really need to know your building materials.

  61. Remember, this <link> element tells the browser to look for an external ____________________  ____________________ . (Two words)

  62. Increasing the line height of your text can improve ____________________.

  63. We’re going to adjust the line height of the text on the entire page so that there’s more vertical space between each line. To do that we add a ____________________ - ____________________ property in the body rule. (Two words)

  64. As you might have guessed, the line-height property allows you to specify the amount of ____________________ space between each line of your text.

  65. The space between lines is known as “____________________” in the publishing industry.

  66. The box model. It’s how CSS sees elements. CSS treats every single element as if it were represented by a ____________________.

  67. All ____________________are treated as boxes: paragraphs, headings, block quotes, lists, lists items, and so on.

  68. Even inline elements like <em> and links are treated by CSS as ____________________.

  69. Your going to be able to control every aspect of the box with ____________________.

  70. The ____________________ area holds the element’s content. It’s typically just big enough to hold the content.

  71. Notice that the content has no ____________________ between the content and the edge of this box.

  72. ____________________ is optional, so you don’t have to have it, but you can use padding to create visual whitespace between the content and the border of the box.

  73. Using CSS, you’re going to be able to control the ____________________ of the padding around the entire content area, or even control the padding on any one side (top, right bottom, or left).

  74. The ____________________ surrounds the padding and, because it takes the form of a line around your content, borders provide visual separation between your content and other elements on the same page.

  75. The ____________________ is also optional and surrounds the border.

  76. If two ____________________ are next to each other, the margins act as the space in between them.

  77. What’s the difference between padding and margin?
    _______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________.

  78. Yes      or      No       Do you need to have padding to have a border or a margin?

  79. So other than size, it sounds like I can’t really style padding and margins?
    _______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________.

  80. Remember, a ____________________will allow you to style this paragraph independently of the other paragraph.

  81. CSS has a ____________________ property that you can use to set the same padding for all four sides of the content.

  82. Notice that the ____________________ color is under both the content and the padding. But it doesn’t extend into the margin.

  83. Margins are easy to add using CSS. Like padding, you can specify the margin as a ____________________ or in ____________________.

  84. If you’re adding an image to the background of an element, there is another way. Using CSS, you can add a background image to any element using the ____________________-____________________ property. (two words)

  85. Yes       or       No       Is the background-image a replacement for the <img> element?

  86. The background-image property has a very ____________________ purpose, which is to set the background image of an element.

  87. An <img> element, on the other hand, is used to include an image that has a more ____________________ role in the page, like a photo of a logo.

  88. There is a ____________________-____________________ value for the background-repeat property.

  89. Browsers position a background image in the top, left of the element, which is where we want it, but let’s also add a ____________________-____________________ property just to give it a try.

  90. The background-position property sets the position of the image and can be specified in ____________________ or as a ____________________, or by using ____________________ like top, left, right, bottom, and center.

  91. By default, a background image is “____________________”, or repeated over and over to fill the background space. The background-repeat property controls how this ____________________ behaves.

  92. ____________________ allows you to add visual space around the content area.

  93. For padding, margins, and even borders, ____________________ has a property for every direction: top, right, bottom, and left.

  94. ____________________  ____________________ here -  if you switch the order, then you’ll set the padding for the left side first, and then the general padding property will set all sides back to 25 pixels, including the left side! (two words)

  95. If you need more visual space around ____________________ area itself, use padding, as opposed to if you want space between elements or the sides of the page, in case use ____________________.

  96. There are ____________________ border styles available, from a solid line to dotted lines to ridges and grooves.

  97. The boeder-width property controls the ____________________ of the border.

  98. The border-color property sets the  ____________________ of the border.

  99. Just like margins and padding you can specify border style, width, or color on any side (top, right, bottom, or  ____________________.

100.    Classes are meant to be used for styles that you want to reuse with  ____________________ elements.
        

101.    Basically all you need to know is that you use a  ____________________ when you want to use a style
         with more than one element.
        

102.    The  ____________________ attribute is strictly used for naming unique elements.
        

103.    ____________________ names must start with a letter and ne followed by only letters and digits. No
         spaces or special characters are  ____________________.
        

104.    An element can’t have multiple ids, and you can’t have more than one element on a 
         ____________________ with the same id.
        

105.    Yes       or        No        Can an element have an id and also belong to a class?
        

106.    The only difference between class and id is that an id selector should match  ____________________
         ____________________ element in a page, (Two words)
        

107.    In your ____________________  you can specify more than one style sheet.
        

108.    ____________________   ____________________! A style sheet can override the styles in the style
         sheets linked above it.
        

109.    There is an optional attribute for the <link> element called ____________________, that you can use to
         specify the kinds of devices your style files are intended for.
        

110.    Yes      or       No       I can set up different style sheets for different devices?

Tuesday, 20 September 2011 09:05

Assignment for Week of 09/19/2011

Complete the following before the next class meeting on 09/26/2011.

Reading Assignment:
7 Putting an “X” into HTML: Moving to XHTML
8 Adding a Little Style: Getting started with CSS

Homework #4

Lab #3
If you did not have enough time to complete the assignment in class, please turn it in at the beginning of class on 09/29/2011. Feel free to email me at robert.gallegos@imperial.edu, if you have any questions or need help regarding the lab.

 

Tuesday, 20 September 2011 09:02

Chapter 5 and 6 Review

CIS 212          Fall 2011         Lecture Review Week 5

Chapters:
5 Meeting the Media: Adding images to your pages
6 Serious HTML: Standards, compliance, and all that jazz

Textbook:       Head First HTML with  CSS & XHTML

Chapter 5 Review

Three most widely used image formats for web pages.

GIF

a. Used for images with solid colors, logos and geometric shapes.

b. Can represent images with up to 256 different colors.

c. Is a “loossless” format because it compresses the file to reduce file size, but does not throw any       

    information away.

d. Allows one background color to be set to transparent.

JPEG

a. Used for photos and complex graphics.

b. Can represent images with up to 16 million different colors.
            c. Is a “lossy” format because it throws away some information about an image.

d. DOES NOT SUPPORT TRANSPARENCY!     

PNG

a. Supports both JPEG and GIF styles of images.
            b. Has a more advanced transparency feature than GIF.

c. DOES NOT WORK ON EVERY BROWSER!

You can put relative paths and URLs into the “src” attribute.

The “alt” attribute for <img> element list a bit of information about the image if the image can not be displayed.

The width and height attribute should not be used to decrease or enlarge images beyond their original sizes!

a.       Enlarging images using width and height attributes beyond their original size will cause a process known as pixelation. This will result in a poorly displayed image.

b.      Decreasing images using the width and height attributes will cause the browser to download the image in its original format and slow down display time.

Always figure out the correct image size for your use and set the image resolution to 72 ppi (pixels per inch). This will help optimize your images and speed up web page loading time.

800 pixels is the typical width that most people set their browsers to. This is a good default number to set the width of your web page.

You never want to make someone visiting your web pages scroll horizontally, because it is aesthetically unpleasant.

To link an image, you put the <img> element inside an <a> element, like this:

<a href=“relative or URL address”><img src=“relative or URL address”></a>

Words that are anti-aliased on a computer screen are more readable and more pleasant to the reading eye.

The <img> element is an inline element which means that the browser does not put a linebreak before or after an image.

Chapter 6 Review

XHTML inherited traits from both HTML and XML.

Tell the browser up front what type of HTML or XHTML you are will be using with a document type definition.

In your document type definition you can type it all on one line, or you can hit return between the quoted parts .

As part of your code creation process, always validate your web pages before you go live with them.

Always check your web pages on different web browsers to check cross compatibility.

The character encoding tells the browser that kind of characters are being used in the page.

Add the <meta> element inside your head element to specify the content type.

Example:

<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1”>

To move from transitional HTML 4.01 to strict, we change the DOCTYPE to the strict version.

Example:

            <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

In the current standard, inline elements belong inside block elements.

When coding your HTML/XHTML enter your elements in lowercase format.

The “alt” attribute is required on images for accessibility, so the visually impaired can know what the image is, even if they can’t see it. The other required attribute is the “src” attribute on an image telling the browser where the resource is located.

By adhering to standards, your pages will display more quickly and with fewer display differences between browsers.

 

Tuesday, 20 September 2011 08:53

Homework #4

CIS 212          Fall 2011         Homework 4                                                  Date handed out: 09/19/2011

Reading Assignment:
7 Putting an “X” into HTML: Moving to XHTML
8 Adding a Little Style: Getting started with CSS

Note: Your answers must be turned in handwritten (no typed responses will be accepted).

Homework due at beginning of class on Monday September 26th:

  1. ____________________ is the new standard for HTML.
     
  2. The “X” in XHTML is for “____________________,” which is another way of saying it’s based on something called XML.

  3. ____________________ stands for eXtensible Markup Language.

  4. YES     or     No     If XML is a language that can be used to invent new markup languages, and HTML is a markup language, can we use XML to recreate HTML?

  5. XHTML’s strict syntax allows ____________________ ____________________ ____________________ and other browsers for the visually impaired to more easily consume Web content. (three words)

  6. By using XHTML I’m ____________________-proofing my Web pages to take advantages of all the latest and greatest browser advances to come.

  7. Unlinke HTML, XHTML can be extended to include new markup. For instance, there are already ____________________ that add elements for vector graphics and mathematical formulas.
  1. XHTML is becoming the language of choice for browsers on ____________________ devices and ____________________ phones.

  2. XHTML can be read by our existing ____________________ applications that already understand how to read XML.

  3. XHTML gives us the benefits of ____________________ (which is great for storing large, structured documents collections) along with the benefits of HTML, such ass CSS for creating presentation.

  4. The XHTML 1.0 checklist: Here’s the list of things you must do to convert from HTML to XHTML.

a. Change your ____________________ to Strict XHTML.

b. Add the ____________________, ____________________, and ____________________ attributes to your <html> opening tag.


c. The <html> tag must be the ____________________ tag after DOCTYPE and the </html> closing tag must be the last tag in the document.

d. All element names must be written with ____________________ letters.

e. All opening tags must have closing tags. Or, if an element is empty, the tag must end with a space and then ____________________>.

f. All attributes must have values, and those values must be surrounded by double ____________________.

g. Don’t use & in the content of your HTL. & is for starting entities, so use ____________________ instead. Also convert any other special characters to entities.

  1. The ____________________ attribute specifies which language the <html> element belongs to.

  2. What your <html> opening tag should look link in XHTML:
    ______________________________________________________________________________

  3. In XHTML, if you aren’t going to have a closing tag, you have to tell the ____________________ about it by putting a slash before the final “>”.

  4. Some older browsers can’t recognize “/>” without a space before the slash, so, to be backwards ____________________, just put a space before your slash in “/>”.

  5. If you element is empty, let the browser know by putting a ____________________ before the ending “>”.

  6. The xmlns attribute holds a unique identifier that determines which language you mean. In the case of XHML, that identitfier is _____________________________________________________________.

  7. If this is XHTML, how come the root element isn’t <xhtml> rather than <html>?

  8. How does the validator know whether I’m validating HTMl or XHTML?

  9. With ____________________, you’re going to completely control the presentation of your pages, often without even changing your XHTML.

  10. Each ____________________ in CSS consist of a location.

  11. You can also write the ____________________ like this:
    p { background-color: red; }

  12. You can add as many properties and values as you like in each ____________________ rule.

  13. CSS is very expressive: it can be used to specify styles in lots of different ways, for lots of different elements – even subsets of ____________________.  

  14. There are plenty of references online, and O’Reilly’s CSS Pocket References is a great little ____________________.  

  15. CSS really is better suited for specifying ____________________ for specifying style information than XHTML.  

  16. You’re also going to see that ____________________ is a much better way to handle styles for multiple pages.

  17. To write a rule for more than one element, just put ____________________ between the selectors.

  18. Describe what the following rules do:

                h1, h2 {
                            font-family: sans-serif;
                            color: gray;
                            }

                h1        {
                            border-bottom: 1px solid black;
                            }

  19. If you use border-bottom then the line will extend to the ____________________ of the page. An underline is only shown ____________________ the text itself.

  20. The property to set text underline is called ____________________ and has a value of “underline” for underlined text.

  21. The style is applied to the ____________________ described by the selector.

  22. We often call CSS files “______________________    __________________”.  (Two words)

  23. A way to tell the browser that it should style this page with the styles in the ______________________
    style sheets. We can do that with an XHTML element called <______________________>.

  24. The property to change the font style is “______________________,” and the value for sans-serif is “______________________”.

  25. (Some) elements can ______________________ styles from their parents.

  26. The __________ - ____________ property is set in the body rule, so every element inside the body inherits the sans-serif font-family from <body>.

  27. To ______________________ the font-family property inherited from body, add a new rule selecting em with the font-family property value set to serif.
  1. YES     or      No     Can I always override a property that is being inherited when I don’t want it?
  1. To write a comment in your CSS just enclose it between ______________________ and ______________________.  

  2. Using both XHTML and CSS, we can define a class of elements, and then apply _____________________ to any element that belongs to that class.  

  3. To add an element to a class, just add the attribute “_____________________” along with the name of the class.

  4. If you want all elements that are in the greentea class to have a style, then you can just write your rule like this: __________________________________________________________________________           

  5. If you leave out all the elements names, and just use a period followed by a _____________________ _____________________ then the rule will apply to all members of the class. (Two words)

  6. Yes     or     No     Elements can be in more than one class?

  7. Use multiple classes when you want an element to have styles you’ve defined in different _____________________.

  8. If there are no selectors that match your element, then you rely on _____________________.

  9. If your element doesn’t inherit the value from any of its ancestors, then you use the default value defined by the _____________________.

  10. If you can’t resolve a conflict because two selectors are equally specific, you use the ordering of the rules in your style sheet file. That is, you use the rule listed in the CSS file (_____________________   _____________________  _____________________). (Three words)

  11. Yes     or      No     Is there a way to validate CSS like there is with HTML and XHTML?
Tuesday, 13 September 2011 08:08

Lab 2

CIS 212      Fall 2011
Lab 2         Date handed out: 09/12/2011
Chapters:
3 Web Page Construction: building blocks

4 A Trip to Webville: getting connected

Note: If not finish by the end of the class session on 09/12/2011, students may turn it in at the beginning of the following class on 19/19/2011.

This is the only time I will be posting a Lab online. All remaining Labs will be handed out during class!


1. Using Notepad or Notepad++, create a 2 page website with the ability to navigate back and forth from each.

2. Plan the structure of your Web pages before you start typing in the content. Start with a sketch, then create an
    outline, and finally write the HTML.

3. Use your name as the domain and for your website. Example - www.robertgallegos.net

4. Use the following elements.

<html></html>

<head></head>

<title></title>

<body></body>

<h1>

<h2>

<h3> to <h6> optional

<p></p>

<q></q>

<em></em> or <strong></strong>

<a href= “”> </a> (link)

<a href=“../”> </a> (up folder / parent folder)

<a href=“” title= “”> (info tool)

<a title=“_blank” href=“” title= “”> (new window taget)

<br> (line break)

<li></li>(list element)

<ul></ul> (unordered list element)

<ol></ol> (ordered list element)

<dl></dl> (definition list element)

<dt></dt>  (definition term element)

<dd></dd>  (definition element)

5. Also, use these character entities within your content.

&lt;         <

&gt;        >

&amp;    &

6. Once finished, save your work and print out your HTML code. Make sure your name is on all your sheets.
    Hand in your sketch, outline and printed HTML code to receive full credit for Lab 2.

 

Tuesday, 13 September 2011 07:52

Assignment for Week of 09/12/2011

Read the following chapters before the next class meeting on 09/19/2011.
Chapter 5 Meeting the Media:
Adding images to your pages.
Chapter 6 Serious HTML: Standards, compliance, and all that jazz.

Complete Homework 2
If you did not finish Homework 2 in class on 09/12/2011, please turn it in along with Homework 3 on 09/19/2011.

Complete Homework 3
Homework 3 to be handed in on 09/19/2011.

Complete Lab 2
Lab to be handed in on 09/19/2011.
Make sure to hand in your sketch, outline and print out your HTML code for your lab.

This is the only time I will be posting a Lab online. All remaining Labs will be handed out during class!

Be prepared for a quiz over chapters 5 and 6 on 09/19/2011.

Tuesday, 13 September 2011 07:33

Chapter 3 and 4 Review

CIS 212 Fall 2011
Review of Chapters

3 Web Page Construction: building blocks
4 A Trip to Webville: getting connected

Chapter 3 Review

Quote element: Short quote that apart of an existing paragraph.

Syntax: <q>Content</q>

Blockquote: meant for longer quotes that need to be displayed on their own.

Syntax: <blockquote>Content</blockquote>

Break: creates a break between lines of content.

Syntax: <br> (Does not need a closing tag because it is an “empty” element.

Horizontal Rule: creates a solid line across your webpage.

Syntax: <hr> (Does not need a closing tag because it is an “empty” element.

List: defines an item that is apart of your content.

Syntax: <li>Content</li>  is nested within the an ordered or unordered tag element.

Ordered List: defines a list of item in a specific way. Usually in numerical order.

Syntax: <ol></ol>  has the element <li>(content)</li> nested within it.

Example:         <ol>

                                    <li>Content</li>

                                    <li>Content</li>

                        </ol>

Unordered List: defines a list of items. Usually has a bullet by each item in list.

Syntax: <ul></ul>  has the element <li>(content)</li> nested within it.

Example:         <ul>

                                    <li>Content</li>

                                    <li>Content</li>

                        </ul>

Definition List: defines a list of item in a specific way. Has breaks before and after items

Syntax: <dl></dl>  has the element <dt>(content)</dt> and <dd>(content)</dd> nested within it.

Example:         <dl>

                                    <dt>Term</dt>

                                                <dd>Term definition</dd>

                        </dl>

Character Entities: Use entities for special characters in your HTML document.

Syntax:            <          = &lt;

                        >          =&gt;

                        &         =&amp;

For a more exhaustive list, use this URL:

            http://www.unicode.org/charts/

Chapter 4 Review

Domain name: Unique name that is used to locate your website. Controlled by Centralized Authority, called ICANN. Makes sure that only one person at a time uses a domain name.

FTP: Stands for FileTransfer Protocol. Used to transfer data from your computer to a server.

SFTP: Stands for SecureFile Transfer Protocol. Used to securely transfer data from your computer to a server. Safer to use than regular F.T.P. mostly if you are transmitting sensitive/personal information.

URL: Stands for UniversalRemote Locator. A global address that can be used to locate information on the web.

There are 3 parts to a U.R.L.

The first part tells you the protocol that needs to be used to retrieve the resource. Example: http://

The second part is the web site name. Example: www.starbuzzcoffee.com

The third part is the absolute path to the resource from the root folder. Example: /index.html

HTTP: Stands for HyperText Transfer Protocol. A agreed upon method for transferring hypertext documents around the web.

Absolute Path: tells the server how to get from your root folder to a particular page or file.

Creating Web Links: connects web pages together. The very foundation of the world wide web.

Syntax:            <a href=“path of link”>content</a>

Adding Titles To Your Links: (Info tool tip) Displays information as you roll over a link.

Syntax:            <a href=“path of link” title=“textual description of the page you are linking to”>content</a>

Landing Point or Destination Link: Links into a particular spot in your web site.

Link within your own web site.

Syntax:            <a id=“top”>content</a>                            (place this where you are landing / destination)

                        <a href=“index.html#top”>content</a>      (place where you will be launching from)

Open a New Target Window: Opens a new window

Syntax:            <a target=“_blank” href=“index.html#”>content</a>     

 

Tuesday, 13 September 2011 07:30

Homework #3

CIS 212 Fall 2011
Homework 3
Date handed out: 09/12/2011
Reading
Assignment:
5 Meeting the Media: adding images to your pages
6 Serious HTML: standards, compliance and all that jazz

Note: Your answers must be turned in handwritten (no typed responses will be accepted).

Homework due at beginning of class on Monday September 19th:

  1. ____________________, ____________________, or ____________________ - these are going to be your choices when “developing pictures” for the web.
  1. Two of those formats are commonly used on the Web: ____________________ and GIF.
  1. Use ____________________ for photos and complex graphics. Use  ____________________ for images with solid colors, logos and geometric shapes.
  1. Can represent images with up to 16 million different colors. Is a “lossy” format because to reduce the file size, it throws away some information about the image.
    Does not support transparency.

  2. Compresses the file to reduce it’s size, but doesn’t throw anything away. So, it is a “lossless” format.
    Represents images with up to 256 different colors. Allows one background color to be set to “transparent” so that anything underneath the image will show through.
     
  3. The ____________________ element is an inline element. It doesn’t cause linebreaks to be inserted before or after it.

  4. The ____________________ attribute specifies the location of an image to be included in the display of the Web Page.

  5. The src attribute can be used for more than just relative links; you can also put a ____________________ in your src attribute.
  1. To include an image using its URL, just put the whole ____________________ of the image in the src attribute.
  1. Browsers often retrieve the images ____________________. That is, the browser makes requests for multiple images at the same time.
  1. If I see an image on a Web page, how do I determine it’s URL so that I can link to it?

  2. What makes a JPEG photo better than a GIF photo, or a GIF logo better than a JPEG logo?

  3. The ____________________ image format can support both JPEG and GIF styles of images and has more advanced transparency features than GIF.
  1. The ____________________ attribute (when used with the <img> element) just requires a short bit if text that describes the image. If the image can’t be displayed, then this text is used in its place.
  1. There’s one last attribute of the <img> element you should know about – actually, they’re a pair of attributes:  ____________________ and  ____________________. You can use these to tell the browser the size of an image in your page.
  1. The browser downloads images after it downloads the HTML file and begins to display the page. The browser can’t know the size of the images before it downloads them unless______________________ ___________  _______________________.  (three words).
  1.  True      of       False          You can also supply width and height values that are larger or smaller than the size of the image and the browser will scale the image to fit these dimensions. There are many reasons not to use width and height for this purpose.
  1.  ____________________ pixels is the typical width that most people set their browsers to. So it’s a good rule of thumb for the maximum width of your images (and your Web pages too.)
  1.  A browser always displays ____________________ space before and after a block element.
  1.  Whenever you see a checkered pattern (in most photo editing applications), that indicates a ____________________ area in the image.
  1.  Halos happen (in GIFs) because the photo editing applications creates a “____________________” to soften the text’s edges against the background color.
  1.  Words that are ____________________ on a computer screen are more readable and more pleasant to the eye. (Hint: soft around the edges)
  1.  The ____________________   ____________________   ____________________ (nickname:W3C) brought order to the Universe by creating the ONE HTML “standard” to rule them all.
  1.  XHTML inherited traits from both parents: popularity and ____________________- ____________________  from HTML and extensibility and strictness from ____________________.
  1.  <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/htm14/loose.dtd”> This line is called a ____________________ ____________________    ____________________.

  2.  Being compliant is just another way of saying your web pages meet the (current) ____________________.
  1. Checking to make sure you’re spelling your tags names right, your elements are nested properly, that your inline elements are inside block elements and so on is called a  ____________________.
  1. There three ways you can check your HTML (using the W3C online validation service):
  1. “ ____________________ ” means we’re going to tell the browser something about the page.
  1. You’re going to throw this line in as the first thing inside your <head> element of your html.

<head>

<_________________________________________________________________________________>

</head>

  1. ____________________ is the character encoding for “Latin-1” characters, which can represent almost all the European languages.

  2. There are actually two DOCTYPEs, one for those ____________________ to HTML 4.01, and a more ____________________ DOCTYPE for those who are already there.

  3. To move from transitional HTML 4.01 to strict, we change the ____________________ to the strict version.

  4. The difference between transitional and strict DOCTYPEs is?
  1. In the current (HTML strict) standard, inline elements belong inside ____________________ elements.

  2. In HTML 4.01 (strict), <____________________> is an example of a block element that you can’t nest inline elements directly inside.

  3. The <head> element is the only place you should put your <____________________>, <____________________> and <____________________> elements.

  4. KEEP BLOCK ELEMENTS OUT OF YOUR INLINE ELEMENTS. The only things you can put in an inline element are ____________________ and other inline elements. ____________________ elements are not allowed under any circumstances.

  5. KEEP BLOCK ELEMENTS OUT OF YOUR <____________________> ELEMENT. Paragraphs are for text, so keep block elements out of your paragraphs.

  6. LISTS ARE FOR LIST ITEMS. Only the <____________________> element is allowed in the <ul> and <ol> elements.

  7. When it comes to the <li> element: you can put ____________________, ____________________ ellements, or ____________________ elements inside your list items.
  1. Always put your text and inline elements inside ____________________ elements before adding them to a <blockquote>.

  2. Never nest an <a> element inside another < ____________________ > element because that would be too confusing for our visitors.

  3. The ____________________ attribute is required on images for accessibility, so that, for instance, the visually impaired can know what the image is, even if they can’t see it.

  4. The other required attribute is the ____________________ attribute on an image – what good is an <img> element if it doesn’t point to an image.

  5. By adhering to ____________________, your pages will display more quickly and with fewer display differences between browsers.

 

Tuesday, 13 September 2011 07:25

Homework #2

CIS 212 Fall 2011
Homework 2
Date handed out:09/12/2011

Reading Assignment:
3 Web Page Construction: building blocks
4 A Trip to Webville: getting connected

Note: Your answers must be turned in handwritten on another sheet of paper (no typed responses will be accepted).

Homework due at beginning of class on Monday August, 9/19:

  1. We surround each quote with a <____________________> opening tag and a </____________________> closing tag.

  2. Unlike the <q> element, which is meant for short quotes that are part of an existing paragraph, the <____________________ > element us meant for longer quotes that need to be displayed on their own.

  3. In general you will use <____________________> if you want to quote something that was a paragraph or more, while you can use <____________________> anytime you just want to 

  4. The <blockquote> element is a block element and the <q> element is an inline element. What’s the difference?

  5. Remember: block elements stand ____________________ ; inline elements ____________________.

  6. True      or      False       Block elements are used as the major building blocks of your Web page, while inline elements mark up small pieces if content.
  1. Add a <____________________>  element to any line when you want to break the flow and insert a “linebreak.”
  1. An example of an empty element is: <______________________________>
  1. Yes     or      No     Can I make any element empty? For instance if I have a link, and don’t want to give it any content, can I just write, <a href=”mypage.html”> instead?
  1. What element is used first when creating a list?

  2. The second list element determines what kind of list you are creating. What kind of list can you have? Write the element for them.

  3. Yes     or      No     Can you put text or other elements inside a list element?
  1. Yes     or      No     Can you put a list element within a list?
  1. HTML has ordered and unordered lists. What is an other type? Write the corresponding elements.

  2. The > character’s abbreviation is ______________________________ ; and the < is ______________________________.
  1. If you would like to have an & in your HTML content, use the character entity ______________________________ instead of the & character itself.
  1. This is the measure if the amount of pages and data the hosting company will let you send to your visitors during a given month.
  1. What is a domain name? Give an example – it does not have to be a real one.

  2. Domain names are controlled by a centralized authority called _________________________________
    __________________________________to make sure that only one person at a time uses a domain name.
  1. F.T.P. stands for _____________________________________________________________________.
  1. List what the following F.T.P. commands do.           dir, cd, pwd, put, get
  1. What is the difference between SFTP and FTP?

  2. Web address you type into the browser are called URLs. What does URL stand for?
  1. The first part of a URL tells you what?
  1. The second part of a URL is?

  2. The third part of a URL is?
  1. HTTP stands for what?
  1. What is an Absolute Path?
  1. What is important about the absolute path?
  1. To return a file by default from your root directory (or any other directory), just name the file
    “______________________________” or “______________________________.”

  2. How do we link to other Web sites?

  3. True      or      False     Relative paths can only be used to link to pages within the same Web site, while
                                        URL’s are typically used to link to other Web site.

  4. There other protocols besides http? What are they?

  5. What does it mean when you see a URL that looks like: http://www.mydomain.com:8000/index.html? Where would you most likely see it used?

  6. How do you add a title attribute to the <a> element?

  7. When you use an <a> element to create a destination, we call that a  ____________________________.

  8. What is the main benefit of destination anchors?

  9. Yes     or        No         When you have attributes in an element, is the order important? For example, should the title attribute always come after the href?

  10. Can you put a link to a destination anchor from within the same document?

  11. The ______________________________ attribute tells the browser where to open the Web page that is at the link in the href attribute.

 

Page 3 of 4