Zum Start unseres Artikelworkshops „HTML und CSS erlernen“, erklären wir Ihnen heute die Grundstruktur einer HTML-Datei. Unser Workshop ist genau das richtige für Einsteiger, welche ihre eigene Website von Grund an selbst erstellen möchten, oder auch für Fortgeschrittene, welche unseren Workshop als Nachschlagewerk nutzen möchten.
Heute startet ein weiterer Workshop auf Private-Words.com. Hier lernen Sie, wie Sie in einfachen Schritten Websites selbst erstellen können. Zuerst erklären wir die Grundstruktur einer HTML-Datei.
<!Doctype html> <!-- Hier wird die Datei definiert --> <html><!-- Der html-tag wird hier geöffnet --> <head><!-- hier öffnen wir den head-tag --> </head><!-- hier schließt der head-tag --> <body><!-- hier öffnen wir den body-tag --> </body><!-- hier schließt der body-tag --> </html><!-- hier schließt der html-tag -->
Tags in HTML schließen immer mit einem Slash und werden immer in spitzen Klammern geschrieben.
<!Doctype html>
Definiert den Typ der Datei z.B. XML, HTML und die entsprechende Version.
<html>...</html>
Der html-tag definiert den Bereich in dem sich HTML-Quellcode befindet. Nur Code der in diesem Bereich definiert ist wird berücksichtigt.
<head>...</head>
Der head-Tag beinhaltet die HTML-Tags, die Inhalt und Darstellung der Webseite steuern und den Browser über Beziehungen zu anderen Seiten informieren. Die Inhalte des head-Tags wird nicht auf der Webseite angezeigt, ausgenommen des title-tags der im Browsertab angezeigt wird.
<body>...</body>
Im body wird der Seitenaufbau definiert und es werden Tags angelegt die mit Inhalten gefüllt werden.
Ihre erste HTML-Testseite
Als erstes benötigen wir einen Editor. Am einfachsten geht es für den Anfang mit dem Standard-Windows Texteditor.Haben wir diesen geöffnet, so speichern wir die Datei als erstes unter index.html (Warum index? Dazu kommen wir später!).
Beginnen wir mit unserem Grundgerüst:
<!Doctype html> <html> <head> <title>Meine erste Seite</title><!-- Hier definieren wir den Namen der im Browser angezeigt wird --> </head> <body> Hier könnte ihr Inhalt stehen<!-- Texte kommen ohne tags aus, diese werden nur für die Formatierung benötigt--> </body> </html>
Das ist der einfache Aufbau einer HTML-Seite. Nun noch zu der index.html-Datei: Der Name ist aus Sicherheitsgründen erforderlich. Wenn auf einen Ordner zugegriffen wird, in dem eine index.html-Datei liegt, wird diese automatisch vom Browser erkannt und ausgeführt. Somit können externe Betrachter nicht direkt auf die Ordnerstruktur zugreifen.
Alle Teile des Workshops jetzt kostenlos abrufen:
- Grundstruktur einer HTML-Datei
- Tabellen und Listen
- Textformatierung
- Links, Videos & Bilder
- Formulare
- Die erste CSS-Datei
Artikelbild: Sebastian Fuss / pixelio.de
