17 einfache HTML-Code-Beispiele, die Sie in 10 Minuten lernen können

17 einfache HTML-Code-Beispiele, die Sie in 10 Minuten lernen können

Obwohl moderne Websites im Allgemeinen mit benutzerfreundlichen Oberflächen erstellt werden, ist es nützlich, grundlegende HTML-Kenntnisse zu kennen. 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 Ausgabe 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 in einen Browser laden, um zu sehen, was Ihre Änderungen bewirken.



1.

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





Auch wenn dies 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 steht direkt nach dem DOCTYPE-Tag und Sie schließen es mit einem Tag direkt am Ende Ihrer Datei. Alles andere in Ihrem Dokument liegt zwischen diesen Tags.



3.

Das Tag startet den Header-Abschnitt Ihrer Datei. Die hier eingegebenen Inhalte erscheinen 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 es auch schon. Aber es gibt noch ein paar andere Dinge, die Sie einbeziehen können, auf die wir gleich eingehen werden.



Vier.

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


My Website

Dies ist der Name, der beim Öffnen in einem Browser als Registerkartentitel angezeigt wird.



5.

Wie das Title-Tag werden Metadaten im Header-Bereich Ihrer Seite platziert. Metadaten werden hauptsächlich von Suchmaschinen verwendet und sind Informationen darüber, was sich auf Ihrer Seite befindet. Es gibt eine Reihe verschiedener Metafelder, aber dies sind einige der am häufigsten verwendeten:

  • Bezeichnung : Eine grundlegende Beschreibung Ihrer Seite.
  • Schlüsselwörter : Eine Auswahl von Schlüsselwörtern, die auf Ihre Seite anwendbar sind.
  • Autor : Der Autor Ihrer Seite.
  • Ansichtsfenster : Ein Tag, um sicherzustellen, 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 Desktop-Geräten gut angezeigt wird.

6.

Nachdem Sie den Kopfzeilenabschnitt geschlossen haben, gelangen Sie zum Hauptteil. Diese öffnen Sie mit dem Tag und schließen Sie mit dem Tag. Das steht direkt am Ende Ihrer Datei, kurz vor dem Tag.

Der gesamte Inhalt Ihrer Webseite befindet sich zwischen diesen Tags. Es ist so einfach wie es klingt:


Everything you want displayed on your page.

7.

Etwas weniger großer Header


Unterüberschrift

Ergebnis:

Wie Sie sehen können, werden sie mit jedem Level kleiner.

8.

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

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

Tag tun wird.

Your first paragraph.


Your second paragraph.

Ergebnis:

Dein erster Absatz.

Dein zweiter Absatz.

Du kannst auch CSS-Stile verwenden in Ihren Absatz-Tags, wie diese, die die Textgröße ändert:

This is 50% larger text.

Ergebnis:

9.

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

The first line.

The second line (close to the first one).

Ergebnis:

Auf ähnliche Weise zu arbeiten ist die

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

10.

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

App zum kostenlosen Telefonieren

Sie können jedoch sicher verwenden zu fettem Text.

Very important things you want to say.

Ergebnis:

Sehr wichtige Dinge, die Sie sagen möchten.

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

elf.

Mögen und , und sind verwandt. Die -Tag kennzeichnet hervorgehobenen Text, was im Allgemeinen bedeutet, dass er kursiv gedruckt wird. Auch hier besteht die Möglichkeit, dass CSS die Anzeige von hervorgehobenem Text anders gestaltet.

An emphasized line.

Ergebnis:

Eine betonte Linie.

Die -Tag funktioniert immer noch, aber auch hier ist es möglich, dass es in zukünftigen HTML-Versionen veraltet ist.

12.

Die , oder Anchor, Tag können Sie Links erstellen. Ein einfacher Link sieht so aus:

Gehe zu MUO

Das Attribut 'href' identifiziert das Ziel des Links. In vielen Fällen wird dies eine andere Website sein. Es kann sich auch um eine Datei wie ein Bild oder eine PDF-Datei handeln.

Andere nützliche Attribute sind 'Ziel' und 'Titel'. Das Zielattribut wird fast ausschließlich verwendet, um einen Link in einem neuen Tab oder Fenster zu öffnen, wie folgt:

Go to MUO in a new tab

Ergebnis:

Gehe zu MUO in einem neuen Tab

Das Attribut 'title' erstellt einen Tooltip. Fahren Sie mit der Maus ü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 Image-Tag verwenden. Normalerweise verwenden Sie es in Verbindung mit dem 'src'-Attribut. Dies gibt die Quelle des Bildes wie folgt an:

