Einfache HTML Befehle schnell erklärt!

HTML und CSS - Jürgen Wolf*

1. Einfache HTML Befehle

Hier finden Sie eine Erläuterung der einfachen HTML Befehle. Diese Befehle werden in HTML Tags genannt. Alle hier aufgeführten Befehle bewirken eine sichtbare Änderung an Ihrer Textstruktur beziehungsweise dem Aussehen Ihres Textes. Die einzige Ausnahme ist der Kommentar Tag.

zurück zum Inhaltsverzeichnis

2. Überschriften

Überschriften dienen dazu einen Text zu strukturieren.

<h1>...</h1>: Der "h" Tag kennzeichnet ein Element als Überschrift.
Die "1" steht für eine Überschrift 1. Ordnung.
Eine Überschrift 1. Ordnung ist die größte Überschrift.
Analog kann man auch die Zahlen 2 bis 6 einsetzen.
Eine Überschrift 6. Ordnung ist dann die kleinste Überschrift.

Das sieht im Browser dann so aus:

HTML Überschriften von 1. Ordnung bis zur 6. Ordnung

HTML Überschriften von 1. Ordnung bis zur 6. Ordnung

Eine Überschrift 1. Ordnung hat die oberste Priorität.
Also sollte sie auch am Anfang eines Dokuments stehen.
Entsprechend nachfolgend bedarfsweise die anderen Überschriften.

Das ist wichtig für Suchmaschinen, um Inhalte korrekt interpretieren zu können.

Das Aussehen dieser Überschriften wiederum lässt sich mit Cascading Style Sheets sowohl was die Größe, Schriftart, Schriftauszeichnung als auch Farbe betrifft modifizieren.
Wie das geht, können Sie auf meiner Seite CSS TUTORIAL nachlesen.

zurück zum Inhaltsverzeichnis

3. Absätze

<p>...</p>: Der <p> Tag steht als Abkürzung für paragraph. Auf deutsch also: Absatz.
Ein <p> Tag erzeugt eine Leerzeile. Wollen Sie einen im Browser sichtbaren Absatz erzeugen, ist es erforderlich, den betreffenden Text mit dem <p> Tag auszuzeichnen.

zurück zum Inhaltsverzeichnis

4. Zeilenumbruch

<br>: Der <br> Tag steht für break line und bewirkt einen Zeilenumbruch. Wenn Sie eine Zeile innerhalb Ihres HTML-Editors umbrechen, ist dieser Zeilenumbruch, wenn Sie die entsprechende HTML Datei mit Ihrem Browser aufrufen, nicht sichtbar.

Ihr Text wird im Browser grundsätzlich als Fliesstext dargestellt, der erst umbrochen wird, wenn der viewport nicht mehr gross genug ist, um den folgenden Text in der gleichen Zeile anzuzeigen.

Wenn Sie also an einer bestimmten Textstelle einen im Browser sichtbaren Zeilenumbruch bewirken wollen, ist es erforderlich, das <br> Tag an die Textstelle zu setzen, an der der Zeilenumbruch erfolgen soll. Der <br> Tag ist ein single Tag.

zurück zum Inhaltsverzeichnis

5. Fettschrift

<b>...</b>: Der <b> Tag steht als Abkürzung für bold, was übersetzt fett/fett gedruckt bedeutet.
Damit ist auch klar wie ein Element, das mit diesem Tag ausgezeichnet ist, im Browser dargestellt wird.

Das sieht dann so aus:

Normale Schrift

Fettschrift

Der <b> Tag ist "deprecated". Das heißt er funktioniert zur Zeit mit allen gängigen Browsern, sollte aber nicht mehr verwendet werden. Er ist ein "Auslaufmodell". Statt dessen sollte man Fettschrift mit Casacding Style Sheets darstellen.

zurück zum Inhaltsverzeichnis

6. Kursivschrift

<i>...</i>: Das <i> Tag steht als Abkürzung für italic, was übersetzt kursiv bedeutet.
Entsprechend wird ein Element, das mit diesem Tag ausgezeichnet ist, im Browser kursiv dargestellt.

Normale Schrift

Kursivschrift

zurück zum Inhaltsverzeichnis

7. Unterstrichen

<u>...</u>: Das <u> Tag steht als Abkürzung für underline, was übersetzt unterstrichen bedeutet.
Entsprechend wird ein Element, das mit diesem Tag ausgezeichnet ist, im Browser unterstrichen dargestellt.

