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:
> >
< <
“ "e;
& &
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
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!
41. Fehler finden
Zeichne die Syntaxfehler an und korrigiere sie.
Es wird davon ausgegangen, dass alle im Code
vorhandenen Tags grundsätzlich erlaubt sind.
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
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
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
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.
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
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
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.
