HTML-Dateien bearbeiten

Schritte
Warnungen

Wenn Sie Websites von Hand codieren möchten, können Sie HTML-Dateien in einem einfachen Texteditor wie Notepad (Windows) oder TextEdit (macOS) bearbeiten. Wenn Sie es vorziehen, Elemente auf dem Bildschirm zu verschieben und Live-Vorschauen anzuzeigen, können Sie einen WYSIWYG-Editor (What You See Is What You Get) wie Dreamweaver oder Kompozer verwenden. In diesem Tutorial erfahren Sie, wie Sie eine HTML-Datei in einer Standard- oder visuellen Bearbeitungsanwendung öffnen und bearbeiten.

Schritte

Methode 1 von 4: Verwenden von Notepad (Windows)

1. Klicken Sie auf Windows-Start

. Es ist das Windows-Logo in der Taskleiste. Standardmäßig befindet es sich in der unteren linken Ecke. Jetzt öffnet sich das Startmenü.

2. Typ Notizblock. Notepad öffnet sich im Startmenü.

3. klicke aufNotizblock. Dies ist ein Symbol, das einem Notizbuch mit blauem Einband ähnelt.

4. klicke aufDatei. Es befindet sich oben in der Menüleiste in Notepad. Dies zeigt ein Dropdown-Menü an. Es öffnet sich ein Explorer-Fenster zum Öffnen von Dateien in Notepad.

5. klicke aufÖffnen. Dies ist die zweite Option im Menü Datei.

6. Wählen Sie „Alle Dateien“ aus dem Dropdown-Menü für den Dateityp. Klicken Sie auf `Textdokumente (.txt)“ und wählen Sie „Alle Dateien“ aus dem Dropdown-Menü. Dadurch werden alle Dokumenttypen (einschließlich HTML-Dateien) im Explorer-Fenster angezeigt.

7. Wählen Sie eine HTML-Datei aus und klicken Sie aufÖffnen. Das HTML-Dokument wird in Notepad geöffnet. Sie können den HTML-Code in Notepad bearbeiten.

Du kannst auch ein neues HTML-Dokument erstellen im Notizblock.

8. Bearbeiten Sie den HTML-Code. Um HTML in Notepad zu bearbeiten, benötigen Sie HTML lernen damit Sie es von Hand bearbeiten können. Zu den allgemeinen Elementen, die Sie bearbeiten können, gehören:

: Dies wird oben im HTML-Dokument angezeigt. Dies teilt dem Webbrowser mit, dass es sich um ein HTML-Dokument handelt.

: Diese Tags erscheinen oben und unten im HTML-Dokument. Dies gibt an, wo der HTML-Code beginnt und endet.

: Diese Tags erscheinen oben im HTML-Dokument. Sie geben an, wo der Header des HTML-Dokuments beginnt und endet. Der Header des HTML-Dokuments enthält Informationen, die auf der Webseite nicht zu sehen sind. Dazu gehören der Seitentitel, Metadaten und CSS.

: Diese Tags geben den Titel der Seite an. Der Titel steht in der Kopfzeile des HTML-Dokuments. Geben Sie den Titel der Seite zwischen diesen beiden Tags ein.

: Diese Tags geben den Titel der Seite an: Diese Tags geben an, wo der Textkörper des HTML-Dokuments beginnt und endet. Der Körper ist, wo der gesamte Webseiteninhalt kommt. Der Body kommt im HTML-Dokument nach dem Header.

: Diese Tags erstellen Header. Der Text zwischen den `

: Diese Tags werden verwendet, um Absatztext in einem HTML-Dokument zu erstellen. Der Text zwischen `

: Diese Tags werden verwendet, um fetten Text zu erstellen. Der Text zwischen `

