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.

17 Einfache HTML-Codebeispiele, die Sie in 10 Minuten lernen können

Werbung Obwohl moderne Websites im Allgemeinen mit benutzerfreundlichen Oberflächen erstellt werden, ist es hilfreich, einige grundlegende HTML-Kenntnisse zu haben. Wenn Sie die folgenden 17 HTML-Beispiel-Tags (und einige Extras) kennen, können Sie eine einfache Webseite von Grund auf neu erstellen oder den von einer App wie WordPress erstellten Code optimieren.

Werbung

Obwohl moderne Websites im Allgemeinen mit benutzerfreundlichen Oberflächen erstellt werden, ist es hilfreich, einige grundlegende HTML-Kenntnisse zu haben. Wenn Sie die folgenden 17 HTML-Beispiel-Tags (und einige Extras) kennen, können Sie eine einfache Webseite von Grund auf neu erstellen oder den von einer App wie WordPress erstellten Code optimieren.

Wir haben HTML-Codebeispiele mit Ausgaben für die meisten Tags bereitgestellt. Wenn Sie sie in Aktion sehen möchten, laden Sie die HTML-Beispieldatei am Ende des Artikels herunter. Sie können damit in einem Texteditor spielen und es in einem Browser laden, um zu sehen, was Ihre Änderungen bewirken.

1.

Sie benötigen dieses Tag zu Beginn jedes von Ihnen erstellten HTML-Dokuments. Es stellt sicher, dass ein Browser weiß, dass er HTML liest und dass er HTML5, die neueste Version, erwartet.

Auch wenn dies eigentlich kein HTML-Tag ist, ist es dennoch gut zu wissen.

2.

Dies ist ein weiteres Tag, das einem Browser mitteilt, dass er HTML liest. Das Tag wird direkt nach dem DOCTYPE-Tag eingefügt, und Sie schließen es direkt am Ende Ihrer Datei mit einem Tag. Alles andere in Ihrem Dokument befindet sich zwischen diesen Tags.

3.

Das Tag startet den Header-Abschnitt Ihrer Datei. Das, was hier reinkommt, erscheint nicht auf Ihrer Webseite. Stattdessen enthält es Metadaten für Suchmaschinen und Informationen für Ihren Browser.

Bei einfachen Seiten enthält das Tag Ihren Titel, und das war's auch schon. Es gibt jedoch noch einige andere Dinge, die Sie einbeziehen können, auf die wir gleich noch eingehen werden.

4.

HTML-Titel-Tag

Dieses Tag legt den Titel Ihrer Seite fest. Alles, was Sie tun müssen, ist, Ihren Titel in das Tag einzufügen und es so zu schließen (ich habe auch die Header-Tags eingefügt):

  My Website 

Dies ist der Name, der als Registerkartentitel angezeigt wird, wenn er in einem Browser geöffnet wird.

5.

Wie das Titel-Tag werden Metadaten in den Kopfbereich Ihrer Seite gestellt. Metadaten werden hauptsächlich von Suchmaschinen verwendet und sind Informationen darüber, was sich auf Ihrer Seite befindet. Es gibt eine Reihe verschiedener Metafelder, die jedoch zu den am häufigsten verwendeten gehören:

  • description: Eine grundlegende Beschreibung Ihrer Seite.
  • keywords - Eine Auswahl von Schlüsselwörtern, die auf Ihre Seite zutreffen.
  • author: Der Autor Ihrer Seite.
  • Ansichtsfenster: Ein Tag, mit dem sichergestellt wird, dass Ihre Seite auf allen Geräten gut aussieht.

Hier ist ein Beispiel, das auf diese Seite zutreffen könnte:

 

Das "Viewport" -Tag sollte immer "width = device-width, initial-scale = 1.0" als Inhalt haben, um sicherzustellen, dass Ihre Seite auf Mobil- und Desktopgeräten gut angezeigt wird.

6.

Nachdem Sie den Header-Bereich geschlossen haben, gelangen Sie zum Hauptteil. Sie öffnen dies mit dem Tag und schließen es mit dem Tag. Das geht direkt am Ende Ihrer Datei, kurz vor dem Tag.

Der gesamte Inhalt Ihrer Webseite befindet sich zwischen diesen Tags. So einfach es klingt:

  Everything you want displayed on your page. 

7.

Das

Das Tag definiert einen Level-1-Header auf Ihrer Seite. Dies ist normalerweise der Titel, und im Idealfall ist auf jeder Seite nur einer vorhanden.

definiert Überschriften der Ebene zwei, wie z. B. Abschnittsüberschriften,

Unterüberschriften der Ebene drei und so weiter, bis hinunter zu

. Die Namen der Tags in diesem Artikel sind beispielsweise Überschriften der zweiten Ebene.

Großer und wichtiger Header

Etwas weniger großer Header

Sub-Header

