So codieren Sie mit HTML (Hyper Text Markup Language)

Einführung

Das Erlernen des Codierens mit HTML ist eine hervorragende Möglichkeit, Ihre Karriere als Programmierer voranzutreiben. Sie lernen grundlegende Webentwicklungskonzepte wie das Erstellen von Tabellen, Formularen, Links, Listen usw. kennen. Daher werden wir in diesem Beitrag alles diskutieren, was Sie über HTML wissen müssen.

Wenn Sie jedoch Webentwickler werden möchten, haben Sie vielleicht schon von den Begriffen Front-End, Back-End, Full-Stack usw. gehört. HTML-Kenntnisse sind der Anfang, um die Webentwicklung zu verstehen. HTML ist also Teil der Front-End-Kategorie der Webentwicklung.

Was ist HTML und warum sollten Sie damit programmieren?

HTML ist eine Abkürzung für Hyper Text Markup Language. Es wurde zur Strukturierung von Inhalten im Webbrowser erstellt. Die aktuelle Version der Sprache ist HTML5.

Sie sollten aus den folgenden Gründen mit HTML lernen und programmieren.

Erstens können Sie sich als Webentwickler nicht vor HTML schützen, da Sie zum Platzieren von Inhalten auf einer Webseite HTML-Tags verwenden müssen. Selbst wenn Sie ein Back-End-Entwickler sind, möchten Sie möglicherweise testen, wie sich Ihre Anwendung verhält, wenn die Benutzer sie verwenden. Dies bedeutet, dass Sie HTML benötigen.

Zweitens erfordern einige andere Sprachen und Frameworks HTML-Kenntnisse, da dies der Baustein der Webentwicklung ist. Zusätzlich setzen CSS, Django, Drupal, WordPress und JavaScript voraus, dass Sie sich mit HTML auskennen.

Wenn Sie also davon überzeugt sind, dass HTML lohnenswert ist, ist es jetzt eine gute Gelegenheit, über die Tools zu sprechen, die Sie zum Codieren in HTML benötigen.

Was brauche ich, um mit HTML zu programmieren?

Damit Sie mit HTML-Code beginnen können, benötigen Sie zwei Dinge:

Erstens benötigen Sie einen Texteditor und

Zweitens benötigen Sie auch einen Browser.

Der Texteditor ist die Umgebung, in der Sie Ihre HTML-Codes eingeben und Tools wie Notepad ++ , Sublime Text , VS Code usw. verwenden. In der Umgebung des Browsers können Sie testen oder eine Vorschau Ihres Codes anzeigen. Sie können Chrome, Firefox, Safari usw.

Wir tippen alle unsere Codes mit Codepen ein, was bedeutet, dass Sie alle Codes direkt ausführen können, ohne die oben genannten Tools zu benötigen.

Beginnen wir nun mit dem Code unter Verwendung von HTML

Zunächst sollten Sie beachten, dass Sie Ihre HTML-Dateien mit der Erweiterung .html speichern müssen. Wenn Sie beispielsweise Ihren Dateiindex benennen, wird der gesamte Dateiname zu index.html.

Zurückkommend haben wir bereits erwähnt, dass HTML zum Strukturieren von Inhalten auf der Webseite verwendet wird. Wir werden uns also ansehen, wie Sie Inhalte wie Texte, Absätze, Tabellen, Überschriften, Bilder, Audio, Videos, Listen und Links in Ihrem Webbrowser mithilfe von HTML zum Codieren strukturieren können.

Um dies jedoch in HTML zu erreichen, müssen Tags verwendet werden.

HTML-Tags und ihre Struktur

Wenn Sie mit HTML-Code beginnen, sollten Sie mit HTML-Tags vertraut sein. Mit HTML-Tags können Sie dem Browser beschreiben, welche Art von Inhalten kommen wird. Wenn Sie beispielsweise eine Tabelle erstellen möchten, müssen Sie das Tabellentag verwenden, das wie <table> aussieht. HTML-Tags bestehen aus zwei Teilen: Öffnen und Schließen. Also, für das Tabellen-Tag. Das öffnende Tag sieht aus wie <table> und das schließende sieht aus wie </ table>. Wann immer Sie vom Öffnen und Schließen von Tags hören, ist dies das, was es bedeutet.

