SlideShare ist ein Scribd-Unternehmen logo

Einführung XHTML CSS JS // MM 08-11

MM 08-11 - Präsentation vom 4.12.2009 Einführung in HTML, CSS und JavaScript. XHTML Syntax

1 von 83
Downloaden Sie, um offline zu lesen
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


    © 2009 by Noël Bossart
about
Kursverlauf



4.    7. 14. 4.  9. 11. 18. 22. 1.   5. 15. 1.      5.
12.   12. 12 01. 01. 01. 01. 01. 02. 02. 02. 03.    03.




               Test                Test            Test
Kursverlauf
HTML




4.    7. 14. 4.  9. 11. 18. 22. 1.   5. 15. 1.      5.
12.   12. 12 01. 01. 01. 01. 01. 02. 02. 02. 03.    03.




               Test                Test            Test
Kursverlauf
HTML

         CSS


4.    7. 14. 4.  9. 11. 18. 22. 1.   5. 15. 1.      5.
12.   12. 12 01. 01. 01. 01. 01. 02. 02. 02. 03.    03.




               Test                Test            Test

Recomendados

Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10Noël Bossart
 
HTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleHTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleGino Cremer
 
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Eric Eggert
 
Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Eric Eggert
 
Flash cs3, ajax und php
Flash cs3, ajax und phpFlash cs3, ajax und php
Flash cs3, ajax und phpsameerpclab1
 
1 dw-kv-baden
1 dw-kv-baden1 dw-kv-baden
1 dw-kv-badenzum
 
MVHS: So realisieren Sie Ihren Webauftritt erfolgreich
MVHS: So realisieren Sie Ihren Webauftritt erfolgreichMVHS: So realisieren Sie Ihren Webauftritt erfolgreich
MVHS: So realisieren Sie Ihren Webauftritt erfolgreichThomas Kraehe
 

Más contenido relacionado

Was ist angesagt?

Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Jens Grochtdreis
 
Developing UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und ArgumenteDeveloping UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und ArgumenteDeveloping UXD
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Jens Grochtdreis
 
"Best Practices" in Contao
"Best Practices" in Contao"Best Practices" in Contao
"Best Practices" in ContaoPeter Müller
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 

Was ist angesagt? (7)

Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1
 
XHTML & CSS Workshop
XHTML & CSS WorkshopXHTML & CSS Workshop
XHTML & CSS Workshop
 
WordPress Grundlagen Kurs
WordPress Grundlagen KursWordPress Grundlagen Kurs
WordPress Grundlagen Kurs
 
Developing UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und ArgumenteDeveloping UXD - weitere Tipps, Tricks und Argumente
Developing UXD - weitere Tipps, Tricks und Argumente
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
 
"Best Practices" in Contao
"Best Practices" in Contao"Best Practices" in Contao
"Best Practices" in Contao
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 

Destacado

Entwicklung deutscher Wissenschafts-Medien
Entwicklung deutscher Wissenschafts-MedienEntwicklung deutscher Wissenschafts-Medien
Entwicklung deutscher Wissenschafts-MedienProf. Alexander Gerber
 
Raumdesign Kidsrooms Kinderzimmer
Raumdesign Kidsrooms KinderzimmerRaumdesign Kidsrooms Kinderzimmer
Raumdesign Kidsrooms Kinderzimmermefire
 
CSS Basics and Box Model // MM 08-11
CSS Basics and Box Model // MM 08-11CSS Basics and Box Model // MM 08-11
CSS Basics and Box Model // MM 08-11Noël Bossart
 
Formulare // MM 08-11
Formulare // MM 08-11Formulare // MM 08-11
Formulare // MM 08-11Noël Bossart
 
Formulare Lösungen
Formulare LösungenFormulare Lösungen
Formulare LösungenNoël Bossart
 
Social Media Governance in der Wissenschaft
Social Media Governance in der WissenschaftSocial Media Governance in der Wissenschaft
Social Media Governance in der WissenschaftProf. Alexander Gerber
 
Monthly report on de international sales september 2015
Monthly report on de international sales september 2015Monthly report on de international sales september 2015
Monthly report on de international sales september 2015WebInterpret SAS
 
