1. Überschriften
HTML bietet eine Vielzahl von Tags zum Formatieren und Strukturieren von Textinhalten, Bildern, Links und Listen. Die grundlegenden HTML-Tags ermöglichen es, eine leicht lesbare und logisch aufgebaute Seite zu erstellen, die attraktiv ist und leicht zu verstehen. Schauen wir uns die beliebtesten grundlegenden Tags und deren Verwendung an.
Überschriften (oder header) werden verwendet, um verschiedene Ebenen von Überschriften auf einer Seite anzugeben. HTML bietet sechs Überschriftenebenen — von <h1> bis <h6>, wobei <h1> die größte und wichtigste Überschrift ist und <h6> die kleinste.
<h1>Hauptüberschrift der Seite</h1>
<h2>Überschrift der ersten Ebene</h2>
<h3>Überschrift der zweiten Ebene</h3>
...
<h6>Kleinste Überschrift</h6>
Die Verwendung von Überschriften hilft, Textinformationen zu strukturieren und verbessert auch das SEO (Suchmaschinenoptimierung), da Suchmaschinen die Überschriften beim Analysieren des Seiteninhalts berücksichtigen.
2. Textformatierung
Für die Textformatierung bietet HTML einige einfache, aber leistungsstarke Tags.
Absätze/Paragraphen
Jetzt, da wir uns mit Überschriften vertraut gemacht haben, ist es an der Zeit, sich dem Text zuzuwenden. Absätze in HTML werden mit dem Tag <p> erstellt. Es ist wie in deinen Lieblings-Texteditoren, wo du "Enter" drückst, um einen neuen Absatz zu beginnen. Hier ist ein Beispiel:
<p>Dies ist der erste Absatz auf unserer Seite, und er erzählt dir etwas mehr über unser Thema.</p>
<p>Und dies ist bereits der zweite Absatz, weil „der erste“ manchmal nicht ausreicht, um alle Gedanken zu vermitteln!</p>
Textblöcke
Vergiss nicht <span> und <div>. <span> ist dein einfacher Helfer zum Stylen von Textfragmenten im HTML-Code, während <div> der wahre Champion für das Erstellen von Blöcken und Containern ist.
<div>Dieser Block kann viele interessante Inhalte enthalten!</div>
<span>Und dieser Text kann farblich oder schriftartlich hervorgehoben werden.</span>
Fetter Text
Fetter Text — <b>: Der Tag <b> hebt den Text fett hervor. Dieser Tag wird oft verwendet, um die Wichtigkeit einzelner Wörter oder Phrasen zu betonen.
<p>Dieser <b>wichtige Text</b> zieht Aufmerksamkeit auf sich.</p>
Kursiver Text
Kursiv — <i>: Der Tag <i> macht den Text kursiv. Er eignet sich zum Hervorheben von Zitaten, fremden Worten oder anderen Elementen, die betont werden sollen.
<p>Dies ist kursiver Text: <i>Beispiel für kursiven Text</i>.</p>
3. Bilder
Um Bilder auf der Seite hinzuzufügen, verwendet man den Tag <img>. Dieser Tag ist ein Einzeltag, und um ihn zu verwenden, muss der Bildpfad mit dem Attribut src angegeben werden. Es ist auch wichtig, eine Bildbeschreibung mit dem Attribut alt (alternativer Text) hinzuzufügen, damit Benutzer mit Einschränkungen oder bei Problemen mit dem Laden des Bildes verstehen können, was gezeigt werden sollte.
<img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.codegym.cc/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg"" alt="Bildbeschreibung">
<img src="image.jpg" alt="Bildbeschreibung">
Weitere nützliche Attribute von <img>:
-
width— Breite des Bildes (z. B.width="200"). -
height— Höhe des Bildes (z. B.height="150").
Beispiel mit den Attributen width und height:
<img data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.codegym.cc/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="Bildbeschreibung" width="200" height="150">
<img src="http://google.com/image.jpg" alt="Bildbeschreibung" width="200" height="150">
4. Hyperlinks
Links sind ein wichtiger Bestandteil von HTML, der den Benutzern ermöglicht, zu anderen Seiten oder Ressourcen zu navigieren. Links werden mit dem Tag <a> erstellt, wobei das Schlüsselattribut href die Ziel-URL angibt. 'A' steht hier für 'anchor' (Anker), da der Link sich an einem bestimmten Punkt in der Dokumenthierarchie verdocken muss:
GO TO FULL VERSION