Das Dokument behandelt die Grundlagen von XHTML und CSS, einschließlich der Syntax und der Verwendung von Tags, Attributen sowie der Strukturierung von Webseiten. Es wird erläutert, wie Tag-Verschachtelung und die Einhaltung von Standards zur Schaffung einer übersichtlichen und funktionalen Webpräsenz beitragen. Zudem werden bewährte Methoden für das Einbinden von CSS und den Umgang mit Konflikten bei der Klassendeklaration vorgestellt.

1. XHTML & CSS
Lektionen 5-8
© 2009 by Noël Bossart

2. welcome.
« The internet,
it will never catch on. »
George W. Bush 1986
© 2009 by Noël Bossart

3. Ablauf heute
XHTML Syntax
XHTML Elemente kennenlernen
Pause
CSS Syntax
Box Model & Block vs. Inline

5. ?
?

6. σύνταξις
σύνzusammen ταξιςOrdnung
Modernes Webdesign Seite 21

7. XHTML Syntax
Wir haben bereits gesehen, dass wir mit XHTML im
Prinzip einfach einen Text auszeichnen. Also mit
sogenannten Tags (auch HTML Elemete) gewisse
Breiche in einem Text markieren und dem System
mitteilen, welcher Art der Bereich ist.

8. Titel Anfang
Titel Ende
XHTML Syntax
Wir haben bereits gesehen, dass wir mit XHTML im
Prinzip einfach einen Text auszeichnen. Also mit
sogenannten Tags (auch HTML Elemete) gewisse
Breiche in einem Text markieren und dem System
mitteilen, welcher Art der Bereich ist.

9. Titel Anfang
Titel Ende
XHTML Syntax
Wir haben bereits gesehen, dass wir mit XHTML im
Prinzip einfach einen Text auszeichnen. Also mit
sogenannten Tags (auch HTML Elemete) gewisse
Breiche in einem Text markieren und dem System
Paragraf Anfang
mitteilen, welcher Art der Bereich ist.
Paragraf Ende

10. Titel Anfang
Titel Ende
XHTML Syntax
Wir haben bereits gesehen, dass wir mit XHTML im
Wichtig Anfang
Prinzip einfach einen Text Wichtig Ende Also mit
auszeichnen.
sogenannten Tags (auch HTML Elemete) gewisse
Breiche in einem Text markieren und dem System
Paragraf Anfang
mitteilen, welcher Art der Bereich ist.
Paragraf Ende

11. XML:
<titel>XHTML Syntax</titel>
<paragraf>Wir haben bereits gesehen, dass wir mit
XHTML im Prinzip einfach einen Text auszeichnen. Also
mit sogenannten <wichtig>Tags</wichtig> gewisse
Bereiche in einem Text markieren und dem System
mitteilen, welcher Art der Bereich ist.</paragraf>

12. Doctype: XHTML 1.0:
<h1>XHTML Syntax</h1>
<p>
Wir haben bereits gesehen, dass wir mit XHTML im
Prinzip einfach einen Text auszeichnen. Also mit
sogenannten <strong>Tags</strong> gewisse Breiche
in einem Text markieren und dem System mitteilen,
welcher Art der Bereich ist.
</p>

13. Tags
Theorie:
<tag>Inhalt</tag>
Praxis:
<a>Eine E-Mail schreiben</a>
Jeder Tag hat einen Anfang und ein Ende. Er Umschliesst einen
gewissen Bereich und definiert damit, was dieser Bereich ist. Zum
Beispiel ein Bild, ein Link oder ein Titel... Die Tags einer Webseite
werden durch den Browser nicht angezeigt, sie sind also unsichtbar.
Nur deren Inhalt wird dargestellt.

14. Tags
Anfang
Theorie:
<tag>Inhalt</tag>
Praxis:
<a>Eine E-Mail schreiben</a>
Jeder Tag hat einen Anfang und ein Ende. Er Umschliesst einen
gewissen Bereich und definiert damit, was dieser Bereich ist. Zum
Beispiel ein Bild, ein Link oder ein Titel... Die Tags einer Webseite
werden durch den Browser nicht angezeigt, sie sind also unsichtbar.
Nur deren Inhalt wird dargestellt.

