Inhaltsverzeichnis

Jetzt geht es los, wir entwerfen unsere erste Webseite. Hier lernst du daher die Sprache HTML kennen, mit der alle Inhalte im Web beschrieben werden. Zusätzlich lernst du CSS zur Gestaltung der Inhalte kennen

Lernziele dieser Einheit

Nach Abschluss dieser Einheit kannst du …

🏁

Webseiten gliedern mit HTML

Bildnachweis: Pixabay: rawpixel

Was HTML inzwischen so alles kann

Einfache Textdokumente
Komplexe Webseiten
Browser Games
Browser Apps
Smart TV Apps

Bildnachweis: Android Developer Reference

Mobile Apps

Bildnachweis: Pixabay: FirmBee

Sprachen und Formate rund um HTML

HTML (HyperText Markup Language)

CSS (Cascading StyleSheets)

SVG (Scalable Vector Graphics)

JavaScript

Die grundlegende Syntax einer HTML-Datei

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Beispiel für eine einfache HTML-Datei</title> </head> <body> <p> Dies ist eine <u>einfache</u> HTML-Seite zur Verdeutlichung der grundlegenden HTML-Syntax. Wie man gut sehen kann, handelt es sich bei HTML um ein einfaches Format, das man auch ohne große Erklärungen schnell versteht. </p> <hr /> <p> Programmiersprachen, die der Strukturierung einer Textdatei durch in den Text eingebettete, für Menschen lesbare Steuerinformationen dienen, nennt man <a href="https://de.wikipedia.org/wiki/Auszeichnungssprache"> Markup Languages</a> oder Auszeichnugssprachen. </p> </body> </html>

Aufgabe 1: Deine erste HTML-Datei

  1. Kopiere den Quellcode der vorangegangenen Folie in einen Texteditor deiner Wahl.
  2. Speichere die Datei mit der Endung .html ab und öffne sie im Browser.
  3. Ändere ein paar Inhalte in der Datei und schaue dir das Ergebnis an.

Hinweis: Achte auf den richtigen Zeichensatz der Datei. Das Tag <meta charset="utf-8" /> weist den Browser an, die Datei als UTF-8-Datei zu lesen. Sonst werden die Umlaute und Sonderzeichen nicht richtig dargestellt.

Quellcode im Editor
Darstellung im Browser

„Unsichtbare” HTML-Elemente

Grundstruktur eines HTML-Dokuments

<!DOCTYPE html> <html> <head>...</head> <body>...</body> </html>

Siehe Folie 5. 😎

Elemente innerhalb des Kopfbereichs

<title>Meine erste Webseite</title>
Legt den Dokumenttitel fest, der in der Titelzeile des Browsers angezeigt wird.
<meta name="name" content="wert" />
Erlaubt es, verschiedene Metadaten wie den Autor der Seite oder Schlagwörter zu ihrem Inhalt zu definieren. Diese Informationen werden von den Suchmaschinen praktisch aber nicht mehr ausgewertet.
<meta charset="utf-8" />
Sonderform des <meta>-Tags zur Definition des Zeichensatzes der Seite. Der Standardwert lautet utf-8, sollte aber trotzdem immer mitgegeben werdendamit, dass Umlaute und Sonderzeichen richtig dargestellt werden.
<link rel="shortcut icon" href="favicon.svg" />
Ordnet der Seite ein Icon zu, das neben ihrem Titel angezeigt wird.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Meine erste Webseite</title> <link rel="shortcut icon" href="favicon.svg" /> </head> <body> ... </body> </html>

Tatsächlich angezeigte HTML-Elemente

Überschriften und Absätze

<h1>Per Anhalter durch die Galaxis</h1> <h2>Die fünfteilige Trilogie</h2> <h3>Entstehung des ersten Buchs</h3>

Die Elemente <h1> bis <h6> definieren Überschriften verschiedener Arten. <h1> ist dabei eine Hauptüberschrift, <h2> eine Unterüberschrift, <h3> eine Unterunterüberschrift und so weiter.

<p> Dies ist ein Absatz, wie er unter einer Überschrift stehen könnte. <p>

Absätze werden mit dem <p>-Element definiert. Das „p” steht dabei für „Paragraph”. Absätze sollten in der Regel nicht geschachtelt werden. Überschriften sollten ebenfalls oberhalb und nicht innerhalb der Absätze stehen.

<h1>Per Anhalter durch die Galaxis</h1> <h2>Die fünfteilige Trilogie</h2> <p> Per Anhalter durch die Galaxis ist eine Romanreihe des britischen Autors Douglas Adams, die ab den ausgehenden 1970er Jahren in verschiedenen Medien erschien. Von Adams selbst stammen dabei der ersten fünf Bücher der fünfteiligen Trilogie. Im Jahr 2009 erschien acht Jahre nach seinem Tod die Fortsetzung „Und übrigens noch was …” von Eoin Colfer. </p> <p> Die Serie umfasst daher folgende Titel: </p> ...

Per Anhalter durch die Galaxis

Die fünfteilige Trilogie

