HTML und CSS lernen – Weboberflächen gestalten

HTML und CSS gestalten Weboberflächen. Dabei strukturiert HTML die Inhalte. CSS greift auf diese Struktur zu und beschreibt die Gestaltung.

Das ist bei jeder Website so, egal, ob sie ein Content Management System (CMS) hat oder nicht. Deshalb könnten Sie mit HTML und CSS-Kenntnissen das Design einer Website verändern.

Gute Struktur für Menschen und Maschinen

Benutzerfreundlichkeit und Maschinenlesbarkeit hängen ab von einer guten Struktur. Diese stellt auch das Fundament für Ihre Suchmaschinenoptimierung dar. Können Sie die HTML Struktur einer Website beurteilen, so schätzen Sie auch die Qualität vorgefertigter Designs (beispielsweise WordPress Themes) richtig ein.

Worum es geht

Sie lernen HTML und CSS am Beispiel. Dabei schreiben Sie HTML und CSS mit einem einfachen Texteditor. Für den Editor entstehen Ihnen keine Kosten, da es sich um Freeware handelt. Sie lernen die Funktionsweise von Websites kennen und wie Dateien auf einen Server geladen werden. Tipps zur Suchmaschinenoptimierung helfen Ihnen in google & co.

Das Ergebnis ist eine statische Website, im Rahmen einer Web-Visitenkarte. Die HTML und CSS-Kenntnisse, die Sie sich im Kurs aneignen, sind auf Websites mit einem Content Management System oder eine E-Mail-Vorlage übertragbar.

Welche Kurse gibt es?

Zielgruppe

