HTML-Tutorial für Anfänger

Der ultimative Leitfaden

Artem Minajew
Aktualisiert: 4. Oktober 2023
15 min gelesen
FirstSiteGuide wird von unseren Lesern unterstützt. Wenn Sie über Links auf unserer Website einkaufen, erhalten wir möglicherweise eine Provision. Weiterlesen
HTML-Tutorial für Anfänger

Wenn Sie Webmaster werden und lernen möchten wie eine Website zu erstellen, finden Sie die Aussicht, sich mit HTML auseinanderzusetzen, möglicherweise ziemlich entmutigend.

Dies lässt sich jedoch nicht vermeiden, da die überwiegende Mehrheit der von Ihnen besuchten Website-Landingpages mithilfe von HTML-Elementen geschrieben und strukturiert wurde. Tatsächlich ist HTML jetzt Wird von mehr als 74 % aller bekannten Websites verwendet, während diese Sprache auch dazu beiträgt, alles zu verbessern, vom Design Ihrer Website bis hin zur Qualität der darin enthaltenen Inhalte.

In diesem Leitfaden erkunden wir die Grundprinzipien von HTML und seine möglichen Anwendungen, bevor wir uns Beispiele für die einzelnen Elemente ansehen, die Sie beim Codieren Ihrer Website verwenden.

Was ist HTML?

In einfachen Worten, HTML stellt die Standard-Auszeichnungssprache dar zum Erstellen von Webseiten online. Es steht für Hyper Text Markup Language und seine wichtigste Funktion besteht darin, die Struktur, das Layout und die Präsentation einzelner Zielseiten festzulegen. Obwohl Webbrowser die HTML-Sprache nicht direkt anzeigen, spielt sie eine entscheidende Rolle bei der Erstellung einer sichtbaren, zugänglichen und benutzerfreundlichen Website.

HTML basiert außerdem auf einer Reihe einzelner Elemente, die nach und nach Webseiten aufbauen, die Darstellung von Inhalten strukturieren und Ihre Website zum Leben erwecken. Diese Elemente werden erstellt und in „Tags“ enthalten, die alternative Inhalte wie Überschriften, Absätze und ähnliche Beispiele definieren.

Wir werden diese Elemente und ihre Konstruktion im Folgenden genauer untersuchen und gleichzeitig untersuchen, wie sie personalisiert werden können, um Ihrer Website Farbe, Links und variable Typografie hinzuzufügen.

Die Zeitleiste der Webtechnologien:

  • 1991 – HTML
  • 1994 – HTML2
  • 1996 – CSS1 + JavaScript
  • 1997 – HTML4
  • 1998 – CSS2
  • 2000 – XHTML1
  • 2002 – Tischloses Webdesign
  • 2005 – AJAX
  • 2009 – HTML5

Wo wird HTML verwendet?

Beliebte Websites mit HTML:

  • Wikipedia.org
  • Google.com
  • YouTube.com
  • Facebook.com
  • Yahoo.com
  • Baidu.com
  • Reddit.com

Wie wir sehen, ist die häufigste Anwendung von HTML die Gestaltung der einzelnen Landingpages, aus denen Ihre Website besteht. Dies ist nicht die einzige Anwendung des beliebten Codierungstools. Wenn Sie jedoch die zusätzlichen Verwendungsmöglichkeiten verstehen, können Sie als neuer Webmaster die Sprache optimal nutzen. Hier sind einige der weiteren Möglichkeiten, wie HTML angewendet werden kann:

  • Erstellen Sie anpassbare Elemente innerhalb einer vorhandenen Seite. Wenn Sie beabsichtigen, dies zuzulassen Kommentare zu Blogbeiträgen oder die Veröffentlichung von nutzergenerierten Inhalten auf Ihrer Website, können Sie HTML-Codefragmente verwenden, um dies zu ermöglichen. Mit diesen Elementen können Benutzer Schlüsselwörter hervorheben, Links einbetten und Kommentare formatieren, abhängig von den Einschränkungen, die Sie als Moderator festlegen.
  • Erstellen Sie zusätzliche Inhalte für E-Mails. E-Mails verwenden auch HTML als Sprache für Rich-Text-Nachrichten, die Links, Text und eine Vielzahl anderer Elemente enthalten, die im Klartext allein nicht enthalten sein können. Wenn Sie also ein E-Book mit Bezug zu Ihrer Website per E-Mail teilen möchten, können Sie HTML verwenden, um die Wirkung Ihrer Nachricht zu optimieren.
  • Verstehen Sie Offline-Hilfedokumente, die auf Ihrem Computer installiert sind. Interessanterweise wird HTML als Format für computerbasierte Hilfedokumente verwendet, auf die offline zugegriffen werden kann. Grundlegende HTML-Kenntnisse können Ihnen daher helfen, Probleme mit Ihrer Hardware zu verstehen und schneller zu lösen, was wiederum dazu führen kann, dass Sie Ihre Website schneller wiederherstellen können, wenn sie offline ist.