Normale Schrift

Unterstrichen

zurück zum Inhaltsverzeichnis

8. Durchgestrichen

<s>...</s>: Das <s> Tag steht als Abkürzung für score through, was übersetzt durchgestrichen bedeutet.
Entsprechend wird ein Element, das mit diesem Tag ausgezeichnet ist, im Browser durchgestrichen angezeigt.

Normale Schrift

Durchgestrichen

zurück zum Inhaltsverzeichnis

9. Hochgestellte Zeichen

<sup>...</sup>: Das <sup> Tag steht als Abkürzung für superscript, was übersetzt hoch gestellt bedeutet. Entsprechend wird ein Element, das mit diesem Tag ausgezeichnet ist, im Browser hoch gestellt dargestellt.

Zur Anwendung kommt der <sup> Tag beispielsweise, um mathematische Ausdrücke korrekt in HTML darstellen zu können.

Normale Schrift

Hochgestellt

zurück zum Inhaltsverzeichnis

10. Tiefergestellte Zeichen

<sub>...</sub>: Das <sub> Tag steht als Abkürzung für subscription, was frei übersetzt soviel wie tiefer bedeutet. Entsprechend wird ein Element, das mit diesem Tag ausgezeichnet ist, im Browser tiefer gestellt dargestellt.

Normale Schrift

Tiefergestellt

Das <sub> Tag ist beispielsweise hilfreich, um chemische Formeln korrekt in HTML darstellen zu können.

zurück zum Inhaltsverzeichnis

11. Horizontale Linie

<hr>: Der <hr> Tag steht als Abkürzung für horizontal ruler. Übersetzt heißt das horizontales Lineal.
Der <hr> Tag erzeugt eine waagerechte Linie und gleichzeitig einen neuen Absatz im viewport.
Sie können den <hr> Tag hinter dem letzten Wort Ihres vorherigen Absatzes oder vor dem ersten Wort Ihres kommenden Absatzes oder in einer eigenen Zeile notieren.
Ich bevorzuge die letztgenannte Variante, weil der Quelltext so für mich am besten lesbar ist.

zurück zum Inhaltsverzeichnis

12. Kommentare

<!--...-->: Mit Kommentaren beschreibt man seinen HTML Code. Sie dienen dazu den Code für sich selber und gegebenenfalls auch für andere verständlicher zu machen.

Das kommentieren ist sinnvoll. Wenn man nach einem halben Jahr den eigenen Code überarbeiten will, stellt man unter Umständen fest, dass es schwierig ist, das eigene Werk nachzuvollziehen. Wie ausführlich man kommentiert, bleibt jedem selbst überlassen.

Man kann Kommentare aber auch benutzen, um Verbesserungen die man zukünftig implementieren möchte, festzuhalten.

Kommentare sind nur im Quelltext sichtbar. Im Browserfenster werden sie nicht angezeigt.

zurück zum Inhaltsverzeichnis

Mit den Tags des Grundgerüsts und den oben aufgeführten Basis Tags sind Sie in der Lage, rudimentäre HTML Dateien zu erstellen.

Wenn Sie bis hierhin gelesen haben, macht es Sinn HTML Dateien zu erstellen, erste Inhalte zu schreiben und mit den Tags zu experimentieren.

Diese Dateien ergänzen Sie später, um Ihre Navigation, Bilder, Links und so weiter.
Wie Sie das bewerkstelligen werde ich Ihnen, sobald ich Zeit dafür finde, auf den nächsten Seiten erläutern...

zurück zum Inhaltsverzeichnis

Das könnte Sie auch interessieren:

CSS TUTORIAL

Mit HTML strukturieren Sie Ihren Inhalt.
Mit Cascading Style Sheets sorgen Sie dafür, das Ihre Seite gut aussieht.
Wie Sie das bewerkstelligen, erfahren Sie hier!

JAVASCRIPT TUTORIAL

Wenn Ihre Website interaktiv sein soll, ist JavaScript erforderlich.
Dieses JavaScript Tutorial ein sehr guter Einstieg!

LITERATUR

Auf dieser Seite finden Sie Literatur rund um alle Themen, die sich mit der Erstellung eines Websiteprojekts beschäftigen!


Die Datei wurde zuletzt aktualisiert am: 22.03.2022