Eine HTML Seite erstellen

In diesem How.com.vn 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
Öffne einen einfachen Texteditor. Unter Windows ist der Standard-Texteditor Notepad, auf einem Mac TextEdit:
- Windows - Klicke auf Start
  , tippe notepad ein und klicke auf Notepad.
- Mac - Klicke auf Spotlight
  , tippe textedit ein und klicke in den Suchergebnissen auf TextEdit.
2
Verstehe HTML Tags. 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.
3
Sieh dir das grundlegende HTML Format an. 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>
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
Richte das Dokument ein. Füge den anfänglichen HTML Text des Dokuments ein:
- <!DOCTYPE html>
- <html>
- <body>
2
Erstelle den Titel deiner Webseite. 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
Füge einen Header, also eine Überschrift, ein. 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
Erstelle einen Absatz. 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.
Du kannst so viele Überschriften und Absätze auf deiner Webseite haben, wie du möchtest.
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
Formatiere den Text deines Absatzes. 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.
-  - Erzeugt unsichtbaren Text. Dies wird zum Einfügen von Kommentaren oder Notizen im Code verwendet.
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

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.
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).
Tippe direkt vor das Wort oder den Satz, der ein Link werden soll, <a href=> ein.
4
Füge die URL der Webseite ein. 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
Füge den schließenden Link-Tag ein. 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
Füge ein ID Tag ein. 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

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.
Tippe über der Stelle, an der die Aufzählungszeichen erscheinen sollen, <br> ein und drücke auf ↵ Enter.
Tippe <li>Text</li> ein und drücke auf ↵ Enter. Ersetze dabei "Text" durch den Text deines Aufzählungszeichens.
Solange du die Tags <li></li> um Textzeilen herum verwendest, wird der Text zwischen den Tags als Aufzählungszeichen formatiert.
5
Erstelle einen Unterpunkt. 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.
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

Das Bild wird dort auf der Webseite angezeigt, wo du den Code für das Bild eingefügt hast.
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.
Tippe nach <img src= ein und achte auf das Leerzeichen zwischen "img" und "src".
Kopiere die URL für das Bild, das du einfügen möchtest, und füge es dann rechts neben dem source Tag ein.
Tippe style= ein und dann width:px;height:px.
Tippe die Breite des Bilds in Pixeln nach "width:" ein und dann die Höhe des Bilds nach "height:".
Dies ist der Text, der angezeigt wird, wenn das Bild nicht geladen werden kann. Tippe dafür alt= ein und dann die Beschreibung.
Setze dafür eine spitze Klammer > nach dem letzten Zeichen in der alternativen Beschreibung.
9
Sieh dir den Code deines Bilds an. 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

Ein Dropdown-Menü wird eingeblendet.
Klicke links im Fenster auf einen Ordner (bspw. Desktop).
4
Gib einen HTML Namen für deine Datei ein. 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.
Ein Dropdown-Menü wird eingeblendet.
7
Klicke unten rechts im Fenster auf Speichern. 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

Ein Dropdown-Menü wird eingeblendet.
Das Fenster mit den Einstellungen wird geöffnet.
Dies findest du unter der Überschrift "Beim Speichern einer Datei".
Klicke dafür oben links auf den roten Punkt.
10
Gib einen HTML-Namen für deine Datei ein. 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.
11
Klicke auf Speichern. 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