Web-Engineering
  Einführung in HTML & CSS
… ein Workshop von Holger Rüprich

          30.11.2009
         DHBW Mosbach
Holger Rüprich
                 • Head of Sales Processes
                   Consumer bei der 1&1
                   Inter...
Übersicht

      (1)    Grundlagen
      (2)    Tools
      (3)    XHTML
      (4)    CSS




30.11.2009                 W...
(1) Grundlagen
„Eine Webseite ist kein Gemälde“
                         Jens Grochtdreis
Webseiten sind keine Gemälde
• WWW als Oberfläche für den Austausch
  wissenschaftlicher Informationen entwickelt
     – t...
Webseiten sind keine Gemälde
• Eine Webseite ist ein Dokument
• Es gibt
     – Absätze, Listen, Überschriften, ...
• Es gi...
Was wissen wir über den Surfer?
• Nur daß er die Seite anschaut. Sonst nicht viel!
• Wichtige Fragen für die Entwicklung e...
Standards?




30.11.2009    Web-Engineering Workshop '09   8 von 103
Was sollen Standards?
• Alle Browser haben eine gemeinsame Basis, die sie
  interpretieren
• Keine Sonderbehandlung notwen...
Semantik
• Die Inhalte einer Webseite werden danach
  ausgezeichnet was sie sind, nicht wie sie aussehen
  sollen.
• Eine ...
Semantik und Layout
• Erst bestimmen, was etwas ist, dann das Aussehen
  bestimmen
• Das Aussehen wird durch CSS definiert...
Eine HTML, viele CSS




30.11.2009         Web-Engineering Workshop '09   12 von 103
Das gleiche HTML, anderes CSS




30.11.2009     Web-Engineering Workshop '09   13 von 103
Das gleiche HTML, anderes CSS




30.11.2009     Web-Engineering Workshop '09   14 von 103
Was bringt das?
• Quelltext oft kompakter  schnellere Ladezeit
• Bessere Position in den SERPs
     – bessere programmati...
(2) Tools
Nützliches für Web-Entwickler
Der Editor – Notepad2
• Leichtgewichtiger Editor
• Freeware
• Beschränkung auf das Wesentliche
• CSS/(X)HTML-Features:
   ...
Der Editor – TextMate
• Leichtgewichtiger Editor
• Kostenpflichtig
• Beschränkung auf das Wesentliche
• CSS/(X)HTML-Featur...
Firefox Extensions
• Web Developer (Toolbar)‫‏‬
     – Edit CSS (Mini „Echtzeit“ CSS-Editor)‫‏‬
     – Disable all Styles
...
Firefox Extensions
• HTML Validator
     – Schneller Hinweis auf Fehler
     – https://addons.mozilla.org/de/firefox/addon...
(3) XHTML
Syntax, Struktur, Attribute, …
Übersicht
 • Teil 1 (Einführung, Grundlagen)‫‏‬
      – Syntax
      – Struktur eines XHTML Dokuments
      – Metaangaben
...
(3) XHTML Teil 1
 Einführung, Grundlagen
Syntax
 • XHTML besteht aus vielen Elementtypen
      – Absätze, Überschriften, Tabellen, Listenpunkte …


 • Elemente
   ...
Syntax
 • Attribute
      – Zusatz um eine Eigenschaft zu beschreiben
      – Stehen im Start-Tag eines Elements
        <...
Syntax
 • Zeichenreferenzen
      – Bestimmte Zeichen dürfen nicht Teil eines Element-
        oder Attribut-Inhaltes sein...
Nummerische Zeichenreferenzen
 • gibt die Codeposition eines Zeichens im gewählten
   Dokumentzeichensatz an

            ...
Benannte Zeichenreferenzen
 • verwendet statt der Codeposition eine
   Zeichenkombination

             <   Kleiner-als   ...
Struktur eines XHTML Dokuments
 • Lässt sich in 4 Abschnitte einteilen:
      – XML-Deklaration
             • eine Zeile,...
Struktur eines XHTML Dokuments
 • Die XML-Deklaration
      – Erkennungszeichenfolge im Prolog eines XML-
        Dokument...
Struktur eines XHTML Dokuments
 • Die Dokumenttyp-Deklaration
      – benennt die Dokumenttyp-Definition (DTD)
      – Auf...
Dokumenttyp-Deklarationen
 • XHTML 1.0 Transitional
      – „weiche“ XHTML-Version
      – Alle Elemente und Attribute aus...
Struktur eines XHTML Dokuments
 • Das Wurzelelement html
      – Enthält alle Elemente (auch head & body)‫‏‬


 • Dokument...
Struktur eines XHTML Dokuments
 • Dokumentrumpf body
      – Enthält den Inhalt des Dokuments
      – Block- und Inline-El...
Metaangaben: Der Elementtyp meta
 • Meta-Elemente enthalten Informationen über das
   Dokument, z.B.:
      – Liste von Sc...
Übung 1

      XHTML-Dokument anlegen.

      Infos:
             DOCTYPE: XHTML 1.0 Strict
             Zeichensatz: UTF-...
Universalattribute
 • Attribute für fast alle Elemente
 • Element-Identifikatoren: id und class
      – Um Elemente genaue...
Universalattribute
 • Angabe der Sprache: lang und xml:lang
    <html xml:lang="de" lang="de">
    <span lang="en" xml:lan...
(3) XHTML Teil 2
Auszeichnung der Inhalte
Auszeichnung der Inhalte
 • Überschriften: h1, h2, h3, h4, h5 und h6
      – nach Wichtigkeit von h1 bis h6 definiert
    ...
Auszeichnung der Inhalte
 • Absätze: p
      – p Textabsatz
      – darf keine Blockelemente enthalten
      – dient primä...
Übung 2

      Inhalt der Demo-Seite mit den Absätzen,
      Umbrüchen und Überschriften strukturieren.

      Info: Inhal...
Auszeichnung der Inhalte
 • Links und Anker
      – Link Verweis von einem Quell- zu einem Zielanker
      – Anker a defin...
Auszeichnung der Inhalte
 • Fragmentlinks
      – In die Mitte von Webseiten verlinken
      – Sinnvoll bei sehr umfangrei...