HTML-Seitenstruktur

Bevor Sie eine HTML-Seite erstellen können, müssen die Grundlagen vorhanden sein.

Typischerweise besteht eine Seite aus drei Strukturelementen:

  1. Header: Der Header enthält Inhalte, die für alle Seiten Ihrer Website relevant sind. wie zum Beispiel ein Logo oder Website-Name und ein Navigationssystem. Die Kopfzeile ist auf jeder Seite zu sehen.
  2. Der Hauptkörper: Dies nimmt den größten Bereich auf einer Webseite ein. Es enthält Inhalte, die für die angezeigte Seite spezifisch sind.
  3. Footer: Der Inhalt der Fußzeile umfasst normalerweise Kontaktinformationen, eine Lieferadresse oder rechtliche Hinweise. Wie die Kopfzeile erscheint auch die Fußzeile auf jeder Seite, ist jedoch unten positioniert.

So sehen diese grundlegenden Strukturelemente aus, wenn sie zusammenkommen:

Sie können hier Text oder Code einfügen, z. B
Google Analytics-Tracking-Code für
Beispiel.

Der Hauptteil Ihrer Seite lautet
Hier. Füllen Sie es mit Text und Bildern!

Hier ist ein weiteres Beispiel für die Verwendung von Header-Tags und dem Absatz-Tag, um Inhalte ästhetisch zu strukturieren. Außerdem haben wir unterhalb des Hauptteils einer Seite ein Fußzeilen-Tag für Inhalte eingefügt:

Sie können hier Text oder Code einfügen, z. B
Google Analytics-Tracking-Code für
Beispiel.

Meine erste Überschrift

Willkommen auf meiner Website!

Kontaktinformationen könnten hier stehen

HTML-Tags

Ausgangspunkt jedes HTML-Codes sind einzelne Tags, mit denen Sie alle wichtigen Elemente erstellen und bei der Strukturierung Ihrer Webseiten helfen können.

Führende HTML-Tags-Technologien Im Web teilen

  • HTML5-Canvas-Tag – 0.27 %  
  • HTML5-Audio-Tag – 0.29 %  
  • HTML5-Video-Tag – 0.69 %
  • HTML5 SVG-Tag – 3.1 %  
  • HTML5-Einbettungs-Tag – 6.54 %  

Im Folgenden werfen wir einen Blick auf die gängigsten Tags, bevor wir untersuchen, wie sie zur Generierung spezifischer On-Page-Elemente genutzt werden können:

Überschriften-Tags

Alle Online-Dokumente, einschließlich Webseiten, beginnen mit einer Überschrift. Diese werden unter Verwendung von HTML-Tags erstellt, wobei die Sprache derzeit bis zu sechs Elemente unterschiedlicher Größe zulässt, die es Ihnen auch ermöglichen, Ihren Inhalt mit zusätzlichen Titeln, Untertiteln und hervorgehobenen fetten Textzeilen zu strukturieren. Um Ihre Überschrift zu beginnen, stellen Sie dem entsprechenden Text einfach das voran , , , , oder Tag je nach gewünschter Größe.

Anschließend müssen Sie am Ende der Überschrift ein schließendes Tag einfügen, um den Text zu kapseln. Dieser wird im HTML-Format wie folgt angezeigt:

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

Sobald dies bestätigt ist, wird dies auf der Landingpage Ihrer Website wie folgt aussehen:

Dies ist Überschrift 1

Dies ist Überschrift 2

Dies ist Überschrift 3

Dies ist Überschrift 4

Dies ist Überschrift 5
Dies ist Überschrift 6

Deutlich zu erkennen sind hier die unterschiedlichen Größen der Variablenüberschriften sowie die Tatsache, dass der Browser jeweils eine Zeile vor und nach der Überschrift einfügt. Sie werden auch feststellen, dass das schließende Tag am Ende des Überschriftentexts eine etwas andere Ästhetik hat, wir werden dies jedoch im folgenden Kapitel behandeln, da wir Tags verwenden möchten, um bestimmte Elemente zu definieren.

