Webseiten bestehen zu wesentlichen Teilen aus HTML und CSS. HTML (Hyper-Text-Markup-Language) und CSS (Cascading-Style-Sheets) sind textbasierte Auszeichnungssprachen und ergänzen einander. Dabei bleibt die Aufgabe klar getrennt: HTML ist für den Inhalt und CSS für die Gestaltung der Seite verantwortlich. In den Videos wird die typische kombinierte Arbeitsweise HTML und CSS am Beispiel einer kleinen Webseite vorgeführt. Die Erklärungen sind in den Untertiteln. Alle Daten und weiterführende Informationen sind hier unten als Download verfügbar. Diese Reihe ist die Grundlage um die weiteren Lernsituationen bei CODE lösen zu können.

Im Hallo Welt Tutorial Speed Run ist das komplette Tutorial dieser Playlist in 2.5 Minuten zusammengefasst. Mit HTML und CSS wird eine Single Page Webseite von Grund auf in 17 kurzen Folgen erstellt.

Im ersten Video wird der HTML Aufbau einer typischen Webseite vorgenommen. HTML beschreibt die Inhalte der Webseite. Das wesentliche Mittel für die Struktur ist die Arbeit mit den "tags" in den eckigen Klammern, z.B. #html zum Eröffnen des HTML Dokuments um das Dokument zu beenden. Die "tags" HTML Dokumente haben eine immer gleiche Struktur mit einem und.

Nachdem das HTML Gerüst und die Inhalte erstellt sind, wird die Gestaltung der Seite mit CSS grundsätzlich angepasst. Dabei werden Farben, Formen und Größen mit CSS Eigenschaften bestimmt. CSS hat gegenüber HTML eine andere Schreibweise (Syntax) in Form von Selektor {Eigenschaft: Wert;}.

Es wird ein Bild in die Webseite eingefügt und die Größe des Bildes angepasst. Dafür wird der der HTML "Image"-Tag mit Attributen benutzt. Es werden auch Anpassungen im CSS vorgenommen.

Speicherplatz ist immer ein großes Thema. Der Bedarf an guter Qualität ist gleichzeitig auch aufgrund der mobilen Geräte gestiegen. Photoshop hat einen brauchbaren Dialog um Bilder für das Web zu speichern. In Frage kommen als Formate: PNG, JPG und GIF. Am Beispiel eines Fotos wird in dem Video das JPG Format vorgestellt.

Es wird immer auf einen Kompromiss aus Speicherplatz und Qualität hinauslaufen. Hier ist das JPEG Format gut geeignet und hat sich weltweit etabliert.

Aggressivere und damit hinsichtlich des Speicherplatzes bessere Ergebnisse würden mit anderen Programmen wie z.B. Fireworks erzielt werden.

Auf der Webseite sollen weitere Artikel eingefügt werden. Dies kann simpel und konsequent durch duplizieren der bereits vorhandenen Inhalte erreicht werden.

SEO, d.H. Search Engine Optimization, ist ein Teil des Erfolges einer Webseite. SEO wird teilweise über eine saubere und klare Semantik im Quellcode erreicht. Semantik bedeutet in diesem Zusammenhang, dass HTML Elemente ihrer Bestimmung nach genutzt werden. Z.B. bündelt ein ARTICLE Elemente, welche zu einem Artikel gehörten.

Am Beispiel eines Zitates von August Hoffmann von Fallersleben zeige ich die Umsetzung in HTML und CSS. Dabei gehen wir auch auf das wesentliche Prinzip display: inline und display: block ein.

Ein Hintergrundbild wird im CSS eingefügt. Hintergrundbilder sind eine CSS Eigenschaft die allen Elementen zugeordnet werden kann.

