Side Trip: XHTML           Using XHTML
XHTML●   Extensible Hypertext Markup Language●   Supposedly the replacement for HTML.●   Reformulation of HTML in XML.    ...
Required Elements in XHTML●   <!DOCTYPE>    –   One of three doctypes.●   <html>    –   Root element●   <head>●   <title>●...
Differences from HTML●   Always well-formed.●   Some elements are required elements.●   Some elements in HTML that are for...
The DOCTYPES●   XHTML Transitional    –   Compatibility with old browsers that does not support         CSS.●   XHTML Stri...
XHTML Template<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-  trans...
Where Its Going●   XHTML 1.1 : Modularized XHTML●   XHTML 2.0 : Still In Development    –   HTML Forms to be replaced by X...
Validating XHTML Documents
Presentation of (XML) Data for theWeb
XML: Separation of Data FromPresentation●   XML Documents are data-centric.    –   Markup of data only.●   XML Documents s...
Presentation of XML Data usingStylesheet●   A Stylesheet    –   A specification on how to display the data.●   Cascading S...
CSS: Attaching to HTML●   External Stylesheets    –   CSS rules written in separate file    –   Linked via    <link rel=”s...
CSS: Attaching to HTML●   Internal Stylesheets    –   Style rules written inside <style> inside <head>    <html>         <...
CSS: Attaching to HTML●   Inline Style    –   Style rules written inside in style attribute in        presentable elements...
CSS Syntax   selector { property : value;              property2 : value2                 }               Example:    p { ...
Specifying Selectors●   Element name (e.g. <p>, <a> etc... }    a { text-decoration: none }    //represents the <a> elemen...
Specifying Selectors●   Element ID (specified by id attribute    #unique { border : 1px solid black }    a#unico { display...
Specifying Selectors●   Grouped Selector    h1,h2,h3,h4,h5,h6,h7 {        color: blue    }●   Heirarchial Selector    p a ...
Specifying Selectors●   Element with Specific Attributeinput[type=”text”] {     border: 1px solid red}/* applies to <input...
Specifying Selectors●   Pseudo-classesa:link { color: #FFFF00 }a:hover { color: rgb(123,234,54) }a:visited { color: salmon }
CSS Properties and Their Values●   Background Properties   ●   Dimension●   Text                    ●   Classification●   ...
CSS Properties and Their Values●   Consult a CSS Reference for the different property    names and their possible values.
CSS Inheritance●   Most CSS properties are inheritable from more    general selectors to more specific selectors●   When t...
Observe:/* CSS Rules */             <!-- HTML Markup-->a{                          <a href=””>Link 1</a>    font-family: “...
CSS Rule application:●   Browser Default●   External CSS●   Internal CSS●   InlineIn terms of selector, the rules of the m...
XML + CSS = Web Page●   With any XML document, we can apply CSS to    display it as web page.●   The selectors will be the...
Cmsc 100 xhtml and css
Cmsc 100 xhtml and css
Cmsc 100 xhtml and css
Cmsc 100 xhtml and css
Upcoming SlideShare
Loading in...5
×

Cmsc 100 xhtml and css

320

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
320
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Cmsc 100 xhtml and css

  1. 1. Side Trip: XHTML Using XHTML
  2. 2. XHTML● Extensible Hypertext Markup Language● Supposedly the replacement for HTML.● Reformulation of HTML in XML. – Still like HTML with the rules of XML (on wellformedness).
  3. 3. Required Elements in XHTML● <!DOCTYPE> – One of three doctypes.● <html> – Root element● <head>● <title>● <body>
  4. 4. Differences from HTML● Always well-formed.● Some elements are required elements.● Some elements in HTML that are formatting, e.g. <b>, <i>, etc. are avoided (Even absent) in XHTML. – Presentation rules should be defined in CSS.● All tags, attributes and even attribute values are in lowercase characters.● Some attributes of some elements are required – OTHERWISE your XHTML document is NOT valid
  5. 5. The DOCTYPES● XHTML Transitional – Compatibility with old browsers that does not support CSS.● XHTML Strict – Free from presentational elements.● XHTML Frameset – When using <frameset> & <frame>
  6. 6. XHTML Template<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Title goes here</title></head><body></body></html>
  7. 7. Where Its Going● XHTML 1.1 : Modularized XHTML● XHTML 2.0 : Still In Development – HTML Forms to be replaced by XForms – HTML frames to be replaced by XFrames – Any element can become a hyperlink – Etc..
  8. 8. Validating XHTML Documents
  9. 9. Presentation of (XML) Data for theWeb
  10. 10. XML: Separation of Data FromPresentation● XML Documents are data-centric. – Markup of data only.● XML Documents should be free from presentation/styling/display/formatting elements. – No elements included as to how other elements should be formatted – This would keep any XML portable and display-“platform” independent.
  11. 11. Presentation of XML Data usingStylesheet● A Stylesheet – A specification on how to display the data.● Cascading Stylesheets (CSS) – Added to HTML to solve rendering consistency problems – With CSS We can specify how to exactly display HTML elements. – CSS can be applied to XML documents as well.
  12. 12. CSS: Attaching to HTML● External Stylesheets – CSS rules written in separate file – Linked via <link rel=”stylesheet” href=”styles.css” type=”text/css” /> <!-- styles.css is the URL of the CSS file -->
  13. 13. CSS: Attaching to HTML● Internal Stylesheets – Style rules written inside <style> inside <head> <html> <head> <style> //style rules here </style> </head> . . .
  14. 14. CSS: Attaching to HTML● Inline Style – Style rules written inside in style attribute in presentable elements <p style=”font:Arial”> ... </p> . . .
  15. 15. CSS Syntax selector { property : value; property2 : value2 } Example: p { font-family : “sans serif” } p { text-align: centery; color : red }
  16. 16. Specifying Selectors● Element name (e.g. <p>, <a> etc... } a { text-decoration: none } //represents the <a> elements● Element Class (specified by class attribute) .reddish { color:red } div.reddish { background-color : red } Corresponds to the ff: <a class=”reddish”> <div class=”reddish”>
  17. 17. Specifying Selectors● Element ID (specified by id attribute #unique { border : 1px solid black } a#unico { display: block } Corresponds to <p id=”unique”> <a id=”unico”>
  18. 18. Specifying Selectors● Grouped Selector h1,h2,h3,h4,h5,h6,h7 { color: blue }● Heirarchial Selector p a { text-decoration: none; color red; } // applies to: <a> elems inside <p>
  19. 19. Specifying Selectors● Element with Specific Attributeinput[type=”text”] { border: 1px solid red}/* applies to <input type=”text”>elems, IE sucks on thisdunno about IE 7 though */
  20. 20. Specifying Selectors● Pseudo-classesa:link { color: #FFFF00 }a:hover { color: rgb(123,234,54) }a:visited { color: salmon }
  21. 21. CSS Properties and Their Values● Background Properties ● Dimension● Text ● Classification● Font ● Positioning● Border ● Print (CSS2 Media)● Margin ● Aural (CSS2 Media)● Padding● List
  22. 22. CSS Properties and Their Values● Consult a CSS Reference for the different property names and their possible values.
  23. 23. CSS Inheritance● Most CSS properties are inheritable from more general selectors to more specific selectors● When two properties conflict, the more specific rule is applied, otherwise the rules combine.
  24. 24. Observe:/* CSS Rules */ <!-- HTML Markup-->a{ <a href=””>Link 1</a> font-family: “sans serif”; <div> color:red <a href=””>Link 2</a> } </div>div a { color:blue; text-decoration:none;}
  25. 25. CSS Rule application:● Browser Default● External CSS● Internal CSS● InlineIn terms of selector, the rules of the most specific selector that applies to an element overwrites any less specific declarations.
  26. 26. XML + CSS = Web Page● With any XML document, we can apply CSS to display it as web page.● The selectors will be the elements of the XML documents.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×