Embedded Files
Einführung in HTML
Einführung in HTML
Was genau ist HTML?
Was genau ist HTML?
HTML verleiht dem Inhalt einer Webseite, beispielsweise Bildern, Texten und Videos, Struktur. Klicken Sie mit der rechten Maustaste auf eine beliebige Seite im Internet und wählen Sie "Untersuchen". Sie sehen HTML in einem Fenster auf dem Bildschirm.
HTML-Anatomie
HTML-Anatomie
HTML besteht aus Elementen. Diese Elemente strukturieren die Webseite und definieren ihren Inhalt.
Das Bild zeigt ein HTML-Absatzelement. Dieses besteht aus:
öffnenden Tag (<p>)
Inhalt ("Hallo Welt!-Text")
schließendes Tag (</p>)
Ein Tag und der Inhalt dazwischen werden als HTML-Element bezeichnet. Es gibt viele Tags, die wir verwenden können, um Text und andere Arten von Inhalten, wie Bilder zu organisieren und anzuzeigen.
Gehen wir kurz jeden Teil des abgebildeten Elements durch:
HTML - Element (oder einfach Element)-eine Inhaltseinheit in einem HTML - Dokument, die aus HTML-Tags und dem darin enthaltenen Text oder Medium besteht.
HTML-Tag umgeben von einer öffnenden (<) und einer schließenden (>) spitzen Klammer.
Öffnendes Tag-das erste HTML-Tag mit dem ein HTML-Element beginnt. Der Tag-Typ ist von öffnenden und schließenden spitzen Klammern umgeben.
Inhalt-Die Informationen (Text oder andere Elemente) die zwischen den öffnenden und schließenden Tags eines HTML-Elements enthalten sind.
Schließendes Tag-das zweite HTML-Tag das zum Beenden eines HTML-Elements verwendet wird. Schließende Tags enthalten einen Schrägstrich (/) direkt nach der linken spitzen Klammer.
Der Körper (<body>)
Der Körper (<body>)
Eines der wichtigsten HTML-Elemente die wir zum Erstellen einer Webseite verwenden ist das Body-Element. Nur Inhalte innerhalb der öffnenden und schließenden Body-Tags können auf dem Bildschirm angezeigt werden.
Sobald die Datei einen Textkörper hat, können diesem viele verschiedene Arten von Inhalten hinzugefügt werden, darunter Text, Bilder und Schaltflächen.
Betrachten wir ein anderes Beispiel, bei dem einige neue Tags verwendet werden:
In diesem Beispiel ist das Element <body> das übergeordnete des <div> Elements. Sowohl das <h1> als auch das <p> Element sind untergeordnete Elemente des <div> Elements. Da sich die Elemente <h1> und <p> auf derselben Ebene befinden, werden sie als Geschwister betrachtet und sind beide Enkel des <body> Elements.
Das Verständigen der HTML-Hierachie ist wichtig, da untergeordnete Elemente Verhalten und Stil von Ihrem übergeordneten Element erben können. Sie erfahren mehr über die Hierachie von Webseiten, wenn Sie sich mit CSS befassen.
HTML - Struktur
HTML - Struktur
HTML ist als Sammlung von Stammbaumbeziehungen organisiert. Wie im vorherigen Bild ersichtlich haben wir <p> Tags innerhalb von <body> Tags platziert. Wenn ein Element in einem anderen Element enthalten ist, wird es als untergeordnetes Element von diesem Elements betrachtet. Das untergeordnete Element wird im übergeordneten Element als verschachtelt bezeichnet.
HTML ist als Sammlung von Stammbaumbeziehungen organisiert. Wie im vorherigen Bild ersichtlich haben wir <p> Tags innerhalb von <body> Tags platziert. Wenn ein Element in einem anderen Element enthalten ist, wird es als untergeordnetes Element von diesem Elements betrachtet. Das untergeordnete Element wird im übergeordneten Element als verschachtelt bezeichnet.
Im obigen Beispiel ist das <p> Element im <body> Element verschachtelt. Das <p> Element wird als untergeordnetes Element des <body> Elements betrachtet und das <body> Element wird als übergeordnetes Element betrachtet. Man kann auch sehen, dass wir zur besseren Lesbarkeit zwei Einrückungen hinzugefügt haben (mithilfe der "Tab" Taste) was viele Programme wie Visual Studio Code automatisch nach dem drücken der "Enter" Taste machen.
Da es mehrere Verschachtelungsebenen geben kann, lässt sich diese Analogie auf Enkel, Urenkel, und darüber hinaus erweitern. Die Beziehung zwischen Elementen und ihren Vorgänger- und Nachfolgerelementen wird als Hierachie bezeichnet.
Überschriften
Überschriften
(<h1>-<h6>)
(<h1>-<h6>)
Überschriften in HTML ähneln Überschriften in anderen Medientypen. In Zeitungen werden beispielsweise große Überschriften verwendet um die Aufmerksamkeit eines Lesers zu erregen. Manchmal werden Überschriften auch verwendet, um Inhalte zu beschreiben, beispielsweise den Titel eines Films oder eines Lehrartikels.
HTML folgt einem ähnlichen Muster. In HTML gibt es sechs verschiedene Überschriften oder Überschriftenelemente. Überschriften können für verschiedene Zwecke verwendet werden, beispielsweise zum Betiteln von Abschnitten, Artikeln oder anderen Inhaltsformen.
Nachfolgend sehen Sie die Liste der in HTML verfügbaren Überschriftenelemente. Sie sind in absteigender Reihenfolge angeordnet:
<h1> wird für Hauptüberschriften verwendet. Alle anderen kleineren Überschriften werden für Unterüberschriften verwendet.
<h2>
<h3>
<h4>
<h5>
<h6>
Der folgende Beispielcode verwendet eine Überschrift, die die Aufmerksamkeit des Lesers fesseln soll. Dabei wird die größte verfügbare Überschrift verwendet, das Hauptüberschriftselement:
Divs (<div>)
Divs (<div>)
Eines der beliebtesten Elemente in HTML ist das <div> Element. <div> ist die Abkürzung für "Division" oder ein Container, der die Seite in Abschnitte unterteilt. Diese Abschnitte sind sehr nützlich, um Elemente in Ihrem HTML Code zu gruppieren.
<div>s haben nicht automatisch eine visuelle Darstellung, sind aber sehr nützlich, wenn wir benutzerdefinierte Stile auf unsere HTML-Elemente anwenden möchten. <div>s ermöglichen es uns, HTML-Elemente zu gruppieren, um für alle darin enthaltenen HTML-Elemente die gleichen Stile anzuwenden. Wir können das <div> Element auch als Ganzes stylen. Dazu verwendet man CSS was später erklärt wird.
<div>s können beliebigen Text oder andere HTML-Elemente enthalten, wie z.B. Links, Bilder oder Videos. Denken Sie daran, beim Verschachteln von Elementen in <div>s zur besseren Lesbarkeit immer zwei Einrückungen hinzuzufügen.
Attribute
Attribute
Wenn wir das Tag eines Elements erweitern möchten können wir dies mithilfe eines Attributs tun. Attribute sind Inhalte, die dem öffnenden Tag eines Elements hinzugefügt werden und auf verschiedene Weise verwendet werden können. Von der Bereitstellung von Informationen bis hin zu Änderung des Stils. Attribute bestehen aus den folgenden zwei Teilen:
Der Name des Attributs
Der Wert des Attributs
Ein häufig verwendetes Attribut ist <id>. Wir können das <id> Attribut verwenden um verschiedene Inhalte anzugeben und es ist sehr hilfreich, wenn Sie ein Element mehr als einmal verwenden. <id>s haben in HTML verschiedene Zwecke, aber jetzt schauen wir uns an wie sie uns helfen können, Inhalte auf unserer Seite zu identifizieren.
Wenn wir <id> zu einem <div> hinzufügen, platzieren wir es im öffnenden Tag:
Text anzeigen
Text anzeigen
Wenn Sie Text in HTML anzeigen möchten, können Sie einen Absatz oder einen Bereich verwenden:
Absätze (<p>) enthalten einen Block mit einfachen Text.
<span> enthält kurze Textstücke oder anderes HTML. Sie werden verwendet um kleine Inhaltsstücke zu trennen die sich in derselben Zeile wie anderer Inhalt befinden.
Sehen Sie sich unten jedes dieser Elemente in Aktion an:
Im obigen Beispiel gibt es zwei verschiedene <div>. Das zweite <div> enthält ein <p> mit <span>Selbstfahrende Autos</span>. Dieses <span> Element trennt "Selbstfahrende Autos" vom Rest des Textes im Absatz.
Am besten verwenden Sie ein <span> Element, wenn Sie einen bestimmten Inhalt ansprechen möchten, der in derselben Zeile wie anderer Text steht. Wenn Sie Ihren Inhalt in Blöcken unterteilen möchten, verwenden Sie besser ein <div>.
Text formatieren
Text formatieren
Sie können Text auch mit HTML - Tags formatieren. Das <em> Tag hebt Text hervor, während das <strong> Tag wichtigen Text hervorhebt.
Wenn Sie später mit der Gestaltung von Webseiten beginnen entscheiden Sie wie Browser den Inhalt mit <em> und <strong> Tags anzeigen sollen. Browser verfügen über integrierte Stylesheets, die diese Tags im Allgemeinen folgendermaßen gestalten:
Das <em> Tag wird grundsätzlich als kursive Hervorhebung wiedergegeben.
Das <strong> Tag wird im Allgemeinen als fette Hervorhebung wiedergegeben.
Sehen Sie sich jeden Stil in Aktion an:
In diesem Beispiel werden die Tags <strong> und <em> verwendet, um den Text hervorzuheben und Folgendes zu erzielen:
In Europa gibt es 44 Länder, in denen mehr als 700 Millionen Menschen leben.
Wie wir sehen können, ist "In Europa" fett gedruckt und "mehr als" kursiv.
Zeilenumbrüche (<br>)
Zeilenumbrüche (<br>)
Der Abstand zwischen Code in einer HTML - Datei hat keinen Einfluss auf die Positionierung von Elementen im Browser. Wenn Sie den Abstand im Browser ändern möchten, können Sie das Zeilenumbruchelement <br> von HTML verwenden.
Das Zeilenumbruchelement ist einzigartig, da es nur aus einem Starttag besteht. Sie können es überall in Ihrem HTML-Code verwenden und im Browser wird ein Zeilenumbruch angezeigt.
Der Code im obigen Beispiel führt zu einer Ausgabe, die wie folgt aussieht:
In Europa gibt es 44 Länder,
in denen mehr als
700 Millionen Menschen leben.
Ungeordnete Listen
Ungeordnete Listen
(<ul></ul>)
(<ul></ul>)
Zusätzlich zur Organisation von Text in Absatzform können Sie Inhalte auch in einer übersichtlichen Liste anzeigen.
In HTML können Sie ein ungeordnetes Listen - Tag (<ul>) verwenden, um eine Liste von Elementen ohne bestimmte Reihenfolge zu erstellen. Eine ungeordnete Liste zeigt einzelne Listenelemente mit einem Aufzählungspunkt.
Das <ul> Element sollte keinen Rohtext enthalten und formatiert Rohtext nicht automatisch in eine ungeordnete Liste von Elementen. Einzelne Listenelemente müssen mithilfe des <li> Tags zur ungeordneten Liste hinzugefügt werden. Das Listenelement bzw. <li> Tag wird verwendet um ein Element in einer Liste zu beschreiben.
Im obigen Beispiel wurde die Liste mithilfe des <ul> Tags erstellt und alle einzelnen Listenelemente mithlife von <li> Tags hinzugefügt.
Die Ausgabe sieht folgedermaßen aus:
Limes
Tortillas
Huhn
Sortierte Listen
Sortierte Listen
(<ol></ol>)
(<ol></ol>)
Sortierte Listen (<ol>) sind wie ungeordnete Listen, außer dass jedes Listenelement rummeriert ist. Sie sind nützlich, wenn Sie verschiedene Schritte in einem Prozess auflisten oder Elemente vom ersten bis zum letzten ordnen müssen.
Mit dem Tag können Sie die geordnete Liste erstellen <ol> und anschließend einzelne Listenelemente mithilfe von <li> Tags zur Liste hinzufügen.
Die Ausgabe sieht folgendermaßen aus:
Preheat the oven to 350 degrees.
Mix whole wheat flour, bakingsoda, and salt.
Cream the butter, sugar in separate bowl.
Add eggs and vanilla extract to bowl.
Jetzt haben wir alles über die grundlegende HTML Struktur gelernt.
Machen Sie eine Pause von mindestens 10 Minuten zwischen den einzelnen Themen um die Augen zu schonen (ich empfehle auch ein paar Mal in die Ferne zu sehen da man dann wieder fokussierter auf den Bildschirm schauen kann). So kann man gut gegen das Computer Vision Syndrom vorbeugen.
Trinken Sie auch ausreichend da das Gehirn ausreichend an Flüssigkeit benötigt!
Page updated
Google Sites
Report abuse