Vorstellung OSGi Users'-Forum Germany
Vorstellung OSGi Users'-Forum GermanyVorstellung OSGi Users'-Forum Germany
Vorstellung OSGi Users'-Forum GermanyKai Hackbarth
 
PräSentation1
PräSentation1PräSentation1
PräSentation1Steuer
 
Robo Memo Elpos Tagung
Robo Memo Elpos TagungRobo Memo Elpos Tagung
Robo Memo Elpos Tagungluzius
 
Webinar: 10 Zutaten für Ihre Weihnachtskampagne
Webinar: 10 Zutaten für Ihre WeihnachtskampagneWebinar: 10 Zutaten für Ihre Weihnachtskampagne
Webinar: 10 Zutaten für Ihre Weihnachtskampagneoptivo GmbH
 
Neue Rhythmisierung am MSM
Neue Rhythmisierung am MSMNeue Rhythmisierung am MSM
Neue Rhythmisierung am MSMguest8e703e1
 

Destacado (20)

Xinnovations-2010
Xinnovations-2010Xinnovations-2010
Xinnovations-2010
 
Einladung
EinladungEinladung
Einladung
 
connect.me
connect.meconnect.me
connect.me
 
Entwicklung deutscher Wissenschafts-Medien
Entwicklung deutscher Wissenschafts-MedienEntwicklung deutscher Wissenschafts-Medien
Entwicklung deutscher Wissenschafts-Medien
 
Raumdesign Kidsrooms Kinderzimmer
Raumdesign Kidsrooms KinderzimmerRaumdesign Kidsrooms Kinderzimmer
Raumdesign Kidsrooms Kinderzimmer
 
Titnus Lol
Titnus LolTitnus Lol
Titnus Lol
 
JavaScript & jQuery
JavaScript & jQueryJavaScript & jQuery
JavaScript & jQuery
 
CSS Basics and Box Model // MM 08-11
CSS Basics and Box Model // MM 08-11CSS Basics and Box Model // MM 08-11
CSS Basics and Box Model // MM 08-11
 
Formulare // MM 08-11
Formulare // MM 08-11Formulare // MM 08-11
Formulare // MM 08-11
 
Formulare Lösungen
Formulare LösungenFormulare Lösungen
Formulare Lösungen
 
Irregular verbs
Irregular verbs Irregular verbs
Irregular verbs
 
Social Media Governance in der Wissenschaft
Social Media Governance in der WissenschaftSocial Media Governance in der Wissenschaft
Social Media Governance in der Wissenschaft
 
Monthly report on de international sales september 2015
Monthly report on de international sales september 2015Monthly report on de international sales september 2015
Monthly report on de international sales september 2015
 
Umzug
UmzugUmzug
Umzug
 
Vorstellung OSGi Users'-Forum Germany
Vorstellung OSGi Users'-Forum GermanyVorstellung OSGi Users'-Forum Germany
Vorstellung OSGi Users'-Forum Germany
 
PräSentation1
PräSentation1PräSentation1
PräSentation1
 
Journalismus 2-0
Journalismus 2-0Journalismus 2-0
Journalismus 2-0
 
Robo Memo Elpos Tagung
Robo Memo Elpos TagungRobo Memo Elpos Tagung
Robo Memo Elpos Tagung
 
Webinar: 10 Zutaten für Ihre Weihnachtskampagne
Webinar: 10 Zutaten für Ihre WeihnachtskampagneWebinar: 10 Zutaten für Ihre Weihnachtskampagne
Webinar: 10 Zutaten für Ihre Weihnachtskampagne
 
Neue Rhythmisierung am MSM
Neue Rhythmisierung am MSMNeue Rhythmisierung am MSM
Neue Rhythmisierung am MSM
 

Ähnlich wie Einführung XHTML CSS JS // MM 08-11

Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichPeter Rozek
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine TricksJens Grochtdreis
 
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...Sinan Akalın
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - WebstandardsNico Steiner
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...Karionis
 
Anforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScriptAnforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScriptChristian Baranowski
 
HTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich istHTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich istRenate Hermanns
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend ArchitekturNico Steiner
 
Webtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer ÜberblickWebtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer ÜberblickClaus Brell
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Jürg Stuker
 
