Eine einfache Webseite mit HTML gestalten

PDF download PDF herunterladen
unter Mitarbeit von wikiHow Staff

Referenzen

PDF download PDF herunterladen

In diesem Artikel lernst du, wie du eine einfache Webseite mit HTML (hypertext markup language) gestalten kannst. HTML ist einer der wesentlichen Bestandteile des World Wide Web und erschafft die Struktur von Webseiten. Wenn du eine Webseite erstellt hast, kannst du sie als HTML-Datei speichern und in einem Webbrowser ansehen. Das Erstellen einer HTML-Seite ist mit einem einfachen Texteditor möglich, den du auf jedem Windows- oder Mac-Computer findest.

Teil 1
Teil 1 von 6:

Einen Head in deine HTML-Datei einfügen

PDF download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4b\/4082-1-2.jpg\/v4-460px-4082-1-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4b\/4082-1-2.jpg\/v4-728px-4082-1-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Auf einem Computer mit Windows als Betriebssystem kannst du normalerweise den Editor verwenden oder Notepad ++, auf einem Mac kannst du TextEdit wählen und Nutzer von ChromeOS können das Programm Text nutzen:
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/54\/4082-2-2.jpg\/v4-460px-4082-2-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/54\/4082-2-2.jpg\/v4-728px-4082-2-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    So weiß der Webbrowser, dass es sich um eine HTML-Datei handelt. [1]
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/35\/4082-3-2.jpg\/v4-460px-4082-3-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/35\/4082-3-2.jpg\/v4-728px-4082-3-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das ist der öffnende Tag deines HTML-Codes.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/db\/4082-4-2.jpg\/v4-460px-4082-4-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/db\/4082-4-2.jpg\/v4-728px-4082-4-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Mit diesem Tag wird der Head der HTML-Datei geföffnet. Der Head enthält üblicherweise Informationen, die auf der Webseite nicht angezeigt werden. Dazu können der Titel, Metadaten, kaskadierte Stylesheets (CSS) und andere Skriptsprachen gehören. [2]
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/62\/4082-5-2.jpg\/v4-460px-4082-5-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/62\/4082-5-2.jpg\/v4-728px-4082-5-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Mit diesem Tag wird ein Titel zu der Seite hinzugefügt.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8a\/4082-6-2.jpg\/v4-460px-4082-6-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8a\/4082-6-2.jpg\/v4-728px-4082-6-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das kann irgendein Titel deiner Wahl sein.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fe\/4082-7-2.jpg\/v4-460px-4082-7-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fe\/4082-7-2.jpg\/v4-728px-4082-7-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Mit diesem Tag schließt du den Titel ab.
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/28\/4082-8-2.jpg\/v4-460px-4082-8-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/28\/4082-8-2.jpg\/v4-728px-4082-8-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Mit diesem Tag schließt du den Head. Dein HTML-Code sollte ungefähr so aussehen: 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
Meine Webseite </ 
 title 
 > 
 </ 
 head 
 >
    Werbeanzeige
Teil 2
Teil 2 von 6:

Den Hauptteil und Text in deine HTML-Datei einfügen

PDF download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a1\/4082-9-2.jpg\/v4-460px-4082-9-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a1\/4082-9-2.jpg\/v4-728px-4082-9-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Mit diesem Tag wird der Hauptteil deines HTML-Dokuments geöffnet. Alles, das im HTML-Body steht, wird auf der Webseite angezeigt.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/84\/4082-10-2.jpg\/v4-460px-4082-10-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/84\/4082-10-2.jpg\/v4-728px-4082-10-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das ist der Tag für die Überschrift deiner HTML-Datei. Die Überschrift ist der große, fettgedruckte Text, der normalerweise oben in einer HTML-Datei steht.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0e\/4082-11-2.jpg\/v4-460px-4082-11-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0e\/4082-11-2.jpg\/v4-728px-4082-11-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das könnte ein Titel für deine Seite oder eine Begrüßung sein.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3f\/4082-12-2.jpg\/v4-460px-4082-12-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3f\/4082-12-2.jpg\/v4-728px-4082-12-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Mit diesem Tag wird die Überschrift geschlossen.
    • Füge weitere Überschriften ein. Es gibt sechs unterschiedliche Überschriften, die du mit den Tags <h1></h1> bis <h6></h6> erschaffen kannst. Dadurch werden Überschriften in unterschiedlichen Größen erstellt. Um zum Beispiel drei unterschiedlich große Überschriften hintereinander zu erzeugen, könntest du Folgendes schreiben: 
       < 
 h1 
 > 
