HTML-Tags

Es gibt verschiedene HTML-Tags, die verschiedene Funktionen erfüllen. Die meisten HTML-Tags werden in den body geschrieben, um entsprechend die Inhalte darzustellen.

Im Folgenden eine kleine Übersicht:

ÜBERSCHRIFTEN

Die Tags <h1>, <h2>, <h3>, <h4>, <h5> und <h6> kennzeichnen abgestufte Überschriften. <h1> gilt als die Hauptüberschrift und sollte pro Seite auf einer Internetseite möglichst nur einmal angewendet werden. Die anderen Überschriften werden nach ihrer Zahl entsprechend untergegliedert. Die Gliederung wirkt sich auf die Darstellung auf. So ist die <h1>-Überschrift größer, als die <h2>-Überschrift.

<h1>Überschrift</h1>

<h2>Unterüberschrift</h2>

TEXT

Das <p>-Tag erzeugt einen Textabsatz. Fließtexte sollten immer innerhalb eines solchen Tags geschrieben werden. Nach dem End-Tag wird automatisch ein Zeilenumbruch erzeugt.

<p>Dies ist ein Fließtext, der zeigen soll, welchen Inhalt man in diesen Tag packen sollte.</p>

Mit dem <b>-Tag (b steht für bold = fett) können Texte fettgedruckt werden, mit dem <i>-Tag (i steht für italic = kursiv) Texte kursiv geschrieben werden. Mit dem Tag </br> wird ein Zeilenumbruch innerhalb eines <p>-Tags erzeugt. Dieser Tag besitzt nur ein End-Tag, da er keinen Inhalt erhält.

<p>

<b>Ich bin ein fetter Text innerhalb eines <p>-Tags.</b> </br>

<i>Ich bin ein kursiver Tag</i>

</p>

LISTEN

Listen – zum Beispiel Aufzählungslisten mit Spiegelstrichen oder nummerierte Listen – können mit dem <ul>- und <ol>-Tag eingefügt werden. <ul> steht hierbei für unordered list, das heißt eine unsortierte Liste zum Beispiel mit Spiegelstrichen. <ol> steht wiederum für ordered list, also eine sortierte Liste zum Beispiel mit Zahlen. Die Aufzählungszeichen bzw. Nummerierungen werden automatisch eingefügt. Die einzelnen Listen-Items werden innerhalb dieser Tags mit dem <li>-Tag gekennzeichnet.

<ol>

</ol>

LINKS

Links können mit dem <a>-Tag (a steht für anchor = Anker) eingefügt werden, in der Regel innerhalb eines <p>-Tags. Der Text, der innerhalb des Start- und des End-Tags steht, wird als Link gesetzt. Das heißt bei einem Klick auf diesen Text, wird die verlinkte Seite aufgerufen. Die Seite, die geöffnet werden soll, wird innerhalb des <a>-Tags mit dem Attribut href festgelegt:

<p>

<a href="https://de.wikipedia.org/wiki/Hypertext_Markup_Language">Zu Wikipedia</a>

</p>

BILDER

Bilder können mit dem <img>-Tag eingefügt werden. Damit ein Bild dargestellt werden kann, muss ein entsprechender Link gesetzt werden. Dies wird durch das Attribut src (für source = Quelle) erreicht. Mit den Attributen width und height kann die Breite und die Höhe des Bildes angegeben werden. Das alt-Attribut legt fest, welcher Text ausgegeben wird, wenn das Bild nicht darstellbar ist. Das title-Attribut legt einen Titel für das Bild fest. Wenn man mit dem Mauszeiger über das Bild fährt und eine Sekunde wartet, erscheint der Titel des Bildes.

Beachte: Das <img>-Tag besitzt keinen End-Tag! Deshalb wird vor dem schließenden "Größer-als"-Zeichen der Schrägstrich des End-Tags gesetzt.

Unter https://www.pixabay.com könnt ihr viele kostenfreie und Urheberrechtsfreie Bilder nutzen. Einfach ein Bilder aussuchen und draufklicken. Auf der neuen Seite mit der rechten Maustaste auf das Bild klicken und "Grafikadresse kopieren" klicken. Nun habt ihr den Link zu dem Bild, um es auf eurer Webseite einzubinden.

TABELLE

Eine Tabelle besteht aus mehreren Tags. Ganz am Anfang wird der <table>-Tag gesetzt. Dieser markiert, dass eine Tabelle beginnt. Alle weiteren genannten Tags werden innerhalb des <table>-Tags eingefügt. Jede Zeile wird mit dem <tr>-Tag (steht für table row = Tabellenzeile) eingefügt. Innerhalb der jeweiligen Zeilen (und damit innerhalb des <tr>-Tags) werden nun die Daten eingefügt. Für den Tabellenkopf (das heißt, in denen die Überschriften der Spalten geschrieben werden) werden die <th>-Tags genutzt. Jeder <th>-Tag markiert eine eigene Spalte. Die Daten der Tabellen werden innerhalb der jeweiligen Zeile mit dem <td>-Tag (steht für table data = Tabellendaten) eingefügt. Wie beim <th>-Tag wird pro <td>-Tag eine eigene Spalte eingefügt.

Denkt dran die jeweiligen End-Tags zu benutzen!

<table>

<tr>

<th>Katzenarten</th>

<th>Hundearten</th>

<th>Fischarten</th>

</tr>

<tr>

<td>Abessinier</td>

<td>Ägyptische Mau</td>

<td>Havana</td>

<td>Peterbald</td>

</tr>

<tr>

<td>Border Terrier</td>

<td>Beagle</td>

<td>Irish Terrier</td>

<td>Labrador</td>

</tr>

<tr>

<td>Hering</td>

<td>Goldfisch</td>

<td>Sardine</td>

</tr>

</table>

Die einzelnen Tags können auch nebeneinander statt untereinander geschrieben werden.

Next up

Previous

HTML-Struktur-003