HTML Dateien bearbeiten

Wenn du Webseiten lieber manuell programmierst, kannst du HTML-Dateien in einem schlichten Texteditor wie Editor (Windows) oder TextEdit (macOS) bearbeiten. Wenn du lieber Elemente auf dem Bildschirm bewegen und eine Vorschau in Echtzeit sehen möchtest, kannst du einen WYSIWYG-Editor (What You See Is What You Get) wie Dreamweaver oder Kompozer verwenden. In diesem Artikel lernst du, wie du eine HTML-Datei in einem gewöhnlichen oder in einem visuellen Bearbeitungsprogramm öffnen und bearbeiten kannst.

Methode 1

Methode 1 von 4:

Den Editor unter Windows verwenden

PDF herunterladen

Das ist der Button mit einem Windowslogo in der Anwendungsleiste. So wird das Startmenü angezeigt.
So wird der Editor im Startmenü angezeigt.
Er hat ein Symbol, das wie ein Notizblock mit blauem Deckel aussieht.
Es steht oben in der Menüleiste im Editor. So wird ein Auswahlmenü angezeigt. Es zeigt einen Dateibrowser an, den du verwenden kannst, um Dateien im Editor zu öffnen.
Es ist die zweite Option im Auswahlmenü.
Klicke auf das Auswahlmenü, in dem "Textdateien (.txt)" steht und wähle "Alle Dateien" in dem Menü aus, das sich öffnet. So werden alle Dateitypen im Dateienbrowser angezeigt (auch HTML-Dateien).
7
Wähle eine HTML-Datei aus und klicke auf Öffnen. So öffnest du die HTML-Datei im Editor. Du kannst den HTML-Code im Editor bearbeiten.
- Du kannst auch eine neue HTML-Datei im Editor gestalten.
8
Bearbeite den HTML-Code. Um HTML im Editor zu bearbeiten, musst du HTML lernen, damit du es manuell bearbeiten kannst. Häufig vorkommende Elemente, die du aufnehmen kannst, sind:
- <!DOCTYPE html>: Das steht oben in einem HTML-Dokument. Es sagt dem Webbrowser, dass dies eine HTML-Datei ist.
- <html></html>: Diese Tags stehen oben und unten in der HTML-Datei. Sie zeigen an, wo der HTML-Code anfängt und endet.
- <head></head>: diese Tags stehen oben in der HTML-Datei. Sie zeigen, wo der Seitenkopf der HTML-Datei anfängt und endet. Der Seitenkopf der HTML-Datei enthält Informationen, die auf der Webseite nicht zu sehen sind. Dazu gehören der Seitentitel, Metadaten und CSS.
- <title>Seitentitel</title>: Diese Tags stehen im Seitenkopf der HTML-Datei. Tippe zwischen diese beiden Tags den Titel der Seite ein.
- <body></body>: Diese Tags zeigen an, wo der Hauptteil der HTML-Datei anfängt und endet. In den Hauptteil wird der ganze Inhalt der Webseite geschrieben. Er steht in einer HTML-Datei nach dem Seitenkopf.
- <h1>Text Überschrift</h1>: Diese Tags erstellen Überschriften. Text, der zwischen den Tags "<h1>" und "</h1>" steht, erscheint als große, fettgedruckte Schrift. Er gehört in den Hauptteil der HTML-Datei.
- <p>Text eines Absatzes</p>: Diese Tags werden verwendet, um den Text von Absätzen in einer HTML-Datei zu erschaffen. Der Text, der zwischen "<p>" und "</p>" steht, erscheint als Text in normaler Größe. Dieser Text kommt in den Hauptteil der HTML-Datei.
- <b>Fetter Text</b>: Diese Tags werden verwendet, um fette Schrift zu erschaffen. Der Text, der zwischen "<b>" und "</b>" steht, wird als fettgedruckte Schrift dargestellt.
- <i>Kursiver Text</i>: Diese Tags werden verwendet, um Kursivschrift zu erstellen. Der Text, der zwischen "<i>" und "</i>" steht, erscheint als kursiver Text.
- <a href="URL">Text eines Links</a>: Dieser Tag wird verwendet, um einen Link zu einer anderen Webseite zu erstellen. Kopiere die Webadresse, zu der du verlinken möchtest und setze sie dort ein, wo "URL" steht (zwischen den Anführungszeichen). Der Text für den Link kommt da hin, wo "Text eines Links" steht (keine Anführungszeichen notwendig).
- <img src="Bild URL">: Dieser Tag wird verwendet, um ein Bild mit HTML einzusetzen. Ersetze den Text "Bild URL" durch die Webadresse des Bildes.
Es steht in der Menüleiste oben im Bildschirm.
10
Klicke auf Speichern unter. Dadurch öffnet sich ein Dialogfeld, mit dem du deine Datei speichern kannst.
- Um die Datei mit ihrem bestehenden Namen und Dateityp zu speichern, klicke einfach auf Speichern im Auswahlmenü unter dem Punkt "Datei".
Verwende das Auswahlmenü neben "Dateityp" und wähle "Alle Dateien" aus.
Verwende das Feld neben "Dateiname", um den Namen für die Datei einzugeben.
Füge, nachdem du den Namen für die Datei in das Feld "Dateiname" geschrieben hast, die Erweiterung ".html" ans Ende des Dateinamens an. Ohne diese Erweiterung wird die Datei als .txt-Datei abgespeichert anstelle einer HTML-Datei.
Damit wir die Datei gespeichert.
Werbeanzeige

