19: HTML Tables


Zusammengefasst nach dem Artikel von Jenifer Hanen

Quelle: http://dev.opera.com/articles/view/19-html-tables/
Semantic HTML and Search Engine Optimization

Im Webdesign Tabellen sind eine gute Möglichkeit, um Daten in einer tabellarischen Form zu organisieren.
Früher wurden Tabellen noch dazu verwendet, um eine Webseite im HTML aufzubauen, dies ist jedoch der falsche Weg.

Grundstruktur
 
<table></table>: Dieser Tag umfasst die gesamte Tabelle und weist den Browser darauf hin, dass der folgende Inhalt in eine tabellarischen Form dargestellt wird.

<tr></tr>: bedeutet „table row“, also die jeweilige Reihe (horizontal) einer Tabelle und kommt direkt nach dem <tabel> Tag.

<td></td>: der td Tag definiert die Tabellen Zelle oder jeden individuellen Inhalt innerhalb der Reihe.

Beispiel:
<table>
    <tr>
        <td>content</td>
        <td>content</td>
        <td>content</td>
    </tr>
</table>

Weitere Elemente
 
<caption></caption>: mit dem caption Element kann ein Titel zu der Tabelle gesetzt werden.

<th></th>: bedeutet „table head“ und definiert somit die jeweilige Spalten Überschrift.

thead, tbody, tfoot: definiert den Tabellen header, - body und - footer. Bei einer komplexen Tabelle können diese Elemente helfen, um die Daten besser zu strukturieren, nicht nur für den Programmierer, sondern auch für den Browser.

colspan und rowspan: diese Eigenschaften dienen dazu, dass eine Tabellen Zelle bzw. Spalte mehr als nur Zelle/Spalte lang ist. <td rowspan=“3“>.

summary: definiert eine Zusammenfassung des Tabellen Inhaltes. Diese Eigenschaft ist bei Screenreaders sehr hilfreich. Diese Summary erscheint jedoch nicht auf der Webseite.

scope: das scope Element kann im <th> Tag verwendet werden, um Screenreaders zu sagen, dass der <th> Inhalt Titel einer Spalte oder Reihe ist. Dieses Element wird nur im <th> Element verwendet.

Beispiel:
<table summary=“a summary of recent major volcanic eruptions in the Pacific Northwest“>
    <caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
    <thead>
        <tr>
            <th scope=“col“>Volcano Name</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan=“4“>Compiled in 2008 by Ms Jen</td>
        </tr>
    </tfoot> 
    <tbody>
        <tr>
            <th scope=“row“>Mt. Lassen</th>
            <td>California</td>
        </tr>
        <tr>
            <th scope=“row“>Mt. Hood</th>
            <td>Oregon</td>
        </tr>
    </tbody>
</table>

Diese ganzen Tags und Eigenschaften ist alles, um eine gute Tabelle zu programmieren. Um die Tabelle nun noch schön zu gestalten, wird wieder das CSS verwendet.

CSS: styling einer Tabelle
 
