HTML / CSS-Grundlagenkurs - Webseiten erstellen
Bildungsurlaub als Kompaktkurs in Berlin
Der Einstieg in die Online-Techniken verlangt Kenntnisse der beiden Standards (X)HTML (Hypertext Markup Languages) und CSS (Cascading Styling Sheets). Eine gute statische Webseite wird durch die saubere, professionelle Anwendung dieser Standards bestimmt. Nur so erhält der Designer der Web-Präsentation eine optimale Umsetzung hinsichtlich Suchmaschinen-Optimierung, Barrierefreiheit und leichter Veränderbarkeit der Webseite.
Der HTML Standard vom World Wide Web Consortium (W3C) ist HTML5 in der Version 5.2 vom 14. Dezember 2017. Die Standardreferenz zu HTML gab es von Stefan Münz unter dem Namen SELFHTML. Das Projekt wird nun als selfhtml Wiki weitergeführt. Die Materialien von Stefan Münz liegen auf der Website HTML5 Handbuch!
Neben dem W3C gibt es auch eine private Initiative: die WHATWG. Einen Überblick gibt die Wikipedia. Die Webkrauts geben eine Einführung.
Cascading Style Sheets (CSS)
Cascading Style-Sheets bzw. CSS (Stilvorlagen) erleichtern die Gestaltung und insbesondere die Pflege der Webseiten. Stylesheets ermöglichen Layout-Gestaltungen, die mit dem Standard-HTML nicht möglich sind.
Die Sprache CSS wurde durch das World Wide Web Consortium (W3C) Mitte der neunziger Jahre standardisiert. Die erste, veraltete Version CSS2 ist vom 12.Mai 1998. Eine deutsche Übersetzung ist auch erhältlich. Am 7. Juni 2011 wurde die endgültige Empfehlung für CSS 2.1 veröffentlicht. Eine Aktualisierung zur Version CSS 2.2 wurde am 27. April 2018 publiziert. Weitere Hinweise sind im CSS Snapshot 2018 zu finden.
Beim W3C können eigene Stylesheets validiert (geprüft) werden: Hier steht der CSS Validator online zur Verfügung
Einer der führenden Entwickler im W3C, Dave Raggett, hat im Jahr 2002 eine kurze Einführung in CSS auf englisch zur Verfügung gestellt.
Eine Referenz zu CSS gibt es im selfhtml Wiki. Im Handbuch HTML5 gibt es einen umfangreichen Abschnitt zu CSS3.
Seminarinhalte:
HTML5
- Planung, Konstruktion und Realisierung einer Webseite
- Entwurf von Navigationssystemen
- Ordnerstrukturen: relative und absolute Pfade
- Client-Server-Prinzip
- Webbrowser (Webclient)
- Hypertext
- Einführung in HTML 4 und HTML5
- HTML-Varianten (W3C) bis HTML5 (Beispiele), veraltetes HTML, XHTML
- Dokumenten Typ Definition (DTD)
- HTML-Tags quelltextorientiert eingeben und verschachteln (semantischer Code)
- Einführung in die Arbeit mit professionellen Webseiteneditoren
- Zeichenreferenz: ISO und UTF
- Sonderzeichen (HTML-Entities)
- Block- bzw. Outline- und Inline-Elemente (DIV und Span)
- Grundlegende Textauszeichnungen
- Listen
- Einbindung von Grafiken
- Erstellung von Hyperlinks
- Tabellen und tabellarische Daten
- Formulare
- Javascript am Beispiel Bilderpräsentationen
- Erstellung und Nutzung von Templates in Sites und Editoren
- Validierung bzw. Prüfung der Webseiten (Links überprüfen) im Browser
- Suchmaschinenoptimierung (SEO) und Metatags
- Kriterien für die Providerwahl
- Bestellung einer Domain-Adresse
CSS3
- Typografie, Webtypografie, Webdesign und barrierefreies Webdesign
- Grafik Grundbegriffe
- Grundlagen CSS und CSS3 (Übersicht aller CSS-Elemente)
- Trennung von Inhalt (Seitenstrukturierung) und Layout (Design)
- CSS intern, inline und extern (Einbindung in Templates)
- CSS Boxmodell: Abstände und Rahmen
- Schriftformatierung und Texteffekte
- Farben, Farbmodelle (RGB Dezimalcode, Hexadezimalcode, HSB) und Hintergründe
- Klassen, Pseudoklassen und IDs
- Webseitengerüste, Grids, Floats
- Relative, fixe und absolute Positionierungen
- Maßeinheiten: fixes (px), fließendes (%) und elastisches (em) Layout (Vererbung)
- CSS für barrierefreies Webdesign
- Tabellenformatierungen mit CSS
- CSS aus Baukästen am Beispiel Bootstrap (deutsch und Tutorial)
- CSS-Validierung
- Stylesheets für den Druck
Veröffentlichung und Werbung
- Veröffentlichung mit ftp (FileZilla)
- Eintrag in Suchdienste und Suchmaschinenoptimierung (SEO).
- Online-Verwaltung der Website beim Provider (ISP)
Voraussetzungen:
Gute Windowsgrundlagen, Internet-Kenntnisse (WWW, E-Mail).
Methoden:
Vortrag, Übungen, Gruppenarbeit, Einzelarbeiten.
Software:
Notepad++
Lernziele:
Die Trennung von Form (CSS) und Inhalt (HTML) und die Planung eines Corporate Designs probieren Sie praktisch aus. Neben der Planung eines Internetauftritts sowie der Erstellung der erforderlichen Dateien werden auch Tipps zur Providerauswahl, der Bestellung der Domain-Adressen sowie die Schritte zur Veröffentlichung besprochen. Zum Schluss erfahren Sie noch Hinweise zum Eintrag in Suchmaschinen.
Termin:
momentan kein Termin
Fortsetzung:
Nach diesem Kurs können Sie Ihre Kenntnisse im CSS-Aufbaukurs Responsives Webdesign vertiefen.