Willkommen auf meiner Seite! </ 
 h1 
 > 
 < 
 h2 
 > 
Mein Name ist Bob. </ 
 h2 
 > 
 < 
 h3 
 > 
Ich hoffe, es gefällt dir hier. </ 
 h3 
 >
    • Die Überschriften zeigen die Abstufung oder Wichtigkeit im Text. Es ist aber nicht notwendig, eine höhere Überschrift zu verwenden, wenn du eine niedrigerer Ordnung möchtest. Man kann also direkt H3 verwenden, auch wenn es kein H1 davor gab
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3d\/4082-13-2.jpg\/v4-460px-4082-13-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3d\/4082-13-2.jpg\/v4-728px-4082-13-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Mit diesem Text wird ein Absatz eröffnet. Der Text in einem Absatz wird in normal großer Schrift angezeigt.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/49\/4082-14-2.jpg\/v4-460px-4082-14-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/49\/4082-14-2.jpg\/v4-728px-4082-14-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das könnte eine Beschreibung deiner Webseite oder irgendwelche andere Informationen sein, die du teilen möchtest.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/92\/4082-15-2.jpg\/v4-460px-4082-15-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/92\/4082-15-2.jpg\/v4-728px-4082-15-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Mit diesem Tag wird der Text des Absatzes abgeschlossen. So sieht ein Beispiel für einen Absatz in HTML aus: 
     < 
 p 
 > 
Das ist mein Absatz. </ 
 p 
 >
    • Du kannst mehrere Zeilen für Absätze hintereinander erstellen, um eine Reihe von Absätzen unter die Überschrift zu setzen.
    • Du kannst die Farbe eines Textes ändern, indem du die Tags <font color="color"> und </font> davor und dahinter setzt. Gib die Farbe deiner Wahl in den Abschnitt "color" ein (behalte dabei die Anführungszeichen). Du kannst mit diesen Tags jeden Text (z.B. Überschriften) in einer anderen Farbe schreiben. Mache zum Beispiel den Text eines Absatzes blau mit folgendem Code: <p><font color="blue">Wale sind majestätische Geschöpfe.</font></p>
    • Du kannst Fettschrift, Kursivschrift und andere Formate in HTML anwenden. Hier sind einige Beispiele, wie du einen Text mit HTML formatieren kannst: [3] 
       < 
 b 
 > 
Fettgedruckter Text </ 
 b 
 > 
 < 
 i 
 > 
Kursiver Text </ 
 i 
 > 
 < 
 u 
 > 
Unterstrichener Text </ 
 u 
 > 
 < 
 sub 
 > 
Hochgestellter Text </ 
 sub 
 > 
 < 
 sup 
 > 
Tiefgestellter Text </ 
 sup 
 >
    • Wenn du fetten oder kursiven Text zur Hervorhebung und nicht nur zur Gestaltung einsetzt, verwenden die Elemente <strong> und <em> anstelle von <b> und <i> . Dadurch ist deine Webseite bei der Nutzung von Screenreadern [4] oder dem Lesemodus in manchen Browsern leichter verständlich. [5] .
    Werbeanzeige
Teil 3
Teil 3 von 6:

Weitere Elemente zu HTML hinzufügen