Nachfolgend finden Sie eine Liste von Tags, mit denen Sie HTML und ihre Funktionen codieren können.

• Wenn Sie Überschriften schreiben möchten, verwenden Sie die Überschriften-Tags <h1>, <h2>, <h3>, <h4>, <h5> und <h6>.
• Jeder Absatz in Ihrem Text muss sich innerhalb des <p> -Tags befinden.
• Zum Erstellen von Tabellen benötigen Sie das Tag <table>.
• Für Formulare verwenden Sie das Tag <form>.
• Um Dinge aufzulisten, sollten Sie das <li> -Tag verwenden.
• Das <a> -Tag wird zum Erstellen von Links verwendet.
• Wenn Sie Bilder in Ihren Inhalt einfügen möchten, sollten Sie das <img> -Tag verwenden.
• Verwenden Sie zum Hinzufügen von Videos zu Ihrem Inhalt das Tag <video>.
• Das <audio> -Tag wird verwendet, um Audiodateien zu Ihrem Inhalt hinzuzufügen.

Sie werden lernen, wie Sie mit jedem der oben genannten HTML-Tags einzeln codieren, und Sie werden auch mehr über sie erfahren, wenn wir beginnen, mit ihnen zu codieren.

Der HTML-Skeleton-Code

In all Ihren HTML-Dokumenten muss Code enthalten sein. Diese Codes sind nur HTML-Tags, die den Browser anweisen, den Inhalt in der Überschrift oder im Textkörper anzuzeigen. Hör zu:

Zunächst muss die Codezeile <DOCTYPE html> in alle HTML-Dokumente eingefügt werden. Zweitens: Mit dem Tag <html> werden alle Ihre Inhalte gespeichert. Drittens ist der <head> der Bereich, in dem Sie externe Dateien sowie den Seitentitel einfügen, der in der Registerkartenleiste des Browsers angezeigt wird. Im Abschnitt <body> wird jedoch jeder andere HTML-Code platziert.

So strukturieren Sie Überschriften in HTML

Wenn Sie mit dem Code in HTML beginnen und eine Überschrift anzeigen möchten. Sie müssen Ihrem Browser mitteilen, dass dies eine Überschrift ist. HTML-Überschriften gibt es jedoch in verschiedenen Größen. Sie müssen dem Browser also auch die Größe der Überschrift mitteilen.

Darüber hinaus können Sie in HTML Überschriften in 6 verschiedenen Größen verwenden, um den Code besser lesen zu können. Die Tags für jede Überschriftengröße sind unterschiedlich. Je höher die Zahl, desto kleiner die Überschrift. Die Tags sind <h1>, <h2>, <h3>, <h4>, <h5> und <h6>. Schauen Sie sich zum besseren Verständnis das folgende Beispiel an. Beachten Sie, dass Sie zum besseren Verständnis auch den Inhalt (nicht die Tags) ändern können.

So strukturieren Sie Absätze in HTML

Das Anzeigen von Absätzen in HTML ist ziemlich einfach. Jeder neue Absatz muss ein eigenes Absatz-Tag haben. Das Tag zum Strukturieren von Absätzen in Ihrem HTML-Code lautet <p>.

Was ist ein Attribut in HTML?

Mithilfe von Attributen können Sie dem Browser zusätzliche Informationen darüber bereitstellen, wie Ihre Inhalte angezeigt werden sollen. Angenommen, Sie möchten, dass Ihr Inhalt in der Mitte oder rechts angezeigt wird, oder Sie möchten einen Rahmen anbringen oder die Breite oder Höhe Ihres Dokuments festlegen, dann benötigen Sie dafür ein Attribut.

Wie Sie oben sehen können, können Sie Ihrem HTML-Code viele zusätzliche Informationen geben, indem Sie Ausrichtungs- und Stilattribute verwenden , um eine effektive Leistung zu erzielen.

Auflisten von Elementen in HTML

Ganz gleich, ob Sie Ihre Inhalte mit Zahlen oder Aufzählungszeichen auflisten möchten, mit HTML können Sie dies mit wenigen Codezeilen tun. Es gibt jedoch zwei Arten von Listen in HTML. Die erste ist die geordnete Liste. In diesem Fall können Sie Ihre Artikel mit Zahlen, römischen Ziffern, Buchstaben usw. auflisten. Die zweite ist die ungeordnete Liste, mit der Sie Artikel mit Aufzählungszeichen auflisten können.

