XHTML HyperText Markup Language Instructs a browser how to “render”/display/format text

XHTML Syntax The basic building block is the “element” An element is composed of a “start tag”, some text (content) and an “end tag” E.g. hello world Start tag End tag content

Start Tag “<“ Name of the tag 0 or more “attributes” “>” E.g. – name attributes

Content May be plain text May include other elements E.g. – Hello world – She wore a very large hat

Attributes Name/value pairs Syntax: name=“value” E.g. – class=“defn” – id=“abc”

End tag “</” Name of the corresponding start tag “>” E.g. –

XHTML vs. HTML XML stands for eXtensible Markup Language XML is a family of similar languages XHTML is a reformulation of HTML in XML syntax XHTML is the preferred language for new Web documents

Case sensitivity XHTML is case sensitive; tag and attribute names must be given in lower case E.g. – not

End tags In XHTML, end tags are required Applies particularly to and tags E.g. – … … not … … …

Empty elements Empty elements must use the XML convention for empty elements E.g. not

Attribute values Attribute values must be quoted E.g. – not

Html element Every document consists of a single html element: [link]greendreams.htmllink Green Dreams Green dreams sleep peacefully.

element only inside a element “name” attribute specifies a property name “content” attribute specifies a property value typical properties: author, keywords, description

Spacing Adjacent spaces, tabs, newlines in the input reduce to a single space in the output linkspacing.htmllink The following will not display what you expect: ProvinceSales Tax Rate Ontario8% Alberta0% British Columbia7%

Paragraphs The spacing rules apply to newlines between paragraphs: linkbad_para.htmlink This is paragraph 1. It was a quiet day for all the quitters. Now is the time for all the good men to go to aid of the party.The quick brown fox jumps over the lazy dog. This is paragraph 2. It was a quiet day for all the quitters. Now is the time for all the good men to go to aid of the party.The quick brown fox jumps over the lazy dog.

element Enclose logical paragraphs inside a … element linkgood_para.htmllink This is paragraph 1. It was a quiet day for all the quitters. Now is the time for all the good men to go to aid of the party.The quick brown fox jumps over the lazy dog. This is paragraph 2. It was a quiet day for all the quitters. Now is the time for all the good men to go to aid of the party.The quick brown fox jumps over the lazy dog.

Header elements Use the to elements to delineate sections of a document linkheader.htmllink Heading 1 Heading 2 Heading 3 Heading 4

Logical Highlighting … - emphasis (usually italics)‏ … - stronger emphasis (usually boldface)‏ linklinklogical html

Physical Highlighting … - italics … - bold … - subscript … - superscript linklinkphysical.html

Special Characters << >> && "“

Misc. elements Comments: Horizontal rule:

Images Inserted using element Src attribute specifies file containing the image to insert Alt attribute specifies the text to display when the browser can’t render the image E.g. linkbill1.htmllink Speedy Bill

Resizing Images Use the “width” and “height” attributes to specify the desired size linkbill2.htmllink linkbill3.htmllink

Links Links to other documents are implemented with the … or “anchor” element Href attribute specifies the document to link to E.g linklink.htmllink See Bill drive fast !

Block Level Elements Lists Tables Framesets

Layout (Block v. Inline)‏ inline elements flow together one after another; a new line is started only if the next element will not fit on the current line block level elements almost always start on a new line

Lists (unordered)‏ Produces a bulleted list: … Each item in the list is a … element

Lists (ordered)‏ Produces a numbered list: … The browser numbers the items automatically Each item in the list is … element listlist1.html list

Tables Creates a rectangular array of cells: … The “border” attribute specifies the width, in pixels, of the border around the table The “cellspacing” attribute specifies the amount of space, in pixels between adjacent cells The “cellpadding” attribute specifies the amount of space, in pixels between a cell and its own contents

Rows and Cells A “table” element contains one or more rows: … The first “tr” element usually contains one or more heading cells: … The remaing row elements are composed of one or more regular cells: … linktable1.html link

Cell Spanning By default all cells are the same size and shape The “rowspan” attribute allows a cell to cross two or more rows The “colspan” attribute allows a cell to cross two or more columns linktable2.htmllink

Definition Lists … definition list – … term being defined – … definition linkdefinition_list.htmllink Dweeb young excitable person who may mature into a Nerd or Geek Hacker a clever programmer Nerd technically bright but socially inept person

Framesets Used to display 2 or more entire web pages within a single window … Rows attribute – the number and style of rows to divide the window into Cols attribute – the number and style of columns to divide the window into

Frame Identifies the HTML document to place inside a frame Src attribute identifies the HTML file to display in the frame Name attribute names the frame so that it can be targetted by an anchor (link)‏

Frameset Example

Links (Anchors and frames)‏ To have a link in one frame change the file in another frame, use the “target” attribute of the “img” tag E.g Image 1

Cascading Style Sheets Separates content from presentation Used to globally alter the presentation of elements in a document E.g definition lists linkdefinition_list.htmllink –With font elements linkdl_with_font.htmllink

CSS Syntax Styles are defined within a … element within the … element of the document E.g. dt { color: red }

Syntax dt { color: red } selector property name value link dl_with_css

Selector name of an element,, dt {...} name of a class.pastoral {...} name of an ID attribute h1#main_section {...}

Common Properties Amount of space to leave inside the element before its content to the left padding-left Amount of space to leave vertically before element margin-top Normal, italic, or obliquefont-style Normal or boldfont-weight background-color Foreground colour color DescriptionName

Length units Relative em (ems, the height of the element's font) ex (x-height, the height of the letter "x") px (pixels, relative to the canvas resolution) Absolute in (inches; 1in=2.54cm) cm (centimeters; 1cm=10mm) mm (millimeters) pt (points; 1pt=1/72in) pc (picas; 1pc=12pt)

Linked Style Sheets element inside the element

Colours 12 bit RGB triplee.g.#47B 24 bit RGB triplee.g#F7342B name: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow

Other considerations For filenames, stick to lowercase, numbers and underscores ‘_’ Use the proper extension: –.html for HTML –.gif,.jpg for images ‘src’ and ‘href’ attributes are relative to the current document