15. Tags
Anfang
Theorie:
<tag>Inhalt</tag>
Ende
Praxis:
<a>Eine E-Mail schreiben</a>
Jeder Tag hat einen Anfang und ein Ende. Er Umschliesst einen
gewissen Bereich und definiert damit, was dieser Bereich ist. Zum
Beispiel ein Bild, ein Link oder ein Titel... Die Tags einer Webseite
werden durch den Browser nicht angezeigt, sie sind also unsichtbar.
Nur deren Inhalt wird dargestellt.

16. Tags
Huhn
Anfang
Theorie:
<tag>Inhalt</tag>
Ende
Praxis:
<a>Eine E-Mail schreiben</a>
Jeder Tag hat einen Anfang und ein Ende. Er Umschliesst einen
gewissen Bereich und definiert damit, was dieser Bereich ist. Zum
Beispiel ein Bild, ein Link oder ein Titel... Die Tags einer Webseite
werden durch den Browser nicht angezeigt, sie sind also unsichtbar.
Nur deren Inhalt wird dargestellt.

17. Attribute
Theorie:
<tag attribut>Inhalt</tag>
Praxis:
<a href>Eine E-Mail schreiben</a>
Attribute geben den Tags gewisse zusätzliche Eigenschaften mit,
um das Tag genauer zu beschreiben oder es um Funktionen zu
erweitern. Das Element bestimmt, welche Attribute optional oder
zwingend nötig sind. Einem Tag kann auch mehrere Attribute
(durch ein Leerzeichen getrennt) zugeordnet werden.

18. Attribute Huhn: Farbe
Theorie:
<tag attribut>Inhalt</tag>
Praxis:
<a href>Eine E-Mail schreiben</a>
Attribute geben den Tags gewisse zusätzliche Eigenschaften mit,
um das Tag genauer zu beschreiben oder es um Funktionen zu
erweitern. Das Element bestimmt, welche Attribute optional oder
zwingend nötig sind. Einem Tag kann auch mehrere Attribute
(durch ein Leerzeichen getrennt) zugeordnet werden.

19. Attribut-Wert
Theorie:
<tag attribut=”Wert”>Inhalt</tag>
Praxis:
<a href=”mailto:noel.zbw@me.com”>Eine E-Mail schreiben</a>
Attribute benötigen immer eine Wertzuweisung. Ein alleinstehendes
Attribut gibt es nicht (Als Beispiel: nicht nur selected, sondern
selected=”selected”). Der Wert wird dem Attribut mit einem
Gleichheitszeichen und umschlossen mit einfachen oder zweifachen
Anführungszeichen zugewiesen.

20. Attribut-Wert
Huhn: Farbe: pink
Theorie:
<tag attribut=”Wert”>Inhalt</tag>
Praxis:
<a href=”mailto:noel.zbw@me.com”>Eine E-Mail schreiben</a>
Attribute benötigen immer eine Wertzuweisung. Ein alleinstehendes
Attribut gibt es nicht (Als Beispiel: nicht nur selected, sondern
selected=”selected”). Der Wert wird dem Attribut mit einem
Gleichheitszeichen und umschlossen mit einfachen oder zweifachen
Anführungszeichen zugewiesen.

21. XHTML Syntax
Theorie:
<tag attribut=”Wert”>Inhalt</tag>
Praxis:
<a href=”mailto:noel.zbw@me.com”>Eine E-Mail schreiben</a>
Der Inhalt welcher von einem Tag umschlossen wird, kann fast
beliebig sein, und stellt den sichtbaren Bereich der Webseite dar,
während Tags und Attribute für den Benutzer unsichtbar sind
(Attribut-Werte können direkten Einfluss auf die Darstellung haben,
wären die Tags höchstens implizit Einflüsse haben).
Modernes Webdesign Seite 188

22. XHTML Syntax
Susi
Theorie:
<tag attribut=”Wert”>Inhalt</tag>
Praxis:
<a href=”mailto:noel.zbw@me.com”>Eine E-Mail schreiben</a>
Der Inhalt welcher von einem Tag umschlossen wird, kann fast
beliebig sein, und stellt den sichtbaren Bereich der Webseite dar,
während Tags und Attribute für den Benutzer unsichtbar sind
(Attribut-Werte können direkten Einfluss auf die Darstellung haben,
wären die Tags höchstens implizit Einflüsse haben).
Modernes Webdesign Seite 188

