Doch wie genau funktioniert das? Und welche Tools brauche ich dafür? Genau diesen Fragen möchte ich in diesem und in kommenden Artikeln auf den Grund gehen.

Was brauche ich für meine eigene Webseite?

Um zu starten braucht es eigentlich nicht viel. Die wenigen Dinge, die man wirklich benötigt, habe ich hier mal in einer Liste näher beschrieben.

• Etwas Zeit
  Eine gute Homepage lässt sich nicht einfach in wenigen Minuten erstellen, darum sollte man sich auch die entsprechende Zeit nehmen.
• Einen Plan
  Man kann keine eigene Webseite erstellen, ohne vorher zu wissen, welches Ziel man eigentlich mit dieser Seite verfolgen will. Möchte man ein Tagebuch schreiben? Will man Informationen zu einem bestimmten Thema zusammentragen und aufbereiten? Will man sich selbst und die eigenen Projekte vorstellen? Oder möchte man eine Plattform für sich und seine Freunde schaffen? Die Möglichkeiten sind grenzenlos, aber man sollte zumindest grob das Thema der Webseite festlegen.
• Kenntnisse im Umgang mit HTML, CSS und JavaScript
  Man kann keine Homepage erstellen, ohne nicht zumindest die grundlegendsten Bausteine einer Webseite zu kennen. Mit HTML legt man die Struktur und den Inhalt einer Webseite fest. Mit CSS kann man das Aussehen der einzelnen Elemente einer Webseite kontrollieren und mit JavaScript kann man die Funktionalität der eigenen Seite erweitern. Aber erst die Kombination aus allen Zutaten ergibt eine gute Webseite.
• Eine eigene Internetadresse
  Ohne eine eigene Domain kann niemand auf die liebevoll erstellten Inhalte zugreifen. Der Domainname ist die Adresse einer Seite im Internet. Daher sollte man sich einen sprechenden Namen für die eigene Homepage ausdenken. Ob nun www.willies-kochrezepte.de oder www.webmatze.de - solange der Name noch nicht vergeben ist, kann man fast jeden Domainnamen registrieren lassen.
• Webspeicherplatz
  Damit man die erstellen HTML Seiten auch für Jeden zugänglich im Internet ablegen kann, benötigt man etwas Speicherplatz. Diesen Webspeicherplatz oder auch Webspace genannt, wird man sich meistens bei professionellen Webhostern anmieten. Die Kosten dafür sind überwiegend sehr niedrig. Es ist auch möglich, eigene Webserver zu verwenden, doch für eine kleine Homepage reicht meistens weniger aus.

Das waren auch schon die wichtigsten Zutaten für die eigene Homepage. Wie man sehen kann, braucht es nicht wirklich viel, um eine eigenen Webseite zu erstellen. Doch für jemanden, der bisher noch nie eine Homepage erstellt hat, können einige der Punkte trotzdem eine Hürde darstellen.

Schritt für Schritt zur eigenen Webseite

Gerade für diese Anfänger - und dass meine ich nicht abwertend, denn jeder hat einmal an diesem Punkt begonnen - werde ich in den nächsten Tagen und Wochen in verschiedenen Beiträgen auf die einzelnen oben angesprochenen Punkte näher eingehen. Am Ende wird dann jeder eine Schritt für Schritt Anleitung für die erste eigene Homepage zur freien Verfügung haben.

Auf folgende Punkte werde ich dabei detaillierter eingeben:

• Wie man das richtige Thema für die eigene Homepage wählt
• HTML, CSS und JavaScript - Das Grundgerüst einer Webseite beherrschen
• So findet man den passenden Domainnamen für die eigene Webseite
• Wie wähle ich den richtigen Webhoster für meine Homepage aus?
• Wie bekomme ich mehr Besucher für meine eigenen Webseite?

Ich freue mich schon darauf und hoffe, dass der Eine oder Andere von Euch mit Hilfe dieser Anleitungen seine erste eigene Homepage erstellen können wird.

• Schritt für Schritt zum eigenen Blog
• Surfino bietet Exklusiv-Paket
• Genial
• Google Gadgets auf der eigenen Homepage
• Fallstudie: Von 0 auf 100 Euro in 12 Monaten

Auf vielen Seiten werden immer noch Navigationsmenüs verwendet, welche vollständig auf JavaScript aufbauen und bei ausgeschaltetem JavaScript nicht mehr funktionieren. Solche Seiten sind dann für Nutzer mit Behinderungen meistens nicht mehr bedienbar.

Das barrierefreie CSS Menü

