HTML und CSS Grundkurse

Die Oberflächen moderner Internetseiten werden mit HTML5 und CSS (Cascading Style Sheets) erstellt. HTML integriert die Inhalte in die Seiten, CSS übernimmt die Gestaltung. Die Kurse bieten Ihnen eine kompakte, praxisbezogene Einführung in die modernsten Standards der Webseitenerstellung.

Auch wenn Sie Ihre Webpräsenz mit einem Content-Management-System wie Typo3, Joomla, Drupal oder Wordpress realisieren möchten, liefern Ihnen die Kurse die zur Umsetzung notwendigen HTML und CSS Kenntnisse. HTML und CSS schreiben Sie mit einem einfachen Texteditor (Freeware).

 

Webseitengestaltung mit HTML5 und CSS – Grundlagen – Intensivkurs 40h

Tag 1

Einführung

  • Einführung, wie eine Website funktioniert
  • Das Client-Server Prinzip und die Interpretation von XHTML und CSS durch den Browser, statische Website, dynamische Website.
  • Überblick: Wozu andere Techniken zur Erstellung von Internetseiten wie JavaScript und PHP eingesetzt werden
  • Trennung von Inhalt und Design im modernen Webdesign, Beispiele

Der Grundaufbau einer HTML Seite

  • Textformatierung: Absätze, Zeilenumbruch, Überschriften, logische Textauszeichnungen, physische Textauszeichnungen
  • Übung: Text mit Überschriften und Absätzen selber setzen

Einführung in die „Designsprache“ CSS

  • Einbinden von CSS Stylesheets in HTML
  • Zugriff auf HTML Elemente mit dem Elementselektor, Formatieren auf Tag-Ebene
  • Textgestaltung mit CSS Stylesheets: Schriftart, Schriftgröße, Schriftfarbe, Hintergrundfarbe, Textausrichtung
  • Übung: Den Text selbst gestalten

Tag 2

CSS

  • Übung: Absätze linksbündig, rechtsbündig setzen
  • Sonderfälle und Formatieren auf Zeichenebene: Klassenselektor und span

Bildmaterial in Internetseiten einbinden

  • relative Pfadangaben, Projektstruktur
  • Die Attribute width, height und alt anwenden

Bilder mit CSS in den Text einbetten

  • Bilder im Textfluss, float und clear, Textumfluss erzeugen und abschalten
  • Abstände des Textes vom Bild mit padding und margin

Tag 3

Links

  • Einführung Links auf Internetseiten
  • Ausprobieren verschiedener Linkfunktionen: Verweis auf eine andere Seite, eine andere Datei, Aufruf des E-Mail Programmes des Benutzers,
  • Bildlinks, Übung Bildergalerie

Linkzustände mit CSS gestalten

  • Beispiele zu Linkzuständen
  • Übung Linkzustände

Tabellen

  • Einsatz von Tabellen zur Darstellung tabellarischer Daten wie Preisliste, Fahrplan etc.
  • Aufbau von Tabellen mit Zeilen und Spalten
  • Verbinden von Zellen mit colspan und rowspan

Tag 4

Gestaltung von Tabellen mit CSS

  • Ausrichtung von Inhalten in Tabellenzellen mit text-align, vertical-align
  • Gestaltung von Tabellen mit Rahmen, Hintergrundfarben
  • CSS Eigenschaften für Tabellen, wie z. B. border-collapse

Formulare

  • Eigenschaften von Formularen und Formularelementen auf semantischer Ebene (action, size, maxlength, name, value etc.)
  • Versenden von Formularen
  • Dienste zur Übernahme des serverseitigen Versandvorgangs im Internet, beim Provider.
  • Formulargestaltung mit CSS
  • Übung: Gestalten des Formulars mit Schriften, Linien und Hintergrundfaben

CSS-Hintergründe

  • Einführung Hintergrundbilder
  • Anwendung Hintergrundbilder

Tag 5

Modernes Layout mit CSS Stylesheets

  • Box Modell, Trennung von Form und Inhalt.
  • Absolute und relative Positionierungen. Beispiel: Ein einfaches Layout erstellen
  • Beispiel einer Listennavigation, die auf Berührung reagiert
  • Einbau dieser CSS Navigation in ein einfaches CSS Layout
  • Erstellen weiterer Seiten im gleichen Layout (Kontakt etc.). Anpassen der Navigation

