Eine einfache Webseite mit HTML gestalten

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 herunterladen

1
Öffne einen Texteditor. 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:
- Windows – Öffne das Startmenü
  , tippe editor oder notepad++ ein und klicke auf Editor oder "Notepad++ sublime" oben im Fenster.
- macOS – Klicke auf Spotlight
  , tippe textedit ein und machte einen Doppelklick auf TextEdit oben in den Suchergebnissen.
- ChromeOS – Öffne den Launcher und klicke anschließend auf Text. (In dem Symbol steht Code Pad).
So weiß der Webbrowser, dass es sich um eine HTML-Datei handelt.^{[1]XForschungsquelle}
Das ist der öffnende Tag deines HTML-Codes.
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]XForschungsquelle}
Mit diesem Tag wird ein Titel zu der Seite hinzugefügt.
Das kann irgendein Titel deiner Wahl sein.
Mit diesem Tag schließt du den Titel ab.
8
Tippe </head> und drücke auf ↵ Enter. 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 herunterladen

Mit diesem Tag wird der Hauptteil deines HTML-Dokuments geöffnet. Alles, das im HTML-Body steht, wird auf der Webseite angezeigt.
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.
Das könnte ein Titel für deine Seite oder eine Begrüßung sein.
4
Tippe </h1> hinter den Text der Überschrift und drücke auf ↵ Enter. 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
Mit diesem Text wird ein Absatz eröffnet. Der Text in einem Absatz wird in normal großer Schrift angezeigt.
Das könnte eine Beschreibung deiner Webseite oder irgendwelche andere Informationen sein, die du teilen möchtest.
7
Tippe nach dem Text </p> und drücke auf ↵ Enter. 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]XForschungsquelle}
  <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]XForschungsquelle} oder dem Lesemodus in manchen Browsern leichter verständlich.^{[5]XForschungsquelle}.
Werbeanzeige

Teil 3

Teil 3 von 6:

Weitere Elemente zu HTML hinzufügen

PDF herunterladen

1
Füge ein Bild in deine Seite ein. 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
Verlinke auf eine andere Seite. 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]XForschungsquelle} So sieht beispielsweise ein Link zu Facebook aus:
  <a href="https://www.facebook.com">Facebook</a>.
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 herunterladen

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
Lege die Farbe des Hintergrundes mit dem Tag <body> fest. 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
Stelle die Textfarbe in einem beliebigen Tag ein. 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
Stelle die Hintergrundfarbe für eine Überschrift oder einen Absatz ein. 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 herunterladen

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.

How.com.vn Deutsch: Step 2 Tippe </html> ein, um die HTML-Datei zu schließen.

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>How.com.vn-FanSeite</title></head><body><h1>Willkommen auf meiner Seite!</h1><p>Das ist eine Fanseite für How.com.vn. Fühle dich wie zuhause!</p><h2>Wichtige Daten</h2><p><i>15. Januar 2019</i> - Der Geburtstag von How.com.vn</p><h2>Links</h2><p>Hier ist ein Link zu How.com.vn: <a href="http://www.wikihow.com">How.com.vn</a></p></body></html>

Werbeanzeige

Teil 6

Teil 6 von 6:

Deine Webseite speichern und öffnen

PDF herunterladen

1
Wandle dein Dokument in reinen Text um (nur für Mac-Nutzer). 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.
Es steht in der Menüleiste oben im Bildschirm und öffnet ein Menü.
3
Klicke auf Speichern als. Es steht in dem Dropdown-Menü unter "Datei".
- Alternativ kannst du Strg+S (Windows) oder ⌘ Command+S (Mac) drücken.
Tippe einen Namen deiner Wahl für das Dokument in das Textfeld "Dateiname" (Windows) oder "Name" (Mac).
5
Ändere den Dateityp des Dokuments. 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
Klicke auf Speichern. Es steht unten im Fenster. Damit wird eine HTML-Datei erschaffen.
- HTML-Dateien werden normalerweise in deinem Standard-Browser geöffnet.
Jetzt bist du bereit, deine HTML-Datei in deinem Browser zu öffnen, damit du dir deine Webseite ansehen kannst.
8
Öffne die HTML-Datei in deinem Browser. 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
Bearbeite das HTML-Dokument falls notwendig. 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