Methode 2

Methode 2 von 4:

TextEdit auf einem Mac verwenden

PDF herunterladen

Es steht in der oberen rechten Ecke auf dem Desktop des Mac. Dadurch öffnet sich eine Suchleiste.
Dadurch wird eine Liste von Anwendungen angezeigt, die zu deiner Suchanfrage passen.
Es steht ganz oben in den Suchergebnissen, neben einem Symbol, das einem Blatt Papier und einem Stift ähnelt.
Das steht in der Menüleiste oben im Bildschirm, wenn TextEdit geöffnet ist.
Das öffnet einen Dateienbrowser, den du verwenden kannst, um deinen Mac zu durchsuchen und Dateien zu öffnen.
HTML-Dateien haben eine Erweiterung nach dem Dateinamen, in der ".html" steht. Verwende den Dateibrowser, um zu einer HTML-Datei zu gehen und klicke darauf, um sie auszuwählen. Klicke dann auf Öffnen, um die HTML-Datei in TextEdit zu öffnen.
7
Bearbeite den HTML-Code. Du kannst TextEdit verwenden, um HTML-Code zu bearbeiten. Du musst HTML lernen, um es manuell bearbeiten zu können. Häufig vorkommende Elemente, die du bearbeiten kannst, sind folgende:
- <!DOCTYPE html>: Das steht oben in einem HTML-Dokument. Es sagt dem Webbrowser, dass dies eine HTML-Datei ist.
- <html></html>: Diese Tags stehen oben und unten in der HTML-Datei. Sie zeigen an, wo der HTML-Code anfängt und endet.
- <head></head>: Diese Tags stehen oben in der HTML-Datei. Sie zeigen, wo der Seitenkopf der HTML-Datei anfängt und endet. Der Seitenkopf der HTML-Datei enthält Informationen, die auf der Webseite nicht zu sehen sind. Dazu gehören der Seitentitel, Metadaten und CSS.
- <title>Seitentitel</title>: Diese Tags stehen im Seitenkopf der HTML-Datei. Tippe zwischen diese beiden Tags den Titel der Seite ein.
- <body></body>: Diese Tags zeigen an, wo der Hauptteil der HTML-Datei anfängt und endet. In den Hauptteil wird der ganze Inhalt der Webseite geschrieben. Er steht in einer HTML-Datei nach dem Seitenkopf.
- <h1>Text Überschrift</h1>: Diese Tags erstellen Überschriften. Text, der zwischen den Tags "<h1>" und "</h1>" steht, erscheint als große, fettgedruckte Schrift. Er gehört in den Hauptteil der HTML-Datei.
- <p>Text eines Absatzes</p>: Diese Tags werden verwendet, um den Text von Absätzen in einer HTML-Datei zu erschaffen. Der Text, der zwischen "<p>" und "</p>" steht, erscheint als Text in normaler Größe. Dieser Text kommt in den Hauptteil der HTML-Datei.
- <b>Fetter Text</b>: Diese Tags werden verwendet, um fette Schrift zu erschaffen. Der Text, der zwischen "<b>" und "</b>" steht, wird als fettgedruckte Schrift dargestellt.
- <i>Kursiver Text</i>: Diese Tags werden verwendet, um Kursivschrift zu erstellen. Der Text, der zwischen "<i>" und "</i>" steht, erscheint als kursiver Text.
- <a href="URL">Text eines Links</a>: Dieser Tag wird verwendet, um einen Link zu einer anderen Webseite zu erstellen. Kopiere die Webadresse, zu der du verlinken möchtest und setze sie dort ein, wo "URL" steht (zwischen den Anführungszeichen). Der Text für den Link kommt da hin, wo "Text eines Links" steht (keine Anführungszeichen notwendig).
- <img src="Bild URL">: Dieser Tag wird verwendet, um ein Bild mit HTML einzusetzen. Ersetze den Text "Bild URL" durch die Webadresse des Bildes.
Du findest es in der Menüleiste oben im Bildschirm.
9
Klicke auf Speichern. Du findest es im Auswahlmenü unter "Datei". So wird die HTML-Datei gespeichert.
- Klicke, um den Namen der Datei zu ändern, auf "Umbenennen" im Auswahlmenü. Gib oben im Bildschirm einen neuen Namen für die Datei ein. Nimm auf jeden Fall die Erweiterung ".html" oben im Bildschirm auf
Werbeanzeige