: Diese Tags werden verwendet, um kursiven Text zu erstellen. Der Text zwischen `

: Dieses Tag wird verwendet, um auf eine andere Website zu verlinken. Kopieren Sie die Webadresse, zu der Sie verlinken möchten, und fügen Sie sie dort ein, wo "URL" steht (zwischen den Anführungszeichen). Der Text des Links, in dem "Link" (ohne Anführungszeichen) steht, ist die Beschreibung des Links.

: Dieses Tag wird verwendet, um ein Bild mit HTML-Code zu platzieren. Ersetze den Text "Bild URL" durch die Webadresse des Bildes. 9. klicke aufDatei. Dies befindet sich in der Menüleiste am oberen Bildschirmrand. 10. klicke aufSpeichern als. Dies öffnet einen Dialog, mit dem Sie die Datei speichern können. Um die Datei unter dem bestehenden Namen und Dateityp zu speichern, klicken Sie auf Speichern im Dropdown-Menü unter `Datei`. 11. Wählen Sie `Alle Dateien`. Verwenden Sie das Dropdown-Menü neben "Speichern als Typ", um "Alle Dateien" auszuwählen. 12. Benennen Sie die Datei. Verwenden Sie das Feld neben `Dateiname`, um einen Namen für die Datei einzugeben. 13. Typ.html am Ende der Datei. Nachdem Sie einen Namen für die Datei in das Feld `Dateiname` eingegeben haben, fügen Sie die Erweiterung `.html` an das Ende des Dateinamens. Ohne diese Erweiterung wird die Datei gespeichert als .txt-Datei statt einer HTML-Datei. 14. klicke aufSpeichern. Die Datei ist jetzt gespeichert. Methode2 von 4: Verwenden von TextEdit in macOS 1. Klicken Sie auf das Lupensymbol . Es befindet sich in der oberen rechten Ecke des Mac-Desktops. Dies zeigt eine Suchleiste an.

2. Typ TextBearbeiten in der Suchleiste. Dadurch wird eine Liste mit Apps angezeigt, die dem Suchergebnis entsprechen.

3. klicke aufTextBearbeiten.App. Es steht ganz oben in den Suchergebnissen. Es befindet sich neben einem Symbol, das wie ein Blatt Papier und ein Stift aussieht.

4. klicke aufDatei. Es befindet sich in der Menüleiste am oberen Bildschirmrand, wenn TextEdit geöffnet ist.

5. klicke aufÖffnen. Dadurch wird ein Dateibrowser geöffnet, mit dem Sie in macOS navigieren und Dateien öffnen können.

6. Klicken Sie auf eine HTML-Datei und klicken Sie aufÖffnen. HTML-Dateien haben die Erweiterung `.html` nach dem Dateinamen. Navigieren Sie mit dem Dateibrowser zu einer HTML-Datei und klicken Sie darauf, um sie auszuwählen. Dann klick Öffnen um die HTML-Datei in TextEdit zu öffnen.

7. Bearbeiten Sie den HTML-Code. Sie können TextEdit verwenden, um HTML-Code zu bearbeiten oder zu schreiben. Du solltest HTML lernen damit Sie es von Hand bearbeiten können. Zu den allgemeinen Elementen, die Sie bearbeiten können, gehören die folgenden:.

: Dies wird oben im HTML-Dokument angezeigt. Dies teilt dem Webbrowser mit, dass es sich um ein HTML-Dokument handelt.

: Diese Tags erscheinen oben und unten im HTML-Dokument. Dies gibt an, wo der HTML-Code beginnt und endet.

: Diese Tags geben den Titel der Seite an. Der Titel steht in der Kopfzeile des HTML-Dokuments. Geben Sie den Titel der Seite zwischen diesen beiden Tags ein.

: Diese Tags erstellen Header. Der Text zwischen den `

: Diese Tags werden verwendet, um Absatztext in einem HTML-Dokument zu erstellen. Der Text zwischen `

: Diese Tags werden verwendet, um fetten Text zu erstellen. Der Text zwischen `

