Setze eine vollständige Webseite mit dem Doctype und den Tags html, head, meta und body zusammen.
Diese Lektion in Kodokon öffnenBisher hast du HTML-Fragmente geschrieben. Eine echte Webseite folgt jedoch immer derselben vollständigen Struktur, ein bisschen wie ein förmlicher Brief immer einen Briefkopf, einen Textteil und eine Unterschrift hat. Alles beginnt mit der Deklaration <!DOCTYPE html>, die in der allerersten Zeile steht: Sie sagt dem Browser, dass das Dokument modernes HTML verwendet. Es ist kein Tag - es ist eine einfache Deklaration, und sie wird niemals geschlossen.
Als Nächstes kommt das <html>-Element, die Wurzel der Seite: Alles andere steht darin. Sein Attribut lang="en" gibt die Sprache des Dokuments an. Es enthält genau zwei Kinder. Zuerst <head>: der Ausweis der Seite, mit Informationen, die für den Besucher unsichtbar sind. Dann <body>: der gesamte sichtbare Inhalt, also deine Überschriften, Absätze, Listen, Links, Bilder und Tabellen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first page</title>
</head>
<body>
<h1>Welcome to my page!</h1>
<p>It contains everything I have learned.</p>
</body>
</html>Sehen wir uns den Inhalt des <head> an. Das selbstschließende Tag <meta charset="UTF-8"> legt die Zeichenkodierung fest: Sie sorgt dafür, dass Buchstaben mit Akzent (é, à, ç) korrekt angezeigt werden. Das <title>-Tag legt den Seitentitel fest, der im Browser-Tab und in den Suchergebnissen erscheint. Ein zweites <meta>-Tag, bekannt als viewport-Tag, wird oft hinzugefügt, damit sich die Seite an die Breite von Handybildschirmen anpasst.
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>My first page</title>
</head>Du kannst es gleich jetzt ausprobieren, ohne etwas zu installieren. Öffne einen einfachen Texteditor (Notepad unter Windows, TextEdit auf dem Mac im Nur-Text-Modus), kopiere das vollständige Grundgerüst und speichere die Datei dann mit der Endung .html, zum Beispiel index.html. Doppelklicke danach auf die Datei: Sie öffnet sich in deinem Browser, und deine erste Seite erscheint.