Wir werden lernen, wie Webseiten aufgebaut sind und wie das Ausssehen des Inhalts verändert wird.
Verstehen wie Inhalte im Web als reines HTML aussehen.
Schau dir den Quelltext dieser Seite an. Eine Möglichkeit, dies zu tun, ist ein Rechtklick irgendwo in das Browserfenster. Wähle dann „Seitenquelltext anzeigen“.
Du siehst nun den HTML-Quelltext dieser Seite. Lies ihn.
Webseiten werden als reiner Text geschrieben, ohne jegliche Formatierung. Kein fetter oder kursiver Text, keine Farben, Schriften oder Layout. (Als du dir den Quelltext gerade angesehen hast, hast du zwar Farben gesehen, aber nur weil der Browser das HTML versteht und es entsprechend präsentiert.)
Der Text in spitzen Klammern (Tags) enthält Meta-Informationen über die Struktur des Inhalts. P zum Beispiel steht für Paragraph (Absatz). Wir schreiben den Inhalt zwischen ein Tag-Paar um festzulegen, worum es sich bei dem Inhalt handelt, und um zu bestimmen wie er dargestellt wird.
Es gibt Start-Tags wie <p> und End-Tags wie
</p>. Einige Tags umschließen nichts anderes und werden
daher leere Elemente genannt. Um beispielsweise ein Bild einzubinden,
nutzen wir den <img>-Tag zusammen mit einem
src-Attribut, das die Adresse der Bilddatei angibt.
Diese Seite besitzt auch einen <head>-Bereich, in dem
Metainformationen über die gesamte Seite angegeben sind. Dadurch weiß der
Browser, wie der Titel der Seite lautet. Du wirst dort auch die folgende Zeile
finden:
<link rel="stylesheet" href="style.css">
Diese Zeile besagt, dass ein externes Stylesheet angewendet werden soll. Ein Stylesheet ist die Stelle, wo wir das Aussehen des HTMLs steuern. Aber lasst uns das erst einmal für einen Moment vergessen.
Verstehen, dass HTML eine Bedeutung hat noch bevor wir das Aussehen definieren.
Öffne die Beispielseite, die noch kein Stylesheet besitzt.
Schau dir den Quelltext der Beispielseite an. Lies ihn.
Nirgendwo in dieser HTML-Seite haben wir festgelegt, wie groß die
Überschrift dargestellt wird, dass der Text zwischen
<strong>-Tags fett ist, dass <em> kursiv sein
soll oder dass es einen Abstand vor und nach <p>-Tags gibt.
Diese Tags haben eine Bedeutung und der Browser stellt sie in einer Weise dar, die den meisten Menschen beim Lesen einleuchtet. Das ist schön und gut, aber wäre es nicht toll, die Schriftart, die Farbe, die Position und VIELES mehr hinsichtlich des Darstellung wählen zu können? Nun, das ist möglich! Wir können das mit in einem Stylesheet erreichen.
Verstehen wie das Aussehen der Inhalte auf Webseiten festgelegt wird.
Öffne die Beispielseite, mit der ein Stylesheet verknüft ist.
Schau dir den Quelltext der Beispielseite an. Lies ihn.
Öffne das externe Stylesheet der Beispielseite. Lies es.
Stylesheets sind eine Sammlung von Regeln. Jede Regel besagt, für welchen Inhalt die Regel gilt und wie dieser Inhalt aussehen soll. Die Sprache, in der wir diese Regeln schreiben, nennt sich CSS. CSS lässt die HTML-Inhalte so aussehen, wie wir es wollen.
Dies ist eine der CSS-Regeln:
p.intro {
margin: 0;
padding: 20px;
background-color: lightgrey;
font-size: 20px;
line-height: 1.3;
}
Diese Regel besagt „Absätze der Einleitung haben keine Abstände um sie herum, einen Innenabstand von 20 Pixeln an allen Seiten, und einen hellgrauen Hintergrund. Der Text darin ist 20 Pixel groß, und Zeilen sind 1,3-mal so groß wie der Text selbst.“
Wenn sich zwei unterschiedliche Regeln auf denselben Inhalt beziehen, so werden beide Regeln angewandt, aber die zuletzt definierte gewinnt den Streit.
em {
font-style: normal;
background-color: orange;
}
em {
background-color: pink;
}
Die erste Regel legt fest, dass alle Inhalte in <em>-Tags
normal formatiert sein sollen (anstatt wie üblich kursiv), und dass sie einen
orangenen Hintergrund haben, wie dies hier. Die zweite Regel hingegen sagt
nichts über die Schriftformatierung, legt jedoch fest, dass der Hintergrund
pink sein soll. Dies sieht dann so
aus.
Wenn die beiden Regeln in dieser Reihenfolge stehen, so formatiert die erste die Schrift, während die zweite hinsichtlich der Farbe gewinnt. Damit sieht das Resultat so aus.
Es gäbe viel zu lernen über HTML und CSS, aber hoffentlich ist das genug der Einführung, um unsere magische Kraft anzuwenden: JavaScript!