Ergebnis:

welches Mainboard habe ich?

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

the name of your image

Wie zu erwarten, legen die Attribute 'height' und 'width' die Höhe und Breite des Bildes fest. Im Allgemeinen ist es eine gute Idee, nur einen von ihnen einzustellen, damit das Bild richtig skaliert wird. Wenn Sie beide verwenden, können Sie am Ende ein gestrecktes oder gequetschtes Bild erhalten.

Das 'alt'-Tag teilt dem Browser mit, welcher Text angezeigt werden soll, wenn das Bild nicht angezeigt werden kann, und ist eine gute Idee, es in jedes Bild einzufügen. Wenn jemand eine besonders langsame Verbindung oder einen alten Browser hat, kann er sich trotzdem ein Bild davon machen, was auf Ihrer Seite stehen sollte.

14.

    Mit dem Tag 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. ), so sieht Ihre Liste so aus:


    1. First thing

    2. Second thing

    3. Third thing

    Ergebnis:

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

    In HTML5 können Sie

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

      Mit dem Attribut 'type' 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, wodurch die Liste mit dem angezeigten Symbol wie folgt angezeigt wird:

        fünfzehn.

          Die ungeordnete Liste ist viel einfacher als ihr geordnetes Gegenstück. Es ist einfach eine Aufzählungsliste.


          • First item

          • Second item

          • Third item

          Ergebnis:

          • Erster Gegenstand
          • Zweiter Artikel
          • Dritter Artikel

          Ungeordnete Listen haben auch 'Typ'-Attribute und Sie können sie auf 'Disc', 'Kreis' oder 'Quadrat' setzen.

          16.

          Während die Verwendung von Tabellen zur Formatierung verpönt ist, gibt es viele Fälle, in denen Sie Zeilen und Spalten verwenden möchten, um Informationen auf Ihrer Seite zu segmentieren. Es werden mehrere Tags benötigt, damit eine Tabelle funktioniert. Hier ist der Beispiel-HTML-Code:














          1st column 2nd column
          Row 1, column 1 Row 1, column 2
          Row 2, column 1 Row 2, column 2

          Die

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

          Jede Zeile der Tabelle ist in a . eingeschlossenSchild. Jede Zelle innerhalb jeder Zeile ist in entweder umhülltTags für Spaltenüberschriften, oderTags 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 Tag blockquote. Alles, was Sie tun müssen, ist das Zitat in öffnende und schließende Blockquote-Tags einzuschließen:

          The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

          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 verwendete Formatierung kann vom verwendeten Browser oder dem CSS Ihrer Website abhängen. Aber das Etikett bleibt gleich.

          HTML-Code-Beispiele

          Mit diesen 17 HTML-Beispielen sollten Sie in der Lage sein, eine einfache Website zu erstellen. Sie können sie alle gleich in einem Online-Texteditor testen, um ein Gefühl dafür zu bekommen, wie sie funktionieren.

          Probieren Sie einige Mikrolern-Apps zum Programmieren aus, um mundgerechtere Lektionen in HTML zu erhalten. Sie helfen Ihnen, sich in kürzester Zeit auf den neuesten Stand zu bringen.

          Teilen Teilen Tweet Email Möchten Sie grundlegende Codierung lernen? Probieren Sie in Ihrer Freizeit 5 mundgerechte Programmier-Apps aus

          Möchten Sie grundlegende Programmierkenntnisse erlernen, haben aber wenig Zeit? Diese mundgerechten Codierungs-Apps nehmen nur wenige Minuten Ihres arbeitsreichen Tages in Anspruch.

          Weiter lesen           Verwandte Themen
          • Programmierung
          • WordPress
          • HTML
          • Web Entwicklung
          • Codierungs-Tutorials
          Über den Autor Andy Betts(221 veröffentlichte Artikel)

          Andy ist ein ehemaliger Printjournalist und Zeitschriftenredakteur, der seit 15 Jahren über Technologie schreibt. In dieser Zeit hat er an unzähligen Publikationen mitgewirkt und Texterarbeiten für große Technologieunternehmen erstellt. Er hat auch Expertenkommentare für die Medien bereitgestellt und Podiumsdiskussionen bei Branchenveranstaltungen moderiert.

          Mehr von Andy Betts

          Abonniere unseren Newsletter

          Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

          Klicken Sie hier, um sich zu abonnieren