Kleine Fehler, große Wirkung

Grundlagen: Webprogrammierung mit HTML und CSS

Kleine Fehler und Nachlässigkeiten führen im Webdesign schnell zu größeren Problemen. Wir zeigen, worauf Sie bei den Basics achten sollten und wo Fallen lauern.

  1. Grundlagen: Webprogrammierung mit HTML und CSS
  2. Doctype
internet, webdesign, html, css, programmierung, basics

© Franz Neumeier, Daniela Schrank

internet, webdesign, html, css, programmierung, basics

Das Grundgerüst einer Webseite wird gerne vernachlässigt. Doctype, Meta- Daten und allerlei oft überflüssige Code- Zeilen übernimmt man einfach so, wie es der HTML-Editor vorgibt. CSS und JavaScripts wuchern vor sich hin. Kleine Fehler in HTML- und CSS-Code summieren sich zu großen Problemen. Für eine saubere und performante Website liegt hier aber schon der Grundstein. Der Workshop zeigt, worauf Sie achten sollten und wo Sie Code-Zeilen sparen können.

Meta-Informationen

In Meta-Tags lassen sich zusätzliche Informationen zu einer Webseite unsichtbar in den Code einbetten. Einige Meta-Informationen geben beispielsweise Hinweise an Suchmaschinen, ob eine Seite indiziert werden soll, andere enthalten Kurzbeschreibungen der Seite, den Namen des Autors und des verwendeten HTML-Editors.Zwingend notwendig ist keine dieser Meta-Informationen, weswegen sie auf ein Minimum beschränkt bleiben sollten, um die Größe der HTML-Datei so klein wie möglich zu halten. Lediglich einige wenige Meta-Informationen bringen fast immer zusätzlichen Nutzen und sollten deshalb enthalten sein.Vorsicht ist geboten mit allen Meta-Informationen, die beispielsweise HTML und manche CMS automatisch ausliefern. Keywords sind beispielsweise in Hinblick auf Suchmaschinenoptimierung weitgehend obsolet, können aber Schaden anrichten, wenn sie Keywords enthalten, die nicht zum Thema der Website passen. Typisch sind beispielsweise der Name des Template- Designers bei WordPress und ähnliche Informationen, die im Keyword-Metatag nichts verloren haben.

Content Type

Definiert die vom Browser zu verwendende Zeichencodierung. In der Regel arbeitet man heute mit utf-8, die jegliches erdenkliche Sonderzeichen und für die deutsche Sprache insbesondere die Umlaute und das "ß" abdeckt.

internet, webdesign, html, css, programmierung, basics

© Franz Neumeier, Daniela Schrank

Ineffiziente CSS-Deklarationen mithilfe von Google Page Speed Analyzer aufspüren.

Ebenfalls sehr gebräuchlich ist Latin 1 (ISO8859-1), die mit iso-8859-1 deklariert wird. Wird die Zeichencodierung nicht definiert, würde ein Browser mit einer anderen Spracheinstellung als Deutsch die Umlaute falsch darstellen. Auch in Hinblick auf Suchmaschinen-Crawler führt das regelmäßig zu ärgerlichen Problemen. Achten Sie darauf, dass Sie den Zeichensatz angeben, mit dem Ihr HTML-Editor die Daten abspeichert.Meist lässt sich das in den Optionen einstellen. Erzeugt man im HTML-Editor eine neue HTML-Seite, fügt der Editor die richtige Angabe zur Zeichencodierung meist schon automatisch in die Seite ein. Deklaration von UTF-8 als Content Type:

<meta http-equiv="content-type"
content="text/html; charset=utf-8" />

Kurzbeschreibung

Zwar ignorieren Suchmaschinen das description- Tag in Hinblick auf die Bewertung des Inhalts der Website, verwenden den Text daraus aber häufig bei der Anzeige von Suchergebnissen. Hierüber können Sie also in gewissen Grenzen mitbestimmen, was ein User liest, wenn die betreffende Seite in den Suchergebnissen einer Suchmaschine aufgelistet wird. Beispiel:

<meta name="description" content=
"Kurzbeschreibung des Inhalts. " />

Achten Sie hier besonders darauf, dass Umlaute korrekt ausgegeben werden.

Robots

Über den robots-Tag geben Sie den Suchmaschinen eine Empfehlung, wie sie mit der Webseite umgehen sollen. Beispiel:

<meta name="robots" content="index,
follow,noarchive" />

index,follow ist das Standard-Verhalten und muss eigentlich nicht angegeben werden. Möchten Sie aber beispielsweise, dass die Seite zwar nicht indiziert wird, die enthaltenen Links aber verfolgt werden, ist noindex,follow sinnvoll. Soll die Seite indiziert, Links aber nicht gefolgt werden, hilft index,nofollow weiter.Aber Vorsicht: Eine Zugangssperre stellt dieses Tag nicht dar, es gibt lediglich Empfehlungen an den Suchmaschinen- Crawler. Das noarchive-Attribut bestimmt, dass Suchmaschinen keine älteren Versionen der Seite im Archiv behalten sollen. Vor allem für Startseiten von Nachrichten- Portalen, die sich ständig verändern, kann dies sehr sinnvoll sein.

Canonical URL

Um Duplicate-Content-Probleme mit Suchmaschinen zu vermeiden, lässt sich mit canonical die Haupt-URL für Content definieren. Das ist sinnvoll, wenn der identische Content unter verschiedenen URLs erreichbar ist, was häufig bei CMS und Foren auftritt, aber auch schon, wenn man für seine Seiten eine zusätzliche Druckversion anbietet. Suchmaschinen verwenden dann die Haupt-URL zur Indizierung und ignorieren die weiteren Seiten mit demselben Content. Beispiel:

<link rel="canonical" href="http://
www.domain.com/seite1.html" />

Favicon

internet, webdesign, html, css, programmierung, basics

© Franz Neumeier, Daniela Schrank

Hilft aufzufallen: Favicons, hier in den Firebox-Bookmarks.

Was auf den ersten Blick wie eine Spielerei aussieht, hat einen hohen praktischen Nutzen. Definieren Sie ein Favicon, zeigen Browser dieses Logo sowohl neben der Adresszeile im Browser als auch in den Bookmarks an. Mit einem Favicon schaffen Sie einen zusätzlichen Wiedererkennungswert für Ihre Website. Beispiel:

<link rel="shortcut icon" href=
"http://www.domain.com/favicon.ico"
type="image/x-icon">

CSS und JavaScript

Weitere Einträge im <head>-Bereich einer HTML-Datei dienen dazu, CSS sowie JavaScripts einzubinden. Früher waren dazu umständliche Code-Konstrukte nötig, um Browser nicht aus dem Tritt zu bringen, die JavaScript und CSS nicht interpretieren konnten. Das kann man sich inzwischen sparen, denn Browser, die kein JavaScript oder CSS interpretieren können, gibt es quasi nicht mehr. Ein JavaScript binden Sie daher ganz einfach wie folgt ein:

<script type="text/javascript" src=
"http://www.domain.com/script.js"></script>

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".