SlideShare ist ein Scribd-Unternehmen logo
1 von 25
HTML & CSS
     von
 Martina Rüter
HTML & CSS
                        HyperText
Anklickbarer
                         Markup
    Text                            Cascading Style   Gestaltungs-
                        Language
                                        Sheets         vorlagen




               •   HTML-Geschichte
               •   Browser-Geschichte
               •   Zusammenhang: HTML, CSS und Javascript
               •   Standardkonform. Warum?
HTML-Geschichte
Wie jede Software wird auch der HTML-Standard ständig weiterentwickelt.

                          • 1992 erschien die erste Version der HTML-Spezifikation.
    HTML 1.0              • Die Möglichkeiten waren sehr begrenzt: Text, Überschriften und Links



                          • Bei HTML 2.0 (1995) handelt es sich um eine Erweiterung der 1. Version. Es
    HTML 2.0                wurden viele neue Kern-Elemente hinzugefügt, um eine bessere Struktur zu
                            ermöglichen.


                          • HTML 3.0 beinhaltete viele Verbesserungen und Neuerung.
    HTML 3.0              • Diese Version erschien nicht, weil sie mit der Einführung des Browsers
                            Netscape bereits vor ihrer Veröffentlichung veraltet war.

                          • 1997 wurde HTML 3.2 veröffentlicht. Es handelte sich um eine abgespeckte
                            Version von HTML 3.0
    HTML 3.2              • Browserspezifische Tags von Netscape und Microsoft wurden nicht mit
                            aufgenommen.

                          • Mit HTML 4.0 (Ende 1997) wurden Stylesheets, Skripte und Frames
                            eingeführt.
HTML 4.0 und 4.01         • Seit 1999 ersetzt HTML 4.01 die Vorgängerversion mit vielen kleineren
                            Korrekturen.
Zukunft von HTML
                   Aktueller
                  Standard:
                  HTML 4.01


XHTML 2.0                   HTML5
• Neuformulierung von       • Rückbesinnung auf
  HTML 4.01 mit Hilfe         die HTML-Wurzeln
  von XML




                        ?
Browser-Geschichte



1993:     1994:       1995:     1996:   2003:    2004:      2008:
Mosaic   Netscape    Internet   Opera   Safari   Mozilla   Google
         Navigator   Explorer                    Firefox   Chrome
Browser-Anteile Deutschland




 Quelle: http://gs.statcounter.com, Zeitraum März 2011 – März 2012
Zusammenhang von
HTML, CSS und Javascript
HTML, CSS, Javascript
         HTML
        => Text-
        Struktur

           CSS
        => Layout,
        Aussehen




       Javascript
       => Dynamik
Websites vs. Papierseiten

                                                                                                   1




• Der Autor einer Website hat keine Kontrolle über deren Aussehen.

• Websites sehen bei jedem Nutzer anders aus.

• Websites sind flexibel.

1 - Quelle: „Little Boxes“ Teil 1, Peter Müller, Markt + Technik Verlag, ISBN: 789-3-8272-4474-1
Standardkonform. Warum?
  • Kurze Ladezeiten
  • Wartungsfreundlich und pflegeleicht
   => geringere laufende Kosten
  • Browser- und Plattformunabhängig
  • Suchmaschinenfreundlich
  • Zugänglich für mehr Nutzer (barrierearm)
   = größere Reichweite
  • Zukunftssicher

Weitere ähnliche Inhalte

Andere mochten auch

Kwaga : email et productivité - Les apports de la sémantique
Kwaga : email et productivité - Les apports de la sémantiqueKwaga : email et productivité - Les apports de la sémantique
Kwaga : email et productivité - Les apports de la sémantiqueAnne de Forsan
 
Unibe Applied CRM & Integrated Processes Dom Rep, 20090326
Unibe Applied CRM & Integrated Processes Dom Rep, 20090326Unibe Applied CRM & Integrated Processes Dom Rep, 20090326
Unibe Applied CRM & Integrated Processes Dom Rep, 20090326Enrique A. Ortiz-Mundo, MS
 