Drupal Austria Roadshow in Klagenfurt
Drupal Austria Roadshow in KlagenfurtDrupal Austria Roadshow in Klagenfurt
Drupal Austria Roadshow in Klagenfurtdasjo
 
Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Eric Eggert
 
Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
Performance Optimierung - Barrierefreiheit beginnt mit LadezeitenPerformance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
Performance Optimierung - Barrierefreiheit beginnt mit LadezeitenDavid Maciejewski
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Jens Grochtdreis
 
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09elemente websolutions
 

Ähnlich wie Einführung XHTML CSS JS // MM 08-11 (20)

Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
Anforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScriptAnforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScript
 
HTML und CSS
HTML und CSSHTML und CSS
HTML und CSS
 
HTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich istHTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich ist
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
 
Webtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer ÜberblickWebtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer Überblick
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
Drupal Austria Roadshow in Klagenfurt
Drupal Austria Roadshow in KlagenfurtDrupal Austria Roadshow in Klagenfurt
Drupal Austria Roadshow in Klagenfurt
 
Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)
 
Ec2009 Templates
Ec2009 TemplatesEc2009 Templates
Ec2009 Templates
 
Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
Performance Optimierung - Barrierefreiheit beginnt mit LadezeitenPerformance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
Performance Optimierung - Barrierefreiheit beginnt mit Ladezeiten
 
CMS Kurs-Glossar
CMS Kurs-GlossarCMS Kurs-Glossar
CMS Kurs-Glossar
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
 
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09
 
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
 

Einführung XHTML CSS JS // MM 08-11

  • 1. XHTML & CSS & JavaScript Einführung © 2009 by Noël Bossart
  • 2. welcome. « If you don't crack the shell, you can't eat the nut.» Persisches Sprichwort © 2009 by Noël Bossart
  • 4. Kursverlauf 4. 7. 14. 4. 9. 11. 18. 22. 1. 5. 15. 1. 5. 12. 12. 12 01. 01. 01. 01. 01. 02. 02. 02. 03. 03. Test Test Test
  • 5. Kursverlauf HTML 4. 7. 14. 4. 9. 11. 18. 22. 1. 5. 15. 1. 5. 12. 12. 12 01. 01. 01. 01. 01. 02. 02. 02. 03. 03. Test Test Test
  • 6. Kursverlauf HTML CSS 4. 7. 14. 4. 9. 11. 18. 22. 1. 5. 15. 1. 5. 12. 12. 12 01. 01. 01. 01. 01. 02. 02. 02. 03. 03. Test Test Test
  • 7. Kursverlauf HTML CSS JavaScript 4. 7. 14. 4. 9. 11. 18. 22. 1. 5. 15. 1. 5. 12. 12. 12 01. 01. 01. 01. 01. 02. 02. 02. 03. 03. Test Test Test
  • 8. Ablauf heute Allgemeine Infos, Regel... Geschichte & Grundlagen Pause XHTML Syntax evt. Hello World
  • 9. Regeln © 2009 by Noël Bossart
  • 10. 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
  • 11. ? Was kann ich bereits Welche Erwartungen habe ich an den Kurs Wie werde ich das Gelernte anwenden können
  • 13. 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 Modernes Webdesign Seite 26-28
  • 15. Los geht’s © 2009 by Noël Bossart
  • 16. Modernes Webdesign Installation Firebug & Developer Toolbar delicious.com/noelboss/zbw+tools Beispiele delicious.com/noelboss/zbw+old delicious.com/noelboss/zbw+modern
  • 17. 3 Technologien Was kann JS? Was ist HTML? Was macht CSS? Modernes Webdesign Seite 32-33
  • 18. 3 Aufgaben Funktion! Inhalt. Design*
  • 19. 3 Aufgaben Funktion! Inhalt. the stuff. Design*
  • 20. the bang! 3 Aufgaben Funktion! Inhalt. the stuff. Design*
  • 21. the bang! 3 Aufgaben Funktion! Inhalt. the stuff. Design* the bling*
  • 22. 3 Charakteristiken alert(‘welcome’); <html /> #css { color: #000; }
  • 23. Browser (Firefox, Safari...) - Client Server Modernes Webdesign 32-33
  • 24. XHTML - Inhalt Browser (Firefox, Safari...) - Client Server Modernes Webdesign 32-33
  • 25. CSS - Design XHTML - Inhalt Browser (Firefox, Safari...) - Client Server Modernes Webdesign 32-33
  • 26. CSS - Design JS - Funktion XHTML - Inhalt Browser (Firefox, Safari...) - Client Server Modernes Webdesign 32-33
  • 27. CSS - Design JS - Funktion XHTML - Inhalt Browser (Firefox, Safari...) - Client http:// Hyper Text Transfer Protocol Server Modernes Webdesign 32-33
  • 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 Modernes Webdesign 34-35
  • 30. XHTML? whaaat? © 2009 by Noël Bossart Modernes Webdesign Seite 188+
  • 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. XHTML! Ist Textbasiert und somit offen zugänglich Ermöglicht Verknüpfungen mit anderen Seiten & Medien
  • 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. 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. 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. XHTML! HTML besteht aus einzelnen Elementen, sogenannten Tags Durch die Tags wird dem (Hyper)Text eine Struktur und eine Bedeutung gegeben
  • 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. 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. 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. 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 Modernes Webdesign Seite 188
  • 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. 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. 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. Modernes Webdesign Seite 189
  • 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. Doctype Und wo ist der versprochene Vierte?
  • 46. Doctype Und wo ist der versprochene Vierte? Neu (X)HTML 5: <!DOCTYPE>
  • 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. Modernes Webdesign Seite 189
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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). Modernes Webdesign Seite 188
  • 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). Modernes Webdesign Seite 188
  • 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. 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. 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. 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. 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. 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. 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. 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.
  • 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. 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. 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. 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. 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. Einrückung Damit verschachtelte Elemente nicht unübersichtlich werden, werden die eingeschlossenen Elemente auf einer neuen Zeile und eingerückt geschrieben:
  • 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. XHTML Syntax Fehler im Code kann zu falscher Darstellung führen und behinderten Menschen sowie Maschinen (google) den Zugriff erschweren oder verunmöglichen!
  • 82. homework Kapitel 1.3.5 Seite 37 - 40 und Seit 189 - 200 Was bedeutet semantisches HTML?
  • 83. Ressourcen public.me.com/noelboss Links delicious.com/noelboss+zbw Link Feed feeds.delicious.com/rss/noelboss/zbw Fragen & Feedback noel.zbw@me.com more.

