5 Schritte zum Grundlegenden HTML-Code

• Programmierung

Werbung

HTML ist ein wichtiger Teil des Webs, wie wir es kennen. Und während nur wenige Webdesigner Seiten durch manuelle Eingabe von HTML erstellen, ist es immer noch praktisch, ein wenig darüber zu wissen.

Wir werden uns einige Grundlagen der Sprache ansehen, darunter, was HTML wirklich ist, einige grundlegende Konzepte und wie es mit anderen Sprachen interagiert. Betrachten Sie dies als einen Crash-Kurs „HTML für Dummies“.

HTML-Grundlagen: Was ist HTML?

HTML steht für Hypertext Markup Language . Und obwohl es manchmal mit Programmiersprachen zu tun hat, ist dies nicht korrekt.

Als Auszeichnungssprache können Sie mit HTML nur das Anzeigelayout von Seiten erstellen. Eine echte Programmiersprache wie Java oder C ++ enthält Logik und Befehle, die ausgeführt werden.

Während es einfach ist, ist HTML das Rückgrat jeder Seite im Web. Es ist dafür verantwortlich, welcher Text fett dargestellt wird, Bilder hinzufügt und auf andere Seiten verlinkt. Wir haben eine HTML-FAQ. Die wesentlichen HTML-FAQ, die Sie mit einem Lesezeichen versehen sollten. Die wesentlichen HTML-FAQ, die Sie mit einem Lesezeichen versehen sollten, gibt es schon seit einiger Zeit. Es ist also an der Zeit, die Grundlagen zu erlernen. Hier erfahren Sie, was es ist, wie es funktioniert und wie Sie heute einige gängige HTML-Elemente schreiben können! Lesen Sie mehr, das mehr erklärt.

Sie können mit der rechten Maustaste auf die meisten Webseiten in Ihrem Browser klicken und Seitenquelle anzeigen oder Ähnliches auswählen, um den HTML-Code dahinter anzuzeigen. Dies wird wahrscheinlich auch eine Menge Code enthalten, der nicht HTML ist, aber Sie können das durchsehen.

Selbst wenn Sie keine Erfahrung mit Markup- oder Programmiersprachen haben, werden Sie durch das Erlernen von HTML zu einem informierten Webbenutzer. Lassen Sie uns fünf grundlegende Schritte durchgehen, um zu verstehen, wie HTML funktioniert. Wir werden Beispiele auf dem Weg zur Verfügung stellen.

Schritt 1: Das Konzept von Tags verstehen

HTML verwendet ein Tag- System, um verschiedene Elemente des Dokuments zu kategorisieren.

Die meisten Tags kommen paarweise, um den betroffenen Text in sie einzuschließen. Hier ist ein einfaches Beispiel (das Tag macht den Text fett ; wir werden dies gleich näher erläutern.)

 This is some bold text . 

Beachten Sie, wie das schließende Tag mit einem Schrägstrich (/) beginnt. Dies bedeutet einen abschließenden Tag, der wichtig ist. Wenn Sie ein Tag nicht schließen, hat alles von Anfang an dieses Attribut.

Allerdings haben nicht alle Tags ein Paar. Einige HTML-Elemente, die als leere Elemente bezeichnet werden, haben keinen Inhalt und existieren für sich. Ein Beispiel ist das
Tag, das ein Zeilenumbruch ist. Sie können solche Tags schließen, indem Sie einen Schrägstrich (wie z
) aber es ist nicht unbedingt notwendig.

Schritt 2: Das Skeleton-HTML-Layout

Für ein richtiges HTML-Dokument müssen bestimmte Tags definiert sein, damit es richtig angeordnet ist. Dies sind die wesentlichen Teile:

• Jedes HTML-Dokument muss mit beginnen sich als solche deklarieren. So ist seine schließende Tag, ist das letzte Element in einer HTML-Datei.
• Als nächstes die Der Abschnitt enthält Informationen wie den Seitentitel, verschiedene Skripts, die auf der Seite ausgeführt werden, und Ähnliches. Wie der Name schon sagt, erfolgt dies normalerweise direkt nach der Initiale Etikett. Der Endbenutzer sieht nicht viel von dem Inhalt in diesen Tags.
• Endlich, das tag enthält den Text der Seite, die der Leser sieht (und vieles mehr). Hier finden Sie Bilder, Links und mehr.

Seit der Abschnitt macht den Großteil eines HTML-Dokuments aus, der Rest unserer exemplarischen Vorgehensweise befasst sich mit Elementen, die dazu gehören.

Schritt 3: Grundlegende HTML-Tags für die Formatierung

