Programmierung

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 / Programmierung
Pinterest WhatsApp Email

Auch wenn moderne Websites im Allgemeinen mit benutzerfreundlichen Schnittstellen erstellt werden 10 Möglichkeiten, eine kleine und einfache Website ohne Overkill zu erstellen 10 Möglichkeiten, eine kleine und einfache Website ohne Overkill zu erstellen WordPress kann ein Overkill sein. Wie diese anderen ausgezeichneten Dienste beweisen, ist WordPress nicht das A und O für die Erstellung von Websites. Wenn Sie einfachere Lösungen wünschen, gibt es eine Vielzahl von Möglichkeiten. Lesen Sie mehr, es ist immer noch gut, einige grundlegende HTML-Kenntnisse zu kennen. Wenn Sie die folgenden 17 Tags (und die wenigen zusätzlichen Tags) kennen, können Sie eine grundlegende Webseite von Grund auf erstellen oder den von einer App wie WordPress Blogger oder Wordpress.com erstellten Code optimieren: Ein vollständiger Vergleich Blogger vs. Wordpress.com: Ein vollständiger Vergleich Die beiden unbestrittenen Könige der freien Blogger-Sphäre sind Googles Blogger und das Content-Management-System, aus dem WordPress.com wurde. Während beide bieten, was jede frei denkende, die Demokratie verschwendende Denkkanone will - einen Ort, an dem sie sich ausdrücken können - dort… Lesen Sie mehr .

Ich habe Beispiele für die meisten Tags bereitgestellt. Wenn Sie sie jedoch in Aktion sehen möchten, laden Sie die verknüpfte HTML-Datei am Ende des Artikels herunter. Sie können damit in einem Texteditor spielen und ihn in einen Browser laden, um zu sehen, was Ihre Änderungen bewirken.

1.

Sie benötigen dieses Tag am Anfang jedes HTML-Dokuments, das Sie erstellen. Es stellt sicher, dass ein Browser weiß, dass er HTML liest, und dass er HTML5 erwartet, die neueste Version. Was ist HTML5 und wie ändert sich die Art, wie ich browse? [MakeUseOf erklärt] Was ist HTML5 und wie ändert sich die Art und Weise, wie ich browse? [MakeUseOf Explains] In den letzten Jahren haben Sie möglicherweise gelegentlich den Begriff HTML5 gehört. Unabhängig davon, ob Sie etwas über Webentwicklung wissen oder nicht, das Konzept kann etwas nebulös und verwirrend sein. Natürlich… Lesen Sie mehr .

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

HTML-Code-Beispiel
Bildnachweis: Yurich via Shutterstock

2.

Dies ist ein weiteres Tag, das einem Browser mitteilt, dass er HTML liest. Warum brauchen wir beides? Wer weiß? Aber es ist eine gute Idee, es trotzdem einzusetzen.

Fügen Sie am Ende Ihres Dokuments ein Etikett.

3.

Für Grundseiten ist die Tag wird Ihren Titel enthalten, und das war es auch schon. Aber es gibt noch ein paar andere Dinge, die Sie einschließen können, die wir gleich besprechen werden.

4. </h2><p>Wie zu erwarten, definiert dies den Titel Ihrer Seite. 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):</p><pre><code><head> <title>Meine Webseite

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

HTML-Tag-Tag

5.

Wie das title-Tag werden Metadaten in den Kopfzeilenbereich Ihrer Seite eingefügt (diese Metadaten sind im Gegensatz zu Metadaten Ihrer mobilen Geräte Metadaten - Informationen zu Ihren Informationen Metadaten - Die Informationen zu Ihren Informationen Lesen Sie mehr). Metadaten werden hauptsächlich von Suchmaschinen verwendet und enthalten - wie Sie vielleicht erwarten - Informationen zu den Informationen auf Ihrer Seite. Es gibt eine Reihe verschiedener Meta-Felder, die jedoch am häufigsten verwendet werden:

  • Beschreibung - Eine grundlegende Beschreibung Ihrer Seite.
  • Schlüsselwörter - Eine Auswahl von Keywords, die auf Ihre Seite zutreffen.
  • Autor - Der Autor Ihrer Seite.
  • Sichtfenster - Ein Tag, um sicherzustellen, dass Ihre Seite auf allen Geräten gut aussieht.

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

Das “Sichtfenster” Tag sollte immer haben “Breite = Gerätebreite, anfängliche Skala = 1,0” als Inhalt, um sicherzustellen, dass Ihre Seite auf mobilen Geräten und Desktopgeräten gut angezeigt wird.

6.

Der Körper Ihrer Webseite - im Grunde ist alles, was nicht der Titel ist, im Body-Tag enthalten. Es ist so einfach wie es klingt:

 Alles, was Sie auf Ihrer Seite anzeigen möchten.

