XHTML & CSS Workshop

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


(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


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!


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?
– ...


Standards?


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


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


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


Eine HTML, viele CSS


Das gleiche HTML, anderes CSS


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


(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


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/


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


Firefox Extensions
• HTML Validator
– Schneller Hinweis auf Fehler

• ColorZilla
– Farbwerte aufnehmen
– ColorPicker


(3) XHTML
Syntax, Struktur, Attribute, …

Übersicht
• Teil 1 (Einführung, Grundlagen)‫‏‬
– Syntax
– Struktur eines XHTML Dokuments
– Metaangaben
– Universalattribute

• Teil 2
– Auszeichnung der Inhalte


(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 />


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 -->


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


Nummerische Zeichenreferenzen
• gibt die Codeposition eines Zeichens im gewählten
Dokumentzeichensatz an

&#N; dezimale Zeichennummer N

&#xN; hexadezimale Zeichennummer N


Benannte Zeichenreferenzen
• verwendet statt der Codeposition eine
Zeichenkombination

< Kleiner-als < < <

> Größer-als > > >

" Anführungszeichen " " "

& Ampersand & & &


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


• 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


• 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


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">


• 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


• 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


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"/>


Übung 1

XHTML-Dokument anlegen.

Infos:
DOCTYPE: XHTML 1.0 Strict
Zeichensatz: UTF-8

Zeit: 10 Minuten


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">


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"/>


(3) XHTML Teil 2
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!


• 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


Ü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


• 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


• 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>


• 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


Übung 3

Demo-Seite um Links und Bilder erweitern.

Info: Bilder im Ordner “images”

Zeit: 10 Minuten


• 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


• 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


• Listen
– Zur Organisation von Informationen
– In XHTML gibt es 3 Arten von Listen:
• Ungeordnete Listen: ul
• Geordnete Listen: ol
• Definitionslisten: dl


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>Deﬁnitionslisten.</li>

</ul>


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>


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.


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>


Übung 4

Demo-Seite um Listen erweitern.

Info: Navigation und Speisekarte sollen als
ungeordnete Liste umgesetzt werden.
(navigation.txt)

Zeit: 20 Minuten


• 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


• 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


Übung 5

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

Info: IDs und Klassen verwenden.

Zeit: 15 Minuten


Übersicht
• Teil 1
– Einführung
– Einbindung in ein XHTML Dokument
– Syntax und Vokabular
– Selektoren
– Initialwerte & Vererbung
– Die Kaskade


Übersicht
• Teil 2
– Werte
– Farben und Hintergründe
– Schrift
– Text
– Das Boxmodell
– Ausrichtung & Elementenfluss
– Positionierung
– Breite und Höhe


(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


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


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>


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" />


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" />


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" />


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


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


•
Beispiel für Deklarationen:

p { margin: 0; }

h1, h2, h3, h4, h5, h6 {

color: #889399;

background-color: transparent;

margin: 2em 0 1em 0;

}


• Kommentare

/* Einzeiliger Kommentar */

/* Mehrzeiliger

Kommentar */

• Stylesheet importieren

@import "fonts.css";

@import url("fonts.css");


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


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


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


(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, …


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; }


Werte
• URI Adressierung einer Ressource
• Zeichenkette beliebige Zeichen, Wörter o. Sätze
• inherit soll den Wert des Elternelements erben


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


Farben und Hintergründe
• Zusammenfassender Hintergrund: background
– background-color
– background-image
– background-repeat
– background-attachment
– backgourn-position


Übung 6

Hintergrundbild und Farben für die Demo-Seite.

Info: Bilder im Ordner “images”

Zeit: 20 Minuten


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


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;

}


Text
• Texteinzug: text-indent
• Horizontale Ausrichtung: text-align
• Ausschmückung: text-decoration
• Laufweite: letter-spacing
• Wortabstände: word-spacing
• Groß- und Kleinschreibung: text-transform


Übung 7

Typografische Gestaltung der Demo-Seite

Info: siehe schrift.txt

Zeit: 20 Minuten


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)‫‏‬


Das Boxenmodell


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


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


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>


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, …


Übung 8

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

Info: Abstände siehe groessen.txt

Zeit: 20 Minuten


Ausrichtung & Elementenfluss
• Floatierte Boxen: ﬂoat
– 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


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


Übung 9

Boxen der Demo-Seite mit Floats ausrichten.

Zeit: 20 Minuten


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
– ﬁxed

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


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


Übung 10

Realisierung des Seitenlayouts der Demo-Seite.

Zeit: wieviel noch bleibt…


Übung 11

Navigation

Zeit: …


Übung 12

Accessibilty

Zeit: …


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


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/


Vielen Dank für eure
Aufmerksamkeit.
Gibt es noch Fragen?

XHTML & CSS Workshop

Weitere ähnliche Inhalte

Andere mochten auch

Ähnlich wie XHTML & CSS Workshop

XHTML & CSS Workshop