Per Anhalter durch die Galaxis ist eine Romanreihe des britischen Autors Douglas Adams, die ab den ausgehenden 1970er Jahren in verschiedenen Medien erschien. Von Adams selbst stammen dabei der ersten fünf Bücher der fünfteiligen Trilogie. Im Jahr 2009 erschien acht Jahre nach seinem Tod die Fortsetzung „Und übrigens noch was …” von Eoin Colfer.

Die Serie umfasst daher folgende Titel:

...

Textformatierung

<b>Fett</b> <i>Kursiv</i> <u>Unterstrichen</u> <tt>Schreibmaschine</tt> <small>Kleine Schriftgröße</small> <large>Große Schriftgröße</large>

Einzelne Wörter oder Teile eines Satzes können mit den hier gezeigten Elementen direkt formatiert werden. Es handelt sich um die einzigen HTML-Elemente, die direkt das Aussehen ihres Inhalts verändern. Lange Zeit war ihre Verwendung nicht gern gesehen. Seitdem man den Elementen aber eine semantische Bedeutung gegeben und dann festgelegt hat, wie diese dargestellt werden soll, geht die Verwendung wieder in Ordnung. 🙃

<p> <b>Wichtiger Hinweis:</b> Lese immer das Kleingedruckte eines Vertrags, auch wenn es oft viel Text ist, den man nur schwer lesen und kaum verstehen kann. <i>Im Kleingedruckten stecken oft viele ungeahnte Fallen!</i> </p> <p> <u>Hier ein Beispiel:</u> </p> <p> <small> <small> Sämtliche in der Werbung getroffenen Aussagen sind frei erfunden. Wir garantieren für nichts und erstatten auch kein Geld zurück. Wer bei uns kauft, ist selbst schuld. </small> </small> </p>

Wichtiger Hinweis: Lese immer das Kleingedruckte eines Vertrags, auch wenn es oft viel Text ist, den man nur schwer lesen und kaum verstehen kann. Im Kleingedruckten stecken oft viele ungeahnte Fallen!

Hier ein Beispiel:

Sämtliche in der Werbung getroffenen Aussagen sind frei erfunden. Wir garantieren für nichts und erstatten auch kein Geld zurück. Wer bei uns kauft, ist selbst schuld.

Zeilenumbrüche und Trennlinien

<br />

Definiert einen Zeilenumbruch, ohne einen neuen Absatz zu beginnen. Manchmal kann das ganz nützlich sein, um auf die Schnelle ein paar Elemente untereinander anzuordnen. <br /> sollte aber sparsam verwendet werden, da die Umbrüche auf kleineren Bildschirmen oftmals unschön aussehen.

<hr />

„hr” steht für „Horizontal Ruler” und fügt eine waagerechte Trennlinie ein. Heutzutage sieht man das Element nicht mehr so oft. Braucht man aber nur eine kleine Trennlinie, ist es oft einfacher, als sich mit den Rahmenlinien eines Absatzes herumzuschlagen.

<b>Alice Wunderland</b> <br /> Hinter dem Haus 7 <br /> 76185 Karlsruhe-Märchendorf <hr /> <b>Grinsender Kater</b> <br /> Im Garten 9 <br /> 76185 Karlsruhe-Märchendorf
Alice Wunderland
Hinter dem Haus 7
76185 Karlsruhe-Märchendorf
Grinsender Kater
Im Garten 9
76185 Karlsruhe-Märchendorf

Bilder und Links

Aufzählungen und Listen

<ul> <li>Garfield langt zu</li> <li>Garfield schläft sich durch</li> <li>Garfield überlebensgroß</li> <li>Garfield breitet sich aus</li> <li>Garfield sahnt ab</li> </ul>

„ul” steht für „Unordered List” und beschreibt eine unsortierte Liste, also eine einfache Liste ohne Nummerierung. Dementsprechend sind die <li>-Elemente die „List Items”. Die Listenelemente können beliebigen weiteren HTML-Quellcode wie Absätze oder untergeordnete Listen enthalten.

<ol> <li>Per Anhalter durch die Galaxis</li> <li>Das Restaurant am Ende des Universums</li> <li>Das Leben, das Universum und der ganze Rest</li> <li>Macht's gut und danke für den Fisch</li> <li>Einmal Rupert und zurück</li> </ol>

Das ist eigentlich dasselbe wie <ul>, nur dass es sich um eine „Ordered List” also eine Liste mit Aufzählungszeichen handelt.

<h2>Meine Lieblinugsbücher als ich jung war</h2> <ul> <li> <p> Garfield-Comics </p> <ul> <li>Garfield langt zu</li> <li>Garfield schläft sich durch</li> <li>Garfield überlebensgroß</li> <li>Garfield breitet sich aus</li> <li>Garfield sahnt ab</li> </ul> </li> <li> <p> Anhalter-Romane </p> <ol> <li>Per Anhalter durch die Galaxis</li> <li>Das Restaurant am Ende des Universums</li> <li>Das Leben, das Universum und der ganze Rest</li> <li>Macht's gut und danke für den Fisch</li> <li>Einmal Rupert und zurück</li> </ol> </li> </ul>

