Mit HTML und CSS Webdesign umsetzen
Was HTML und CSS auf Websites bewirken
Die Sprachen HTML und CSS setzen Struktur und Design moderner Websites um. Dabei spielt es keine Rolle, ob und welches Content Management System eingesetzt wird. Content Management Systeme wie Typo3, WordPress, Drupal oder Joomla ermöglichen das Pflegen von Websites ohne Programmierkenntnisse. Ob mit CMS oder ohne: mit HTML werden die Inhalte strukturiert und mit CSS gestaltet.
Für Benutzerfreundlichkeit und Maschinenlesbarkeit ist eine gute Struktur sehr wichtig. Sie stellt auch das Fundament für Ihre Suchmaschinenoptimierung dar.
Zielgruppe
Der Kurs richtet sich an alle, die Onlinepublikationen gestalten wollen, unabhängig von Designvorlagen, bzw. komplette Designs umsetzen wollen. In der Öffentlichkeitsarbeit, im Marketing, der Online Redaktion, als Grafik-Designer oder beim Aufbau Ihrer privaten Website.
Worum es geht
Sie erhalten eine Einführung in die Webentwicklung und erlernen die beiden Sprachen HTML und CSS. Kompakt und praxisnah. Die HTML und CSS-Codes schreiben Sie mit einem sehr einfach zu bedienenden Texteditor, den Sie kostenlos im Internet herunterladen können.
Nebenbei eignen Sie sich ein Grundverständnis dafür an, wie Websites funktionieren und lernen die Anforderungen Ihres eigenen Vorhabens besser einzuschätzen.
Im Laufe des Kurses wird eine statische Website erstellt. Die Kenntnisse in HTML und CSS lassen sich auf dynamische Websites beispielsweise mit einem CMS übertragen.
Voraussetzungen: Sicherer Umgang mit Internet und Betriebssystem, d. h. Dateiablage, Windows-Explorer oder vergleichbar, Erfahrung mit Textverarbeitung.
Teilnahmebedingungen für Online-Kurse
Kurskonzept Online Kurs
Konzept und Empfehlung zur Zeitplanung
Einführung
- Funktionsweise einer Website
- Wie der Browser HTML und CSS interpretiert
- Abgrenzung Statische und dynamische Website
- Wozu JavaScript und PHP auf Websites eingesetzt werden – Überblick
- HTML für den Inhalt, CSS für die Gestaltung: Trennung von Inhalt und Design
Der Grundaufbau einer HTML Seite, Einführung in HTML
- Das HTML-Grundgerüst
- Inhalt am Beispiel der Textstrukturierung: Absätze, Überschriften, Zeilenumbruch.
- Der Unterschied zwischen logischen und physischen Textauszeichnungen: Semantik hat Vorfahrt
- Texte für Besucher und Suchmaschinen gut strukturieren
Einführung in CSS, den Inhalt gestalten
- CSS-Stylesheets in HTML integrieren
- Auf HTML Elemente zugreifen, Einführung Selektoren am Beispiel des Typselektors
- Texte gestalten mit CSS: Schriftart und Schriftgröße, Skalierbarkeit. Textausrichtung, Schriftfarbe und Hintergrundfarbe zuweisen.
- Sonderfälle behandeln mit dem Klassenselektor
Bilder in die Website einbinden
- Referenzieren in HTML: relative und absolute Pfadangaben, Projektstruktur
- Wichtige Attribute des Bildbefehls, Alternativtext und Bildpfad
Bilder vom Text umfließen lassen – den Textfluss mit CSS steuern
- Mit float die Bilder vom Text umfließen lassen, mit clear den Textumfluss abschalten
- Andere Clearing Methoden, Vor- und Nachteile
- Innenabstände und Außenabstände
Verlinkungen in HTML
- Der Einsatz von Links auf Internetseiten, Struktur des Link-Befehls in HTML
- Ausprobieren verschiedener Linkfunktionen: Link auf eine Seite des eigenen Projekts oder eine andere Seite, Öffnen des Externen Links in einem neuen Tab, das E-Mail-Programms des Benutzers ansteuern, Telefonlink für Mobilgeräte bereitstellen
- Verlinkungen über Bildlinks, Erstellen einer Bildergalerie
- Die Usability der Bildergalerie durch ein (vorgefertigtes) JavaScript Programm verbessern
Links mit CSS gestalten, Pseudoklassen
- frisch, besucht, berührt, heruntergedrückt: Pseudoklassen für Linkzustände
- Linkzustände gestalten
Tabellen
- Tabellen zur Darstellung „echter“ tabellarischer Daten wie Fahrpläne, Preislisten, Warenkörbe
- Zeilen, Spalten, Zellen: Tabellen aufbauen
- Tabellentools für HTML-Tabellen und Tabellen aus Excel
Gestaltung von Tabellen mit CSS
- Ausrichtung der Inhalte in Tabellenzellen
- Tabellengestaltung mit Rahmen, Hintergrundfarben, Abständen
- Spezielle CSS-Eigenschaften für Tabellen, Steuerung des Tabellenrahmens
Formulare
- Eingabefelder definieren
- Formularversand über einen externen Dienst
- Formular mit CSS gestalten
CSS-Hintergründe
- Hintergrundfarbe
- Hintergrundbilder
Umsetzen eines einspaltigen Layouts, Mobile First!
- CSS-Box-Modell (Verhalten von Layout Containern), Mobile First Konzept
- Umsetzen eines einspaltigen Layouts
- Navigationsleiste erstellen
- Einbau der Navigationsleiste in das CSS-Layout
- Weitere Seiten im gleichen Layout erstellen (Kontakt etc.) und verlinken
- Abschlussprojekt zur Korrektur einreichen
Die Website veröffentlichen
- Überblick über Provider. Welche Leistung brauchen Sie?
- Website auf einen Server laden mit dem FTP Programm „FileZilla“