XHTML & CSS               & JavaScript
Einführung




 © 2009 by Noël Bossart
welcome.
« If you don't crack the shell,
   you can't eat the nut.»
                             Persisches Sprichwort


 ...
about
Kursverlauf




16. 12. 09   6. 1. 10   13. 1. 10   20. 1. 10   27. 1. 10    10. 2. 10




                        Test   ...
Kursverlauf
HTML




16. 12. 09   6. 1. 10   13. 1. 10   20. 1. 10   27. 1. 10    10. 2. 10




                        Te...
Kursverlauf
HTML

             CSS



16. 12. 09    6. 1. 10   13. 1. 10   20. 1. 10   27. 1. 10    10. 2. 10




        ...
Ablauf heute
        Allgemeine Infos, Regel...

        Geschichte & Grundlagen
Pause


             XHTML Syntax

      ...
Regeln



© 2009 by Noël Bossart
Regeln
Du vs. Sie?
Notebooks sind im Plenum zugeklappt
Mobiles sind ausnahmslos auf lautlos gestellt
Der Unterricht beginn...
Unterlagen
Unterlagen
             382 7244749
   IS BN-10:
Unterlagen                    ISBN
                                  -10:
                                         3836
  ...
?
Was kann ich bereits
Welche Erwartungen habe ich an den Kurs
Wie werde ich das Gelernte anwenden können
Evolution
 1946: Erste Visionen eines Datennetzes

 1956: Realisierung erster Netze (Sputnik)

 1974: Erstes Packet-Switch...
Los geht’s


 © 2009 by Noël Bossart
Tools
Installation Firebug & Developer Toolbar
  delicious.com/noelboss/zbw+tools


Beispiele
  delicious.com/noelboss/zbw...
3 Technologien

                       Was kann JS?
   Was ist HTML?



               Was macht
                 CSS?



...
3 Aufgaben

                         Funktion!
     Inhalt.




               Design*
3 Aufgaben

                                 Funktion!
             Inhalt.




the stuff.             Design*
the bang!
3 Aufgaben

                                 Funktion!
             Inhalt.




the stuff.             Design*
the bang!
3 Aufgaben

                                 Funktion!
             Inhalt.




the stuff.             Design*

...
3 Charakteristiken

                         alert(‘welcome’);
     <html />


                #css {
                  co...
Browser (Firefox, Safari...) - Client



                 Server
XHTML - Inhalt


        Browser (Firefox, Safari...) - Client



                         Server
CSS - Design


XHTML - Inhalt


        Browser (Firefox, Safari...) - Client



                         Server
CSS - Design




                                                JS - Funktion