Absatz-Tags

Ein ähnliches Prinzip wird auf beginnende Absatz-Tags angewendet, die durch dargestellt werden . Dadurch können Sie Ihre Inhalte strukturieren und in relevante Absätze unterteilen, was wiederum zu einem einfacheren und nahtloseren Leseerlebnis führt. Noch einmal, die Das Tag sollte am Anfang des relevanten Textes platziert werden, bevor am Ende das alternative schließende Tag angewendet wird, um den Effekt zu vervollständigen. Im Gegensatz zu Überschriften-Tags gibt es jedoch keine numerischen Tags, die die Größe des im Absatz enthaltenen Textes ändern können.

Beispielsweise:

<p>Your First Paragraph</p>

<p>Your Second Paragraph</p>

<p>Your Third Paragraph</p>

Außerhalb des HTML-Formats wird der Text auf Ihrer fertigen Webseite dadurch wie folgt aufgeteilt:

Ihr erster Absatz

Ihr zweiter Absatz

Ihr dritter Absatz

Zeilenumbruch-Tags

Die ersten Beispiele stellen die grundlegendsten HTML-Tags dar, es gibt jedoch auch andere, die ein anderes Format und alternative Schlussformen verwenden. Nehmen Sie zum Beispiel Zeilenumbrüche, die eine Unterscheidung schaffen, an der Textzeilen unterbrochen und in der folgenden Zeile fortgesetzt werden. Im HTML-Bereich gibt es einen wesentlichen Unterschied zwischen Zeilenumbrüchen und Absätzen, denn während es sich bei letzteren um Standardblockelemente handelt, die Text enthalten, sorgt ersterer für eine Trennung innerhalb eines bestehenden Element.

Aus diesem Grund stellen Zeilenumbrüche in HTML ein leeres Element dar und werden daher weder durch öffnende noch schließende Tags definiert. Stattdessen werden sie durch die dargestellt Tag, der in bestehende eingefügt werden kann Elemente, um den Text aufzuteilen und möglicherweise wichtige Informationen hervorzuheben. Das einzelne Leerzeichen zwischen dem Zeichen und der Schrägstrich ist entscheidend, da das Tag sonst im HTML-Format nicht erkennbar ist.

Hier ist ein Beispiel:  

Guten Morgen
Vielen Dank für Ihre Anfrage. Wir werden uns mit Ihnen in Verbindung setzen, wenn wir weitere Fragen haben.
Beste grüße
Herr Jones

Nach der Anwendung wird der Text wie folgt aufgeteilt:

Guten Morgen,

Vielen Dank für Ihre Anfrage. Wir werden uns mit Ihnen in Verbindung setzen, wenn wir weitere Fragen haben.

Freundliche Grüße

Mr. Jones

Wie Sie sehen, können Sie innerhalb eines vorhandenen Absatzelements beliebig oft Zeilenumbrüche anwenden, sofern diese einen Mehrwert schaffen und die Informationen leichter verständlich machen. Sie werden auch sehen, dass die Tags für den Anfang und das Ende des Absatzes unverändert bleiben und Zeilenumbruch-Tags verwendet werden, um das Layout des darin enthaltenen Textes zu ändern.

Dies ist eines der Beispiele dafür, wie HTML-Tags zum Ändern vorhandener Elemente verwendet werden können, was eine Schlüsselrolle bei der Definition des visuellen Layouts Ihrer Webseiten und Inhalte spielt.

Horizontale Linien

Ebenso gibt es andere Tags, die innerhalb verwendet werden können Element oder um Textkörper auf Ihrer Webseite weiter zu trennen. Eines der am weitesten verbreiteten ist das -Tag, mit dessen Hilfe ein leeres Element erstellt werden kann, das eine visuelle, horizontale Linie zwischen alternativen Abschnitten eines Online-Dokuments zeichnet. Möglicherweise möchten Sie beispielsweise eine Linie zwischen zwei Textteilen platzieren, um den Leser neu zu fokussieren oder einfach ein neues visuelles Element einzuführen. So erstellen Sie einen solchen Bruch in HTML:

<p>Your First Paragraph</p>

<hr />

<p>Your Second Paragraph</p>

