HTML -Tutorial

HTML-HOME HTML-Einführung HTML-Editoren HTML-Basis HTML-Elemente HTML-Attribute HTML-Überschriften HTML-Absätze HTML-Stile HTML-Formatierung HTML-Zitate HTML-Kommentare HTML-Farben HTML-CSS HTML-Links HTML-Bilder HTML-Favicon HTML-Tabellen HTML-Listen HTML-Block und Inline HTML-Klassen HTML-ID HTML-Iframes HTML-JavaScript HTML-Dateipfade HTML-Kopf HTML-Layout HTML-responsiv HTML Computercode HTML-Semantik HTML-Styleguide HTML-Entitäten HTML-Symbole HTML-Emojis HTML-Zeichensatz HTML-URL-Codierung HTML vs. XHTML

HTML -Formulare

HTML-Formulare HTML-Formularattribute HTML-Formularelemente HTML-Eingabetypen HTML-Eingabeattribute HTML-Eingabeformularattribute

HTML -Grafiken

HTML-Leinwand HTML-SVG

HTML- Medien

HTML-Medien HTML-Video HTML-Audio HTML-Plugins HTML-YouTube

HTML -APIs

HTML-Geolokalisierung HTML-Drag/Drop HTML-Webspeicher HTML-Webworker HTML-SSE

HTML- Beispiele

HTML-Beispiele HTML-Quiz HTML-Übungen HTML-Zertifikat HTML-Zusammenfassung HTML-Barrierefreiheit

HTML -Referenzen

HTML-Tag-Liste HTML-Attribute Globale HTML-Attribute HTML-Browser-Unterstützung HTML-Ereignisse HTML-Farben HTML-Leinwand HTML-Audio/Video HTML-Doctypes HTML-Zeichensätze HTML-URL-Codierung HTML-Sprachcodes HTTP-Nachrichten HTTP-Methoden PX-zu-EM-Konverter Tastatürkürzel

HTML -Editoren


Ein einfacher Texteditor ist alles, was Sie brauchen, um HTML zu lernen.


Lernen Sie HTML mit Notepad oder TextEdit

Webseiten können mit professionellen HTML-Editoren erstellt und modifiziert werden.

Zum Erlernen von HTML empfehlen wir jedoch einen einfachen Texteditor wie Notepad (PC) oder TextEdit (Mac).

Wir glauben, dass die Verwendung eines einfachen Texteditors eine gute Möglichkeit ist, HTML zu lernen.

Führen Sie die folgenden Schritte aus, um Ihre erste Webseite mit Notepad oder TextEdit zu erstellen.


Schritt 1: Editor öffnen (PC)

Windows 8 oder höher:

Öffnen Sie den Startbildschirm (das Fenstersymbol unten links auf Ihrem Bildschirm). Geben Sie Notepad ein .

Windows 7 oder früher:

Öffnen Sie Start > Programme > Zubehör > Notepad


Schritt 1: Öffnen Sie TextEdit (Mac)

Öffnen Sie Finder > Programme > TextEdit

Ändern Sie auch einige Einstellungen, damit die Anwendung Dateien korrekt speichert. Wählen Sie unter „Einstellungen“ > „Format“ > „Nur Text“ aus .

Aktivieren Sie dann unter "Öffnen und Speichern" das Kontrollkästchen "HTML-Dateien als HTML-Code statt als formatierten Text anzeigen".

Öffnen Sie dann ein neues Dokument, um den Code zu platzieren.


Schritt 2: Schreiben Sie etwas HTML

Schreiben oder kopieren Sie den folgenden HTML-Code in Notepad:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Notizblock



Schritt 3: Speichern Sie die HTML-Seite

Speichern Sie die Datei auf Ihrem Computer. Wählen Sie Datei > Speichern unter im Notepad-Menü.

Benennen Sie die Datei „index.htm“ und stellen Sie die Codierung auf UTF-8 ein (die bevorzugte Codierung für HTML-Dateien).

Im Browser anzeigen

Tipp: Sie können entweder .htm oder .html als Dateierweiterung verwenden. Es gibt keinen Unterschied, es liegt an Ihnen.


Schritt 4: Zeigen Sie die HTML-Seite in Ihrem Browser an

Öffnen Sie die gespeicherte HTML-Datei in Ihrem bevorzugten Browser (doppelklicken Sie auf die Datei oder klicken Sie mit der rechten Maustaste – und wählen Sie „Öffnen mit“).

Das Ergebnis wird in etwa so aussehen:

Im Browser anzeigen


W3Schools Online-Editor – „Probieren Sie es selbst aus“

Mit unserem kostenlosen Online-Editor können Sie den HTML-Code bearbeiten und das Ergebnis in Ihrem Browser anzeigen.

Es ist das perfekte Werkzeug, wenn Sie Code schnell testen möchten . Es hat auch eine Farbcodierung und die Möglichkeit, Code zu speichern und mit anderen zu teilen:

Beispiel

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Klicken Sie auf die Schaltfläche „Try it Yourself“, um zu sehen, wie es funktioniert.


W3Schulräume

Wenn Sie Ihre eigene Website erstellen und Ihren Code online speichern möchten, probieren Sie unseren kostenlosen Website-Builder namens W3schools Spaces aus :