Schauen wir uns als Nächstes einige gängige Tags an, aus denen HTML-Dokumente bestehen. Natürlich ist es nicht möglich, jedes Element zu behandeln, daher werden wir einige der wichtigsten Aspekte betrachten. Wir haben viele weitere HTML-Beispiele behandelt. 17 Einfache HTML-Codebeispiele, die Sie in 10 Minuten lernen können 17 Einfache HTML-Codebeispiele, die Sie in 10 Minuten lernen können Möchten Sie eine einfache Webseite erstellen? Lernen Sie diese HTML-Beispiele kennen und probieren Sie sie in einem Texteditor aus, um zu sehen, wie sie in Ihrem Browser aussehen. Lesen Sie mehr, wenn diese Sie nicht zufrieden stellen.

Wenn Ihnen diese Tags ziemlich einfach vorkommen, denken Sie daran, dass HTML bereits 1993 erstellt wurde. Das Web war damals in seinen Anfängen sehr textbasiert.

Einfache Textformatierung

HTML unterstützt grundlegende Textstile wie in Microsoft Word:

• Tags machen Text fett .
• Tags (die für „Hervorhebung“ stehen) kursiv setzen .

HTML unterstützt auch das ältere Tag für fett und kursiv. Es ist jedoch vorzuziehen, die oben genannten zu verwenden.

Kurz gesagt, und zeigen Sie, wie etwas zu verstehen ist, während die letzteren Tags nur Aufschluss darüber geben, wie es aussehen soll. Diese früheren Tags sind für Bildschirmleser, die von Sehbehinderten verwendet werden, leichter zugänglich.

Absatz und andere Abteilungen

HTML's Mit tag können Sie einen Abschnitt des Dokuments definieren. Normalerweise wird dies mit CSS gepaart (siehe unten), um einen Abschnitt auf eine bestimmte Weise zu formatieren.

Das

Mit tag können Sie Text in Absätze unterteilen. Browser werden automatisch vor und nach diesen Leerzeichen einfügen, sodass Sie den Text auf natürliche Weise aufteilen können.

Sie können Ihrem Dokument Überschriften hinzufügen und das Verfolgen mit der vereinfachen

durch

Stichworte. H1 ist der wichtigste Header, während H6 am wenigsten wichtig ist. Nahezu jeder MakeUseOf-Artikel verwendet H2- und H3-Header, um Informationen zu organisieren.

Wenn Sie die Eingabetaste drücken, um Zeilenumbrüche in Ihr HTML-Dokument einzufügen, werden diese nicht angezeigt. Stattdessen können Sie verwenden
um einen Zeilenumbruch einzufügen.

Hier ist ein Beispiel, das all dies verwendet:

Beispiel Überschrift 
Dies ist ein Absatz.
Das ist eine Sekunde 
Absatz zwischen zwei Zeilen aufgeteilt.

Schritt 4: Einfügen von Bildern

Bilder sind ein wichtiger Bestandteil der meisten Webseiten. Sie können sie einfach mit HTML hinzufügen und sogar verschiedene Eigenschaften für sie festlegen.

Sie fügen ein Bild mit der Taste ein Etikett. Wenn Sie dies mit dem src Attribut src, können Sie angeben, woher das Bild geladen werden soll.

Ein weiteres wichtiges Attribut von Tags ist alt . Mit Alternativtext können Sie das Bild für Bildschirmleser beschreiben oder für den Fall, dass das Bild nicht richtig geladen wird. Sie können mit der Maus über ein Bild fahren, um dessen Alternativtext anzuzeigen.

Verwenden Sie die Elemente width und height, um die Anzahl der Pixel anzugeben, mit denen das Bild angezeigt wird.

Füge alles zusammen und ein Image-Tag sieht so aus:

Schritt 5: Links hinzufügen

Das World Wide Web wäre kein großes Web ohne Links zu anderen Seiten. Verwendung der Tag, können Sie zu anderen Seiten in jedem Text verlinken.

In der Tag, das href Attribut gibt an, wo Sie verlinken. Das einfache Einfügen der URL funktioniert problemlos. Sie können das title Element verwenden, um Text einzufügen, der angezeigt wird, wenn sich jemand über dem Link befindet.

Ein grundlegender Link sieht folgendermaßen aus:

 Visit Google 

Das tag hat viele andere mögliche Elemente, auf die wir hier jedoch nicht eingehen werden.

Wie sich HTML mit CSS und JavaScript verbindet

Wir haben uns die Grundlagen von HTML angeschaut und wie es eine Webseite erstellt. Aber wie Sie sich vorstellen können, ist HTML allein für das moderne Web nicht geeignet. Einfache HTML-Webseiten waren in der Zeit von „Web 1.0“ üblich, als die meisten Websites nur statischen Text enthielten.

Aber jetzt haben wir noch viel mehr. CSS (Cascading Style Sheets) Das Cheat Sheet für die wesentlichen CSS3-Eigenschaften Das Cheat Sheet für die wesentlichen CSS3-Eigenschaften Beherrschen Sie die grundlegende CSS-Syntax mit unserem Cheat Sheet für die CSS3-Eigenschaften. Read More ist eine Sprache, die beschreibt, wie der in HTML erstellte Text aussehen soll. Erinnern Sie sich an das Tag, über den wir gesprochen haben? Innerhalb dieses (und anderer Tags) können Sie ein class definieren. Anschließend können Sie in Ihrem zugehörigen CSS-Dokument Anweisungen schreiben, wie diese class aussehen soll.