In diesem Beitrag möchte ich euch zeigen, dass man Menüs auch auf behindertengerechte und barrierefreie Weise erstellen kann. Ziel ist es ein Menü zu bauen, dass nur auf aktuellen Standards wie HTML und CSS beruht und keine Verwendung von JavaScript macht. So soll es möglich sein, dass Menü auch dann noch bedienen zu können, wenn der Nutzer JavaScript oder gar CSS im Browser ausgeschaltet hat.

So sieht das fertige Menü aus

Hier könnt Ihr schon einmal sehen, wie das Menü aussehen wird. (Wird im IE6 als vertikales Menü angezeigt, während es alle modernen Browser als Drop Down Menü angezeigen.)

• Start
• Informationen
  • Webseiten erstellen
    • HTML
    • CSS
    • Programmieren
      • JavaScript
      • PHP
      • Java
      • ActionScript
      • Ruby
    • Flash
  • Multimedia
    • Grafiken
    • Videos
• Suchen
  • Google
  • Yahoo
  • MSN
• Über

Dieses Beispiel hat insgesamt vier Ebenden, wobei jede einzelne Ebene auch noch unterschiedlich per CSS angepasst werden kann.

Der HTML Code

Der Aufbau dieses Menüs per HTML erfolgt über verschachtelte unsortierte Listen <ul>. Zur besseren Veranschaulichung könnt Ihr hier den HTML Code betrachten:

 
<ul class="cssmenu">
  <li><a href="http://webmatze.de/">Start</a></li>
  <li><a href="http://webmatze.de/">Informationen</a>
    <ul>
      <li><a href="http://webmatze.de/">Webseiten erstellen</a>
        <ul>
          <li><a href="http://webmatze.de/">HTML</a></li>
          <li><a href="http://webmatze.de/">CSS</a></li>
          <li><a href="http://webmatze.de/">Programmieren</a>
            <ul>
              <li><a href="http://webmatze.de/">JavaScript</a></li>
              <li><a href="http://webmatze.de/">PHP</a></li>
              <li><a href="http://webmatze.de/">Java</a></li>
              <li><a href="http://webmatze.de/">ActionScript</a></li>
              <li><a href="http://webmatze.de/">Ruby</a></li>
            </ul>
          </li>
          <li><a href="http://webmatze.de/">Flash</a></li>
        </ul>
      </li>
      <li><a href="http://webmatze.de/">Multimedia</a>
        <ul>
          <li><a href="http://webmatze.de/">Grafiken</a></li>
          <li><a href="http://webmatze.de/">Videos</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="http://webmatze.de/">Suchen</a>
    <ul>
      <li><a href="http://webmatze.de/">Google</a></li>
      <li><a href="http://webmatze.de/">Yahoo</a></li>
      <li><a href="http://webmatze.de/">MSN</a></li>
    </ul>
  </li>
  <li><a href="http://webmatze.de/">Über</a></li>
</ul>
 

Wie man sehen kann, gibt es keine besonderen Tricks. Es handelt sich einfach um ganz normalen standardkonformen HTML Code. Auch ohne CSS kann man dieses Menü bedienen und alle einzelnen Links aufrufen.

Um das Menü aber etwas ansprechender zu gestalten, wird es durch die folgenden CSS Anweisungen in die richtige Form gebracht.

Der CSS Code

Ich werde jetzt nicht ins Detail gehen, wie genau die einzelnen Anweisungen sich auf die Darstellung des Menüs auswirken. Zum besseren Verständnis habe ich ein paar Kommentare in den CSS Code mit aufgenommen. Anmerken möchte ich jedoch, dass ich den letzten Teil nur mit aufnehmen musste, weil sich der IE 6 hier etwas quer stellt und sich nur durch spezielle CSS Anweisungen dazu bringen lässt, das Menü ebenfalls richtig darzustellen. (Wer möchte, kann den IE 6 speziellen Teil natürlich weglassen.)

ul.cssmenu {
  position: relative;
  display: block;
  margin: 0px;
  padding: 0px;
}
ul.cssmenu ul {
  position: relative;
  display: none;
}
ul.cssmenu li {
  position: relative;
  display: inline;
  float: left;
}
/* Menupunkt stylen */
ul.cssmenu li a {
  font-family: arial, sans-serif;
  font-size: 12px;
  line-height: 20px;
  text-decoration: none;
  text-align: center;
  display: block;
  width: 100px;
  height: 20px;
}
ul.cssmenu li:hover > a {
  background-color: #666666;
  color: #FFFFFF;
  font-weight: bold;
}
/* Untermenüpunkt einblenden */
ul.cssmenu li:hover > ul {
  position: absolute;
  top: 20px;
  left: -40px;
  display: inline;
}
/* ab zweite Ebene */
ul.cssmenu li li:hover > ul {
  top: 0px;
  left: 110px;
}
ul.cssmenu li li a {
  width: 150px;
}
/* Farben der einzelnen Ebenen (werden vererbt)*/
ul.cssmenu a {
  color: #000000;
  background-color: #e4e4e4;
}
ul.cssmenu ul a {
  background-color: #d4d4d4;
}
ul.cssmenu ul ul a{
  background-color: #c4c4c4;
}
ul.cssmenu ul ul ul a{
  background-color: #b4b4b4;
}
 