Meine Lieblinugsbücher als ich jung war

  • Garfield-Comics

    • Garfield langt zu
    • Garfield schläft sich durch
    • Garfield überlebensgroß
    • Garfield breitet sich aus
    • Garfield sahnt ab
  • Anhalter-Romane

    1. Per Anhalter durch die Galaxis
    2. Das Restaurant am Ende des Universums
    3. Das Leben, das Universum und der ganze Rest
    4. Macht's gut und danke für den Fisch
    5. Einmal Rupert und zurück

Aufgabe 2: Ein kleines HTML-Quiz

Aufgabe 2.1: Mit welchem HTML-Tag kann man …

a) … den Hauptteil einer Webseite deklarieren?

  1. <header>
  2. <body>
  3. <p>
  4. <main>

b) … eine Überschrift definieren?

  1. <ul>
  2. <b>
  3. <h1>
  4. <head>

c) … einen Zeilenumbruch erzeugen?

  1. <br>
  2. <hr>
  3. <p>
  4. <div>

d) … eine nummerierte Liste erstellen?

  1. <ul> <li>…</li> <li>…</li> <li>…</li> </ul>
  2. <ol> <li>…</li> <li>…</li> <li>…</li> </ol>

Aufgabe 2.2: Mit welchem Grafikformat kann man …

a) … durchsichtige Bilder in eine Seite einbinden?

  1. PNG
  2. GIF
  3. SVG
  4. JPEG

b) … einfache Animationen erstellen?

  1. PNG
  2. GIF
  3. SVG
  4. JPEG

c) … vollfarbige Seitenhintergründe mit kurzen Ladenzeiten realisieren?

  1. PNG
  2. GIF
  3. SVG
  4. JPEG

Tipp: Auf Folie 23 kannst du die Bildformate nachlesen.


Lösung: Aufgabe 2.1: 2, 3, 1, 2; Aufgabe 2.2: 1 und 2, 2, 4

Aufgabe 3: Verschiedene HTML-Elemente anwenden

Lege eine neue HTML-Datei an und probiere die gelernten HTML-Tags aus:

  1. Definiere mehrere Absätze mit Überschriften und Unterüberschriften.
  2. Verwende mindestens eine geordnete oder ungeordnete Aufzählungsliste.
  3. Baue ein/zwei Bilder in die Seite ein. Achte darauf, dass sie nicht zu groß sind!
  4. Füge der Seite einen Link auf einen Wikipedia-Artikel deiner Wahl hinzu.

So könnte die Seite zum Beispiel aussehen:

Strukturgebende Elemente

<div>…</div>
<header>…</header>
<footer>…</footer>
<section>…</section>
<nav>…</nav>
Definieren ein allgemeines Blockelement. Als Blockelemente erzwingen sie standardmäßig einen Zeilenumbruch vor und hinter sich und sie nehmen immer eine maximale Breite ein. Die Höhe richtet jedoch sich nach ihrem Inhalt.
<span>…</span>
Definiert ein allgemeines Inlineelement. Wie der Name sagt, wird das Element im laufenden Textfluss angezeigt und es werden keine Zeilenumbrüche erzwungen. Höhe und Breite richten sich nach dem Inhalt.

Beispiel für eine komplexe Webseite

<html> <head> <meta charset="utf-8" /> <title>WikiBerd | Gopherspace</title> </head> <body> <!-- Kopfbereich mit dem Titel der Seite --> <header> <img src="logo.png" alt="WikiBerd"/> <h1>Gopherspace</h1> </header> <!-- Hauptbereich der Seite --> <main> <i>Gopherspace</i> -- ein absolut luftleerer Raum … </main> <!-- Side Bar mit Toolbox und Lizenz --> <aside> <nav> <h6>Toolbox<h6> <ul> <li> <a href="…">RSS</a> </li> … </ul> </nav> <section> <h6>Lizenz<h6> … </section> </aside> <!-- Fußbereich der Seite --> <footer> You‘re watching WikiBerd. … </footer> </body> </html>

Aufgabe 4: Welcher Quellcode passt?

