Webdesign mit HTML und CSS für Beginner

Speedrun (0)

▲ Watch in HD!

InhaltTon und Musik
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.
Robbero "8 bar hiphop beat"
Die Musik ist lizenziert unter CC 3.0 BY NC
HTML (1)

▲ Watch in HD!

InhaltTon und Musik
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 und </html> um das Dokument zu beenden. Die "tags" HTML Dokumente haben eine immer gleiche Struktur mit einem <head> und <body>.Peter Hermann (Sprecher) "Pilay"
Thomas Erszeny "TeDDiLove" Erszeny

grapes, J Lang, Morusque "I dunno"
Die Musik ist lizenziert unter CC 3.0 BY
CSS (2)

InhaltTon und Musik
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;}.Peter Hermann (Sprecher) "Pilay"
Thomas Erszeny "TeDDiLove" Erszeny

grapes - another one
BOCrew, THEDEEPR, THECORNER "STAY IN THE GREAT"
BOCrew, THEDEEPR, THECORNER & FORENSIC "SUNBIRDS"
cdk ft. Jeris "Start To Grow" (cdk Mix)
Die Musik ist lizenziert unter CC 3.0 BY
Bild (3)

InhaltTon und Musik
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.Lilly Becker (Sprecherin)
Thomas Erszeny (Aufnahmeleitung), TeDDiLove

BOCrew "THE INFINITY 2012"
Die Musik ist lizenziert unter CC 3.0 BY
Bilder (4)

InhaltTon und Musik
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.
Die Tonspur ist uns irgendwie verlustig gegangen.
Finden wir sicherlich wieder ...
Artikel einfügen (5)

InhaltTon und Musik
Auf der Webseite sollen weitere Artikel eingefügt werden. Dies kann simpel und konsequent durch duplizieren der bereits vorhandenen Inhalte erreicht werden.Peter Hermann (Sprecher) "Pilay"
Thomas Erszeny "TeDDiLove" Erszeny

Soda "eighteen pieces"
Die Musik ist lizenziert unter CC 3.0 BY
Semantik (6)

InhaltTon und Musik
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.
Peter Hermann (Sprecher) "Pilay"
Thomas Erszeny "TeDDiLove" Erszeny

Robbero "Mr. Wozzie""
Die Musik ist lizenziert unter CC 3.0 BY
background-image (7)

InhaltTon und Musik
Ein Hintergrundbild wird im CSS eingefügt. Hintergrundbilder sind eine CSS Eigenschaft die allen Elementen zugeordnet werden kann.Peter Hermann (Sprecher) "Pilay"
Thomas Erszeny "TeDDiLove" Erszeny

Robbero "The Session"
Die Musik ist lizenziert unter CC 3.0 BY NC
:pseudo-classes (8)

InhaltTon und Musik
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. Lilly Becker (Sprecherin)
Thomas Erszeny (Aufnahmeleitung), TeDDiLove

Tyler Twombly "Birds"
Die Musik ist lizenziert unter CC BY 4.0
Pfade (9)

InhaltTon und Musik
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.Lilly Becker (Sprecherin)
Thomas Erszeny (Aufnahmeleitung), TeDDiLove

Robbero "Healing Me"
Die Musik ist lizenziert unter CC BY 4.0
Galerie (10)

InhaltTon und Musik
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.Peter Hermann (Sprecher) "Pilay"
Thomas Erszeny "TeDDiLove" Erszeny

Robbero "The Session"
Die Musik ist lizenziert unter CC 3.0 BY NC
Float (11)

InhaltTon und Musik
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.Peter Hermann (Sprecher) "Pilay"
Thomas Erszeny "TeDDiLove" Erszeny

Robbero "Sunday Afternoon"
Die Musik ist lizenziert unter CC 3.0 BY NC
Float im Winter (12)

InhaltTon und Musik
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.Peter Hermann (Sprecher) "Pilay"
Thomas Erszeny "TeDDiLove" Erszeny

Robbero "Sunday Afternoon"
Die Musik ist lizenziert unter CC 3.0 BY NC
Clear den Float (13)

InhaltTon und Musik
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.Peter Hermann (Sprecher) "Pilay"
Thomas Erszeny "TeDDiLove" Erszeny