/* zusätzliche Styleangaben für IE 6 */
/* das Menü wird dort untereinander dargestellt */
ul.cssmenu {
  _text-indent: 10px;
}
ul.cssmenu ul {
  _display: inline;
  _margin-left: 0px;
  _text-indent: 20px;
}
ul.cssmenu ul ul {
  _text-indent: 30px;
}
ul.cssmenu ul ul ul {
  _text-indent: 40px;
}
ul.cssmenu li {
  _float: none;
}
/* Menupunkt stylen */
ul.cssmenu li a {
  _text-align: left;
  _width: 150px;
}
ul.cssmenu a:hover {
  _font-weight: bold;
  _background-color: #666666;
}

Fazit

Wie Ihr sehen könnt ist es gar nicht so schwer auch ohne JavaScript ein ansprechendes Menü zu gestalten. Das hier gezeigte Beispiel lässt sich natürlich leicht durch andere Farben oder Hintergrundgrafiken per CSS noch weiter verschönern und an die eigenen Bedürfnisse anpassen. Alle modernen Browser sollten damit zurecht kommen - selbstverständlich auch Googles neuer Chrome Browser.

• CSS Button Tricks
• Wie man wirklich ansprechende Formulare erstellt
• Wirklich einfache JavaScript Tooltips
• FireBug 0.4 – Der ultimative Web Debugger
• Ist display=”none” jetzt irrelevant?

Wofür steht irrelevant?

Das Attribut irrelevant darf die Werte "true" oder "false" enthalten und gibt an, ob ein so ausgezeichnetes HTML Element im aktuellen Kontext noch nicht oder nicht mehr relevant ist. So gekennzeichnete Elemente werden vom Browser weder gerendert, noch angezeigt. Das heißt, man kann damit beliebige Elemente ein- und ausblenden.

Bisher konnte man diese Funktionalität nur durch das Setzen der CSS Eigenschaft display auf display: none erreichen. Damit werden die entsprechenden Elemente ebenfalls nicht gerendert und angezeigt.

Der Nachteil hier wäre allerdings, dass ein Gerät oder Browser, welcher keine Stylesheets versteht, solche Elemente dann trotzdem darstellen würde. Bei Verwendung von irrelevant würde der entsprechende Teil auch in diesem Fall nicht angezeigt werden. (Vorausgesetzt das Gerät versteht HTML5.)

irrelevant schon heute verwenden

Damit man das neue Attribut in HTML Seiten verwenden kann, müsste man darauf warten, dass die aktuellen Browser HTML 5 unterstützen. Doch bis es soweit ist, kann es noch eine Weile dauern, zumal die Spezifikation noch nicht in der finalen Version vorliegt.

Um das Warten aber ein wenig zu verkürzen, kann man die entsprechende Funktionalität in allen aktuellen Browsern auch auf anderem Weg erreichen. Dazu muss man nur zwei einfache CSS Definitionen in das HTML Dokument einbinden, und schon wird das Attribut irrelevant richtig ausgewertet.

 
<style type="text/css">
  *[irrelevant] {
    display: none;
  }
  *[irrelevant="false"] {
    display: inherit;
  }
</style>
 

(Man sollte jedoch versuchen möglichst nicht irrelevant="false" zu verwenden, sondern statt dessen das Attribut ganz entfernen, da es unter Umständen bei einigen HTML Elementen zu Problemen in der Darstellung kommen kann.)

So kann man nun beliebige Elemente ausblenden lassen:

 
<p>Laut HTML 5  können nicht relevante Elemente
 ausgeblendet werden, indem ihnen das Attribut irrelevant
 zugewiesen wird. <span irrelevant="true">HTML 5 wird noch
 nicht von allen aktuellen Browsern unterstützt.</span>
 Irrelevante Elemente sind solche, die noch nicht, oder nicht
 mehr relevant sind. Das Attribut sollte auf solche Abschnitte
 angewendet werden, die im aktuellen Kontext nicht relevant
 sind, es aber später durchaus wieder werden können.</p>
 