Welcher Quellcode entspricht am ehesten der Abbildung?

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>IoT/Embedded-Workshop 2017</title> </head> <body> <h1>IoT/Embedded-Workshop 2017</h1> <div> 6. Semester Wirtschaftsinformatik, DHBW Karlsuruhe </div> <hr /> <h2>Vielen Dank für die erfolgreichen Projekte</h2> <p> An dieser Stelle vielen Dank an alle Projektteilnehmer … </p> <div> dennis … </div> <h2>DingDong 9. Blogeintrag: Die PhoneGap Applikation</h2> <p> Zu guter letzt kommt in diesem Artikel noch die Applikation … </p> <div> katholnigs … </div> … </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>IoT/Embedded-Workshop 2017</title> </head> <body> <header> <h1>IoT/Embedded-Workshop 2017</h1> 6. Semester Wirtschaftsinformatik, DHBW Karlsuruhe </header> <main> <article> <h2>Vielen Dank für die erfolgreichen Projekte</h2> <p> An dieser Stelle vielen Dank an alle Projektteilnehmer … </p> <footer> dennis … </footer> </article> <article> <h2>DingDong 9. Blogeintrag: Die PhoneGap Applikation</h2> <p> Zu guter letzt kommt in diesem Artikel noch die Applikation … </p> <footer> katholnigs … </footer> </article> … </main> <aside> <input name="search" placeholder="Suchen" /> <h5>Kategorien</h5> <nav> … </nav> </aside> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>IoT/Embedded-Workshop 2017</title> </head> <body> <div name="header"> <h1>IoT/Embedded-Workshop 2017</h1> 6. Semester Wirtschaftsinformatik, DHBW Karlsuruhe </div> <div name="main"> <div class="article"> <h2>Vielen Dank für die erfolgreichen Projekte</h2> <div class="preview"> An dieser Stelle vielen Dank an alle Projektteilnehmer … </div> <div class="footer"> dennis … </div> </div> <div class="article"> <h2>DingDong 9. Blogeintrag: Die PhoneGap Applikation</h2> <div class="preview"> Zu guter letzt kommt in diesem Artikel noch die Applikation … </div> <div class="footer"> katholnigs … </div> </div> … </div> <div id="sidebar"> <input name="search" placeholder="Suchen" /> <h5>Kategorien</h5> <div> … </div> </div> </body> </html>

Die Lösung ist Quellcode 2 oder 3, eher aber noch Quellcode 2.

  • Quellcode 1 ist es nicht, da er nicht alle Elemente entält. Unter anderem fehlt die Sidebar.
  • Quellcode 2 enthält ansatzweise alle Elemente des Screenshots. Zusätzlich nutzt er Tags wie <article> und <nav>, welche die Bedeutung der eingeklammerten Bereiche widerspiegeln.
  • Quellcode 3 könnte es auch sein. Die vielen <div> sind aber nicht so übersichtlich.

Layouts erstellen mit CSS

Bildnachweis: Pixabay: rawpixel

Einführendes Beispiel

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Faszination Klavier</title> </head> <body> <header> <h2>Faszination Klavier</h2> </header> <main> <h3>Wählen Sie eine Kategorie</h3> <div class="card"> <img src="piano1.jpg" /> <b>Das richtige Klavier finden</b> </div> <div class="card"> <img src="piano2.jpg" /> <b>Spielen mit zwei Händen</b> </div> <div class="card"> <img src="piano3.jpg" /> <b>Musizieren vor Publikum</b> </div> </main> <footer> © Die Online-Klavierschule <nav> <ul> <li> <a>Startseite</a> </li> <li> <a>Das richtige Klavier finden</a> </li> <li> <a>Spielen mit zwei Händen</a> </li> <li> <a>Musizieren vor Publikum</a> </li> <li> <a>Impressum</a> </li> </ul> </nav> </footer> </body> </html>

Faszination Klavier

Wählen Sie eine Kategorie

