Medien

WEBDESIGN - HTML/CSS

Du lernst spezifische Details des Aufbaus und der Funktionen des Internets. Fachspezifisches Vokabular zu erlernen ist wichtig für die Erstellung einer Website. Alle Programmiersprachen und Programmiertools verwenden diese Fachvokabel. Du gewinnst einen Überblick über die Techniken des projektorientierten Webdesigns.

HTML und CSS sind die Basis einer modernen Webseite. Die Basissprache, das HTML dient dazu, die Inhalte zu strukturieren und ihnen eine Bedeutung zuzuweisen. Mit CSS wird festgelegt, wie die einzelnen Strukturelemente aussehen sollen.

Mit Hilfe dieser beiden Sprachen kannst du Webseiten erstellen, die den Webstandards entsprechen. Wir erarbeiten gemeinsam, welche Vorteile es bringt, zum Beispiel für Suchmaschinen, wenn du die Webstandards berücksichtigst.

Im Laufe des Kurses wird anhand von Übungen das Wissen praktisch erprobt, am Ende des Kurses findet eine Präsentation der in Selbstarbeit erstellten Projekte statt.

Inhalte im Überblick - Beispiel für Kursdauer 5 Wochen

HTML5 kennenlernen

• Der Einstieg: eine Website planen. Von der Idee zum Konzept. Basiswissen HTML und CSS
• Die erste Website mit HTML erstellen: Allgemeines: Webseiten erstellen, speichern und testen. Erste Schritte mit HTML, Quellcodes und Strukturierung, Elemente verschachteln
• Erste Schritte mit CSS: Stylesheets erstellen, Farbwerte definieren, Maßeinheiten in CSS festlegen
• Organisation und Struktur: Webseiten in Ordnern organisieren, Pfade definieren, Elemente mit unterschiedlicher Darstellung und richtiges Verschachteln, Semantische Textauszeichnungen, Zeichencodierung und Kommentare
• Grafiken und Multimedia einbinden. Mit Grafiken arbeiten, Videos einbetten und externe Inhalte nutzen
• Hyperlinks erstellen
• Mit Listen arbeiten: unsortierte und sortierte (nummerierte) Listen, Beschreibungslisten, Listen verschachteln und kombinieren
• Tabellen erstellen und in responsiven Webseiten verwenden
• Formulare erstellen: Eingabefelder, Auswahllisten, Kontrollkästchen und Optionsfelder, Schaltflächen mit Grafiken und JavaScript
• Webstandards und Codeoptimierung: Standardisiertes HTML schreiben, Code validieren und Webseiten in verschiedenen Browsern testen. Effizient arbeiten, Vorhandenes nutzen.
• Den Webauftritt veröffentlichen: Suchmaschinenoptimierung (Search Engine Optimization – SEO), Domainnamen und Speicherplatz auf einem Webserver reservieren, Seite online stellen
• QuickStart CSS: Text mit CSS stylen, Schriftfamilien definieren, Schlüsselwörter verwenden, Flexbox – flexible, responsive Layouts ohne @media-Regel, Vor- und Nachteile der beiden Layout-Methoden, eine responsive Navigation mit Flexbox umsetzen, benutzerfreundliche Menüs erstellen

CSS — die Grundlagen: Formatvorlagen und Vorteile von CSS, Stylesheets einbinden, alternative Stylesheets erstellen

• CSS-Syntax und Selektoren: Aufbau von Stylesheets. Wie Browser Ihre Webseite untergliedern und Vererbung. Die verschiedenen Selektoren kennenlernen und anwenden.
• Schriften und ihre Eigenschaften: Schriftfamilie, Schriftschnitte, Maßeinheiten und Schriftgröße. Eigenschaften vererben oder zurücksetzen.
• Texte gestalten: CSS-Eigenschaften zur Textgestaltung, Ausrichtung, Groß- und Kleinschreibung, Text hervorheben, Textabstand, Text einrücken, Zeilenumbrüche
• Mit Farben arbeiten: Farbwerte, Textfarben ändern, Hintergrundfarben
• Hintergrundbilder nutzen: Hintergrund wiederholen, positionieren oder festsetzen, mehrfache Hintergründe verwenden, Größe der Hintergrundgrafik einstellen. Bereich für Hintergrund-Position und Hintergrund-Anzeige festlegen, Angabe des Hintergrunds in Kurzform.
• Listen gestalten: Listentypen, Einrückungen, Listengrafik ändern, Kurzform der Aufzählung
• Abstände und Rahmen: Einführung in das Box-Modell, Rahmen, Separate Wertangaben, Kurzform von Rahmen, Konturen mit outline, abgerundete Ecken, Rahmen mit Bildern und Browser-Präfixe, Innenabstand mit padding, Probleme mit Innenabständen und Rahmen bewältigen, Außenabstand mit margin.
• Tabellen: Die Eigenschaft display und Einführung in CSS-Tabellen, Darstellung von Elementen ändern, Tabellen beschriften, Rahmen darstellen, Rahmenabstand, Leere Tabellenzellen, Tabellenlayout, Zellen verbinden.
• Positionieren mit CSS: Größe eines Elements angeben, Überlauf festlegen, Text-Überlauf beeinflussen, Element umfließen, Unsichtbare Elemente, Ebenen in HTML-Dokumenten meistern.
• Inhalte generieren: Zähler, Variablen und Berechnungen, Einführung in CSS-generierte Inhalte, Anführungszeichen setzen, Inhalte einfügen, Zähler einbinden, Rechnen in CSS, Custom Properties (CSS Variablen), Mauszeiger anpassen.
• Layout mit CSS erstellen: Zweispalter mit Kopfbereich Flexbox – flexible, responsive Layouts ohne @media-Regel. Eine responsive Navigation mit Flexbox umsetzen. Benutzerfreundliche Menüs erstellen, CSS-Grid. Unterschiede der Layout-Methoden.
• Formulare gestalten: Einführung in die Gestaltung von Formularen, Einzeilige und mehrzeilige Textfelder formatieren, Auswahlboxen formatieren, Schaltflächen gestalten.

Abschlusspräsentation