SlideShare ist ein Scribd-Unternehmen logo
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
                   Internet AG in Karlsruhe
                 • Dipl. Medieninformatiker (BA)
                 • Web-Entwickler seit 1999




30.11.2009      Web-Engineering Workshop '09   2 von 100
Übersicht

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




30.11.2009                 Web-Engineering Workshop '09   3 von 103
(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
     – 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
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
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
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 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
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
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
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 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
(2) Tools
Nützliches für Web-Entwickler
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
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
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
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
(3) XHTML
Syntax, Struktur, Attribute, …
Ü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
(3) XHTML Teil 1
 Einführung, Grundlagen
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
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
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
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
Benannte Zeichenreferenzen
 • verwendet statt der Codeposition eine
   Zeichenkombination

             <   Kleiner-als        &#60;             &#x003C;   &lt;

             >   Größer-als         &#62;             &#x003E;   &gt;

             "   Anführungszeichen &#34;              &#x0022;   &quot;

             &   Ampersand          &#38;             &#x0026;   &amp;




30.11.2009                      Web-Engineering Workshop '09              28 von 103
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
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
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
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
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
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
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
Ü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
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
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
(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
      – 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
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
Ü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
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
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
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
Ü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
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
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
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
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
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
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
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
Ü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
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
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
Ü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
(4) CSS
Cascading Style Sheet
Ü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
Ü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
(4) CSS Teil 1
 Einführung in CSS
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
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
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
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
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
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
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
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
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
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
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
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
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
(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, …
 • 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
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
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
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
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
Ü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
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
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
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
Übung 7

      Typografische Gestaltung der Demo-Seite

      Info: siehe schrift.txt

      Zeit: 20 Minuten




30.11.2009                Web-Engineering Workshop '09   85 von 103
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
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 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
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
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
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
Ü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
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
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
Übung 9

      Boxen der Demo-Seite mit Floats ausrichten.

      Zeit: 20 Minuten




30.11.2009               Web-Engineering Workshop '09   95 von 103
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
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
Übung 10

      Realisierung des Seitenlayouts der Demo-Seite.


      Zeit: wieviel noch bleibt…




30.11.2009                Web-Engineering Workshop '09   98 von 103
Ü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/

• 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
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
Vielen Dank für eure
  Aufmerksamkeit.
   Gibt es noch Fragen?

Weitere ähnliche Inhalte

Andere mochten auch

Retail
RetailRetail
Alexander Kluge: A Distant Reading
Alexander Kluge: A Distant ReadingAlexander Kluge: A Distant Reading
Alexander Kluge: A Distant Reading
gnmarten
 
Dr. iur.Pedro Bejarano Alomia, LL.M. - Neonaticide - Doctoral Thesis
Dr. iur.Pedro Bejarano Alomia, LL.M. - Neonaticide - Doctoral ThesisDr. iur.Pedro Bejarano Alomia, LL.M. - Neonaticide - Doctoral Thesis
Dr. iur.Pedro Bejarano Alomia, LL.M. - Neonaticide - Doctoral Thesis
Fritz Lang
 
FlexNet Manager Suite On-Demand Datasheet
FlexNet Manager Suite On-Demand DatasheetFlexNet Manager Suite On-Demand Datasheet
FlexNet Manager Suite On-Demand Datasheet
Flexera
 
Hindernisse beim Beten
Hindernisse beim BetenHindernisse beim Beten
Hindernisse beim Beten
Ingo Breuer
 
Optimiertes Lizenzmanagement für das Rechenzentrum
Optimiertes Lizenzmanagement für das RechenzentrumOptimiertes Lizenzmanagement für das Rechenzentrum
Optimiertes Lizenzmanagement für das Rechenzentrum
Flexera
 
Erfolgreiches Lizenzmanagement in Virtual-Desktop-Umgebungen und BYOD-Modellen
Erfolgreiches Lizenzmanagement in Virtual-Desktop-Umgebungen und BYOD-ModellenErfolgreiches Lizenzmanagement in Virtual-Desktop-Umgebungen und BYOD-Modellen
Erfolgreiches Lizenzmanagement in Virtual-Desktop-Umgebungen und BYOD-Modellen
Flexera
 
Fulles Fang
Fulles FangFulles Fang
Fulles Fang
Passeres
 
ZüRich ~
ZüRich ~ZüRich ~
ZüRich ~
mary
 
Master of international Business Administration
Master of international Business AdministrationMaster of international Business Administration
Master of international Business Administration
MIBA University of Hamburg
 
ZüRich ~
ZüRich ~ZüRich ~
ZüRich ~
mary
 
Manifest des freien Urchristentums an das deutsche Volk
Manifest des freien Urchristentums an das deutsche VolkManifest des freien Urchristentums an das deutsche Volk
Manifest des freien Urchristentums an das deutsche Volk
Ingo Breuer
 
5 Länder - 5 Storys
5 Länder - 5 Storys5 Länder - 5 Storys
5 Länder - 5 Storys
ivanabrabcova
 

Andere mochten auch (15)

Präsi1.3
Präsi1.3Präsi1.3
Präsi1.3
 
Retail
RetailRetail
Retail
 
Alexander Kluge: A Distant Reading
Alexander Kluge: A Distant ReadingAlexander Kluge: A Distant Reading
Alexander Kluge: A Distant Reading
 
Dr. iur.Pedro Bejarano Alomia, LL.M. - Neonaticide - Doctoral Thesis
Dr. iur.Pedro Bejarano Alomia, LL.M. - Neonaticide - Doctoral ThesisDr. iur.Pedro Bejarano Alomia, LL.M. - Neonaticide - Doctoral Thesis
Dr. iur.Pedro Bejarano Alomia, LL.M. - Neonaticide - Doctoral Thesis
 
FlexNet Manager Suite On-Demand Datasheet
FlexNet Manager Suite On-Demand DatasheetFlexNet Manager Suite On-Demand Datasheet
FlexNet Manager Suite On-Demand Datasheet
 
Hindernisse beim Beten
Hindernisse beim BetenHindernisse beim Beten
Hindernisse beim Beten
 
Optimiertes Lizenzmanagement für das Rechenzentrum
Optimiertes Lizenzmanagement für das RechenzentrumOptimiertes Lizenzmanagement für das Rechenzentrum
Optimiertes Lizenzmanagement für das Rechenzentrum
 
Erfolgreiches Lizenzmanagement in Virtual-Desktop-Umgebungen und BYOD-Modellen
Erfolgreiches Lizenzmanagement in Virtual-Desktop-Umgebungen und BYOD-ModellenErfolgreiches Lizenzmanagement in Virtual-Desktop-Umgebungen und BYOD-Modellen
Erfolgreiches Lizenzmanagement in Virtual-Desktop-Umgebungen und BYOD-Modellen
 
Fulles Fang
Fulles FangFulles Fang
Fulles Fang
 
ZüRich ~
ZüRich ~ZüRich ~
ZüRich ~
 
P kfgos
P kfgosP kfgos
P kfgos
 
Master of international Business Administration
Master of international Business AdministrationMaster of international Business Administration
Master of international Business Administration
 
ZüRich ~
ZüRich ~ZüRich ~
ZüRich ~
 
Manifest des freien Urchristentums an das deutsche Volk
Manifest des freien Urchristentums an das deutsche VolkManifest des freien Urchristentums an das deutsche Volk
Manifest des freien Urchristentums an das deutsche Volk
 
5 Länder - 5 Storys
5 Länder - 5 Storys5 Länder - 5 Storys
5 Länder - 5 Storys
 

Ähnlich wie XHTML & CSS Workshop

Anforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScriptAnforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScript
Christian Baranowski
 
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
Noël Bossart
 
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)
Eric Eggert
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
Felix Sasaki
 
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
 
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
Gino Cremer
 
mm_forum 2.0
mm_forum 2.0mm_forum 2.0
mm_forum 2.0
mhelmich
 
Docbook: Textverarbeitung mit XML
Docbook: Textverarbeitung mit XMLDocbook: Textverarbeitung mit XML
Docbook: Textverarbeitung mit XML
Peter Eisentraut
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
adesso AG
 
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
 
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions
 
InDesign und XML in der Praxis
InDesign und XML in der PraxisInDesign und XML in der Praxis
InDesign und XML in der Praxis
StefanGoebel
 
FMK2012: Strukturierte Scriptprogrammierung und neue Befehle und Scriptbefehl...
FMK2012: Strukturierte Scriptprogrammierung und neue Befehle und Scriptbefehl...FMK2012: Strukturierte Scriptprogrammierung und neue Befehle und Scriptbefehl...
FMK2012: Strukturierte Scriptprogrammierung und neue Befehle und Scriptbefehl...
Verein FM Konferenz
 
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
Developing UXD
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Andreas Wissel
 
XML Director - the technical foundation of onkopedia.com
XML Director - the technical foundation of onkopedia.comXML Director - the technical foundation of onkopedia.com
XML Director - the technical foundation of onkopedia.com
Andreas Jung
 
Ec2009 Templates
Ec2009 TemplatesEc2009 Templates
Ec2009 Templates
Ulrich Krause
 
Top 10 Internet Trends 2000
Top 10 Internet Trends 2000Top 10 Internet Trends 2000
Top 10 Internet Trends 2000
Jürg Stuker
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
Alexander Schmidt
 
"Best Practices" in Contao
"Best Practices" in Contao"Best Practices" in Contao
"Best Practices" in Contao
Peter Müller
 

Ähnlich wie XHTML & CSS Workshop (20)

Anforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScriptAnforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScript
 
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
 
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
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+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
 
mm_forum 2.0
mm_forum 2.0mm_forum 2.0
mm_forum 2.0
 
Docbook: Textverarbeitung mit XML
Docbook: Textverarbeitung mit XMLDocbook: Textverarbeitung mit XML
Docbook: Textverarbeitung mit XML
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
 
Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)
 
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09
 
InDesign und XML in der Praxis
InDesign und XML in der PraxisInDesign und XML in der Praxis
InDesign und XML in der Praxis
 
FMK2012: Strukturierte Scriptprogrammierung und neue Befehle und Scriptbefehl...
FMK2012: Strukturierte Scriptprogrammierung und neue Befehle und Scriptbefehl...FMK2012: Strukturierte Scriptprogrammierung und neue Befehle und Scriptbefehl...
FMK2012: Strukturierte Scriptprogrammierung und neue Befehle und Scriptbefehl...
 
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
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
XML Director - the technical foundation of onkopedia.com
XML Director - the technical foundation of onkopedia.comXML Director - the technical foundation of onkopedia.com
XML Director - the technical foundation of onkopedia.com
 
Ec2009 Templates
Ec2009 TemplatesEc2009 Templates
Ec2009 Templates
 
Top 10 Internet Trends 2000
Top 10 Internet Trends 2000Top 10 Internet Trends 2000
Top 10 Internet Trends 2000
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
"Best Practices" in Contao
"Best Practices" in Contao"Best Practices" in Contao
"Best Practices" in Contao
 

XHTML & CSS Workshop

  • 1. Web-Engineering Einführung in HTML & CSS … ein Workshop von Holger Rüprich 30.11.2009 DHBW Mosbach
  • 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. Übersicht (1) Grundlagen (2) Tools (3) XHTML (4) CSS 30.11.2009 Web-Engineering Workshop '09 3 von 103
  • 4. (1) Grundlagen „Eine Webseite ist kein Gemälde“ Jens Grochtdreis
  • 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. 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. 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. Standards? 30.11.2009 Web-Engineering Workshop '09 8 von 103
  • 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. 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. 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. Eine HTML, viele CSS 30.11.2009 Web-Engineering Workshop '09 12 von 103
  • 13. Das gleiche HTML, anderes CSS 30.11.2009 Web-Engineering Workshop '09 13 von 103
  • 14. Das gleiche HTML, anderes CSS 30.11.2009 Web-Engineering Workshop '09 14 von 103
  • 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. (2) Tools Nützliches für Web-Entwickler
  • 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. 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. 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. 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. (3) XHTML Syntax, Struktur, Attribute, …
  • 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. (3) XHTML Teil 1 Einführung, Grundlagen
  • 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. 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. 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. 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. Benannte Zeichenreferenzen • verwendet statt der Codeposition eine Zeichenkombination < Kleiner-als &#60; &#x003C; &lt; > Größer-als &#62; &#x003E; &gt; " Anführungszeichen &#34; &#x0022; &quot; & Ampersand &#38; &#x0026; &amp; 30.11.2009 Web-Engineering Workshop '09 28 von 103
  • 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. 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. 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. 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. 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. 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. 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. Ü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. 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. 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. (3) XHTML Teil 2 Auszeichnung der Inhalte
  • 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. 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. Ü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. 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. 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. 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. Ü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. 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. 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. 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. 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. 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. 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. 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. Ü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. 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. 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. Ü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
  • 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. Ü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. (4) CSS Teil 1 Einführung in CSS
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. (4) CSS Teil 2 Eigenschaften und Werte
  • 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. 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. 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. 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. 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. Ü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. 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. 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. 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. Ü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. 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. Das Boxenmodell 30.11.2009 Web-Engineering Workshop '09 87 von 103
  • 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. 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. 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. 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. Ü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. 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. 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. Übung 9 Boxen der Demo-Seite mit Floats ausrichten. Zeit: 20 Minuten 30.11.2009 Web-Engineering Workshop '09 95 von 103
  • 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. 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. Übung 10 Realisierung des Seitenlayouts der Demo-Seite. Zeit: wieviel noch bleibt… 30.11.2009 Web-Engineering Workshop '09 98 von 103
  • 99. Übung 11 Navigation Zeit: … 30.11.2009 Web-Engineering Workshop '09 99 von 103
  • 100. Übung 12 Accessibilty Zeit: … 30.11.2009 Web-Engineering Workshop '09 100 von 103
  • 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. 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. Vielen Dank für eure Aufmerksamkeit. Gibt es noch Fragen?