Hinweis der Redaktion

  1. What i love: standards, ajax, usability, mac What I hate: propriet&amp;#xE4;re technologien, IE, tabellen layouts
  2. Infos zum Test: 90 Minuten, 15 Aufgaben unterteilt in XHTML, CSS, JavaScript und alles zusammen, 50 Punkte.
  3. 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
  4. 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.
  5. Source: YouTube
  6. me.com demo Welche Unterschiede stellst Du fest zwischen neuen und alten Seiten? Was machen die neuen Seiten aus?
  7. 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.
  8. Was ist charakteristisch f&amp;#xFC;r HTML, CSS und JS?
  9. Modernes Webdesign - Lesen Buch Seite 32-33
  10. Modernes Webdesign - Lesen Buch Seite 32-33
  11. Modernes Webdesign - Lesen Buch Seite 32-33
  12. Modernes Webdesign - Lesen Buch Seite 32-33
  13. Modernes Webdesign - Lesen Buch Seite 32-33
  14. Modernes Webdesign - Lesen Buch Seite 32-33
  15. Modernes Webdesign - Lesen Buch Seite 32-33
  16. Modernes Webdesign - Lesen Buch Seite 32-33
  17. Littleboxes Seite 38-39
  18. Littleboxes Seite 40
  19. Kurzteste 0.5 Test 1 Projekt 1
  20. Kurzteste 0.5 Test 1 Projekt 1
  21. Little Boxes Seite 43, Modernes Webdesign Seite 189
  22. Little Boxes Seite 46 unten und 47
  23. Little Boxes Seite 57
  24. Little Boxes Seite 57
  25. Little Boxes Seite 57
  26. Little Boxes Seite 57
  27. Fehler im Code finden (Arbeitsblatt). Ausserdem, was kann man noch besser machen?- Charset- XML Deklaration- CSS einbinden
  28. Fragen, Verbesserungsvorschl&amp;#xE4;ge, Kritik, Lob?
  29. Lies Seite 43 bis 49 als Vertiefung (Little Boxes)