PDF download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/77\/4082-16-2.jpg\/v4-460px-4082-16-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/77\/4082-16-2.jpg\/v4-728px-4082-16-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Du kannst ein Bild mit diesen Schritten in deine HTML-Datei einfügen:
    • Tippe <img src= , um den Tag für ein Bild zu öffnen.
    • Kopiere die URL des Bildes und füge sie hinter dem Zeichen "=" unter Anführungszeichen ein.
    • Tippe > hinter das Bild, um den Bild-Tag zu schließen. Wenn die URL des Bildes zum Beispiel "http://www.mypicture.com/lake" ist, würdest du es so schreiben: 
       < 
 img 
 src 
 = 
 "http://www.mypicture.com/lake.jpg" 
 >
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/74\/4082-17-2.jpg\/v4-460px-4082-17-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/74\/4082-17-2.jpg\/v4-728px-4082-17-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Du kannst einen Link folgendermaßen in deine HTML-Seite einfügen:
    • Tippe <a href= , um den Tag für einen Link zu öffnen.
    • Kopiere die URL und füge sie hinter dem Zeichen "=" in Anführungszeichen ein.
    • Tippe > hinter die URL, um den Abschnitt für einen Link in HTML zu schließen.
    • Gib hinter der schießenden Klammer eine Bezeichnung für den Link ein.
    • Tippe </a> hinter dem Link, um den HTML-Link zu schließen. [6] So sieht beispielsweise ein Link zu Facebook aus: 
       < 
 a 
 href 
 = 
 "https://www.facebook.com" 
 > 
Facebook </ 
 a 
 > 
.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d0\/4082-18-2.jpg\/v4-460px-4082-18-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d0\/4082-18-2.jpg\/v4-728px-4082-18-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das machst du, indem du <br> in den Code eingibst. Dadurch wird eine waagerechte Linie erschaffen, die unterschiedliche Abschnitte auf der Seite voneinander trennt.
    Werbeanzeige
Teil 4
Teil 4 von 6:

Die Farben anpassen

PDF download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b2\/4082-19-3.jpg\/v4-460px-4082-19-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b2\/4082-19-3.jpg\/v4-728px-4082-19-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das World Wide Web Consortium (W3C) führt eine offizielle Farbliste, die du unter https://www.w3.org/wiki/CSS/Properties/color/keywords aufrufen kannst. Jede Farbe hat eine offizielle Bezeichnung, einen sechsstelligen Hexadezimalcode und einen Dezimalwert. Du kannst jeden dieser Werte verwenden, um Elemente auf deiner Webseite mit Farbe zu versehen. In diesem Beispiel verwenden wir die offiziellen Bezeichnungen der Farben.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/60\/4082-20-3.jpg\/v4-460px-4082-20-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/60\/4082-20-3.jpg\/v4-728px-4082-20-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das kannst du machen, indem du das Element style zu dem Tag hinzufügst. Nehmen wir an, du möchtest als Hintergrundfarbe für die gesamte Seite lavender :
    • <body style="background-color:lavender;">
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b2\/4082-21-3.jpg\/v4-460px-4082-21-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b2\/4082-21-3.jpg\/v4-728px-4082-21-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Du kannst das Element style auch verwenden, um festzulegen, welche Farbe der Text in einem bestimmten Tag haben soll. Sagen wir zum Bespiel, du möchtest den Text in einem deiner Absatz-Tags <p> in midnightblue machen:
    • <p style="color:midnightblue;">
    • Die Änderung der Farbe betrifft nur den Text innerhalb des Tags <p> . Wenn du später einen weiteren Tag mit <p> beginnst, in dem die Schrift ebenfalls midnightblue sein soll, musst du das Element für den Stil auch dort einfügen.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/35\/4082-22-3.jpg\/v4-460px-4082-22-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/35\/4082-22-3.jpg\/v4-728px-4082-22-3.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    So wie du die Hintergrundfarbe im Tag für den Body einstellen kannst, kannst du es auch bei anderen Tags machen. Nehmen wir an, du möchtest die Hintergrundfarbe eines Absatzes <p> lightgrey hellgrau machen und die Hintergrundfarbe einer Überschrift H1 lightskyblue , dann würdest du Folgendes verwenden:
    • <p style="background-color:lightgrey;">
    • <h1 style="background-color:lightskyblue;">
    Werbeanzeige