Methode 3

Methode 3 von 4:

Dreamweaver verwenden

PDF herunterladen

1
Öffne Dreamweaver. Dreamweaver hat ein Symbol, das wie ein grünes Quadrat aussieht, in dessen Mitte "Dw" steht. Klicke auf das Symbol im Startmenü von Windows oder im Anwendungsordner auf einem Mac, um Dreamweaver zu öffnen.
- Adobe Dreamweaver erfordert ein Abonnement. Du kannst ein Abo für einen Preis ab 23,19 € monatlich kaufen.
Du findest es in der Menüleiste oben im Bildschirm.
Es steht im Auswahlmenü unter "Datei".
Verwende den Dateibrowser, um ein HTML-Dokument auf deinem Computer auszuwählen und klicke dann darauf, um es zu markieren. Klicke dann auf Öffnen in der unteren rechten Ecke.
Es befindet sich im mittleren Reiter oben im Bildschirm. Dadurch wird ein geteilter Bildschirm angezeigt, der einen HTML-Editor unten und eine Bildfläche mit einer Vorschau oben zeigt.^{[1]XForschungsquelle}
6
Bearbeite die HTML-Datei. Verwende den HTML-Editor, um HTML zu bearbeiten. Die Art, wie du HTML in Dreamweaver bearbeitest, ist nicht viel anders als die Bearbeitung von HTML im Windows-Editor oder in TextEdit. Wenn du einen HTML-Tag eingibst, erscheint ein Suchmenü mit passenden HTML-Tags. Du kannst auf den HTML-Tag klicken, um die öffnenden und schließenden Tags einzusetzen. Dreamweaver überprüft, dass öffnende und schließende Tags für alle deine HTML-Elemente vorhanden sind.
- Du kannst auch an die Stelle im HTML-Editor klicken, wo du ein HTML-Element einfügen möchtest und auf Einfügen in der Menüleiste oben im Bildschirm klicken. Wähle in dem Auswahlmenü das Element aus und der HTML-Code wird automatisch eingefügt.
Wenn du die HTML-Datei fertig bearbeitet hast, klicke auf Datei in der Menüleiste oben im Bildschirm.
Du findest es im Auswahlmenü unter Datei. So wird deine HTML-Datei gespeichert.
Werbeanzeige

Methode 4

Methode 4 von 4:

Kompozer verwenden

PDF herunterladen

Gehe in einem Webbrowser auf https://sourceforge.net/projects/kompozer/. Du kannst jeden Webbrowser auf einem PC oder Mac verwenden. Das ist die Seite zum Herunterladen von Kompozer. Es ist ein kostenloser HTML-Editor (WYSIWYG), der sowohl auf Windows als auch auf Mac funktioniert.
Das ist der grüne Button am oberen Seitenrand. So kommst du auf eine eigene Seite zum Herunterladen. Nach ungefähr fünf Sekunden Verzögerung wird der Download beginnen.
3
Mache einen Doppelklick auf die Installationsdatei. Standardmäßig findet man heruntergeladene Dateien im Ordner "Downloads" auf dem PC oder Mac. Du kannst auch im Webbrowser auf sie klicken, um das Installationsprogramm für Kompozer zu starten. Befolge die folgenden Anweisungen, um Kompozer zu installieren:
- Windows:
  - Wenn du gefragt wirst, ob du zulassen möchtest, dass das Installationsprogramm Veränderungen an deinem System vornimmt, klicke auf Ja.
  - Klicke in den einführenden Fenster auf Next.
  - Klicke auf den runden Button neben "I accept the agreement" (Ich akzeptiere die Vereinbarung) und klicke auf Next.
  - Klicke auf Next, um den standardmäßigen Speicherort zu verwenden oder klicke auf Browse, um einen anderen Speicherort auszuwählen.
  - Klicke auf Next und dann wieder auf Next
  - Klicke auf Install zum Installieren
  - Klicke auf Finish, wenn du fertig bist.
- Mac:
  - Mache einen Doppeklick auf die Installationsdatei für den Kompozer.
  - Klicke auf KompoZer.app
  - Klicke auf das Apple-Zeichen in der oberen linken Ecke.
  - Klicke auf System Preferences (Systemeinstellungen)
  - Klicke auf Security and Privacy (Sicherheit und Privatsphäre)
  - Klicke auf den Reiter General (Allgemein).
  - Klicke auf Open Anyway (Trotzdem öffnen) im unteren Bereich des Fensters.
  - Klicke auf Open (Öffnen) im Fenster, der erscheint.
  - Ziehe das Symbol für den Kompozer auf den Desktop.
  - Öffne den Finder.
  - Klicke auf den Ordner Anwendungen.
  - Ziehe das Symbol für den Kompozer vom Desktop in den Anwendungsordner.
4
Öffne den Kompozer. Mache folgende Schritte, um den Kompozer auf einem PC oder Mac zu öffnen:
- Windows:
  - Klicke auf das Startmenü von Windows.
  - Tippe "Kompozer" ein.
  - Mache einen Doppeklick auf das Symbol für den Kompozer.
- Mac:
  - Klicke auf das Lupensymbol in der oberen rechten Ecke.
  - Tippe "Kompozer" in die Suchleiste ein.
  - Mache einen Doppeklick auf Kompozer.app.
Du findest es in der Menüleiste oben in der Anwendung.
Es ist die zweite Option unter "Datei" im Auswahlmenü. Damit öffnet sich ein Dateibrowser, den du verwenden kannst, um eine HTML-Datei auszuwählen und zu öffnen.
Dadurch wird die HTML-Datei im Kompozer geöffnet.
8
Klicke auf Teilen. Du findest es im mittleren Reiter oben auf der Seite. Dadurch wird ein geteilter Bildschirm angezeigt mit einem HTML-Editor unten und einer Bildfläche mit einer Vorschau oben.
- Du musst die Anwendung vielleicht vergrößern, damit du mehr Platz zum Arbeiten hast.
9
Bearbeite die HTML-DAtei. Der Bildschirm mit dem HTML-Quellcode ist unten, du kannst diesen Bildschirm verwenden, um HTML auf dieselbe Weise wie in Editor oder TextEdit bearbeiten. Du kannst auch die Vorschaufläche verwenden, um dein HTML mit folgenden Schritten zu bearbeiten:
- Verwende das Auswahlmenü in der oberen rechten Ecke, um die Textart auszusuchen (d.h. Überschrift, Absatz usw.)
- Klicke auf eine Auswahl und tippe einen Text ein.
- Verwende die Buttons im Bedienfeld oben im Bildschirm, um fette Schrift, kursive Schrift, Textausrichtung, Einrückungen oder Listen zu deinem Text hinzuzufügen.
- Klicke auf das bunte Quadrat im Bedienfeld oben im Bildschirm, um die Textfarbe zu verändern.
- Klicke auf das Symbol Bild oben im Bildschirm, um ein Bild zu deiner HTML-Datei hinzuzufügen.
- Klicke auf das Symbol, das einer Gliederkette ähnelt, um einen Link zu deiner HTML-Datei hinzuzufügen
Wenn du mit den Änderungen an der Datei fertig bist, klicke auf das Symbol für Speichern oben im Bildschirm. Du findest es unter einem Symbol, das einer Diskette ähnelt. So wird deine Arbeit abgespeichert.
Werbeanzeige