Sie sind auf Seite 1von 17

Mehr HTML

1
Inline oder Block?

• Blockelemente für äußere Struktur


• Listen, Absätze Tabellen
• Inline-Elemente regeln die Details
• Hervorhebungen und Links

2
Block-Elemente

3
Überschriften
<h1>Titel</h1>

<h6>unter-unter-...Titel</h6>

4
Absatz
<p>
Hier k&ouml;nnte ein
Text stehen&hellip;
</p>

5
Listen I
<ul>
<li>erster Eintrag</li>
<li>zweiter Eintrag</li>
</ul>

6
Listen II

• <ul> — unordered List


• <ol> — ordered list
• <dl> — definition list

7
Zitate im Block
<blockquote>
<p>
Aufkl&auml;rung ist die Maxime,
selber zu denken.
</p>
</blockquote>

8
Tabellen
<table>
<tr>
<th>Anbieter</th>
<th>Beschreibung</th>
</tr>
<tr>
<td>Heise</td>
<td>Zeitschriftenverlag</td>
</tr>
</table>

9
Verschiedene

• <form> — Formulare zur Eingabe


• <pre> — Vorformatierter Text
• <hr> — horizontale Linie

10
div
<div id="haiku-1">
<div class="zeile-1">
Windstille.
</div>
<div class="zeile-2">
Vom Ruderblatt tropft
</div>
<div class="zeile-3">
der Abendhimmel.
</div>
</div>
<cite> Hubertus Thum</cite>

11
Inline-Elemente

12
Links
<a href="http://heise.de">Heise Webseiten</a>

<a href="/">Wohin führt dieser Link?</a>

<a name="Frage">Und was ist das hier?</a>

13
Zitate
<p>
<q>
Luther ersch&uuml;tterte Deutschland
&mdash; aber Francis Drake beruhigte es wieder:
er gab uns die Kartoffel.
</q>
sagte <cite>Heinrich Heine</cite>.
</p>

14
Wichtig oder nicht
<p>
<strong>stark hervorgehoben (z.B. fett)</strong>
<em>nicht so stark hervorgehoben (z.B. kursiv)</em>
</p>

15
Weitere…

• <img> — Bilder (Demo)


• <object> — Medien (Demo)
• <br> — harter Zeilenumbruch

16
span
<p>
Zwei <span class="highlighted"> irgendwie
interessante</span> W&ouml;rter.
</p>

17