Mit der Hilf von CSS kann die Tabelle auf jede Art und Weise formatiert werden. Es kann ein Rahmen (border: 1px solid #333) hinzugefügt werden oder auch nur eine Linie (border-bottom: 1px solid #333) darunter. Dem Text oder den einzelnen Zellen kann eine Farbe zugewiesen werden (background:#ffffff).
Die Formatierungsmöglichkeiten sind im Großen und Ganzen die gleichen wie bei einem normalen HTML Inhalt. Am Besten ist es, das ganze einfach auszuprobieren.

17: Images in HTML


Zusammengefasst nach dem Artikel von Christian Heilmann

Quelle: http://dev.opera.com/articles/view/17-images-in-html/
Semantic HTML and Search Engine Optimization

Es ist sehr verlockend viele Bilder für eine Webseite zu verwenden. Man sollte jedoch bedenken, dass nicht jeder diese in seinem Browser angezeigt bekommt:
User von mobilen Geräten haben vielleicht die Bilder ausgeschaltet, um damit nicht den Verbindungsaufbau zu beeinträchtigen
Menschen mit einer Sehschwäche

Daher sollte schon vorher entschieden werden, ob die verwendeten Bilder relevant für die Seite sind. Besonders wichtig ist es, eine alternative für sehschwache oder blinde Menschen anzubieten.

Bildtypen

Es gibt 2 verschiedene Arten ein Bild in ein Dokument einzufügen: mit Hilfe des <img> Tag oder durch das CSS.
Wenn das Bild essenziell für dein Inhalt der Webseite ist, dann wird der <img> Tag verwendet. Dient das Bild jedoch nur als „eye candy“, dann wird am besten mit dem background image im CSS gearbeitet. Der Grund dafür ist, dass solche Bilder keinen alternative Information brauchen, da sie für blinde Menschen nicht relevant sind.

<img> Element und seine eigenschaften

Voraussetzung im HTML für das Einfügen von Bildern mit dem <img> Tag ist, dass das Bild in dem gleichen Ordner liegt wie das HTML file.

Beispiel:
<img src=“balconyview.jpg“>

Was hier noch fehlt ist das „alt“ Attribut. Diese Eigenschaft zeigt einen Text anstatt des Bildes, wenn dieses nicht verfügbar ist. Das macht es auch für blinde Menschen einfacher die Webseite zu verstehen, da sie diesen alternativen Text vorgelesen bekommen.

Beispiel:
<img src=“balconyview.jpg“ alt=“View from my balcony, showing a row of houses, trees and a castle“>

Der alternative Text wird jedoch nicht angezeigt, wenn das Bild erfolgreich geladen werden kann. Es ist also somit kein Tooltip, welcher auftaucht, wenn mit der Maus länger über dem Bild verharrt wird.
Um diese zusätzliche Information zu erhalten, sollte das „title“ Attribut zum <img> Tag hinzugefügt werden. Diese Eigenschaft kann sehr hilfreich sein, es ist jedoch keine geeignete Form, um wirklich wichtige Informationen zu transportieren. Stattdessen ist es ein guter Weg, um vielleicht das Bild im allgemeinen zu erklären.

Beispiel:
<img src=“balconyview.jpg“ alt=“View from my balcony, showing a row of houses, trees and a castle“ title=“What I see when I look out of my window; the castle was one reason to move there.“>

Des Weitern ist es vorteilhaft, einem <img> Tag eine definierte Breite („width“) und Höhe („height“) zuzuweisen. Damit kann verhindert werden, dass das Laden der Bilder bzw. der gesamten Seite nicht zu lange dauert.

Beispiel:
<img src=“balconyview.jpg“ alt=“View from my balcony, showing a row of houses, trees and a castle“ width=“400“ height=“186“>

Hintergrundbilder mit CSS

Mit dem CSS gibt es viele verschiedene Möglichkeiten, ein Bild zu platzieren. Es kann hinter oder rund um einen Text gesetzt werden und auch wiederholt werden.
Eingefügt wird das Bild im CSS mit dem „background-image“ Auswahl und der URL. Im Falle, dass das Bild nicht angezeigt wird, sollte als eine alternative eine Hintergrundfarbe angegeben werden.

Beispiel:
background-image:url (ball.gif);
background-color:#eee;

Als eine weiter Eigenschaft kann angegeben werden, ob sich das Bild wiederholen soll, oder nicht:

• Bild nicht wiederholen: background-repeat: no-repeat;
• Bild nur horizontal wiederholen: background-repeat: repeat-x;
• Bild nur vertikal wiederholen: background-repeat: repeat-y;

Steht beim „background-image“ ansonsten nichts dabei, wird es automatisch horizontal und vertikal wiederholt.
Um das Hintergrundbild dann noch speziell zu platzieren, wird „background-position“ (top, center, bottom, left, right) verwendet.

Mit der Hilfe von CSS können somit erstaunliche Hintergrundbilder entstehen, welche davor nicht möglich waren.

16: HTML lists


Zusammengefasst nach dem Artikel von Ben Buchanan

Quelle:http://dev.opera.com/articles/view/16-html-lists/
Semantic HTML and Search Engine Optimization

Listen werden verwendet dazu verwendet, um zueinander verwandte Informationen klar und deutlich miteinander zu verbinden. Sie helfen, eine gut strukturierte und schnell verständliche Webseite zu generieren. Im modernen Webdesign werden Listen auch für die Navigation verwendet.

3 Varianten
 
Es gibt 3 verschiedene Varianten von Listen im HTML:
ungeordnete Liste (ul)
geordnete Liste (ol)
definition Liste (dt)

Ungeordnete Liste
 
Ungeordnete Listen oder auch Punkte Listen werden verwendet, um eine Gruppe miteinander verwandter Informationen miteinander zu verbinden. Die Reihenfolge dabei ist jedoch egal.
Mit Hilfe von CSS können die Aufzählungspunkte geändert werden.
Ungeordnete Listen verwenden ein Set von <ul></ul> Tags, welche mehrere Sets von <li></li> Tags umschließt.

Beispiel Einkaufsliste:
<ul>
  <li>bread</li>
  <li>coffee beans</li>
  <li>milk</li>
  <li>butter</li>
</ul>

Geordnete Liste
 
Geordnete Listen oder auch nummerierte Liste werden verwendet, um eine Liste von Informationen darzustellen, welche in einer bestimmte Reihenfolge dargestellt werden müssen.
Geordnete Listen können mit Hilfe von mehreren numerischen oder alphabetischen Systemen dargestellt werden (z.B.: A, B, C, ...; 1, 2, 3, ...; i, ii; ...; I, II). Diese können wiederum mit CSS definiert werden.
Geordnete Listen verwenden ein Set von <ol></ol> Tags, welche mehrere Sets von <li></li> Tags umschließt.

Beispiel Kochrezept:
<ol>
  <li>Gather ingredients</li>
  <li>Mix ingredients together</li>
  <li>Place ingredients in a baking dish</li>
  <li>Bake in oven for an hour</li>
  <li>Remove from oven</li>
  <li>Allow to stand for ten minutes</li>
  <li>Serve</li>
</ol>

Es ist auch möglich eine geordnete Liste nicht mit 1 beginnen zu lassen. Dafür muss innerhalb des <ol> Tags die „start“ Eigenschaft verwendet werden. Das ist sehr hilfreich, wenn man innerhalb der Liste eventuelle eine Notiz einfügen will.

Beispiel Kochrezept:
<ol>
  <li>Gather ingredients</li>
  <li>Mix ingredients together</li>
</ol>

<p class=“note“>Before you place the ingredients in the baking dish, preheat the oven to 180 degrees centigrade/350 degrees farenheit in readiness for the next step</p>

<ol start=“4“>
  <li>Bake in oven for an hour</li>
  <li>Serve</li>
</ol>

Definitions Liste
 
Definitions Listen verbinden bestimmte Informationen und deren Erklärung innerhalb der Liste. Jede Erklärung und Information ist eine Definitionsgruppe. Es können eine unbegrenzte Anzahl von Gruppen erzeugt werden, jedoch muss es in jeder Gruppe mindestens eine Information und eine Erklärung geben. Somit können auch mehrere Informationen zu einer Erklärung gehören  oder umgekehrt. Jedoch eines ohne dem anderen ist nicht möglich.
Im HTML werden Definition Listen mit einem Set von <dl></dl> Tags dargestellt, welche eine Gruppe von <dt></dt> und <dd></dd> Tags umschließt. Es muss zumindest ein <dt></dt> Tag mit mindestens ein <dd></dd> gepaart sein, wobei <dt> immer als erstes kommt.

Beispiel:
<dl>
  <dt>Information</dt>
  <dd>Erklärung</dd>
  <dt>Information</dt>
  <dd>Erklärung</dd>
  <dt>Information</dt>
  <dd>Erklärung</dd>
</dl>

Verschachtelte Liste
 
Ein Punkt in einer Liste kann eine komplett neue Liste enthalten.

Beispiel Inhaltsverzeichnis:
<ol>
  <li>Chapter One
    <ol>
      <li>Section One</li>
      <li>Section Two </li>
      <li>Section Three </li>
    </ol>
  </li>
  <li>Chapter Two</li>
  <li>Chapter Three  </li>
</ol>

Es muss darauf geachtet werden, dass die verschachtelte Liste nach dem <li> Tag und dem darin enthaltenen Text beginnt jedoch vor dem </li> Tag aufhört.
Theoretisch können unendlich viele Listen ineinander verschachtelt werden, jedoch in der Praxis kann das jedoch ziemlich verwirrend werden. Bei sehr umfangreichen Listen empfiehlt es sich, sie besser in mehrere Listen aufzuteilen und diese jeweils mit einer Überschrift versehen.
 

Semantic HTML and Search Engine Optimization


Zusammengefasst nach dem Artikel von Joost de Valk

Quelle: http://dev.opera.com/articles/view/semantic-html-and-search-engine-optimiza/
Semantic HTML and Search Engine Optimization

Warum semantisches HTML?

Eine semantisch aufgebaute Webseite macht es zuallererst Menschen mit einer Sehschwäche viel einfacher die Seite zu verstehen, da es dem Screenreader ermöglicht, die Seite auf eine verständliche Art und Weise zu interpretieren.
Des Weiteren, hängen SEO (Search Engine Optimization) und semantisches HTML sehr eng zusammen. Der Sinn und Zweck von SEO ist es Suchmaschinenspinnen zu einem besseren Verständnis zu helfen, worum es bei der Webseite geht und sie dadurch besser kategorisieren zu können. Ein semantisches HTML hilft Ihnen dabei, die Struktur einer Webseite schnell und klar zu erfassen.

Webseitenaufbau

Eine Webseite sollte immer klar strukturiert sein, damit es  für Suchmaschinen leichter ist zu erkennen, welche Seite welches Thema behandelt. Mit einem semantischem HTML kann diese Struktur weiter verbessert werden.

Seitenaufbau

1. Überschriften
Ein Dokument hat Überschriften und Untertiteln, da diese es viel einfacher machen das Thema einer Seite festzustellen. Diese Überschriften gibt es im HTML je nach ihrer Wichtigkeit von h1 bis h6.
Es gibt auch die Möglichkeit mehrere h1 Überschriften auf der Seite zu verwenden. Von einer semantischen Sichtweise macht das zwar keinen all zu großen Sinn, jedoch für das SEO schon.

Um das Thema einer Seite festzustellen, geben Suchmaschinen den verwendeten Wörtern einer Überschrift sehr viel Gewichtung. Daher sollte das Schlüsselwort der Webseite mindestens einmal in einem h1 Tag vorkommen.

2. Bilder
Bilder werden auf verschiedenste Weisen in einem Dokument verwendet und sollten immer mit der richtigen Bedeutung angewendet werden. Die einzig wirklich sinnvolle semantische Variable bei einem <img> Tag ist die alt Eigenschaft. Diese sollte jedoch nur bei Bildern benutzt werden, welche eine zusätzliche Bedeutung zum Text haben und nicht bei Bildern, welche nur einen dekorativen Zweck erfüllen. Ansonsten wird im alt Eigenschaft beschrieben, was das Bild aufzeigt.

3. Abkürzungen und Acronyme
Wenn man Abkürzungen und Acronyme verwendet sollte man sicher gehen, dass das ausgeschriebene Wort mit einem <abbr> oder <acronym> Tag bereitgestellt wird.

4. Tabellen
Tabellen sollten nie für das Design einer Webseite sondern nur zum anzeigen von tabellarischen Daten verwendet werden. Es gibt aber auch noch andere Wege um den semantischen Wert einer Tabelle noch zu steigern und somit die seiten eigene SEO zu verbessern:

verwenden von Tabellen Überschriften (th)
verwenden von thead, tbody und tfoot zur besseren Strukturierung der Tabelle
verwenden eines Titels, welcher beschreibt, um was es bei der Tabelle geht

5. Bedeutung hervorheben
Um einzelnen Wörtern eine größere Bedeutung zuzuweisen, können die <em> und <strong> Tags verwendet werden. Suchmaschinen geben solchen Wörtern mehr Gewichtung.

Interessenkonflikte

All diese Regeln können natürlich etwas gebeugt werden, um zum Beispiel Interessenkonflikte mit dem Kunden zu vermeiden. Eine semantische Struktur sollte jedoch immer die Basis jeder Webseite sein.