El fracaso escolar en los alumnos del ies
El fracaso escolar en los alumnos del iesEl fracaso escolar en los alumnos del ies
El fracaso escolar en los alumnos del iesJOSEMA8996
 
LFM - servicios para el empredimiento patrocinado por la empresa privada
LFM - servicios para el empredimiento patrocinado por la empresa privadaLFM - servicios para el empredimiento patrocinado por la empresa privada
LFM - servicios para el empredimiento patrocinado por la empresa privadaLuis Fernando Sandoval Casas
 
Gauteng Provincial Government Services Directory
Gauteng Provincial Government Services DirectoryGauteng Provincial Government Services Directory
Gauteng Provincial Government Services DirectoryNomvula Mokonyana
 
Clinical and radiographic evaluation of one and two-visit e
Clinical and radiographic evaluation of one  and two-visit eClinical and radiographic evaluation of one  and two-visit e
Clinical and radiographic evaluation of one and two-visit eCharles Pereira
 
Tanques para Carburación
Tanques para CarburaciónTanques para Carburación
Tanques para CarburaciónJulian Peralta
 
Federico Zambelli Hosmer: PayPal: pagamenti online, oltre confine e senza con...
Federico Zambelli Hosmer: PayPal: pagamenti online, oltre confine e senza con...Federico Zambelli Hosmer: PayPal: pagamenti online, oltre confine e senza con...
Federico Zambelli Hosmer: PayPal: pagamenti online, oltre confine e senza con...Meet Magento Italy
 
Catalogo 2017 Prinsotel Hoteles y Apartamentos en Mallorca y Menorca
Catalogo 2017 Prinsotel Hoteles y Apartamentos en Mallorca y MenorcaCatalogo 2017 Prinsotel Hoteles y Apartamentos en Mallorca y Menorca
Catalogo 2017 Prinsotel Hoteles y Apartamentos en Mallorca y MenorcaPrinsotel Hotels and Apartments
 
Tutorial completo sobre manejo de poligonos en 3ds max
Tutorial completo sobre manejo de poligonos en 3ds maxTutorial completo sobre manejo de poligonos en 3ds max
Tutorial completo sobre manejo de poligonos en 3ds maxEder Noriega
 
El programa escultórico del foro de Los Bañales (Uncastillo, Zaragoza): aspec...
El programa escultórico del foro de Los Bañales (Uncastillo, Zaragoza): aspec...El programa escultórico del foro de Los Bañales (Uncastillo, Zaragoza): aspec...
El programa escultórico del foro de Los Bañales (Uncastillo, Zaragoza): aspec...Javier Andreu
 

Andere mochten auch (18)

Kwaga : email et productivité - Les apports de la sémantique
Kwaga : email et productivité - Les apports de la sémantiqueKwaga : email et productivité - Les apports de la sémantique
Kwaga : email et productivité - Les apports de la sémantique
 
Unibe Applied CRM & Integrated Processes Dom Rep, 20090326
Unibe Applied CRM & Integrated Processes Dom Rep, 20090326Unibe Applied CRM & Integrated Processes Dom Rep, 20090326
Unibe Applied CRM & Integrated Processes Dom Rep, 20090326
 
Credito garantizado
Credito garantizadoCredito garantizado
Credito garantizado
 
Jump 2011
Jump 2011Jump 2011
Jump 2011
 
Macizo de Anaga
Macizo de AnagaMacizo de Anaga
Macizo de Anaga
 
Rainbow Communications New
Rainbow Communications NewRainbow Communications New
Rainbow Communications New
 
El fracaso escolar en los alumnos del ies
El fracaso escolar en los alumnos del iesEl fracaso escolar en los alumnos del ies
El fracaso escolar en los alumnos del ies
 
LFM - servicios para el empredimiento patrocinado por la empresa privada
LFM - servicios para el empredimiento patrocinado por la empresa privadaLFM - servicios para el empredimiento patrocinado por la empresa privada
LFM - servicios para el empredimiento patrocinado por la empresa privada
 
