HTML/Tutorials/Einstieg/Kapitel5

Aus SELFHTML-Wiki
< HTML‎ | Tutorials‎ | Einstieg
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
30min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
keine Grundkenntnisse nötig


Wie so oft im Leben, fallen auch Herrn Meier die wichtigsten Sachen erst zum Schluss ein:

  • Ziemlich cool wäre es doch, wenn seine Adresse und Telefonnummer erscheinen würde.
  • Daneben soll jede Seite einen gleichmäßigen Seitenkopf und -fuß erhalten.

Mit CSS können nicht nur die Farben, sondern auch Positionierungen auf der Webseite festgelegt werden.

In diesem Kapitel führen wir einige Elemente zur Seitenstrukturierung ein und lernen, wie wir einzelne Elemente gezielt ansprechen und formatieren können.


Seitenstrukturierung

Neben der Textauszeichnung als Überschriften und „normale“ Absätze, die bereits in Kapitel 2 besprochen wurde, gibt es weitere Elemente, die einzelne Abschnitte des HTML-Dokuments beschreiben.

header und footer

Der sichtbare Seitenkopf mit Logo und Firmenname wird von einem header-Element umschlossen (nicht zu verwechseln mit dem unsichtbaren head). Das Seitenende enthält einen footer mit Links zu Kontakt und Impressum.

Seitenkopf- und fuß
<body>
  <header>
    <a id="backlink" href="/"><img src="logo.svg" alt="logo"></a>
    <h1>Schreinerei Meier</h1>
    <p>Ihre Werkstatt für gutes Wohnen!</p>
  </header>

  ...

  <footer>
     <a href="kontakt.html">Kontakt</a>
     <a href="impressum.html">Impressum</a>
     <p>© 2021 by selfHTML</p>
  </footer>
</body>

aside – (nicht nur) neben dem Inhalt

Unser Schreinermeister ist der Meinung, dass die Liste der Leistungen dermaßen wichtig ist, dass man diese angemessen hervorheben muss. Und wie so oft im Leben, fallen auch Herrn Meier die wichtigsten Sachen erst zum Schluss ein: Ziemlich cool wäre es doch, wenn er sein neuestes Angebot hervorheben könnte! Aber dies soll natürlich in einem eigenen Kasten stehen.

Unmöglich, sagen Sie? Mitnichten! Es gibt ein Element für Abschnitte einer Seite, deren Inhalt nur in einem indirekten Zusammenhang mit dem umgebenden Inhalt steht: aside.

aside für Zusatzinformationen
<ul id="leistungen">
  <li>Möbel nach Ihren Wünschen</li>
    <ul>
      <li>Küchenmöbel</li>
      <li>Regale und Schrankwände</li>
      <li>Badezimmermöbel</li>
    </ul>
  </li>
  <li>Haustüren</li>
  <li>Gartenzäune</li>
  <li>Reparaturen</li>
</ul>

<aside id="angebot">
  <h3>Angebot</h3>
  <p>Nächste Woche 10% auf alles!</p>
</aside>

Einmalig und einzigartig

Information: Universalattribut id

Das Attribut id dient einfach der Identifikation, damit wir genau dieses Element ansprechen und mit CSS gestalten können (Siehe auch: HTML/Attribute/id.)

Bitte wundern Sie sich nicht über die durchgehende Klein­schreibung – dies ist einfach üblich, aber nicht zwingend.

Achten Sie aber auf jeden Fall darauf, dass Sie die einmal gewählte Schreibweise in HTML und CSS beibehalten, damit es keine Probleme gibt.

Sowohl die Liste als auch das aside-Element haben nun wieder ein Attribut, also eine zusätzliche Information: id="leistungen" und id="angebot".

Im Unterschied zu den feststehenden Elementnamen sind dies Wörter, die wir uns ausgedacht haben, also keine CSS-Bezeichnung.

Damit können wir die gewünschte Liste mit CSS gezielt ansprechen – unsere Hervorhebungen sollen ja schließlich nur exklusiv für dieses eine Element gelten, und nicht für andere.


Jetzt brauchen wir nur noch einen Weg, unser als angebot bezeichnetes Element mit CSS anzusprechen. Nichts leichter als das – wir brauchen nicht mal dazuzusagen, dass wir das aside-Element meinen, der Browser ist schlau genug, das selbst zu folgern. Im CSS schreiben wir einfach:

Elemente über ihre id ansprechen
#angebot {
  /* CSS-Festlegungen */
}
#angebot p {
  /* CSS-Festlegungen für einen Absatz innerhalb des Elements mit der id "angebot" */
}

