HTML-Tags {Tutorial}

Im heutigen Tutorial geht es wie versprochen um sogenannte HTML-Tags.
Was ist ein Tag, wofür braucht man sie und welche gibt es ?

Ganz allgemein ist ein Tag die HTML-Sprachanweisung. Sie werden auch HTML-Markup genannt. Gibt es öffnende (<...>) und schließende (</...>) Tags, spricht man von einem Container. Ein schließendes Tag unterscheidet sich vom öffnenden durch einen Schrägstrich. 

Die Information steht immer zwischen einem öffnenden und einem schließenden Tag. Wie der Text strukturiert wird, hängt von dem jeweiligen Tag ab. Der p-Tag steht zum Beispiel für den Anfang eines Absatzes (p wie paragraph). Die meisten Tags sind Buchstaben oder Abkürzungen für englische Begriffe.

Hier ist ein Auszug der geläufigsten Tags:

Einige wichtige Tags...

Überschriften definieren (Darstellung vom Browser abhängig):

<h1>...</h1> oder <h2>...</h2> bis h6

Textabsatz mit Zeilenumbruch:

<p>...</p>

Link:

<a>...</a>

kursiv:

<i>...</i> oder <em>...</em>

fett:

<b>...</b> oder <strong>...</strong>

*Die drei Punkte sind jeweils durch den gewünschten Text zu ersetzen.

Listen & Tabellen

Um einen HTML Code besser zu strukturieren, werden oft auch Listen und Tabellen verwendet.

Bei Listen gibt es  zwei verschiedene Arten: geordnete und ungeordnete. Unter einer geordneten Liste versteht man eine nummerierte Aufzählung und unter einer ungeordneten Liste eine Aufzählung mit einem Aufzählungszeichen (zum Beispiel Bullet Points). Eine geordnete Liste wird mit <ol>...</ol> erzeugt und eine ungeordnete mit <ul>...</ul>.

Leicht zu merken mit ol für ordered list und ul für unordered list. In dieser Liste werden dann mit <li>...</li> die entsprechenden Zeilen geschrieben. Zur besseren Übersicht befindet sich der li-Tag in einer eigenen Zeile zwischen den ol oder ul Tags.

<ol>

     <li> Zeile 1</li>

     <li> Zeile 2</li>

</ol>

* für eine ungeordnete Liste einfach ol durch ul ersetzen.

Tabellen werden oft zur Anordnung mehrerer Elemente nebeneinander verwendet, oder einfach nur als einfache Tabelle. Erzeugt wird eine Tabelle mit den Tags <table>...2</table>. Mit dem Tags <tr>...</tr> legt man eine neue Zeile fest. Mit  <td>...</td>  werden Zellen dieser Zeile hinzugefügt.  Wichtig ist, dass alle tr-Elemente innerhalb der table-Tags sind und alle td-Elemente innerhalb von tr-Tags.

Hier ist die Grundstruktur für eine Tabelle mit zwei Zeilen mit jeweils 2 Spalten.

<table>

     <tr> 

           <td> Zelle 1</td>

           <td> Zelle 2</td>

     </tr>

     <tr>

           <td> Zelle 1</td>

           <td> Zelle 2</td>

     </tr>

</table>

Attribute

Attribute werden zusätzlich zum Tagnamen in die spitzen Klammern geschrieben. Die meisten Attribute können für mehrere Tags verwendet werden (z.B.: class, title, id ). Dann gibt es noch welche, die nur für spezielle Tags verwendet werden (href bei Links und src bei Bildern). Der Wert eines Attributs muss immer zwischen zwei doppelte Hochkommas (Anführungszeichen) gesetzt werden: "Attributwert". Die Grundstruktur sieht dann so aus:

<tagname attributname="attributwert"> ... </tagname>

Die meisten Attribute sind jedoch optional, also kein Muss! Ausnahme: z.B.: src bei Bildern.

Beispiel bei Link (Attribut href):

Buchblume

Der Code dazu sieht wie folgt aus:

<a href="https://buchblume.blogspot.com/"> Buchblume </a>

Bilder

Beim Einfügen von Bildern gibt es einen kleinen Unterschied: In HTML wird kein schließendes Tag verwendet. Außerdem müssen sogar zwei Attribute verwendet werden (src und alt). 

src gibt die URL, also die Quelle an, von wo man das Bild bezieht, und alt einen Alternativtext.

<img src="Bildquelle" alt="Text">

Möchte man gleich einmal mit Attribute umgehen lernen, könnte man dies auch bei Bildern machen und zwar mit height und width.

<img src="Bildquelle" width="200" height="200" alt="Text">

Falls ihr euch noch andere Angaben wünscht, erweitere ich diesen Post gerne.