HTML, CSS und Co: Die Zutaten einer Website
Im letzten Beitrag habe ich bereits angedeutet, wie so eine Website eigentlich aufgebaut wird und welche „Zutaten“ es dafür gibt. Und obwohl sie natürlich alle wunderbar miteinander harmonieren und wahre Teamplayer sind, hat jede von ihnen einen ganz bestimmten Zweck.
26. Mai 2021 • Lesezeit: ca. 11 Minuten
Diese Einsatzbereiche sollten auch so gut es geht voneinander getrennt werden. Die Warnung vor Inline-Code habt ihr sicher noch im Gedächtnis ;) Zur Erinnerung: Dabei geht es darum, dass Design-Angaben nicht direkt ins Grundgerüst der Webseite gepackt werden, sondern im Idealfall zentral in einem Stylesheet. Aber dazu gleich mehr.
Vorab nur die Info, warum ich das überhaupt erzähle. Viele werden nämlich jetzt denken: Dafür habe ich doch die Baukasten-Vorlage bzw. das WordPress-Theme, damit ich mich damit nicht beschäftigen muss.
Für den Fall der Fälle – wofür man die Grundkenntnisse (vielleicht mal) braucht
Stimmt grundsätzlich auch, allerdings hat es ja durchaus Vorteile, zumindest einigermaßen zu wissen, womit man es dabei zu tun hat. Nicht nur wegen der SEO-Aspekte, sondern vor allem, um zu wissen, wo man suchen muss, wenn man mal irgendetwas anpassen muss. Wenn der Kuchen beim Backen nicht aufgeht, ist es ja auch nicht uninteressant, ob das jetzt am (fehlenden) Backpulver liegt oder der Ofen gar nicht eingeschaltet ist ;)
Wer zum Beispiel WordPress nutzt und im aktuellen Standard-Theme „Twenty Twenty-One“ das „Powered by WordPress“ am Seitenende entfernen möchte, kann das u.a. via CSS erledigen. Eine hübsche kleine Aufgabe, an der übrigens auch diverse selbsternannte „WebdesignerInnen“ regelmäßig scheitern und in Facebook-Gruppen nach Hilfe fragen, während sie ihren KundInnen mittels gekaufter Premium- oder Multipurpose-Themes samt Vorlagenpaket „professionelle und individuelle Designs“ versprechen … aber das ist ein anderes Thema ;)
Zurück zur Baustelle, die simple Lösung sieht nämlich ziemlich unspektakulär aus:
.powered-by {
display: none;
}Diesen kleinen Schnipsel könnt ihr im „Customizer“ unter dem Punkt „Zusätzliches CSS“ einfügen. So wird der entsprechende Hinweis einfach nicht mehr angezeigt. Klingt ziemlich übersichtlich, aber ein bisschen komplexer ist das Gesamtkonstrukt dann doch ;)
HTML – Die Basis
HTML, kurz für Hypertext Markup Language, bildet die Grundlage einer Website. Sie definiert einzelne Inhaltselemente wie Überschriften (z.B. <h1>) oder Absätze (<p>) und damit das Gerüst. Das sieht in der Regel wie folgt aus:
<html>
<head>
</head>
<body>
</body>
</html>Zwischen den Body-Tags finden dann die eigentlichen Inhalte der Webseite ihren Platz. Im Head-Bereich werden diverse Meta-Tags festgelegt, beispielsweise der Seitentitel, der später im Browser-Fenster bzw. –Tab angezeigt wird, ebenso die SEO-Informationen, die später in den Suchergebnissen auftauchen. Auch die Einbindung zusätzlicher Dateien findet hier statt – beispielsweise von Stylesheets, die der Website ein Gesicht verleihen.
Einen umfassenden Überblick über HTML gibt es u.a. im Wiki von selfhtml.org oder (auf Englisch) bei w3schools.com
CSS – Das Gesicht
Die Cascading Style Sheets trennen das Design von der Technik (somit vermeiden sie Inline Code) und legen das Aussehen der HTML-Inhaltselemente fest, zum Beispiel Schriftarten und –größen, Farben, Größe und Anordnung von Bildern oder ihre Abstände zueinander. Dementsprechend könnt ihr erfahrungsgemäß auch relativ sicher sein, dass euch primär CSS-Anpassungen begegnen, wenn ihr die ersten Optmierungen an eurer Website vornehmen wollt.
Die CSS-Informationen sind meist in mindestens einer eigenen Datei (oft style.css) „ausgelagert“, die dann im Head-Bereich der Webseite eingebunden wird. Der Vorteil dieses Verfahrens: Alle Design-Informationen müssen nur einmal zentral festgelegt werden – was besonders hilfreich ist, wenn man mal etwas ändern möchte ;)
Einen umfassenden Überblick über CSS gibt es u.a. im Wiki von selfhtml.org oder (auf Englisch) bei w3schools.com
JavaScript – Die Kommunikation
Manchmal ist es auch gar nicht anders möglich, wenn zum Beispiel User-Interaktionen ins Spiel kommen. Das geschieht u.a. über JavaScript, das häufig in Form der freien Bibliothek jQuery anzutreffen ist. Auch das CMS WordPress hat sie standardmäßig an Bord. Mit ihrer Hilfe werden beispielsweise Ereignisse gesteuert, wie das Auf- und Zuklappen der Navigation auf mobilen Websites, wenn man darauf klickt. Auch durch das bloße Scrollen können Effekte aktiviert werden, zum Beispiel der auf dieser Seite ganz oben breiter werdende schwarze Balken. Je weiter man nach unten scrollt, desto breiter wird er. Auch das Hereinfliegen von Inhalten, sobald man weit genug herunterscrollt, basieren auf JavaScript – so etwas gibt es hier aber nicht ;)
Einen umfassenden Überblick über JavaScript gibt es u.a. im Wiki von selfhtml.org oder (auf Englisch) bei w3schools.com bzw. konkret direkt bei jquery.com
PHP – Die Logistik
Im Falle eines CMS werden diese Inhalte dynamisch abgerufen und in die Webseiten eingebunden. Dabei kommt in der Regel PHP zum Einsatz (die Abkürzung stand ursprünglich mal für „Personal Home Page Tools“, inzwischen aber für das wichtiger klingende „PHP: Hypertext Preprocessor“). Sinn und Zweck des Ganzen: Anstatt Datensätze wie Texte und immer gleiche Abschnitte wie zum Beispiel den Header einer Website mit Logo und Navigationsleiste in verschiedene oder gar jede Unterseite manuell einzufügen, lässt sich der entsprechende Abschnitt auch in eine Datenbank (s.u.) oder eine eigene Datei auslagern, die dann dynamisch auf den Unterseiten eingebunden wird/werden.
Änderungen und Ergänzungen werden dadurch nur einmal fällig und sind nicht für jede einzelne Unterseite händisch auszuführen. Content Management Systeme (CMS) wie z.B. WordPress machen davon Gebrauch, um die Inhalte möglichst unkompliziert darzustellen und zum Beispiel Blog-Artikel sowohl komplett auf Einzelseiten als auch in Auszügen auf Archiv-Seiten (z.B. für Monats-, Kategorie- und Schlagwort-Archive) anzuzeigen.
In meinem Fall sieht dieses Ausspielen meiner Blog-Beiträge so aus: Datum und Titel auf der Startseite, mit zusätzlichem Teasertext im Blog-Archiv und vollständig erst in der Einzelansicht. Außerdem wird der Hintergrund der Waldsilhouette auf der Startseite tageszeitabhängig ebenfalls per PHP gesteuert.
Einen umfassenden Überblick über PHP gibt es u.a. im PHP-Handbuch oder (auf Englisch) bei w3schools.com
SQL – Das Lager
Die per PHP eingebundenen Inhalte werden wie oben beschrieben zentral in Datenbank-Tabellen gespeichert und verwaltet, was in der Regel via MySQL geschieht. Wer ein CMS benutzt, wird damit aber wahrscheinlich gar keine direkten Berührungspunkte haben, also keine Sorge – weitere Exkurse erspare ich uns an der Stelle deshalb auch ;)
Einen umfassenden Überblick über SQL gibt es u.a. (auf Englisch) bei w3schools.com und konkret zu MySQL auf mysql.com
Das Zusammenspiel in der Praxis
Theorie ist schön und gut, aber am praktischen Beispiel erklärt es sich ja irgendwie doch immer noch am einfachsten. Wenn ihr also im Browser-Fenster nach oben rechts schaut, seht ihr (hoffentlich) das Hamburger-Menü mit den drei sich bewegenden Linien. Das Grundgerüst dafür bildet wie gesagt der HTML-Code:
<div class="nav_toggle" aria-controls="primary-menu" aria-expanded="false">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="label">Menü</div>
</div>Darin enthalten sind ein umschließender Container („nav_toggle“), darin drei Linien („bar“) und eine Textzeile („label“). Ohne CSS wäre davon allerdings nicht viel zu sehen, außer dem einsamen Wort „Menü“. Um die div-Container mit der Klasse „bar“ sichtbar zu machen und das ganze „nav_toggle“-Konstrukt oben rechts zu fixieren, kommen folgende Einträge im Stylesheet hinzu:
.nav_toggle {
position: fixed;
top: 0;
right: 0;
margin: 12px 10px 10px 10px;
width: 26px;
text-align: right;
overflow: hidden;
cursor: pointer;
z-index: 9;
}
.nav_toggle .bar {
position: relative;
display: block;
width: 24px;
height: 0px;
margin: 0px 0px 4px;
background: var(--maincolor);
border: 1px solid var(--maincolor);
transition: all 0.25s ease-in-out;
animation: movebar 5s infinite;
}
.nav_toggle .bar:nth-of-type(1) {
animation-delay: 0.5s;
}
.nav_toggle .bar:nth-of-type(3) {
animation-delay: 1s;
}
@keyframes movebar {
0% {margin-left: 0px;}
50% {margin-left: 20px;}
100% {margin-left: 0px;}
}
.nav_toggle.active .bar {
animation-play-state: paused;
}
.nav_toggle .label {
display: block;
font-size: 9px;
line-height: 100%;
font-family: "Lato";
text-transform: uppercase;
color: var(--maincolor);
text-align: right;
margin: 2px 0px 0px;
}Besonders relevant an der Stelle sind die @keyframes, mit denen die Animation der drei Linien gesteuert wird. Wenn sie angeklickt werden und sich das eigentlich Menü öffnet, wird die Animation über den Eintrag „animation-play-state: paused;“ pausiert.
Dieses Menü wird übrigens per PHP eingebunden. Der Code dafür sieht wie folgt aus:
<?php wp_nav_menu( array(
'theme_location' => 'top-menu',
'container' => 'nav',
'container_id' => 'site-navigation',
'container_class' => 'main-navigation',
) ); ?>Das ist im Prinzip der übliche WordPress-Standard, wie die Funktion wp_nav_menu schon verrät. Diese sorgt dafür, das aus dem über das CMS-Backend in der Datenbank gespeicherten Menü, das dem Platz „Top-Menu“ zugeordnet ist, HTML-Code generiert wird, den dann wiederum folgender CSS-Abschnitt veredelt:
nav {
position: fixed;
top: 0;
right: 0;
width: 0vw;
height: 0vh;
overflow: hidden;
z-index: 3;
border-radius: 100% 0% 100% 100%;
transition: all 0.5s ease-in-out;
}
nav.active {
width: 100vw;
height: 100vh;
border-radius: 0%;
}
nav ul {
margin: 80px 0px 0px;
padding: 0px;
list-style: none;
}
nav ul li {
display: block;
margin: 0px;
padding: 0px;
text-align: center;
}
nav ul li a {
display: block;
color: var(--maincolor);
text-transform: uppercase;
text-decoration: none;
font-size: 100%;
line-height: 100%;
padding: 20px 0px 22px;
transition: all 1s ease-in-out;
width: 100%;
}
nav ul li.current-menu-item a,
nav ul li.current_page_item a,
nav ul li.current-menu-parent a,
nav ul li a:hover {
color: var(--contrastcolor);
}Per CSS wird es dann allerdings erst einmal ausgeblendet bzw. „unsichtbar“ gemacht. Um dabei den Effekt zu erzielen, dass sich das Menü beim Klick wie aus einem Kreis heraus bildschirmfüllend öffnet, sind dem Container die Angaben
width: 0vw;
height: 0vh;
overflow: hidden;
border-radius: 100% 0% 100% 100%;zugeordnet. So wird die Breite und Höhe auf null gesetzt und ein „Überlauf“ verhindert. Letzteres ist entscheidend dafür, dass die Inhalte des nav-Containers auch wirklich unsichtbar sind. Für den „Kreis-Effekt“ sorgt der Border-Radius – der nur oben rechts ausgespart wird, weil das Menü hier „ansetzt“.
Mit der Zeile
transition: all 0.5s ease-in-out;wird zudem dafür gesorgt, dass der Übergang „weich“ erfolgt. So taucht das Menü nicht plötzlich auf, sondern wächst sozusagen innerhalb von einer halben Sekunde zur vollen Größe.
Damit dies aber auch auf den Klick hin passieren kann, kommt jQuery zum Einsatz, nämlich folgendes Snippet:
$( '.nav_toggle' ).on( 'click', function(){
$( '.nav_toggle' ).toggleClass( 'active' ).attr('aria-expanded', function (i, attr) {return attr == 'true' ? 'false' : 'true'});
$( '.main-navigation' ).toggleClass( 'active' );
$( '.logo' ).toggleClass( 'active' );
} );Hier wird festgelegt, dass bei einem Klick auf das Element mit der Klasse „nav_toggle“ dem Element selbst sowie dem Menü mit der Klasse „main-navigation“ und dem div-Container mit der Klasse „logo“ (der kleine Namensschriftzug oben in der Mitte) die zusätzliche CSS-Klasse „active“ zugeordnet wird – damit sie entsprechend so angezeigt werden, wie sie angezeigt werden, wenn ihr oben auf die drei Linien klickt ;)
Saubere Struktur: Ordnung ist das halbe Leben
Wie gesagt, kommt es bei Webseiten auch immer auf saubere Strukturen an. Dazu gehört neben den nur teilweise beeinflussbaren Faktoren im Template (sei es nun die Baukasten-Vorlage oder das WordPress-Theme) auch der von euch erstellte Inhaltsblock mit seinen diversen Elementen – allen voran die Überschriften..
Überschriften
In den meisten Editoren stehen euch bis zu sechs verschiedene Überschriften-Ebenen zur Verfügung, die ihr im Prinzip frei einsetzen könnt. Das Problem bei dieser Freiheit: Es handelt es sich um HTML-Elemente, die eigentlich einen ganz konkreten Zweck verfolgen, nämlich das Markieren von Textebenen.
Das funktioniert eigentlich wie in Schreibprogrammen, etwa in Word. Die Überschriften sind durch die Tags <h1> bis <h6> gekennzeichnet, wobei das h natürlich für headline steht und die Ziffer für die entsprechende Ebene.
Dementsprechend ist auch relativ logisch, dass die Hauptüberschrift die 1 bekommen sollte und das auch nur ein Mal pro Seite – ja, es gibt auch die Ansicht, dass es inzwischen pro <section> möglich ist, aber wer von euch setzt dieses Element bewusst ein bzw. hat die Option dazu? Eben ;)
Unterhalb der <h1> können alle anderen Überschrifts-Typen prinzipiell beliebig oft vergeben werden, sollten dabei aber immer den Ebenen folgen. Sprich: Eine <h3> muss thematisch zur vorherigen <h2> passen und nicht auf eine <h4> folgen.
Warum wird das eigentlich so oft falsch gemacht?
Ganz einfach, aufgrund der meist vorgegebenen Designanpassungen der Überschriften. Hier spielt also nicht die strukturelle Vorgabe die entscheidende Rolle, sondern das Aussehen. Da die H2 häufig „zu groß“ ist, wird einfach die H3 genommen – und dann noch mit Inline-Code angepasst … Das sollte man auf jeden Fall vermeiden. Wählt stattdessen die Überschriften entsprechend der Textebene aus und sorgt dann über CSS für die Anpassungen – idealerweise, indem ihr eigene Klassen hinzufügt (in WordPress in der Seitenleiste ganz unten über „Erweitert“ möglich) und diese im Customizer oder noch besser in einer Stylesheet-Datei definiert. Aber wenn euch das zu kompliziert ist, macht es meinetwegen per Inline-Code – das ist immer noch das kleinere Übel als völlig durcheinandergewürfelte Textebenen ;)
Fazit
Auch wenn die meisten von euch vermutlich eher wenig mit den oben beschriebenen „Zutaten“ einer Website zu tun haben werden, kann es nicht schaden, zumindest einen groben Überblick darüber zu haben. Am ehesten dürfte euch hier und da ein wenig CSS begegnen, wenn ihr Anpassungen an der Optik eurer Website vornehmen wollt.
Achtet aber trotzdem nach Möglichkeit darauf, eure Inhalte auch mit Block-Editoren und Page-Buildern bzw. Baukasten-Systemen strukturiert anzulegen, um spätere Anpassungen, Änderungen und Ergänzen zu erleichtern. Das ist nicht nur positiv für die Website selbst, sondern zahlt sich in seriösen Fällen auch spürbar aus, wenn ihr jemanden dafür beauftragt und derjenige nicht erst mal stundenlang „aufräumen“ muss. Und ihr könnt besser einschätzen, ob derjenige euch mit vermeintlich notwendigen Zusatzarbeiten ein bisschen über den Tisch ziehen möchte ;)