Your SlideShare is downloading. ×
XHTML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

XHTML

1,436
views

Published on

Published in: Technology, Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,436
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
56
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • http://css.maxdesign.com.au/listamatic/
  • Transcript

    • 1. XHTML  1.0     Extensible  HyperText  Markup  Language   Jussi  Pohjolainen   Tampere  University  of  Applied  Sciences  
    • 2. What  is  XHTML?   •  XHTML™  1.0  The  Extensible  HyperText  Markup   Language  (Second  EdiKon)   –  hMp://www.w3.org/TR/xhtml1/   •  XHTML  is  a  family  of  current  and  future   document  types  and  modules  that  reproduce,   subset,  and  extend  HTML  4     •  XHTML  family  document  types  are  XML  based  
    • 3. Rules   •  XHTML  document  must  follow  the  XML  –  rules   (wellformed)   •  It  must  be  valid  against  one  of  three  DTDs   –  XHTML  Strict   •  Use  the  strict  DOCTYPE  when  you  want  really  clean  markup,  free  of   presentaKonal  cluMer.  Use  it  together  with  CSS.   –  XHTML  TransiKonal   •  Use  the  transiKonal  DOCTYPE  when  you  want  to  sKll  use  HTML's   presentaKonal  features.   –  XHTML  Frameset   •  Use  the  frameset  DOCTYPE  when  you  want  to  use  HTML  frames.     •  Root  element  must  be  html –  And  it  must  contain  xmlns  namespace  h7p://www.w3.org/ 1999/xhtml  
    • 4. XHTML  Example   <?xml version="1.0"?>! <!DOCTYPE html ! PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"! "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">! <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">! <head>! <title>Minimal XHTML 1.0 Document</title>! </head>! <body>! <p>This is a minimal <a href="http://www.w3.org/TR/ xhtml1/">XHTML 1.0</a> ! document.</p>! </body>! </html>!
    • 5. The  DTDs   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- frameset.dtd">
    • 6. Mandatory  XHTML  Elements   <?xml version="1.0"?>! <!DOCTYPE html ! PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"! "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">! <html xmlns="http://www.w3.org/1999/xhtml">! <head>! <title>Minimal XHTML 1.0 Document</title>! </head>! <body>! </body>! </html>!
    • 7. Syntax:  Elements   •  XHTML  elements  must  be  properly  nested   –  <b><i>hello</i></b>   •  XHTML  elements  must  always  be  closed   –  <br/>   •  XHTML  elements  must  be  in  lowercase   •  XHTML  documents  must  have  one  root   element   –  <html>  
    • 8. Syntax:  AMributes   •  AMribute  names  must  be  in  lower  case   –  <img  src="picture.jpg"/>   •  AMribute  values  must  be  quoted   –  <img  src="picture.jpg"/>   •  XHTML  elements  must  be  in  lowercase   •  XHTML  documents  must  have  one  root   element   –  <html>  
    • 9. head -­‐  element   •  One  mandatory  –  element:  Ktle   –  Very  important:  search  engines,  bookmarking   •  Meta-­‐informaKon     –  hMp://www.w3schools.com/tags/tag_meta.asp   •  Linking  to  other  files  (CSS)  
    • 10. head  –  element,  example   <?xml version="1.0"?>! <!DOCTYPE html ! PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"! "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">! <html xmlns="http://www.w3.org/1999/xhtml">! <head>! <title>Minimal XHTML 1.0 Document</title>! <meta name="description" content="Simple XHTML example" />! <meta name="keywords" content="XHTML" />! <meta name="author" content="Jussi Pohjolainen" />! </head>! <body>! </body>! </html>!
    • 11. Element   DescripHon   <p> Defines  paragraph   <br/> Defines  a  single  line  break   <blockquote> Defines  a  long  quotaKon   <pre> Defines  preformaMed  text   <em> Defines  emphasized  text     <strong> Defines  strong  text   <code> Defines  computer  code  text   <tt> Defines  teletype  text   <i> Defines  italic  text   <b> Defines  bold  text   <big> Defines  big  text   <small> Defines  small  text   <sub> Defines  subscripted  text   <sup> Defines  superscripted  text  
    • 12. Links   •  Linking  outside  (absolute  path)   –  <a href="http://www.tamk.fi">TAMK</a> •  Link  inside  the  site  (relaKve  path)   –  <a href="dog.html">Info about my dog</a> •  The  use  of  Ktle   –  <a href="http://www.tamk.fi" title="TAMK University of Applied Sciences">TAMK</a> •  How  to  use?  See   –  hMp://www.cs.tut.fi/~jkorpela/webjulk/1.5.html  
    • 13. Images   •  Linking  to  a  image   –  <a href="face.jpg">My Face</a> •  Adding  an  image  to  the  page   –  <img src="face.jpg" alt="Picture of me" /> •  Image  as  a  link   <a href="http://www.tamk.fi"> <img src="tamk.jpg" alt="TAMK Logo" /> </a> •  Use  PNGs,  JPEGs  or  GIFs  
    • 14. Lists   •  <ul>  –  Unordered  list   •  <ol>  –  Ordered  list   •  <dl>  –  DefiniKon  list   –  <dt>  –  Ktle   –  <dd> -­‐  descripKon  
    • 15. List  Examples   <ul> <dl> <li>Some text</li> <dt>term</dt> <li>Some text</li> <dd>definition</dd> </ul> <dt>term</dt> <ol> <dd>definition</dd> <li>Some text</li> </dl> <li>Some text</li> </ol>
    • 16. In  Browser  
    • 17. Tables   •  Table  element  is  used  to  define  a  table   <table>   <tr>     <th>Month</th>     <th>Savings</th>   </tr>   <tr>     <td>January</td>     <td>$100</td>   </tr> </table>
    • 18. Table  with  Heading   <table> <tr> <th>Name</th> <th>Telephone</th> <th>Mobile Phone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>
    • 19. Combining  Columns  and  Rows   <table> <tr> <td colspan="3">WWW-sivun osat</td> </tr> <tr> <td>Rakenne</td> <td colspan="2">Asiakaslaitteesta riippuva ulkoasu ja vuorovaikutus</td> </tr> <tr> <td>XHTML</td> <td>CSS</td> <td>JavaScript</td> </tr> </table>