xhtml & css

By Angelina Quansah

Definition Brief History XHTML CSS

EXtensible HyperText Markup Language A reformation of HTML in XML instead of SGML XML was designed to structure data

HTML was designed to display data.

Cascading Style Sheet A simple mechanism of adding style to a web

document

Separates presentation from content of documents

Tim Berners-Lee invented the Web in 1989 and HTML in 1992 at CERN.

(The European Laboratory for Particle Physics in Geneva, Switzerland)

- lots of people, organizations and companies joined in its

development. Dave Raggett from Hewlett-Packard's Labs in Bristol, England got

involved

- It grew from HTML 1.0 to HTML 2.0, HTML 3.0 . . .

- problems arose because lots of browsers added their own syntax and the language became ill-defined.

- w3 consortium was formed in 1994 to standardize the language.

- HTML 3.2 was introduced then HTML 4.0

HTML - is based on SGML by ISO. (Standard Generalized Mark Up Language by International Organization

for Standardization)

Examples of SGML elements in HTML are as

follows: <P> - paragraphs <H1> to <H6> - headings <OL> - ordered list <UL> - unordered list <LI> - list

HTML - is embedded into text to add formatting and link information.

HTML elements begins with an open tag and

ends with a closing tag. Examples: <h1> This is a heading </h1>

<p> This is a sentence </p>

<html> This is an html document</html>

HTML documents are divided into two sections:

- the header contains the introductory information like titles

<head> This is the heading </head>

- the body contains the main information <body> This is the main information</body>

Titles add to the search ability of the page and identifies the page when users add to their favorites

The are well-formed cleaner versions of HTML enforcing the following:

-All tags are paired - All elements and attributes must be in lower case only - All attributes are quoted - All attributes are presented as name = “value” pairs - XHTML elements must be properly nested

The strengths of HTML and XML were combined to bring sanity to the mark up language

Tags Meaning

<h1> …. </h1> to <h6>….</h6>

Defines header 1 to header 6

<b> ….</b> Defines bold text

<i> ….</i> Defines italic text

<u> ….</u> Defines underlined text

<em> ….</em> Defines emphasized text

<sub> ….</sub> Defines subscripted text

<sup> ….</sup> Defines superscripted text

<blockquote > ….</blockquote> Defines a long quotation

<small>….</small> Defines small text

<pre> …. </pre> Defines preformatted text

<strike> ….</strike> Defines strikethrough text

<strong> ….</strong> Defines strong text

<font> ….</font> Defines text font, size, and color

<tt>….</tt> Defines teletype text

Tags Meaning

<dd> …. </dd> Defines a definition description

<dl> ….</dl> Defines a definition list

<dt> ….</dt> Defines a definition term

<ul> ….</ul> Defines an unordered list

<ol> ….</ol> Defines an ordered list

<li> ….</li> Defines a list item

<table> ….</table> Defines a table

<tbody > ….</tbody> Defines a table body

<tfoot>….</tfoot> Defines a table footer

<thead> …. </thead> Defines a table header

<td> ….</td> Defines a table cell

<th> ….</th> Defines a table header

<tr> ….</tr> Defines a table row

XHTML elements with no content are empty tags elements.

Examples: <br /> - for break in lines

<hr /> - for horizontal rule

XHTML documents have one root <html>……..</html>

XHTML elements may have attributes - attributes give additional information about the element - attributes are specified as name = “value” pairs

Examples: <h1 align="center">This is a heading </h1>

<a href="http://www.utpa.edu">UTPA</a>

- The element <a> (anchor) and href attribute is Tim’s own invention for linking web pages

A link to the specified URL

Initiates e-mail message

The <img> element with attribute src is for adding images to web page

Like the <hr /> is has no closing tag.

<img src = “textbook.gif” />

An alt attribute must be quoted with the img element

- This indicates an alternative text to display if image cannot be rendered.

<img src = “textbook.gif” alt = “E-commerce Textbook” />

The width and height may be quoted in pixels - The browser uses the images actual size if note quoted.

<img src = “textbook.gif” width = “92 height = “120”alt = “E-commerce Textbook” />

Table are composed of data cells and organized into rows and split into three sections

- head <thead></thead> - table titles - column headers

- body <tbody></tbody> - primary table data

- foot <tfoot></tfoot> - calculation results - foot notes

Table are composed of data cells and organized into rows and split into three sections

- data cells are defined within <td></td>

- table rows are defined within <tr></tr>

- header cells are defined within <th></th>

Attribute colspan and rowspan can be used to merge data cells

- value of the attribute specifies the rows or column to be merged

All are nested in the table element

comments

Merge columns

Merge rows

Definition list tags are nested within each other

<dt></dt> definition term and <dd></dd> definition description are nested within <dl></dl>

This list tags are nested within either the ordered list tags or unordered list tags.

<ol><li>ordered list</li></ol> <ul> <li>unordered list</li></ul>

WYSIWYG editor - what you see is what you get

Only the document’s content and structure appears in the XHTML document

- formatting are mostly specified with CSS

Comments begin with  - the browser ignores the text within

XHTML documents with syntax errors are not guaranteed to display properly.

XHTML documents can be validated with W3C's validator.

W3C provides a validation service for checking to check correct syntax

- files can be uploaded for validation using: validator.w3.org/file-upload.html

- files can be validated by specifying the url to the files location using: validator.w3.org

Forms unable users to enter information and send to server

Form is surrounded by the <form> tag which is specified as:

<form action = “url” method = “method” </form> - method is specified as either “get” or “post” get - url produced after submission includes information entered

post – does not return information entered

Input fields within the form are specified with input tags with different attributes

- text input - inserts a text box that allows user to enter data

- label element - provides information about the input element’s purpose

- size attribute - specifies the number of characters visible in the input element

- optional attribute - limits the number of characters input into a text box

- submit input - submits data entered to the web server for processing

- reset input - allows user to reset all form elements to their default values

- password - user input displayed at asterisks or bullets for security

- checkbox attribute - allows user to make group or single selection

- hidden - submits data entered to the web server for processing

- radio - allows user to select only one option at a time

- textarea element - inserts a multiline text box called text area into form

- number of rows is specified with row attribute

- number of columns with cols attribute

- select input - provides a drop down list of items

- the name element identifies the drop down list

- the option element adds items to the drop down list

checkboxradio

method = post

method = get

Meta Element has - name attribute identifies the type of meta element - content attribute - of a keyword of the meta element provide search engines with list

of words that describe the page

- of a description meta element provides a three to four line of a

site in a sentence form

Unlike the HTML, the XHTML document has three main parts

- The doctype declaration - The head - The body

doctype

head

body

There are three document type definitions (DTD)

- The strict - The transitional - The frameset

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

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

The strict DOCTYPE is used when the document is written in clean mark up language free of any presentational errors normally made in HTML

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

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

The transitional DOCTYPE is used when document still has html presentational features.

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

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

The frameset DOCTYPE is used if you want to use HTML Frames to split the web page into two or more frames.

Defines how to display XHTML documents and are saved in style sheets with extension css

mystyles.css

Style sheet allow style information to be specified in many ways

Attributes are inherited

CSS specifications are case sensitive and appear in the same format as

name: value; -> color: blue;

Style block elements have style attributes

defined in curly braces b {color: blue}

Multiple properties are separated with a semicolon

b {color: blue; font-family: arial}

CSS rule consist of two parts: - the selector is the element that receives the style

h1{color: blue}

- the declaration which has two parts

- the property “color” and value “blue”

Styles are mostly declared in the following tags: <div></div>

<span></span>

div is used as a block container like a paragraph

span is used within a block

Types of CSS - Inline CSS - Embedded Style Sheets - External Style Sheets

This allows the specification of a style in a single element

<b style = “color: blue”></b>

CSS styles of elements are specified in a style block in the header section of the document

All occurrence of the element inherit the style

style sheet

document

results

Most styles are inherited from parent elements

Styles defined for children overwrite parent specifications

Classes can be specified as subtags

Classes can be used several times in the same document

Classes allow authors to apply rule to a particular element within the document

The class declaration in the style block is preceded with a period

