So erstellen sie eine einfache webseite mit html

Distungieren Sie, wie Sie eine einfache Webseite mit HTML schreiben können (Hypertext Markup-Sprache). HTML ist eine der Kernkomponenten des World Wide Web, wodurch die Struktur von Webseiten besteht. Wenn Sie Ihre Webseite erstellt haben, können Sie es als HTML-Dokument speichern und in Ihrem Webbrowser anzeigen. Die Erstellung einer HTML-Seite ist mithilfe von Basis-Text-Editoren möglich, die auf Windows- und Mac-Computern gefunden werden.

Schritte

Teil 1 von 6:
Hinzufügen eines Kopfes zu Ihrem HTML
  1. Bildtitel 4082 1 2
1. Öffnen Sie einen Texteditor. Auf einem Computer, der das Windows-Betriebssystem ausführt, verwenden Sie normalerweise Notepad, oder Notepad ++, während MacOS-Benutzer TextEtit verwenden, und ChromeoS-Benutzer verwenden Text:
  • Windows - Öffnen Start
Bildtitel WindowsStart.jpg
, eintippen Notizblock, oder Notizblock++ und klicken Notizblock oder "Notepad ++ oder sublim" An der Spitze des Fensters.
  • Mac OS - Klicken Scheinwerfer
    Bildtitel MacSpotlight.jpg
    , eintippen textEdit, und doppelklicken Sie auf TextEdit An der Spitze der Ergebnisse.
  • Chromos - Öffnen Sie den Launcher und klicken Sie dann auf Text. (Das Symbol sagt Code Pad).
  • Bildtitel 4082 2 2
    2. Eintippen und drücke ↵ ENTER. Dies weist den Webbrowser an, dass dies ein HTML-Dokument ist.
  • Bildtitel 4082 3 2
    3. Typ und drücken ↵ ENTER. Dieses Öffnungs-Tag für Ihren HTML-Code.
  • Bildtitel 4082 4 2
    4. Geben Sie ein und drücken Sie ↵ ENTER. Dies ist das Tag, das Ihren HTML-Kopf öffnet. Die HTML-Head-Informationen, die normalerweise nicht auf Ihrer Webseite angezeigt wird. Diese Informationen können den Titel, Metadaten, CSS-Stylesheets und andere Skriptsprachen aufweisen.
  • Bildtitel 4082 5 2
    5. Eintippen . Dies ist das Tag, um einen Titel Ihrer Seite hinzuzufügen.
  • Bildtitel 4082 6 2
    6. Geben Sie einen Titel für Ihre Webseite ein. Dies kann jeder Titel sein, den Sie Ihre Webseite nennen möchten.
  • Bildtitel 4082 7 2
    7. Geben Sie ein und drücken Sie ↵ ENTER. Dies ist das Tag, um Ihr Titel-Tag zu schließen.
  • Bildtitel 4082 8 2
    8. Typ und drücken ↵ ENTER. Dies ist das Tag, um den Kopf zu schließen. Ihr HTML-Code sollte so etwas aussehen.
    • Teil 2 von 6:
    Hinzufügen eines Körpers und Textes an Ihr HTML
    1. Bildtitel 4082 9 2
    1. Geben Sie unter das geschlossene ein "Kopf" Etikett. Dieses Tag eröffnet den Körper Ihres HTML-Dokuments. Alles, was in den HTML-Body-Anzeigen auf der Webseite geht.
  • Bildtitel 4082 10 2
    2. Eintippen . Dies ist das Tag, um eine Überschrift zu Ihrem HTML-Dokument hinzuzufügen. Eine Überschrift ist großer fetter Text, der normalerweise oben in Ihrem HTML-Dokument geht.
  • Bildtitel 4082 11 2
    3. Geben Sie eine Überschrift für Ihre Seite ein. Dies kann der Titel Ihrer Seite oder einer Begrüßung sein.
  • Bildtitel 4082 12 2
    4. Geben Sie nach Ihrem Kurstext ein und drücken Sie ↵ ENTER. Dieses Tag schließt Ihre Überschrift.
  • Fügen Sie zusätzliche Überschriften hinzu, wie Sie gehen. Es gibt sechs verschiedene Überschriften, die Sie mithilfe der THEMA-Tags erstellen können. Diese erstellen Überschriften verschiedener Größen. Um beispielsweise drei unterschiedliche Überschriften in Folge zu erstellen, können Sie Folgendes schreiben:
  • Die Überschriften zeigen die Priorität oder Wichtigkeit des Textes. Es ist jedoch nicht notwendig, eine höhere Überschrift zu verwenden, wenn Sie eine niedrigere Überschrift verwenden möchten. Man kann nur H3 benutzen, auch wenn es in Ihrem Beitrag kein H1 gibt.
  • Bildtitel 4082 13 2
    5. Art . Dies ist das Tag, um einen Absatz zu eröffnen. Absatztext wird verwendet, um den normalen Text anzuzeigen.
  • Bildtitel 4082 14 2
    6. Geben Sie einen Text ein. Dies kann eine Beschreibung für Ihre Webseite oder andere Informationen sein, die Sie teilen möchten.
  • Bildtitel 4082 15 2
    7. Geben Sie nach Ihrem Text ein und drücken Sie ↵ ENTER. Dies ist das Tag, um Ihren Absatztext zu schließen. Das Folgende ist ein Beispiel für Absatztext in HTML:
  • Sie können mehrere Absatzzeilen in Folge hinzufügen, um eine Reihe von Absätzen unter einer Überschrift zu erstellen.
  • Sie können die Farbe eines beliebigen Textes ändern, indem Sie den Text mit den TAGS einschränken. Stellen Sie sicher, dass Sie Ihre bevorzugte Farbe eingeben "Farbe" Abschnitt (Sie behalten die Zitate). Sie können jeden Text drehen (e.G., Header) in eine andere Farbe mit diesem Satz von Tags. Um beispielsweise den Textblau eines Absatzes zu drehen, schreiben Sie den folgenden Code:

    Wale sind majestätische Kreaturen.

  • Sie können Fett-, Kursiv- und andere Textformate mithilfe von HTML hinzufügen.Im Folgenden sind Beispiele, wie Sie Text mithilfe von HTML-Tags formatieren können:
  • Wenn Sie kühne und kursive Text für den Schwerpunkt verwenden, verwenden Sie nicht nur zum Styling die und die Elemente anstelle von und . Dies macht Ihre Webseite einfacher, wenn Sie Technologien wie einen Bildschirmleser oder den in einigen Browsern bereitgestellten Lesermodus verwenden.
    • Teil 3 von 6:
    Zusätzliche Elemente zu Ihrem HTML hinzufügen
    1. Bildtitel 4082 16 2
    1. Fügen Sie Ihrer Seite ein Bild hinzu. Sie können Ihrem HTML ein Bild mit den folgenden Schritten hinzufügen:
    • Art So öffnen Sie Ihr Bild-Tag.
    • Kopieren Sie die Bild-URL nach dem "Hat" Anmelden Anführungszeichen.
    • Art > Nach der Bild-URL, um Ihr Bild-Tag zu schließen. Wenn zum Beispiel die URL des Bildes ist "http: // mein Bild.com / lake", Sie würden Folgendes schreiben:
  • Bildtitel 4082 17 2
    2. Link zu einer anderen Seite. Sie können mit den folgenden Schritten einen Link zu Ihrem HTML hinzufügen:
  • Art So öffnen Sie Ihr Link-Tag.
  • Kopieren und einfügen Sie die URL nach dem "Hat" Anmelden Anführungszeichen.
  • Art > Nach der URL, um den Link-Teil des HTML zu schließen.
  • Geben Sie einen Namen für den Link nach der Schließklammer ein.
  • Geben Sie nach dem Linknamen ein, um den HTML-Link zu schließen. Das Folgende ist ein Beispiel für einen Link zu Facebook.
  • Bildtitel 4082 18 2
    3. Fügen Sie Ihrem HTML einen Zeilenumbruch hinzu. Sie können einen Zeilenumbruch fügen, indem Sie eingeben
    zu deinem HTML. Dadurch erstellt eine horizontale Linie, mit der verschiedene Abschnitte Ihrer Seite aufgeteilt werden können.
    • Teil 4 von 6:
    Customizing-Farben
    1. Bildtitel 4082 19 3
    1. Schauen Sie sich die Liste der offiziellen HTML-Farbnamen und -codes an. Das World Wide Web Consortium (W3C) verwaltet eine offizielle Liste der Farben, die Sie finden https: // w3.Org / Wiki / CSS / Eigenschaften / Farbe / Keywords. Jede Farbe hat einen offiziellen Namen, einen 6-stelligen Hexadezimalcode und einen Dezimalwert. Sie können eine beliebige dieser Werte verwenden, um Elemente Ihrer Webseite Farbe hinzuzufügen. In diesem Beispiel verwenden wir die offiziellen Farbnamen.
  • Bildtitel 4082 20 3
    2. Stellen Sie die Hintergrundfarbe im Tag ein. Sie werden dies tun, indem Sie das hinzufügen Stil dem Tag einatmen. Nehmen wir an, Sie wollten die Hintergrundfarbe der gesamten Seite machen Lavendel:
  • Bildtitel 4082 21 3
    3. Stellen Sie die Textfarbe für ein beliebiges Tag ein. Sie können auch die verwenden Stil Attribut, um anzugeben, welche Farbe Sie den gesamten Text innerhalb eines bestimmten Tags haben möchten. Nehmen wir zum Beispiel an, Sie wollten den Text in einem Ihrer Tags erstellen Mitternachtsblau:
  • Die Farbänderung beeinflusst nur den Text innerhalb dieses Tags. Wenn Sie später ein anderes Tag anfangen, das auch sein sollte Mitternachtsblau, Sie müssen dort auch das Stilattribut einstellen.
  • Bildtitel 4082 22 3
    4. Stellen Sie die Hintergrundfarbe für einen Kopf oder einen Absatz ein. Ähnlich wie wie Sie die Hintergrundfarbe für den Body-Tag einstellen, können Sie auch Hintergrundfarben für andere Tags einstellen. Nehmen wir an, Sie wollten die Hintergrundfarbe von einem machen hellgrau, und die Hintergrundfarbe eines H1-Stil-Headers Lightkyblue, Du wennst:
    • Teil 5 von 6:
    Schließen Sie Ihr HTML-Dokument
    1. Bildtitel 4082 19 2
    1. Geben Sie ein, um Ihren Körper zu schließen. Nachdem Sie den Körper Ihres HTML-Dokuments ganz Ihren Text, Bildern und anderen Elementen hinzugefügt haben, fügen Sie dieses Tag am Ende Ihres HTML-Dokuments hinzu, um den Körper Ihres HTML-Dokuments zu schließen.
  • Bildtitel 4082 20 2
    2. Geben Sie ein, um Ihr HTML-Dokument zu schließen. Dieses Tag geht unter dem Tag, um Ihren HTML-Körper am Ende Ihres HTML-Dokuments zu schließen. Dies zeigt dem Webbrowser an, dass nach diesem Tag kein HTML-Code mehr gibt. Ihr gesamtes HTML-Dokument sollte so etwas aussehen:
    • Teil 6 von 6:
    Speichern und Eröffnen Ihrer Webseite
    1. Bildtitel 4082 21 2
    1. Konvertieren Sie Ihr Dokument in einfache Text (nur Mac-Benutzer). Drücke den Format Menüpunkt oben auf dem Bildschirm, klicken Sie dann auf Einfacher Text machen Im resultierenden Dropdown-Menü.
    • Dieser Schritt ist weder bei Windows noch notwendig noch möglich.
  • Bildtitel 4082 22 2
    2. Klicken Datei. Es ist in der Menüleiste oben auf dem Bildschirm.
  • Bildtitel 4082 23 2
    3. Klicken Speichern als. Es ist im Dropdown-Menü unten "Datei".
  • Alternativ können Sie drücken Strg+S (Windows) oder ⌘ Befehl+S (Mac) dazu.
  • Bildtitel 4082 24 2
    4. Geben Sie einen Namen für Ihr HTML-Dokument ein. Geben Sie an, was Sie Ihr Dokument nennen möchten "Dateiname" (Fenster) oder "Name" (Mac) Textfeld.
  • Bildtitel 4082 25 2
    5. Ändern Sie den Dateityp des Dokuments. Sie müssen das Dokument aus einer Textdatei in eine HTML-Datei ändern. Verwenden Sie die folgenden Schritte, um den Dateityp zu ändern:
  • Windows - Drücke den "Speichern unter" Dropdown-Feld, klicken Sie auf Alle Dateien, und dann Typ .html Am Ende des Dateinamens.
  • Mac OS - Ersetze das .TXT Am Ende des Dateinamens mit .html stattdessen.
  • Chromos - Drücke den "Speichern als" Taste. Nennen Sie die Datei mit .html Am Ende. Der Anfang liegt an Ihnen.
  • Bildtitel 4082 26 2
    6. Klicken speichern. Es ist am Ende des Fensters. So erstellen Sie eine HTML-Datei.
  • HTML-Dateien öffnen normalerweise mit Ihrem Standard-Webbrowser.
  • Bildtitel 4082 27 2
    7. Schließen Sie Ihren Texteditor. An diesem Punkt können Sie Ihre HTML-Datei in Ihrem Browser öffnen, damit Sie Ihre Webseite anzeigen können.
  • Bildtitel 4082 28 2
    8. Öffnen Sie das HTML-Dokument mit Ihrem Browser. In den meisten Fällen können Sie auf das HTML-Dokument doppelklicken, um dies zu tun. Wenn Sie mit dem Doppelklicken auf das Dokument ein Doppelklicken auf einen Fehler auftreten, führen Sie die folgenden Schritte aus:
  • Windows - Klicken Sie mit der rechten Maustaste auf das Dokument, wählen Sie Öffnen mit, und klicken Sie auf Ihren bevorzugten Browser.
  • Mac - Klicken Sie einmal auf das Dokument, klicken Sie auf das Dokument Datei, wählen Öffnen mit, und klicken Sie auf Ihren bevorzugten Browser.
  • Bildtitel 4082 29 2
    9. Bearbeiten Sie das HTML-Dokument bei Bedarf. Sie können einen Fehler in Ihrer HTML-Seite feststellen. Um es zu ändern, können Sie den Text des HTML-Dokuments bearbeiten:
  • Bei Windows können Sie mit der rechten Maustaste auf das Dokument klicken und klicken Bearbeiten Im resultierenden Dropdown-Menü (wenn Sie einen Notizblock ++ installiert haben, wird dies gesagt Bearbeiten mit Notizblock++ stattdessen).
  • Auf dem Mac möchten Sie auf das Dokument klicken, um es auszuwählen, klicken Sie auf Datei, wählen Öffnen mit, und klicken TextEdit. Sie können das Dokument auch in TextEdit ziehen.
  • Schließen Sie auf ChromeBook die Text-App, Öffnen Sie Dateien, finden Sie Ihre Datei, und klicken Sie dann darauf.

    • Beispiel HTML

    HTML-Cheatsblatt
    Beispiel Webseite mit HTML

    Video

    Mit diesem Service können einige Informationen mit YouTube geteilt werden.

    Tipps

    Tags sollten immer in einem Spiegelbild ihrer offenen Gegenstände geschlossen werden. Beispielsweise, sollte als geschlossen sein wie .
  • Sie können Ihrer Website mit dem Tag Side-Scroll-Text hinzufügen, denken Sie jedoch daran, dass dieses Tag nicht von einigen Browsern erkannt wird.
  • Viele Leute Verwenden Sie Notizblock++ ihren Code schreiben und kompilieren.
  • Wenn Sie ein Bild auf Ihrer Seite zentrieren möchten, können Sie nach dem Namen des Bildes in der IMG Tag (zum Beispiel).

    • Warnungen

    Es ist am besten, Ihre eigenen Bilder auf Imgur zu hosten oder ähnliches, wenn Sie Bilder auf Ihrer Webseite planen. Das Posten der Bilder anderer Personen kann zu Urheberrechtsverletzungen führen.
    In Verbindung stehende Artikel