Sie können diese Stilelemente inline in Ihrem HTML-Code definieren. Dies wird jedoch als unzureichende Vorgehensweise angesehen, da die Wartung erheblich schwieriger ist. Erfahren Sie mehr mit diesen einfachen CSS-Beispielen 10 Einfache CSS-Codebeispiele, die Sie in 10 Minuten lernen können 10 Einfache CSS-Codebeispiele, die Sie in 10 Minuten lernen können Wir werden uns mit der Erstellung eines Inline-Stylesheets befassen, damit Sie Ihre CSS-Kenntnisse üben können. Dann gehen wir auf 10 grundlegende CSS-Beispiele ein. Ab hier ist Ihrer Fantasie keine Grenze mehr gesetzt! Weiterlesen .

JavaScript

Wir haben gesehen, dass HTML den Inhalt definiert und CSS das Erscheinungsbild bestimmt. JavaScript, das letzte Mitglied des Trios, das für das Web von entscheidender Bedeutung ist, ermöglicht es den Webseiten, auf Aktionen von Personen zu reagieren, ohne jedes Mal eine neue Seite zu laden.

Beispiel: Mit JavaScript kann eine Website Sie warnen, dass das eingegebene Kennwort nicht den Anforderungen entspricht, bevor Sie versuchen, es zu übermitteln. Ein Webdesigner verwendet möglicherweise JavaScript, um durch Bilder in einer Diashow zu blättern oder den Benutzer zur Eingabe aufzufordern.

Dies sind nur einige elementare Beispiele. JavaScript ist eine Skriptsprache, die eine ganze Menge kann und vergleichsweise viel komplizierter ist als HTML und CSS. Sehen Sie sich unsere Übersicht über JavaScript an. Was ist JavaScript und wie funktioniert es? Was ist JavaScript und wie funktioniert es? Was ist Javascript? Es ist eine Programmiersprache, die zur Verbesserung von Webseiten verwendet wird. Es umfasst die dynamische Aktualisierung von Webseiten, Benutzeroberflächen und mehr. Lassen Sie uns untersuchen, worum es bei Javascript geht. Lesen Sie mehr für viel mehr.

Der Blick auf den gesamten Umfang des Webdesigns geht über den Rahmen dieses Artikels hinaus. Es genügt jedoch zu sagen, dass HTML mit anderen Sprachen interagiert, um die Webseiten zu erstellen, die wir heute kennen.

Die Entwicklung von HTML

Es ist wichtig zu beachten, dass HTML nicht statisch ist. HTML wurde mehrfach überarbeitet, zuletzt HTML 5. Insbesondere unterstützt dieser Standard das native Einbetten von Videos, anstatt proprietäre Formate wie Adobe Flash zu verwenden.

Neue Iterationen von HTML deklarieren von Zeit zu Zeit bestimmte archaische Tags als veraltet. Dazu gehören schreckliche Tags wie und (dieser Scroll- bzw. Flash-Text), wie man ihn häufig im Website-Design der 1990er Jahre findet. Denken Sie also daran, dass sich Standards im Laufe der Zeit ändern.

Ein bisschen HTML-Wissen ist ein langer Weg

Wir haben einen kurzen Überblick über die Funktionsweise eines HTML-Dokuments gegeben. Jetzt kennen Sie die Grundlagen zum Aufbau von Webseiten. Auch wenn Sie keine Webseiten mehr erstellen, sind Sie sich des Web, das Sie jeden Tag verwenden, ein bisschen bewusster.

Um mehr zu erfahren, aktualisieren Sie Ihre Webentwicklungsfähigkeiten mit wichtigen Tools. Aktualisieren Sie Ihre Webentwicklungsfähigkeiten mit diesen 10 wichtigen Tools. Aktualisieren Sie Ihre Webentwicklungsfähigkeiten mit diesen 10 wichtigen Tools. Diese Online-Tools für neue und erfahrene Webentwickler verbessern garantiert Ihre Fähigkeiten! Lesen Sie mehr und lesen Sie dann unseren Leitfaden zum Entwerfen Ihrer ersten Website. So erstellen Sie eine Website: Für Anfänger So erstellen Sie eine Website: Für Anfänger Heute werde ich Sie durch den Prozess der Erstellung einer vollständigen Website von Grund auf neu führen. Mach dir keine Sorgen, wenn dies schwierig klingt. Ich werde dich durch jeden Schritt des Weges führen. Weiterlesen .

Bildnachweis: Belyaevskiy / Depositphotos

Erfahren Sie mehr über: HTML, HTML5, JavaScript, Programmierung, Webentwicklung, Webmaster-Tools.