Mit diesem Artikel beginnt der Webdesign Workshop 2020. Schritt für Schritt und Artikel für Artikel werden die Grundlagen von HTML und CSS vorgestellt.

Die Doctype-Angabe:

Ein HTML5 Dokument beginnt mit der Doctype-Angabe…

  • <!DOCTYPE html>

In HTML werden einzelne Elemente also in Spitzklammern gesetzt. Einzige Besonderheit der Doctype-Angabe ist das Ausrufezeichen – das gibt es in den anderen Elementen so nicht.

Das HTML-Element:

Direkt nach der Doctype-Angabe folgt das HTML-Element…

  • <html>

Ganz am Ende der Datei wird dieses Element auch wieder geschlossen…

  • </html>

Der head-Bereich:

Der erste Bereich der nun folgt ist der head-Bereich:

  • <head>
  • <title>HTML 5 Basis</title>
  • <link rel=”stylesheet” href=”01_CSS/01_zentrale.css” type=”text/css” />
  • <meta charset=”UTF-8″/>
  • </head>

Der head-Bereich legt den Titel der Webseite fest – also das was im Browserfenster in der Titelleiste steht. Außerdem findet sich hier die Angabe zur CSS-Datei und falls nötig auch Metaangaben für die Webseite. Weitere Details dazu bei Bedarf später…

Der body-Bereich:

Der nächste Bereich ist nun der Hauptbereich der Webseite – der body-Bereich.

  • <body>

Innerhalb dieses body-Bereichs werden nun entweder „div id-Bereiche“ eingefügt oder gleich die neuen semantischen HTML 5 Elemente benutzt.

  • </body>

Auch der body-Bereich wird am Ende wieder geschlossen.

Ausblick:

Im nächsten Webdesign-Artikel wird das HTML Grundgerüst weiterentwickelt und zwar mit den Inhalten und Elementen für den body-Bereich…


Von Torsten