Teil 5
Teil 5 von 6:

Die HTML-Datei schließen

PDF download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/57\/4082-19-2.jpg\/v4-460px-4082-19-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/57\/4082-19-2.jpg\/v4-728px-4082-19-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Nachdem du alle Texte, Bilder und Elemente zum Body deiner HTML-Datei hinzugefügt hast, setze diesen Tag unten in die HTML-Datei, um den Hauptteil des HTML-Dokuments zu schließen.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/16\/4082-20-2.jpg\/v4-460px-4082-20-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/16\/4082-20-2.jpg\/v4-728px-4082-20-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Dieser Tag gehört unter den Tag, mit dem man den Hauptteil der Datei schließt. Die ganze HTML-Datei sollte ungefähr so aussehen: 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
wikiHow-FanSeite </ 
 title 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
Willkommen auf meiner Seite! </ 
 h1 
 > 
 < 
 p 
 > 
Das ist eine Fanseite für wikiHow. Fühle dich wie zuhause! </ 
 p 
 > 
 < 
 h2 
 > 
Wichtige Daten </ 
 h2 
 > 
 < 
 p 
 >< 
 i 
 > 
15. Januar 2019 </ 
 i 
 > 
- Der Geburtstag von wikiHow </ 
 p 
 > 
 < 
 h2 
 > 
Links </ 
 h2 
 > 
 < 
 p 
 > 
Hier ist ein Link zu wikiHow: < 
 a 
 href 
 = 
 "http://www.wikihow.com" 
 > 
wikiHow </ 
 a 
 ></ 
 p 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    Werbeanzeige
Teil 6
Teil 6 von 6:

Deine Webseite speichern und öffnen

PDF download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b9\/4082-21-2.jpg\/v4-460px-4082-21-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b9\/4082-21-2.jpg\/v4-728px-4082-21-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Klicke auf das Menü Format oben im Bildschirm und dann im Dropdown-Menü auf In reinen Text umwandeln .
    • Dieser Schritt ist unter Windows weder notwendig, noch möglich.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/09\/4082-22-2.jpg\/v4-460px-4082-22-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/09\/4082-22-2.jpg\/v4-728px-4082-22-2.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":539,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Es steht in der Menüleiste oben im Bildschirm und öffnet ein Menü.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0c\/4082-23-2.jpg\/v4-460px-4082-23-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0c\/4082-23-2.jpg\/v4-728px-4082-23-2.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":539,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Es steht in dem Dropdown-Menü unter "Datei".
    • Alternativ kannst du Strg + S (Windows) oder ⌘ Command + S (Mac) drücken.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0c\/4082-24-2.jpg\/v4-460px-4082-24-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0c\/4082-24-2.jpg\/v4-728px-4082-24-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tippe einen Namen deiner Wahl für das Dokument in das Textfeld "Dateiname" (Windows) oder "Name" (Mac).
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/89\/4082-25-2.jpg\/v4-460px-4082-25-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/89\/4082-25-2.jpg\/v4-728px-4082-25-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Du musst das Dokument von einer Textdatei in eine HTML-Datei umwandeln. Gehe dafür so vor:
    • Windows – Klicke auf das Auswahlmenü "Speichern als", auf Alle Dateien und gib .html am Ende des Dateinamens ein.
    • MacOS – Ersetze das .txt am Ende des Dateinamens durch .html .
    • ChromeOS – Klicke auf den Button "Speichern als". Benenne die Datei und schreibe .html ans Ende. Was du an den Anfang schreibst liegt bei dir.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f3\/4082-26-2.jpg\/v4-460px-4082-26-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/4082-26-2.jpg\/v4-728px-4082-26-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Es steht unten im Fenster. Damit wird eine HTML-Datei erschaffen.
    • HTML-Dateien werden normalerweise in deinem Standard-Browser geöffnet.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d7\/4082-27-2.jpg\/v4-460px-4082-27-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d7\/4082-27-2.jpg\/v4-728px-4082-27-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Jetzt bist du bereit, deine HTML-Datei in deinem Browser zu öffnen, damit du dir deine Webseite ansehen kannst.
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/14\/4082-28-2.jpg\/v4-460px-4082-28-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/14\/4082-28-2.jpg\/v4-728px-4082-28-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Meistens reicht es aus, einen Doppelklick auf das Dokument zu machen. Wenn das zu einer Fehlermeldung führt, gehe so vor:
    • Windows – Mache einen Rechtsklick auf das Dokument, wähle Öffnen mit und klicke auf den Browser deiner Wahl.
    • Mac – Klicke einmal auf das Dokument, dann auf Datei , wähle Öffnen mit und klicke auf den Browser deiner Wahl.
  9. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b3\/4082-29-2.jpg\/v4-460px-4082-29-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b3\/4082-29-2.jpg\/v4-728px-4082-29-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Vielleicht bemerkst du einen Fehler auf deiner HTML-Seite. Du kannst den Text so bearbeiten, um das zu ändern:
    • Unter Windows kannst du einen Rechtsklick auf die Datei machen und im Auswahlmenü auf Bearbeiten klicken (wenn du Notepad++ installiert hast, steht dort stattdessen Mit Notepad++ bearbeiten).
    • Auf einem Mac musst du auf das Dokument klicken, auf Datei und Öffnen mit auswählen. Dann klickst du auf Textedit . Du kannst die Datei auch in TextEdit ziehen.
    • Auf einem Chromebook schließt du die Textdatei, öffnest die Dateien, findest die Datei und klickst darauf.
    Werbeanzeige