Hier heben die Umbrüche zwischen den hr-Zeichen und dem Schrägstrich die Konstruktion eines leeren Elements hervor, während wiederum kein schließendes Tag erforderlich ist, um den Effekt zu vervollständigen. Dadurch wird das folgende Bild erstellt:

Ihr erster Absatz

________________________________________

Ihr zweiter Absatz

Bild-Tags

Bild-Tags stellen auch leere Elemente in HTML dar, was wiederum bedeutet, dass sie kein schließendes Tag enthalten. Da sie nur Attribute enthalten, die sich auf die URL des Bildes beziehen, das Sie auf der Website einbetten, werden sie einfach durch definiert Tag am Anfang des Elements. Diese können überall auf Ihrer Website platziert werden, obwohl es ungewöhnlich ist, sie in bestehende Elemente wie Absätze oder Überschriften einzubinden. So präsentiert sich ein typisches HTML-Bild-Tag:

Sie sollten auch alternativen Text für Ihr Bild bereitstellen, der den Benutzern die Anzeige bei langsamen Ladezeiten oder der Verwendung eines Screenreaders erleichtert. Wenn der Browser ein Bild nicht finden kann, zeigt er den Betrachtern auf diese Weise den Wert des alternativen Attributs an. Auch hier wird das Image-Tag verwendet, es sind jedoch andere Attribute enthalten:

HTML-Elemente

Zuvor haben wir untersucht, wie einfache HTML-Tags zum Definieren von Seitenelementen verwendet werden, und gleichzeitig untersucht, wie sie durch die Verwendung leerer Elemente mit Bild- und Zeilenumbruch-Tags weiter angepasst werden können. Dies hilft uns, die Beziehung zwischen Tags und Elementen zu verstehen und wie sie zur Definition unterschiedlicher Elemente verwendet werden können Arten von Inhalten auf Ihrer Website.

Während beispielsweise alle Aspekte der HTML-Sprache durch ein Tag dargestellt werden, muss ein definiertes Element, das Inhalt enthält, sowohl ein Start- als auch ein Schluss-Tag haben. Überschriften und Absätze sind also HTML-Elemente, da sie Start- und Schluss-Tags verwenden, um den relevanten Text zu kapseln und zu ergänzen. Im Gegensatz dazu enthalten leere Elemente entweder Attribute oder überhaupt keinen Inhalt, sodass sie innerhalb vorhandener Elemente verwendet werden können, ohne dass ein schließendes Tag erforderlich ist.

HTML-Elemente definieren

Bei der Verwendung von Beispielen wie Überschriften und Absätzen ist die korrekte Verwendung von Start- und Schluss-Tags von entscheidender Bedeutung. Es ist das Start-Tag (z. B oder ), das beispielsweise das betreffende Element definiert, während das schließende Tag dafür sorgt, dass dieses Element nicht im Rest der Webseite fortgesetzt wird. Wenn Sie den Abschluss nicht verwenden Wenn Sie beispielsweise am Ende des gewünschten Absatzes ein Tag hinzufügen, erscheint der Text in einem einzigen Block, der unansehnlich und äußerst schwer lesbar ist.

Alle Schluss-Tags sind identisch mit den Start-Tags, abgesehen davon, dass erstere einen Schrägstrich vor den entsprechenden Zeichen enthalten. Also im Fall eines Überschrift, das schließende Tag wird sein , während Sie für Absätze immer verwenden werden um den Umbruch im Text zu definieren. Dies erfordert Liebe zum Detail beim Codieren, und es ist wichtig, beim Programmieren von Überschriften zu beachten, dass die von Ihnen verwendete Zahl (z. B. h1 oder h1) sowohl im Start- als auch im Schluss-Tag angewendet wird.

Verwendung verschachtelter HTML-Elemente

In diesem Stadium ist deutlich zu erkennen, dass HTML-Dokumente und Webseiten aus einem Baum verschiedener Elemente bestehen, die als Bausteine ​​für eine Reihe von Assets dienen. Wir haben uns auch damit beschäftigt, wie diese Elemente geformt und zur Strukturierung von Online-Inhalten verwendet werden können, und wir werden dies nun fortsetzen, indem wir uns verschachtelte HTML-Elemente ansehen.

