Hallo Welt
- In diesem Tutorial für Einsteiger wird eine Webseite aus verschiedenen Komponenten erstellt.
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.
Datenschutzerklärung von Youtube.
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. Datenschutzerklärung von Youtube.
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;}.
Datenschutzerklärung von Youtube.
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.
Datenschutzerklärung von Youtube.
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.
Datenschutzerklärung von Youtube.
Auf der Webseite sollen weitere Artikel eingefügt werden. Dies kann simpel und konsequent durch duplizieren der bereits vorhandenen Inhalte erreicht werden.
Datenschutzerklärung von Youtube.
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.
Datenschutzerklärung von Youtube.
Ein Hintergrundbild wird im CSS eingefügt. Hintergrundbilder sind eine CSS Eigenschaft die allen Elementen zugeordnet werden kann.
Datenschutzerklärung von Youtube.
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.
Datenschutzerklärung von Youtube.
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.
Datenschutzerklärung von Youtube.
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.
Datenschutzerklärung von Youtube.
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
Datenschutzerklärung von Youtube.
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.
Datenschutzerklärung von Youtube.
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.
Datenschutzerklärung von Youtube.
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.
Datenschutzerklärung von Youtube.
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.
Datenschutzerklärung von Youtube.
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.
Datenschutzerklärung von Youtube.
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.
Datenschutzerklärung von Youtube.