.camera { font-size: 120%;color: #ff6666;} <span class =“camera">Sony</span>

Relative length measurements: - px (size depends on screen resolution)

- em (usually the size of a font’s uppercase) - ex (usually the size of a font’s lowercase) - percentage (of font’s default size)

Absolute length measurements: - inches

- centimeters - millimeters - points

Its advisable to use relative length measurement for text to ensure readability on all user agents

Separate documents containing only CSS rules

Separate web pages in separate website can all use the same style

Several website can be modifies with the edit of a single style sheet

The link element is used to reference a separate style sheet

<link type = “text/css” href =“mystyles.css” />

where mystyles.css is a separate style sheet store in the same directory on the same server.

A url can also be used to reference style sheets <link rel = “text/css”

href =“http://www.cs.panam.edu/library/mystyles.css” />

CSS has control over lists ul { list-style-type: disc; } ol { list-style-type: lower-roman; }

CSS values for unordered lists are - disc - circle - square

Can reference a bullet from a graphic file form a server.

ul { list-style-image: url(diamond.jpg) line-height: 1.5 }

There are many possibilities and values for the ordered lists

decimal - 1,2,3…lower-roman - i, ii, iii…upper-roman - I, II, III…

Text Formatting

Other properties

- Bold text - specified as font-weight - normal - lighter - bold - bolder

It can also be specified in increments of 100, from 100 to 900

<div style = “font-weight:bold”>

- italics - specified as font-style - normal - italics - oblique

<div style = “font-style:italics”>

typeface - specified as font-family - serif - san serif - cursive - fantasy

<div style = “font-family:arial”>

size - specified as font-size - xx small, xx large - x small, x large - small, medium, large

text color - specified as color - specified either in name or hexadecimal values

- its two hexadecimal digit representing red, green and

blue respectively where 00 is the least and ff is the most #RRGGBB as 009900

Text alignment - specified as text-align - left - right - center - justify

<div style = “font-family:arial”>

Text decoration - specified as text-decoration - underline - overline - line-through

h1{text-decoration overline}

text transformation -specified as text-transform - capitalize - uppercase - lowercase - none h1{text-transform: capitalize}

Each element has the is surrounded by - margin - is the distance between the elements edge and any outside text - margin-top, margin-right, margin-left and margin-bottom

- padding - is the distance between an elements and the edge of the element. - padding-top, padding-right, padding-left and padding-bottom

border - border-width

May be set to any of the CSS lengths or to the predefined value of thin, medium or thick

- border-color

sets the color used for the border

- border-style

Options are: none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset

Positioning - absolute position have greater control on where on the page an element resides - absolute positioning place the element according to specifications on the top, left, right or bottom of its parent element

Positioning - relative positioning places an element relative to its normal position. - overflow property is used when content of element exceeds specified area. - associated attributes are for overflow are visible, hidden, scroll, inherit or auto

Backgrounds - background-image indicates the url of the image background-image: url(textbook.jpg)

- background-position places image on the page with top, bottom, center, left and right as desired. background-position: bottom right

Backgrounds - background-repeat control titling of the background image. background-repeat: no-repeat

- setting background repeat as repeat tiles the image vertically or horizontally. - repeat-x for horizontal - repeat-y for vertical

Backgrounds - background-attachment fixes the image in the position specified and scrolling the browser cannot affect it

background-attachment: fixed

The image is fixed so scrolling does not move it

Float property - an element can be floated to the right or left using the float property.

Media types - a programmer can specify different style rules for

different media types in the same style sheet.

Indicates that font should be 14px on screen

Indicates that font should be 10px when printed

Indicates that they should both be bold

Media Type Description

all Used for all media type devices

aural Used for speech and sound synthesizers

braille Used for braille tactile feedback devices

embossed Used for paged braille printers

handheld Used for small or handheld devices

print Used for printers

projection Used for projected presentations, like slides

screen Used for computer screens

tv Used for television-type devices

Pages load faster- Less code means faster download times.

Easy maintenance - To change the style of an element, you only have to

make an edit in one place.

www.w3schools.com www.intuitive.com www.w3.org/People/Raggett/book4/ch02.html

Internet & World Wide Web, How to Program - Deitel, Deitel, & Goldberg

Creating Cool Web Sties with HTML,XHTML and CSS - Dave Taylor

xhtml & css

Documents