Das HTML-Tag für die Verwendung der geordneten Liste lautet <ol>, während für die ungeordnete Liste <ul> verwendet wird. Um die einzelnen Elemente aufzulisten, verwenden Sie das Tag <li>.

So strukturieren Sie Tabellen in HTML

Interessanterweise bietet uns HTML die Möglichkeit, Tabellen zu erstellen. Tabellen bestehen normalerweise aus Zeilen und Spalten, die eine Zelle bilden. Mit HTML ist der Code, den Sie zum Erstellen einer Tabelle benötigen, nicht nur das Tabellen-Tag, sondern eine Kombination von Tags. Sie müssen mit dem Tabellen-Tag beginnen. Genauso wie wir in unseren Tabellen Überschriften haben, erlaubt HTML dies auch mit dem <thead> -Tag und dann mit <tbody> zum Anzeigen anderer Inhalte.

Zuerst haben wir den Browser mithilfe des Tabellen-Tags darüber informiert, dass wir eine Tabelle einspielen. Dann haben wir auch den Browser darüber informiert, dass die Tabelle eine Überschrift und einen Body haben wird. Wir haben dann eine Zeile mit dem <tr> -Tag erstellt. Also verwendeten wir für die Überschriftenelemente das <th> -Tag und für die anderen Elemente das <td> -Tag.

Verknüpfen mit anderen Websites in HTML

Mit HTML können Sie mithilfe des <a> -Tags Links zu anderen Websites erstellen.

Einbetten von Multimedia in HTML-Code

Sie können Bilder, Audios und Videos in Ihren HTML-Code einbetten. Die verwendeten Tags sind <img> für Bilder, <audio> für Audio und <video> für Video.

Aus dem obigen HTML-Code konnten wir ein Katzenbild, einen Film und eine Musik einbetten. Zu beachten ist, dass wir die Quelle für alle unsere Medien zur Verfügung gestellt haben. Die Quelle ist sehr wichtig, da HTML dort die Medien auswählt. Wir haben das src-Attribut für die Quelle verwendet und das controls-Attribut hinzugefügt, mit dem wir grundlegende Steuerelemente wie Wiedergabe, Pause, Stopp, Stummschaltung usw. über unsere Medien haben können.

So erstellen Sie Formulare und nehmen Benutzereingaben mit HTML entgegen

Das Schöne an HTML ist, dass Sie Benutzereingaben über Formulare vornehmen können. Diese Formulare können so klein wie ein Suchformular oder so umfangreich wie ein Registrierungsformular sein. Nur bei normalen Papierformularen gibt es verschiedene Arten von Informationen, die Sie sammeln, wie z. B. Name, Alter, Geburtsdatum, Adresse usw. All dies ist mit HTML möglich.

Um mit dem Codieren von HTML-Formularen zu beginnen, müssen Sie das Formular-Tag verwenden, das abhängig von der Art der Eingaben, die Sie von Ihren Benutzern erhalten, auch andere Unter-Tags enthält.

Aus dem obigen Code haben wir gesehen, dass es verschiedene Arten der Eingabe in HTML gibt. Je nachdem, was Sie möchten, können Sie aus den HTML-Eingabetypen auswählen.

Gruppieren Sie Ihre Elemente mit Span und Div

Es wird Situationen geben, in denen Sie einen Codeblock gruppieren möchten, um eine ähnliche Aktion auszuführen. Mit den HTML-Tags div und span können Sie dies erreichen. Mit dem Span können Sie Inline-Gruppierungen durchführen, mit dem Div können Sie mehrere Zeilen gruppieren.

Fazit

In diesem Beitrag haben wir viel über HTML gelernt, angefangen von einer grundlegenden Erklärung von HTML und einigen Gründen, während Sie darüber nachdenken sollten, wie man damit programmiert. Wir haben dann gelernt, wie man grundlegende Codierungen mit HTML ausführt. Die Bedeutung von HTML kann nicht genug betont werden und wenn Sie wirklich ein Webentwickler werden möchten, müssen Sie HTML kennen.

Wenn Sie dieses Tutorial lieben, hinterlassen Sie bitte einen Kommentar. Sie sollten sich auch einige unserer Tutorials ansehen.