Einfache HTML Befehle schnell erklärt!
- Inhaltsverzeichnis
- 1. Einfache HTML Befehle
- 2. Überschriften
- 3. Absätze
- 4. Zeilenumbruch
- 5. Fettschrift
- 6. Kursivschrift
- 7. Unterstrichen
- 8. Durchgestrichen
- 9. Hochgestellte Zeichen
- 10. Tiefergestellte Zeichen
- 11. Horizontale Linie
- 12. Kommentare
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.
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
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.
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.
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.
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.
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
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
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
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
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.
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.
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.
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...
Das könnte Sie auch interessieren:
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!
Wenn Ihre Website interaktiv sein soll, ist JavaScript erforderlich.
Dieses JavaScript Tutorial ein sehr guter Einstieg!
Auf dieser Seite finden Sie Literatur rund um alle Themen, die sich mit der Erstellung eines Websiteprojekts beschäftigen!