Tipps

  • Tags sollten immer spiegelbildlich geschlossen werden. Zum Beispiel sollten <tag1><tag2> mit </tag2></tag1> geschlossen werden.
  • Du kannst Text, bei dem man nach rechts scrollen muss, mit dem Tag <marquee></marquee> einfügen, denke aber daran, dass dieser Tag von manchen Browsern vielleicht nicht erkannt wird.
  • Viele Leute verwenden Notepad++ , um ihren Code zu schreiben und zusammenzustellen.
  • Wenn du ein Bild auf der Seite zentrieren möchtest, kannst du <class="center"> hinter den Namen des Bildes in den Tag img tippen (zum Beispiel <img src="URL" class="center"> ).
Werbeanzeige

Warnungen

  • Am besten ist es, deine Bilder selber auf Imgur oder einer ähnlichen Seite zu hosten, wenn du vorhast, Bilder auf deine Webseite zu laden. Wenn du die Bilder anderer veröffentlichst, könntest du gegen das Urheberrecht verstoßen.
Werbeanzeige

Verwandte wikiHows

Kommentare in HTML Code einfügen
Ein Hintergrund Bild in HTML einfügen
HTM Dateien öffnen
Einen E mail Link in HTML erstellen
HTML Dateien bearbeiten
Die Farbe einer Schaltfläche in HTML ändern
Bilder mit HTML einfügen
Text in HTML blinken lassen
Eine Webseite mit einfachem HTML hacken
Ein Dropdown Menü mit HTML und CSS erstellen
Text in HTML zentrieren
Einen Download Knopf auf einer Webseite erstellen
Mit HTML innerhalb von einer Seite verlinken
In HTML eine Linie einfügen
Werbeanzeige

Referenzen

  1. ↑ https://www.w3schools.com/howto/howto_website.asp
  2. ↑ https://www.w3schools.com
  3. ↑ https://www.w3schools.com/html/html_formatting.asp
  4. ↑ https://alistapart.com/article/conversational-semantics/
  5. ↑ https://alistapart.com/article/accessibility-for-vestibular/#section6
  6. ↑ https://www.w3schools.com/html/html_links.asp

Über dieses wikiHow

In anderen Sprachen
Diese Seite wurde bisher 33.818 mal abgerufen.

War dieser Artikel hilfreich?

Werbeanzeige