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?
- Webseitengestaltung mit HTML5 und CSS – Grundlagen – Intensivkurs 40h
- HTML 5 und CSS Teil 1 Wochenendkurs 16h
- HTML 5 und CSS Teil 2 Wochenendkurs 16h
- HTML CSS lernen – Einstieg in die Webentwicklung 24h
Zielgruppe
HTML und CSS Kenntnisse sind notwendig, wenn Sie abseits von Designvorlagen gestalten wollen. Der Kurs richtet 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.
Webseitengestaltung mit HTML5 und CSS – Grundlagen – Intensivkurs 40h
Volkshochschulen Treptow-Köpenick, Friedrichshain-Kreuzberg, Steglitz-Zehlendorf, Marzahn-Hellersdorf, Lichtenberg
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
Webseitengestaltung mit HTML5 und CSS – Grundlagen – Teil 1 16h
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
Webseitengestaltung mit HTML5 und CSS – Grundlagen – Teil 2 16h
Volkshochschulen Treptow-Köpenick, Steglitz-Zehlendorf
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
HTML CSS lernen – Einstieg in HTML5 und CSS - Onlinekurs 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