Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML and XHTML Controlling the Display Of Web Content.

Similar presentations

Presentation on theme: "HTML and XHTML Controlling the Display Of Web Content."— Presentation transcript:

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 ( )  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   W3C 

Download ppt "HTML and XHTML Controlling the Display Of Web Content."

Similar presentations

Ads by Google