Sedas fa e s XHTML a CSS

1
S?ed?as? ??f?a??? ????? µe ???s? XHTML ?a? CSS

• ??sa????

2
Internet World Wide Web

• Internet
• ?a???sµ?? d??t?? ?p?????st??
• World Wide Web (WWW)
• ?? d?µ?f???ste?? ??µµ?t? t?? Internet
• ??a s?????? ap? e?at?µµ???a ???afa ta ?p??a
  a??????? s??e???
• ?a a??e?a e??a? ??aµµ??a se ??p??a µ??f? t?? HTML

3
? ?st?se??da (web page)

• ?e?µe?? (p?? ????eta? µe d?af??et??? ???µata,
  µ??f?p???se??, ??aµµat?se????)
• ?????e? (gif, png, jpeg, svg )
• ?????µe?e? e????e?/d?ad?ast??? p???µ?sa
  (shockwave/flash ta p?? d?aded?µ??a)
• ???? (se p???? d?af??et??? format p.? mp3)
• Video (Real Video, Quicktime,mpeg, avi ?.a.)
• Applets (µ????? efa?µ????, a?apt?ss??ta?
  ???s?µ?p????ta? ???sse? ?p?? Java ?a? ActiveX)
• ???? t? ?e?µe?? ß??s?eta? st? ???L a??e??

4
?? s???st?se? t?? WWW
Web Browser
?a????a? Internet
Routers Switches
???s?p???? ?p?????st??
Servers
5
? t??p?? ?e?t?????a?
6
??? ?e?t????e? ? browser
7
HTML (HyperText Markup Language)

• ??apt?????e ap? t?? Tim Berners-Lee st? CERN
• G??ssa pe????af?? t?? pe??e??µ???? (layout) e???
  e????f??, ?a? ???sµ?? t?? s??d?se?? t?? µe ???a
  ????afa
• ??????eta? ap? t?? SGML (Standard Generalized
  Markup Language)

8
XML (Extensible Markup Language)

• ???????e ap? t?? SGML
• ?at?????? ??a t? d?µ??????a pe????af???? ???ss??
  st? Web
• ?a?ade??µata ???ss?? p?? p??????a? ap? t?? XML
• Scalable Vector Graphics (SVG),
• Synchronized Multimedia Integration Language
  (SMIL),
• Wireless Markup Language (WML).

9
XHTML
H HTML ?a?a???ft??e ?ts? ?ste ?a e??a? µ?a XML
???ssa.

• ???????e µ?a p?? d?µ?µ??? ???ssa
• ?????? µetaf??? se as??µate? s?s?e???, ?p??
  ????t? t???f??a, PDA, ??p.
• ?p??s??pt? p??sßas?µ?t?ta ap? ??e? t?? ?at?????e?
  ???st??
• S?µßat?t?ta µe efa?µ???? XML

10
CSS (Cascading Style Sheets)

• ?a???????? t?? eµf???s? µ?a? ?st?se??da?
• Se s??d?asµ? µe ???e? te???????e? t?? Web (XHTML)
  µa? ß?????e st? d?a????sµ? t?? pe??e??µ???? µ?a?
  ?st?se??da? ap? t?? t??p? pa???s?as?? t??
• 1996Cascading Style Sheets, Level 1 (CSS1)
• 1998Cascading Style Sheets, Level 2 (CSS2)
• ?? s???????? web browsers ?p?st??????? p????? ta
  CSS1 ?a? se ??p??? ßa?µ? ta CSS2

11
????? ?st????? a?ad??µ?

• 1984 - ? SGML ???eta? ISO st??ta?
• 1991 - CERN linemode browser
• 1993 - NCSA Mosaic
• 1994 - Netscape Navigator, ?d??s? W3C
• 1995 - Microsoft Internet Explorer
• 1996 - CSS1, JavaScript, DHTML
• 1997 - HTML 3.2, CSS2, HTML 4.0
• 1998 - XML
• 2000 - XHTML 1.0

12
? s?µas?a t?? p??t?p??
To World Wide Web Consortium d?aµ??f??e? ta
p??t?pa t?? te????????? t?? d?ad??t???

• ?p?st????? d?af??et???? s?st?µ?t?? (PC,
  Macintosh, Palm, Pocket PC ??p.)
• ?????? p??sßas? ap? e?d???? ?at?????e? ???st??
  (µe p??ß??µata a????, ??as??, ?.a.)
• ???e??? p??ß??µ?t?? s?µßat?t?ta? µe ??a ?a?
  pa??? p?????µµata (forward backwards
  compatibility)
• ????????µ?s? ?????? ?a? p???? ?at? t? d????e?a
  t?? a??pt????

13
??a XHTML ????af?
14
(No Transcript)
15
? ??d??a?
16
?a e??a?e?a
?e? apa?te?ta? ? a???? ??p???? ?d?a?te???
e??p??sµ?? ? ????sµ????

• ???s?p???? ?p?????st??
• ?p??? epe?e??ast?? ?e?µ???? (p.?. Notepad ??a
  Windows, SimpleText ??a Macintosh)
• Web browser p?? ?a ?p?st????e? ta p??t?pa ????L
  1.0 ?a? CSS 1 (Internet Explorer 6, Netscape 7,
  Mozilla 1, Opera 7)

17
?a e??a?e?a - ??e????se??

• Internet Explorer - www.microsoft.com/windows/ie
• Netscape Navigator - channels.netscape.com/ns/brow
  sers
• Mozilla - www.mozilla.org
• Opera - www.opera.com
• Homesite - www.macromedia.com/software/homesite
• Pagespinner - www.optima-system.com/pagespinner
• BBEdit - www.barebones.com/products/bbedit
• FrontPage - www.microsoft.com/frontpage
• Dreamweaver ?? - www.macromedia.com/software/dream
  weaver
• GoLive - www.adobe.com/products/golive

Browsers
HTML Editors
Advanced HTML Editors