Gauteng Provincial Government Services Directory
Gauteng Provincial Government Services DirectoryGauteng Provincial Government Services Directory
Gauteng Provincial Government Services Directory
 
Clinical and radiographic evaluation of one and two-visit e
Clinical and radiographic evaluation of one  and two-visit eClinical and radiographic evaluation of one  and two-visit e
Clinical and radiographic evaluation of one and two-visit e
 
Auto evaluacion 3 parcial
Auto evaluacion 3 parcialAuto evaluacion 3 parcial
Auto evaluacion 3 parcial
 
Tanques para Carburación
Tanques para CarburaciónTanques para Carburación
Tanques para Carburación
 
Secura Security India Overview
Secura Security India OverviewSecura Security India Overview
Secura Security India Overview
 
Federico Zambelli Hosmer: PayPal: pagamenti online, oltre confine e senza con...
Federico Zambelli Hosmer: PayPal: pagamenti online, oltre confine e senza con...Federico Zambelli Hosmer: PayPal: pagamenti online, oltre confine e senza con...
Federico Zambelli Hosmer: PayPal: pagamenti online, oltre confine e senza con...
 
Catalogo 2017 Prinsotel Hoteles y Apartamentos en Mallorca y Menorca
Catalogo 2017 Prinsotel Hoteles y Apartamentos en Mallorca y MenorcaCatalogo 2017 Prinsotel Hoteles y Apartamentos en Mallorca y Menorca
Catalogo 2017 Prinsotel Hoteles y Apartamentos en Mallorca y Menorca
 
Tutorial completo sobre manejo de poligonos en 3ds max
Tutorial completo sobre manejo de poligonos en 3ds maxTutorial completo sobre manejo de poligonos en 3ds max
Tutorial completo sobre manejo de poligonos en 3ds max
 
El programa escultórico del foro de Los Bañales (Uncastillo, Zaragoza): aspec...
El programa escultórico del foro de Los Bañales (Uncastillo, Zaragoza): aspec...El programa escultórico del foro de Los Bañales (Uncastillo, Zaragoza): aspec...
El programa escultórico del foro de Los Bañales (Uncastillo, Zaragoza): aspec...
 
MUSEU LALIQUE
MUSEU LALIQUEMUSEU LALIQUE
MUSEU LALIQUE
 

Ähnlich wie HTML und CSS

Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Noël Bossart
 
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Eric Eggert
 
HTML ist tot, lang lebe HTML
HTML ist tot, lang lebe HTMLHTML ist tot, lang lebe HTML
HTML ist tot, lang lebe HTMLBenjamin Hofmann
 
html5 & CSS 3
html5 & CSS 3html5 & CSS 3
html5 & CSS 3joocom
 
FMK2015: Einführung in Codeversionierungssysteme by Thomas Hirt
FMK2015: Einführung in Codeversionierungssysteme by Thomas HirtFMK2015: Einführung in Codeversionierungssysteme by Thomas Hirt
FMK2015: Einführung in Codeversionierungssysteme by Thomas HirtVerein FM Konferenz
 
Der gesamte Redaktionsprozess mit Open Source
Der gesamte Redaktionsprozess mit Open SourceDer gesamte Redaktionsprozess mit Open Source
Der gesamte Redaktionsprozess mit Open Sourceyellowcow
 
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
 
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
 
Professionelle Websites
Professionelle WebsitesProfessionelle Websites
Professionelle WebsitesLars Heinemann
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 
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
 
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
 
Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Eric Eggert
 
Webdesign
WebdesignWebdesign
WebdesignElli Ge
 
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
 

Ähnlich wie HTML und CSS (20)

Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
Semantik im web
Semantik im webSemantik im web
Semantik im web
 
HTML5
HTML5HTML5
HTML5
 
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)
 
HTML ist tot, lang lebe HTML
HTML ist tot, lang lebe HTMLHTML ist tot, lang lebe HTML
HTML ist tot, lang lebe HTML
 
Wordpress Crashkurs
Wordpress CrashkursWordpress Crashkurs
Wordpress Crashkurs
 
html5 & CSS 3
html5 & CSS 3html5 & CSS 3
html5 & CSS 3
 