: Diese Tags werden verwendet, um kursiven Text zu erstellen. Der Text zwischen `

: Dieses Tag wird verwendet, um ein Bild mit HTML-Code zu platzieren. Ersetzen Sie den Text `Image URL` durch die Webadresse des Bildes. 8. klicke aufDatei. Es befindet sich in der Menüleiste oben auf dem Bildschirm. 9. klicke aufSpeichern. Es befindet sich im Dropdown-Menü unter "Datei". Speichert die HTML-Datei. Um die Datei umzubenennen, klicken Sie auf umbenennen (oder Umbenennen) aus dem Dropdown-Menü "Datei". Geben Sie oben auf dem Bildschirm einen neuen Namen für die Datei ein. Stellen Sie sicher, dass `.html`-Erweiterung befindet sich oben auf der Seite. Methode 3 von 4: Dreamweaver verwenden 1. Dreamweaver öffnen. Dreamweaver hat ein Symbol, das wie ein grünes Quadrat mit „Dw“ in der Mitte aussieht. Klicken Sie auf das Symbol im Windows-Startmenü oder auf dem Mac im Ordner „Programme“, um Dreamweaver zu öffnen.

Adobe Dreamweaver erfordert a Abonnement. Sie können ein Abonnement ab etwa 20 € pro Monat erwerben.

2. klicke aufDatei. Es befindet sich in der Menüleiste oben auf dem Bildschirm.

3. klicke aufÖffnen. Diese finden Sie im Dropdown-Menü unter `Datei`.

4. Wählen Sie ein HTML-Dokument aus und klicken Sie aufÖffnen. Verwenden Sie den Dateibrowser, um ein HTML-Dokument auf Ihrem Computer auszuwählen, und klicken Sie darauf, um es auszuwählen. Dann klick auf Öffnen in der unteren rechten Ecke.

5. klicke aufTeilen. Dies ist in der mittleren Registerkarte oben auf der Seite. Dies zeigt einen geteilten Bildschirm mit einem HTML-Editor unten und einem Vorschaubildschirm oben.

6. Bearbeiten Sie das HTML-Dokument. Verwenden Sie den HTML-Editor, um HTML zu bearbeiten. Die Bearbeitung von HTML in Dreamweaver unterscheidet sich nicht wesentlich von der Bearbeitung von HTML in Notepad oder TextEdit. Die Eingabe eines HTML-Tags öffnet ein Suchmenü mit entsprechenden HTML-Tags. Sie können auf das HTML-Tag klicken, um die Start- und End-Tags einzufügen. Dreamweaver überprüft alle Ihre HTML-Elemente auf öffnende und schließende Tags.

Alternativ können Sie im HTML-Editor auf die Stelle klicken, an der Sie ein HTML-Element einfügen möchten, und dann auf klicken Einfügung in der Menüleiste am oberen Bildschirmrand. Klicken Sie im Dropdown-Menü auf das Element, das Sie einfügen möchten, um den HTML-Code automatisch hinzuzufügen.

7. klicke aufDatei. Wenn Sie mit der Bearbeitung des HTML-Dokuments fertig sind, klicken Sie auf Datei in der Menüleiste am oberen Bildschirmrand.

8. klicke aufSpeichern. Es ist im Dropdown-Menü unten Datei. Speichert HTML-Dokument.

Methode 4 von 4: Kompozer . verwenden

1. Gehe zuhttps://sourceforge.net/projekte/kompozer/ in einem Webbrowser. Sie können jeden Webbrowser auf dem PC oder Mac verwenden. Dies ist die Download-Seite für Kompozer. Es ist ein kostenloser HTML-Editor (WYSIWYG), der sowohl unter Windows als auch unter Mac funktioniert.

2. klicke aufHerunterladen. Es ist der grüne Button oben auf der Seite. Dadurch gelangen Sie zu einer separaten Download-Seite. Nach einer Verzögerung von fünf Sekunden wird der Download gestartet.

3. Doppelklick auf die Installationsdatei. Heruntergeladene Dateien befinden sich standardmäßig im Ordner "Downloads" auf dem PC oder Mac. Sie können auch in Ihrem Webbrowser darauf klicken, um das Kompozer-Installationsprogramm zu starten. Installieren Sie Kompozer wie folgt:

Fenster:

Wenn Sie gefragt werden, ob Sie dem Installationsprogramm erlauben möchten, Änderungen an Ihrem System vorzunehmen, klicken Sie auf ja.

klicke auf Nächster in den Einführungsfenstern.

Klicken Sie auf die runde Schaltfläche neben "Ich akzeptiere die Vereinbarung" und klicken Sie auf Nächster.

klicke auf Nächster um den Standardinstallationsort zu verwenden oder klicken Sie auf Zum Durchblättern einen anderen Installationsort auswählen.

klicke auf Nächster und dann nochmal klicken Nächster.

klicke auf installieren.

klicke auf Vollständig.

Mac:

Doppelklicken Sie auf die Kompozer-Installationsdatei.

klicke auf Kompozer.App.

Klicken Sie auf das Apple-Symbol in der oberen linken Ecke.

klicke auf Systemeinstellungen.

klicke auf Sicherheit und Privatsphäre.

Klicken Sie auf die Registerkarte Allgemein.

klicke auf trotzdem geöffnet unten im Fenster.

klicke auf Öffnen im Pop-up-Fenster.

Ziehen Sie das Kompozer-Symbol auf Ihren Desktop.

Finder öffnen.

Klicken Sie auf die Karte Programme.

Ziehen Sie das Kompozer-Symbol vom Desktop in den Ordner „Anwendungen“.

4. Öffne Kompozer. Verwenden Sie die folgenden Schritte, um Kompozer auf einem PC oder Mac zu öffnen.

Fenster:

Klick es an Windows-Start-Speisekarte.

Geben Sie `Komponist` ein

Doppelklicken Sie auf das Kompozer-Symbol.

Mac:.

Klicken Sie oben rechts auf das Lupensymbol.

Geben Sie `Kompozer` in die Suchleiste ein.

Doppelklick auf Kompozer.App.

5. klicke aufDatei. Es befindet sich in der Menüleiste oben in der App.

6. klicke aufDatei öffnen. Dies ist die zweite Option im Dropdown-Menü unter `Datei`. Dadurch wird ein Dateibrowser geöffnet, mit dem Sie eine geöffnete HTML-Datei auswählen können.

7. Klicken Sie auf eine HTML-Datei und dannÖffnen. Dies öffnet die HTML-Datei in Kompozer.

8. klicke aufTeilen. Es ist die mittlere Registerkarte oben auf der Seite. Dies zeigt einen geteilten Bildschirm, der unten einen HTML-Editor und oben einen Vorschaubereich enthält.

Möglicherweise müssen Sie das Fenster der App vergrößern, um mehr Platz zum Arbeiten zu haben.

9. Bearbeiten Sie das HTML-Dokument. Der HTML-Quellbildschirm befindet sich unten. Sie können diesen Bildschirm verwenden, um HTML auf die gleiche Weise wie in Notepad oder TextEdit zu bearbeiten. Sie können auch den Vorschaubildschirm verwenden, um Ihren HTML-Code mit den folgenden Schritten zu bearbeiten:

Verwenden Sie das Dropdown-Menü in der oberen rechten Ecke, um den Texttyp auszuwählen (d.w.z. Überschrift, Absatz usw.).

Klicken und tippen, um Text hinzuzufügen.

Verwenden Sie die Schaltflächen im Bedienfeld oben auf dem Bildschirm, um Ihrem Text Fett, Kursiv, Textausrichtung, Einrückung oder Listen hinzuzufügen.

Klicken Sie auf das farbige Quadrat im Bedienfeld oben auf dem Bildschirm, um die Textfarbe zu ändern.

Klick es an Bild-Symbol oben auf dem Bildschirm, um Ihrem HTML-Dokument ein Bild hinzuzufügen.

Klicken Sie auf das Symbol, das wie ein Kettenglied aussieht, um einen Link zu Ihrem HTML-Dokument hinzuzufügen.

10. klicke aufSpeichern. Wenn Sie mit den Änderungen an Ihrem Dokument fertig sind, klicken Sie auf Speichern-Symbol oben auf dem Bildschirm. Darunter befindet sich ein Symbol, das wie eine Diskette aussieht. Speichern Sie Ihre Arbeit damit.