Eine einfache Webseite mit dem Notepad erstellen

PDF download PDF herunterladen
unter Mitarbeit von wikiHow Staff

PDF download PDF herunterladen

In diesem wikiHow zeigen wir dir, wie du mit der Notepad App deines Windows PCs eine einfache, textbasierte Webseite erstellst. Die Sprache für deine Webseite wird HTML sein.

Teil 1
Teil 1 von 4:

Ein HTML-Dokument erstellen

PDF download PDF herunterladen
  1. 1
    Öffne Start
    Windows Start
    {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/0\/07\/Windowsstart.png","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/07\/Windowsstart.png\/30px-Windowsstart.png","smallWidth":460,"smallHeight":460,"bigWidth":30,"bigHeight":30,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    .     Klicke dafür links unten auf das Windows-Logo. Das Startmenü wird eingeblendet.
  2. 2
    Suche nach Notepad. Tippe dafür notepad ein. Oben im Startmenü solltest du jetzt eine Liste mit übereinstimmenden Suchergebnissen sehen.
  3. 3
    Klicke oben in der Liste mit den Ergebnissen auf das Icon mit dem blauen Notizbuch für Notepad . Dies öffnet Notepad.
  4. 4
    Klicke links oben in Notepad auf Datei . Ein Dropdown-Menü wird eingeblendet.
  5. 5
    Klicke in diesem Menü auf Speichern als . Das entsprechende Fenster wird eingeblendet.
  6. 6
    Klicke auf das Dropdown-Feld "Speichern als Typ". Diese Option findest du unten im Fenster, du solltest dort den Text "Textdokumente (*.txt)" sehen. Ein Klick darauf öffnet ein Dropdown-Menü.
  7. 7
    Klicke in diesem Menü auf Alle Dateien . Dies ermöglicht dir das Speichern der Datei als HTML-Dokument.
  8. 8
    Wähle einen Ort zum Speichern aus. Klicke links im Fenster auf den Namen des Ordners, in dem du das Dokument speichern möchtest.
    • Um das Dokument bspw. auf dem Desktop zu speichern, würdest du nach oben scrollen und links in der Seitenleiste auf Desktop klicken.
  9. 9
    Gib einen Namen und die Dateiendung "html" ein. Klicke auf das Textfeld "Dateiname" und tippe dann einen beliebigen Namen für deine Datei und anschließend .html ein.
    • Um deiner Webseite bspw. den Namen "hallo" zu geben, würdest du hallo.html eingeben.
  10. 10
    Klicke auf Speichern . Dies wandelt dein aktuelles Notepad-Dokument in ein HTML-Dokument um. Jetzt kannst du mit der Einrichtung der Struktur deiner Webseite fortfahren.
    • Wenn du Notepad versehentlich geschlossen hast oder später auf dein Dokument zurückkommen musst, kannst du einen Rechtsklick auf die HTML-Datei machen und im Dropdown-Menü Bearbeiten eingeben.
    Werbeanzeige
Teil 2
Teil 2 von 4:

Deine Webseite einrichten

PDF download PDF herunterladen
  1. 1
    Füge das language Tag deiner Webseite ein. Das erste Tag, das du in Notepad einfügen musst, gibt dem Rest des Dokuments an, dass HTML verwendet wird. Tippe dies in Notepad ein: 
     <!DOCTYPE html> 
 < 
 html 
 >
  2. 2
    Füge die "head" Tags ein. Diese Tags markieren den Anfang und das Ende des Seitentitels, den du im nächsten Schritt erstellst. Tippe für den Moment einfach <head> ein nach dem "<html>" Tag und drücke zweimal auf ↵ Enter , um eine Leerzeile einzufügen, und tippe dann </head> ein.
  3. 3
    Füge einen Seitentitel in deine Webseite ein. Der Titel, den du zwischen den Tags "<title></title>" eingibst, kommt in die Leerzeile zwischen den "head" Tags. Dieser Titel bestimmt den Namen der Webseite, so wie er im Browser-Tab angezeigt wird. Um deiner Webseite bspw. den Namen "Meine Website" zu geben, würdest du dies eingeben: 
     < 
 title 
 > 
Meine Website </ 
 title 
 >
  4. 4
    Füge die "body" Tags hinzu. Der gesamte Code deiner Webseite kommt zwischen diese Tags, die unter dem "</title>" Tag stehen sollten: 
     < 
 body 
 > 
 </ 
 body 
 >
  5. 5
    Schließe das Sprach-Tag für HTML. Das letzte Tag, das in dein Dokument kommt, ist ein schließendes HTML-Tag, das das Ende der Seite angibt. Tippe </html> unter dem Tag "</body>" ein, um das HTML Tag zu schließen.
  6. 6
    Sieh dir dein HTML-Dokument bis hierhin an. Jetzt sollte es so aussehen: 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
Meine Website </ 
 title 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
  7. 7
    Speichere dein Dokument. Drücke dafür auf Ctrl + S . Du kannst jetzt mit dem Hinzufügen von Seitenelementen in dein Dokument fortfahren, bspw. mit Absätzen und Überschriften.
    Werbeanzeige
Teil 3
Teil 3 von 4:

Webseitenelemente hinzufügen

PDF download PDF herunterladen
  1. 1
    Wisse, dass alle deine Webseitenelemente zwischen die "body" Tags kommen. Jedes Element - sei es eine Überschrift oder ein Absatz - muss nach dem "<body>" Tag und vor dem "</body>" Tag stehen.
  2. 2
    Füge die Hauptüberschrift deiner Webseite ein. Tippe <h1></h1> zwischen die "body" Tags ein und gib dann ein, was die Hauptüberschrift deiner Webseite sein soll, und zwar zwischen die Tags "<h1></h1>". Um bspw. eine Seite mit der Überschrift "Willkommen" zu erstellen, würdest du dies eingeben: 
     < 
 h1 
 > 
Willkommen </ 
 h1 
 >
    • Du kannst die Tags "<h2></h2>" bis "<h6></h6>" verwenden, um Überschriften mit immer kleiner werdendem Text zu erstellen.
  3. 3
    Füge der Seite Absatztext hinzu. Tippe die Absatz-Tags ein, diese sind "<p></p>" und gib dann dazwischen den Text ein, der deinen Absatz darstellen soll. Das Endergebnis sollte etwa so aussehen: 
     < 
 p 
 > 
Dies ist meine Website. Wähle mich zum Klassenpräsidenten! </ 
 p 
 >
  4. 4
    Erzwinge einen Zeilenumbruch. Wenn du in deinen Absätzen oder Überschriften mehr Platz möchtest, tippe nach dem schließenden Tag der Zeile <br> ein. Um bspw. einen Zeilenumbruch nach einem Absatz einzufügen, solltest du etwas in der Art haben: 
     < 
 p 
 > 
Dies ist meine Website. Wähle mich zum Klassenpräsidenten! </ 
 p 
 >< 
 br 
 > 
 < 
 p 
 > 
Ich mag auch Kartoffeln. </ 
 p 
 >
    • Du kannst nach dem ersten ein weiteres "<br>" Tag einfügen, um einen weiteren Zeilenumbruch einzufügen und so eine Leerzeile zwischen dem ersten Abschnitt und dem zweiten erstellen.
  5. 5
    Formatiere deinen Text. Du kannst den Text fett, kursiv oder unterstrichen darstellen (und auch hoch- oder tiefgestellt). Dies gilt für jedes Wort, jeden Satz und jetzt Textblock, solange er zwischen Absatz-Tags steht: 
     < 
 b 
 > 
Fetter Text </ 
 b 
 > 
 < 
 i 
 > 
Kursiv </ 
 i 
 > 
 < 
 u 
 > 
Unterstrichener Text </ 
 u 
 > 
 < 
 sup 
 > 
Hochgestellter Text </ 
 sup 
 > 
 < 
 sub 
 > 
Tiefgestellter Text </ 
 sub 
 >
  6. 6
    Sieh dir an, wie deine Webseite aussieht. Während die Elemente deiner Webseite variieren können, sollte dein Dokument etwa so aussehen: 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
Meine Website </ 
 title 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
Willkommen! </ 
 h1 
 > 
 < 
 p 
 > 
Dies ist meine Website. Ich hoffe, es gefällt dir hier! </ 
 p 
 > 
 < 
 p 
 >< 
 b 
 > 
Hier ist fettgedruckter Text zur Betonung. </ 
 b 
 ></ 
 p 
 > 
 < 
 p 
 >< 
 i 
 > 
Kursiv kann gruselig sein. </ 
 i 
 ></ 
 p 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    Werbeanzeige
Teil 4
Teil 4 von 4:

Deine Website testen

PDF download PDF herunterladen
  1. 1
    Speichere dein Dokument. Drücke dafür auf Ctrl + S . Dies stellt sicher, dass das HTML-Dokument die aktuellste Version deiner Webseite anzeigt, wenn du sie öffnest.
  2. 2
    Klicke mit der rechten Maustaste auf das HTML-Dokument. Ein Dropdown-Menü wird eingeblendet.
  3. 3
    Wähle in diesem Menü Öffnen mit . Dies öffnet ein Pop-out.
  4. 4
    Wähle deinen bevorzugten Browser. Alle Browser können HTML-Dokumente öffnen, klicke also im Pop-out auf einen beliebigen Browser. Dein HTML-Dokument wird im ausgewählten Browser geöffnet.
  5. 5
    Sieh dir deine Webseite an. Wenn dir die Formatierung gefällt, kannst du Notepad schließen.
    • Wenn du dein HTML-Dokument weiter bearbeiten möchtest, kehre zurück zu Notepad und nimm die erforderlichen Änderungen vor. Speichere deine Änderungen hierbei häufig.
    Werbeanzeige

Tipps

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
Eine einfache Webseite mit HTML gestalten
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
Werbeanzeige

Über dieses wikiHow

In anderen Sprachen
Diese Seite wurde bisher 30.551 mal abgerufen.

War dieser Artikel hilfreich?

Werbeanzeige