PDF herunterladen PDF herunterladen

In diesem wikiHow zeigen wir dir, wie du mit HTML eine Webseite erstellst. Elemente deiner Webseite können bspw. Text, Links und Bilder sein.

Methode 1
Methode 1 von 7:

Vorbereitung

PDF herunterladen
  1. Wenn du in HTML schreibst, werden verschiedene Elemente der Seite angezeigt durch öffnende Tags (<>) und schließende Tags (</>), wobei der Text für ein Element zwischen die beiden Tags kommt.
    • Ein Absatz wird bspw. erzeugt, indem du den öffnenden Tag für einen Absatz eingibst ( <p> ), dann den gewünschten Text und abschließend den schließenden Absatz-Tag </p> .
    • Jede Code-Zeile muss in eine eigene Zeile, daher drückst du nach einer Zeile normalerweise auf Enter .
  2. In jedem HTML Dokument, das du erstellst, beginnst du mit einem Tag für die Art des Dokuments ( <!DOCTYPE html> ), einem HTML Tag ( <html> ) und einem BODY Tag ( <body> ). Außerdem endest du das Dokument mit einem schließenden BODY Tag und dann einem schließenden HTML Tag. Als Beispiel:
    • <!DOCTYPE html>
    • <html>
    • <body>
    • </body>
    • </html>
  3. CSS ist eine Sprache, die als Ergänzung zu HTML fungiert. Sie deckt die Seitenformatierung (bspw. Farben und Textausrichtung) und andere visuelle Aspekte der Webseite ab.
    Werbeanzeige
Methode 2
Methode 2 von 7:

Eine Textseite erstellen

PDF herunterladen
  1. Füge den anfänglichen HTML Text des Dokuments ein:
    • <!DOCTYPE html>
    • <html>
    • <body>
  2. Dieser ist auch als "head" bekannt und definiert den Text, der im Browser-Tab angezeigt wird. Füge dafür den folgenden Text in dein Dokument ein und ersetze dabei "Dein Titel" durch den von dir gewünschten Text:
    • <head>
    • <title>Dein Titel</title>
    • </head>
  3. Tippe <h1>Text</h1> ein und drücke auf Enter . Du kannst zwischen die Tags <h1> und </h1> jeden beliebigen Text einfügen.
    • Header können gestuft werden. Erhöhe für jede weitere Überschrift, die du nach der ersten verwendest, einfach die Nummer. Schreibe für die zweite Überschrift also bspw. <h2> </h2> ).
  4. Tippe <p>Text</p> ein und drücke auf Enter . Ersetze dabei "Text" durch den Text deines Absatzes.
    • Du kannst jede Textzeile in einer neuen Zeile schreiben, indem du die Tags <p> </p> für jede Textzeile wiederholst.
  5. Du kannst so viele Überschriften und Absätze auf deiner Webseite haben, wie du möchtest.
  6. Tippe <br>Text</br> ein und drücke auf Enter . Dies erzeugt eine Lücke zwischen deinen Absätzen, wenn du einen Abstand haben möchtest.
  7. Du kannst innerhalb der Tags <p> </p> wiederum verschiedene andere Tags nutzen, bspw. <p> <em></em> </p> , um die Formatierung anzugeben:
    • <em>text</em> - Erzeugt kursiven Text.
    • <strong>text</strong> - Erzeugt fettgedruckten Text.
    • <ins>text</ins> - Erzeugt unterstrichenen Text.
    • <del>text</del> - Erzeugt durchgestrichenen Text.
    • <small>text</small> - Erzeugt kleinen Text.
    • <!---text---> - Erzeugt unsichtbaren Text. Dies wird zum Einfügen von Kommentaren oder Notizen im Code verwendet.
  8. Wenn du mit dem Hinzufügen von Text fertig bist, tippe </body> ein und drücke auf Enter , tippe dann </html> ein, um das Dokument zu schließen. Nachdem deine Seite nun technisch gesehen vollständig ist, kannst du andere Dinge wie Links, Aufzählungszeichen und Bilder einfügen.
    Werbeanzeige
Methode 3
Methode 3 von 7:

Links einfügen

PDF herunterladen
  1. Wenn du bspw. inmitten eines Absatzes einen Link auf eine Webseite einfügen möchtest, würdest du zu diesem Absatz gehen und das Wort oder den Satz finden, den du als Link verwenden möchtest.
  2. Gehe auf die Webseite, auf die du verlinken möchtest, markiere dann oben in der Adressleiste ihre Adresse und drücke zum Kopieren auf Ctrl + C (Windows) oder Command + C (Mac).
  3. Tippe direkt vor das Wort oder den Satz, der ein Link werden soll, <a href=> ein.
  4. Klicke zwischen href= und > und drücke zum Einfügen auf Ctrl + V (Windows) oder Command + V (Mac). Du solltest den Link rechts neben dem Text href= sehen.
    • Wenn du bspw. auf YouTube verlinkst, würdest du hier <a href=https://www.youtube.com/> sehen.
  5. Tippe auf der anderen Seite des Link-Texts </a> ein. In einer Zeile, in der bspw. "Folge mir auf Twitter steht" und du auf Twitter verlinkst und dabei "auf Twitter" als Link verwendest, würde dein Code so aussehen:
    • <a href=https://www.twitter.com/>auf Twitter</a>
  6. Mit ID Tags kannst du eine Textstelle mit einer anderen Stelle in einem anderen Absatz auf der gleichen Seite verlinken. So geht's:
    • Ersetze den Tag <p> durch <p id=text>
    • Finde den Text, den du als Link verwenden möchtest.
    • Tippe vor den Text <a href=#text> ein. Vergewissere dich, dass der Text nach "#" hier mit dem Text nach "id=" übereinstimmt.
    • Tippe nach dem Text </a> ein.
    Werbeanzeige