23. Verbotene Zeichen
Wie immer, es gibt ein paar Dinge, die verboten sind:
Folgende Zeichen sind im Inhalt verboten und müssen
maskiert werden:
> &gt;
< &lt;
“ &quote;
& &amp;

24. XHTML Syntax
Neben Tags welche einen Inhalt umschliessen, gibt es auch
welche, die keinen Inhalt haben. Es sind leere Tags. Sie haben
also keine separaten Bereich in denen sie geöffnet und
geschlossen werden sondern werden in einem Tag geöffnet
und geschlossen:
Theorie:
<tag />
Praxis:
<br />

25. XHTML Syntax
Neben Tags welche einen Inhalt umschliessen, gibt es auch
welche, die keinen Inhalt haben. Es sind leere Tags. Sie haben
also keine separaten Bereich in denen sie geöffnet und
geschlossen werden sondern werden in einem Tag geöffnet
und geschlossen:
Anfang
Theorie:
<tag />
Praxis:
<br />

26. XHTML Syntax
Neben Tags welche einen Inhalt umschliessen, gibt es auch
welche, die keinen Inhalt haben. Es sind leere Tags. Sie haben
also keine separaten Bereich in denen sie geöffnet und
geschlossen werden sondern werden in einem Tag geöffnet
und geschlossen:
Anfang
Theorie:
<tag />
Ende
Praxis:
<br />

27. XHTML Syntax
Ein solcher leerer Tag kann selbstverständlich auch eines oder
mehrere Attribute enthalten:
Theorie:
<tag attribut1=”Wert1” attribut2=”Wert1” />
Praxis:
<input type=”button” value=”Senden” />

28. XHTML Syntax
Ein solcher leerer Tag kann selbstverständlich auch eines oder
mehrere Attribute enthalten:
Theorie:
<tag attribut1=”Wert1” attribut2=”Wert1” />
Anfang
Praxis:
<input type=”button” value=”Senden” />

29. XHTML Syntax
Ein solcher leerer Tag kann selbstverständlich auch eines oder
mehrere Attribute enthalten:
Theorie:
<tag attribut1=”Wert1” attribut2=”Wert1” />
Anfang
Praxis:
<input type=”button” value=”Senden” />
Ende

30. Alles hat ein Ende...
Alles was ein Anfang hat, hat ein Ende. Das ist bei
HTML nicht anders – wenn ein Titel-Tag beginnt, muss
er auch irgendwo wieder ein Ende haben. Das selbe gilt
auch für Abschnitte, Links und Bilder. Bevor HTML an
den XML Standard angelehnt wurde, musste man nicht
alle Tags schliessen. XML verlangt jedoch zwingend,
dass alles immer geschlossen werden muss. So
erhält man eine strukturierte Übersicht über ein
Dokument.

31. Verschachtelung
First in, last out.
XHTML Elemente können verschachtelt werden. So kann ein
Abschnitt beispielsweise einen Link enthalten, und ein Block
einen Abschnitt. Dies nennt man den Dokument-Baum oder
auch DOM (Document Object Model).
Wichtig ist, dass die Tags in der richtigen Reihenfolge
geschlossen werden. Der Tag der zuerst geöffnet wurde, muss
zuletzt geschlossen werden:
<p>
Suche auf <a href=”www.google.com”>google</a>!
</p>

32. Verschachtelung
First in, last out.
XHTML Elemente können verschachtelt werden. So kann ein
Abschnitt beispielsweise einen Link enthalten, und ein Block
einen Abschnitt. Dies nennt man den Dokument-Baum oder
auch DOM (Document Object Model).
Wichtig ist, dass die Tags in der richtigen Reihenfolge
geschlossen werden. Der Tag der zuerst geöffnet wurde, muss
1
zuletzt geschlossen werden:
<p>
Suche auf <a href=”www.google.com”>google</a>!
</p>