Wenn man dies mit einem aktuellen Browser wie Firefox 3, Safari 3 oder IE 8 betrachtet, sollte der zweite Satz nicht mehr angezeigt werden:

Elemente per DOM ein- und ausblenden

Jetzt, da wir mit irrelevant gekennzeichnete Elemente vom Browser ausblenden lassen können, fehlt nur noch der entsprechende JavaScript Code, um dies auch dynamisch per Mausklick durchführen zu können:

 
function hide(elementId) {
  var el = document.getElementById(elementId);
  el.setAttribute('irrelevant',true);
}
function show(elementId) {
  var el = document.getElementById(elementId);
  el.removeAttribute('irrelevant');
}
 

Fazit

Wie man sieht, kann man schon heute bestimmte HTML5 Features verwenden und so die eigenen Seiten für die Zukunft vorbereiten. Ob man das auch tun sollte, sei jedem selbst überlassen. Da ältere Browser möglicherweise mit den hier gezeigten Beispielen nicht zurecht kommen, ist dies nicht unter allen Umständen die beste Wahl. Aber da in den entsprechenden Browsern in dem Fall die zu versteckenden Inhalte einfach angezeigt werden würden, wäre auch kein größerer Schaden entstanden.

• CSS Formular Design – Textfelder
• Die Sprache eines Links kennzeichnen
• Wirklich einfache JavaScript Tooltips
• CSS Auswahlliste mit Checkboxen
• Unsicher Objekte unter SSL in IE

Warum ich solch eine Schwachsinn schreibe? Okay, bevor mir jemand die Tastatur aus der Hand reißt... Was ich mit der Überschrift eigentlich sagen wollte: Firefox unterstützt in der Version 3 nun endlich auch Sollumbrüche in Wörtern. Und zwar solche, bei denen der Trennstrich nur dann angezeigt wird, wenn der Umbruch wirklich benötigt wird. Diese "bedingten Trennstriche", oder im Englischen auch "soft hyphen" genannt, werden durch das Zeilenumbruch-Entity ­ im HTML Text definiert.

Im folgenden Beispiel wird das vielleicht deutlich:

 
<p>Soll&shy;um&shy;brü&shy;che können in Wörtern eingefügt
 werden, welche ohne bedingte
 Zei&shy;len&shy;um&shy;brü&shy;che nicht richtig umbrechen</p>
 

Soft Hyphen = ­ = schüchtern

Gut, damit hätten wir das Rätsel auch geklärt. Aber "schüchtern" finde ich in diesem Zusammenhang gar nicht mal so unangebracht. Denn was auf dem ersten Blick vielleicht verlockend erscheint, nämlich den bedingten Trennstrich in jedem Wort eines Textes unterzubringen, ist natürlich auf dem zweiten Blick mehr als bedenklich.

Damit würde man den HTML Code erheblich aufblähen und die Leserlichkeit von Text im HTML deutlich erschweren. Wer solch einen Text später nach bearbeiten muss, wird sicherlich nicht viel Freude an dieser Arbeit haben.

Darum sollte man den bedingten Trennstrich nur "sehr schüchtern" anwenden, also nur an Stellen, bei denen es sonst zu Problemen in der Darstellung kommen könnte. Ich könnte mir z.B. Label Elemente in einem Formular vorstellen, welche nur eine bestimmte Breite haben sollen und wo man damit zu lange Wörter zum Umbruch zwingen kann, ohne dass das Layout des Formulars zerschossen wird. Hier findet Ihr ein Beispiel dafür, wie man ansprechende Formulare erstellt. Das Gleiche könnte auch auf Spaltenüberschriften einer Tabelle zutreffen, welche nur eine bestimmte Breite haben sollen.

Fazit

Ich finde es gut, dass Firefox 3 nun auch bedingte Trennstriche unterstützt, zumal der IE dies schon seit einigen Jahren kann. Weise und sparsam angewendet, können sie sicherlich sehr hilfreich sein. Doch im Netzt gibt es auch Bedenken darüber, was die Verwendung von bedingten Trennstrichen angeht. Was haltet Ihr davon?

• CSS Formular Design – Textfelder
• Kleine Style Tricks – große Wirkung
• Ist display=”none” jetzt irrelevant?
• Wie man wirklich ansprechende Formulare erstellt
• Spread Firefox – 1.000.000 Downloads in 10 Tagen