Das richtige Klavier finden
Spielen mit zwei Händen
Musizieren vor Publikum
<!DOCTYPE html> <html> <head> … <link rel="stylesheet" href="style.css" /> </head> <body> … </body> </html>
html, body { margin: 0; padding: 0; } header, footer { background-color: #0A0A0A; border-style: solid; border-color: black; border-width: 0; border-bottom-width: 2px; padding: 0.5em; color: white; font-size: 95%; } header h2 { font-size: 150%; text-align: center; margin: 0; color: white; text-shadow: 1px 1px 1px grey; } main { background-color: rgb(230, 230, 230); padding: 0.5em 0.5em 5em 0.5em; } .card { display: inline-block; width: 30%; border: 1px solid darkgrey; border-radius: 0.5em; background: rgba(245, 245, 245); padding: 0.5em; transition: transform 0.5s, background 0.5s; transform: scale(1); } .card:hover { background: white; transform: scale(1.03); cursor: pointer; } .card img { display: block; width: 100%; margin-bottom: 0.5em; } footer nav > ul { list-style: none; padding: 0; } footer nav > ul > li { display: inline-block; margin-right: 1em; } a, a:visited { color: rgb(246, 178, 188); text-decoration: none; } a:hover { color: white; }

Faszination Klavier

Wählen Sie eine Kategorie

Das richtige Klavier finden
Spielen mit zwei Händen
Musizieren vor Publikum

Bildnachweise: Pixabay: StockSnap, Pixabay: StockSnap, Pixabay: Robert_z_Ziemi

HTML und CSS in derselben Datei

<style> innerhalb des <head> wirkt auf die gesamte Seite.
Mit dem style-Attribut können einzelne HTML-Elemente gestyled werden.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML und CSS in einer Datei</title> <style> h1 { color: #CD0D0D; text-shadow: 1px 1px 1px grey; margin: 0; } p { margin-top: 0.5em; } </style> </head> <body> <h1>HTML und CSS endlich vereint!</h1> <p> Was lange währt, wird endlich gut. Nachdem sich HTML und CSS nach ihrer Trennung lange Zeit nicht mehr gesehen haben, haben sie heute endlich wieder zueinander gefunden. </p> <p style="color: darkred; font-weight: bold;"> Mit dem style-Attribut kann man gezielt einzelne Elemente gestalten. Das style-Element wirkt hingegen auf die ganze Seite und sollte daher eher im head stehen. </p> </body> </html>

CSS-Selektoren und das Document Object Model

Das Document Object Model

Einfache CSS-Selektoren

html
body
h1
p
Auswahl von Elementen nach ihrem Tag-Namen
#logo
Das Element mit id="logo"
.card
Alle Elemente mit class="card"
input[readonly]
Alle <input>, die ein Attribut namens readonly besitzen

Zusammengesetzte CSS-Selektoren

h1, h2, h3
ODER-Verknüpfung bzw. Vereinigungsmenge mehrerer Selektoren
section.warning
UND-Verknüpfung zweier Selektoren: Alle <section> mit class="warning"
article .infobox
Eltern/Kind-Beziehung (transitiv): Alle Elemente mit class="infobox", die irgendwo innerhalb eines <article>-Elements stehen
section > h1
Eltern/Kind-Beziehung (nicht transitiv): Alle <h1>, deren direktes Elternelement eine <section> ist

Häufig benötigte CSS-Anweisungen

Textformatierung

font-family: Liberation Sans, Arial, sans-serif;
Legt die Schriftart für ein Element und seine Unterelemente fest. Werden mehrere Schriftarten angegeben, wird die erste gefundene verwendet. Immer vorhandene Schriften sind: serif, sans-serif, monospace, fantasy.
font-size: 12pt;
Legt die Schriftgröße eines Elements fest. Erlaubt sind entweder numerische Werte oder folgende Konstanten: small, x-small, large, x-large, …
font-weight: bold;
Legt fest, wie kräftig die Schrift erscheint. bold ist der normale Fettdruck. Es gibt aber auch normal, bolder und lighter.
color: crimson;
Ändert die Schriftfarbe des aktuellen Elements. Erlaubt sind alle Farbwerte, wie auf der nächsten Folie beschrieben.
html { font-family: Liberation Serif, serif; font-size: 12pt; } h1 { color: crimson; font-weight: bold; }

Dies ist eine Überschrift 1

Und dies ist ein kleiner Absatz.

Hintergrundfarben und Bilder

background-color: rgba(244, 186, 110, 0.9);
Ändert die Hintergrundfarbe eines Elements. Erlaubt sind natürlich alle Farbwerte aus der nächsten Folie. Mit rgba() lassen sich damit auch halbdurchsichtige Hintergründe definieren.
background-image: url(bg.jpg);
Legt ein Hintergrundbild fest, das standardmäßig so oft wiederholt wird, bis das Element komplett damit bedeckt ist. Siehe Folie 8 für weitere Möglichkeiten.
html { background-color: #F0F0F0; } header > nav { background-color: rgb(4, 192, 242); } .black { background-image: url(black_pattern.jpg); }
Hier kommt auch irgend ein Text hin …
Alle Rechte vorbehalten

Anzeigeart und Größe

display: block;
display: inline;
Dies sind die bekannten Voreinstellungen des Browsers, so wie sie im HTML-Folienatz erklärt wurden.
display: inline-block;
Eine Mischung aus Inline- und Blockelement. Im Prinzip handelt es sich beim betroffenen Element weiterhin um ein Blockelement, das sich in Teilen aber wie ein Inline verhält. Unter anderem passen sich Breite und Höhe komplett dem Inhalt an und es kann in derselben Zeile stehen wie weitere inline-block-Elemente
width: 75%;
min-width: 45%;
height: 10em; min-height: 10em;
Legen die Breite und Höhe der ausgewählten Elemente fest. width und height legen eine fixe Größe fest und können daher dazu führen, dass zu viel Inhalt aus den Elementen herausragt. min-width und min-height erlauben dem Element hingegen, mit seinem Inhalt zu wachsen.
overflow: hidden;
Sorgt dafür, dass zu großer Inhalt nicht aus dem Element herausläuft, sondern abgeschnitten wird.
div.card { display: inline-block; min-width: 7em; height: 3em; margin: 0.25em; padding: 0.5em; border: 1px solid black; border-radius: 0.3em; background-color: rgb(129, 8, 30); color: white; }
Dies sind Karten.
Dank „inline-block” stehen sie
nebeneinander!

Innenabstand und Außenabstand

margin: 1em;
Sorgt dafür, dass ein gleichmäßiger Abstand von 1em um die betroffenen Elemente frei bleibt. Achtung: Die margins zweier benachbarter Elemente addieren sich auf (siehe Skizze).
margin: 1em 0 2em 0;
margin-top: 1em;
margin-right: 0;
margin-bottom: 2em;
margin-left: 0;
Erlaubt es, die vier Abstände um ein Element herum einzeln zu definieren. Die Kurzform in der ersten Zeile wird im Uhrzeigersinn gelesen: Oben, rechts, unten, links.
padding: 1em;
padding: 1em 0 2em 0;
padding-top: 1em;
padding-right: 0;
padding-bottom: 2em;
padding-left: 0;
Im Prinzip dasselbe wie margin, nur dass es nicht um den Platz um das Element herum geht, sondern um den inneren Abstand vom Rand des Elements zu seinem Inhalt.
.gross { display: inline-block; font-size: 130%; padding: 3em; margin: 1rem; background-color: rgb(7, 88, 97); color: white; } .klein { display: inline-block; padding: 0.75em; margin: 1rem; background-color: rgb(138, 54, 172); color: white; }
Großer Bereich
Kleiner Bereich

Rund um den Rahmen

border: 1px solid black;
border-width: 1px;
border-style: solid;
border-color: black;
border-bottom-width: 0;
Verschiedene Optionen zur Definition der Rahmendicke, Rahmenart und Rahmenfarbe. border-width, border-style und border-color können alle vier oder nur eine Seite beeinflussen. Für letzteres muss nach border- eine der vier Richtungen angegeben werden: top; right, bottom, left.
border-radius: 0.5em;
border-top-left-radius: 4px;
border-top-right-radius: 50%;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 0.75vh;
Früher waren alle HTML-Elemente eckig wie Toastbrot. 🍞 Heute können sie auch abgerundete Ecken besitzen.
box-shadow: 2px 2px 4px rgba(0,0,0, 0.5);
Zeichnet einen weichen Schatten um das Element herum. Diese Anweisung ist der Schlüssel zum Google Material-Design. Die vier Werte bedeuten: X-Richtung, Y-Richtung, Weichzeichnung und Farbe.
.rect1, .rect2, .rect3, .rect4 { display: inline-block; padding: 0.5em; font-size: 160%; min-width: 3.5em; box-shadow: 1px 1px 2px rgba(0,0,0, 0.5); } .rect1 { border: 2px solid black; border-radius: 0.3em; background: rgb(107, 159, 103); } .rect2 { border: 2px solid black; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; background: rgb(17, 189, 207); } .rect3 { border: 2px solid black; border-top-left-radius: 0.3em; border-bottom-right-radius: 0.3em; background: rgb(58, 159, 80); } .rect4 { border: 2px solid black; border-top-right-radius: 50%; border-bottom-right-radius: 50%; background: rgb(194, 194, 93); }
1
2
3
4

Maßeinheiten und Farben in CSS

Maßeinheiten

Einheit Beschreibung
px Ein „virtueller” Pixel auf den Bildschirm
pt 1 Punkt = 0,376 Millimeter, üblich für Schriftgrößen
em Ungefähr die Breite eines großen M („Geviert”)
ex Höhe eines kleinen X
rem Wie em nur mit der Schriftgröße des Wurzelelements
% Ein Prozent der Höhe oder Breite des Elternelements, je nach Verwendung
vw Ein Prozent der Breite des Browserfensters (Viewport Width)
vh Ein Prozent der Höhe des Browserfensters (Viewport Height)

Farben in CSS

Eingebaute Namen
Hexadezimalcode
  • #FF0000
  • #FFFF00
  • #ADD8E6
RGB-Tuppel
  • rgb(255, 255, 0)
  • rgb(173, 216, 230)
RGBA-Tuppel
  • rgba(100, 100, 100, 0.75)
  • rgba(173, 216, 230, 0.85)

Aufgabe 5: Ein kleines CSS-Quiz

Aufgabe 5.1: Welcher CSS-Selektor wählt …

a) … alle Absätze der Seite aus?

  1. div
  2. p.absatz
  3. p > .absatz
  4. p

b) … alle Elemente der Klasse „info” aus?

  1. info
  2. #info
  3. .info
  4. info()

c) … das Element mit der ID „page-title” aus?

  1. page-title
  2. #page-title
  3. .page-title
  4. page #title