33. Verschachtelung
First in, last out.
XHTML Elemente können verschachtelt werden. So kann ein
Abschnitt beispielsweise einen Link enthalten, und ein Block
einen Abschnitt. Dies nennt man den Dokument-Baum oder
auch DOM (Document Object Model).
Wichtig ist, dass die Tags in der richtigen Reihenfolge
geschlossen werden. Der Tag der zuerst geöffnet wurde, muss
1
zuletzt geschlossen werden:
2
<p>
Suche auf <a href=”www.google.com”>google</a>!
</p>

34. Verschachtelung
First in, last out.
XHTML Elemente können verschachtelt werden. So kann ein
Abschnitt beispielsweise einen Link enthalten, und ein Block
einen Abschnitt. Dies nennt man den Dokument-Baum oder
auch DOM (Document Object Model).
Wichtig ist, dass die Tags in der richtigen Reihenfolge
geschlossen werden. Der Tag der zuerst geöffnet wurde, muss
1
zuletzt geschlossen werden:
2
<p>
Suche auf <a href=”www.google.com”>google</a>!
</p>
3

35. Verschachtelung
First in, last out.
XHTML Elemente können verschachtelt werden. So kann ein
Abschnitt beispielsweise einen Link enthalten, und ein Block
einen Abschnitt. Dies nennt man den Dokument-Baum oder
auch DOM (Document Object Model).
Wichtig ist, dass die Tags in der richtigen Reihenfolge
geschlossen werden. Der Tag der zuerst geöffnet wurde, muss
1
zuletzt geschlossen werden:
2
<p>
Suche auf <a href=”www.google.com”>google</a>!
</p>
3
4

36. Einrückung
Damit verschachtelte Elemente nicht unübersichtlich
werden, werden die eingeschlossenen Elemente auf
einer neuen Zeile und eingerückt geschrieben:

37. XHTML Syntax Regeln
Tags und Attribute wird immer klein geschrieben
Tags müssen immer geschlossen werden />
Tags müssen immer richtig verschachtelt sein
XHTML Dokumente haben immer nur 1 Root-Element (<html>)
Tags können ein oder mehrere, bestimmte Attribute haben
Attribute haben immer einen Wert und sind immer mit “” versehen
Jedes id und name Attribut muss mit einem Buchstaben beginnen
und darf im Dokument nur einmal vorkommen

38. XHTML Syntax
Fehler im Code kann zu
falscher Darstellung führen
und behinderten Menschen
sowie Maschinen (google) den
Zugriff erschweren oder
verunmöglichen!

39. just do it.
Hausaufgaben
© 2009 by Noël Bossart

40. Hausaufgaben
Kapitel 1.3.5 Seite 37 - 40 und Seit 189 - 200
Was bedeutet semantisches HTML?

41. Fehler finden
Zeichne die Syntaxfehler an und korrigiere sie.
Es wird davon ausgegangen, dass alle im Code
vorhandenen Tags grundsätzlich erlaubt sind.

42. hello

43. hello world.
Grundsätzlicher Aufbau:
<html />
Das <html> Tag umschliesst das gesamte Dokument
(ausser der Doctype Definition) und dient als absolutes
Elternelement (auch Root-Element). Es ist meist
unsichtbar.
Modernes Webdesign Seite 188

44. hello world.
Grundsätzlicher Aufbau:
<html />
<head />
Das Head Element enthält grundlegende
Informationen zum Dokument wie Titel, Sprache,
Zusammenfassung und Links auf benötigte Dateien
wie CSS und JavaScript Files. Es ist unsichtbar.
Modernes Webdesign Seite 190

45. hello world.
Grundsätzlicher Aufbau:
<html />
<head />
<body />
Der Body beinhaltet die eigentliche Seite mit allen
Inhalten. Es ist der sichtbare Bereich der Webseite.
Modernes Webdesign Seite 191

46. HTML Grundelemente
<html />
<head />
<body />
Modernes Webdesign Seite 188-91

47. hello world.
Los geht’s, wir erstellt mit dem heute angeeigneten Wissen eine Webseite
mit folgenden Kriterien:
Liste der persönliche Daten (Name, Adresse, E-Mail etc. Hobbies)
Foto von sich falls vorhanden, oder sonst ein Bild einer Person
Links zu den Seiten der Banknachbarn (links & rechts)
Nummerierte Link-Liste mit persönlichen Lieblingswebseiten
Externe CSS-Datei einbinden
Wichtige Tags: Modernes Webdesign Seite 194-208