Ergebnis:

HTML-Header-Tags

Wie Sie sehen, werden sie auf jeder Ebene kleiner.

8.

Das Absatz-Tag startet einen neuen Absatz. Dies fügt normalerweise zwei Zeilenumbrüche ein.

Schauen Sie sich zum Beispiel den Bruch zwischen der vorherigen und dieser Zeile an. Das ist was a

tag reicht aus.

Dein erster Absatz.

Dein zweiter Absatz.

Ergebnis:

Dein erster Absatz.

Dein zweiter Absatz.

Sie können auch CSS-Stile in Ihren Absatz-Tags verwenden, wie diesen, der die Textgröße ändert:

20% größerer Text

Ergebnis:

20% größerer Text

In diesen HTML- und CSS-Tutorials erfahren Sie, wie Sie Ihren Text mit CSS gestalten.

9.

Das Zeilenumbruch-Tag fügt einen einzelnen Zeilenumbruch ein:

Die erste Zeile.
Die zweite Zeile (in der Nähe der ersten).

Ergebnis:

Die erste Zeile.
Die zweite Zeile (in der Nähe der ersten).

In ähnlicher Weise zu arbeiten ist die


Etikett. Dies zeichnet eine horizontale Linie auf Ihrer Seite und eignet sich zum Trennen von Textabschnitten.

10.

Dieses Tag definiert wichtigen Text. Im Allgemeinen bedeutet das, dass es fett sein wird. Es ist jedoch möglich, CSS zu verwenden, um die Textanzeige anders zu gestalten.

Sie können jedoch Text ohne Bedenken fett formatieren.

 Very important things you want to say. 

Ergebnis:

Sehr wichtige Dinge, die Sie sagen möchten.

Wenn Sie mit dem Tag für Fettdruck vertraut sind , können Sie es trotzdem verwenden. Es gibt keine Garantie, dass es in zukünftigen Versionen von HTML weiterhin funktioniert, aber im Moment funktioniert es.

11.

Like und , und sind verwandt. Das Tag kennzeichnet hervorgehobenen Text, was im Allgemeinen bedeutet, dass er kursiv gedruckt wird. Auch hier besteht die Möglichkeit, dass CSS die Hervorhebung von Text anders darstellt.

 An emphasized line. 

Ergebnis:

Eine hervorgehobene Linie.

Das Tag funktioniert weiterhin, aber es ist auch möglich, dass es in zukünftigen HTML-Versionen veraltet sein wird.

12.

Mit dem Tag oder Anker können Sie Links erstellen. Ein einfacher Link sieht so aus:

 Go to MakeUseOf 

Ergebnis:

Gehen Sie zu MakeUseOf

Das Attribut "href" gibt das Ziel der Verknüpfung an. In vielen Fällen wird dies eine andere Website sein. Es kann sich auch um eine Datei handeln, z. B. ein Bild oder eine PDF-Datei.

Weitere nützliche Attribute sind "Ziel" und "Titel". Das Zielattribut wird fast ausschließlich zum Öffnen eines Links in einem neuen Tab oder Fenster verwendet.

 Go to MakeUseOf in a new tab 

Ergebnis:

Gehen Sie in einer neuen Registerkarte zu MakeUseOf

Das Attribut "title" erstellt einen Tooltip. Bewegen Sie den Mauszeiger über den folgenden Link, um zu sehen, wie es funktioniert:

 Hover over this to see the tool tip 

Ergebnis:

Bewegen Sie den Mauszeiger darüber, um den Tooltip anzuzeigen

13.

Wenn Sie ein Bild in Ihre Seite einbetten möchten, müssen Sie das Bild-Tag verwenden. Normalerweise wird es in Verbindung mit dem Attribut "src" verwendet. Dies gibt die Quelle des Bildes wie folgt an:

  

Ergebnis:

Sonnenbeschienene Vögel Bild mit img src Tags

Andere Attribute sind verfügbar, z. B. "Höhe", "Breite" und "Alt". So könnte das aussehen:

 den Namen Ihres Bildes 

Wie zu erwarten, bestimmen die Attribute "Höhe" und "Breite" die Höhe und Breite des Bildes. Im Allgemeinen ist es eine gute Idee, nur einen davon festzulegen, damit das Bild richtig skaliert wird. Wenn Sie beide verwenden, kann das Bild gestreckt oder gestaucht werden.

Das "alt" -Tag teilt dem Browser mit, welcher Text angezeigt werden soll, wenn das Bild nicht angezeigt werden kann, und es empfiehlt sich, ihn in jedes Bild aufzunehmen. Wenn jemand eine besonders langsame Verbindung oder einen alten Browser hat, kann er trotzdem eine Vorstellung davon bekommen, was auf Ihrer Seite sein sollte.

