Protokoll vom 26.05.2014

Der heutige Tag stand im Zeichen von Listen, Ankern und Tabellen. Klingt erst mal nicht so schrecklich spannend, eröffnet aber eine ganze Menge Möglichkeiten.

Listen mittels <ul> und <ol> darstellen
Um mittels HTML Listen darzustellen, können zwei Befehle verwendet werden. <ul> erzeugt eine unsortierte Liste (dort werden je nach Wunsch Striche, Punkte, Kästchen oder dergleichen verwendet), während <ol> eine sortierte darstellt. Sortiert bedeutet dabei, dass die Inhalte der Liste nummeriert bzw. mit Buchstaben dargestellt werden können. Beiden Listentypen ist gemein, dass die Listenelemente an sich mittels <li>-Tag erstellt werden.

Beispiel einer unsortierten Liste:

<ul>
<li>Listenelement 1</li>
<li>Listenelement 2</li>
</ul>

Anstelle der Texte innerhalb der <li>-Tags können auch Links verwendet werden, um z.B. eine Navigation zu bauen. Auch die Darstellung von Bildern (mit <img>-Tag) mit Hilfe einer Liste ist möglich, wobei hier die Frage nach dem Sinn gestellt werden könnte.

Das Stylen von Listen ist über eine Reihe von Befehlen möglich, zu denen es hier ein paar weitere Infos gibt.

Anker setzen! Arrr!
Der Einsatz von Spungmarken innerhalb einer HTML-Seite funktioniert über Anker, die mittels des bereits bekannten <a>-Tags gesetzt werden. Innerhalb einer HMTL-Seite kann an jeder Stelle eine solche Sprungmarke definiert werden, auf die dann per Link „gesprungen“ werden kann. Sinnvoll kann das z.B. bei langen Seiteninhalten sein, bei FAQs und dergleichen oder als Rücksprungfunktion vom Fuß einer Seite nach oben.

Beispiel: Anker definieren

<a name=“anker001″><a>

Beispiel: Link zu einem Anker erstellen

<a href=“#anker001″></a>

Anker lassen sich ganz hervorragend mit Listen kombinieren, um schnelle eine Navigation innerhalb einer Seite (oder ggf. auch über Seiten hinweg) zu erstellen.

Tabellen erstellen
Tabellen lassen sich mit HTML natürlich ebenfalls darstellen. Allerdings wird das schnell unübersichtlich, da die Anordnung der Elemente nicht besonders intuitiv ist und man schon bei wenigen Zeilen einer Tabelle leicht den Überblick verliert. Tabellen werden von einem <table>-Element eröffnet und geschlossen. Dazwischen werden <tr>-Elemente verwendet (table row = Zeilen), in denen wiederum <th>-Elemente (table head = Spaltenüberschriften) und <td>-Elemente (table data = Zelleninhalte) verwendet werden. Eigentlich nicht kompliziert …

Beispiel einer dreispaltigen Tabelle mit drei Zeilen:

<table>
<tr>
<th>Überschrift der ersten Spalte</th>
<th>Überschrift der zweiten Spalte</th>
<th>Überschrift der dritten Spalte</th>
</tr>

<tr>
<td>Element Zeile 1, Spalte 1</td>
<td>Element Zeile 1, Spalte 2</td>
<td>Element Zeile 1, Spalte 3</td>
</tr>

<tr>
<td>Element Zeile 2, Spalte 1</td>
<td>Element Zeile 2, Spalte 2</td>
<td>Element Zeile 2, Spalte 3</td>
</tr>

<tr>
<td>Element Zeile 3, Spalte 1</td>
<td>Element Zeile 3, Spalte 2</td>
<td>Element Zeile 3, Spalte 3</td>
</tr>

</table>

Wie man sieht, werden in einer Tabelle nur die Zeilen angelegt mittels der <tr>-Tags. Die Anzahl der Spalten ergibt sich aus der Anzahl der dann folgenden <th> bzw. <td>-Elemente. Ist in der Tat leicht zu verstehen, wenn man es mal ausprobiert.

Das Stylen einer Tabelle ist über CSS sehr einfach möglich. Man kann z.B. mit Selektoren wie „table tr th“ arbeiten, um gezielt die Überschriften zu gestalten, oder analog mit „table tr td“ für die Zelleninhalte. Natürliche lassen sich auch Klassen auf die einzelnen Elemente anwenden. Dass eine Tabelle auch in einen Div-Container gepackt werden kann, erwähne ich hier nur der Vollständigkeit halber. Wissen wir ja schon, Divs sind unsere Freunde.

So, das war’s für heute!

Advertisements

Kommentar hinterlassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s