SlideShare une entreprise Scribd logo
1  sur  33
Benutzerfreundliches
     Webdesign
  Technische Grundlagen
Inhalt
Webstandards
 (X)HTML
    CSS
Webstandards
Was steckt dahinter?
 W3C (World Wide Web Consortium)
 Standardisierte Sprachen, u.a.
  HTML/XHTML
  XML
  Cascading Style Sheets (CSS)
  ECMAScript 262 („JavaScript“)
Worum geht es dabei?

 Zugänglichkeit und Nutzen

 Lebensdauer von Dokumenten

 Vereinfachen des Codes
Wie soll das
erreicht werden?
Trennung von …

Struktur    (X)HTML

Aussehen    CSS

Verhalten   JavaScript
Valider Code



Kontrollierte
Darstellung
Was bringt das?
Zunächst Anlaufwiderstand
Kontrollierte Darstellung
Klarere Struktur des Inhalts
Leichtere Pflege (v.a. im Team)
Schnellere Ladezeiten
Nutzbarkeit auch in Zukun
(X)HTML
Aufbau eines (X)HTML Tags
Wichtige Attribute


<p class="hervorgehoben">Wichtiger
Text</p>
<div id="inhalt"> … Inhalt … </div>
(X)HTML-Regeln
  Kleinschreibung
  Tags korrekt verschachtelt
  Tags immer geschlossen
Doctypes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



                HTML-Version

                Info für den Browser, wie das
                Markup darzustellen ist

                Ohne Doctype: „uirks“-Mode
                beim IE
Semantisches Markup
       Nicht-semantisch                      Semantisch

<font                               <h1>Hauptüberschrift</h1>
size="7">Hauptüberschrift</font>
                                    <p>Dies ist ein Blindtext-Satz. Er
<font size="3">Dies ist ein         steht hier, damit überhaupt ein
Blindtext-Satz. Er steht hier,      wenig Text hier steht</p>
damit überhaupt ein wenig Text
                                    <h2>Unter-Überschrift</h2>
hier steht</font>
                                    <p class="eingerueckt" >Dieser
<font size="3">Unter-
                                    Abschnitt soll eingerückt sein.
Überschrift</font>
                                    </p>
<blockquote>Dieser Abschnitt
                                    <p class="abstand-oben">Hier ist
soll eingerückt sein.<blockquote>
                                    Abstand nötig</p>
<br>
<font size="3">Hier ist Abstand
nötig</font>
Frames: nicht zu empfehlen

       Drucken
       URL & Bookmarks
       Webseite ≠ Webseite
       Suchmaschinen
       Mobile Browser
(X)HTML ist nur
strukturierter Inhalt
Komplette Website =
  (X)HTML + CSS
NEU

HTML 5
Grundlage: HTML 4 – nichts vergessen,
nur dazulernen

Anpassung an heutige Bedürfnisse
  Direkte Videowiedergabe
  Layout-Elemente, z.B.
 <article>, <section>, <header>, <nav>

 Zusätzliche Formularelemente, z.B.
 Schieberegler, Datumauswahl, E-Mail-Feld etc.
 …
CSS
Cascading Stylesheets
XHTML ⚭ CSS
<head>
…
 <link rel="stylesheet" type="text/css" href="meinstylesheet.css" />
…
</head>
Wie funktioniert CSS?
h1 {
 font-size: 3em;}

h1, h2, h3, h4, h5, h6, p {
 font-family: Verdana, Arial, sans-serif; }

#inhalt {
 margin: 0 0 25px 0; }

#inhalt .hervorgehoben {
 background-color:#ffffcc; }
Wichtige CSS Eigenschaften
font-size, font-family … kurz: font

line-height

color

background-color, background-image … kurz:
background                    margin
                                 padding

margin, padding, border        Blindtext   border


                              Box Model
Ans Werk!

Contenu connexe

En vedette

Hoeflich 11
Hoeflich 11Hoeflich 11
Hoeflich 11dokeos
 
Probleme und Konflikte in der Berufsausbildung erkennen und Gespräche vorbere...
Probleme und Konflikte in der Berufsausbildung erkennen und Gespräche vorbere...Probleme und Konflikte in der Berufsausbildung erkennen und Gespräche vorbere...
Probleme und Konflikte in der Berufsausbildung erkennen und Gespräche vorbere...Berufsausbildung und Berufsvorbereitung
 
Wennmaneinmalfremdgeht
WennmaneinmalfremdgehtWennmaneinmalfremdgeht
Wennmaneinmalfremdgehtdokeos
 
Behaviour-Driven Development
Behaviour-Driven DevelopmentBehaviour-Driven Development
Behaviour-Driven Developmentjlink
 
Wer Soll Hier Fahren
Wer Soll Hier FahrenWer Soll Hier Fahren
Wer Soll Hier Fahrendokeos
 
Moodlemoot2008
Moodlemoot2008Moodlemoot2008
Moodlemoot2008akoenig
 
Papagei
PapageiPapagei
Papageidokeos
 
Maennerweinen 1
Maennerweinen 1Maennerweinen 1
Maennerweinen 1dokeos
 