Ebenso wie leere Elemente und eigenständige Tags (wie können in definierte HTML-Elemente eingebunden werden, sogenannte verschachtelte Elemente können auch innerhalb von Inhalten wie Überschriften und Absätzen untergebracht werden. Dazu gehören Beispiele wie Fett- und Kursivschrift sowie unterstrichener Text. Sie können jedoch auch verwendet werden, um Ihren Inhalten Persönlichkeit zu verleihen und die Aufmerksamkeit des Lesers auf bestimmte interessante Punkte zu lenken.

Fetter, kursiver und durchgestrichener Text in HTML

Nehmen wir an, Sie möchten ein Wort in einem vorhandenen Absatzelement hervorheben. Sie können dies erreichen, indem Sie es fett formatieren und einfache Tags innerhalb des Standards verwenden Element. Mithilfe von HTML programmieren Sie dies wie folgt:

Ich möchte, dass dieses Wort fett ist.


Hier hat das verschachtelte Element sowohl ein Start- als auch ein Schluss-Tag, die jeweils einem ähnlichen Format folgen wie denen, die Überschriften und Absätzen zugeordnet sind. Sie können nahtlos in bestehende Elemente integriert werden und führen in diesem Fall zu folgenden Ergebnissen:

Ich möchte fehlen uns die Worte. Wort, um fett zu sein.

Nehmen wir nun an, Sie möchten auch die Typografie dieses Wortes ändern, sodass es ebenfalls kursiv ist. Dies kann einfach durch Hinzufügen eines weiteren verschachtelten Elements erreicht werden, das wie folgt codiert werden sollte:

Ich möchte, dass Wort fett ist.

Wie Sie sehen können, wurden die kursiven Anfangs- und Schluss-Tags einfach in das eingefügt Element. Dadurch wird nun der Inhalt innerhalb des Elements so transformiert, dass er wie folgt aussieht:  

Ich möchte fehlen uns die Worte. Wort, um fett zu sein.

Natürlich können Sie entscheiden, dass Sie dieses Wort lieber auf andere Weise hervorheben möchten. Sie können daher ein alternatives verschachteltes Element verwenden, z. B. durchgestrichen (das durch die Tags und dargestellt wird. Diese Tags können auf die gleiche Weise innerhalb der angewendet werden Element, das in HTML wie folgt aussieht:

Ich möchte, dass dieses Wort durchgestrichen ist.

In diesem Fall wird der Text auf Ihrem Dokument oder Ihrer Landingpage wie folgt angezeigt:  

Ich möchte fehlen uns die Worte. Wort durchgestrichen sein.

Dies bietet einen Einblick in Elemente, die durch Tags gebildet werden können, was wiederum die Struktur Ihrer Webseiten und den darauf enthaltenen Inhalt definiert. Darüber hinaus können leere und verschachtelte Elemente zur weiteren Definition Ihres Inhalts verwendet werden.

HTML-Attribute

Wenn Tags die Bausteine ​​sind, die Elemente konstruieren und definieren, können HTML-Attribute verwendet werden, um ihre Eigenschaften (wie Stil, Farbe und Sprache) anzupassen. Alle HTML-Elemente verfügen über Kernattribute, die Kerninformationen bereitstellen und immer im Stat-Tag angegeben werden . Sie kommen in der Regel paarweise vor und erscheinen daher oft im folgenden Format: name=“value.“

Vereinfacht ausgedrückt stellt der Name die Eigenschaft dar, die Sie festlegen möchten, während sich der Wert auf die spezifischen Kriterien bezieht, die Sie einbeziehen möchten.

Es gibt eine große Anzahl von Attributen, die auf Ihre HTML-Elemente angewendet werden können. Die wichtigsten für angehende Webmaster sind jedoch:

Das 'lang'-Attribut

Das grundlegendste Attribut definiert die Sprache des Dokuments und seiner Elemente. Es wird mit dem Attribut „lang“ deklariert und obwohl es leicht übersehen wird, hat es den Vorteil, dass der Inhalt für Screenreader und Suchmaschinen leichter zugänglich ist. Es wird normalerweise am Anfang des Dokuments im folgenden Format angezeigt:

Nach dem lang-Attribut geben die ersten beiden Buchstaben die Sprache an (in diesem Fall Englisch). Nach dem Bindestrich bestimmen die nächsten beiden Buchstaben den Dialekt, obwohl dieser nicht in jeder Sprache vorhanden ist. Es ist wichtig, dass Sie dieses Attribut richtig anwenden, wenn Sie Ihr Publikum erfolgreich erreichen möchten.

Das Attribut „align“.

Wir haben das Format von HTML-Attributen (Name=“Wert“) bereits angesprochen. Die beste Verkörperung davon gelingt, wenn Sie versuchen, den Inhalt innerhalb Ihrer Elemente auszurichten. Sie können sich beispielsweise dafür entscheiden, alle Absätze auf einer bestimmten Seite zu zentrieren, wobei die Ausrichtung die Eigenschaft ist, die Sie festlegen möchten. Anschließend ist „center“ der Wert des Attributs, wobei Sie die Wahl haben, Ihren Text links oder rechts auszurichten.

Beispielsweise:

<p align="center" >This text is center aligned</p>

Dies wird Ihre ausrichten Elemente in der Mitte der Seite und erstellen Sie ein einheitliches Layout, das der Besonderheit Ihrer Website entspricht (siehe unten):

Dieser Text ist zentriert

Dieser Text ist zentriert

Dieser Text ist zentriert

Das 'href'-Attribut

Wenn Sie eine sichtbare Website erstellen möchten, ist es wichtig, dass Sie sowohl eingehende als auch ausgehende Links einbinden. Der Aufbau eines Link-Portfolios, das Backlinks zu internen Zielseiten enthält, ist ebenfalls eine praktikable Strategie. Sie müssen daher lernen, diese in HTML zu codieren.

HTML-Links werden mit dem Tag definiert, das den Ziellink zusammen mit dem zugehörigen Ankertext enthält, der die URL enthält. Es ist das „href“-Attribut, das die Site-Adresse angibt, diese ist jedoch als Teil des Start-Tags integriert. Es ist wie folgt in HTML codiert:

Google

Dadurch wird der Unterschied zwischen dem Start- und dem Schluss-Tag deutlich hervorgehoben und auf Ihrer Zielseite wie folgt übersetzt:

Google  

Das Attribut „Farbe“.

Dies ist ein weiteres wichtiges Merkmal, da der Einsatz von Farbe Ihrer Website Leben einhauchen und gleichzeitig dazu beitragen kann, wichtige Kontraste und eine starke Designästhetik zu schaffen. In HTML kann eine Farbe über ihren Namen angegeben werden, es ist jedoch auch möglich, zu diesem Zweck einen RGB- oder einen HEX-Wert zu verwenden. Die erstere Option ist jedoch am einfachsten zu befolgen, kann aber auch auf Überschriften, Absätze und andere Elemente auf Ihrer Seite angewendet werden.

Dies ist ein Stilattribut, wobei die von Ihnen gewählte Farbe den Wert darstellt, den Sie festlegen möchten. Wenn Sie beispielsweise die Hauptüberschrift mit der Farbe Rot versehen, sieht das so aus:

Mit Rot festgelegte Textfarbe

Nach der Anwendung wird dieses Element wie folgt auf Ihrer Website angezeigt:

Mit Rot festgelegte Textfarbe  

Auch hier gibt es eine klare Unterscheidung zwischen den Start- und Schluss-Tags, die das Element definieren, obwohl dies eines der am einfachsten anzuwendenden Attribute in HTML ist. Außerdem wird das Name=“Wert-Format von HTML-Attributen weiter hervorgehoben, was den Lernprozess und die Anwendung dieser Attribute auf Ihrer gesamten Website erheblich vereinfacht.

Teste es selbst

Mit einem grundlegenden Verständnis von HTML und seinen einzelnen Elementen besteht der nächste Schritt darin, einige einfache Projekte durchzuführen und Ihr theoretisches Wissen anzuwenden, um praktische Herausforderungen zu lösen.  

In der unten beschriebenen Übung haben wir einen Text hervorgehoben und gebeten, verschiedene Aspekte mithilfe von HTML zu formatieren. Nutzen Sie den Leitfaden und alles, was Sie bisher gelernt haben, um die Herausforderung zu meistern, während Sie sich auf die Codierung Ihrer eigenen Website vorbereiten.

<h1>Main Header

<p>Welcome to our website, Example.com! We hope you enjoy reading our content , feel free to reach out to us. </p>

<p>Thanks for visiting! </p>

<p>Learn more. </p>

Fragen:

  1. Vervollständigen Sie das Header-Element mit dem richtigen schließenden Tag.
  2. Machen Sie die Kopfzeile fett.
  3. Fügen Sie eine horizontale Linie unter der Kopfzeile ein.
  4. Verwenden Sie das Farbattribut und schattieren Sie „Vielen Dank für Ihren Besuch“ in Grün
  5. Fügen Sie diesen Hyperlink ein (https://www.w3schools.com/html/) in den Ankertext „Weitere Informationen“ einfügen.
  6. Verwenden Sie am Kopf der Seite das Format „name=“wert“, um die Absätze linksbündig auszurichten

Statistiken und Fakten zur HTML-Sprache

  1. Die HTML-, Head- und Body-Elemente sind seit Mitte der 1990er Jahre Teil der HTML-Spezifikation und waren bis vor einigen Jahren die wichtigsten Elemente, die zur Strukturierung von HTML-Dokumenten verwendet wurden. Allerdings hat sich die Situation in den letzten Jahren dramatisch verändert, da HTML5 eine Reihe neuer Tags hinzugefügt hat, die verwendet werden können, um der Struktur eines HTML-Dokuments eine reichhaltige semantische Bedeutung zu verleihen.
  2. HTML-Dokumente müssen mit einer Dokumenttypdeklaration (informell ein „Doctype“) beginnen. In Browsern hilft der Doctype dabei, den Rendering-Modus zu definieren. HTML5 definiert keine DTD; Daher ist die Doctype-Deklaration in HTML5 einfacher und kürzer.
  3. Mobile Browser haben HTML5 vollständig übernommen, sodass das Erstellen mobiler Projekte genauso einfach ist wie das Entwerfen und Konstruieren für ihre kleineren Touchscreen-Displays – daher die Beliebtheit von Responsive Design. Es gibt einige tolle Meta-Tags, die Ihnen auch eine Optimierung für Mobilgeräte ermöglichen.  
  4. 78 % der Inhaltsentwickler stimmen zu, dass die Struktur für die Erstellung mobiler Apps geeignet ist, und 68 % sagen, dass sie für die Gestaltung aller Arten von Apps geeignet ist.
  5. HTML5 verfügt außerdem über eine Reihe großartiger APIs, mit denen Sie ein besseres Benutzererlebnis und eine leistungsfähigere, dynamischere Webanwendung erstellen können – hier ist eine kurze Liste nativer APIs:
    • Drag-and-Drop (DnD)
    • Offline-Speicherdatenbank
    • Verwaltung des Browserverlaufs
    • Dokumentenbearbeitung
    • Zeitgesteuerte Medienwiedergabe
  6. HTML5 wird nicht von einem Unternehmen kontrolliert. Eine seiner besten Eigenschaften liegt in der Tatsache, dass es sich um einen offenen Standard handelt. Entwickler haben die Freiheit, ihrer Kreativität freien Lauf zu lassen und so viele Funktionen und Features wie möglich hinzuzufügen.
  7. Im Vergleich zu anderen Browsern stellt jedes Google Chrome-Update sicher, dass HTML5 unterstützt wird. Darüber hinaus ist der Standardplayer von YouTube jetzt HTML5 und die Flash-Anzeigen von Google werden jetzt in HTML5 konvertiert.
  8. Nutzung von HTML5 durch Entwickler (nach Region):
    • Nord- und Lateinamerika – 70 %
    • Südamerika – 61 %
    • ASPAC – 60 %
    • Australien - 60%
    • Europa – 59%
    • Afrika – 50 %

Schlussfolgerung

Obwohl HTML erst 1991 erstellt wurde (die erste Version der Programmiersprache kam 1995 auf den Markt), hat es sich schnell zu einem wegweisenden Werkzeug für die Gestaltung funktionaler und optisch ansprechender Websites entwickelt. Auch der Einfluss von HTML entwickelt sich weiter, wobei die neueste Version (HTML5) von einer wachsenden Zahl von Websites auf der ganzen Welt übernommen wird.

In dieser Hinsicht ist das Erlernen der Grundelemente von HTML und deren Anwendung der wichtigste Schritt, den Sie unternehmen werden, um eine erfolgreiche, sichtbare und letztendlich wettbewerbsfähige Website zu erstellen.

2 Kommentare zu „HTML-Tutorial für Anfänger“

  1. Ephraim Ugochukwu

    Echt super. Ich konnte HTML problemlos verstehen. Vielen Dank für diesen tollen Artikel

Hinterlassen Sie uns einen Kommentar

E-Mail-Adresse wird nicht veröffentlicht. Pflichtfelder sind MIT * gekennzeichnet. *

Senden Sie dies einem Freund