FMK2015: Einführung in Codeversionierungssysteme by Thomas Hirt
FMK2015: Einführung in Codeversionierungssysteme by Thomas HirtFMK2015: Einführung in Codeversionierungssysteme by Thomas Hirt
FMK2015: Einführung in Codeversionierungssysteme by Thomas Hirt
 
Der gesamte Redaktionsprozess mit Open Source
Der gesamte Redaktionsprozess mit Open SourceDer gesamte Redaktionsprozess mit Open Source
Der gesamte Redaktionsprozess mit Open Source
 
Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)
 
XHTML & CSS Workshop
XHTML & CSS WorkshopXHTML & CSS Workshop
XHTML & CSS Workshop
 
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 Style
 
Professionelle Websites
Professionelle WebsitesProfessionelle Websites
Professionelle Websites
 
Gutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemachtGutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemacht
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
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
 
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-10
 
Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)
 
Webdesign
WebdesignWebdesign
Webdesign
 
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...
 

HTML und CSS

  • 1. HTML & CSS von Martina Rüter
  • 2. HTML & CSS HyperText Anklickbarer Markup Text Cascading Style Gestaltungs- Language Sheets vorlagen • HTML-Geschichte • Browser-Geschichte • Zusammenhang: HTML, CSS und Javascript • Standardkonform. Warum?
  • 3. HTML-Geschichte Wie jede Software wird auch der HTML-Standard ständig weiterentwickelt. • 1992 erschien die erste Version der HTML-Spezifikation. HTML 1.0 • Die Möglichkeiten waren sehr begrenzt: Text, Überschriften und Links • Bei HTML 2.0 (1995) handelt es sich um eine Erweiterung der 1. Version. Es HTML 2.0 wurden viele neue Kern-Elemente hinzugefügt, um eine bessere Struktur zu ermöglichen. • HTML 3.0 beinhaltete viele Verbesserungen und Neuerung. HTML 3.0 • Diese Version erschien nicht, weil sie mit der Einführung des Browsers Netscape bereits vor ihrer Veröffentlichung veraltet war. • 1997 wurde HTML 3.2 veröffentlicht. Es handelte sich um eine abgespeckte Version von HTML 3.0 HTML 3.2 • Browserspezifische Tags von Netscape und Microsoft wurden nicht mit aufgenommen. • Mit HTML 4.0 (Ende 1997) wurden Stylesheets, Skripte und Frames eingeführt. HTML 4.0 und 4.01 • Seit 1999 ersetzt HTML 4.01 die Vorgängerversion mit vielen kleineren Korrekturen.
  • 4. Zukunft von HTML Aktueller Standard: HTML 4.01 XHTML 2.0 HTML5 • Neuformulierung von • Rückbesinnung auf HTML 4.01 mit Hilfe die HTML-Wurzeln von XML ?
  • 5. Browser-Geschichte 1993: 1994: 1995: 1996: 2003: 2004: 2008: Mosaic Netscape Internet Opera Safari Mozilla Google Navigator Explorer Firefox Chrome
  • 6. Browser-Anteile Deutschland Quelle: http://gs.statcounter.com, Zeitraum März 2011 – März 2012
  • 7. Zusammenhang von HTML, CSS und Javascript
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23. HTML, CSS, Javascript HTML => Text- Struktur CSS => Layout, Aussehen Javascript => Dynamik
  • 24. Websites vs. Papierseiten 1 • Der Autor einer Website hat keine Kontrolle über deren Aussehen. • Websites sehen bei jedem Nutzer anders aus. • Websites sind flexibel. 1 - Quelle: „Little Boxes“ Teil 1, Peter Müller, Markt + Technik Verlag, ISBN: 789-3-8272-4474-1
  • 25. Standardkonform. Warum? • Kurze Ladezeiten • Wartungsfreundlich und pflegeleicht => geringere laufende Kosten • Browser- und Plattformunabhängig • Suchmaschinenfreundlich • Zugänglich für mehr Nutzer (barrierearm) = größere Reichweite • Zukunftssicher