Imperial Valley College Faculty Websites

You are here:Instructors»Robert Gallegos»CIS 212»Chapter 7 and 8 Review
Tuesday, 27 September 2011 11:24

Chapter 7 and 8 Review

Written by Robert Gallegos
Rate this item
(0 votes)

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.