7.

Das

Tag definiert Kopfzeilen der ersten Ebene auf Ihrer Seite.

Definiert Kopfzeilen der Ebene 2,

Stufe drei und so weiter bis

. Die Namen der Tags in diesem Artikel sind beispielsweise Kopfzeilen der Ebene 2.

Große und wichtige Kopfzeile
 
Etwas weniger großer Header
 
Sub-Header

Ergebnis:

Große und wichtige Kopfzeile

Etwas weniger großer Header

Sub-Header

Wie Sie sehen, werden sie auf jeder Ebene kleiner.

8.

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

Sehen Sie sich zum Beispiel den Bruch zwischen der vorherigen und dieser Zeile an. Das ist was für ein

Tag wird es tun.

Dein erster Absatz.
 
Dein zweiter Absatz.

Ergebnis:

Dein erster Absatz.

Dein zweiter Absatz.

Sie können auch CSS-Stile in Ihren Absatz-Tags verwenden:

20% größerer Text

Ergebnis:

20% größerer Text

Um zu lernen, wie Sie mit CSS CSS formatieren können, lesen Sie diese HTML- und CSS-Tutorials. Lernen Sie HTML und CSS mit diesen Step-by-Step-Tutorials. Lernen Sie HTML und CSS mit diesen Step-by-Step-Tutorials. Neugierig auf HTML, CSS und JavaScript? Wenn Sie der Meinung sind, wie Sie eine Website von Grund auf neu erstellen können, dann haben Sie hier einige großartige Schritt-für-Schritt-Anleitungen, die einen Versuch wert sind. Weiterlesen .

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).