Wikis im Unterricht: Einsatzszenarien aus dem Fach Geschichte
Wikis im Unterricht: Einsatzszenarien aus dem Fach GeschichteWikis im Unterricht: Einsatzszenarien aus dem Fach Geschichte
Wikis im Unterricht: Einsatzszenarien aus dem Fach Geschichteakoenig
 

En vedette (20)

Hoeflich 11
Hoeflich 11Hoeflich 11
Hoeflich 11
 
Massenhafte Medien statt Massenmedien
Massenhafte Medien statt MassenmedienMassenhafte Medien statt Massenmedien
Massenhafte Medien statt Massenmedien
 
Netzpolitik GAL2011
Netzpolitik GAL2011Netzpolitik GAL2011
Netzpolitik GAL2011
 
Superakteureund Fiktionen
Superakteureund FiktionenSuperakteureund Fiktionen
Superakteureund Fiktionen
 
Gruppenarbeit Lerntheorie Behaviorismus
Gruppenarbeit Lerntheorie BehaviorismusGruppenarbeit Lerntheorie Behaviorismus
Gruppenarbeit Lerntheorie Behaviorismus
 
Probleme und Konflikte in der Berufsausbildung erkennen und Gespräche vorbere...
Probleme und Konflikte in der Berufsausbildung erkennen und Gespräche vorbere...Probleme und Konflikte in der Berufsausbildung erkennen und Gespräche vorbere...
Probleme und Konflikte in der Berufsausbildung erkennen und Gespräche vorbere...
 
Wennmaneinmalfremdgeht
WennmaneinmalfremdgehtWennmaneinmalfremdgeht
Wennmaneinmalfremdgeht
 
Gruppenarbeit demographie
Gruppenarbeit demographieGruppenarbeit demographie
Gruppenarbeit demographie
 
Behaviour-Driven Development
Behaviour-Driven DevelopmentBehaviour-Driven Development
Behaviour-Driven Development
 
Bescheinigung Cara
Bescheinigung CaraBescheinigung Cara
Bescheinigung Cara
 
Wer Soll Hier Fahren
Wer Soll Hier FahrenWer Soll Hier Fahren
Wer Soll Hier Fahren
 
Was gehört zur Ausbildungsreife
Was gehört zur AusbildungsreifeWas gehört zur Ausbildungsreife
Was gehört zur Ausbildungsreife
 
Gruppenarbeit ausbilderrolle
Gruppenarbeit ausbilderrolleGruppenarbeit ausbilderrolle
Gruppenarbeit ausbilderrolle
 
Moodlemoot2008
Moodlemoot2008Moodlemoot2008
Moodlemoot2008
 
Papagei
PapageiPapagei
Papagei
 
Maennerweinen 1
Maennerweinen 1Maennerweinen 1
Maennerweinen 1
 
The Long Tail
The Long TailThe Long Tail
The Long Tail
 
Gruppenarbeit zum Lernerfolg
Gruppenarbeit zum LernerfolgGruppenarbeit zum Lernerfolg
Gruppenarbeit zum Lernerfolg
 
Wikis im Unterricht: Einsatzszenarien aus dem Fach Geschichte
Wikis im Unterricht: Einsatzszenarien aus dem Fach GeschichteWikis im Unterricht: Einsatzszenarien aus dem Fach Geschichte
Wikis im Unterricht: Einsatzszenarien aus dem Fach Geschichte
 
Konflikte
KonflikteKonflikte
Konflikte
 

Similaire à Fortbildung Schulwebsite: Technische Grundlagen

Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platformChristian Heilmann
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzEric Eggert
 
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
 
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Nicolai Schwarz
 
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
 
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
 
Frontend Performance
Frontend PerformanceFrontend Performance
Frontend PerformanceNico Steiner
 
BEM – „Das Ende des Spezifizitätskrieges“
BEM – „Das Ende des Spezifizitätskrieges“BEM – „Das Ende des Spezifizitätskrieges“
BEM – „Das Ende des Spezifizitätskrieges“Stefan Franke
 
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing 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
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrYves Hoppe
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenTorsten Landsiedel
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 
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
 

Similaire à Fortbildung Schulwebsite: Technische Grundlagen (20)

Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
 
XHTML
XHTMLXHTML
XHTML
 
Semantischer xhtml code 12w
Semantischer xhtml code 12wSemantischer xhtml code 12w
Semantischer xhtml code 12w
 
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platform
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
 
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)
 
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
 
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
 
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)
 
IT-Zertifikat: Advanced Web Basics - Handout HTML II
IT-Zertifikat: Advanced Web Basics - Handout HTML IIIT-Zertifikat: Advanced Web Basics - Handout HTML II
IT-Zertifikat: Advanced Web Basics - Handout HTML II
 
Frontend Performance
Frontend PerformanceFrontend Performance
Frontend Performance
 
BEM – „Das Ende des Spezifizitätskrieges“
BEM – „Das Ende des Spezifizitätskrieges“BEM – „Das Ende des Spezifizitätskrieges“
BEM – „Das Ende des Spezifizitätskrieges“
 
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
 
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
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
 
Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisieren
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Semantic html5
Semantic html5Semantic html5
Semantic html5
 
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
 

Fortbildung Schulwebsite: Technische Grundlagen