Introduction to XML, XHTML and CSS

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

1 comments

Comments 1 - 1 of 1 previous next Post a comment

  • + haveaword Tanveer Iqbal 2 years ago
    Hmm thats rare information with nice slide show to understand xhtml and css nice tutorial show Pohjus
Post a comment
Embed Video
Edit your comment Cancel

6 Favorites

Introduction to XML, XHTML and CSS - Presentation Transcript

  1. Introduction to xhtml and css Jussi Pohjolainen TAMK University of Applied Sciences
  2. EXTENSIBLE MARKUP LANGUAGE
  3. Extensible Markup Language
    • XML is a specification for creating custom markup languages
    • Subset of SGML
    • XML languages: RSS, MathML, SVG, XHTML
    • W3C Recommendation
  4. XML and SGML SGML XML RSS XHTML SVG HTML
  5. XML Example
    • <?xml version=“1.0” encoding=“utf-8”?>
    • <books>
    • <book id=“A01”>
    • <title>Designing Web Usability</title>
    • <author>Jakob Nielsen</author>
    • <book>
    • </books>
  6. XML Well Formed
    • XML Declaration
    • One root-element
    • Every tag is opened and ended
    • Attributes inside “ ”
    • Case-sensitivity
  7. XML Example
    • <?xml version=“1.0” encoding=“utf-8”?>
    • <!DOCTYPE books SYSTEM “books.dtd”>
    • <books>
    • <book id=“A01”>
    • <title>Designing Web Usability</title>
    • <author>Jakob Nielsen</author>
    • <book>
    • </books>
  8. DTD Example: books.dtd
    • <!ELEMENT books (book+)>
    • <!ELEMENT book (title, author)>
    • <!ELEMENT title (#PCDATA)>
    • <!ELEMENT author (#PCDATA)>
    • <!ATTLIST book id ID #REQUIRED>
  9. XML Valid
    • XML document is valid, when it follows it’s dtd
    • Validation can be done only, if the xml document has dtd (or schema)
    • XHTML strict 1.0 dtd:
      • http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
  10. EXTENSIBLE HYPERTEXT MARKUP LANGUAGE
  11. XHTML
    • XHTML is a XML based language
    • XHTML 1.0 / 1.1:
      • Strict
      • Transitional
      • Frameset
  12. XHTML Example
    • <?xml version=&quot;1.0&quot;?>
    • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
    • &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>
    • <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;>
    • <head>
    • <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; />
    • <title>XHTML 1.0 Example</title>
    • </head>
    • <body>
    • <p>This is a example.</p>
    • </body>
    • </html>
  13. General Form
    • XHTML consists of
      • Xml-declaration
      • Document type
      • XHTML - document
        • head
        • body
  14. XHTML Basic Structure
    • Every element is written in lower case
    • If element does not contain anything, it’s empty element:
      • <br></br> <!– line break -->
      • <hr></hr> <!– horizontal line -->
      • <img src=”pic.jpg&quot; alt=”picture&quot;></img> <!-- picture -->
    • Empty elements should be written like this:
      • <br/>
      • <hr/>
      • <img src=”pic.jpg&quot; alt=”picture&quot;/>
  15. Indenting
    • Indentation is free in xml
    • It’s easier to read the document, if you use indentation
    • One indentation: 4 spaces:
    • <ul>
    • <li>Carrot</li>
    • <li>Tomato</li>
    • </ul>
  16. Commenting
    • It’s possible to add comments to xhtml – documents:
    • <!-- and here we have a list -->
  17. Document types
    • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd &quot;>
    • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &quot;>a
    • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd &quot;>
  18. Head
    • Compulsary: title
    • Meta-information
      • See: http://www.cs.tut.fi/~jkorpela/webjulk/1.6.html
    • Possible linking to stylesheets
  19. Text - elements
    • p
    • br
    • blockquote
    • pre
    • em
    • strong
    • code.
    • tt
    • i
    • b
    • big
    • small
    • sub
    • sup
  20. Lists
    • ul: unordered list
    • ol: ordered list
    • dl: definition list
    • ul and ol items are marked as li
    • In dl items are marked as dt and dd
  21. Links
    • See:
      • http://www.cs.tut.fi/~jkorpela/webjulk/1.5.html
    • Link to outside
      • <a href=&quot; http://www.tamk.fi &quot;>tamk</a>
    • Link within page
      • <a href=”dog.html&quot;>Dog</a>
  22. Images
    • Use gif, jpeg or png
    • img-element:
      • <img src=”pic.jpg&quot; alt=”alternative text&quot;/>
    • Img as link
      • <a href=”dog.html&quot;><img src=”dog.png&quot; alt=”dog&quot;/></a>
  23. Tables Title Title Title Cell Cell Cell Cell Cell Cell
  24. Tables
    • <table>
    • <tr>
    • <td>cell</td>
    • <td>cell</td>
    • </tr>
    • <tr>
    • <td>cell</td>
    • <td>cell</td>
    • </tr>
    • </table>
  25. Table: Heading
    • <table>
    • <tr>
    • <th>Name</th>
    • <th>Telephone</th>
    • <th>Telephone</th>
    • </tr>
    • <tr>
    • <td>Bill Gates</td>
    • <td>555 77 854</td>
    • <td>555 77 855</td>
    • </tr>
    • </table>
  26. Combining Rows and Cols
    • <table>
    • <tr>
    • <td colspan=&quot;3&quot;>Title</td>
    • </tr>
    • <tr>
    • <td>Title</td>
    • <td colspan=&quot;2&quot;>cell</td>
    • </tr>
    • <tr>
    • <td>cell</td>
    • <td>cell</td>
    • <td>cell</td>
    • </tr>
    • </table>
  27. CASCADING STYLE SHEETS
  28. CSS
    • CSS is a stylesheet language used to describe the presentation of a document written in markup language
    • Usually used with (x)html
    • Defining fonts, colors and layout
    • Separates document content and presentation
  29. CSS
    • Merkintäkielten (esim. xhtml) tarkoitus: kuvata dokumentin rakenne.
    • Ulkoasu luodaan erillisellä tekniikalla: CSS (Cascading Style Sheet)
    • Eri versioita
      • CSS level 1 (1996)
      • CSS level 2 (1998)
      • CSS level 3 (working draft)
  30. History
    • CSS1 spec finished 1996, it took three years before browsers supported CSS1
    • 2000 IE 5.0 for Mac was the first browser to fully support CSS1
    • => CSS Filtering
    • Still hundreds of bugs in browsers
  31. CSS support today
    • Competition
      • Mozilla Gecko engine (FireFox, Mozilla)
      • Presto Layout engine (Opera)
      • KHTML (Apple Safari, Konquer, S60 Browser)
      • Internet Explorer
    • CSS and browser compatibility:
      • http://www.quirksmode.org/css/contents.html
  32. Before CSS
    • Presentation was part of the document structure:
      • <h2 align=&quot;center&quot;>
      • <font color=&quot;red&quot; size=&quot;+4&quot; face=&quot;Times New Roman, serif&quot;>
      • <i>Usage of CSS</i>
      • </font>
      • </h2>
    • Many problems…
  33. Using CSS
    • Structure is clear:
      • <h2>Usage of CSS</h2>
    • Presentation is clear:
      • h2 {
      • text-align: center;
      • color: red;
      • font: italic large &quot;Times New Roman&quot;, serif;
      • }
  34. CSS Possibilities
    • Colors, fonts, layout, sizes, borders..
    • Possible to do different css – files for printing, mobile devices, desktop computers.
    • See
      • http://www.csszengarden.com /
  35. CSS Linking
    • <html>
    • <head>
    • <title>Page</title>
    • <link rel=&quot;stylesheet&quot;
    • type=&quot;text/css&quot;
    • media=&quot;screen&quot;
    • href=&quot;screen.css&quot; />
    • </head>
    • <body>
    • <h1>Title</h1>
    • <p>paragraph</p>
    • </body>
    • </html>
  36. CSS Linking
    • <html>
    • <head>
    • <title>Sivu</title>
    • <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;screen.css&quot; />
    • <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;handheld&quot; href=&quot;mobile.css&quot; />
    • <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;print&quot; href=&quot;print.css&quot; />
    • </head>
    • <body>
    • <h1>Title</h1>
    • <p>paragraph</p>
    • </body>
    • </html>
  37. CSS General Form
    • CSS general form
      • selector declaration
    • Example:
      • h1 { color: blue; }
    • h1 = selector
    • color: blue; = declaration
  38. Selectors
    • Element (h1)
    • Class (.important)
    • Class (h1.important)
    • ID (#important)
    • Contextual (h1 p)
    • Pseudo (a:link)
  39. Element
    • XHTML:
      • <h1>Otsikko</h1>
    • Css:
      • h1 {
      • color: RGB(255,0,0);
      • }
  40. Class
    • XHTML:
      • <h1 class=&quot;tarkea&quot;>Otsikko</h1>
      • <p>Tässä tekstiä ja tämä <span class=&quot;tarkea&quot;>erityisen tärkeää tekstiä</span></p>
      • <p class=&quot;tarkea&quot;>Ja tämä vasta tärkeää onkin</p>
    • Css:
      • .tarkea {
      • color: RGB(255,0,0);
      • }
  41. Class
    • Css:
      • h1.tarkea {
      • color: RGB(255,0,0);
      • }
  42. ID
    • XHTML:
      • <h1 id=&quot;paaotsikko&quot;>Otsikko</h1>
    • Css:
      • #paaotsikko {
      • color: RGB(255,0,0);
      • }
  43. Contextual
    • XHTML:
      • <ul>
      • <li>Porkkana</li>
      • </ul>
    • Css:
      • ul li{
      • color: RGB(255,0,0);
      • }
    • This is different!
    • h1, p{
      • color: RGB(255,0,0);
      • }
  44. Pseudo
    • Example:
      • <a href=&quot; http://www.tamk.fi /&quot;>TAMK</a>
      • a:link { color: red; }
      • a:visited { color: blue; }
      • a:active { color: lime; }
      • a:hover { color: green; }
  45. Font-family
    • sans-serif, example: Helvetica
    • serif, example: Times
    • cursive, example: Zapf-Chancery
    • fantasy, example: Western
    • monospace, example: Courier
    • Example:
      • font-family: verdana, arial, sans-serif
  46. font-style, font-weight
    • Font-style
      • normal (default), italic, oblique
      • example:
        • font-style: italic;
    • Font-weight:
      • normal, bold, bolder, lighter, 100, 200 ... 900
      • normal = 400
      • bold = 700
      • bolder and lighter
  47. font-size
    • It’s possible to define the font size absolutely, relatively, using unit of length or by percentage
      • font-size: x-small; /* absolute */
      • font-size: larger; /* relative */
      • font-size: 12pt; /* unit of length */
      • font-size: 80%; /* percentage */
  48. Colors
      • color: red;
      • color: rgb(255,0,0);
      • color: #FF0000;
      • color: #F00;
  49. Background
    • Background color:
      • background-color: #C0C0C0;
    • Background image:
      • background-image: url(&quot;marble.gif&quot;);
      • Repeat
        • repeat (oletus): repeat both directions
        • repeat-x: repeat horizontally
        • repeat-y: repeat vertically
        • no-repeat: no repeat
      • background-attachment: fixed | scroll
        • Is the image still or does it move when scrolling
  50. Background Image Position
    • background-position: right top; /* right upper-corner */
    • background-position: 100% 0%; /* right upper-corner */
    • background-position: 100%; /* right upper-corner */
    • background-position: center bottom;/* center bottom */
    • background-position: 50% 100%; /* center bottom */
    • background-position: 100%; /* right top */
    • background-position: 50% 10px; /* center 10 pixels from top */
  51. Text Features
    • word-spacing
    • letter-spacing
    • text-decoration
      • underline
      • overline
      • line-through
      • blink
  52. Text Features
    • vertical-align
      • baseline, middle, sub, super, text-top, text-bottom, top, bottom, prosenttiluku
    • text-transform
      • capitalize, uppercase, lowercase
    • text-align
      • left, right, center, justify
    • text-indent
    • line-height

+ Tampere University of Applied SciencesTampere University of Applied Sciences, 2 years ago

custom

1077 views, 6 favs, 0 embeds more stats

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 1077
    • 1077 on SlideShare
    • 0 from embeds
  • Comments 1
  • Favorites 6
  • Downloads 0
Most viewed embeds

more

All embeds

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories