Metropolitan State University

ICS 325

Internet Application Development

 

Class Notes – XHTML & CSS

 

Basics

WWW – World Wide Web –                             Millions of computer networked together communication on a standard protocol

HTTP – Hyper Text Transfer Protocol –                     A set of rules each browser follows to send and

receive html documents

HTML – Hyper Text Markup Language –          A language developed to display text and graphics

on a web browser.

 

XHTML stands for Extensible Hypertext Markup Language

XHTML is aimed to replace HTML

XHTML is a stricter and cleaner version of HTML

 

Key Differences between HTML and XHTML

XHTML elements must be properly nested

XHTML documents must be well-formed

Tag names must be in lowercase

All XHTML elements must be closed

Attribute names must be in lower case

Attribute values must be quoted

Attribute minimization is forbidden

The id attribute replaces the name attribute

 

 

 

META Tags-

 

·        META tags contain two attributes that should always be used.

o       NAME, is an identification of the type of META tag you are including.

o       CONTENT attribute gives the information the search engine will be cataloging.

·        The CONTENT of a META tag with NAME=”keywords” provides the search engines with a list of words that describe the key aspects of your site. By including META tags and their content information, you can give precise information about your site to search engines. This will help you draw a more focused audience to your site.

o       <meta name="description" content="ICS325, Web Development, PHP">

·        The CONTENT of a META tag with NAME=”description” should be a 3 to 4 line description of your site, written in sentence form. This description is used by the search engine to catalog and display your site.

o       <meta name="description" content="ICS325 is a Metropolitan State University Web Development Course, focusing on server side web development.">

·        META elements are not visible to users of the site and should be placed inside the header section of your HTML document.

 

 

 

The XHTML DTD defines mandatory elements

 

XHTML 1.0 Strict -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(Use this when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets.)

 

XHTML 1.0 Transitional -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(Use this when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets.)

 

XHTML 1.0 Frameset -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

(Use this when you want to use HTML Frames to partition the browser window into two or more frames.)

 

 

 

 

 

 

 

HTML Specifics

 

XHTML Documents can be created using any text editor

XHTML Documents will have either an htm or html extension

XHTML tags are used to mark-up HTML elements

XHTML tags are surrounded by the two angle brackets  < and >

XHTML tags normally come in pairs; the start tag and the end tag

The text between the start and end tags is the element content

 

Common XHTML Tags

<html>        </html>                start html document

<head>      </head>               head of document

<title>         </title>                  title bar

<meta         />                          description

<script>      </script>              

<body>      </body>

<h1>                    </h1>                             headers

<h6>           </h6>         

<p>             </p>                      paragraph

<br />                                      line break

<hr />                                      horizontal rule

<!- -            - ->                       comments

<a href=>   </a>                     anchor (link)

<frameset>         </frameset>        frames

<frame       />

<noframes></noframes>      *alternative to frameset; place this around <body></body>

<table>       </table>

<thead>     </thead>              identifies set of cells to be used for labels

<tbody>     </tbody>              body of table

<tfoot>       </tfoot>                set of cells to be used for footer

<tr>             </tr>                     one table row

<td>            </td>                    one cell

<ol>            </ol>                    ordered list

<ul>            </ul>                     unordered list

<li>             </li>                      one list item

<dl>            </dl>                    definition list for glossaries or descriptions

<dt>            </dt>                    definition term

<dd>          </dd>                             definition

<form>       </form>

          <input type = “button”, “checkbox”, “hidden”, “password”, “radio”, “reset”, “submit”, or

“text” />

          <textarea>           </textarea>

          <button>              </button>

          <option>              </option>             menu options

          <select>              </select>             groups options

<img src=  />

<map>       </map>

<area>       />                area within map

The Most Common Character Entities:

Result                 Description                           Entity Name

                             non-breaking space               &nbsp;

<                           less than                                 &lt;

>                           greater than                            &gt;

&                           ampersand                                       &amp;

"                            quotation mark                        &quot;

¢                           cent                                         &cent;

£                           pound                                     &pound;

¥                           yen                                          &yen;

§                           section                                    &sect;

©                           copyright                                 &copy;

®                           registered trademark             &reg;

×                           multiplication                          &times;

÷                            division                                    &divide;

 

Cascading Style Sheets

 

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles are normally stored in Style Sheets

External Style Sheets can save you a lot of work

External Style Sheets are stored in CSS files

More than one Style Sheet can be applied to a web page

Rules defined first are overridden by subsequent rules

Inline rules are applied after linked or imported style sheet rules

Users can override the web page’s style sheet with their own styles

 

Coding

 

·        CSS can be defined in external CSS files

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

 

·        CSS rules can be embedded in the header section

<head>

<style type="text/css">

body {background-image: url("images/back40.gif");

background-position: center center;

background-repeat:no-repeat}

</style>

</head>

 

·        CSS can be defined inline

<p style="color: sienna; margin-left: 20px">

This is a paragraph

</p>

 

·        Multiple CSS can be combined

<link rel="stylesheet" type="text/css" href="mystyle.css" />

<link rel="stylesheet" type="text/css" href="mystyle2.css" />

 

·        /* Use these delimiters for comments */

 

Syntax

 

Single element -

Element Name {attribute: value}

    body{color:blue}

 

          Multiple Elements -

Element1, Element2, Element3 {attribute: value}

    h1,h2,h3,h4{color:blue}  

 

          Using Classes for single elements -

Element.ClassName {attribute: value}

    h1.main  {color:blue}

    ...

    <h1 class=”main”>This is a header</h1>

    ...

 

          Using Classes for any element -

.ClassName {attribute: value} or

    .main    {color:blue}

    ...

    <h1 class=”main”>Example 1</h1>

    <h2 class=”main”>Example 2</h2>

    ...