HTML (Hypertext Markup Language) ist der Code, der benötigt wird, um Webinhalte zu erstellen und ihnen Bedeutung und Zweck zu geben. Ihre Inhalte können beispielsweise Absätze und Grafiken sowie Bilder und Tabellen enthalten. Wie der Titel dieses Artikels verspricht, soll dieser Artikel Ihnen ein grundlegendes Verständnis dafür vermitteln, wie HTML verwendet wird.
HTML ist eigentlich keine Programmiersprache, sondern eine Auszeichnungssprache, die zum Erstellen Ihrer Website entwickelt wurde. Die Sprache besteht aus einer Reihe von Elementen, die als Tags bezeichnet werden und die Sie in verschiedenen Teilen Ihres Inhalts platzieren können, um ihm einen bestimmten Zweck zu geben. Sie können damit beispielsweise Text oder Bilder in Links umwandeln.
Nehmen wir als Beispiel folgendes:
Mein Hund ist sehr frech.
Wenn wir möchten, dass der Satz in einem eigenen Absatz steht, können wir mit <p> angeben, dass es sich um einen Absatz handelt:
<p>Mein Hund ist sehr frech. </p>
Aufbau von HTML-Elementen
Schauen wir uns die Struktur unseres Absatzelements genauer an.
(Inhalt=Inhalt, Element=HTML-Element)
Die Hauptbestandteile unserer Elemente sind:
Start-Tag: Es besteht aus dem Elementnamen (in diesem Fall das p des Absatzes), eingeschlossen in zwei spitze Klammern. Dies gibt an, wo das Element beginnt – in diesem Fall am Anfang unseres Absatzes.
Inhalt: Dies ist der Inhalt des Elements, in diesem Fall nur einfacher Text.
Schließendes Tag: Dieses sieht genauso aus wie das öffnende Tag, mit Ausnahme des zusätzlichen Schrägstrichs vor dem Elementnamen. Dieses Tag befindet sich am Ende des Elements – in diesem Fall am Ende des Absatzes.
Elemente: Start-Tags, Inhalts- und End-Tags bilden zusammen ein Element.
Elemente können auch wie folgt Attribute enthalten:
Diese Eigenschaften enthalten zusätzliche Informationen über das Element, die nicht als eigentlicher Inhalt angezeigt werden. In diesem Fall ermöglicht dieses Attribut, ihm einen identifizierenden Namen zu geben, der später zur Kennzeichnung des Elements verwendet werden kann, z. B. Schriftart und Farbe angeben.
In unserem Beispiel lautet der Name des Attributs class und editor-note ist der dem Attribut zugeordnete Wert.
Eigenschaften sollten immer haben:
Das Leerzeichen zwischen ihm und dem Elementnamen (oder dem vorherigen Attribut, wenn es mehr als eines gibt).
Eigenschaftsname gefolgt von einem Gleichheitszeichen
Anführungszeichen um den Wert. (zB “Anmerkung der Redaktion”)
verschachtelte Elemente
Sie können einzelne Elemente ineinander verschachteln. Wenn wir also betonen wollen, dass unsere Katze sehr frech ist, können wir einzelne Wörter in <strong>-Elemente packen.
<p>Meine Katze ist <strong>sehr</strong> frech. </p>
Das folgende Beispiel ist falsch, da die Elemente nicht verschachtelt, sondern verknüpft sind. Das letzte zu öffnende Element muss auch zuerst geschlossen werden.
<p>Meine Katze<strong> ist sehr frech. </p></strong>
Es ist wie bei einer Kiste: Wenn die kleine Kiste in der großen Kiste ist, kann man nicht zuerst den großen Deckel und dann den kleinen Deckel schließen. Einzelne Elemente dürfen sich nicht überschneiden, sie können nur ineinander liegen.
leeres Projekt
Einige Elemente haben keinen Inhalt, diese Elemente werden leere Elemente genannt. Zum Beispiel das <img>-Element, das wir bereits in unserer HTML-Datei haben:
<img src=”images/firefox-icon.png” alt=”mein Testbild”>
Dazu gehören zwei Attribute, aber kein schließendes </img>-Tag und kein Inhalt im Element. Das <img>-Tag benötigt keinen Inhalt, um wirksam zu sein. Es bettet das Bild an der entsprechenden Stelle in die HTML-Seite ein.
Struktur von HTML-Dokumenten
Da Sie nun wissen, wie jedes Element in einer HTML-Datei organisiert ist, macht ein Element allein nicht viel. Sehen wir uns nun an, wie einzelne Elemente zu einer HTML-Seite kombiniert werden können. Sehen wir uns noch einmal den Code an, den wir zuvor in die Datei index.html eingefügt haben (die wir im Artikel Arbeiten mit Dateien erstellt haben):
<!DOCTYPE html>
<html>
<Kopfzeile>
<metacharset=”utf-8″>
<title>Meine Testseite</title>
</head>
<text>
<img src=”images/firefox-icon.png” alt=”mein Testbild”>
</text>
</html>
Hier haben wir:
<!DOCTYPE html> — Der Dokumenttyp. Als HTML noch jung war (1991/92), sollte es Browsern mitteilen, welche Regeln sie befolgen sollten. Dies kann z.B. sein, dass Browser automatisch nach Fehlern und anderen nützlichen Dingen suchen können. Wie auch immer, heutzutage kümmert sich niemand wirklich darum, aber es muss da sein, damit alles funktioniert.
<html></html> – Das <html>-Element. Dieses Element enthält alles. Manchmal wird es auch Wurzelelement genannt
<head></head> — Das <head>-Element. Dieses Element enthält alles, was nicht auf der Seite angezeigt wird. Dazu gehören Informationen wie Schlüsselwörter, Seitenbeschreibungen, die in Suchmaschinen erscheinen, CSS zur Gestaltung unserer Inhalte und mehr.
<body></body> — Das <body>-Element. Dazu gehört alles, was ein Betrachter sieht, wenn er eine Website besucht, seien es Texte, Bilder, Videos, Audiodateien usw.
<meta charset=”utf-8″> — Dieses Element setzt die Zeichenkodierung des Dokuments auf utf-8, was die Buchstaben fast aller menschlichen Sprachen enthält. Andernfalls werden Umlaute wie Ä und Ü nicht korrekt angezeigt.
<title></title> – Dies legt den Titel der Seite fest, die auf der Registerkarte angezeigt wird. Es wird auch verwendet, wenn jemand Lesezeichen erstellt.
Bild
Schauen wir uns nun noch einmal unser Bildelement an:
<img src=”images/firefox-icon.png” alt=”mein Testbild”>
Wie wir bereits gesagt haben, ist das Bild in die Seite eingebettet, auf der wir erscheinen. Dies geschieht mithilfe des src-Attributs, das den Pfad zu unserem Bild enthält.
Aber wir haben auch einen alt (alternative) Befehl, der etwas Text anzeigt, wenn das Bild nicht angezeigt werden kann. Das ist für:
Sehbehinderung. Diese haben normalerweise Programme, die alternativen Text lesen.
Ein Fehler im Code bedeutet, dass das Bild nicht angezeigt werden kann. Ändern Sie beispielsweise den Code bei src und speichern Sie. Öffnen Sie dann das Dokument mit einem Browser. Anstelle des Bildes sollte nun folgende Meldung angezeigt werden:
Dieser alternative Satz sollte dem Leser einige Informationen liefern, um zu visualisieren, was auf dem Bild zu sehen ist. Also dieses Beispiel ist nicht so gut. Eine bessere Beschreibung wäre “Firefox-Logo: ein flammender Fuchs, der die Erde umkreist”.
Schreiben Sie jetzt besseren Alt-Text für Ihre Bilder.
Hinweis: Erfahren Sie mehr über Barrierefreiheit auf der MDN-Landingpage für Barrierefreiheit.
Textdarstellung
Diese Lektion behandelt einige der HTML-Grundlagen, die zum Rendern von Text erforderlich sind.
Schlagzeilen
Mit dem Titelelement können Sie einen bestimmten Inhaltsbereich als Titel deklarieren. So wie ein Buch Haupt- und Kapitelüberschriften haben kann, können HTML-Dokumente Haupt- und Zusatzüberschriften haben.
HTML hat 6 Überschriftentypen, normalerweise werden nur 3-4 verwendet: <h1>–<h6>
<h1>Meine Hauptüberschrift</h1>
<h2>Mein Untertitel der obersten Ebene</h2>
<h3>Mein Untertitel</h3>
<h4>Mein anderer Untertitel</h4>
Versuchen Sie nun, Ihrer HTML-Seite oberhalb des <img>-Elements einen passenden Titel hinzuzufügen.
Hoher Absatz
Wie oben erwähnt, wird <p> verwendet, um Absätze zu erstellen. Sie werden diese häufig verwenden, um Text zu erstellen.
<p>Dies ist ein Absatz (p ist die Abkürzung für “Absatz”)</p>
Fügen Sie in einem oder mehreren Absätzen unter dem <img> (Bildelement) einen Beispieltext ein (Sie sollten sich bei der Planung Ihrer Seiten Gedanken über den Textinhalt gemacht haben: Wie soll Ihre Seite aussehen?).
aufführen
Viele Webseiten enthalten Listen, daher stellt HTML Elemente für sie bereit. Die Identität einer Liste besteht immer aus zwei Elementen. Es gibt einen Unterschied zwischen einer geordneten Liste und einer ungeordneten Liste.
Eine ungeordnete Liste ist eine Liste, in der die Reihenfolge der Artikel keine Rolle spielt, wie z. B. eine Einkaufsliste. Diese werden in ein <ul>-Element eingeschlossen.
Verwenden Sie geordnete Listen, wenn die Reihenfolge der Zutaten wichtig ist, z. B. in Rezepten. Diese werden in ein <ol>-Element eingeschlossen.
Jedes Element in der Liste wird einzeln in ein Listenelement <li> eingeschlossen.
Wenn wir zum Beispiel jeden Teil dieses Absatzes in eine richtige Liste umwandeln wollten:
<p>Beiit-jobs24.com sind wir eine globale Gemeinschaft von Entwicklern, Innovatoren und Erstellern, die zusammenarbeiten…</p>
Können wir das machen:
<p>Bei it-jobs24.com sind wir eine globale Gemeinschaft</p>
<ul>
<li>Entwickler</li>
<li>Visionäre Denker</li>
<li>Ersteller</li>
</ul>
<p>Wer hart zusammenarbeitet…</p>
Versuchen Sie, Ihrer Beispielseite eine geordnete oder unsortierte Liste hinzuzufügen.
Links sind sehr wichtig – sie machen das Internet zu einem Netzwerk. Um einen Link zu implementieren, müssen wir ein einfaches Element verwenden – <a>. a ist die Abkürzung für “Anker”.
So konvertieren Sie Text in einem Absatz in einen Link:
Finden Sie einen Text. In unserem Beispiel verwenden wir “it-jobs24.com Manifesto”.
Betten Sie Text in ein <a>-Element ein:
<a>it-jobs24.com-Manifest</a>
Geben Sie dem <a>-Element ein href-Attribut:
<a href=””>it-jobs24.com-Manifest</a>
Geben Sie für den Wert des Attributs die URL ein, auf die Sie verlinken möchten:
<a href=”https://www.it-jobs24.com/it-jobs24.com/”>it-jobs24.com-Manifest</a>
Wenn Sie https:// oder http:// (als Protokoll bezeichnet) vergessen, erhalten Sie möglicherweise seltsame Ergebnisse. Überprüfen Sie daher nach dem Einrichten des Links, ob es wie erwartet funktioniert.
Für Eigenschaftsnamen mag href etwas seltsam klingen. Wenn Sie sich nicht an den Namen erinnern können, denken Sie daran, dass er die Abkürzung für Hypertext Citation ist.
Falls noch nicht geschehen, fügen Sie jetzt einen Link zu Ihrer Seite hinzu.