#leistungen

Das vorangestellte # Zeichen sagt dem Browser, dass dieser Selektor nicht nach einen HTML-Element angebot suchen soll (das es auch gar nicht gibt), sondern nach einem Element, das die id angebot trägt. Es gibt sehr viele Möglichkeiten, mit CSS-Selektoren nach bestimmten Eigenschaften von Elementen zu suchen.

Wenn wir nicht das aside Element selbst ansprechen wollen, können wir auch präziser sein. Soll zum Beispiel das p-Element innerhalb des Elements mit der Id angebot angesprochen werden, dann geht auch dies.

Ergebnis

Hier jedenfalls unsere neue vollständige Startseite index.html:

Neue Startseite mit „verpackter“ Liste
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Schreinerei Meier, Dingenskirchen</title>
    <link rel="stylesheet" href="formate.css">
  </head>
  <body>
  <header>
    <a id="backlink" href="/"><img src="logo.svg" alt="logo"></a>
    <h1>Schreinerei Meier</h1>
    <p>Ihre Werkstatt für gutes Wohnen!</p>
  </header>

    <ul>
      <li>Startseite</li>
      <li><a href="html/preise.html">Unsere Preise</a></li>
      <li><a href="html/bilder.html">Bilder von unseren Produkten</a></li>
    </ul>
    <h1>Willkommen bei der Schreinerei Meier im Internet!</h1>
    <p>Ma illo vostre instruction sed, …</p>
    <h2>Unsere Leistungen:</h2>
    <ul id="leistungen">
      <li>Möbel nach Ihren Wünschen
        <ul>
          <li>Küchenmöbel</li>
          <li>Regale und Schrankwände</li>
          <li>Badezimmermöbel</li>
        </ul>
      </li>
      <li>Haustüren</li>
      <li>Gartenzäune</li>
      <li>Reparaturen</li>
    </ul>

    <aside id="angebot">
      <h3>Angebot</h3>
      <p>Nächste Woche 10% auf alles!</p>
    </aside>

    <h2>Übrigens</h2>
    <p>Web de major tentation primarimente, …</p>
    <p>Libro anglese denomination duo e. …</p>

  <footer>
     <a href="kontakt.html">Kontakt</a>
     <a href="impressum.html">Impressum</a>
     <p>© 2021 by selfHTML</p>
  </footer>
  </body>
</html>

Layout mit CSS

Bereits im vorigen Kapitel haben wir mit der Gestaltung einzelner Elemente angefangen. Nun sollen diese auch entsprechend in der Seite platziert werden:

Der Sprung ins kalte Wasser

Wir haben für unseren Angebotskasten gleich mal ganz viel da reingeschrieben:

Der hervorgehobene Kasten mit dem Angebot ansehen …
#angebot {
  background-color: firebrick;
  margin: 1em 3em;
  padding: 1em;
  width: 10em;
  text-align: center;
}

#angebot h3 {
  font-size: 2em;
  font-variant: small-caps;
  color: lightyellow;
}

#angebot p {
  color: white;
}

Und selbstverständlich versäumen wir es nicht, Ihnen alles zu erläutern:

  • padding: 1em; legt den Innenrand in unserer Box fest. Der Text soll nicht direkt an den Rand stoßen.
    Die Breite des Innenrands beträgt 1em in alle Richtungen.
  • margin: 1em 3em; legt den Außenrand um unsere Box fest.
    • die Werte 1em und 3em geben an, dass der Außenrand 1em Höhe nach oben und unten und je 3em Breite nach links und rechts betragen soll. Natürlich wären auch vier verschiedene Werte für jede Richtung möglich.
  • width: 10em;: Der Kasten mit der id angebot soll eine Breite von 10em erhalten.

Platzverschwendung – nein, danke!

Weiterhin fanden wir es ziemlich verschwenderisch, den Platz rechts neben unserer Liste mit den Leistungen frei zu lassen. Wäre es nicht klasse, wenn dort unser Angebotskasten stehen würde?

Nichts leichter als das, aber vorher müssen noch einige Grundlagen behandelt werden:

  1. HTML ohne CSS ist bereits responsiv.
    Bis jetzt nehmen alle Blockelemente wie Überschriften, Absätze und Listen die volle Breite ein. Falls Elemente mehr Inhalt haben als der Viewport Platz bietet, brechen sie automatisch in die nächste Zeile um.
  2. Zu breit ist auch nicht gut!
    Die Wikipedia geht hier mit schlechten Beispiel voran: Auf großen Bildschirmen sind die Zeilen ohne Maximalbreite zu lang und man hat Schwierigkeiten, die nächste Zeile zu finden.
  3. Mobile first!
    Auf kleinen Bildschirmen benötigt man kein Layout nebeneinander. Viele (unüberlegte) CSS-Festlegungen sorgen dafür, dass Inhalte nicht mehr sichtbar werden.