Gerade weil Formulare solch ein wichtiger Bestandteil einer Seite sind, sollte man auch beim Design eines Formulars an den Anwender denken. Klar strukturierte Formulare mit sinnvollen Bezeichnungen und Beschreibungen der einzelnen Felder helfen dem Nutzer dabei, die benötigten Daten schnell eingeben zu können. Aber auch beim HTML Code der Formulare sollte man sich an allgemein gültige Regeln halten, damit diese z.B. auch von behinderten Anwendern leicht ausgefüllt werden können.

Formulare richtig aufbauen

Um ein Formular erstellen zu können, sollte man sich zuerst alle benötigten Daten notieren und sich überlegen, wie man diese als Formularfeld darstellen kann. Namen oder Emails wird man am besten als Texteingabefeld darstellen. Für Beschreibungen oder größere Texte eignet sich die Textarea besser. Eine Auswahl, z.B. ob der Nutzer Mann oder Frau ist, lässt sich sowohl durch Radiobuttons und auch als Auswahlliste darstellen. Mit Checkboxen fragt man schließlich Daten ab, die keine Texteingabe erfordern, sondern nur ausgewählt werden müssen.

Alle verschiedenen Felder sollten möglichst durch ein Label gekennzeichnet werden. Wenn notwendig kann man dies noch durch ausführlichere Beschreibungen ergänzen, wenn sich die benötigten Daten nicht durch ein oder zwei Wörter erklären lassen.

Wenn ein Formular aus mehreren, inhaltlich nicht zusammengehörigen Abschnitten besteht, so sollte man diese durch Fieldsets logisch aufteilen und mit Legend genauer beschreiben.

Ein einfaches Beispiel - Das Kontaktformular

Zur besseren Veranschaulichung werde ich ein einfaches Kontaktformular aufbauen. Kontaktformulare kann man auf fast jeder Seite finden und sind ein wichtiges Mittel zur Kommunikation zwischen Seitenbesucher und Seitenbetreiber.

Am Ende soll unser Kontaktformular folgendermaßen aussehen:

Wie man sehen kann, ist das Formular relativ einfach gehalten, sieht aber dennoch ansprechend aus. Erreicht wird dies durch den Einsatz von gut strukturiertem HTML und einfachen CSS Definitionen.

Der HTML Code

Beim Aufbau des Formulars mit HTML habe ich darauf geachtet, dass es in allen Browsern bedienbar bleibt und auch für Behinderte mit Screenreadern keine Probleme macht. Die einzelnen Formularfelder wie einzeilige oder mehrzeilige Textfelder wurden in einer Liste untergebracht und mit <LABEL> Elementen versehen. Bei bestimmten Feldern habe ich zusätzlich noch einen längeren, beschreibenden Text hinzugefügt:

 
<form class="wmForm" action="#" method="post">
  <fieldset>
    <legend>Ihre Kontaktdaten</legend>
    <ul>
      <li>
        <label for="name"><span>*</span>Name</label>
        <input id="name" name="name" type="text" />
        <p class="wmHint">Verwenden Sie wenn möglich Vor- und Zuname.</p>
      </li>
      <li>
        <label for="email"><span>*</span>Email</label>
        <input id="email" name="email" type="text" />
        <p class="wmHint">Bitte stellen Sie sicher, dass diese Email wirklich existiert.</p>
      </li>
      <li>
        <label for="nachricht"><span>*</span>Ihre Nachricht</label>
        <textarea id="nachricht" name="nachricht"></textarea>
        <p class="wmHint"></p>
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Ich möchte Folgendes gleich kostenlos mitbestellen</legend>
    <ul>
      <li>
        <label for="fruehlingskatalog">Frühlingskatalog</label>
        <input id="fruehlingskatalog" class="checkbox" name="fruehlingskatalog" type="checkbox" />
      </li>
      <li>
        <label for="sommerkatalog">Sommerkatalog</label>
        <input id="sommerkatalog" class="checkbox" name="sommerkatalog" type="checkbox" />
      </li>
      <li>
        <label for="herbstkatalog">Herbstkatalog</label>
        <input id="herbstkatalog" class="checkbox" name="herbstkatalog" type="checkbox" />
      </li>
      <li>
        <label for="winterkatalog">Winterkatalog</label>
        <input id="winterkatalog" class="checkbox" name="winterkatalog" type="checkbox" />
        <p class="wmHint"></p>
      </li>
    </ul>
  </fieldset>
  <fieldset class="wmButtons">
    <input class="wmButton" name="submit" type="button" value="Absenden" />
    <input class="wmButton" name="reset" type="reset" value="Eingaben löschen" />
  </fieldset>
</form>
 

Die dazugehörigen Style Definitionen

