Moderne Webseiten mit HTML5 und CSS (online)
Webdesign umsetzen mit HTML und CSS
Struktur und Design von Websites werden mit HTML und CSS umgesetzt. Das ist bei jeder Website so, egal welches Content Management System (CMS) verwendet wird. Content Management Systeme wie beispielsweise WordPress oder Typo3 ermöglichen das Warten von Websites ohne Programmierkenntnisse. Dabei ist das Design durch HTML und CSS festgelegt und nur sehr begrenzt durch Redakteure veränderbar.
Mit HTML und CSS können Sie einfache Web-Visitenkarten ohne CMS erstellen oder das Design von Websites anpassen, die mit Content Management Systemen erstellt wurden. Realisieren Sie Ihre eigenen Ideen mit HTML und CSS, auch abseits von Designvorlagen.
Dabei ist eine gute HTML-Struktur das Fundament für die Sichtbarkeit in google & co, sowie für die flexible Darstellung der Website vom Smartphone bis zum großen Desktop.
Warum HTML und CSS Kenntnisse für Sie wertvoll sind
Im Kurs erlernen Sie die Sprachen HTML und CSS am Beispiel. Sie erstellen eine statische Website. Schritt für Schritt erweitern Sie Ihre Erfahrungen und setzen eine attraktive Website mit multimedialen Inhalten um.
Dabei lernen Sie nebenbei, wie Internetseiten funktionieren und können einschätzen, welche Anforderungen Ihr eigenes Vorhaben stellt. Von Anfang an beziehen Sie die Auffindbarkeit in Suchmaschinen in Ihre Überlegungen ein.
Sie beurteilen die Qualität von Internetseiten und wissen, wie eine gute Struktur aussieht: Für Ihre Besucher, für Suchmaschinen und für Ihren Erfolg als Website-Betreiber.
Ihre Kenntnisse lassen sich auf Websites mit einem CMS wie WordPress, Typo3 oder ähnlich übertragen, wenn Sie sich zusätzlich damit vertraut machen, wie HTML und CSS dort eingebunden sind.
Dieser Kurs ist für Sie geeignet wenn Sie
- die Sprachen HTML und CSS lernen möchten ✓
- wissen wollen, wie Websites funktionieren ✓
- in das Thema Webdesign oder Webentwicklung einsteigen möchten ✓
- vorhandene Designs anpassen möchten, beispielsweise in einem WordPress Theme ✓
- komplette, individuelle Designs für eine Website selbst erstellen wollen ✓
- mitreden möchten und mit Programmierern und Agenturen auf Augenhöhe verhandeln wollen ✓
- in der Öffentlichkeitsarbeit, im Marketing, der Online Redaktion, als Grafik-Designer oder beim Aufbau Ihrer privaten Website mehr Einfluss auf Gestaltung und Struktur nehmen wollen ✓
- einfach nur neugierig sind ✓
So kommen wir ins Gespräch
- In Videokonferenzen stelle ich zunächst die Themen vor, ähnlich wie im Präsenzkurs. Dabei sehen Sie mich und alles, was auf meinem Bildschirm geschieht.
- Alle Schritte werden erläutert.
- Während der Konferenz können Sie im Chat Fragen stellen. Von Zeit zu Zeit unterbreche ich und gehe auf Ihre Fragen ein. So können Sie auch live mit mir diskutieren.
- Im Anschluss wenden Sie Ihr Wissen auf eine ähnliche Aufgabe an. Auch dabei stehe ich Ihnen für Fragen zur Verfügung.
- Während der Arbeitsphasen können Sie mich jederzeit telefonisch oder über die Konferenz kontaktieren. Gern helfe ich Ihnen, wenn der Browser nicht tut was er soll.
Zum Kurs erhalten Sie ein ausführliches Skript, das alle Workshops enthält.
Voraussetzungen
- Vertrauter Umgang mit Internet und Betriebssystem
- Dateiablage mit Windows-Explorer oder Finder
- Entpacken von Zip-Laufwerken
- Selbständige Installation von Programmen. Am besten, Sie installieren alles, was Sie brauchen schon vorher (siehe Programme und Technik für den Kurs)
- Textverarbeitung
- Sie brauchen keine Programmierkenntnisse
Programme und Technik für den Kurs
Für den Kurs brauchen Sie nur wenige Programme und etwas Technik für die Videokonferenzen:
- Einen kostenlosen Editor zum Schreiben von HTML und CSS: Visual Studio Code. Er ist für Windows, Mac und Linux erhältlich.
- Browser Mozilla Firefox und Chrome in neuerer Version
- PDF-Reader (ist in modernen Browsern bereits enthalten)
- Empfohlen: MS Office (Word, Excel und Powerpoint)
- Um bei den Videokonferenzen mitdiskutieren zu können, empfehlen wir Ihnen die Verwendung eines Mikrofons. Wenn Sie gesehen werden möchten, auch eine Webcam.
Bildungszeit
Dieser Kurs gilt gemäß § 10 Abs. 5 des Berliner Bildungszeitgesetzes - BiZeitG (GVBl. vom 05.07.2021 S. 849) als Bildungsveranstaltung im Sinne der beruflichen Weiterbildung anerkannt.
Ablauf
Der Kurs findet auf der VHS-Cloud statt: https://www.vhs.cloud/. Ihre Zugangsdaten zum Kurs erhalten Sie rechtzeitig vor Kursbeginn:
- Zugang zum Kurs: Kurscode und Anleitung, wie Sie Ihren Kurs finden
- Zugang zur Konferenz: Wo Sie die Konferenz finden und ab wann Sie zugreifen können
Bitte geben Sie bei der Anmeldung eine E-Mail Adresse an.
Montag
Ab 9:30 Getting Started: Check-In, Technikcheck: Mikrofon, ggf. Kamera, Kurzeinführung in die VHS-Cloud.
10:00 – 11:30 Videokonferenz
- Vorstellungsrunde: Vorkenntnisse, Wünsche, Erwartungen
- Einsatzbereiche von HTML und CSS
- Aufgabenstellung: Editor installieren, Daten für den Kurs herunterladen.
11:30 – 11:45: Pause
11:45 – 12:45: Eigenständiges Arbeiten
- Einrichten der Entwicklungsumgebung
- Zip-Laufwerk mit den Kursdateien herunterladen und entpacken
- Projekt nach Anleitung in den Editor „Brackets“ integrieren.
- Das Grundgerüst einer HTML-Datei: Erstellen und Testen einer ersten Website
- Zusatzwissen: Wie eine Website funktioniert, statische Website, dynamische Website, CMS.
Während der Arbeitsphase können Sie mich telefonisch oder über die Konferenz erreichen.
12:45 – 13:30: Pause
13:30 – 15:00: Videokonferenz
- Alles o.k.? Probleme besprechen und lösen
- Textstrukturierung: Absätze, Zeilenumbruch, Überschriften
- HTML-Elemente und Attribute
- HTML-Kommentare
- HTML validieren mit einem HTML-Validator
- Gute Struktur für google & co
15:00 – 15:15: Pause
15:15 – 16:30: Selbstständiges Arbeiten
- HTML Grundgerüst vervollständigen
- Text mit Überschriften und Absätzen selber setzen
„Fehlerhilfe“ per Telefon und Konferenz
Dienstag
9:30 – 11:00 Videokonferenz
- Lösung der Aufgabe, Fragen
- Einführung in CSS
- Einbinden von CSS-Stylesheets in HTML
- Zugriff auf HTML Elemente mit dem Typselektor, Formatieren auf Tag-Ebene
- Gestaltung von Texten: Schriftart, Schriftfarbe, Hintergrundfarbe, Schriftgröße
- Textausrichtung
- Aufgabenstellung
11:00 – 11:15 Pause
11:15 – 12:45: CSS einsetzen, Selbstlernphase
- CSS anwenden: Textgestaltung
- Schriftart
- Schriftgröße
- Schriftfarbe
- Hintergrundfarbe
- Textausrichtung
12:45 – 13:30 Pause
13:30 – 15:00 Videokonferenz
- Lösung der Aufgabe, Fragen
- Sonderfälle behandeln: Klassen- und ID-Selektor
- Bilder in Websites einbinden: Welche Dateiformate sind möglich?
- Der img-Befehl, Relative Pfadangaben, Projektstruktur
- Weitere Bildattribute, beispielsweise für Alternativtext
- Bilder in google
- Aufgabenstellung
15:00 – 15:15 Pause
15:15 – 16:30 Selbstlernphase
- Bilder in ein HTML-Dokument einbinden
- Bilder in den Text einbetten: Clear und Float
Kommunikation per Telefon und Konferenz: Fehlerhilfe
Mittwoch
9:30 – 11:00 Konferenz
- Fragen zur Aufgabe?
- Abstände erfahren: Was überlappt sich wo, wie funktionieren Abstände?
- Demo „Links auf Internetseiten“: Wozu Verlinkungen eingesetzt werden.
- HTML Befehle für Verlinkungen
- Bildlinks: Bilder als Schaltflächen
- Einführung in die Aufgabenstellung, Vorstellen der Ergebnisse der nächsten Lerneinheit
11:00 – 11:15 Pause
11:15 – 12:45 Abstände einsetzen
- Abstände im Projekt umsetzen
- Verlinkungen nachbauen
- Übung: Bildergalerie erstellen
- Optional: JavaScript für die Animation der Großansichten einbinden
12:45 – 13:30 Pause
13:30 – 15:00 Konferenz
- Alles o.k.? Besprechung der Ergebnisse, ggf. Debugging
- Linkzustände
- Sprunglinks (optional)
- Einführung in die Aufgabenstellung
15:00 – 15:15 Pause
15:15 – 16:30 Selbstlernphase „Links“
- Aufgabe: Verlinkungen umsetzen
- Gestaltung des Links mit CSS
- Optional: Sprunglinks umsetzen
Donnerstag
9:30 – 11:00 Videokonferenz
- Fragen zu den Arbeitsergebnissen?
- Demo: Formulare auf Internetseiten am Beispiel eines Kontaktformulars
- Rechtliches zu Formularen
- HTML für Formulare
- Absenden des Formulars über einen Internetdienst
- Aufgabenstellung
11:00 – 11:15 Pause
11:15 – 12:45 Selbstlernphase Formulare
- Erstellen des HTML-Formulars und validieren
- Versenden über einen Internetdienst
- Gestalten des Formulars mit CSS
Bei Bedarf Fehlerhilfe: Kommunikation per Telefon und Konferenz
12:45 – 13:30 Pause
13:30 – 15:00 Videokonferenz
- Besprechen der Arbeitsergebnisse, Fragen?
- Hintergründe mit CSS
- Hintergrundfarbe, Hintergrundbild, Positionieren des Bildes
- Verlauf
- Aufgabenstellung
- Demo: Vorstellen der HTML-Grundstruktur für das Abschluss-Projekt
- Unbekanntes HTML erläutern
- CSS in eine eigene Datei auslagern (Externe CSS), mehrere Einzelseiten über eine CSS-Datei gestalten
- „HTML5 Semantics“ - Layoutcontainer mit Bedeutung zur Unterstützung der Maschinenlesbarkeit (google)
- Das normale Verhalten von Layoutcontainern im CSS-Boxmodell
- Mobile-First-Konzept: das kleinste Gerät zuerst!
15:00 – 15:15 Pause
15:15 – 16:30 Selbstlernphase
- Hintergrundbild ins Formular einbinden
- Thema „Layout“ vorbereiten
- HTML-Grundstruktur für das Projekt. Unbekannte Befehle?
- Auslagern von CSS verstanden?
- Usortierte Liste für die Navigation
- Fragen dazu für Freitag formulieren
Freitag
Videokonferenz 9:30 – 11:00
- Auflösung der Übung, Fragen?
- Einführung in das CSS Box-Modell
- CSS-Befehle zur Vereinfachung der Layoutberechnung
- Das CSS-Box-Modell: Layoutberechnung, box-sizing, Verhalten bei übergroßem Inhalt, Layout zentrieren.
- Aufgabenstellung: Das Layout und die Navigationsleiste erstellen
11:00 – 11:15 Pause
11:15 – 12:45 Selbstlernphase „Layout“
- Wo das Verhalten des Box-Modells nachgelesen werden kann
- Mit Hilfe von CSS-Bausteinen das Layout erstellen
- Navigationsleiste erstellen
12:45 – 13:30 Pause
13:30 – 15:00 Videokonferenz
- Alles o.k.? Fragen?
- Aus dem „Template“ ein Webprojekt entwickeln: Zwei Einzelseiten erstellen und miteinander verlinken
15:00 – 15:15 Pause
15:15 – 16:00 Selbstlernphase
- Wenigstens zwei Seiten erstellen und miteinander verlinken. Wer mag auch mehr
- Zusatzwissen: FTP-Programm Provider und ihre Leistungen
16:00 – 16:30 Abschlusskonferenz
- Fragen, Feedback
- Verabschiedung
Bild von Lawrence Monk auf Pixabay