d) … alle Elemente der Klasse „active” aus, die sich innerhalb eines <nav>-Elements befinden?

  1. nav .active
  2. nav > .active
  3. nav.active
  4. nav #active

Aufgabe 5.2: Mit welcher CSS-Anweisung kann man …

a) … die Schriftart festlegen?

  1. font-size
  2. font-family
  3. font-weight
  4. text-decoration

b) … ein Hintergrundbild setzen?

  1. background-color
  2. background-image
  3. background-size
  4. background

c) … den Innenabstand vom Rahmen eines Elements zu seinem Inhalt definieren?

  1. padding
  2. margin
  3. border

d) … einen Schatten definieren?

  1. border-radius
  2. text-decoration
  3. text-shadow
  4. box-shadow

Lösung: Aufgabe 5.1: 4, 3, 2, 1 und 2; Aufgabe 5.2: 2, 2 und 4, 1, 3 und 4

Aufgabe 6: Dein erstes Stylesheet

Kopiere den folgenden Quellcode in eine neue HTML-Datei und passe das Stylesheet gemäß der Beschreibung an. Das Ergebnis sollte ungefähr wie auf dem dritten Reiter aussehen.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mein erstes Stylesheet</title> <style> /* Schreibe hier dein Stylesheet */ </style> </head> <body> <header> <h1>Meine kleine Musiksammlung</h1> </header> <main> <h2>Joe Cocker</h2> <div class="album"> <div class="icon">💿</div> <div class="description"> <span class="title">Accross From Midnight</span> <br /> 1997, 12 Titel, Lieblingssong: <i>The Last One To Know</i> </div> </div> <div class="album"> <div class="icon">💿</div> <div class="description"> <span class="title">No Ordinary World</span> <br /> 1999, 12 Titel, Lieblingssong: <i>My Father's Son</i> </div> </div> <div class="album"> <div class="icon">💿</div> <div class="description"> <span class="title">Fire It Up</span> <br /> 2012, 13 Titel, Lieblingssong: <i>Younger</i> </div> </div> <h2>Mark Knopfler</h2> <div class="album"> <div class="icon">💿</div> <div class="description"> <span class="title">Golden Heart</span> <br /> 1996, 14 Titel, Lieblingssong: <i>Are We In Trouble Now</i> </div> </div> <div class="album"> <div class="icon">💿</div> <div class="description"> <span class="title">Sailing To Philadelphia</span> <br /> 2000, 13 Titel, Lieblingssong: <i>Sailing To Philadelphia</i> </div> </div> <div class="album"> <div class="icon">💿</div> <div class="description"> <span class="title">All The Roadrunning</span> <br /> 2006, 12 Titel, Lieblingssong: <i>I Dug Up A Diamond</i> </div> </div> <div class="album"> <div class="icon">💿</div> <div class="description"> <span class="title">Tracker (Deluxe Edition)</span> <br /> 2015, 18 Titel, Lieblingssong: <i>Terminal To Tribute To</i> </div> </div> <h2>Queen</h2> <div class="album"> <div class="icon">💿</div> <div class="description"> <span class="title">The Works</span> <br /> 1984, 9 Titel, Lieblingssong: <i>I Want To Break Free</i> </div> </div> <div class="album"> <div class="icon">💿</div> <div class="description"> <span class="title">A Kind Of Magic</span> <br /> 1986, 9 Titel, Lieblingssong: <i>Friends Will Be Friends</i> </div> </div> </main> </body> </html>

