Wilfried Helm:

Der HTML 5-min-Schnellstkurs

HTML ist die Sprache des Internet! Bunt und sehr leicht zu erlernen... Auch diese Datei ist eine HTML-Textdatei.

HTML ist ganz einfach erklärt:
Man kann Texte übersichtlich formatieren und mit Bildern, Sound, Filmen u.s.w. präsentieren. HTML-Dateien sind kleine Textdateien, die auf jedem Computer gelesen, verarbeitet und mit jedem Texteditor hergestellt werden können.

Jede HTML-Datei hat die Dateiendung .htm oder .html   !!!

ein Foto in der Mitte
ein Foto in der Mitte

Wie ist eine HTML-Datei aufgebaut?

Stellen Sie sich einen Menschen vor. Der soll 'html' heißen und hat ein Anfang und ein Ende, von oben nach unten. Auch bei HTML:

Jede HTML-Datei beginnt mit <html> und endet mit </html>. Das sieht so aus:

<html>
</html>
<html> und </html> sind spezielle Anweisungen für den Rechner. Stößt er auf solche Anweisungen, "weiß" er genau, was er zu tun hat. Diese Anweisungen werden 'Tags' genannt. Jedes 'Tag' beginnt und endet. Das Ende eines Tag wird mit dem /-Strich gekennzeichnet, von <html> ist das Ende </html>.

Alles in einer HTML-Datei spielt sich zwischen diesen beiden Tags ab.

<html>
Die komplette HTML-Datei...
</html>

Jedes HTML-Dokument erhält durch weitere Tags eine Struktur mit Anweisungen für den Rechner.

Zurück zu unserem Menschen. Jeder Mensch hat nur einen Kopf und nur einen Körper. So auch HTML:

<html>
<head>
hier dazwischen befindet sich der Inhalt des HTML-Kopfes
</head>
 
<body>
hier ist der Inhalt des HTML-Körpers
</body>
</html>

Auch der Kopf, englisch <head>, hat ein Ende, </head>, und der Körper, engl. <body>, auch: </body>, alles zwischen <html> und </html> (innerhalb des Menschen).

Im Kopf einer HTML-Datei muß der Titel (des Menschen Name) stehen. Nur 1 Titel ist erlaubt. Dieser wird in der Titelleiste des Browsers (Programm, mit dem man sich HTML-Dateien anschaut) angezeigt.

<html>
<head>
<title>Titel der Datei</title>
</head>
 
<body>
Hier steht jetzt der Text, bzw. Inhalt der Datei mit seinen Überschriften, Listen, Tabellen, Bildern u.s.w.
</body>
</html>

<title></title> -Tags sind Pflicht, genau wie die Pflicht-Bestandteile 'html', 'head' und 'body' in einer HTML-Datei. Sollten Sie <title></title> nicht benötigen, schreiben Sie einfach nichts dazwischen.

<title>Hier muß nichts dazwischen stehen</title>

einfach so: <title></title>
 

Über Absätze, Listen, fett und kursiv...

Zwischen den Tags <body> und </body> steht der Text oder Inhalt der Datei.

Diesen strukturiert man übersichtlich mit Zeilenumbrüchen, Absätzen, Listen, Tabellen, Linien, Bildern und dergleichen. In HTML geht das folgendermaßen:

<br>neue Zeile
Der Text nach diesem Tag <br>
wird in einer neuen Zeile angezeigt. Dieses Tag hat ausnahmsweise kein Abschluß-Tag; also nur da, wo Text in eine neue Zeile muß, <br> davor setzen.
 
<p>Absatz</p>
Absätze werden damit markiert, <p> vor dem Absatz und </p> danach. Angezeigt wird eine Leerzeile vor dem neuen Absatz.

<p>Neuer Absatz...</p>

<p>Neuer Absatz...</p>
 

<b>Text</b>
Textstellen zwischen diesen Tags (b wie bold) werden dick dargestellt.
<i>Text</i>
Hiermit kennzeichnet man Textstellen kursiv (i wie italic).
<u>Text</u>
Hiermit kennzeichnet man unterstrichene Textstellen (u wie underline).
 
