HTML und CSS für Einsteiger

Webdesign für Anfänger – Teil III

Im dritten Teil des Kurses HTML und CSS lernen gehen wir näher auf CSS-Elemente ein. Wie kann man ein Bild als Hintergrund verwenden? Wie kann man Fotos und Videos einbauen?

HTML und CSS für Einsteiger

Eine HTML-Datei besteht ja, wie wir bereits wissen, aus den Bereichen <head> und <body>. Head ist der Kopf-Bereich und Body ist der Bereich, der den Inhalt (Content) der Webseite enthält

Im Head-Bereich werden die Meta-Informationen hinterlegt. Meta-Daten sind Informationen über andere Daten, zum Beispiel über die Webseite allgemein und Informationen über die Daten im Inhalt.

Informationen im Head-Bereich

Folgende Informationen einer Webseite werden im Kopfbereich hinterlegt (die Liste ist unvollständig):

  • title (der Titel der Webseite)
  • description (die Beschreibung der Webseite)
  • style (CSS-Notierungen über das Aussehen der Webseite)
  • keywords, robots, …
  • Informationen über den Autor
  • Informationen über die Sprache der Webseite

Der Webseiten-Titel ist nicht nur wichtig für den späteren Besucher, sondern auch für Suchmaschinen wie Google. Ebenso die description (Beschreibung), diese wird bei der Auflistung der Webseite bei einer Suche als Beschreibung angezeigt.

Über das Element <style> können für den Browser Informationen über das Aussehen der Webseite hinterlegt werden. Alles was hier notiert wird, gilt für die ganze Webseite. Ein Beispiel:
<style>
  body {background-color: yellow;}
  h1 {font-size: 150%;}
  p {color: blue;}
</style>
In diesem Beispiel wird der Hintergrund der Webseite gelb gefärbt, die Überschrift H1 hat eine Größe von 150%, anstatt der normalen Schriftgröße und die Textfarbe in den Absätzen ist blau.

Wie gesagt, es sind alle Elemente der ganzen HTML-Datei betroffen. Wenn ich ein einzelnes Element im Content anders behandeln möchte, dann kann ich das im Inhaltsbereich <body> tun. Ein Beispiel:

<p style="color:black;">Dieser Text ist jetzt schwarz</p>

Das heißt, die Textfarbe aller p-Elemente wird aufgrund der Notierung im Kopfbereich blau eingefärbt, aber an dieser Stelle schwarz.
HTML und CSS

Style-Beispiele

body {background-image:url(../pics/BG-Fruehling.jpg);}
h2 {background:yellow; text-align:center; color:blue;}

In diesem Beispiel wird als Hintergrund eine Grafik angezeigt. Die url enthält eine relative Pfadangabe, das heißt, die Grafik befindet sich einen Ordner höher und dort im Ordner pics und die Datei heißt „BG-Fruehling.jpg“. Groß- und Kleinschreibung ist zu unterscheiden.

Desweiteren haben die H2-Überschriften einen gelben Hintergrund, der Text ist zentriert und die Schriftfarbe ist blau.


HTML und CSS für Einsteiger (Anfängerlehrgang)

Leave a comment

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Time limit is exhausted. Please reload CAPTCHA.