1 / 98

XHTML & CSS

XHTML & CSS. By Angelina Quansah. XHTML & CSS. Definition Brief History XHTML CSS. Definition of XHTML. E X tensible H yper T ext M arkup L anguage A reformation of HTML in XML instead of SGML

anthony-hopkins
Download Presentation

XHTML & CSS

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. XHTML & CSS By Angelina Quansah

  2. XHTML & CSS • Definition • Brief History • XHTML • CSS

  3. Definition of XHTML • EXtensible HyperText Markup Language • A reformation of HTML in XML instead of SGML XML was designed to structure data HTML was designed to display data.

  4. Definition of CSS • Cascading Style Sheet • A simple mechanism of adding style to a web document • Separates presentation from content of documents

  5. Brief History • HTML

  6. HTML • Tim Berners-Lee invented the Web in 1989 and HTML in 1992 at CERN. (The European Laboratory for Particle Physics in Geneva, Switzerland) - lots of people, organizations and companies joined in its development. Dave Raggett from Hewlett-Packard's Labs in Bristol, England got involved - It grew from HTML 1.0 to HTML 2.0, HTML 3.0 . . .

  7. HTML (cont.) - problems arose because lots of browsers added their own syntax and the language became ill-defined. - w3 consortium was formed in 1994 to standardize the language. - HTML 3.2 was introduced then HTML 4.0

  8. HTML (cont.) • HTML - is based on SGML by ISO. (Standard Generalized Mark Up Language by International Organization for Standardization) • Examples of SGML elements in HTML are as follows: <P> - paragraphs <H1> to <H6> - headings <OL> - ordered list <UL> - unordered list <LI> - list

  9. HTML (cont.) • HTML - is embedded into text to add formatting and link information. • HTML elements begins with an open tag and ends with a closing tag. Examples: <h1> This is a heading </h1> <p> This is a sentence </p> <html> This is an html document</html>

  10. HTML (cont.) • HTML documents are divided into two sections: - the header contains the introductory information like titles <head> This is the heading </head> - the body contains the main information <body> This is the main information</body> Titles add to the search ability of the page and identifies the page when users add to their favorites

  11. HTML document

  12. XHTML • The are well-formed cleaner versions of HTML enforcing the following: -All tags are paired - All elements and attributes must be in lower case only - All attributes are quoted - All attributes are presented as name = “value” pairs - XHTML elements must be properly nested • The strengths of HTML and XML were combined to bring sanity to the mark up language

  13. For text formatting (All tags are paired and in lowercase only)

  14. For creating lists and tables (All tags are paired)

  15. XHTML(All tags are paired cont.) • XHTML elements with no content are empty tags elements. Examples: <br /> - for break in lines <hr /> - for horizontal rule • XHTML documents have one root <html>……..</html>

  16. root

  17. XHTML(All attributes are quoted) • XHTML elements may have attributes - attributes give additional information about the element - attributes are specified as name = “value” pairs Examples: <h1 align="center">This is a heading </h1> <a href="http://www.utpa.edu">UTPA</a> - The element <a> (anchor) and href attribute is Tim’s own invention for linking web pages

  18. XHTML provides 6 headers

  19. A link to the specified URL Initiates e-mail message

  20. XHTML(All attributes are quoted cont.) • The <img> element with attribute src is for adding images to web page • Like the <hr /> is has no closing tag. <img src = “textbook.gif” />

  21. XHTML(All attributes are quoted cont.) • An alt attribute must be quoted with the img element - This indicates an alternative text to display if image cannot be rendered. <img src = “textbook.gif” alt = “E-commerce Textbook” />

  22. XHTML (All attributes are quoted cont.) • The width and height may be quoted in pixels - The browser uses the images actual size if note quoted. <img src = “textbook.gif” width = “92 height = “120” alt = “E-commerce Textbook” />

  23. XHTML(All elements are properly nested) • Table are composed of data cells and organized into rows and split into three sections - head <thead></thead> - table titles - column headers - body <tbody></tbody> - primary table data - foot <tfoot></tfoot> - calculation results - foot notes

  24. XHTML(All elements are properly nested) • Table are composed of data cells and organized into rows and split into three sections - data cells are defined within <td></td> - table rows are defined within <tr></tr> - header cells are defined within <th></th> • Attribute colspan and rowspan can be used to merge data cells - value of the attribute specifies the rows or column to be merged

  25. comments All are nested in the table element

  26. Merge columns Merge rows

  27. XHTML(All elements are properly nested) • Definition list tags are nested within each other <dt></dt> definition term and <dd></dd> definition description are nested within <dl></dl> • This list tags are nested within either the ordered list tags or unordered list tags. <ol><li>ordered list</li></ol> <ul> <li>unorderedlist</li></ul>

  28. XHTML (cont.) • WYSIWYG editor - what you see is what you get • Only the document’s content and structure appears in the XHTML document - formatting are mostly specified with CSS

  29. XHTML (cont.) • Comments begin with <!--- and end with --> - the browser ignores the text within • XHTML documents with syntax errors are not guaranteed to display properly. • XHTML documents can be validated with W3C's validator.

  30. XHTML (cont.) • W3C provides a validation service for checking to check correct syntax - files can be uploaded for validation using: validator.w3.org/file-upload.html - files can be validated by specifying the url to the files location using: validator.w3.org

  31. XHTML (cont.) • Forms unable users to enter information and send to server • Form is surrounded by the <form> tag which is specified as: <form action = “url” method = “method” </form> - method is specified as either “get” or “post” get - url produced after submission includes information entered post – does not return information entered

  32. XHTML (cont.) • Input fields within the form are specified with input tags with different attributes - text input - inserts a text box that allows user to enter data - label element - provides information about the input element’s purpose

  33. XHTML (cont.) - size attribute - specifies the number of characters visible in the input element - optional attribute - limits the number of characters input into a text box - submit input - submits data entered to the web server for processing - reset input - allows user to reset all form elements to their default values

  34. XHTML (cont.) - password - user input displayed at asterisks or bullets for security - checkbox attribute - allows user to make group or single selection - hidden - submits data entered to the web server for processing - radio - allows user to select only one option at a time

  35. XHTML (cont.) - textarea element - inserts a multiline text box called text area into form - number of rows is specified with row attribute - number of columns with cols attribute - select input - provides a drop down list of items - the name element identifies the drop down list - the option element adds items to the drop down list

  36. radio checkbox

  37. method = post

  38. method = get

  39. XHTML (cont.) • Meta Element has - name attribute identifies the type of meta element - content attribute - of a keyword of the meta element provide search engines with list of words that describe the page - of a description meta element provides a three to four line of a site in a sentence form

  40. XHTML (cont.) • Unlike the HTML, the XHTML document has three main parts -The doctype declaration - The head - The body

  41. doctype head body

  42. XHTML (cont.) • There are three document type definitions (DTD) - The strict - The transitional - The frameset

  43. XHTML (cont.) • The strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> The strict DOCTYPE is used when the document is written in clean mark up language free of any presentational errors normally made in HTML

  44. XHTML (cont.) • The transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> The transitional DOCTYPE is used when document still has html presentational features.

More Related