Die Artikel sollen sich voneinander besser abheben. Dafür wird eine Regel im CSS aufgestellt, die bei allen "geraden" Artikeln die Hintergrundfarbe minimal ändert. Solche Eigenschaften können gut mit pseudoclasses umgesetzt werden. In dem Beispiel kommt die pseudoblass :nth-of-type zum Einsatz, außerdem müssen ein paar Änderungen aufgrund des CSS Box-Modell gemacht werden.

In die Webseite sollen mehr Bilder eingebaut werden. Allerdings führen diese vielen Dateien zu einem unübersichtlichen Buddel-Muddel. Eine Lösung hierfür ist eine klare Ordnerstruktur mit relativen Pfaden. Über diese Pfad-Angaben wird aufgezeigt, was auf welcher Ebene und in welchem Ordner liegt.

In jedem Artikel soll eine Bilder-Galerie eingerichtet werden. Als Vorbereitung dieser Galerie werden mehrere Bilder eingefügt und in figure gruppiert. Die Größen der Elemente werden im CSS angepasst. Typische Probleme dabei sind Fehler im Pfad oder Dateinamen.

Mit der CSS Eigenschaft Float können Elemente nebeneinander platziert werden. Nicht immer geht es so gut wie hier. Richtig Rund wird Float nur mit Clear, dies wird im nächsten Video beleuchtet

Der in einer CSS-Class eingerichtete Float wird auch auf die Winter-Galerie angewendet. Die Möglichkeit CSS-Classes beliebig oft zu nutzen ist typisch und primäre Besonderheit dieser Art der CSS Selektion.

Häufig verursacht Float Probleme, da die Höhe des Eltern-Elements zusammenbricht (kollabiert). Dies ist bisher bei unserem Beispiel nicht aufgefallen, jedoch wird es offensichtlich, wenn die Bilder links gefloatet werden. Es gibt dafür nur eine Lösung: Die Eigenschaft Clear. Clear muss einfach auf ein nachfolgendes Element angewendet werden. Dann passt auch die kollabierte Höhe wieder. Es ist empfohlen, die CSS-Eigenschaften Float und Clear immer gemeinsam zu benutzen.

Die eindeutige Identifikation mit einer ID ermöglicht im CSS individuelle Gestaltung und im HTML eine Verknüpfung mit Links. Der Unterschied zu einer CSS-Klasse (Class) ist, dass eine ID nur einmal benutzt werden darf. Im CSS werden ID mit einer Raute (#) und die Klassen mit einem Punkte (.) eingeleitet. In dem Video werden die Artikel mit ID markiert und dann im CSS farblich differenziert. Dabei spielt der verschachtelte (kaskadierende) Aufbau bei der Selektion der gewünschten Elemente die entscheidende Rolle.

Die Navigation wird mit dem klassischen a (Anker Tag) umgesetzt. Die Links führen zu den ID der Artikel. Damit die Navigation immer sichtbar bleibt, bedarf es einer Anpassung der Positionierung auf position: fixed. Das Design der Links wird über die 4 Pseudclasses :link, :visited, :hover und :active umgesetzt. Außerdem erzeugen wir noch einen weichen Übergang mit der CSS-Eigenschaft transition.

Wir unterstützen die Orientierung des Besuchers, indem der aktive Artikel animiert hervorgehoben wird. Dazu werden die bereits vorhandenen ID sowie die Pseudoclass :target benutzt. Der animierte Übergang wird mit der CSS Eigenschaft transition bestimmt. Eine kleine Korrektur der Gestaltung der Links erfolgt zum Abschluss.

Schriften sind ein wesentliches Gestaltungsmittel. Erfreulicherweise bieten Anbieter wie z.B. Google Webfonts eine große Auswahl. Bei der Auswahl einer Bildschirmschrift sollte deren Tauglichkeit vorab geprüft sein. In dem Video wird die Schrift Open Sans von Google Webfonts in die Webseite eingebunden. Dies führt zu wenigen Änderungen, da die CSS Eigenschaft "font-weight" in Form eine Zahl definiert wird.