HTML - 10 Beispiele
10.09.2018
10 HTML-Beispiele
1. Beispiel
Im ersten Beispiel lernen wir den sogenannten p-Tag und den b-Tag kennen:
<p>Dies ist eine Zeile mit einem <b>betonten</b> Wort.</p>
<p>Und hier kommt auch schon die zweite Zeile.</p>
Und so könnte das im Browser aussehen:
Dies ist eine Zeile mit einem betonten Wort.
Und hier kommt auch schon die zweite Zeile.
2. Beispiel
Im zweiten Beispiel stelle ich Ihnen den br-Tag vor. Er sorgt für einen Zeilenwechsel:
<p>Dies ist eine Zeile mit einem <b>betonten</b> Wort.<br />
Und hier kommt auch schon die zweite Zeile.</p>
Und so könnte das im Browser aussehen:
Dies ist eine Zeile mit einem betonten Wort.
Und hier kommt auch schon die zweite Zeile.
3. Beispiel
Mit den h-Tags können Sie einen Text strukturieren. Die h-Tags gibt es von 1 bis 6.
<h2>Dies ist eine H2-Überschrift</h2>
<h3>Dies ist eine H3-Überschrift</h3>
<p>Das h3-Tag sollte "kleiner" dargestellt werden, als das h2-Tag. <br />
Aber das liegt im Ermessen der Gestaltung.</p>
<h4>Dies ist eine H4-Überschrift</h4>
<p>Das h4-Tag wiederum sollte "kleiner" dargestellt werden, als das h3-Tag. <br />
Aber auch das liegt im Ermessen der Gestaltung.</p>
Und so könnte das im Browser aussehen:
Dies ist eine H2-Überschrift
Dies ist eine H3-Überschrift
Das h3-Tag sollte "kleiner" dargestellt werden, als das h2-Tag.
Aber das liegt im Ermessen der Gestaltung.
Dies ist eine H4-Überschrift
Das h4-Tag wiederum sollte "kleiner" dargestellt werden, als das h3-Tag.
Aber auch das liegt im Ermessen der Gestaltung.
4. Beispiel
Eine Aufzählung
<ul>
<li>Banane</li>
<li>Apfel</li>
<li>Birne</li>
</ul>
Und so könnte das im Browser aussehen:
5. Beispiel
Eine Aufzählung mit 1, 2, 3:
<ol>
<li>Banane</li>
<li>Apfel</li>
<li>Birne</li>
</ol>
Und so könnte das im Browser aussehen:
6. Beispiel
Ist eine Aufzählung auch mit a, b, c möglich
Ja, dazu nutzt man das Attribut type:
<ol type="a">
<li>Banane</li>
<li>Apfel</li>
<li>Birne</li>
</ol>
Und so könnte das im Browser aussehen:
7. Beispiel
Eine Verschachtelung von Aufzählungen:
<ol type="a">
<li>Banane
<ul>
<li>lustig</li>
<li>gefährlich</li>
</ul>
</li>
<li>Apfel</li>
<li>Birne</li>
</ol>
Und so könnte das im Browser aussehen:
8. Beispiel
Der Hyperlink:
<a href="http://www.meindialogsystem.de/Startseite">zum Dialogsystem</a>
Und so könnte das im Browser aussehen:
9. Beispiel
Kann man den Hyperlink so erstellen, dass ein neues Browserfenster geöffnet wird?.
Ja, dazu verwendet man das target-Attribut:
<a href="http://www.meindialogsystem.de/Startseite" target="_blank">zum Dialogsystem</a>
Und so könnte das im Browser aussehen:
10. Beispiel
Das letzte Beispiel ist eine Tabelle:
<table>
<tr>
<th>
Vorname
</th>
<th>
Nachname
</th>
</tr>
<tr>
<td>
Oliver
</td>
<td>
Reinking
</td>
</tr>
<tr>
<td>
Manfred
</td>
<td>
Mustermann
</td>
</tr>
</table>
Und so könnte das im Browser aussehen:
|
Vorname
|
Nachname
|
|
Oliver
|
Reinking
|
|
Manfred
|
Mustermann
|