14.

    Mit dem Tag für die geordnete Liste können Sie eine geordnete Liste erstellen. Im Allgemeinen bedeutet dies, dass Sie eine nummerierte Liste erhalten. Jedes Element in der Liste benötigt ein Listenelement-Tag (

  1. ), Ihre Liste sieht also so aus:

    1. Erste Sache
    2. Zweite Sache
    3. Dritte Sache

    Ergebnis:

    1. Erste Sache
    2. Zweite Sache
    3. Dritte Sache

    In HTML5 können Sie verwenden

      um die Reihenfolge der Zahlen umzukehren. Und Sie können den Startwert mit dem Startattribut festlegen.

      Mit dem Attribut "Typ" können Sie dem Browser mitteilen, welcher Symboltyp für die Listenelemente verwendet werden soll. Es kann auf "1", "A", "a", "I" oder "i" gesetzt werden, um die Liste so einzustellen, dass sie mit dem angegebenen Symbol angezeigt wird:

        fünfzehn.

          Die ungeordnete Liste ist viel einfacher als das geordnete Gegenstück. Es ist einfach eine Liste mit Aufzählungszeichen.

          • Erster Gegenstand
          • Zweiter Punkt
          • Dritter Punkt

          Ergebnis:

          • Erster Gegenstand
          • Zweiter Punkt
          • Dritter Punkt

          Ungeordnete Listen haben auch Typattribute, und Sie können sie auf "Disc", "Circle" oder "Square" einstellen.

          16.

          Während das Verwenden von Tabellen zum Formatieren verpönt ist, sollten Sie häufig Zeilen und Spalten verwenden, um Informationen auf Ihrer Seite zu segmentieren. Es werden mehrere Tags benötigt, um eine Tabelle zum Laufen zu bringen. Hier ist der Beispiel-HTML-Code:

          1. Spalte2. Spalte
          Zeile 1, Spalte 1Zeile 1, Spalte 2
          Zeile 2, Spalte 1Zeile 2, Spalte 2

          Das

          und
          Tags geben den Anfang und das Ende der Tabelle an. Das Das Tag enthält den gesamten Tabelleninhalt.

          Jede Zeile der Tabelle ist in a eingeschlossen Etikett. Jede Zelle in jeder Zeile wird in eine der beiden eingeschlossen Tags für Spaltenüberschriften oder Tags für Spaltendaten. Sie benötigen eine davon für jede Spalte in jeder Zeile.

          Ergebnis:

          1. Spalte2. Spalte
          Zeile 1, Spalte 1Zeile 1, Spalte 2
          Zeile 2, Spalte 1Zeile 2, Spalte 2

          17.

          Wenn Sie eine andere Website oder Person zitieren und das Zitat vom Rest Ihres Dokuments abheben möchten, verwenden Sie das Blockquote-Tag. Alles, was Sie tun müssen, ist, das Zitat in öffnende und schließende blockquote-Tags einzuschließen:

          Das Web, wie ich es mir vorgestellt habe, haben wir noch nicht gesehen. Die Zukunft ist immer noch so viel größer als die Vergangenheit.

          Ergebnis:

          Das Web, wie ich es mir vorgestellt habe, haben wir noch nicht gesehen. Die Zukunft ist immer noch so viel größer als die Vergangenheit.

          Die genaue Formatierung kann vom verwendeten Browser oder vom CSS Ihrer Site abhängen. Der Tag bleibt jedoch derselbe.

          Weiter und HTML

          Mit diesen 17 HTML-Beispielen (und Zählung) sollten Sie in der Lage sein, eine einfache Website zu erstellen. 5 Kostenlose HTML-Vorlagen zum einfachen Erstellen von schnellen Websites. 5 Kostenlose HTML-Vorlagen zum einfachen Erstellen von schnellen Websites. Ich habe keine HTML-Kenntnisse. Weiterlesen . Um zu sehen, wie Sie alle zusammenfügen, können Sie unsere Beispiel-HTML-Seite herunterladen. Öffnen Sie es in Ihrem Browser, um zu sehen, wie alles zusammenkommt, oder in einem Texteditor, um genau zu sehen, wie der Code funktioniert.

          Probieren Sie diese Microlearning-Apps für das Codieren aus, wenn Sie mehr in HTML lernen möchten. Möchten Sie das grundlegende Codieren erlernen? Probieren Sie in Ihrer Freizeit 5 Bite-Sized-Coding-Apps aus. Möchten Sie die grundlegende Codierung erlernen? Probieren Sie 5 Bite-Sized-Coding-Apps in Ihrer Freizeit aus. Sie möchten die grundlegende Codierung erlernen, haben aber wenig Zeit? Diese mundgerechten Codierungs-Apps nehmen nur wenige Minuten Ihres anstrengenden Tages in Anspruch. Weiterlesen .

          Erfahren Sie mehr über: Coding Tutorials, HTML, Webentwicklung, Wordpress.