48. facelifting.
CSS Syntax
© 2009 by Noël Bossart Modernes Webdesign Seite 213+

49. CSS Einbinden
Inline: Sollte vermieden werden da schwer zu überschreiben und Trennung von
Inhalt und Design nicht gegeben.
<tag style=”eigenschaft1: wert1 wert2;” />
<h1 style=”color: #ff0000;”>Hallo Welt</h1>
Direkt im head-Tag: Sollte vermieden werden weil der weitere Aufbau der
Seite dadurch verzögert wird, bis das CSS geladen ist. Ausserdem ist die
Trennung von Design und Inhalt nicht gegeben.
<head>
<style type="text/css" media="screen">
h1 { color: #ff0000; }
</style>
</head>

50. CSS Einbinden
Im Head verlinken: Dies ist die beste Methode um CSS einzubinden da sie
Inhalt von Design trennt, und ausserdem auch Performance Vorteile hat –
Caching der Dateien, Weiterladen der Seite wärend das CSS geladen wird,
weniger Code als bei Inline Styles, usw.
<head>
<link type="text/css" rel="stylesheet" href="css/main.css" />
<link type="text/css" rel="stylesheet" href="css/forms.css" />
<link type="text/css" rel="stylesheet" href="css/print.css"
media= "print"/>
</head>
Tipp: Es können auch mehrere CSS-Dateien eingebunden werden. Sollten zwei
Rules in Konflikt miteinander geraten, wird diejenige aus dem zuletzt geladenen
File Anwendung finden.
Modernes Webdesign Kapitel 8.1 & 8.3

51. CSS Syntax - Aufbau
Aufbau Beispiel
selektor { ul li.wichtig {
eigenschaft1: wert1 wert2; font-weight: bold;
eigenschaft2: wert1 wert2 wert3; border: 1px solid #f5a5e6;
} }
Modernes Webdesign Kapitel 8

52. Selektoren
Es zählt jeweils die letzte Eigenschaft: Beispiel:
Element { ... } ul li { ... }
Klassen { ... } .wichtig { ... }
Pseudo-Klassen { ... } a:hover { ... }
ID’s { ... } #hauptmenu { ... }
Kombination:
tag#id tag.klasse tag { ... } ul#main li.wichtig a { ... }
Mehrere Selektoren:
selektor1, selektor2 { ... } h1, h2, .titel { ... }
Modernes Webdesign Seite 213

53. Eigenschaften & Werte
Mehrere CSS Eigenschaften können mittels ; separiert werden und dürfen
nacheinander auf einer Zeile stehen. CSS Ignoriert Leerzeichen zwischen
Eigenschaften. Die meisten Eigenschaften können einen oder mehrere Werte
haben:
border: 3px dotted blue;
color: red;
margin: 0px 12px 3em;
padding-right: 2%;
background: red url(verlauf.jpg) repeat-x top left;
overflow: hidden;
float: left;
font: italic normal bold 1em/1.5em Arial, sans-serif;
Modernes Webdesign Kapitel 8.2

54. Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?
1. Sortieren nach Ursprung
Modernes Webdesign Kapitel 8.3 und Seite 29-30

55. Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?
1. Sortieren nach Ursprung
Modernes Webdesign Kapitel 8.3 und Seite 29-30

56. Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?
1. Sortieren nach Ursprung & Wichtigkeit
2. Sortieren nach Spezifität
Modernes Webdesign Kapitel 8.3

57. Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?
1. Sortieren nach Ursprung & Wichtigkeit
2. Sortieren nach Spezifität
enu li { col or: blue; }
ul#m
ul li { colo r: yellow; }
li.box { co lor: red; }
#menu
lor: grey; }
l i.wichtig { co
li { colo r: black; }
Modernes Webdesign Kapitel 8.3

58. Gewichtung / Spezifität
Jeder Selektor hat eine gewisse Gewichtung die sich aus seiner
Zusammensetzung aus Tags, ID’s und Klassen ergibt. Für die Deklaration immer
die schwächst mögliche Form wählen damit sich Werte überschreiben lassen!
Tags = 1 Punkt
Klassen = 10 Punkte
ID’s = 100 Punkte
Inline-Styles = 1000 Punkte
!important =
8
Important wenn immer möglich
vermeiden!
Modernes Webdesign Kapitel 8.3

59. Gewichtung / Spezifität
Jeder Selektor hat eine gewisse Gewichtung die sich aus seiner
Zusammensetzung aus Tags, ID’s und Klassen ergibt. Für die Deklaration immer
die schwächst mögliche Form wählen damit sich Werte überschreiben lassen!
Tags = 1 Punkt
Klassen = 10 Punkte ul li = 2
ID’s = 100 Punkte li.wichtig = 11
Inline-Styles = 1000 Punkte ul#menu li.box a = 113
!important = u l#menu = 101
8
li a:hover = 12
Important wenn immer möglich
<p style=”...”></p> = 1000
vermeiden!
Modernes Webdesign Kapitel 8.3

60. Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?
1. Sortieren nach Ursprung & Wichtigkeit
2. Sortieren nach Spezifität
3. Sortieren nach Reihenfolge im CSS
Modernes Webdesign Kapitel 8.3

61. Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?
1. Sortieren nach Ursprung & Wichtigkeit
2. Sortieren nach Spezifität body {
3. Sortieren nach Reihenfolge im CSS color: red;
color: blue;
color: yellow;
}
Modernes Webdesign Kapitel 8.3

62. Überschreiben
Werte können sich überschreiben. Beispiel:
Dabei wird der letzte Wert welcher h2 {
einem Element zugeordnet wird border: 1px solid red ;
verwendet. border-color: blue;
Sich überschreibende Werte können }
auch an unterschiedlichen Stellen in der
CSS Datei, in einem anderen File, oder Der Rand ist blau.
sogar direkt im HTML stehen. Es ist
daher wichtig, eine gute Ordnung im
CSS zu behalten.
Modernes Webdesign Kapitel 8.3

63. CSS - Ordnung
Lies selbständig Kapitel 8.4 (Seite 219)
aus “Modernes Webdesign”. Falls Du
Fragen hast, löse diese mit deinem
Partner.

64. the box model.

65. Das Box Model
Modernes Webdesign Kapitel 2.2.5

66. Das Box Model
Inhalt
Modernes Webdesign Kapitel 2.2.5

67. Das Box Model
width
Inhalt
Modernes Webdesign Kapitel 2.2.5

68. Das Box Model
width
Inhalt
height
Modernes Webdesign Kapitel 2.2.5

69. Das Box Model
width
Innenabstand
Inhalt
height
Modernes Webdesign Kapitel 2.2.5

70. Das Box Model
width border
Innenabstand
Inhalt
height
Modernes Webdesign Kapitel 2.2.5

71. Das Box Model
width border
Aussenabstand
Innenabstand
Inhalt
height
Modernes Webdesign Kapitel 2.2.5

72. Das Box Model
Aussenabstand Lorem ipsu
amet, cons
Innenabstand
adipiscing
Inhalt
Quisque ve
sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen

73. Das Box Model
margin Lorem ipsu
amet, cons
adipiscing
Inhalt
Quisque ve
sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen

74. Das Box Model
margin Lorem ipsu
amet, cons
adipiscing
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Quisque ve
Quisque velit odio, sagittis ac, sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen

75. Das Box Model
Lorem ipsu
amet, cons
adipiscing
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Quisque ve
Quisque velit odio, sagittis ac, sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen

76. Das Box Model... immer?
Lorem ipsu
amet, cons
adipiscing
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Quisque ve
Quisque velit odio, sagittis ac, sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen

77. Das Box Model... immer?
Lorem ipsu
amet, cons
adipiscing
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Quisque ve
Quisque velit odio, sagittis ac, sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen

78. Das Box Model... immer?
I N ! Lorem ipsu
E
amet, cons
N
adipiscing
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Quisque ve
Quisque velit odio, sagittis ac, sagittis ac,
elementum
venenatis a
Done
Lorem ipsum dolor sit amet, consectetuer adipiscing
Quisque velit odio, sagittis ac, elementum ac, venen

79. Box Model Bug
width
margin
padding
Modernes Webdesign Kapitel 6.8.8
Normal
height
margin
padding
height
IE kleiner 7

80. CSS Notation
margin: ;
margin
padding: ; padding
object

81. CSS Notation
margin: ; top
margin
padding: ; padding
left object
right
bottom

82. CSS Notation
margin: 10px ; top
margin
padding: 10px ; padding
left object
right
bottom

83. CSS Notation
margin-right: ;
margin
padding-left: ; padding
object

84. CSS Notation
margin-right: 0 ;
margin
padding-left: ; padding
object
right

85. CSS Notation
margin-right: 0 ;
margin
padding-left: 0 ; padding
left object
right

86. Short Notation
margin: ;
margin
padding: ; padding
object

87. Short Notation
margin: ; top
margin
padding: ; padding
object
bottom

88. Short Notation
margin: 10px ; top
margin
padding: 10px ; padding
object
bottom

89. Short Notation
margin: 10px ; top
margin
padding: 10px ; padding
left object
right
bottom

90. Short Notation
margin: 10px 0 ; top
margin
padding: 10px 0 ; padding
left object
right
bottom

91. Short Notation
margin: 10px 0 ; ➊
margin
top
padding: 10px 0 ; padding
left object
right
bottom

92. Short Notation
margin: 10px 0 ; ➊
margin
top
padding: 10px 0 ; padding
➋ left object
right
bottom

93. CSS Notation
margin: ;
margin
padding
object

94. CSS Notation
margin: 10px ;
top
margin
padding
object

95. CSS Notation
margin: 10px 0 ;
top
margin
padding
object
right

96. CSS Notation
margin: 10px 0 20px ;
top
margin
padding
object
right
bottom

97. CSS Notation
margin: 10px 0 20px 5px ;
top
margin
padding
object
left right
bottom

98. CSS Notation
margin: 10px 0 20px 5px ;
top
left right
bottom

99. CSS Notation
padding: ;
margin
padding
object
Modernes Webdesign Seite 220+221

100. CSS Notation
padding: 10px 5px 15px 5px ;
top
margin
padding
object
left right
bottom
Modernes Webdesign Seite 220+221

101. CSS Notation
padding: 10px 5px 15px 5px ;
top
left right
bottom
Modernes Webdesign Seite 220+221

102. Block vs. Inline
Modernes Webdesign Seite 69 - 75

103. Block vs. Inline
Modernes Webdesign Seite 69 - 75

104. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Modernes Webdesign Seite 69 - 75

105. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Auch wenn sie ihn nicht brauchen.
Modernes Webdesign Seite 69 - 75

106. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Auch wenn sie ihn nicht brauchen.
Inline sind sparsamer.
Modernes Webdesign Seite 69 - 75

107. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Auch wenn sie ihn nicht brauchen.
Inline sind sparsamer. Inline Elemente sind nur
so gross wie ihr Inhalt & brechen am Zeilenende um.
Modernes Webdesign Seite 69 - 75

108. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Auch wenn sie ihn nicht brauchen.
Inline sind sparsamer. Inline Elemente sind nur
so gross wie ihr Inhalt & brechen am Zeilenende um.
Block erzwingt immer einen Umbruch.
Modernes Webdesign Seite 69 - 75

109. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Auch wenn sie ihn nicht brauchen.
Inline sind sparsamer. Inline Elemente sind nur
so gross wie ihr Inhalt & brechen am Zeilenende um.
Block erzwingt immer einen Umbruch.
Selbst wenn etwas daneben Platz hätte.
Modernes Webdesign Seite 69 - 75

110. find it.
Sherlock Holmes
© 2009 by Noël Bossart

111. Sherlock Holmes
Verwende das Bild der Original-Seite als Vorlage und
vervollständige den Code.
Tipp: Beachte die CSS-Deklarationen um Hinweise zu
erhalten, welche HTML Elemente fehlen und welche
Klassen und ID’s sie haben.

118. ?
?

119. home
work

120. homework
Lesen Modernes Webdesign Seite 213 - 226
“Hello World” HTML fertig machen

121. Ressourcen public.me.com/noelboss
Links delicious.com/noelboss+zbw
Link Feed feeds.delicious.com/rss/noelboss/zbw
Fragen & Feedback noel.zbw@me.com
more.