Auszeichnung der Inhalte
 • Grafiken einbinden: img
      – img bettet ein Bild ein
      – Attribute:
             • src ...
Übung 3

      Demo-Seite um Links und Bilder erweitern.

      Info: Bilder im Ordner “images”

      Zeit: 10 Minuten


...
Auszeichnung der Inhalte
 • Auszeichnung im Text
      – Logische Auszeichnung bestimmte Semantik
             • em 





...
Auszeichnung der Inhalte
 • Auszeichnung im Text
      – Physische Auszeichnung Aussage über Darstellung
             • Ve...
Auszeichnung der Inhalte
 • Listen
      – Zur Organisation von Informationen
      – In XHTML gibt es 3 Arten von Listen:...
Ungeordnete Listen
 • Die Elementtypen: ul, li
 • ul 
 zeichnet eine ungeordnete Liste aus
 • li 
 Listenpunkte, die gleic...
Geordnete Listen
 • Die Elementtypen: ol, li
 • ol zeichnet eine geordnete Liste aus
 • li 
 Listenpunkte, die einer besti...
Verschachtelung
 • Die Elemente ul und ol
                                              <ul>
   dürfen nur Elemente vom   ...
Definitionslisten
 • Die Elementtypen: dl, dt, dd
 • dl 
 zeichnet eine Definitionsliste aus
 • dt Bezeichnung (nur Inline...
Übung 4

      Demo-Seite um Listen erweitern.

      Info: Navigation und Speisekarte sollen als
            ungeordnete ...
Auszeichnung der Inhalte
 • Tabellen: table, tr, th, td
 • table Container für Auszeichnung von Tabellen
 • tr     Behälte...
Auszeichnung der Inhalte
 • Struktur und Gruppierung: div, span
 • Zusätzliche Strukturierung
 • div     Blockelement, mit...
Übung 5

      Demo-Seiten mit Hilfe von div und span sinnvoll
      strukturieren.

      Info: IDs und Klassen verwenden...
(4) CSS
Cascading Style Sheet
Übersicht
 • Teil 1
      – Einführung
      – Einbindung in ein XHTML Dokument
      – Syntax und Vokabular
      – Selek...
Übersicht
 • Teil 2
      – Werte
      – Farben und Hintergründe
      – Schrift
      – Text
      – Das Boxmodell
     ...
(4) CSS Teil 1
 Einführung in CSS
Cascading Style Sheets (CSS)
 • Das Mittel der Wahl um Elemente im Web
      – zu gruppieren,
      – zu positionieren
   ...
Vorteile durch CSS
 • Vereinfacht das Schreiben von Webseiten
 • Hersteller-, Plattform- und Geräteunabhängigkeit
 • Verbe...
Einbindung in XHTML
 • Drei gebräuchliche Methoden
        (1) Einbindung per style-Attribut
             <p style="text-a...
Einbindung in XHTML
 • Die klassische und beste Methode
        (3) Einbindung per link-Element
             <link rel="st...
Einbindung in XHTML
 • Alternative Stylesheets
      – Persistente Einbindung
             • Stylesheet immer aktiv, außer...
Einbindung in XHTML
 • Alternative Stylesheets
      – Alternative Einbindung
             • Stylesheet beim Laden inaktiv...
Einbindung in XHTML
 • Die gängigsten Ausgabemedien
             all          Für alle Geräte

             print        F...
Syntax und Vokabular
 • Ein Stylesheet besteht aus Regeln
 • Regeln bestehen aus mind. einem Selektor und einem
   Paar ge...
Syntax und Vokabular
 • 
 Beispiel für Deklarationen:

 
 

        p { margin: 0; }


 
 

        h1, h2, h3, h4, h5, h6...
Syntax und Vokabular
 • Kommentare
        
 

   /* Einzeiliger Kommentar */
        
 

   /* Mehrzeiliger
        
 

 ...
Initialwerte
 • In CSS hat (fast) jede Eigenschaft einen Wert
   (Initialwert)
 • Der Initialwert wird vom Browser genomme...
Vererbung
 • Elemente erben die Eigenschaften ihrer
   Mutterelemente
 
    <body>
      

  <h1>Überschrift mit einem <em...
Die Kaskade
 • Cascading = kaskadierend
 • Cascading    mehrere Stylesheets können
               zusammenwirken
 • D.h. S...
(4) CSS Teil 2
Eigenschaften und Werte
Werte
 • Farben
      – RGB-Farbwert z.B. #FFFFFF rgb(255,255,255)
      – Schlüsselwörter: black, green, red, blue, …
 • ...
Werte
 • Relative Längen
      – X-Höhe ex
      – Geviertbreite em
      – Schlüsselwörter: larger, smaller
      – Proze...
Werte
 • URI Adressierung einer Ressource
 • Zeichenkette beliebige Zeichen, Wörter o. Sätze
 • inherit soll den Wert des ...
Farben und Hintergründe
 • Vordergrundfarbe: color
 • Hintergrundfarbe: background-color
 • Hintergrundbild: background-im...
Farben und Hintergründe
 • Zusammenfassender Hintergrund: background
      – background-color
      – background-image
   ...
Übung 6

      Hintergrundbild und Farben für die Demo-Seite.

      Info: Bilder im Ordner “images”

      Zeit: 20 Minut...
Schrift
 • Schriftfamilie: font-family
 • Schriftstil: font-style
 • Schriftgewichtung: font-weight
 • Schriftgröße: font-...
Schrift
 
    
 ody { 
      b
      
        font-size: 80%;
      
        line-height: 170%;
               font-family...
Text
 • Texteinzug: text-indent
 • Horizontale Ausrichtung: text-align
 • Ausschmückung: text-decoration
 • Laufweite: let...
Übung 7

      Typografische Gestaltung der Demo-Seite

      Info: siehe schrift.txt

      Zeit: 20 Minuten




30.11.20...
Das Boxenmodell
• Ein XHTML-Dokument besteht aus vielen
  rechteckigen, unsichtbaren Boxen
• Das Boxenmodell ist eines der...
Das Boxenmodell




30.11.2009       Web-Engineering Workshop '09   87 von 103
Das Boxenmodell
 • Breite der Paddingbox: padding
 • Randabstand: margin
 • Rahmenstil: border-style
      – none und hidd...
Das Boxenmodell
 • Rahmenbreite: border-width
      – medium    mittlere Dicke
      – thin      dünner Rahmen
      – thi...
Das Boxenmodell
 • Vertikale Randabstände
      – werden i.A. nicht addiert, sondern fallen zusammen
      – der größere A...
Das Boxenmodell
 • Boxtyp eines Elements: display
      – inline    als Inline-Element angezeigt
      – block     als Blo...
Übung 8

      Innere und äußere Abstände sowie Rahmen der
      Elemente der Demo-Seite.

      Info: Abstände siehe groe...
Ausrichtung & Elementenfluss
• Floatierte Boxen: float
     – none 
    die Box floatiert nicht
     – left
 
   Blockbox, ...
Ausrichtung & Elementenfluss
 • Steuerung des Elementflusses: clear
      – none 
     wird nicht unterbrochen
      – lef...
Übung 9

      Boxen der Demo-Seite mit Floats ausrichten.

      Zeit: 20 Minuten




30.11.2009               Web-Engine...
Positionierung
• position 
 legt fest, auf welche Art und Weise
                      die Position einer Box berechnet wir...
Breite & Höhe
• Contentbreite: width
     – auto 
 Breite wird abhängig von verschiedenen
             
   
   Faktoren be...
Übung 10

      Realisierung des Seitenlayouts der Demo-Seite.


      Zeit: wieviel noch bleibt…




30.11.2009          ...
Übung 11

      Navigation


        Zeit: …




30.11.2009          Web-Engineering Workshop '09   99 von 103
Übung 12

      Accessibilty


        Zeit: …




30.11.2009            Web-Engineering Workshop '09   100 von 103
Quellen
• Einführung in XHTML, CSS und Webdesign
     – Michael Jendryschik
     – http://jendryschik.de/wsdev/einfuehrung...
Quellen
• Webseiten sind keine Gemälde
     – Jens Grochtdreis
     – http://www.slideshare.net/Flocke669/webseiten-sind-
...
Vielen Dank für eure
  Aufmerksamkeit.
   Gibt es noch Fragen?
Upcoming SlideShare
Loading in...5
×

XHTML & CSS Workshop

2,442

Published on

XHTML & CSS Workshop für die DHBW Mosbach

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,442
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "XHTML & CSS Workshop"

  1. 1. Web-Engineering Einführung in HTML & CSS … ein Workshop von Holger Rüprich 30.11.2009 DHBW Mosbach
  2. 2. Holger Rüprich • Head of Sales Processes Consumer bei der 1&1 Internet AG in Karlsruhe • Dipl. Medieninformatiker (BA) • Web-Entwickler seit 1999 30.11.2009 Web-Engineering Workshop '09 2 von 100
  3. 3. Übersicht (1) Grundlagen (2) Tools (3) XHTML (4) CSS 30.11.2009 Web-Engineering Workshop '09 3 von 103
  4. 4. (1) Grundlagen „Eine Webseite ist kein Gemälde“ Jens Grochtdreis
  5. 5. Webseiten sind keine Gemälde • WWW als Oberfläche für den Austausch wissenschaftlicher Informationen entwickelt – textorientiert, wenige Elemente, content is king • Kommerzialisierung ging schnell und ungeplant • Tabellenlayout: der erste Hack im Web – Analogie zu Altbekanntem 30.11.2009 Web-Engineering Workshop '09 5 von 103
  6. 6. Webseiten sind keine Gemälde • Eine Webseite ist ein Dokument • Es gibt – Absätze, Listen, Überschriften, ... • Es gibt keine – Fussnoten, Anmerkungen, Subheadlines, Werbung, .. • Vom Inhalt, nicht von der Gestaltung her denken! • Webseiten sind Dokumente! 30.11.2009 Web-Engineering Workshop '09 6 von 103
  7. 7. Was wissen wir über den Surfer? • Nur daß er die Seite anschaut. Sonst nicht viel! • Wichtige Fragen für die Entwicklung einer Website – Ist der Browser komplett geöffnet? – Ist der Rechner auf Invertierung geschaltet? – Wie schnell ist die Internetverbindung? – Sind Plugins installiert und JavaScript an? – Wie ist die Grundschriftgröße seines Systems? – Welche Schriften sind installiert? – ... 30.11.2009 Web-Engineering Workshop '09 7 von 103
  8. 8. Standards? 30.11.2009 Web-Engineering Workshop '09 8 von 103
  9. 9. Was sollen Standards? • Alle Browser haben eine gemeinsame Basis, die sie interpretieren • Keine Sonderbehandlung notwendig • Es wird eine Seite entwickelt, nicht verschiedene Varianten • Lebensdauer von Webdokumenten verlängern • Zugänglichkeit der Inhalte für die größtmögliche Anzahl an Nutzern und Endgeräten 30.11.2009 Web-Engineering Workshop '09 9 von 103
  10. 10. Semantik • Die Inhalte einer Webseite werden danach ausgezeichnet was sie sind, nicht wie sie aussehen sollen. • Eine Überschrift wird mit <h1> bis <h6> umfasst • Eine Liste wird mit <ul> oder <ol> und <li> gemacht, nicht einfach Absätze untereinander oder Zeilenumbrüche • HTML ist semantisch schwach 30.11.2009 Web-Engineering Workshop '09 10 von 103
  11. 11. Semantik und Layout • Erst bestimmen, was etwas ist, dann das Aussehen bestimmen • Das Aussehen wird durch CSS definiert • Wenn die Überschrift die gleiche Schriftgröße wie der Absatz hat, sollte man trotzdem nicht auf die Überschrift verzichten 30.11.2009 Web-Engineering Workshop '09 11 von 103
  12. 12. Eine HTML, viele CSS 30.11.2009 Web-Engineering Workshop '09 12 von 103
  13. 13. Das gleiche HTML, anderes CSS 30.11.2009 Web-Engineering Workshop '09 13 von 103
  14. 14. Das gleiche HTML, anderes CSS 30.11.2009 Web-Engineering Workshop '09 14 von 103
  15. 15. Was bringt das? • Quelltext oft kompakter  schnellere Ladezeit • Bessere Position in den SERPs – bessere programmatische Erfassung der Inhalte durch Google & Co • Abdeckung einer größtmöglichen Anzahl von Zugangsgeräten und Browsern • Zugänglichkeit – sichert die Auslieferung der Inhalte einer Website für eine größtmögliche Anzahl von Zugangsgeräten und Browsern 30.11.2009 Web-Engineering Workshop '09 15 von 103
  16. 16. (2) Tools Nützliches für Web-Entwickler
  17. 17. Der Editor – Notepad2 • Leichtgewichtiger Editor • Freeware • Beschränkung auf das Wesentliche • CSS/(X)HTML-Features: – syntax highlighting – Zeilen verschieben, verdoppeln & löschen http://www.flos-freeware.ch/notepad2.html 30.11.2009 Web-Engineering Workshop '09 17 von 103
  18. 18. Der Editor – TextMate • Leichtgewichtiger Editor • Kostenpflichtig • Beschränkung auf das Wesentliche • CSS/(X)HTML-Features: – syntax highlighting – Zeilen verschieben, verdoppeln & löschen – Bundles http://macromates.com/ 30.11.2009 Web-Engineering Workshop '09 18 von 103
  19. 19. Firefox Extensions • Web Developer (Toolbar)‫‏‬ – Edit CSS (Mini „Echtzeit“ CSS-Editor)‫‏‬ – Disable all Styles – https://addons.mozilla.org/de/firefox/addon/60 • Firebug – Echtzeit Editieren – Elemente untersuchen – https://addons.mozilla.org/de/firefox/addon/1843 30.11.2009 Web-Engineering Workshop '09 19 von 103
  20. 20. Firefox Extensions • HTML Validator – Schneller Hinweis auf Fehler – https://addons.mozilla.org/de/firefox/addon/249 • ColorZilla – Farbwerte aufnehmen – ColorPicker – https://addons.mozilla.org/de/firefox/addon/271 30.11.2009 Web-Engineering Workshop '09 20 von 103
  21. 21. (3) XHTML Syntax, Struktur, Attribute, …
  22. 22. Übersicht • Teil 1 (Einführung, Grundlagen)‫‏‬ – Syntax – Struktur eines XHTML Dokuments – Metaangaben – Universalattribute • Teil 2 – Auszeichnung der Inhalte 30.11.2009 Web-Engineering Workshop '09 22 von 103
  23. 23. (3) XHTML Teil 1 Einführung, Grundlagen
  24. 24. Syntax • XHTML besteht aus vielen Elementtypen – Absätze, Überschriften, Tabellen, Listenpunkte … • Elemente – Ein Element ist eine konkrete Ausprägung eines Elementtyps <Elementname>Inhaltsmodell</Elementname> • Elemente ohne Inhalt <Elementname /> 30.11.2009 Web-Engineering Workshop '09 24 von 103
  25. 25. Syntax • Attribute – Zusatz um eine Eigenschaft zu beschreiben – Stehen im Start-Tag eines Elements <a href=“http://www.ba-mosbach.de“>BA Mosbach</a> • Kommentare – Geeignet z.B. für Anmerkungen und Notizen – Sind sichtbar im Quelltext! <!–- das ist ein Kommentar --> 30.11.2009 Web-Engineering Workshop '09 25 von 103
  26. 26. Syntax • Zeichenreferenzen – Bestimmte Zeichen dürfen nicht Teil eines Element- oder Attribut-Inhaltes sein: < ' " – Alternativ können Zeichenreferenzen verwendet werden – Eine Zeichenreferenz beginnt mit einem Ampersand (&) und endet mit einem Semikolon (;) – Es wird unterschieden zwischen: • Nummerische Zeichenreferenzen • Benannte Zeichenreferenzen 30.11.2009 Web-Engineering Workshop '09 26 von 103
  27. 27. Nummerische Zeichenreferenzen • gibt die Codeposition eines Zeichens im gewählten Dokumentzeichensatz an &#N; dezimale Zeichennummer N &#xN; hexadezimale Zeichennummer N 30.11.2009 Web-Engineering Workshop '09 27 von 103
  28. 28. Benannte Zeichenreferenzen • verwendet statt der Codeposition eine Zeichenkombination < Kleiner-als < < &lt; > Größer-als > > &gt; " Anführungszeichen " " &quot; & Ampersand & & &amp; 30.11.2009 Web-Engineering Workshop '09 28 von 103
  29. 29. Struktur eines XHTML Dokuments • Lässt sich in 4 Abschnitte einteilen: – XML-Deklaration • eine Zeile, die unter anderem die XML-Version angibt – Die Dokumenttyp-Deklaration • eine Zeile, die den XHTML-Dokumenttyp angibt. – Einen Dokumenkopf head • Enthält Dokumenttitel und zusätzliche Informationen – Einen Dokumentrumpf body • Enthält den Inhalt des Dokuments, der im Browser dargestellt wird 30.11.2009 Web-Engineering Workshop '09 29 von 103
  30. 30. Struktur eines XHTML Dokuments • Die XML-Deklaration – Erkennungszeichenfolge im Prolog eines XML- Dokuments – Aufbau eines XML-Prologs: <?xml Version Zeichenkodierung Standalone-Deklaration ?> – Beispiel für einen typischen XHTML XML-Prolog: <?xml version="1.0" encoding="utf-8" ?> – Optional 30.11.2009 Web-Engineering Workshop '09 30 von 103
  31. 31. Struktur eines XHTML Dokuments • Die Dokumenttyp-Deklaration – benennt die Dokumenttyp-Definition (DTD) – Aufbau: <!DOCTYPE html PUBLIC "FPI" "SI"> FPI = Formal Public Identifier welche DTD SI = System Identifier URI der DTD • Für XHTML 1.0 existieren drei vom W3C freigegebene Dokumenttyp-Deklarationen 30.11.2009 Web-Engineering Workshop '09 31 von 103
  32. 32. Dokumenttyp-Deklarationen • XHTML 1.0 Transitional – „weiche“ XHTML-Version – Alle Elemente und Attribute aus HTML 4.01 Transitional – wenn Layoutelemente und -attribute verwendet werden <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN„ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • XHTML 1.0 Strict – „strenge“ Version von XHTML – Elemente und Attribute gestrichen, die nur der Darstellung dienten <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN„ http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> • XHTML 1.0 Frameset – für Framesets <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN„ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 30.11.2009 Web-Engineering Workshop '09 32 von 103
  33. 33. Struktur eines XHTML Dokuments • Das Wurzelelement html – Enthält alle Elemente (auch head & body)‫‏‬ • Dokumentkopf head – Enthält Informationen über aktuelles Dokument, z.B. Titel, Schlüsselwörter … – Wird im Allgemeinen nicht als Inhalt dargestellt – Das title-Element muss enthalten sein 30.11.2009 Web-Engineering Workshop '09 33 von 103
  34. 34. Struktur eines XHTML Dokuments • Dokumentrumpf body – Enthält den Inhalt des Dokuments – Block- und Inline-Elemente • Unterscheidung: (1) Blockelemente nehmen Inline- & Block-Elemente auf Inline-Elemente nehmen nur Text & Inline-Elemente auf (2) Blockelemente neue Zeile Inline-Elemente inzeilig (3) Blockelemente umfassen gesamte Breite Inline-Elemente so breit wie erforderlich 30.11.2009 Web-Engineering Workshop '09 34 von 103
  35. 35. Metaangaben: Der Elementtyp meta • Meta-Elemente enthalten Informationen über das Dokument, z.B.: – Liste von Schlüsselwörtern, Infos über den Autor, Verfallsdatum, Verwendete Zeichenkodierung • werden im Dokumentkopf head notiert • Metaangaben sind optional • meta ist ein leeres Element mit in der Regel zwei Attributen – name / http-equiv und content <meta name="description" content="Beschreibung der Webseite" /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 30.11.2009 Web-Engineering Workshop '09 35 von 103
  36. 36. Übung 1 XHTML-Dokument anlegen. Infos: DOCTYPE: XHTML 1.0 Strict Zeichensatz: UTF-8 Zeit: 10 Minuten 30.11.2009 Web-Engineering Workshop '09 36 von 103
  37. 37. Universalattribute • Attribute für fast alle Elemente • Element-Identifikatoren: id und class – Um Elemente genauer zu bezeichnen – id eindeutiger Bezeichner für ein Element • Definition eines Zielankers • ID-Selektor in CSS, etc. <div id="navigation"> – class Klassenname oder Satz von Klassennamen • CSS-Klassenselektor • universelle Verarbeitung durch Benutzerprogramme <em class="wichtig"> 30.11.2009 Web-Engineering Workshop '09 37 von 103
  38. 38. Universalattribute • Angabe der Sprache: lang und xml:lang <html xml:lang="de" lang="de"> <span lang="en" xml:lang="en">text in english</span> • Inzeilige Formatierung: style <div style="border:1px solid white;">weißer Rahmen</div> • Kommentierende Informationen: title <input type="text" name="Website" title="Ich bin ein Titel"/> 30.11.2009 Web-Engineering Workshop '09 38 von 103
  39. 39. (3) XHTML Teil 2 Auszeichnung der Inhalte
  40. 40. Auszeichnung der Inhalte • Überschriften: h1, h2, h3, h4, h5 und h6 – nach Wichtigkeit von h1 bis h6 definiert – sollten inhaltlich und logisch richtig eingesetzt werden – Standard-Darstellung der Browser kann per CSS verändert werden – bilden eine Hierarchie ab  keine Überschriften überspringen! 30.11.2009 Web-Engineering Workshop '09 40 von 103
  41. 41. Auszeichnung der Inhalte • Absätze: p – p Textabsatz – darf keine Blockelemente enthalten – dient primär der Strukturierung des Textes • Zeilenumbrüche: br – br umbricht zwingend die aktuelle Textzeile – mehrere Zeilenumbrüche sollten vermieden werden  Leerzeilen erreicht man durch Absätze  Abstand zwischen Elementen per CSS 30.11.2009 Web-Engineering Workshop '09 41 von 103
  42. 42. Übung 2 Inhalt der Demo-Seite mit den Absätzen, Umbrüchen und Überschriften strukturieren. Info: Inhalt/Text aus inhalt.txt nehmen Zeit: 20 Minuten 30.11.2009 Web-Engineering Workshop '09 42 von 103
  43. 43. Auszeichnung der Inhalte • Links und Anker – Link Verweis von einem Quell- zu einem Zielanker – Anker a definiert Zielanker und Quellanker • Zielanker: name <a name="bezeichner">Ankertext</a> • Quellanker: href <a href="uri">Ankertext</a> + URI Uniform Resource Identifier 30.11.2009 Web-Engineering Workshop '09 43 von 103
  44. 44. Auszeichnung der Inhalte • Fragmentlinks – In die Mitte von Webseiten verlinken – Sinnvoll bei sehr umfangreichen Dokumenten 1. Zielanker definieren: <h2 id="abschnitt2">Zweiter Abschnitt</h2> 2. Link setzen <a href="foo.html#abschnitt2">zweiter Abschnitt</a> 30.11.2009 Web-Engineering Workshop '09 44 von 103
  45. 45. Auszeichnung der Inhalte • Grafiken einbinden: img – img bettet ein Bild ein – Attribute: • src Ort der Bildquelle über ein URI • width Breite des Bildes (Pixel / Prozent)‫‏‬ • height Höhe des Bildes (Pixel / Prozent)‫‏‬ • alt alternativer Text und ein Muss – Sinnvolle Alt-Texte • Bilder, die textuellen Inhalt beinhalten: enthaltenen Text • Fotos und grafische Darstellungen: beschreibende Funktion • Layoutgrafiken: leer lassen 30.11.2009 Web-Engineering Workshop '09 45 von 103
  46. 46. Übung 3 Demo-Seite um Links und Bilder erweitern. Info: Bilder im Ordner “images” Zeit: 10 Minuten 30.11.2009 Web-Engineering Workshop '09 46 von 103
  47. 47. Auszeichnung der Inhalte • Auszeichnung im Text – Logische Auszeichnung bestimmte Semantik • em betont (kursiv)‫‏‬ • strong stark betont (fett)‫‏‬ • Weitere Auszeichnungen: – code Quelltext – dfn Definition – abbr Abkürzung – acronym Akronym 30.11.2009 Web-Engineering Workshop '09 47 von 103
  48. 48. Auszeichnung der Inhalte • Auszeichnung im Text – Physische Auszeichnung Aussage über Darstellung • Versehen Teile eines Textes mit einer visuellen Formatierung • Treffen keine Aussage über Semantik • Sollten im Sinne der Trennung von Markup und Layout zugunsten von CSS vermieden werden! • Beispiele: – i kursiv – b fett – tt Festbreitenschrift (Schreibmaschinenschrift)‫‏‬ – big in größerer Schrift 30.11.2009 Web-Engineering Workshop '09 48 von 103
  49. 49. Auszeichnung der Inhalte • Listen – Zur Organisation von Informationen – In XHTML gibt es 3 Arten von Listen: • Ungeordnete Listen: ul • Geordnete Listen: ol • Definitionslisten: dl 30.11.2009 Web-Engineering Workshop '09 49 von 103
  50. 50. Ungeordnete Listen • Die Elementtypen: ul, li • ul zeichnet eine ungeordnete Liste aus • li Listenpunkte, die gleichwertig sind <ul> <li>ungeordnete Listen,</li> <li>geordnete Listen und</li> <li>Definitionslisten.</li> </ul> 30.11.2009 Web-Engineering Workshop '09 50 von 103
  51. 51. Geordnete Listen • Die Elementtypen: ol, li • ol zeichnet eine geordnete Liste aus • li Listenpunkte, die einer bestimmten Reihenfolge unterliegen • Z.B. die Top 5 der Alben aller Zeit <ol> <li>Pet Sounds, The Beach Boys</li> <li>Revolver, The Beatles</li> <li>Highway 61 Revisited, Bob Dylan</li> <li>Rubber Soul, The Beatles</li> <li>What's Going On, Marvin Gaye</li> </ol> 30.11.2009 Web-Engineering Workshop '09 51 von 103
  52. 52. Verschachtelung • Die Elemente ul und ol <ul> dürfen nur Elemente vom <li>Ebene eins</li> Typ li als Kindelemente <li>Ebene eins beinhalten! <ol> <li>Ebene zwei</li> </ol> • Untergeordnete Listen </li> müssen daher innerhalb der <li>Ebene eins</li> Listenpunkte (li) eingefügt </ul> werden. 30.11.2009 Web-Engineering Workshop '09 52 von 103
  53. 53. Definitionslisten • Die Elementtypen: dl, dt, dd • dl zeichnet eine Definitionsliste aus • dt Bezeichnung (nur Inline-Elemente)‫‏‬ • dd Beschreibung <dl> <dt>XHTML</dt> <dd> • Klassische Beispiele: Extensible Hypertext Markup Language – Glossar </dd> – Literaturverzeichnis <dt>CSS</dt> <dd>Cascading Style Sheets</dd> </dl> 30.11.2009 Web-Engineering Workshop '09 53 von 103
  54. 54. Übung 4 Demo-Seite um Listen erweitern. Info: Navigation und Speisekarte sollen als ungeordnete Liste umgesetzt werden. (navigation.txt) Zeit: 20 Minuten 30.11.2009 Web-Engineering Workshop '09 54 von 103
  55. 55. Auszeichnung der Inhalte • Tabellen: table, tr, th, td • table Container für Auszeichnung von Tabellen • tr Behälter für eine Zeile mit mehreren Zellen • Tabellenzellen (tr) können zwei Informationen enthalten – th Kopfinformationen – td Datenzellen 30.11.2009 Web-Engineering Workshop '09 55 von 103
  56. 56. Auszeichnung der Inhalte • Struktur und Gruppierung: div, span • Zusätzliche Strukturierung • div Blockelement, mit dem Elemente zusammengefasst werden • span Inline-Element, mit dem (textuelle) Elementinhalte besonders gekennzeichnet werden • Keinerlei Semantik • Nur verwenden, wenn kein anderes Element geeignet • Geeignet für spezielle Formatierung 30.11.2009 Web-Engineering Workshop '09 56 von 103
  57. 57. Übung 5 Demo-Seiten mit Hilfe von div und span sinnvoll strukturieren. Info: IDs und Klassen verwenden. Zeit: 15 Minuten 30.11.2009 Web-Engineering Workshop '09 57 von 103
  58. 58. (4) CSS Cascading Style Sheet
  59. 59. Übersicht • Teil 1 – Einführung – Einbindung in ein XHTML Dokument – Syntax und Vokabular – Selektoren – Initialwerte & Vererbung – Die Kaskade 30.11.2009 Web-Engineering Workshop '09 59 von 103
  60. 60. Übersicht • Teil 2 – Werte – Farben und Hintergründe – Schrift – Text – Das Boxmodell – Ausrichtung & Elementenfluss – Positionierung – Breite und Höhe 30.11.2009 Web-Engineering Workshop '09 60 von 103
  61. 61. (4) CSS Teil 1 Einführung in CSS
  62. 62. Cascading Style Sheets (CSS) • Das Mittel der Wahl um Elemente im Web – zu gruppieren, – zu positionieren – und visuell zu gestalten • Separation of Concerns – (X)HTML Daten (Struktur) – CSS Gestaltung 30.11.2009 Web-Engineering Workshop '09 62 von 103
  63. 63. Vorteile durch CSS • Vereinfacht das Schreiben von Webseiten • Hersteller-, Plattform- und Geräteunabhängigkeit • Verbesserung der Wartbarkeit • Einfachheit • Flexibilität • Erhöhung der Zugänglichkeit 30.11.2009 Web-Engineering Workshop '09 63 von 103
  64. 64. Einbindung in XHTML • Drei gebräuchliche Methoden (1) Einbindung per style-Attribut <p style="text-align: center; font-weight: bold;">Absatz</p> (2) Einbindung per style-Element <style type="text/css"> p{ text-align: center; font-weight: bold; } </style> 30.11.2009 Web-Engineering Workshop '09 64 von 103
  65. 65. Einbindung in XHTML • Die klassische und beste Methode (3) Einbindung per link-Element <link rel="stylesheet" media="screen,projection" type="text/css" title="Standardstylesheet" href="/stylesheets/default.css" /> 30.11.2009 Web-Engineering Workshop '09 65 von 103
  66. 66. Einbindung in XHTML • Alternative Stylesheets – Persistente Einbindung • Stylesheet immer aktiv, außer Nutzer schaltet es aus. <link rel="stylesheet" type="text/css" media="screen,projection" href="default.css" /> – Bevorzugte Einbindung • Standardstylesheet: aktiv sobald Webseite geladen <link rel="stylesheet" type="text/css" title="Bevorzugt" media="screen,projection" href="bevorzugt.css" /> 30.11.2009 Web-Engineering Workshop '09 66 von 103
  67. 67. Einbindung in XHTML • Alternative Stylesheets – Alternative Einbindung • Stylesheet beim Laden inaktiv und dient als Alternative <link rel="alternate stylesheet" type="text/css" title="Alternativ" media="screen,projection" href="alternativ.css" /> 30.11.2009 Web-Engineering Workshop '09 67 von 103
  68. 68. Einbindung in XHTML • Die gängigsten Ausgabemedien all Für alle Geräte print Für die Ausgabe am Drucker projection Für Projektoren u. ähnliche Geräte screen Für die Ausgabe am Bildschirm • Sonstige: – aural, braille, embossed, handheld, tty, tv 30.11.2009 Web-Engineering Workshop '09 68 von 103
  69. 69. Syntax und Vokabular • Ein Stylesheet besteht aus Regeln • Regeln bestehen aus mind. einem Selektor und einem Paar geschweifter Klammer {} (Deklarationsblock) • Deklarationsblock enthält eine Liste mit null oder mehr durch Semikola ; getrennte Deklarationen • Deklaration = Eigenschaft: Wert • Teilen sich mehrere Selektoren dieselbe Deklaration, werden sie mit Kommata getrennt 30.11.2009 Web-Engineering Workshop '09 69 von 103
  70. 70. Syntax und Vokabular • Beispiel für Deklarationen: p { margin: 0; } h1, h2, h3, h4, h5, h6 { color: #889399; background-color: transparent; margin: 2em 0 1em 0; } 30.11.2009 Web-Engineering Workshop '09 70 von 103
  71. 71. Syntax und Vokabular • Kommentare /* Einzeiliger Kommentar */ /* Mehrzeiliger Kommentar */ • Stylesheet importieren @import "fonts.css"; @import url("fonts.css"); 30.11.2009 Web-Engineering Workshop '09 71 von 103
  72. 72. Initialwerte • In CSS hat (fast) jede Eigenschaft einen Wert (Initialwert) • Der Initialwert wird vom Browser genommen, wenn nichts anderes angegeben wird. • Mit einer Deklaration wird dieser Wert geändert • Keinen Initialwert besitzt z.B. color 30.11.2009 Web-Engineering Workshop '09 72 von 103
  73. 73. Vererbung • Elemente erben die Eigenschaften ihrer Mutterelemente <body> <h1>Überschrift mit einem <em>betonten</em> Wort</h1> <p>Absatz mit einem <em>betonten</em> Wort</p> </body> • Effiziente Stylesheets – Schriftart, Zeilenhöhe, Vorder- und Hintergrundfarbe kann nur für body gesetzt werden 30.11.2009 Web-Engineering Workshop '09 73 von 103
  74. 74. Die Kaskade • Cascading = kaskadierend • Cascading mehrere Stylesheets können zusammenwirken • D.h. Stylesheets können nacheinander oder parallel verwendet werden • Browserstylesheet das erste Stylesheet, das angewandt wird • Userstylesheet enthält die Vorlieben der Besucher der Website 30.11.2009 Web-Engineering Workshop '09 74 von 103
  75. 75. (4) CSS Teil 2 Eigenschaften und Werte
  76. 76. Werte • Farben – RGB-Farbwert z.B. #FFFFFF rgb(255,255,255) – Schlüsselwörter: black, green, red, blue, … • Zahlen • Absolute Längen – Punkte pt & Pica pc – Zentimeter cm & Milimeter mm (eher für Druck)‫‏‬ – Schlüsselwörter: small, medium, large, … 30.11.2009 Web-Engineering Workshop '09 76 von 103
  77. 77. Werte • Relative Längen – X-Höhe ex – Geviertbreite em – Schlüsselwörter: larger, smaller – Prozent % – Pixel px • verhalten sich relativ zur Auflösung des Anzeigegerätes • Untergeordnete Elemente erben nicht die relativen Werte, sondern die berechneten Werte body { font-size: 30px; text-indent: 200%; } p { font-size: 20px; } 30.11.2009 Web-Engineering Workshop '09 77 von 103
  78. 78. Werte • URI Adressierung einer Ressource • Zeichenkette beliebige Zeichen, Wörter o. Sätze • inherit soll den Wert des Elternelements erben 30.11.2009 Web-Engineering Workshop '09 78 von 103
  79. 79. Farben und Hintergründe • Vordergrundfarbe: color • Hintergrundfarbe: background-color • Hintergrundbild: background-image – none kein Hintergrund – URI Verweis auf ein Bild – background-repeat Wiederholung des Bildes • repeat über die volle Länge • repeat-x nur in x-Richtung • repeat-y nur in y-Richtung • no-repeat keine Wiederholung 30.11.2009 Web-Engineering Workshop '09 79 von 103
  80. 80. Farben und Hintergründe • Zusammenfassender Hintergrund: background – background-color – background-image – background-repeat – background-attachment – backgourn-position 30.11.2009 Web-Engineering Workshop '09 80 von 103
  81. 81. Übung 6 Hintergrundbild und Farben für die Demo-Seite. Info: Bilder im Ordner “images” Zeit: 20 Minuten 30.11.2009 Web-Engineering Workshop '09 81 von 103
  82. 82. Schrift • Schriftfamilie: font-family • Schriftstil: font-style • Schriftgewichtung: font-weight • Schriftgröße: font-size • Zusammenfassende Eigenschaft: font – font-family, font-style, font-weight, font-size, line-height 30.11.2009 Web-Engineering Workshop '09 82 von 103
  83. 83. Schrift ody { b font-size: 80%; line-height: 170%; font-family: Verdana, sans-Serif; } h1 { font-family: Georgia, "Times New Roman", serif; font-size: 1.6em; font-variant: small-caps; } Lässt sich wie folgt abkürzen: body { font: 80%/170% Verdana, sans-serif; } h1 { font: small-caps bold 1.6em Georgia, "Times New Roman", serif; } 30.11.2009 Web-Engineering Workshop '09 83 von 103
  84. 84. Text • Texteinzug: text-indent • Horizontale Ausrichtung: text-align • Ausschmückung: text-decoration • Laufweite: letter-spacing • Wortabstände: word-spacing • Groß- und Kleinschreibung: text-transform 30.11.2009 Web-Engineering Workshop '09 84 von 103
  85. 85. Übung 7 Typografische Gestaltung der Demo-Seite Info: siehe schrift.txt Zeit: 20 Minuten 30.11.2009 Web-Engineering Workshop '09 85 von 103
  86. 86. Das Boxenmodell • Ein XHTML-Dokument besteht aus vielen rechteckigen, unsichtbaren Boxen • Das Boxenmodell ist eines der wichtigsten Teile von CSS • Dient als Grundlage für die Darstellung und Positionierung aller Elemente • Polsterung, Rahmen und Randabstand – Contentbox, Paddingbox (Polsterung), Borderbox (Rahmen), Marginbox (Randabstand)‫‏‬ 30.11.2009 Web-Engineering Workshop '09 86 von 103
  87. 87. Das Boxenmodell 30.11.2009 Web-Engineering Workshop '09 87 von 103
  88. 88. Das Boxenmodell • Breite der Paddingbox: padding • Randabstand: margin • Rahmenstil: border-style – none und hidden kein Rahmen (none = Initialwert)‫‏‬ – dotted gepunkteter Rahmen – dashed gestrichelter Rahmen – solid durchgezogener Rahmen – double, groove, ridge, inset, outset 30.11.2009 Web-Engineering Workshop '09 88 von 103
  89. 89. Das Boxenmodell • Rahmenbreite: border-width – medium mittlere Dicke – thin dünner Rahmen – thick dicker Rahmen • Rahmenfarbe: border-color • Rahmen: border – border-style, border-width, border-color 30.11.2009 Web-Engineering Workshop '09 89 von 103
  90. 90. Das Boxenmodell • Vertikale Randabstände – werden i.A. nicht addiert, sondern fallen zusammen – der größere Abstand gewinnt – Der Abstand der beiden folgenden Elemente beträgt nicht 50 Pixel, sondern nur 30 Pixel <p style="margin-bottom: 30px;">Absatz</p> <p style="margin-top: 20px;">Absatz</p> 30.11.2009 Web-Engineering Workshop '09 90 von 103
  91. 91. Das Boxenmodell • Boxtyp eines Elements: display – inline als Inline-Element angezeigt – block als Block-Element angezeigt – list-item als Listenpunkt angezeigt – none keine Box, verschwindet aus der Darstellung – marker, run-in, compact, table, … 30.11.2009 Web-Engineering Workshop '09 91 von 103
  92. 92. Übung 8 Innere und äußere Abstände sowie Rahmen der Elemente der Demo-Seite. Info: Abstände siehe groessen.txt Zeit: 20 Minuten 30.11.2009 Web-Engineering Workshop '09 92 von 103
  93. 93. Ausrichtung & Elementenfluss • Floatierte Boxen: float – none die Box floatiert nicht – left Blockbox, die nach links ausgerichtet wird – right Blockbox, die nach rechts ausgerichtet wird • Regeln für floatierte Boxen – Inhalte, Padding-, Border- und Marginbereiche werden voll berücksichtigt – Randbereiche fallen nicht zusammen 30.11.2009 Web-Engineering Workshop '09 93 von 103
  94. 94. Ausrichtung & Elementenfluss • Steuerung des Elementflusses: clear – none wird nicht unterbrochen – left wird um nach links floatierte Elemente unterbrochen – right wird um nach rechts floatierte Elemente unterbrochen – both wird um alle floatierte Element unterbrochen 30.11.2009 Web-Engineering Workshop '09 94 von 103
  95. 95. Übung 9 Boxen der Demo-Seite mit Floats ausrichten. Zeit: 20 Minuten 30.11.2009 Web-Engineering Workshop '09 95 von 103
  96. 96. Positionierung • position legt fest, auf welche Art und Weise die Position einer Box berechnet wird – static normale Box – relative Box wird relativ zu ihrer Position verschoben – absolute Box wird relativ zu ihrem umfließenden Block verschoben – fixed Box wird absolut positioniert • top, right, bottom und left – Diese Eigenschaften geben an, wie weit die jeweilige Kante einer Box von der Kante des umfließenden Blocks entfernt ist. – auto automatische Berechnung 30.11.2009 Web-Engineering Workshop '09 96 von 103
  97. 97. Breite & Höhe • Contentbreite: width – auto Breite wird abhängig von verschiedenen Faktoren berechnet • Contenthöhe: height – auto Höhe wird abhängig von verschiedenen Faktoren berechnet • Blockelemente horizontal zentrieren: – width sollte kleiner sein als der zur Verfügung stehende Raum – margin-left und margin-right auf auto setzen 30.11.2009 Web-Engineering Workshop '09 97 von 103
  98. 98. Übung 10 Realisierung des Seitenlayouts der Demo-Seite. Zeit: wieviel noch bleibt… 30.11.2009 Web-Engineering Workshop '09 98 von 103
  99. 99. Übung 11 Navigation Zeit: … 30.11.2009 Web-Engineering Workshop '09 99 von 103
  100. 100. Übung 12 Accessibilty Zeit: … 30.11.2009 Web-Engineering Workshop '09 100 von 103
  101. 101. Quellen • Einführung in XHTML, CSS und Webdesign – Michael Jendryschik – http://jendryschik.de/wsdev/einfuehrung/ • Der Grüne Haken – Nico Steiner, Andreas Lehr – http://www.slideshare.net/n.steiner/1-technologietag- webstandards-presentation 30.11.2009 Web-Engineering Workshop '09 101 von 103
  102. 102. Quellen • Webseiten sind keine Gemälde – Jens Grochtdreis – http://www.slideshare.net/Flocke669/webseiten-sind- keine-gemaelde/ • Webstandards Workshop – Max Design / übersetzt von Stefan Walter – http://www.hessendscher.de/workshop/ 30.11.2009 Web-Engineering Workshop '09 102 von 103
  103. 103. Vielen Dank für eure Aufmerksamkeit. Gibt es noch Fragen?

×