Hinweis: Manchmal wird dieses Tag als geschrieben
oder
. Es tut dasselbe (der Schrägstrich macht das Tag in XHTML lesbar. "Learn to Speak": Ihr Leitfaden zu xHTML: Learn to Speak "Internet": Ihr Leitfaden für xHTML Willkommen in der Welt von XHTML - Extensible Hypertext Markup Language - ein Markup Sprache, die es jedem ermöglicht, Webseiten mit vielen verschiedenen Funktionen zu erstellen. Dies ist die Hauptsprache des Internets..

10.

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

Sie können jedoch sicher verwenden fetten Text.

Sehr wichtige Dinge, die Sie sagen möchten.

Ergebnis:

Sehr wichtige Dinge, die Sie sagen möchten.

Wenn Sie mit dem vertraut sind Tag für fetten Text können Sie immer noch verwenden. Es gibt keine Garantie dafür, dass es in zukünftigen HTML-Versionen weiterhin funktionieren wird, aber vorerst funktioniert es.

11.

Mögen und , und sind verwandt. Das Tag kennzeichnet hervorgehobenen Text, was im Allgemeinen bedeutet, dass er kursiv wird. Auch hier besteht die Möglichkeit, dass CSS betonte Textdarstellung anders macht.

Eine betonte Linie.

Ergebnis:

Eine betonte Linie.

Das Tag funktioniert immer noch, aber es ist auch möglich, dass es in zukünftigen HTML-Versionen nicht mehr verwendet wird.

12.

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

Gehen Sie zu MakeUseOf in einem neuen Tab

Ergebnis:

Gehen Sie zu MakeUseOf in einem neuen Tab

Das “Titel” Attribut erstellt eine QuickInfo. Bewegen Sie den Mauszeiger über den Link, um zu sehen, was ich meine:

Bewegen Sie die Maus über diesen

Ergebnis:

Bewegen Sie die Maus über diesen

13.

Wenn Sie ein Bild in Ihre Seite einbetten möchten, müssen Sie das Bild-Tag verwenden. Am einfachsten verwenden Sie dazu einfach die Quelle des Bildes “src” Attribut wie folgt:

Ergebnis:

17 Einfache HTML-Code-Beispiele, die Sie in 10 Minuten lernen können wp-content / uploads / 2016/02 / hdr-moderation.png” />

Das beinhaltet das Bild. Es gibt jedoch eine Reihe weiterer Attribute, die Sie gerne verwenden möchten, z “Höhe,” “Breite,” und “alt.” So könnte das aussehen:

Ergebnis:

17 Einfache HTML-Code-Beispiele, die Sie in 10 Minuten lernen können wp-content / uploads / 2016/02 / hdr-moderation.png” alt =”der Name Ihres Bildes” width =”320 "/>

Wie Sie vielleicht erwarten, die “Höhe” und “Breite” Attribute legen die Höhe und Breite des Bildes fest. Im Allgemeinen ist es eine gute Idee, nur einen von ihnen so einzustellen, dass das Bild korrekt skaliert wird. Wenn Sie beide verwenden, können Sie ein gestrecktes oder zerquetschtes Bild erhalten.

Das “alt” tag sagt dem Browser, welcher Text angezeigt werden soll, wenn das Bild nicht angezeigt werden kann. Es ist eine gute Idee, es in ein Bild aufzunehmen. Wenn jemand eine besonders langsame Verbindung hat 4 Gründe, warum Ihr WLAN so langsam ist (und wie diese zu beheben sind) 4 Gründe, warum Ihr WLAN so langsam ist (und wie Sie es beheben können) Leiden Sie unter langsamen WLAN? Diese vier Probleme können Ihr Netzwerk verlangsamen. So lösen Sie sie, um wieder schneller zu werden. Lesen Sie mehr oder einen alten Browser. Sie können sich trotzdem ein Bild davon machen, was Sie auf Ihrer Seite haben.

14.

    Mit dem Tag für geordnete Liste können Sie eine geordnete Liste erstellen. Im Allgemeinen bedeutet dies, dass Sie eine nummerierte Liste erhalten. Für jedes Element in der Liste ist ein Listenelement-Tag erforderlich (

  1. ), so sieht Ihre Liste so aus:

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

    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. Das “Art” Mit dem Attribut können Sie dem Browser mitteilen, welche Art von Symbol für die Listenelemente verwendet werden soll. Es kann auf eingestellt werden “1,” “EIN,” “ein,” “ich,” oder “ich,” Einstellen der Liste mit dem angezeigten Symbol.

      fünfzehn.

        Die ungeordnete Liste ist viel einfacher als ihr geordnetes 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 “Art” Attribute, und Sie können es festlegen “Scheibe,” “Kreis,” oder “Quadrat.”

        16.

        Während die Verwendung von Tabellen für die Formatierung missbilligt wird, gibt es viele Situationen, in denen Sie Zeilen und Spalten verwenden möchten, um Informationen auf Ihrer Seite zu segmentieren. Es gibt eine Reihe von Tags, die Sie verwenden müssen, damit eine Tabelle funktioniert. Schauen Sie sich dieses Beispiel an und Sie werden sehen, was ich meine:

        Erste Spalte Zweite Spalte
        Zeile 1, Spalte 1 Zeile 1, Spalte 2
        Zeile 2, Spalte 1 Zeile 2, Spalte 2
        Erste Spalte Zweite Spalte
        Zeile 1, Spalte 1 Zeile 1, Spalte 2

        Jeder tag umgibt einen Header (manchmal sieht man diese in einem auch tag). setzt den Körper der Tabelle ab. Das tag setzt eine neue Tabellenzeile ab und jede Tag identifiziert eine Zelle in dieser Zeile.

        17.

        Wenn Sie eine andere Website oder Person zitieren und das Angebot vom Rest Ihres Dokuments unterscheiden möchten, erledigt das blockquote-Tag dies für Sie. Alles, was Sie tun müssen, ist, das Angebot in öffnende und schließende blockquote-Tags einzufügen:

        Ich darf keine Angst haben. Angst ist der Gedankenkiller. Angst ist der kleine Tod, der völlige Auslöschung bringt. Ich werde meiner Angst ins Auge blicken. Ich werde es mir erlauben, über mich und durch mich hindurchzugehen. Und wenn es vorbei ist, werde ich das innere Auge wenden, um seinen Weg zu sehen. Wo die Angst gegangen ist, wird es nichts geben. Nur ich werde bleiben.

        Ergebnis:

        Ich darf keine Angst haben. Angst ist der Gedankenkiller. Angst ist der kleine Tod, der völlige Auslöschung bringt. Ich werde meiner Angst ins Auge blicken. Ich werde es mir erlauben, über mich und durch mich hindurchzugehen. Und wenn es vorbei ist, werde ich das innere Auge wenden, um seinen Weg zu sehen. Wo die Angst gegangen ist, wird es nichts geben. Nur ich werde bleiben.

        Die genaue Formatierung hängt von dem verwendeten Browser oder dem CSS Ihrer Website ab. Der Tag bleibt jedoch gleich.

        Weiter und HTML

        Mit diesen 17 (und einigen weiteren) HTML-Tags sollten Sie eine einfache Webseite erstellen können. Um zu sehen, wie Sie alle zusammenstellen können, können Sie die von mir erstellte Beispiel-HTML-Seite herunterladen. Sie können es in Ihrem Browser öffnen, um zu sehen, wie alles zusammenkommt, oder in einem Texteditor, um genau zu sehen, wie der Code funktioniert.

        Verwenden Sie regelmäßig HTML? Welche anderen Tags finden Sie häufig? Teilen Sie Ihre Tipps in den Kommentaren unten mit!