Frage zum Wiki-Artikel „SELFHTML“

[Rolf B]

Hallo Verzweifelnde Schülerin,

geht es Dir um diese Farbgebung?

Guckst Du Dir die Seite auf deinem Smartphone an oder mit einem Desktop-PC? Auf dem Smartphone kannst Du den HTML Quelltext der Seite nicht betrachten, auf einem Desktop-PC könntest Du hingegen mit der rechten Maustaste auf den Link klicken und "Untersuchen" auswählen (im Wiki natürlich, nicht hier im Forum). Dann siehst Du im Detail, was wir gemacht haben. Allerdings noch viele Details mehr und es könnte Dich verwirren.

Grundsätzlich ist das ein Link-Element (also <a href="...">Nächste Seite</a>). Dieses befindet sich in einem List-Item Element (<li>), weil wir diese Navigation am Seitenende als Liste im HTML notiert haben. Die Listenpunkte haben wir ausgeblendet. Das Link-Element bekommt dann noch die blaue Hintergrundfarbe und die weiße Vordergrundfarbe..

Für all das verwendet man CSS. Das ist außer HTML die zweite wichtige Sprache im Web. Mit CSS kannst Du HTML Elemente auswählen und ihnen Eigenschaften zuordnen, wie Rahmen, Hinter- und Vordergrundfarbe, Textausrichtung oder einen Listenstil. CSS besteht aus Darstellungsregeln (Styles), die in einer eigenen Datei oder im <style>-Element als Stylesheet aufgeschrieben werden.

Einiges davon erklärem wir in unserem HTML Einstiegskurs „Schreinerei Meier“, weitere Informationen findest Du teils in den HTML- und teils in den CSS-Tutorials im Wiki.

Das ist teils nicht so einfach zu trennen, Listenformatierung mit CSS haben wir beispielsweise im HTML-Tutorial zu Listen, weil beides zusammengehört.

Im konkreten Fall sieht das HTML so aus:

<ul role="navigation" class="continuation">
  <li class="prev-cont">...</li>
  <li class="main-cont">...</li>
  <li class="next-cont">
    <a href="/wiki/Wie_fange_ich_an%3F">Wie fange ich an?</a>
  </li>
</ul>

Das ist eine Liste mit drei Einträgen. Jeder Eintrag kann einen Link enthalten. Ohne CSS würden das einfach drei Listenpunkte untereinander sein.

Mit CSS machen wir aus der Liste ein sogenanntes Grid, damit kann man Elemente in einem Raster anordnen (ohne dafür eine HTML-Table missbrauchen zu müssen). Deshalb stehen die Listeneinträge nebeneinander. Mit der Eigenschaft list-style: none;) entfernen wir die Listenpunkte, und wir entfernen Abstände (margin und padding), die der Browser sonst einer Liste geben würde. Die beiden Pfeile erzeugen wir durch geschickt eingestelle Ränder auf Pseudoelementen, die mit CSS erzeugt werden.

Die Farbgebung erfolgt allein auf dem a Element. Die beiden dafür relevanten Eigenschaften sind:

.continuation a {
  background-color: #337599;
  color: white;
}

#337599 ist eine RGB-Farbangabe in Hexadezimalschreibweise und erzeugt den Blauton. Naja, gut, der Blauanteil ist 99 (153/255) und der Grünanteil ist 75 (117/255), das grenzt schon an Türkis 😉. Eine lesbarere Darstellung von #337599 wäre rgb(51 117 153), da erkennt man die Werte der Farbkomponenten besser. Sowas kann man im Stylesheet direkt hinschreiben. Eine verständlichere Darstellung würde nicht RGB, sondern HSL oder OKLCH verwenden, aber das führt hier zu weit und wird auf der verlinkten Farbmodellseite beschrieben.

Dass das a zu einem großen Kasten wird und nicht einfach nur ein inline-Link, liegt daran, dass wir es zu einer Flexbox gemacht haben. Damit wird es zum Block-Element, das sein Elternelement ausfüllt. Die Flexbox hilft uns, den Text vertikal und horizontal zu zentrieren.

Also - kleiner Kasten, viel Drumherum. CSS ist komplex und kompliziert: es gibt eine Menge unterschiedlicher Bausteine, die ineinandergreifen (komplex), und jeder davon hat eine Menge CSS-Eigenschaften mit unterschiedlichsten Wertetypen (kompliziert), mit denen man ihn steuert.

HTML ist dagegen ein Klacks…

Rolf