Die Website veröffentlichen

  • Provider und ihre Dienstleisungen
  • Ein FTP Programm zum Laden der Website auf einen Server – FileZilla
 

Webseitengestaltung mit HTML5.0 und CSS – Teil 1 (Wochenendkurs 16 h)

Tag 1

Einführung

  • Einführung, wie eine Website funktioniert
  • Das Client-Server Prinzip und die Interpretation von XHTML und CSS durch den Browser, statische Website, dynamische Website
  • Überblick: Wozu andere Techniken zur Erstellung von Internetseiten wie JavaScript und PHP eingesetzt werden
  • Trennung von Inhalt und Design im modernen Webdesign, Beispiele

Der Grundaufbau einer HTML Seite

  • Textformatierung: Absätze, Zeilenumbruch, Überschriften, logische Textauszeichnungen, physische Textauszeichnungen
  • Übung: Text mit Überschriften und Absätzen selber setzen

Einführung in die „Designsprache“ CSS

  • Einbinden von CSS Stylesheets in HTML
  • Zugriff auf HTML Elemente mit dem Elementselektor, Formatieren auf Tag-Ebene
  • Textgestaltung mit CSS Stylesheets: Schriftart, Schriftgröße, Schriftfarbe, Hintergrundfarbe, Textausrichtung
  • Übung: Den Text selbst gestalten

Tag 2

Behandlung von Sonderfällen in CSS

  • Formatieren auf Zeichenebene: Klassenselektor
  • Das eigenschaftslose HTML-Element span einsetzen

Bildmaterial in Internetseiten einbinden

  • relative Pfadangaben, Projektstruktur
  • Die Attribute width, height und alt anwenden

Bilder mit CSS in den Text einbetten

  • Bilder im Textfluss, float und clear, Textumfluss erzeugen und abschalten
  • Abstände des Textes vom Bild mit padding und margin

Links

  • Einführung Links auf Internetseiten
  • Verschiedene Linkfunktionen anwenden: Verweis auf eine andere Seite, eine andere Datei, Aufruf des E-Mail Programmes des Benutzers
 

Webseitengestaltung mit HTML5.0 und CSS – Teil 2 (Wochenendkurs 16 h)

Tag 1

Tabellen

  • Einsatz von Tabellen zur Darstellung tabellarischer Daten
  • Aufbau von Tabellen mit Zeilen und Spalten
  • Verbinden von Zellen mit colspan und rowspan

Tabellengestaltung  mit CSS

  • Ausrichtung von Inhalten in Tabellenzellen mit text-align, vertical-align
  • Gestaltung von Tabellen mit Rahmen, Hintergrundfarben

Formulare

  • Einführung Formulare
  • Eigenschaften von Formularen und Formularelementen auf semantischer Ebene (action, size, maxlength, name, value etc.)
  • Versenden von Formularen
  • Dienste zur Übernahme des serverseitigen Versandvorgangs im Internet, beim Provider (dw-formmailer.de)

CSS im Formular anwenden

  • Gestalten des Formulars mit Schriften, Linien und Hintergrundfarben

CSS Hintergründe

  • Hintergrundbilder
  • Anwendung von CSS Hingergründen

Tag 2

Modernes Layout mit CSS Stylesheets

  • Box Modell, Trennung von Form und Inhalt – CSS in eine eigene Datei auslagern
  • Absolute und relative Positionierungen. Beispiel: Ein einfaches Layout erstellen.
  • Beispiel einer Listennavigation, die auf Berührung reagiert.
  • Einbau dieser CSS Navigation in ein einfaches CSS Layout
  • Erstellen weiterer Seiten im gleichen Layout (Kontakt etc.). Anpassen der Navigation.

Die Website veröffentlichen

  • Provider und ihre Dienstleisungen
  • Ein FTP Programm zum Laden der Website auf einen Server – FileZilla

Voraussetzungen

Sicherer Umgang mit Internet und Betriebssystem, d. h. Dateiablage, Windows-Explorer oder vergleichbar, Erfahrung mit Textverarbeitung.