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

• Programmierung

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.

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:

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

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:

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

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 (

Erste Sache
Zweite Sache
Dritte Sache