HTML Befehle - Auf einen Blick
HTML ist die Abkürzung für “HyperText Markup Language” und ist die Sprache, die von Websites verwendet wird. Per Definition versteht man unter HTML eine textbasierte Auszeichnungssprache zur Strukturierung elektronischer Dokumente wie Texte, Bilder, Hyperlinks und andere Inhalte auf einer Webseite. Das HTML besteht aus einfachen Auszeichnungselementen, diese werden “Tags” genannt. Die neueste Version von HTML lautet HTML5 und bietet erweiterte Funktionen. Außerdem unterstützt sie moderne Webbrowser. Im nachfolgenden Abschnitt finden Sie die 11 wichtigsten HTML-Tags.
< div > < / div >
div steht für ein Block Element und nimmt die gesamte verfügbare Breite ein. Ein div beginnt immer in einer neuen Zeile im Code Editor. Die Aufgabe eines div ist es, andere Elemente zu umschließen wie eine Art Rahmen, Hülle oder Container. Ein div kann auch Eigenschaften/Styles annehmen.
<div>Hallo</div>
< span >< /span >
Ein span ist ähnlich wie ein div zu betrachten. Der Unterschied liegt darin, dass ein span nicht die volle Breite einnimmt, sondern nur die geringste benötigte Größe. Auch startet ein span nicht in einer neuen Zeile, wie das div. Ein span dient als Container, der auch in einem Textabschnitt eingefügt werden kann, um beispielsweise einen spezifischen Textausschnitt zu stylen.
<span>Hallo</span>
< h1 >< /h1 > bis < h6 >< /h6 >
h steht für Headline (Englisch für Überschrift). Insgesamt gibt es sechs verschiedene Überschriften, die hierarchisch geordnet sind. Dabei ist h1 die wichtigste Überschrift und gleichzeitig die größte von der Darstellung. Aus diesem Grund sollten die Headlines immer in einer logischen Reihenfolge angeordnet werden > Die h1 sollte die Hauptüberschrift umschließen und nur einmal pro Seite vorkommen. Die anderen Überschriften (h2-h6) können beliebig oft verwendet werden.
<H1>ÜBERSCHRIFT 1</H1>
<H2>ÜBERSCHRIFT 2</H2>
<H3>ÜBERSCHRIFT 3</H3>
<H4>ÜBERSCHRIFT 4</H4>
<h5>ÜBERSCHRIFT 5</h5>
<h6>ÜBERSCHRIFT 6</h6>
< p >< /p >
p steht für Paragraph (Englisch für Absatz). Durch dieses Tag wird ein Textabschnitt gekennzeichnet.
<p>Dies ist ein Textabschnitt</p>
< br >
br steht für Break (Englisch für Umbruch). Der br Tag sorgt für einen Textumbruch in einem Absatz.
<p>Bitte hier umbrechen<br>nein hier<br>oder doch<br>hier?</p>
Bitte hier umbrechen
nein hier
oder doch
hier?
< strong > < /strong >
Der strong Tag steht für Strong (Englisch für stark). Er hebt einen Textabschnitt in Fettschrift hervor und markiert diesen als besonders wichtig.
<p>Hier sehen Sie ein <strong>Beispiel</strong>.</p>
Hier sehen Sie ein Beispiel.
< i > < /i >
i steht für Italic (Englisch für kursiv) und sorgt dafür, dass ein Textabschnitt in kursiver Schrift dargestellt wird.
<p>Hier sehen Sie ein Beispiel in <i>kursiver Schrift</i>.</p>
Hier sehen Sie ein Beispiel in kursiver Schrift.
< u >
<p>Hier sehen Sie ein <u>Beispiel</u>.</p>
Hier sehen Sie ein Beispiel.
< hr >
hr bedeutet horizontal line (Englisch für horizontale Linie). Dieser Tag fügt eine horizontale Linie ein.
<p>Hier sehen Sie eine horizontale Linie:</p><hr>
HTML-Listen
In HTML gibt es zwei verschiedene Arten von Listen:
1. <ol></ol> eine geordnete Liste (Englisch: Ordered List), eine Liste mit Nummerierung.
2. <ul></ul> eine ungeordnete Liste (Englisch: Unordered List), eine Liste mit Bullet Points.
Die oben genannten Listen enthalten einzelne Listenelemente, die mit <li></li> eingefügt werden.
<ol>
<li>Hier steht das erste Listenelement.<li>
<li>Hier steht das zweite Listenelement.<li>
</ol>
<ul>
<li>Hier steht das erste Listenelement.<li>
<li>Hier steht das zweite Listenelement.<li>
</ul>
- Hier steht das erste Listenelement.
- Hier steht das zweite Listenelement.
geordnete Liste
- Hier steht das erste Listenelement.
- Hier steht das zweite Listenelement.
ungeordnete Liste
< a > < /a >
Der a Tag steht für Hyperlink (oder Link) und sorgt für die Verlinkung von Websites untereinander. Zu beachten ist, dass ein Link immer mit dem href=““ Attribut auftreten muss, damit wird definiert, wohin verlinkt wird.
<p>Weitere Infos finden Sie unter: <a href=“ https://www.wappcom.de/“>www.wappcom.de</a><p>
Weitere Infos finden Sie unter: www.wappcom.de
< img >
img steht für Image (Englisch für Bild) und fügt Bilder ein. Ein Bild muss immer mit dem src=““ Attribut auftreten, denn dies verlinkt auf die Medienquelle.
<script><img decoding="async" src="https://wappcom.de/wp-content/uploads/2022/10/Wappcom-Logo.svg" alt=“wappcom-logo width=“295px“ height=“53px“></script>
Die Quelle wird auf dem Server (https://wappcom.de/) durchsucht. Durch die Verlinkung des Verzeichnisses (/wp-content/uploads/2022/10/Wappcom-Logo.svg) kann HTML die Datei (Wappcom-Logo.svg) finden und verwenden. width=““ gibt die Breite des Bildes an und height=““ ist für die Höhe des Bildes zuständig.
DIE 11 WICHTIGSTEN HTML BEFEHLE
download
