1 / 25

HTML and XHTML

HTML and XHTML. Controlling the Display Of Web Content. Markup Languages. There are two components to any document What it says (content) How it looks

sagittarius
Download Presentation

HTML and XHTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

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(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 <tag>content</tag> • 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 • <img …> for example • In HTML, the closing tag could be left out • In XHTML, use the form <name attributes />

  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 • <title> - page title generally appears in browser title bar • <style> • <link> - related documents • <meta> - data about document • <base> - URL • <script> - language for client-side scripting

  14. Block-level Elements • Behave like paragraphs • Headings <h1> … <h6> • <p> for paragraphs • <pre>, <blockquote> for pre-formatted text and quotations • <div> to create blocks • Lists - <ul>, <ol>, <dl> • Tables and Forms <table> <form> • <hr> for horizontal lines

  15. Inline Elements • Behave like words, characters, phrases • <a> for anchors • <br> line break • <img> for images • Emphasis and styling <em>, <kbd>, <sup>, <sub>, … • In HTML, there are tags like <font>, <b>, <i> 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 &nbsp; &lt; &gt; &amp; • Comments are enclosed by <!-- … -> • There are some elements that come first in the document <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  17. Minimal HTML Document <html> <head> <title>Appears in title bar</title> </head> <body> Marked-up content </body> </html>

  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 <link> element in the <head> element • <style> element in <head> element • style attribute in a particular element • style="property1=value1; property2=value2; … "

  20. Links • The <a> 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 • <img src="image"> where image is the location of the image file • jpg, gif and png formats supported

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

  23. Sample Table <table> <tr><th></th><th></th>…</tr> <tr><td></td><td></td>…</tr> <tr><td></td><td></td>…</tr> </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/

More Related