<ul> <li>Listeneintrag</li> </ul>
oder:
<ul>
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
</ul>
Die <li> </li> - Tags markieren Listeneinträge. Sie stehen zwischen <ul> und </ul>, den Anweisungen für ungeordnete Listen.

Im Gegensatz dazu gibt es geordnete Listen, die zwischen <ol> und </ol>, also

<ol><li>Listeneintrag</li><ol>
oder:
<ol>
<li>1. Listeneintrag</li>
<li>2. Listeneintrag</li>
</ol>
Dazu ein Beispiel:
  1. erster Eintrag einer geordneten Liste,
  2. zweiter Eintrag...
Weitere Listenbeispiele mit <ol type="a"></ol> und <ol type="I"></ol>. type="a" und type="I" bezeichnen besondere Eigenschaften der geordneten Listen:
  1. erster Eintrag einer anderen geordneten Liste zwischen <ol type="a"></ol>,
  2. zweiter Eintrag...
  1. erster Eintrag einer geordneten Liste zwischen <ol type="I"></ol>,
  2. zweiter Eintrag
  3. dritter Eintrag
  4. vierter Eintrag...

eine Glossarliste (die Tags <dt> und <dd> benötigen kein Abschlußtag):

<dl>
<dt>Glossareintrag einer Glossarliste
<dd>Erläuterung des Eintrages in der Liste
<dt>neuer Glossareintrag
<dd>weitere Erklärung...
</dl>
Man kann auch Tags miteinander kombinieren, aber nur ineinander, zum Bsp.:
 

Demos weiterer Möglichkeiten in HTML...

ein Foto in der Mitte verkleinert
Graphiken und Fotos im Text, wo immer Sie wollen...
hier verkleinert und rechtsbündig

Eine Verknüpfung (Hyperlink). Klicken Sie aus Spaß auf das farbige Wort 'Hyperlink' in Klammern und Sie gelangen zu einer anderen Textstelle (hier ganz nach unten). So sind auch Sprünge (Links) zu anderen Dateien auf dem eigenen Computer und zu Dateien in der ganzen Welt möglich.

Textabsatz linksbündig (ist Standard)

Textabsatz zentriert

Textabsatz rechtsbündig

linkes Tabellenfeld einer Tabelle rechtes Tabellenfeld
Weißer Hintergrund rechts 2. Zeile

Blaue und fette Schrift,
rote hervorgehobene Schrift,
grüne kursive Schrift
große Schrift
grössere Schrift
etwas grössere Schrift, normale Schrift
kleinere Schrift, kleine Schrift, ganz kleine Schrift...

Schrift: Times Roman +1
Schrift: Arial +2

eine horizontale Linie: mit <hr>. Dieses Tag hat kein Abschluß-Tag!!!


noch eine Linie (70% lang) in der Mitte


eine Linie (60% lang) rechts, grün und dicker ohne Schatten


noch eine Linie (60% lang) links dicker mit Schatten


Überschrift 1 mit <h1></h1>

Überschrift 2 mit <h2></h2>

Überschrift 3 mit <h3></h3>

Überschrift 6 mit <h6></h6>

 


Das muß es für fünf Minuten gewesen sein. Es gibt natürlich sehr, sehr viel mehr Möglichkeiten der HTML-Textcodierung, zu sehen beim Surfen im Internet. Dort ist HTML die Standardsprache.

Und schließlich: Fast jedes Textprogramm speichert auf Wunsch Textdateien auch als HTML-Dateien ab. Will man jedoch kleine Internetseiten basteln oder einfach nur bestehende Texte ansprechend und übersichtlich präsentieren, sollte man sich etwas mehr mit den Besonderheiten der Sprache befassen. Es macht dann richtig Spaß. Und: so schwer war es doch nicht, oder?

Viel Spaß weiterhin
Ihr Wilfried Helm.

(Oh, schnell wieder zurück) Klicken Sie auf den farbigen Text in den Klammern, um wieder zurückzuspringen.