Methode 4
Methode 4 von 7:

Aufzählungszeichen einfügen

PDF herunterladen
  1. Aufzählungszeichen sind am besten geeignet zum Auflisten von Informationen oder zum Erstellen von organisierten Schritten. Wenn du einen Absatz gefunden hast, unter dem du Aufzählungszeichen einfügen möchtest, fahre fort.
  2. Tippe über der Stelle, an der die Aufzählungszeichen erscheinen sollen, <br> ein und drücke auf Enter .
  3. Tippe <li>Text</li> ein und drücke auf Enter . Ersetze dabei "Text" durch den Text deines Aufzählungszeichens.
  4. Solange du die Tags <li></li> um Textzeilen herum verwendest, wird der Text zwischen den Tags als Aufzählungszeichen formatiert.
  5. Tippe <ul>text</ul> ein und drücke auf Enter . Dein Text wird eingerückt unter dem vorigen Aufzählungszeichen angezeigt.
    • Text mit den Tags <ul></ul> hat kein Aufzählungszeichen davor.
  6. Wenn du zuvor einen Seitenumbruch eingefügt hast, dann tippe jetzt </br> ein und drücke auf Enter . Deine Liste mit Aufzählungszeichen steht alleinstehend auf der Seite.
    Werbeanzeige
Methode 5
Methode 5 von 7:

Bilder einfügen

PDF herunterladen
  1. Das Bild wird dort auf der Webseite angezeigt, wo du den Code für das Bild eingefügt hast.
  2. Tippe dafür <img ein, aber drücke noch nicht auf Enter . Da der "image" Tag selbst ein vollständiger Tag ist, braucht er keinen schließenden Tag.
  3. Tippe nach <img src= ein und achte auf das Leerzeichen zwischen "img" und "src".
  4. Kopiere die URL für das Bild, das du einfügen möchtest, und füge es dann rechts neben dem source Tag ein.
  5. Tippe style= ein und dann width:px;height:px .
  6. Tippe die Breite des Bilds in Pixeln nach "width:" ein und dann die Höhe des Bilds nach "height:".
  7. Dies ist der Text, der angezeigt wird, wenn das Bild nicht geladen werden kann. Tippe dafür alt= ein und dann die Beschreibung.
  8. Setze dafür eine spitze Klammer > nach dem letzten Zeichen in der alternativen Beschreibung.
  9. Er sollte so aussehen:
    • <img src=https://www.w3schools.com/w3css/img_fjords.jpg style=width:600px;height:400px alt=Fjord>
    Werbeanzeige
Methode 6
Methode 6 von 7:

Das Dokument unter Windows speichern

PDF herunterladen
  1. Ein Dropdown-Menü wird eingeblendet.
  2. Klicke links im Fenster auf einen Ordner (bspw. Desktop ).
  3. Tippe ins Feld "Dateiname" einen beliebigen Namen für die Datei ein, gefolgt von .html .
    • Für eine Datei mit dem Namen "miau" würdest du hier bspw. miau.html eingeben.
  4. Ein Dropdown-Menü wird eingeblendet.
  5. Dies speichert deine Textdatei als HTML-Seite.
    • Du kannst die HTML-Datei in den meisten Browsern öffnen, indem du sie anklickst und auf ein offenes Browser-Fenster ziehst.
    Werbeanzeige
Methode 7
Methode 7 von 7:

Das Dokument auf einem Mac speichern

PDF herunterladen
  1. Ein Dropdown-Menü wird eingeblendet.
  2. Das Fenster mit den Einstellungen wird geöffnet.
  3. Dies findest du unter der Überschrift "Beim Speichern einer Datei".
  4. Klicke dafür oben links auf den roten Punkt.
  5. Ersetze den Namen im Feld "Speichern als" mit einem Namen deiner Wahl gefolgt von .html .
    • Gib für ein Dokument mit dem Namen "meine_webseite" hier bspw. meine_webseite.html ein.
  6. Dein HTML Dokument wird am üblichen Speicherort gespeichert (bspw. auf dem Desktop ).
    • Du kannst die HTML-Seite in den meisten Browsern öffnen, indem du sie anklickst und auf ein offenes Browser-Fenster ziehst.
    Werbeanzeige

Tipps

  • Durch die Nutzung eines dedizierten Code-Editors wie bspw. Notepad++ (Windows) wird das Schreiben in HTML viel einfacher und intuitiver als mit Notepad oder TextEdit.
Werbeanzeige

Warnungen

  • Überprüfe deinen Code immer, bevor du ihn auf eine Live-Webseite hochlädst.
Werbeanzeige

Über dieses wikiHow

Diese Seite wurde bisher 54.619 mal abgerufen.

War dieser Artikel hilfreich?

Werbeanzeige