HTML – die wichtigsten Elemente zur Ausgabe

Was Sie vorher gelesen haben sollten: Erste Schritte HTML.

Zur Ausgabe eines Textes benötigen Sie gar nicht viele Elemente:

 

Text und Überschriften

Normalen Text können Sie als Absatz (Englisch: “paragraph”) darstellen. Er wird eingeschlossen in die Tags <p> und </p> .

Für Überschriften (“headlines”) gibt es ein ähnliches System: Für ganz wichtige Dinge verwenden Sie eine ganz tragende Überschrift. Die Tags hier lauten <h1> öffnend und </h1> schließend. Statt der 1 können Sie auch die Ziffern 2 bis 6 verwenden – je größer die Ziffer, desto weniger bedeutsam der Text, den Sie damit “überschreiben”. Wichtig ist natürlich, dass die Ziffer im schließenden Tag zu der im öffnenden passt. . .

Wollen Sie Text fett (“bold”) machen, umschließen Sie ihn mit <b> und </b>. Um ihn kursiv (“in italics”) zu setzen, nehmen Sie <i> und </i> – wie sollte es auch anders sein?

Diese letzten beiden funktionieren auch wieder geschachtelt, also normaler, fetter Text wird eröffnend von <p<<b> und schließend von </b></p> umrahmt. Eine kursive Überschrift von <h1><i> und </i></h1>.

Listen

Listen haben wir bereits im Vorgängerartikel kennengelernt. Unsortiert <ul></ul>, sortiert <ol></ol>. Die Listenelemente werden jeweils mit <li></li> umschlossen (“list item”).

Es gibt noch einen weiteren Listentyp: Die Definitionsliste.  Sie wird durch <dl></dl> eingehüllt (“definition list”). Als gliederndes Element hat jeder Eintrag einen Begriff oder Ausdruck, der erläutert wird. Dieser wird von <dt></dt> eingerahmt (“definition term”). Und es gibt dann jeweils eine Erläuterung, die mit <dd></dd> (“definition list definition”) gekennzeichnet wird. Diese Listenart ist gut für Verzeichnisse von Fachwörtern oder von Abkürzungen geeignet..

Tabellen

Tabellen bestehen aus Zeilen und diese wiederum aus Datenzellen. Die Tabelle wird umschlossen von <table></table>. Die Zeile von <tr></tr> (“table row”) und die Zellen wiederum von <td></td>(“table data”). Also könnte eine Telefontastatur so abgebildet werden:


<table>
<tr>
<td>7</td> <td>8</td> <td>9</td>
</tr>
<tr>
<td>4</td> <td>5</td> <td>6</td>
</tr>
<tr>
<td>1</td> <td>2</td> <td>3</td>
</tr>
<tr>
<td>*</td> <td>0</td> <td>#</td>
</tr>
</table>

Dies ergibt folgende Tabelle mit drei Spalten und vier Zeilen:

7 8 9
4 5 6
1 2 3
* 0 #

 

Exkurs: Attribute zur Gestaltung von Elementen

Attribute sind Eigenschaften, die man einem Tag zuweisen kann. Wenn wir zum Beispiel eine Tabelle mit Gitterlinien der Stärke 1 Pixel versehen wollen, ergänzen wir das Tag für die Tabelle so: <table border="1"></table>.

 

Verweise (Links)

Eines der wichtigsten Elemente des Internet sind Verweise (englisch “Links”). Mit ihnen kann man zu adressierbaren Elementen im Internet navigieren. Ein Klick auf den Link bringt den Nutzer an die gewünschte Stelle.

Links werden mit dem Tag <a></a> umschlossen. Die Zieladresse wird als Attribut href migegeben. Wenn Sie also zum Beispiel jemanden auf den Wikipedia-Artikel über HTML verweisen wollen, könnte dies so codiert werden: <a href="http://de.wikipedia.org/wiki/Hypertext_Markup_Language">Wikipedia-Artikel HTML</a>.

Dabei ist wichtig zu wissen: Ein Link dieser Art lädt die Zielwebsite in das aktuelle Fenster und “verdrängt” dessen Inhalt (dieser kann mit dem “Zurück”-Button des Browsers aber in der Regel wieder hergestellt werden). Will man dies vermeiden, kann man dafür Sorge tragen, dass ein neues Fenster oder ein neuer Tab geöffnet wird, um die Zielseite anzuzeigen. Dies geschieht mittels Dreingabe des Attributes target="_blank". So wird aus dem obigen Link dann <a target="_blank" href="http://de.wikipedia.org/wiki/Hypertext_Markup_Language">Wikipedia-Artikel HTML in neuem Fenster oder Tab</a>.

Hier können Sie die beiden Versionen ausprobieren:
Wikipedia-Artikel HTML beziehungsweise Wikipedia-Artikel HTML in neuem Fenster oder Tab.

 

Bilder
Oft möchte man Bilder in Texte einbetten. Auch das geht recht einfach mit dem <img />-Tag (Englsch: “image”). Formal hat dies die Besonderheit, selbstschließend zu sein. Während die meisten Tags etwas umfassen (zum Beispiel den Text einer Überschrift oder die Elemente einer Liste), ist dies hier nicht der Fall. Denn die (Adresse der) Bilddatei selbst wird als Attribut src (von englisch “source”) mitgeliefert.

So könnte ein Bildelement aussehen: <img src="http://internet-erfahrung.de/bilder/beispiel.png" />. Am Ende wird das Tag also nicht wie sonst üblich wiederholt mit einem Schrägstrich davor. Vielmehr wird direkt mit einem Schrägstrich vor der schließenden spitzen Klammer gearbeitet.

Es gibt einige wenige Tags, die in gleicher weise kein eigenes Abschluß-Tag verwenden, sondern die Kurzversion. Zwei sehr bekannte Tags dieser Art sind <br /> (‘blank row”) für eine Leerzeile und <hr /> für eine horizontale Linie (“horizontal rule”).

Aber zurück zu den Bildern: Der Browser sollte noch wissen, wie groß das Bild ist: Das geht mit den Attributen height und width. Außerdem ist wichtig, dem Browser eine Vorgabe zu machen, was bei nicht vorhandenem Bild zu tun ist. In einem solchen Fall wird Text als Alternative angezeigt. Dieser Text wird mit dem alt-Attribut festgelegt.

Das alt-Attribut muss stehen. Es ist wichtig nicht nur für den Fall, dass das Bild nicht vorhanden ist. Sonden auch für Vorleseprogramme. Doese erleichtern es Menschen mit verminderter Sehkraft, Internet-Inhalte zur Kenntnis nehmen zu können. Sie können jeden normalen Text vorlesen, aber natürlich keine Bilder. Stossen Sie auf ein img-Tag, lesen Sie die Beschreibung des alt-Attributes vor.

Zusammnefassung dieses Teils

Lassen Sie uns kurz resümieren. Sie haben jetzt eine bereits recht umfassende Kenntnis darüber, wie Sie einen HTML-Text zusammenbauen können. Sie haben dafür die wichtigsten funktionalen Elemente für die Ausgabe von Texten kennengelernt.

Was noch völlig fehlt, sind Mittel des Stils und Aussehens. Das soll Gegenstand des nächsten Teils über CSS – “Cascading Style Sheets” – sein.

 

About Wolfgang Wagemann

Wolfgang Wagemann lebt im Rhein-Neckar-Raum.
This entry was posted in Sprachen und Systeme and tagged . Bookmark the permalink.