<html> und <body>

  • Außenabstand: 0
  • Innenabstand: 0

Der Header

  • Hintergrundfabe: rgb(22, 177, 198)
  • Schriftfarbe: Weiß
  • Innenabstand: 0.5em
  • Außenabstand nach unten: 1em

Der Hauptbereich

  • Innenabstand: 0.5em
  • Schriftfarbe der Überschriften: rgb(17, 96, 107)

Die einzelnen Alben

  • Durchgezogener Rahmen, 1px breit, hellgrau
  • Kein Innenabstand
  • Außenabstand nach unten: 1em
  • Breite: 30em
  • Schriftgröße des Icons: 330%
  • Albumtitel fettgedruckt
  • Icon und Beschreibung nebeneinander (mit display: inline-block)
  • Abstand links von der Beschreibung: 0.5em

Meine kleine Musiksammlung

Joe Cocker

💿
Accross From Midnight
1997, 12 Titel, Lieblingssong: The Last One To Know
💿
No Ordinary World
1999, 12 Titel, Lieblingssong: My Father's Son
💿
Fire It Up
2012, 13 Titel, Lieblingssong: Younger

Mark Knopfler

💿
Golden Heart
1996, 14 Titel, Lieblingssong: Are We In Trouble Now
💿
Sailing To Philadelphia
2000, 13 Titel, Lieblingssong: Sailing To Philadelphia
💿
All The Roadrunning
2006, 12 Titel, Lieblingssong: I Dug Up A Diamond
💿
Tracker (Deluxe Edition)
2015, 18 Titel, Lieblingssong: Terminal To Tribute To

Queen

💿
The Works
1984, 9 Titel, Lieblingssong: I Want To Break Free
💿
A Kind Of Magic
1986, 9 Titel, Lieblingssong: Friends Will Be Friends
html, body { margin: 0; padding: 0; } header { background: rgb(22, 177, 198); color: white; font-weight: bold; text-shadow: 1px 1px 1px rgba(200, 200, 200, 0.75); padding: 0.5em; margin-bottom: 1em; } main { padding: 0.5em; } h2 { color: rgb(17, 96, 107); } .album { border: 1px solid lightgrey; width: 30em; padding: 0.5em; margin-bottom: 1em; color: rgba(25, 25, 25); } .album > .icon { font-size: 330%; display: inline-block; } .album > .description { display: inline-block; margin-left: 0.5em; } .album .title { font-weight: bold; }

Exkurs: Fortgeschrittene Themen

Bildnachweis: Pixabay: rawpixel

Bilder für das Web aufbereiten

Spaß mit Hintergrundbildern

html { background-image: url(tiles.png); }

Ordnet man einem beliebigen Element ein Hintergrundbild zu, wird das Bild standardmäßig wie die Kacheln im Bad so oft wiederholt, bis sie das ganze Element ausfüllen. In der Regel ordnet man es daher dem <html> oder <body> zu, um die ganze Seite damit auszufüllen.

Vor allem in den frühen Jahren des Web hat man diesen Effekt häufig gesehen. Heute wirkt es jedoch oft altbacken und wird daher nicht mehr so oft angewendet.

Beispiel

Meine erste Webseite

Und sie hat sogar einen gekachelten Hintergrund, so wie früher in den 1990ern.

