MA foundation Creating webpages using XHTML (part 1) Simon Mahony CCH

Basic (minimum) structure of a web page: [page title (note where this is displayed)] [page content goes here] [ie everything displayed in the browser]

HTML vs XHTML HTML – displays your data XHTML – describes your data (HTML + XML) XHTML –separates style from content –structural and semantic markup –stricter syntax CSS – used to style XHTML pages (part 3)

Example of the difference I really liked the characterisation of Ajax in Homers Iliad. HTML does not allow us to distinguish between the different uses of the italics With XHTML we can mark these up differently to differentiate between emphasis and the book title. Using XHTML we can also add more information if we wished (as with XML).

TITLE OF THE DOCUMENT CONTENT OF THE WEBPAGE Template (provided) for a basic XHTML page

Elements and attributes Elements –Start tag –End tag –Content within those tags(some text) Attributes –Describe the element (tell you something about it) –Syntax: Attribute_name= " attribute value " Eg: second level heading

Block-level and line-level tags block-level (h1, h2, h3, h4, h5) (exception to rule) line-level

Nesting elements Some text

Empty elements line break - forces white space horizontal rule link to an image

Adding lists to you webpage ordered list: list item another list item unordered list: list item another list item

Definition list definition term definition definition term definition definition term definition

Adding images to your pages Syntax <img src="filename" width="width in pixels" height="height in pixels" alt="short description of the image" /> Example <img src="image.jpg" height="100" Width="100" alt="photo of kcl" />