1. HTML and XHTML Controlling the Display Of Web Content

2. Markup Languages  There are two components to any document  What it says (content)  How it looks  A markup language uses a special syntax to imbed information about how the content should be displayed in the file that contains the content.

3. Hypertext  The basic idea of hypertext has been around since 1945 when Vannever Bush suggested the usefulness of having being able to automatically follow references from one document to another  Think of it as providing non-linear access to information

4. Hypertext Markup Language  A markup language designed for displaying information on the web  Standard maintained by the World Wide Web Consortium ( w3c.org )  Current standard is 4.01 which is being developed into an ISO standard.  Designed using a metalanguage called SGML

5. XHTML  XHTML is very similar to HTML except the syntax is stricter  A DTD (Document Type Definition) is used to define the allowed elements which are basically the same as those used in HTML  Based on XML instead of SGML

6. Syntax  An XHTML document consists of a hierarchy of elements.  Unrecognized tags are ignored by the browser  Elements must be closed and well-formed (properly nested)  Extra white space is ignored

7. HTML Elements content  tag is one of the pre-defined element names optionally followed by a list of attributes  content can include other elements  The ending tag needs to have the same name as the start tag  In XHTML, all elements must be closed

8. Elements with no content  Some elements have only attributes associated with them  for example  In HTML, the closing tag could be left out  In XHTML, use the form

9. Tags  Tags are enclosed by  Tags consist of a name followed by zero or more attributes  Attributes are separated by white space  Names of tags and attributes are all lower case in XHTML  Some tags can appear only in certain contexts

10. Attributes  Attributes have the form  Attrname="value"  The value must have double quotes around it  Attributes may be required or optional

11. Types of Markup Element  Structural - describes purpose (e.g. headers and titles)  Presentational - describes how it looks  Hypertext -links to other documents or other parts of the document  Trend is to move presentational markup into CSS document.

12. Top-level elements Elements  html  head  Contains elements describing document  body  Can contain only block-level elements

13. Head Elements  - page title generally appears in browser title bar   - related documents  - data about document  - URL  - language for client-side scripting

14. Block-level Elements  Behave like paragraphs  Headings …  for paragraphs , for pre-formatted text and quotations  to create blocks  Lists -,,  Tables and Forms  for horizontal lines

15. Inline Elements  Behave like words, characters, phrases  for anchors  line break  for images  Emphasis and styling,,,, …  In HTML, there are tags like,, that you should now implement in a stylesheet

16. Odds and Ends  Entities are escape sequences for characters that are used by HTML and some non-keyboard characters < > &  Comments are enclosed by  There are some elements that come first in the document

17. Minimal HTML Document Appears in title bar Marked-up content

18. Page Layout  For vertical layout use paragraphs, headings and rules  If you need horizontal as well as vertical formatting, use tables  A table cell can hold all sorts of other elements

19. Presentation Style  Style sheets are external specifications of desired style  linked to the document with a element in the element  element in element  style attribute in a particular element  style="property1=value1; property2=value2; … "

20. Links  The tag is used for making links, either internally or externally  Attribute href="location" where location can be a URL or a relative path or a name in the current document  Attribute name allows you to create label to a particular part of the document for local links

21. Images  You can link to an image file and have that file open in the browser  You use the image tag to embed an image into another document  where image is the location of the image file  jpg, gif and png formats supported

22. Tables  Use the tag to create a table  Use border, cellspacing, cellpadding to control looks  … for each row  for each cell in the row  for column and row labels (bold)  colspan and rowspan allow you to make irregular tables

23. Sample Table …

24. Coming next  Forms  Stylesheets  Anything else?

25. Sources  Web Design and Programming by Paul S. Wang and Sanda S. Katila  HTML The Definitive Guide by Chuck Musciano and Bill Kennedy  Wikipedia  http://en.wikipedia.org/wiki/HTML  W3C  http://www.w3.org/