Naja, modern ist das nicht. Heute bevorzugt man eher einfarbige Hintergründe.

html { background-image: url(foto.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; }

Die obigen CSS-Anweisungen zeigen, wie man der Seite ein Hintergrundbild zuordnen kann, das immer die volle Größe ausfüllt. Da man nicht wissen kann, welche Größe des Browserfenster später haben wird, wird um die Mitte herum alles abgeschnitten, was nicht in das Fenster passt. Das Bild wird dafür aber immer so gestreckt, dass es das ganze Fenster ausfüllt ohne zu verzerren.

Dieser Effekt war in den 2010ern eine Zeit lang modern, tritt inzwischen aber nicht mehr ganz so oft auf. Wichtig ist, dass man trotz des Bildes die Schrift noch gut lesen kann.

Beispiel

Eine moderne Seite mit Hintergrundbild

Sieht irgendwie cool aus, oder?

Bildnachweis: Pixabay: Meitzke

.ebene { background-repeat: no-repeat; background-position: center center; background-size: cover; } #ebene1 { background-image: url(bild1.jpg); background-attachment: fixed; } #ebene2 { background-image: url(bild2.jpg); } #ebene3 { background-image: url(bild3.jpg); background-attachment: fixed; }

Ordnet man die Hintergrundbilder nicht der gesamten Seite sondern einzelnen untereinander stehenden Elementen zu und verwendet man dabei noch die Anweisung background-attachment: fixed;, entsteht ein interessanter Effekt. Beim Scrollen bleibt der Hintergrunds stehen und nur der Inhalt der jeweiligen Elemente scrollt weiter. Wechselt man dabei immer ein Element mit background-attachment: fixed; ab mit einem Element ohne diese Anweisung, entsteht ein interessanter Effekt, durch den sich ein Bild quasi über das andere schiebt.

Dieser Effekt, der ebenfalls seit ca. 2010 sehr beliebt ist, nennt sich „Parallax Scrolling”. Er eignet sich am besten für One-Pager, also Webseiten, die nur aus einer langen, nach unten scrollenden Seite bestehen. Manche Webdesigner haben den Effekt mit JavaScript perfektioniert und auf die Spitze getrieben. Das Grundgerüst ist aber ziemlich einfach.

Hinweis: Auf mobilen Geräten funktioniert der Effekt ziemlich schlecht, da diese, um Akku zu sparen, verschiedene Optimierungen beim Scrollen anwenden, die mit background-attachment: fixed; nicht harmonieren. Man sollte den Effekt daher durch ein „Media Query” auf nicht-mobile Geräte beschränken.

Beispiel ansehen

Animationen mit CSS

transition: width 0.7s, height 0.7s;
Legt fest, welche Eigenschaften animiert werden sollen und wie lange die Animation jeweils dauern soll. Mehrere Animationen können durch Komma getrennt definiert werden. Abgespielt werden den Animationen, wenn sich die jeweilige Eigenschaft verändert. Hierfür braucht man eigentlich JavaScript, einfache Mausereignisse gehen aber auch ohne.
@keyframes hin-und-her { 0% { transform: rotate(-4deg); } 100% { transform: rotate(4deg); } }
Keyframe-Animationen werden mit @keyframe definiert, wobei der Animation ein eindeutiger Namen gegeben werden muss. Die einzelnen Zeitpunkte innerhalb der Animation werden in Prozent von 0% bis 100% angegeben. Wie lange die Animation dauert und wie schnell die Zeitpunkte erreicht sind, hängt von der Geschwindigkeit ab, die man ihr später gibt.
.wackelpeter { animation: hin-und-her 0.7s alternate infinite; }
Über die animation-Anweisung und ihre Ableger wird eine benannte Keyframe-Animation an ein Element gebunden. Die Animation fängt sofort an zu laufen und muss nicht zuvor aktiviert werden.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Einfache Animationen mit CSS</title> <style> /** Transition, wenn die Maus drüber fährt */ .icon { font-size: 330%; transition: font-size 0.4s; } .icon:hover { font-size: 450%; } /** Dauerhafte Keyframe-Animation */ @keyframes a1 { 0% { transform: rotate(-4deg); } 100% { transform: rotate(4deg); } } .wackeln { font-size: 330%; display: inline-block; transform-origin: 50% 50%; animation: a1 0.5s alternate infinite; animation-timing-function: linear; } </style> </head> <body> <p> <span class="icon">📸</span> <span class="icon">🔭</span> <span class="icon"> 💾</span> </p> <p> <div class="wackeln">🎹</div> <div class="wackeln">🎸</div> <div class="wackeln">🥁</div> <div class="wackeln">🎷</div> </p> </body> </html>

📸 🔭 💾

🎹
🎸
🥁
🎷

Weitere CSS-Layoutmodule

Alternative CSS-Layoutalgorithmen

🔎

Hinweise zum Schluss

Bildnachweis: Pixabay: rawpixel

Do & Don't

Allgemeine Hinweise

Aufbau der HTML-Dateien

Gestaltung mit CSS

Rechtshinweise

Creative Commons Namensnennung 4.0 International

§