Damit das Formular auch ansprechend aussieht, muss es natürlich über CSS verschönert werden. Im folgenden CSS sind alle notwendigen Angaben, um die einzelnen Formularelemente auszurichten und farblich gestalten zu können.

 
.wmForm {
  background-color: #ffffff;
  padding: 10px;
}
.wmForm fieldset.wmButtons input.wmButton {
  float: right;
  width: 150px;
  background-color: #E9F7F6;
  border: 1px solid #7BB9B7;
  color: #7BB9B7;
  margin-left: 10px;
}
.wmForm fieldset legend {
  background-color: #ffffff;
  color: #7BB9B7;
  font-weight: bold;
}
.wmForm ul {
  background-color: #E9F7F6;
  border-top: 2px solid #7BB9B7;
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.wmForm ul li {
  padding: 10px;
  clear: both;
}
.wmForm ul li label {
  display: inline;
  float: left;
  width: 30%;
}
.wmForm ul li label span {
  float: right;
  color: #7BB9B7;
}
.wmForm ul li input,
.wmForm ul li textarea {
  float: right;
  width: 68%;
  background-color: #F0F0F0;
}
.wmForm ul li input:focus,
.wmForm ul li textarea:focus {
  border: 1px solid #7BB9B7;
  background-color: #FFFFFF;
}
.wmForm ul li input.checkbox,
.wmForm ul li input.radio {
  float: left;
  width: 20px;
  border-width: 0px;
}
.wmForm ul li p.wmHint {
  clear: both;
  margin-left: 30%;
  width: 68%;
  text-align: left;
  font-size: 10px;
  padding: 0px 10px;
}
 

Diese Angaben können natürlich beliebig erweitert oder verändert werden, um das Aussehen des Formulars den eigenen Vorstellungen anzupassen.

Fazit

Wie man bei diesem Beispiel erkennen kann, müssen Formulare nicht grau und langweilig aussehen. Sie können sehr flexibel an das jeweilige Seitendesign angepasst werden. Der Fantasie sind hier fast keine Grenzen gesetzt, aber man sollte immer darauf achten, dass solch ein Formular leicht bedienbar bleibt. Dies ist vor allem auch dann wichtig, wenn man bedenkt das Formulare auch von Menschen mit Behinderungen ausgefüllt werden können müssen.

• CSS Button Tricks
• Hierarchische Menüs mit CSS erstellen
• CSS Formular Design – Textfelder
• Email mit PHP senden
• Wegwerfadressen oder Einmaladressen mit Google Mail

Die bekanntesten Meta-Tags

Die bekanntesten Meta-Tags sind hier sicherlich Meta-Description:

<meta name="description" content="Das Meta-Description Tag
enthält eine kurze Beschreibung vom Inhalt einer Webseite." />

und Meta-Keywords:

<meta name="keywords" content="meta-tags,html,suchmaschinen,
optimierung,seo" />

Allerdings ist Meta-Keywords in den Anfangsjahren des Webs massiv missbraucht worden - um bei möglichst vielen Suchanfragen gelistet zu werden, waren viele Webmaster dazu übergegangen, eine riesige Liste an verschiedenen Keywords in dieses Tag einzutragen, auch wenn diese absolut nichts mit dem eigentlichen Inhalt der Seiten zu tun hatten. Daher wird dieses Tag heute von den Suchmaschinen nur noch sehr vorsichtig betrachtet und ausgewertet.

Eine gute Meta Beschreibung ist wichtig

Anders ist dies bei dem Meta-Description Tag. Dieses Tag hat auch heute noch eine sehr große Bedeutung und wird von vielen Suchmaschinen ausgewertet. Je nach Art der Suchanfrage, wird der Inhalt dieses Tags auch gerne mal als Textauszug unter dem Suchergebnis angezeigt.

Der Grund dafür ist, dass die Suchmaschinen den ersten Text, der auf einer HTML Seite gefunden wird, sehr hoch bewerten. Hat man das Meta-Description Tag eingebunden, enthält dieses den ersten Textinhalt, den die Suchmaschine sehen kann. Wird es weggelassen, kann es daher sein, dass statt dessen der Inhalt der Navigation angezeigt wird - wenn diese an erster Stelle in einer Seite steht.

Wie sollte eine gute Beschreibung aussehen?

Wenn man sich mal die Suchergebnisse von Google genauer anschaut, dann kann man erkennen, dass die Textauszüge meistens eine Länge von etwa 160 Zeichen haben - also etwa die Länge einer SMS. Daher sollte man auch möglichst nicht mehr Text in das Meta-Description Tag schreiben, denn je weniger Text in der Beschreibung steht, um so höher wird jedes einzelne dort enthaltene Wort bewertet werden.

Kurz gesagt: die Beschreibung sollte den Inhalt der Seite so genau wie möglich und in kurzer Form wiedergeben.

Google gibt in seiner Webmaster Hilfe dazu sehr gute Hinweise und Tipps.

Ich selbst habe auf webmatze.de leider bisher den Fehler gemacht, auf jeder Seite den gleichen Text in der Meta-Description zu verwenden. Ergebnis ist, dass nun in jedem Suchergebnis, wo webmatze.de auftaucht, der gleiche Textausschnitt angezeigt wird.

Werde mich also hinsetzen und für jeden Blogeintrag eine kurze Beschreibung anfertigen müssen. Und ich möchte gar nicht daran denken, dass es auf webmatze.de bereits über 300 Blogbeiträge gibt...

• Kleine Style Tricks – große Wirkung
• Text in Spalten darstellen mit “CSS3 Columns”
• Warum PowerPoint Anwender oft gute Blogger sind
• Der kleine Pfeil mal anders
• webmatze erstrahlt im neuen Glanz

Doch scheint das hreflang Attribut keinen wirklichen Nutzen zu haben, da es ja in keiner Weise auf der angezeigten HTML Seite dargestellt wird. In den nächsten Abschnitten möchte ich zwei Wege zeigen, wie man das Attribut doch sichtbar machen kann.

Die CSS Methode

Moderne Browser wie Firefox erlauben es per CSS auf Elemente der Seite mit bestimmten Attributen zuzugreifen und diesen dann einen Style zuzuweisen. Dies geschieht, indem man den Attribut Namen in eckigen Klammern hinter den Tag Namen schreibt:

a[hreflang] {
  ...Styles...
}

Mit ein paar weiteren 'Tricks' ist es somit möglich den Inhalt von hreflang sichtbar zu machen und z.B. hinter das entsprechende Tag anzufügen:

a[hreflang]::after{
  content:" ["attr(hreflang)"]";
}

Als Ergebnis bekommt man dann einen Link in folgender Form:

Google.com [en]

Der Nachteil dabei ist, wie ich schon erwähnt habe, dass solche CSS Definitionen nur in modernen Browsern funktionieren und somit nicht in älteren Browsern wie dem Internet Explorer!
Darum habe ich eine weitere Möglichkeit der Umsetzung ersonnen...

Die JavaScript Methode

JavaScript unterstützen heute die meisten Browser. Wenn man also sichergehen will, das die Darstellung der Sprache in all diesem Browsern funktioniert, kann man folgendes Script verwenden.

function showHreflang() {
  for (var i = 0; i < document.links.length; i++) {
    var link = document.links.item(i);
    var hreflang = link.getAttribute("hreflang");
    if (hreflang != null & hreflang.length > 0) {
      var langText = document.createTextNode(" [" + hreflang + "]");
      var supNode = document.createElement("b");
      supNode.appendChild(langText);
      link.parentNode.insertBefore(supNode, link.nextSibling);
    }
  }
}

Das Script durchsucht einfach alle Links auf der Seite, schaut nach ob das hreflang Attribut definiert wurde und einen Inhalt besitzt und hängt dann den Inhalt in eckigen Klammern hinter den entsprechenden Link.
Sollte der Benutzer JavaScript in seinem Browser ausgeschaltet haben, schadet es auch nichts, dann wird einfach nichts angezeigt, womit derjenige dann auf jeden Fall leben kann.

Hier das Ergebnis

Ein Link zu einer Seite auf Deutsch Google.de und hier einer zu einer englischen Seite Google.com. Und dann darf natürlich auch ein Link nicht fehlen, der keine hreflang Angabe besitzt webmatze.de!

• Wirklich einfache JavaScript Tooltips
• Ist display=”none” jetzt irrelevant?
• Google Related Links
• Google Chrome – Der neue Browser
• Unsicher Objekte unter SSL in IE

Da auf solchen Fehlerseiten oft keine Hinweise für den Besucher vorhanden sind, wie dieser wieder zurück auf die richtigen Seiten kommt, gehen dem Webseitenbetreiber so schnell viele Besucher verloren. Um dies zu verhindern, hat man auf den meisten Servern die Möglichkeit, eigene Fehlerseiten anzulegen.

Wie gehe ich vor?

Ganz einfach! Auf vielen Servern befindet sich eine Datei mit Namen .htaccess! Manchmal kann diese auch nicht sichtbar sein. Entweder läd man sich diese Datei herunter oder legt sich einfach eine neue an. Dies kann man mit einem einfachen Texteditor machen. In diese Datei fügt man nun folgende Zeilen ein:

ErrorDocument 401 http://www.domain.de/fehler.htm
ErrorDocument 402 http://www.domain.de/fehler.htm
ErrorDocument 403 http://www.domain.de/fehler.htm
ErrorDocument 404 http://www.domain.de/fehler.htm
ErrorDocument 500 http://www.domain.de/fehler.htm

Es ist auch möglich, für jeden Fehlercode eine eigene Seite anzugeben. Danach speichert man die .htaccess Datei im gleichen Verzeichnis ab, wo auch die index.htm Datei liegt. Die Datei fehler.htm kommt ebenfalls dort hin. In dieser Datei kann man zum Beipspiel einen Link zur Hompage bereitstellen, oder den Besucher gleich dorthin weiterleiten. Für die Gestaltung dieser Seite gibt es keine Beschränkungen.

• Was ist robots.txt?
• Unsicher Objekte unter SSL in IE
• Google Sitemaps mit Ruby on Rails erstellen
• Wie manche URL Shortener daran scheitern URLs zu kürzen
• Firefox 1.0.1 steht zum Download bereit

FireBug ermöglicht es, Breakpoints im JavaScript Code zu setzen, Schritt für Schritt durch die Codezeilen zu springen und lokale Variablen sowie den Stack zu betrachten.

Stack Traces bei JavaScript Fehlern

Jeder JavaScript Fehler wird mit einem Stack Trace angezeigt. So kann man genau sehen, an welcher Stelle im Code und durch welchen Aufruf ein Fehler genau aufgetreten ist.

JavaScript Fehler debuggen

Wenn ein Fehler auftritt, reicht es meistens nicht, nur den Stack Trace zu sehen. Meistens möchte man auch sehen, welche Werte bestimmte Variablen gerade hatten, als der Fehler auftrat. Mit FireBug kann man durch die Einstellung "Break On Error" den Debugger automatisch anhalten lassen, wenn ein Fehler auftritt. Man wird dann sofort zur richtigen Stelle im Code gebracht.

Logging Funktionalitäten

Über das console Objekt kann man verschiedene Nachrichten auf der Konsole ausgeben lassen, während der JavaScript Code ausgeführt wird. Dabei kann man verschiedene Stufen wählen, wie z.B. console.debug(), console.info(), console.warn() oder console.error(). Diese Meldungen werden dann auch noch in unterschiedlicher Farbdarstellung in der Konsole kenntlich gemacht.

Außerdem besitzt FireBug noch viele weitere wichtige und nützliche Funktionen. So kann man sich detailiert den Request anschauen, der bei Ajax gesendet wird. FireBug liefert auch eine sinnvolle JavaScript command line, um schnell kleine JavaScript Schnipsel ausführen zu können. Und über die verschiedensten Inspektoren können alle möglichen Aspekte von HTML, DOM, CSS und JavaScript genau betrachtet werden.

Ich finde das FireBug ein "Must Have" Tool für Webentwickler ist. Es läßt sich leicht als Erweiterung in den aktuellen Firefox 1.5 Browser integrieren.

• Google Chrome – Der neue Browser
• Hierarchische Menüs mit CSS erstellen
• Ist display=”none” jetzt irrelevant?
• Wie erstelle ich eine Webseite?
• OpenLaszlo – OpenSource Flex Alternative

Falls sich in diesem geclonten Bereich interaktive Elemente wie Butons, Links oder Eingabefelder befanden, habe ich diese ebenfalls mittels JavaScript entfernt oder den Textinhalt der Eingabefelder bzw. Textareas kopiert und als Text an die gleiche Stelle wieder eingefügt. Als Ergebnis gibt es dann eine HTML Seite ohne Links und Buttons.

So weit so gut, aber da gibt es ein Problem, welches mir vorher noch nicht bewußt war und was ich auch noch nirgendwo dokumentiert sah. Wenn man im Firefox eine Textarea clont in welche der User zuvor noch Inhalte eingegeben hat, werden diese Inhalte nicht mitgeclont. Im Internet Explorer funktioniert dies richtig. Ich habe dazu mal eine Testseite erstellt, wo man dieses Verhalten nachprüfen kann. Getestet habe ich es zur Zeit nur im Firefox 1.5!

Node.cloneNode() Test

Ich werde mal weiter nachforschen, ob dies ein gewolltes Verhalten von den Firefox Entwicklern ist, oder ob es dafür schon Bugeinträge in Bugzilla gibt.

• Firefox – Version 1.0.6 erschienen
• Gästebuch SPAM
• Die Sprache eines Links kennzeichnen
• Mozilla Firefox 1.0.7 Security Update
• RSS – Mehr als nur einfache Site News