Weitere HTML-Tags

Ziele

• Ich weiss, wie ich HTML-Dokumente strukturieren kann.
• Ich weiss, wie ich mit HTML Texte formatieren kann.
• Ich weiss, wie ich Links und Bilder in einer Webseite hinzufügen kann.
• Ich weiss, wie ich geordnete/sortierte Listen erstellen kann.
• Ich weiss, wie ich ungeordnete/unsortierte Listen erstellen kann.
• Ich weiss, was Definitionslisten sind und wie und wozu ich sie einsetzen kann.

Überschrift (Heading)

Du hast bereits erfahren, dass du mit <h1> für Überschriften verwenden kannst. Oft hast du aber eine Überschrift für die Seite und dann Überschriften, die diesem Titel untergeordnet sind. Wie in einem Word-Dokument kannst du auch in HTML Überschriften hierarchisch verschachteln. Das geht so:

1
2
3
4
5
6
7
8

<h1>Heading 1</h1>
<p>Hello</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Hello</p>

Dies führt zu folgendem Ergebnis:

Es gibt also Tags für Überschriften erster bis sechste Stufe. Grundsätzlich gilt, je kleiner die Zahl der Stufe, je grösser wird die Überschrift dargestellt. Das obige Ergebnis zeigt, wie Überschriften per Default formatiert werden. Du kannst das Styling dieser Überschriften selbstverständlich anpassen (kommt im CSS-Teil).

Absätze (Paragraf)

Du hast bereits erfahren, dass Zeilenumbrüche in HTML keine Wirkung haben. Möchtest du eine neue Zeile einfügen, könnte dir das <br/>-Tag weiterhelfen. Besser ist aber, wenn du den Text, der zusammengehört, auch entsprechend markierst: Das kannst du mit dem <p>-Tag erreichen. Der Text, der innerhalb dieses Tags steht, wird in einem gleichen Abschnitt dargestellt. Ausserdem trennt es diesen Inhalt mit Leerschlag zum nächsten Element. Das wird im folgenden Beispiel verdeutlicht:

1
2
3
4
5

<h2>Title</h2>
This is one line. 
This the second one. <br/> And the third one.
<p>And this is inside a paragraph.</p>
<p>This too.</p>

Beachte hier, dass <p>-Tags mehr Leerraum erzeugen als <br/>.

Text formatieren

Du wirst in die Situation kommen, wo du einen bestimmten Teil eines Textes z.B. fett oder kursiv formatieren musst.

Das kannst du mit HTML sehr einfach erreichen, denn dafür gibt es spezielle Tags:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<p>
    <strong>Heared</strong> about
    the new restaurant called
    <em>Karma?</em>
</p>
<p>
    There's <b>no menu</b>:
    You get what you <i>deserve</i>.
</p>

Um also einen bestimmten Text fett darzustellen, kannst du es in ein <strong>- oder <b>-Element verwenden. Beide Tags BEZWECKEN im Prinzip genau das Gleiche, MEINEN aber nicht zwingend das Gleiche: <b>-Elemente sind einfach fett-gedruckt, während <strong>-Elemente betont sein sollen. <strong> soll dem fett-gedruckten Wort also mehr Ausdruck verleihen. Dieser Unterschied ist vor allem für den Einsatz von Screenreadern wichtig. Mit einem eigenen Styling (kommt im CSS-Teil) könntest du <strong>-Elemente z.B. auch grösser oder rot darstellen. Mit einem <b>-Element sagt man im Prinzip nur, dass der Text fett-gedruckt sein soll.

Einen Text kursiv darstellen kannst du mit <i> bzw. <em>. Das Pendant zu <b> ist <i> (italic), und dasjenige zu <strong> das <em> (emphasis = Betonung).

Das obige Beispiel wird so gerendert:

Bitte beachte: Text zu formatieren ist Styling. Styling wiederum ist normalerweise die Aufgabe von CSS und nicht von HTML.

