Eine HTML-Datei ist einfach eine Textdatei, die mit der Endung .html oder .htm gespeichert wird.
Getting Started
In diesem Tutorial lernen Sie, wie einfach es ist, ein HTML-Dokument oder eine Webseite zu erstellen. Um mit dem Programmieren von HTML zu beginnen, benötigen Sie nur zwei Dinge: einen einfachen Texteditor und einen Webbrowser.
Lassen Sie uns mit dem Erstellen Ihrer ersten HTML-Seite beginnen.
Erstellen Ihres ersten HTML-Dokuments
Lassen Sie uns die folgenden Schritte durchgehen. Am Ende dieses Tutorials werden Sie eine HTML-Datei erstellt haben, die die Nachricht „Hello world“ in Ihrem Webbrowser anzeigt.
Schritt 1: Erstellen der HTML-Datei
Öffnen Sie den Texteditor Ihres Computers und erstellen Sie eine neue Datei.
Tipp: Wir empfehlen Ihnen, hierfür Notepad (unter Windows), TextEdit (unter Mac) oder einen anderen einfachen Texteditor zu verwenden; verwenden Sie nicht Word oder WordPad! Sobald Sie die grundlegenden Prinzipien verstanden haben, können Sie zu fortgeschritteneren Tools wie Adobe Dreamweaver wechseln.
Schritt 2: Geben Sie etwas HTML-Code ein
Starten Sie mit einem leeren Fenster und geben Sie den folgenden Code ein:
Beispiel
Probieren Sie diesen Code aus “
<!DOCTYPE html><html lang="en"><head> <title>A simple HTML document</title></head><body> <p>Hello World!<p></body></html>Schritt 3: Speichern der Datei
Nun speichern Sie die Datei auf Ihrem Desktop als „myfirstpage.html „.
Hinweis: Es ist wichtig, dass die Endung .html angegeben wird – einige Texteditoren, wie z.B. Notepad, speichern sie sonst automatisch als .txt.
Um die Datei in einem Browser zu öffnen. Navigieren Sie zu Ihrer Datei und doppelklicken Sie auf sie. Sie wird in Ihrem Standard-Webbrowser geöffnet. Wenn dies nicht der Fall ist, öffnen Sie Ihren Browser und ziehen Sie die Datei dorthin.
Erläuterung des Codes
Sie fragen sich vielleicht, was es mit dem Code auf sich hat. Nun, lassen Sie es uns herausfinden.
- Die erste Zeile
<!DOCTYPE html>ist die Dokumenttyp-Deklaration. Sie weist den Webbrowser an, dass dieses Dokument ein HTML5-Dokument ist. Groß- und Kleinschreibung wird nicht beachtet. - Das
<head>-Element ist ein Container für die Tags, die Informationen über das Dokument liefern, z. B. definiert das<title>-Tag den Titel des Dokuments. - Das
<body>-Element enthält den eigentlichen Inhalt des Dokuments (Absätze, Links, Bilder, Tabellen usw.), der im Webbrowser gerendert und dem Benutzer angezeigt wird.
In den kommenden Kapiteln werden Sie die verschiedenen HTML-Elemente im Detail kennenlernen. Konzentrieren Sie sich zunächst auf die Grundstruktur des HTML-Dokuments.
Hinweis: Eine DOCTYPE-Deklaration erscheint am Anfang einer Webseite vor allen anderen Elementen; die doctype-Deklaration selbst ist jedoch kein HTML-Tag. Jedes HTML-Dokument benötigt eine Dokumenttyp-Deklaration, um sicherzustellen, dass Ihre Seiten korrekt angezeigt werden.
Tipp: Die Tags <html><head> und <body> bilden das Grundgerüst einer jeden Webseite. Der Inhalt innerhalb der Tags <head> und </head> ist für den Benutzer unsichtbar, mit einer Ausnahme: dem Text zwischen den Tags <title> und </title>, der als Titel in einem Browser-Tab erscheint.
HTML Tags und Elemente
HTML wird in Form von HTML-Elementen geschrieben, die aus Markup-Tags bestehen. Diese Markup-Tags sind das grundlegende Merkmal von HTML. Jedes Markup-Tag besteht aus einem Schlüsselwort, das von spitzen Klammern umgeben ist, wie z.B. <html><head><body><title><p>, und so weiter.
HTML-Tags kommen normalerweise in Paaren wie <html> und </html>. Das erste Tag eines Paares wird oft als öffnendes Tag (oder Start-Tag) bezeichnet und das zweite Tag als schließendes Tag (oder End-Tag).
Ein öffnendes Tag und ein schließendes Tag sind identisch, bis auf einen Schrägstrich (/) nach der öffnenden spitzen Klammer des schließenden Tags, um dem Browser mitzuteilen, dass der Befehl abgeschlossen ist.
Zwischen dem Start- und End-Tag können Sie entsprechende Inhalte platzieren. Ein Absatz, der durch das p-Element repräsentiert wird, würde zum Beispiel so geschrieben werden:
Beispiel
Probieren Sie diesen Code aus “
<p>This is a paragraph.</p><!-- Paragraph with nested element --><p> This is <b>another</b> paragraph.</p>Die verschiedenen HTML-Elemente werden Sie im nächsten Kapitel kennenlernen.