HTML und CSS Kenntnisse sind notwendig, wenn Sie abseits von Designvorlagen gestalten wollen. Die Kurse richten sich an Personen, die Websites erstellen wollen oder auf die Gestaltung von Online-Publikationen einwirken wollen: im CMS, im E-Mail-Marketing, der Öffentlichkeitsarbeit oder der Online-Redaktion.

    Voraussetzungen

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

    Nach oben

    Webseitengestaltung mit HTML5 und CSS – Grundlagen – Intensivkurs 40h

    Foto: HTML CSS Intensivkurs 40h

    Volkshochschulen Treptow-Köpenick, Friedrichshain-Kreuzberg, Steglitz-Zehlendorf, Marzahn-Hellersdorf, Lichtenberg

    Beispiel Website

    Konzept

    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

    • Textstrukturierung: 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

    Tag 2

    CSS

    • Textgestaltung mit CSS-Stylesheets: Schriftart, Schriftgröße, Schriftfarbe, Hintergrundfarbe, Textausrichtung
    • Übung: Den Text selbst gestalten, 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 Hintergrundfarben

    CSS-Hintergründe

    • Einführung Hintergrundbilder
    • Anwendung Hintergrundbilder

    Tag 5

    Ein einspaltiges Layout umsetzen, Mobile First

    • Box Modell, Box-Modell umstellen, Mobile First Konzept
    • Beispiel: Ein einspaltiges Layout umsetzen
    • Beispiel einer Listennavigation, die auf Berührung reagiert
    • Einbau dieser Navigationsleiste in das CSS-Layout
    • Erstellen weiterer Seiten im gleichen Layout (Kontakt etc.). Anpassen der Navigation

     Die Website veröffentlichen

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

    Nach oben

    HTML / CSS lernen: Einstieg in HTML5 und CSS - Onlinekurs mit Videokonferenzen 40h

    Foto: HTML CSS Intensivkurs 40h

    Volkshochschulen Steglitz-Zehlendorf unf Marzahn-Hellersdorf

    Beispiel Website

    Konzept

    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

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

    Tag 2

    Einführung in die „Designsprache“ CSS

    • Einbinden von CSS-Stylesheets in HTML
    • Zugriff auf HTML Elemente mit dem Elementselektor, Formatieren auf Tag-Ebene

    CSS

    • Textgestaltung mit CSS-Stylesheets: Schriftart, Schriftgröße, Schriftfarbe, Hintergrundfarbe, Textausrichtung
    • Übung: Den Text selbst gestalten, 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

    Tag 3

    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
    • Ausprobieren verschiedener Linkfunktionen: Verweis auf eine andere Seite, eine andere Datei, Aufruf des E-Mail-Programmes des Benutzers,
    • Bildlinks, Übung Bildergalerie

    Tag 4

    Linkzustände mit CSS gestalten

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

    Optional: Tabellen

    • Einsatz von Tabellen zur Darstellung tabellarischer Daten
    • Tools zum Erstellen von HTML-Tabellen

    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 Hintergrundfarben

    CSS-Hintergründe

    • Einführung Hintergrundbilder
    • Anwendung Hintergrundbilder

    Tag 5

    Ein einspaltiges Layout umsetzen, Mobile First

    • Box Modell, Box-Modell umstellen, Mobile First Konzept
    • Beispiel: Ein einspaltiges Layout umsetzen
    • Beispiel einer Listennavigation, die auf Berührung reagiert
    • Einbau dieser Navigationsleiste in das CSS-Layout
    • Erstellen weiterer Seiten im gleichen Layout (Kontakt etc.). Anpassen der Navigation

     Die Website veröffentlichen

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

    Nach oben

    Webseitengestaltung mit HTML5 und CSS – Grundlagen – Teil 1 16h

    Foto: HTML CSS Kurs – Notepad mit CSS-Code

    Volkshochschulen Treptow-Köpenick, Steglitz-Zehlendorf

    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, Telefonlink

    Nach oben

    Webseitengestaltung mit HTML5 und CSS – Grundlagen – Teil 2 16h

    Foto: HTML CSS Kurs Teil 2

    Volkshochschulen Treptow-Köpenick, Steglitz-Zehlendorf

    Beispiel Website

    Tag 1

    HTML / CSS Grundstruktur

    • HTML Grundstruktur und HTML-Element
    • HTML und CSS verbinden: verschiedene Möglichkeiten der Integration von CSS in HTML
    • CSS Selektoren

    CSS-Kaskade

    • Spezifität von Selektoren:
    • Hilfsmittel zum Arbeiten mit vorhandenem Code

    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 und Verlauf
    • Anwendung von CSS-Hintergründen

    Semantische Layout-Container in HTML

    • Vorteile semantischer Laout-Container
    • Die Grundstruktur des HTML / CSS Templates

    Tag 2

    Ein einspaltiges Layout umsetzen, Mobile First

    • Box Modell, Box-Modell umstellen, Mobile First Konzept
    • Beispiel: Ein einspaltiges Layout umsetzen
    • Beispiel einer Listennavigation, die auf Berührung reagiert
    • Einbau dieser CSS-Navigation in das CSS-Layout
    • Erstellen weiterer Seiten im gleichen Layout (Kontakt etc.). Anpassen der Navigation

    Die Website veröffentlichen

    • Provider und ihre Dienstleistungen
    • Website veröffentlichen: Dateien mit einem FTP Programm auf einen Server übertragen – FileZilla

    Nach oben

    HTML CSS lernen – Einstieg in HTML5 und CSS - Onlinekurs 24h

    Foto: HTML CSS Kurse, Einstieg 24h

    Volkshochschule Marzahn-Hellersdorf

    Konzept

    Tag 1

    Einführung

    • Einführung, wozu HTML und CSS auf Websites eingesetzt werden
    • Das Client-Server Prinzip und die Interpretation von HTML und CSS durch den Browser,.
    • 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

    Tag 2

    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

    CSS

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

    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 oder der Telefon-App,
    • Bildlinks, Übung Bildergalerie

    Linkzustände mit CSS gestalten

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

    Bonusmaterial auf der Lernplattform

    Zusatzwissen, das über den Grundkurs hinausgeht

    • Formulare
    • Einspaltiges Mobile First Layout
    • Ein FTP Programm zum Laden von Webseiten oder CSS Dateien auf einen Server – FileZilla

    Nach oben