Links und Bilder

Eines der wichtigsten Elemente in HTML sind Links auf andere Seiten. Links werden mit a-Elementen (anchor) realisiert. Ein Link kann wie folgt erstellt werden:

1

<a href="https://labs.it-ninjas.ch/">Home</a>

Probiere das einmal aus.

Du wirst einen blauen und unterstrichenen Text “Home” sehen. <a> ist der Tag, der generell für Hyperlinks verwendet wird. href ist ein Attribut des a-Tags, mit dem die URL des Links spezifiziert wird. In unserem Fall ist https://labs.it-ninjas.ch/ die URL, die beim Klick aufgerufen wird. Home ist der Text, der dem User angezeigt wird.

Ziemlich ähnlich kannst du auch ein Bild aus dem Internet einbinden:

1
2
3

<img src="https://it-ninjas.ch/img/png/Ninja%20Elements_ninja_phone.png" 
     alt="IT Ninjas"
     width="300" />

Ganz offensichtlich wird das <img/>-Tag (Image) für Bilder verwendet. Das <img/>-Tag ist ein Tag, welches keinen Inhalt zwischen Opening- und Closing-Tag hat. HTML bietet auch die Möglichkeit einer verkürzten Schreibweise: Statt kann man auch schreiben. Das gilt für alle Elemente, die per default keinen Inhalt haben.

Das wichtigste Attribut im img-Tag ist src (source = Quelle). Als src wird eine URL zu einem Bild erwartet. Vergiss nicht, bei absoluten Pfaden das Protokoll (also https://) anzugeben. Nicht zwingend aber erwartet wird das alt-Attribut (alternative). Dieser Text wird angezeigt, wenn das Bild nicht geladen werden konnte. Völlig optional sind hingegen Attribute wie width oder height, welche die Breite und Höhe des Bildes festlegen. Diese Grössen werden aber besser mit CSS spezifiziert, da CSS genauere Spezifikationen zulässt (also nicht nur in ‘Pixel’ sondern auch anderen Einheiten).

Wenn du willst, dass man beim Klick auf ein Bild weitergeleitet wird, kannst du dein Bild in ein <a>-Element schmeissen:

1
2
3

<a href="https://it-ninjas.ch/">
    <img src="https://it-ninjas.ch/img/png/Ninja%20Elements_ninja_phone.png" alt="IT Ninjas" />
</a>

Listen

In HTML gibt es verschiedene Arten, um Aufzählungen darzustellen. Wir schauen uns

• ungeordnete Liste (unordered lists, Bullet Point-Listen),
• geordnete Listen (ordered lists, nummerierte Listen)
• und Definitionslisten (definition list)

an.

Eine Bullet-Point-Liste kann man mit einer unsortierten Liste (unordered list) kreieren:

1
2
3
4
5
6

<h4>What do you do in case of emergency?</h4>
<ul>
    <li>git commit -m "message"</li>
    <li>git push</li>
    <li>Leave the building.</li>
</ul>

Möchtest du hingegen eine Nummerierung, dann verwende eine sortierte Liste (ordered list):

1
2
3
4
5
6
7
8

<h4>Most Difficult Programming Languages</h4>
<ol>
    <li>Brainf*ck</li>
    <li>Cow</li>
    <li>Intercal</li>
    <li>Malbolge</li>
    <li>Whitespace</li>
</ol>

Das Ganze sieht dann ungefähr so aus:

Eine 3. Art von Listen sind Definitionslisten. Diese Art von Liste wird zwar nicht oft verwendet, kann aber hilfreich für ein Glossar oder Ähnliches sein. Schaue dir hierfür folgendes Beispiel an:

1
2
3
4
5
6
7
8
9

<h2>Glossary</h4>
<dl>
    <dt>buffoonish</dt>
    <dd>like a clown </dd>
    
    <dt>heyday</dt>
    <dd>the period of greatest prosperity or productivity</dd>
</dl>