Weitere Grundbegriffe
(HTML-Kurs, 3):

Absätze und Zeilenumbrüche, Listen, Hervorhebungen, Präformatierter Text, Bilder

Absätze und Zeilenumbrüche

Daß man einen Zeilenumbruch wie folgt markiert, wissen wir schon aus unserem ersten HTML-Text, den wir heute früh geschrieben haben:
Die Absatz-Markierung sieht so aus: <p>

Zeilenumbrüche ohne Markierung werden nicht b erücksichtigt, ebenso wenig wie mehr als 1 Leerzeichen.

Erläuterungen

<p> Absatz
<br> Zeilenumbruch
<hr> horizontale Linie

Möchten Sie, daß in Ihrer Datei Zeilenumbrüche oder Absätze erzeugt werden, so müssen Sie diese explizit eingeben, wobei das Tag <br> einen Zeilenumbruch markiert und das Tag <p> einen Absatz.
Mit einer horizontalen Linie erzielen Sie eine stärkere Abgrenzung zweier Dokumentbereiche.

Die Absatzmarkierung <p> kann um ein align-Attribut mit den Werten center, right oder justify (Blocksatz) erweitert werden; dann muß freilich das Absatzende mit </p> markiert werden; z.B. <p align=right>...</p>.

Listen

Es gibt zwei Arten von Listen:

Eine unnumerierte sieht so aus:

  • Listenelement 1
  • Listenelement 2
<ul>
<li>Listenelement 1
<li>Listenelement 2
</ul>

Auch zählen können die Browser:

  1. Listenelement 1
  2. Listenelement 2
<ol>
<li>Listenelement 1
<li>Listenelement 2
</ol>

Hervorhebungen

logische Auszeichnungen:
<strong>...</strong> starke Hervorhebung
<em>...</em> Hervorhebung
<cite>...</cite> Zitat
typographische Auszeichnungen:
<b>...</b> fett
<i>...</i> kursiv
<tt>...</tt> (Teletype) nicht-proportionale Schrift

Präformatierter Text

<pre>...</pre>

So        kann        man ganz      einfach
eine      Tabelle     schreiben     !
Zeilenumbrüche und Leerzeichen bleiben erhalten; keine Proportionalschrift.

Am besten im Windows-Notepad entwerfen, ohne den Tabulator zu benutzen (die meisten HTML-Editoren verwenden Proportionalschrift, deshalb verschieben sich die Abstände).

Bilder

Inline-Bilder

  1. Kleinere Bilder werden gewissermaßen wie einzelne Schriftzeichen behandelt; man kann sie direkt in den Text einbauen - Das ist neu! <img src="http://www.hilberer.de/html/new.gif" alt="Das ist neu!"> so, Text an der Unterkante des Bildes;
  2. oder, mit Hilfe des Attributes align=middle, so, Text in der Mitte Das ist neu! <img align=middle src="http://www.hilberer.de/html/new.gif" alt="Das ist neu!"> des Bildes;
  3. oder, mit Hilfe des Attributes align=top, so, Text an der Oberkante Das ist neu! <img align=top src="http://www.hilberer.de/html/new.gif" align=top alt="Das ist neu!"> des Bildes.
  4. Voreingestellt ist align=bottom (siehe Beispiel 1).
Das ist neu! Verwendet man das Attribut der horizontalen Ausrichtung align=right/left, dann wird die Graphik am rechten bzw. linken Bildschirmrand dargestellt, und der Text fließt links bzw. rechts an ihr vorbei - <img align=right src="http://www.hilberer.de/html/new.gif" alt="Das ist neu!">.

Anmerkungen:

External Images

Auf größere verweist man besser, z.B. Photo der Zentralbibliothek, Ansicht von Norden, mit Statue Heinrich Heines <A HREF="http://www.hilberer.de/html/statue.jpg">Photo der Zentralbibliothek, Ansicht von Norden, mit Statue Heinrich Heines</A> .
So kann der Leser selbst entscheiden, ob er das Bild laden möchte oder nicht.

Clickable Images

Heinrich-Heine-Universität Düsseldorf

<center>
<a href="http://www.uni-duesseldorf.de/">
[Jetzt das Bild, das statt des anklickbaren Textes steht:]
<IMG width="218" height="129" SRC="http://www.hilberer.de/bild/heinet.gif" ALT="Heinrich-Heine-Universitaet Duesseldorf" BORDER=0>
</a>
</center>

HTML-Kurs, 4: Weitere Grundbegriffe

HTML-Kurs

Letzte Änderung: 7.7.2011.
Dr. Thomas Hilberer, th@hilberer.de.
http://www.hilberer.de/html/html3.html