5. 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.
6. 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.
9. 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: Little Boxes Kapitel 3
10. 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
Die wichtigsten HTML Elemente: Little Boxes Seite 51...
13. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Little Boxes Kapitel 3.4
14. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Auch wenn sie ihn nicht brauchen.
Little Boxes Kapitel 3.4
15. Block vs. Inline
Block Elemente nehmen den ganzen Platz ein.
Auch wenn sie ihn nicht brauchen.
Inline sind sparsamer.
Little Boxes Kapitel 3.4
16. 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.
Little Boxes Kapitel 3.4
17. 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.
Little Boxes Kapitel 3.4
18. 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.
Little Boxes Kapitel 3.4
20. 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>
21. 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.
Little Boxes Kapitel 4.3
23. 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 { ... }
Little Boxes Kapitel 5.3
24. 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;
Little Boxes Kapitel 5.5 + 5.6
25. Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?
Little Boxes Kapitel 10
26. Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?
1. Sortieren nach Ursprung
Little Boxes Kapitel 11
27. Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?
1. Sortieren nach Ursprung
Little Boxes Kapitel 11
28. Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?
1. Sortieren nach Ursprung Webseite
Little Boxes Kapitel 11
29. 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
Little Boxes Seiten 118-120 + 202
30. 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; }
Little Boxes Seiten 118-120 + 202
31. 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!
Little Boxes Kapitel 6.5
32. 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!
Little Boxes Kapitel 6.5
33. 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
Little Boxes Seite 203
34. 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;
}
Little Boxes Seite 203
35. Überschreiben
Werte können sich überschreiben. Beispiel:
Dabei wird der letzte Wert welcher h1, h2 {
einem Element zugeordnet wird border: 1px solid red ;
verwendet. }
Sich überschreibende Werte können
auch an unterschiedlichen Stellen in der h2 {
CSS Datei, in einem anderen File, oder border-color: blue;
sogar direkt im HTML stehen. Es ist
}
daher wichtig, eine gute Ordnung im
CSS zu behalten.
Der Rand ist blau.
Little Boxes Seite 197 - 206
36. CSS - Vererbung
Lies selbständig Kapitel 10.3-10.5
(Seite 204+) aus “Little Boxes”. Falls Du
Fragen hast, löse diese mit deinem
Partner.
38. 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.