Robbero "Sunday Afternoon"
Die Musik ist lizenziert unter CC 3.0 BY NC
ID selektion (14)

InhaltTon und Musik
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.Peter Hermann (Sprecher) "Pilay"
Thomas Erszeny "TeDDiLove" Erszeny

Robbero "Invasion"
Die Musik ist lizenziert unter CC 3.0 BY NC
Navigation (15)

InhaltTon und Musik
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.Peter Hermann (Sprecher) "Pilay"
Thomas Erszeny "TeDDiLove" Erszeny

Robbero "Wanderlied"
Die Musik ist lizenziert unter CC 3.0 BY NC
Animierte Artikel (16)

InhaltTon und Musik
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.

Weitere Informationen und Beispiele rund um #ID und .Classes gibt es auf der kostenlosen CODE Plattform:
http://code.arnoldbodeschule.de/geschickt-mit-css-selektieren/

Thomas Erszeny (Leitung der Tonaufnahme)
Peter Hermann (Sprecher)

Musik
Robbero "Audiotechnica"
http://ccmixter.org/files/Robbero/52214
Creative Commons Lizenz 3.0 BY NC

Hintergrundbild
Patutin Sergey "Eight Horns"
http://subtlepatterns.com/eight-horns/
Creative Commons Lizenz 3.0 BY

Sonstige Bilder Public Domain.
Weitere Informationen:
http://code.arnoldbodeschule.de/einstieg-in-html-und-css/
Peter Hermann (Sprecher) "Pilay"
Thomas Erszeny "TeDDiLove" Erszeny

Robbero "Audiotechnica"
Die Musik ist lizenziert unter CC 3.0 BY NC
Schriften mit Google Webfonts (17)

InhaltTon und Musik
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.Peter Hermann (Sprecher) "Pilay"
Thomas Erszeny "TeDDiLove" Erszeny

Robbero "Let it go Girl""
Die Musik ist lizenziert unter CC 3.0 BY NC


Download

CODEBeschreibung
NiveauBeginner


PackAlle Bilder für die "Hallo Welt" Webseite als Zip-Datei.

Hallo-Welt-Rohdaten (2.1 MiB)



Verwendung und Weitergabe erlaubt unter Angabe des Namens und der Lizenz
CC3: Quelle Subtlepatterns Patutin Sergey

Sonstige Bilder Keine Bildnachweise nötig.
Lizenz Pixabay CC0 PD: 846094, 36822, 779385
918532, 336672, 810433, 204921, 284211, 692335
Lernkarten

Das CODE "Hallo Welt" Lernkarten-Basispaket enthält die 100 wichtigsten HTML und HTML-Attribute sowie CSS Selektoren, CSS-Eigenschaften und Werte. Die Inhalte entsprechen dem Skript, das Format der Lernkarten bietet jedoch andere Möglichkeiten. Die Karten sind zu jeweils 10 Nutzen auf 1 DINA4 Seite angelegt und lassen sich somit gut beidseitig ausdrucken.

CODE-Lernkarten-Basis (7.1 MiB)

Skript

Im kostenlosen CODE Skript sind umfangreiche ergänzende Informationen und die gesamten Tabellen der Übersichten zu den HTML Elementen und CSS Eigenschaften, Scripts, Layout und andere Aspekte des Webdesigns wie z.B. praktische Beispiele für Javascript, PHP und MySQL.

CODE-Skript 1617 (7.7 MiB)

Empfohlene Software

SoftwareBedeutung
Sublime Text 3Kostenloser Editor für alle Betriebssysteme mit vielen praktischen Funktionen. Es gibt noch eine ganze Reihe anderer Editoren die auch zu Empfehlen sind.

Kommentare One thought on “Hallo Welt

  1. Sandra M.

    Total toll und simpel beschrieben, sodass auch blutige Anfänger es nachvollziehen können.
    Mir hilft das Video für meine Zwischenprüfung (Ausbildung zur Mediengestalterin Digital) sehr. Dankeschön und weiter so!

Schreibe einen Kommentar

Deine E-Mail Adresse wird später nicht angezeigt.

clear formSubmit