XHTML - Inhalt


        Browser (Firefox, ...
CSS - Design




                                                      JS - Funktion
XHTML - Inhalt


        Browser (Fir...
Inhalt & Design trennen
Trennung von Inhalt und Design ist wichtig weil es...
  den Quellcode kleiner macht
  den Quellcod...
Pause.
XHTML?
whaaat?




 © 2009 by Noël Bossart   Little Boxes Kapitel 2.1-2.2
XHTML?
Das HT im XHTML steht für Hyper Text. Es ist also Text
mit sogenannten Links, also Verbindungen zu anderen
Dokument...
XHTML!
 Ist Textbasiert und somit offen zugänglich
 Ermöglicht Verknüpfungen mit anderen Seiten &
 Medien
XHTML?
M steht für Markup. Das wird mit auszeichnen /
markieren übersetzt. Man versieht dabei den Inhalt
eines Dokuments m...
XHTML?
M steht für Markup. Das wird mit auszeichnen /
markieren übersetzt. Man versieht dabei den Inhalt
eines Dokuments m...
XHTML?
M steht für Markup. Das wird mit auszeichnen /
markieren übersetzt. Man versieht dabei den Inhalt
eines Dokuments m...
XHTML!
 HTML besteht aus einzelnen Elementen,
 sogenannten Tags
 Durch die Tags wird dem (Hyper)Text eine Struktur
 und ei...
XHTML?
Das L steht für Language, also Sprache. Wie jede
andere Sprach auch, folgt XHTML genauen Regeln. Es
gibt im wesentl...
XHTML!
 HTML folgt ganz bestimmten Regeln
 Es gibt mehrere verschiedene Versionen der
 Sprache. Die neuste Version ist HTM...
XHTML?
Nun zum misteriösen X. Es steht für XML was
wiederum Extensible Markup Language heisst, also
Erweiterbare Auszeichn...
XHTML!
 XML ist erweiterbar
 Der Doctype definiert, welche Tags für ein XML
 Dokument gültig sind
 Da XML keine definierten ...
Was ist XHTML nicht?
 XHTML ist keine Programmiersprache. Es wird
 nicht programmiert sonder geschrieben.
 XHTML ist keine...
Doctype
Die Doctype Definition definiert genau, welche Elemente in dem
betroffenen Dokument wo, und mit welchen Eigenschafte...
Doctype
Die 4 gebräuchlichsten Doctypes sind:
   Transitional: Transit... Eine Übergangsversion zwischen
altem HTML und de...
Doctype
Und so sehen sie aus:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/T...
Doctype
Und wo ist der versprochene Vierte?
Doctype
Und wo ist der versprochene Vierte?



Neu (X)HTML 5:

<!DOCTYPE html>
DTD
Die URL am Ende der Doctype-Definition zeigt auf eine Seite, welche das
Regelwerk der Sprache enthält. Man nennt dieses...
σύνταξις
σύνzusammen ταξιςOrdnung




       Little Boxes Kapitel 2.6
XHTML Syntax
Wir haben bereits gesehen, dass wir mit XHTML im
Prinzip einfach einen Text auszeichnen. Also mit
sogenannten...
Titel Anfang
                                   Titel Ende

 XHTML Syntax
 Wir haben bereits gesehen, dass wir mit XHTML i...
Titel Anfang
                                     Titel Ende

   XHTML Syntax
   Wir haben bereits gesehen, dass wir mit X...
Titel Anfang
                                     Titel Ende

   XHTML Syntax
   Wir haben bereits gesehen, dass wir mit X...
XML:

<titel>XHTML Syntax</titel>
<paragraf>Wir haben bereits gesehen, dass wir mit
XHTML im Prinzip einfach einen Text au...
Doctype: XHTML 1.0:

<h1>XHTML Syntax</h1>
<p>
  Wir haben bereits gesehen, dass wir mit XHTML im
  Prinzip einfach einen ...
Tags
Theorie:

<tag>Inhalt</tag>

Praxis:
<a>Eine E-Mail schreiben</a>

Jeder Tag hat einen Anfang und ein Ende. Er Umschl...
Tags
     Anfang
Theorie:

<tag>Inhalt</tag>

Praxis:
<a>Eine E-Mail schreiben</a>

Jeder Tag hat einen Anfang und ein End...
Tags
     Anfang
Theorie:

<tag>Inhalt</tag>
                           Ende
Praxis:
<a>Eine E-Mail schreiben</a>

Jeder T...
Tags
                                        Huhn

     Anfang
Theorie:

<tag>Inhalt</tag>
                           Ende...
Attribute
Theorie:

<tag attribut>Inhalt</tag>

Praxis:
<a href>Eine E-Mail schreiben</a>

Attribute geben den Tags gewiss...
Attribute                       Huhn: Farbe



Theorie:

<tag attribut>Inhalt</tag>

Praxis:
<a href>Eine E-Mail schreiben...
Attribut-Wert
Theorie:

<tag attribut=”Wert”>Inhalt</tag>

Praxis:
<a href=”mailto:noel.zbw@me.com”>Eine E-Mail schreiben<...
Attribut-Wert
                        Huhn: Farbe: pink
Theorie:

<tag attribut=”Wert”>Inhalt</tag>

Praxis:
<a href=”mail...
XHTML Syntax
Theorie:

<tag attribut=”Wert”>Inhalt</tag>

Praxis:
<a href=”mailto:noel.zbw@me.com”>Eine E-Mail schreiben</...
XHTML Syntax
                                       Susi
Theorie:

<tag attribut=”Wert”>Inhalt</tag>

Praxis:
<a href=”mai...
Verbotene Zeichen
Wie immer, es gibt ein paar Dinge, die verboten sind:
Folgende Zeichen sind im Inhalt verboten und müsse...
XHTML Syntax
Neben Tags welche einen Inhalt umschliessen, gibt es auch
welche, die keinen Inhalt haben. Es sind leere Tags...
XHTML Syntax
Neben Tags welche einen Inhalt umschliessen, gibt es auch
welche, die keinen Inhalt haben. Es sind leere Tags...
XHTML Syntax
Neben Tags welche einen Inhalt umschliessen, gibt es auch
welche, die keinen Inhalt haben. Es sind leere Tags...
XHTML Syntax
Ein solcher leerer Tag kann selbstverständlich auch eines oder
mehrere Attribute enthalten:
Theorie:

<tag at...
XHTML Syntax
Ein solcher leerer Tag kann selbstverständlich auch eines oder
mehrere Attribute enthalten:
Theorie:

<tag at...
XHTML Syntax
Ein solcher leerer Tag kann selbstverständlich auch eines oder
mehrere Attribute enthalten:
Theorie:

<tag at...
Alles hat ein Ende...
Alles was ein Anfang hat, hat ein Ende. Das ist bei
HTML nicht anders – wenn ein Titel-Tag beginnt, ...
Verschachtelung
First in, last out.
XHTML Elemente können verschachtelt werden. So kann ein
Abschnitt beispielsweise einen...
Verschachtelung
First in, last out.
XHTML Elemente können verschachtelt werden. So kann ein
Abschnitt beispielsweise einen...
Verschachtelung
First in, last out.
XHTML Elemente können verschachtelt werden. So kann ein
Abschnitt beispielsweise einen...
Verschachtelung
First in, last out.
XHTML Elemente können verschachtelt werden. So kann ein
Abschnitt beispielsweise einen...
Verschachtelung
First in, last out.
XHTML Elemente können verschachtelt werden. So kann ein
Abschnitt beispielsweise einen...
Einrückung
Damit verschachtelte Elemente nicht unübersichtlich
werden, werden die eingeschlossenen Elemente auf
einer neue...
XHTML Syntax Regeln
Tags und Attribute wird immer klein geschrieben

Tags müssen immer geschlossen werden />

Tags müssen ...
XHTML Syntax
   Fehler im Code kann zu
   falscher Darstellung führen
   und behinderten Menschen
   sowie Maschinen (goog...
hello
hello world.
Grundsätzlicher Aufbau:

<html />

Das <html> Tag umschliesst das gesamte Dokument
(ausser der Doctype Definit...
hello world.
Grundsätzlicher Aufbau:

<html />
   <head />
   Das Head Element enthält grundlegende
   Informationen zum D...
hello world.
Grundsätzlicher Aufbau:

<html />
   <head />


   <body />
   Der Body beinhaltet die eigentliche Seite mit ...
hello world.
Los geht’s, wir erstellt mit dem heute angeeigneten Wissen eine Webseite
mit folgenden Kriterien:

  Liste de...
home
work
homework
Ausbauen der Hello World gem. Vorgaben
Little Boxes Kapitel 4 bis 4.3
Syntaxfehler suchen Aufgabe auf Übungsblatt...
Ressourcen public.me.com/noelboss

            Links delicious.com/noelboss+zbw

        Link Feed feeds.delicious.com/rss...
Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10
Nächste SlideShare
Wird geladen in …5
×

Einführung XHTML CSS JS // IT 07-10

1.410 Aufrufe

Veröffentlicht am

IT 07-10 - Präsentation vom 16.12.2009

Einführung in HTML, CSS und JavaScript. XHTML Syntax

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.410
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
196
Aktionen
Geteilt
0
Downloads
27
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • What i love: standards, ajax, usability, mac
    What I hate: propriet&amp;#xE4;re technologien, IE, tabellen layouts
  • Infos zum Test: 90 Minuten, 15 Aufgaben unterteilt in XHTML, CSS, JavaScript und alles zusammen, 50 Punkte.
  • from www.wordle.net
    15minuten Mind-Map zum Thema Internet. Was f&amp;#xE4;llt Dir dazu ein, was ist dir wichtig.
    &gt; Welche Begriffe fallen Dir zus&amp;#xE4;tzlich ein, wenn du an das Wort &amp;#x201C;Internet&amp;#x201D; denkst?
    &amp;#x2022; Security
    &amp;#x2022; Semantics
    &amp;#x2022; Performance
    &amp;#x2022; Accessibility
    &amp;#x2022; Usability
    &amp;#x2022; Localization
    &amp;#x2022; Standards
  • Modernes Webdesign Seite 26-28

    TCP/IP: 4 Milliarden IP-Adressen. CA 2012 keine IP&amp;#x2019;s mehr. Entwicklung IPV6 seit 1995: &amp;#x25AA;Vergr&amp;#xF6;&amp;#xDF;erung des Adressraums von 232 (=4.294.967.296 &amp;#x2248;4,3&amp;#xA0;Milliarden) Adressen bei IPv4 auf 2128 (=340.282.366.920.938.463.463.374.607.431.768.211.456 &amp;#x2248;340&amp;#xA0;Sextillionen) Adressen bei IPv6
    &amp;#x25AA;automatische Konfiguration von IPv6-Adressen (stateless), DHCP (stateful) f&amp;#xFC;r IPv6 damit in der Regel &amp;#xFC;berfl&amp;#xFC;ssig &amp;#x2013; siehe unten
    &amp;#x25AA;Mobile IP und vereinfachte Umnummerierung (&amp;#x201E;Renumbering&amp;#x201C;) &amp;#x2013; siehe unten
    &amp;#x25AA;Netztechniken wie IPSec, Quality of Service und Multicast &amp;#x201E;serienm&amp;#xE4;&amp;#xDF;ig&amp;#x201C;
    &amp;#x25AA;Vereinfachung und Verbesserung des Protokollrahmens (Kopfdaten). Dies ist insbesondere wichtig f&amp;#xFC;r Router.
  • Source: YouTube
  • me.com demo
    Welche Unterschiede stellst Du fest zwischen neuen und alten Seiten? Was machen die neuen Seiten aus?
  • Modernes Webdesign Seite 32-33

    10 min
    &gt; Versucht in 2er Gruppen heraus zu finden, die folgenden Begriffe bedeuten und welche Funktion diese Technologie sie hat.
    Danach stellen einzelne das herausgefundene vor, erg&amp;#xE4;nzt durch die Klasse.
  • Was ist charakteristisch f&amp;#xFC;r HTML, CSS und JS?
  • Modernes Webdesign - Lesen Buch Seite 32-33
  • Modernes Webdesign - Lesen Buch Seite 32-33
  • Modernes Webdesign - Lesen Buch Seite 32-33
  • Modernes Webdesign - Lesen Buch Seite 32-33
  • Modernes Webdesign - Lesen Buch Seite 32-33
  • Modernes Webdesign - Lesen Buch Seite 32-33
  • Modernes Webdesign - Lesen Buch Seite 32-33
  • Modernes Webdesign - Lesen Buch Seite 32-33
  • Modernes Webdesign Seite 188+
  • Littleboxes Seite 38-39
  • Modernes Webdesign Seite 188+
  • Little Boxes Seite 43,
    Modernes Webdesign Seite 189
  • Modernes Webdesign Seite 21
  • Modernes Webdesign Seite 188
  • Little Boxes Seite 46 unten und 47
  • Little Boxes Seite 57
  • Little Boxes Seite 57
  • Little Boxes Seite 57
  • Little Boxes Seite 57
  • Fehler im Code finden (Arbeitsblatt). Ausserdem, was kann man noch besser machen?- Charset- XML Deklaration- CSS einbinden
  • Wichtige Tags: Modernes Webdesign Seite 194-208
  • Modernes Webdesign Seite 213+
  • little boxes Seite 97
  • Seite Modernes Webdesign Kapitel 8.1 &amp; 8.3
  • Modernes Webdesign Kapitel 8
  • little boxes Seite 115 - 118
  • Little Boxes Kapitel 5.5
    Modernes Webdesign Kapitel 8.2
  • Abk&amp;#xFC;rzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    Little Boxes Kapitel 10
    Modernes Webdesign Kapitel 8.3 und Seite 29-30
  • Abk&amp;#xFC;rzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    Little Boxes Kapitel 10
    Modernes Webdesign Kapitel 8.3 und Seite 29-30
  • Abk&amp;#xFC;rzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    Little Boxes Kapitel 10
    Modernes Webdesign Kapitel 8.3 und Seite 29-30
  • Abk&amp;#xFC;rzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    Little Boxes Kapitel 10
    Modernes Webdesign Kapitel 8.3 und Seite 29-30
  • Abk&amp;#xFC;rzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    Modernes Webdesign Kapitel 8.3
  • &amp;#xDC;bungsblatt
    Little Boxes Seiten 118-120 + 202
  • Abk&amp;#xFC;rzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    little boxes Seite 197 - 206
    Modernes Webdesign Kapitel 8.3
  • Abk&amp;#xFC;rzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    little boxes Seite 197 - 206
  • Abk&amp;#xFC;rzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    little boxes Seite 197 - 206
  • Abk&amp;#xFC;rzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    little boxes Seite 197 - 206
  • Fragen, Verbesserungsvorschl&amp;#xE4;ge, Kritik, Lob?
  • Lies Seite 43 bis 49 als Vertiefung (Little Boxes)
  • Einführung XHTML CSS JS // IT 07-10

    1. 1. XHTML & CSS & JavaScript Einführung © 2009 by Noël Bossart
    2. 2. welcome. « If you don't crack the shell, you can't eat the nut.» Persisches Sprichwort © 2009 by Noël Bossart
    3. 3. about
    4. 4. Kursverlauf 16. 12. 09 6. 1. 10 13. 1. 10 20. 1. 10 27. 1. 10 10. 2. 10 Test Test
    5. 5. Kursverlauf HTML 16. 12. 09 6. 1. 10 13. 1. 10 20. 1. 10 27. 1. 10 10. 2. 10 Test Test
    6. 6. Kursverlauf HTML CSS 16. 12. 09 6. 1. 10 13. 1. 10 20. 1. 10 27. 1. 10 10. 2. 10 Test Test
    7. 7. Ablauf heute Allgemeine Infos, Regel... Geschichte & Grundlagen Pause XHTML Syntax evt. Hello World
    8. 8. Regeln © 2009 by Noël Bossart
    9. 9. Regeln Du vs. Sie? Notebooks sind im Plenum zugeklappt Mobiles sind ausnahmslos auf lautlos gestellt Der Unterricht beginnt pünktlich Gewisse Texte, Filme etc. können in Englisch sein
    10. 10. Unterlagen
    11. 11. Unterlagen 382 7244749 IS BN-10:
    12. 12. Unterlagen ISBN -10: 3836 21109 2 3 82 7244749 IS BN-10:
    13. 13. ? Was kann ich bereits Welche Erwartungen habe ich an den Kurs Wie werde ich das Gelernte anwenden können
    14. 14. Evolution 1946: Erste Visionen eines Datennetzes 1956: Realisierung erster Netze (Sputnik) 1974: Erstes Packet-Switch Netz: UK, US, Canada und Australia 1983: ARPNET stellt auf TCP/IP um 6. August 1991 www durch Tim Berners-Lee am CERN Wachstum um mehr als 100% pro Jahr durch offene Standards Little Boxes Seiten 30-33
    15. 15. Los geht’s © 2009 by Noël Bossart
    16. 16. Tools Installation Firebug & Developer Toolbar delicious.com/noelboss/zbw+tools Beispiele delicious.com/noelboss/zbw+old delicious.com/noelboss/zbw+modern
    17. 17. 3 Technologien Was kann JS? Was ist HTML? Was macht CSS? Little Boxes Seite 30
    18. 18. 3 Aufgaben Funktion! Inhalt. Design*
    19. 19. 3 Aufgaben Funktion! Inhalt. the stuff. Design*
    20. 20. the bang! 3 Aufgaben Funktion! Inhalt. the stuff. Design*
    21. 21. the bang! 3 Aufgaben Funktion! Inhalt. the stuff. Design* the bling*
    22. 22. 3 Charakteristiken alert(‘welcome’); <html /> #css { color: #000; }
    23. 23. Browser (Firefox, Safari...) - Client Server
    24. 24. XHTML - Inhalt Browser (Firefox, Safari...) - Client Server
    25. 25. CSS - Design XHTML - Inhalt Browser (Firefox, Safari...) - Client Server
    26. 26. CSS - Design JS - Funktion XHTML - Inhalt Browser (Firefox, Safari...) - Client Server
    27. 27. CSS - Design JS - Funktion XHTML - Inhalt Browser (Firefox, Safari...) - Client http:// Hyper Text Transfer Protocol Server
    28. 28. Inhalt & Design trennen Trennung von Inhalt und Design ist wichtig weil es... den Quellcode kleiner macht den Quellcode übersichtlicher macht die Seite wartbarer macht die Seite zugänglicher macht Inhalt. Design! die Seite schneller macht Little Boxes Seite 33
    29. 29. Pause.
    30. 30. XHTML? whaaat? © 2009 by Noël Bossart Little Boxes Kapitel 2.1-2.2
    31. 31. XHTML? Das HT im XHTML steht für Hyper Text. Es ist also Text mit sogenannten Links, also Verbindungen zu anderen Dokumenten, zum Beispiel auch des XHTML Typs, oder auch eines andern Typs wie etwa Bilder, Videos, MP3, RSS-Feeds... HTML ist wie ein Gen, der Träger aller Informationen im Internet. Darin eingebettet oder dadurch verlinkt können andere Code-Formen sein. Das HTML einer Seite liegt offen und kann von jedem studiert werden.
    32. 32. XHTML! Ist Textbasiert und somit offen zugänglich Ermöglicht Verknüpfungen mit anderen Seiten & Medien
    33. 33. XHTML? M steht für Markup. Das wird mit auszeichnen / markieren übersetzt. Man versieht dabei den Inhalt eines Dokuments mit Ettiketten / Kleber welche beschreiben, was der Inhalt für eine semantische Bedeutung hat. Gewisse Individuen tagen ihre Namen mit Spraydosen an Wände. Wir tagen Inhalte. Daher nennen sich diese Ettiketten im XHTML Tags.
    34. 34. XHTML? M steht für Markup. Das wird mit auszeichnen / markieren übersetzt. Man versieht dabei den Inhalt eines Dokuments mit Ettiketten / Kleber welche beschreiben, was der Inhalt für eine semantische Bedeutung hat. Gewisse Individuen tagen ihre Namen mit Spraydosen an Wände. Wir tagen Inhalte. Daher nennen sich diese Ettiketten im XHTML Tags.
    35. 35. XHTML? M steht für Markup. Das wird mit auszeichnen / markieren übersetzt. Man versieht dabei den Inhalt eines Dokuments mit Ettiketten / Kleber welche beschreiben, was der Inhalt für eine semantische Bedeutung hat. Gewisse Individuen tagen ihre Namen mit Spraydosen an Wände. Wir tagen Inhalte. Daher nennen sich diese Ettiketten im XHTML Tags.
    36. 36. XHTML! HTML besteht aus einzelnen Elementen, sogenannten Tags Durch die Tags wird dem (Hyper)Text eine Struktur und eine Bedeutung gegeben
    37. 37. XHTML? Das L steht für Language, also Sprache. Wie jede andere Sprach auch, folgt XHTML genauen Regeln. Es gibt im wesentlichen 3 moderne Sprachversionen, sogenannte Doctypes. Mit der Doctypes-Definition wird dem Browser mitgeteilt, welchen Sprachregeln das Dokument folgt. Diese Regeln definieren, wie die Tags geschrieben werden müssen, welche Tags wo erlaubt sind, und welche speziellen Eigenschaften (Attributte) Tags haben dürfen.
    38. 38. XHTML! HTML folgt ganz bestimmten Regeln Es gibt mehrere verschiedene Versionen der Sprache. Die neuste Version ist HTML 5 HTML ist keine Programmiersprache sondern eine Auszeichnungssprache
    39. 39. XHTML? Nun zum misteriösen X. Es steht für XML was wiederum Extensible Markup Language heisst, also Erweiterbare Auszeichnungs-Sprache. XHTML folgt den (strengeren) Regeln von XML. Dadurch ist es konformer als HTML und lässt sich ausserdem Zukünftig erweitern sowie von beliebigen XML Interpretern lesen. Heute basieren viele Code-Standards auf XML (z.B: RSS-Feeds, Office-Dokumente, Einstellungen beim Mac...) wodurch die Programme welche XML verarbeiten, theoretisch auch XHTML auslesen können.
    40. 40. XHTML! XML ist erweiterbar Der Doctype definiert, welche Tags für ein XML Dokument gültig sind Da XML keine definierten Tags hat, sondern nur über bestimmte Regeln verfügt, wie solche Tags aufgebaut sein müssen, ist es extrem flexiebel Da XHTML den XML Regeln folgt, kann es von jedem Interpreter der XML versteh gelesen werden Little Boxes Kapitel 2.3
    41. 41. Was ist XHTML nicht? XHTML ist keine Programmiersprache. Es wird nicht programmiert sonder geschrieben. XHTML ist keine Seitenbeschreibungssrpache (PDF). Es strukturiert lediglich den Inhalt. XHTML dient nicht zur Gestaltung einer Webseite. Es beschreibt nur, welcher Art, und was der Inhalt einer Seite ist.
    42. 42. Doctype Die Doctype Definition definiert genau, welche Elemente in dem betroffenen Dokument wo, und mit welchen Eigenschaften, vorkommen dürfen. Sie ist so wichtig, dass sie zuoberst in jedem XHTML Dokument steht. Damit weiss der Browser, wie er das Dokument interpretieren muss. So lässt sich das Dokument nach einem festen Regelsatz auf Fehler prüfen. Erkennt der Browser die Version nicht, fällt er in einen speziellen, fehlerverzeihenden (und dadurch ungenauen) Modus, welcher beim Internet Expolorer Quircks-Mode genannt wird und bei den anderen Browsern keinen Namen hat. Dieser Zustand ist unbedingt zu vermeiden! Modernes Webdesign Kapitel 72 unten
    43. 43. Doctype Die 4 gebräuchlichsten Doctypes sind: Transitional: Transit... Eine Übergangsversion zwischen altem HTML und der neuren, strengen Version Frameset: Eine spezielle Version, welche die Verwendung von Frames zulässt (Webseite in der Webseite), sonst jedoch identisch zu Transitional ist. Strict: Die neuste, strenge Version von XHTML welche eine strikte Trennung von Inhalt und Design erzwingt. Damit sind gewisse Tags und Attribute nicht mehr erlaubt. Wir verwenden den Strict-Typ. Little Boxes Seite 43
    44. 44. Doctype Und so sehen sie aus: <!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"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    45. 45. Doctype Und wo ist der versprochene Vierte?
    46. 46. Doctype Und wo ist der versprochene Vierte? Neu (X)HTML 5: <!DOCTYPE html>
    47. 47. DTD Die URL am Ende der Doctype-Definition zeigt auf eine Seite, welche das Regelwerk der Sprache enthält. Man nennt dieses Regelwerk DTD (DocTypeDefinition). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML 5 besitzt kein DTD. <!DOCTYPE html> Little Boxes Seite 43
    48. 48. σύνταξις σύνzusammen ταξιςOrdnung Little Boxes Kapitel 2.6
    49. 49. XHTML Syntax Wir haben bereits gesehen, dass wir mit XHTML im Prinzip einfach einen Text auszeichnen. Also mit sogenannten Tags (auch HTML Elemete) gewisse Breiche in einem Text markieren und dem System mitteilen, welcher Art der Bereich ist.
    50. 50. Titel Anfang Titel Ende XHTML Syntax Wir haben bereits gesehen, dass wir mit XHTML im Prinzip einfach einen Text auszeichnen. Also mit sogenannten Tags (auch HTML Elemete) gewisse Breiche in einem Text markieren und dem System mitteilen, welcher Art der Bereich ist.
    51. 51. Titel Anfang Titel Ende XHTML Syntax Wir haben bereits gesehen, dass wir mit XHTML im Prinzip einfach einen Text auszeichnen. Also mit sogenannten Tags (auch HTML Elemete) gewisse Breiche in einem Text markieren und dem System Paragraf Anfang mitteilen, welcher Art der Bereich ist. Paragraf Ende
    52. 52. Titel Anfang Titel Ende XHTML Syntax Wir haben bereits gesehen, dass wir mit XHTML im Wichtig Anfang Prinzip einfach einen Text Wichtig Ende Also mit auszeichnen. sogenannten Tags (auch HTML Elemete) gewisse Breiche in einem Text markieren und dem System Paragraf Anfang mitteilen, welcher Art der Bereich ist. Paragraf Ende
    53. 53. XML: <titel>XHTML Syntax</titel> <paragraf>Wir haben bereits gesehen, dass wir mit XHTML im Prinzip einfach einen Text auszeichnen. Also mit sogenannten <wichtig>Tags</wichtig> gewisse Bereiche in einem Text markieren und dem System mitteilen, welcher Art der Bereich ist.</paragraf>
    54. 54. Doctype: XHTML 1.0: <h1>XHTML Syntax</h1> <p> Wir haben bereits gesehen, dass wir mit XHTML im Prinzip einfach einen Text auszeichnen. Also mit sogenannten <strong>Tags</strong> gewisse Breiche in einem Text markieren und dem System mitteilen, welcher Art der Bereich ist. </p>
    55. 55. Tags Theorie: <tag>Inhalt</tag> Praxis: <a>Eine E-Mail schreiben</a> Jeder Tag hat einen Anfang und ein Ende. Er Umschliesst einen gewissen Bereich und definiert damit, was dieser Bereich ist. Zum Beispiel ein Bild, ein Link oder ein Titel... Die Tags einer Webseite werden durch den Browser nicht angezeigt, sie sind also unsichtbar. Nur deren Inhalt wird dargestellt.
    56. 56. Tags Anfang Theorie: <tag>Inhalt</tag> Praxis: <a>Eine E-Mail schreiben</a> Jeder Tag hat einen Anfang und ein Ende. Er Umschliesst einen gewissen Bereich und definiert damit, was dieser Bereich ist. Zum Beispiel ein Bild, ein Link oder ein Titel... Die Tags einer Webseite werden durch den Browser nicht angezeigt, sie sind also unsichtbar. Nur deren Inhalt wird dargestellt.
    57. 57. Tags Anfang Theorie: <tag>Inhalt</tag> Ende Praxis: <a>Eine E-Mail schreiben</a> Jeder Tag hat einen Anfang und ein Ende. Er Umschliesst einen gewissen Bereich und definiert damit, was dieser Bereich ist. Zum Beispiel ein Bild, ein Link oder ein Titel... Die Tags einer Webseite werden durch den Browser nicht angezeigt, sie sind also unsichtbar. Nur deren Inhalt wird dargestellt.
    58. 58. Tags Huhn Anfang Theorie: <tag>Inhalt</tag> Ende Praxis: <a>Eine E-Mail schreiben</a> Jeder Tag hat einen Anfang und ein Ende. Er Umschliesst einen gewissen Bereich und definiert damit, was dieser Bereich ist. Zum Beispiel ein Bild, ein Link oder ein Titel... Die Tags einer Webseite werden durch den Browser nicht angezeigt, sie sind also unsichtbar. Nur deren Inhalt wird dargestellt.
    59. 59. Attribute Theorie: <tag attribut>Inhalt</tag> Praxis: <a href>Eine E-Mail schreiben</a> Attribute geben den Tags gewisse zusätzliche Eigenschaften mit, um das Tag genauer zu beschreiben oder es um Funktionen zu erweitern. Das Element bestimmt, welche Attribute optional oder zwingend nötig sind. Einem Tag kann auch mehrere Attribute (durch ein Leerzeichen getrennt) zugeordnet werden.
    60. 60. Attribute Huhn: Farbe Theorie: <tag attribut>Inhalt</tag> Praxis: <a href>Eine E-Mail schreiben</a> Attribute geben den Tags gewisse zusätzliche Eigenschaften mit, um das Tag genauer zu beschreiben oder es um Funktionen zu erweitern. Das Element bestimmt, welche Attribute optional oder zwingend nötig sind. Einem Tag kann auch mehrere Attribute (durch ein Leerzeichen getrennt) zugeordnet werden.
    61. 61. Attribut-Wert Theorie: <tag attribut=”Wert”>Inhalt</tag> Praxis: <a href=”mailto:noel.zbw@me.com”>Eine E-Mail schreiben</a> Attribute benötigen immer eine Wertzuweisung. Ein alleinstehendes Attribut gibt es nicht (Als Beispiel: nicht nur selected, sondern selected=”selected”). Der Wert wird dem Attribut mit einem Gleichheitszeichen und umschlossen mit einfachen oder zweifachen Anführungszeichen zugewiesen.
    62. 62. Attribut-Wert Huhn: Farbe: pink Theorie: <tag attribut=”Wert”>Inhalt</tag> Praxis: <a href=”mailto:noel.zbw@me.com”>Eine E-Mail schreiben</a> Attribute benötigen immer eine Wertzuweisung. Ein alleinstehendes Attribut gibt es nicht (Als Beispiel: nicht nur selected, sondern selected=”selected”). Der Wert wird dem Attribut mit einem Gleichheitszeichen und umschlossen mit einfachen oder zweifachen Anführungszeichen zugewiesen.
    63. 63. XHTML Syntax Theorie: <tag attribut=”Wert”>Inhalt</tag> Praxis: <a href=”mailto:noel.zbw@me.com”>Eine E-Mail schreiben</a> Der Inhalt welcher von einem Tag umschlossen wird, kann fast beliebig sein, und stellt den sichtbaren Bereich der Webseite dar, während Tags und Attribute für den Benutzer unsichtbar sind (Attribut-Werte können direkten Einfluss auf die Darstellung haben, wären die Tags höchstens implizit Einflüsse haben). Little Boxes Seite 49
    64. 64. XHTML Syntax Susi Theorie: <tag attribut=”Wert”>Inhalt</tag> Praxis: <a href=”mailto:noel.zbw@me.com”>Eine E-Mail schreiben</a> Der Inhalt welcher von einem Tag umschlossen wird, kann fast beliebig sein, und stellt den sichtbaren Bereich der Webseite dar, während Tags und Attribute für den Benutzer unsichtbar sind (Attribut-Werte können direkten Einfluss auf die Darstellung haben, wären die Tags höchstens implizit Einflüsse haben). Little Boxes Seite 49
    65. 65. Verbotene Zeichen Wie immer, es gibt ein paar Dinge, die verboten sind: Folgende Zeichen sind im Inhalt verboten und müssen maskiert werden: > &gt; < &lt; “ &quote; & &amp;
    66. 66. XHTML Syntax Neben Tags welche einen Inhalt umschliessen, gibt es auch welche, die keinen Inhalt haben. Es sind leere Tags. Sie haben also keine separaten Bereich in denen sie geöffnet und geschlossen werden sondern werden in einem Tag geöffnet und geschlossen: Theorie: <tag /> Praxis: <br />
    67. 67. XHTML Syntax Neben Tags welche einen Inhalt umschliessen, gibt es auch welche, die keinen Inhalt haben. Es sind leere Tags. Sie haben also keine separaten Bereich in denen sie geöffnet und geschlossen werden sondern werden in einem Tag geöffnet und geschlossen: Anfang Theorie: <tag /> Praxis: <br />
    68. 68. XHTML Syntax Neben Tags welche einen Inhalt umschliessen, gibt es auch welche, die keinen Inhalt haben. Es sind leere Tags. Sie haben also keine separaten Bereich in denen sie geöffnet und geschlossen werden sondern werden in einem Tag geöffnet und geschlossen: Anfang Theorie: <tag /> Ende Praxis: <br />
    69. 69. XHTML Syntax Ein solcher leerer Tag kann selbstverständlich auch eines oder mehrere Attribute enthalten: Theorie: <tag attribut1=”Wert1” attribut2=”Wert1” /> Praxis: <input type=”button” value=”Senden” />
    70. 70. XHTML Syntax Ein solcher leerer Tag kann selbstverständlich auch eines oder mehrere Attribute enthalten: Theorie: <tag attribut1=”Wert1” attribut2=”Wert1” /> Anfang Praxis: <input type=”button” value=”Senden” />
    71. 71. XHTML Syntax Ein solcher leerer Tag kann selbstverständlich auch eines oder mehrere Attribute enthalten: Theorie: <tag attribut1=”Wert1” attribut2=”Wert1” /> Anfang Praxis: <input type=”button” value=”Senden” /> Ende
    72. 72. Alles hat ein Ende... Alles was ein Anfang hat, hat ein Ende. Das ist bei HTML nicht anders – wenn ein Titel-Tag beginnt, muss er auch irgendwo wieder ein Ende haben. Das selbe gilt auch für Abschnitte, Links und Bilder. Bevor HTML an den XML Standard angelehnt wurde, musste man nicht alle Tags schliessen. XML verlangt jedoch zwingend, dass alles immer geschlossen werden muss. So erhält man eine strukturierte Übersicht über ein Dokument. Little Boxes Kapitel 2.6
    73. 73. Verschachtelung First in, last out. XHTML Elemente können verschachtelt werden. So kann ein Abschnitt beispielsweise einen Link enthalten, und ein Block einen Abschnitt. Dies nennt man den Dokument-Baum oder auch DOM (Document Object Model). Wichtig ist, dass die Tags in der richtigen Reihenfolge geschlossen werden. Der Tag der zuerst geöffnet wurde, muss zuletzt geschlossen werden: <p> Suche auf <a href=”www.google.com”>google</a>! </p>
    74. 74. Verschachtelung First in, last out. XHTML Elemente können verschachtelt werden. So kann ein Abschnitt beispielsweise einen Link enthalten, und ein Block einen Abschnitt. Dies nennt man den Dokument-Baum oder auch DOM (Document Object Model). Wichtig ist, dass die Tags in der richtigen Reihenfolge geschlossen werden. Der Tag der zuerst geöffnet wurde, muss 1 zuletzt geschlossen werden: <p> Suche auf <a href=”www.google.com”>google</a>! </p>
    75. 75. Verschachtelung First in, last out. XHTML Elemente können verschachtelt werden. So kann ein Abschnitt beispielsweise einen Link enthalten, und ein Block einen Abschnitt. Dies nennt man den Dokument-Baum oder auch DOM (Document Object Model). Wichtig ist, dass die Tags in der richtigen Reihenfolge geschlossen werden. Der Tag der zuerst geöffnet wurde, muss 1 zuletzt geschlossen werden: 2 <p> Suche auf <a href=”www.google.com”>google</a>! </p>
    76. 76. Verschachtelung First in, last out. XHTML Elemente können verschachtelt werden. So kann ein Abschnitt beispielsweise einen Link enthalten, und ein Block einen Abschnitt. Dies nennt man den Dokument-Baum oder auch DOM (Document Object Model). Wichtig ist, dass die Tags in der richtigen Reihenfolge geschlossen werden. Der Tag der zuerst geöffnet wurde, muss 1 zuletzt geschlossen werden: 2 <p> Suche auf <a href=”www.google.com”>google</a>! </p> 3
    77. 77. Verschachtelung First in, last out. XHTML Elemente können verschachtelt werden. So kann ein Abschnitt beispielsweise einen Link enthalten, und ein Block einen Abschnitt. Dies nennt man den Dokument-Baum oder auch DOM (Document Object Model). Wichtig ist, dass die Tags in der richtigen Reihenfolge geschlossen werden. Der Tag der zuerst geöffnet wurde, muss 1 zuletzt geschlossen werden: 2 <p> Suche auf <a href=”www.google.com”>google</a>! </p> 3 4
    78. 78. Einrückung Damit verschachtelte Elemente nicht unübersichtlich werden, werden die eingeschlossenen Elemente auf einer neuen Zeile und eingerückt geschrieben:
    79. 79. XHTML Syntax Regeln Tags und Attribute wird immer klein geschrieben Tags müssen immer geschlossen werden /> Tags müssen immer richtig verschachtelt sein XHTML Dokumente haben immer nur 1 Root-Element (<html>) Tags können ein oder mehrere, bestimmte Attribute haben Attribute haben immer einen Wert und sind immer mit “” versehen Jedes id und name Attribut muss mit einem Buchstaben beginnen und darf im Dokument nur einmal vorkommen
    80. 80. XHTML Syntax Fehler im Code kann zu falscher Darstellung führen und behinderten Menschen sowie Maschinen (google) den Zugriff erschweren oder verunmöglichen!
    81. 81. hello
    82. 82. hello world. Grundsätzlicher Aufbau: <html /> Das <html> Tag umschliesst das gesamte Dokument (ausser der Doctype Definition) und dient als absolutes Elternelement (auch Root-Element). Es ist meist unsichtbar. Modernes Webdesign Seite 188
    83. 83. hello world. Grundsätzlicher Aufbau: <html /> <head /> Das Head Element enthält grundlegende Informationen zum Dokument wie Titel, Sprache, Zusammenfassung und Links auf benötigte Dateien wie CSS und JavaScript Files. Es ist unsichtbar. Modernes Webdesign Seite 190
    84. 84. hello world. Grundsätzlicher Aufbau: <html /> <head /> <body /> Der Body beinhaltet die eigentliche Seite mit allen Inhalten. Es ist der sichtbare Bereich der Webseite. Modernes Webdesign Seite 191
    85. 85. hello world. Los geht’s, wir erstellt mit dem heute angeeigneten Wissen eine Webseite mit folgenden Kriterien: Liste der persönliche Daten (Name, Adresse, E-Mail etc. Hobbies) Foto von sich falls vorhanden, oder sonst ein Bild einer Person Links zu den Seiten der Banknachbarn (links & rechts) Nummerierte Link-Liste mit persönlichen Lieblingswebseiten Externe CSS-Datei einbinden Wichtige Tags: Little Boxes Kapitel 3
    86. 86. home work
    87. 87. homework Ausbauen der Hello World gem. Vorgaben Little Boxes Kapitel 4 bis 4.3 Syntaxfehler suchen Aufgabe auf Übungsblatt Seite 3
    88. 88. Ressourcen public.me.com/noelboss Links delicious.com/noelboss+zbw Link Feed feeds.delicious.com/rss/noelboss/zbw Slideshows slideshare.net/noelboss Fragen & Feedback noel.zbw@me.com more.

    ×