Ein Raster für unsere Seite ansehen …
section {
  display: grid;
  grid-template-columns: 1fr 12em;
}

section h2 {
  grid-column: 1 / -1;
}

Die Leistungen werden mitsamt Überschrift und dem Angebotskasten von einem neuen section-Element umfasst, dass nun mit display: grid; zum Raster wird.

Dieses Raster ist aber nicht pixelgenau festgelegt, sondern besteht aus flexiblen Rasterfeldern:

grid-template-columns: 1fr 12em;

Es werden mit grid-template-columns 2 Spalten gebildet:

  1. die zweite mit unserem Angebotskasten soll 12em breit werden (width: 10em + die je 1em padding)
  2. die linke Rasterzelle mit der ul#leistungen kann ja so breit wie möglich sein und nimmt mit 1fr den restlichen, verfügbaren Platz ein.

Die Überschrift innerhalb des section-Elements (alle Seitenstrukturierungslemente sollten eine Überschrift haben, die das Dokument in Abschnitte gliedert) muss aber über beide Rasterfelder gelegt werden:

  grid-column: 1 / -1;

Mit grid-column wird festgelegt, dass sie an der ersten Rasterlinie links beginnt und an der letzten (genauer: ersten von rechts) wieder endet.

Media queries - Ansichten umschalten

Eine solche Einteilung in Raster und Positionierung mehrerer Seitenelemente nebeneinander ist aber nur sinnvoll, wenn auch wirklich genügend Platz vorhanden ist.

Deshalb sollten solche Raster erst ab einer gewissen Breite verwendet werden. Richten Sie sich dabei nicht an der Display-Größe des aktuell vorhandenen Mobiltelefons oder Tablets, sondern überpüfen Sie ab wann es genügend Platz für die Elemente gibt.


media queries ansehen …
@media (min-width: 30em) { 
  section {
    display: grid;
    grid-template-columns: 1fr 12em;
  }

  section h2 {
    grid-column: 1 / -1;
  }
}

Öffnen Sie das Beispiel in einem neuen Tab und ziehen Sie das Browserfenster kleiner und größer. Sie sehen, wie das Layout automatisch umspringt!

Ziel erreicht!

Oder etwa nicht? Die optische Gestaltung ist selbstverständlich Geschmackssache. Vielleicht finden Sie diese Farben auch einfach nur scheußlich. Das ist Ihr gutes Recht.

Aber Sie wissen ja jetzt, wo Sie nachsehen können, wenn Sie z. B. die Farbe ändern wollen:

Mit F12 können Sie den Seiteninspektor öffnen und das HTML-Markup und das verwendete CSS untersuchen. Dabei können Sie auch die Werte für CSS-Eigenschaften ändern und ausprobieren.

Wie geht es weiter?

Ja, nun haben Sie uns tapfer durch diesen Kurs begleitet, und wir hoffen, Ihnen einen ersten Einstieg in HTML vermittelt zu haben.

Vieles haben wir aber auch weggelassen. Anderes vereinfacht. Die HTML- und CSS-Dateien, die wir Ihnen präsentiert haben, sind zwar formal korrekt, aber nicht unbedingt in jeder Hinsicht ideal und praxistauglich, und sie reizen keineswegs alle Möglichkeiten aus, die es gibt – weder technisch noch ästhetisch.

Und gar nicht erwähnt haben wir bislang JavaScript, eine Programmiersprache, mit der Sie – genügend Zeit, Wissen und Motivation vorausgesetzt – nahezu beliebige interaktive Anwendungen schreiben können, die dann im Browser ausgeführt werden.

Wir hätten also noch viel, viel mehr schreiben können; natürlich hatten wir noch zahlreiche Ideen, wie man die Seiten der Schreinerei Meier noch weiter hätte verbessern können, aber irgendwo muss man eine Grenze ziehen. Schließlich sind Sie jetzt schon kein völliger Anfänger mehr und können sich nach und nach weiter in die Thematik einlesen. Und mit SELFHTML haben Sie ein großartiges Mittel dafür an der Hand.

In diesem Sinne hoffen wir, dass wir Sie anregen konnten, sich mit diesem Thema eingehender zu befassen und womöglich einmal selbst im Internet zu publizieren.