Programmieren in HTML5 und CSS3

Gestaltung einer Webseite mittels HTML5

Die Gestaltung einer Webseite mit HTML5 erfolgt durch Tags welche in der Regel mit < geöffnet wird und > geschlossen wird. Jedes Tag hat eine Bedeutung.

HTML5 Tags

Nachfolgend werden in der jeder Zeile die Bedeutung genannt.

  • Zeile 1: Es wird der Dokumententyp für das Betriebssystem angegeben
  • Zeile 4-13: Es wird der Inhalt der Seite angegeben
  • Zeile 4 – 6: Es werden im head-Teil der Seite die Metainformationen zur Webseite angegebe
  • Zeile 5: Es wird angegeben welche Zeichensatz verwendet wird
  • Zeile 6: Es wird der Titel der Seite beschrieben
  • Zeile 9-11: Es wird der eigentliche Seiteninhalt im Body Teil der Webseite angeben

Im Bodyteil kann der eigentliche Inhalt der Weibseite beschrieben werden. Es wird unterschieden zwischen Überschriften (h1-h6 wie headings) und Absätzen (p wie paragraphs).

Headings 1-6 in HTML5

Unter jede Überschrift kann ein und mehrere Absätze gesetzt werden.

Absätze in HTML5

Die vollständige Seite sieht wie folgt aus:

Überschriften und Absätzen in HTML5

Gestaltung einer Webseite mittels CSS3

Mittels Style-Elemente kann der Inhalt des HTML strukturiert (Abstände zwischen den Zeilen oder des Sichtfläche) und formatiert (Farbe der Schrift) werden.

Das CSS3 kann Inline (Inline CSS), im Head Teil () der Seite oder in einer gesonderten Datei vorliegen.

Inline CSS und CSS3

Das Ergebnis sieht beim Öffnen der HTML-Seite im Browser mittels Inline CSS aus.

Inline CSS in CSS3 im Browser

Im Head-Teil (Internal CSS) der Seite kann das CSS folgendermaßen

Internal CSS und CSS3

Das Ergebnis sieht beim Öffnen der HTML-Seite im Browser mittels Internal CSS aus.

Internal-CSS und CSS3 im Browser

Eine CSS Definition kann auch exter stattfinden (External CSS)

External-CSS und CSS3

External CSS in CSS3

Das Ergebnis sieht beim Öffnen der HTML-Seite im Browser mittels External-CSS aus.

External CSS und CSS3 im Browser