HTML, CSS

Grundlagen der Webprogrammierung

Wir leben zu Zeiten einer Revolution in der Telekommunikation. Nach vorsichtigen Prognosen einiger Philosophen des letzten Jahrhunderts ist eine Welt am Geburt, in der der Mensch mithilfe von Technik jederort Einfluß nehmen, präsent sein kann.

Die Wahrheit ist einfach: ohne Internet-Auftritt funktioniert kein Geschäft und keine Organisation mehr. Wer seine Angebote nicht im weltweiten Netz veröffentlichen kann, erleidet schwere Verluste im Wettbewerb. Früher war Webdesign das Geheimnis von wenigen Eingeweihten. Firmen und Privaten hat es viel gekostet, Externisten zu beschäftigen, die häufig keine zufriedenstellende Ergebnisse liefern konnten.

Das weltweite Netz ist das Medium mit dem bis dato größten Impakt auf unseren Alltag. Das Don't-make-me-think Prinzip des Interface Designs, die schnellstmögliche Lieferung von Informationen auf der möglichst verdauliche Weise verändert die visuelle Sprache in einem Tempo, das vorangegangene Generationen nicht kannten.

Die gute Nachricht ist, dass Webgestaltung mit modernen Gestaltungssoftware wie Dreamweaver gar kein Hexenwerk ist. Es ist nie zu spät, sich anzuschließen; je später sich jemand dazugesellt, desto einfacher sind die Werkzeuge. Mit der Zeit wird Webdesign eine genauso grundlegende Kulturtechnik, wie die Textverarbeitung oder das Browsen.

HTML (Hypertext Markup Language = Hypertext-Auszeichnungssprache) ist die vorherrschende Sprache des Internets. Ohne ihre Kenntnis kann man keine höhere Webtechnologien verstehen. Egal mit welchen Mitteln wir später Websites erstellen (WYSWYG-Editoren, Skriptsprachen, Content Managing Systeme), die Kenntnis der am weitesten verbreiteten Sprache der Welt ist Grundvoraussetzung. Die neuen Tags in HTML5 hat viel für Websites und das Netz zu bieten. Unter der Flagge des 'semantischen Webs' versucht man, möglichst alle Informationen miteinander zu verbinden und somit automatisiert verarbeitbar zu machen. Statt charakterlosen Divs gibt es mitunter eine Reihe Strukturelemente, die miteinander in semantischen Verbindung stehen; etwa in Titel-Inhalt, Inhalt-Illustration oder in Inhalt-Fußnote-Verbindung. Mit den Mikrodaten kann man inzwischen jedes einzelne Wort kategorisieren; Links sind typisierbar. Man hat die Formularelemente deutlich erweitert, ihre Validierung wird vom Browser durchgeführt, und einige interaktive und Anwendungs-Elemente sind hinzugekommen. Die Tabellen sind schlauer und platzeffizienter geworden, neue Medienelemente machen uns das Leben leichter und ein Leinwand-Element, an dem sogar 3D-Grafiken mithilfe von JavaScript entstehen können. Mit letzterem kann man ansonsten auch (bewegte) Grafiken im SVG-Format programmieren und die geografische Lage des Benutzers erörtern.

CSS (Cascading Style Sheets = Vererbende Stilbeschreibungen) ist die Stilauszeichnungssprache, die HTML-Dokumente ihr Äußeres verleiht. Mit ihrem Einsatz sind wir imstande, dem seit einem Jahrzehnt geprägten Grundprinzip des World Wide Web Konsortiums, nämlich der Trennung von Inhalt und Form, genüge zu tun. Die 3. Version von CSS wurde deutlich weiterentwickelt: mit dem media Attribut kann man auf verschiedene Parametern des darstellenden Gerätes reagieren (Breite, Orientierung, Auflösung), d.h. wir können einfach angeben, welche Anordnung wir auf Desktop-Geräte, Tablets, bzw. an Smartphones gerne hätten (evt. was-wo versteckt sein soll), es wurden neue Texteigenschften eingeführt (Schriftarteneinbettung, Schatten, Drehung, Mehrspaltige Anordnung), aber auch neue Boxeigenschaften (Farbübergang, mehrfache, skalierbare Hintergrundgrafiken, abgerundete Ecken, Boxschatten) - die interessantesten seien mal erwähnt. Man kann die Transparenz eines jeden Elements angeben. Das Sahnehäubchen ist aber, dass jedes Parameter nun animierbar ist: z.B. können sich Eigenschaften des Rollover-Status' im Laufe einer bestimmten Dauer entwickeln, was das Hin- und Herfliegen, Ein- und Abblenden, Skalieren, Drehung und Umfärbung der Elemente ermöglicht. CSS ist heute im Stande, das Sonnensystem an den Bildschirm zu zaubern.

Unter XML (eXtensible Markup Language = Erweiterbare Auszeichnungssprache) verstehen wir im Alltag Textdateien, die Datenreihen beinhalten und von Mensch und Maschine mit Leichtigkeit auszulesen sind. Hier definieren wir unsere Tags selber. Man kann ihnen Attribute hinzufügen, welche von uns definierte Werte annehmen können. So ist XML mehr als eine Auszeichnungssprache, sondern eine Sprachfamilie, von derer alle mögliche Unternehmen zahlreiche Dialekte erfunden haben. XML ist eine weniger robuste Alternative des Datenbanks, die zumeist von Menschenhand gepflegt wird. Die gespeicherten Daten werden von Programmen aller Art ausgelesen, um sie für Ihre Funktionen zu benutzen; in einer Webumgebung liest man die Daten üblicherweise mit JavaScript oder PHP und sie landen in HTML.

HTML, CSS und XML sind zusammen mit JavaScript keine vergänglichen Hypes, sondern die de-facto Standards von Websites und das bleiben sie auch.

Der Privatunterricht wird Ihren individuellen Zielsetzungen angepasst. Im Rahmen des Unterrichts kann auch Ihre Website erstellt werden.

Dauer: ca. 30 × 60 Minuten

Grundkenntnisse

  • Das Internet (Netzwerke, Infrastruktur, Klient-Server-Architektur, Protokolle)
  • Das weltweite Netz (URL, HTTP, Hypertext)
  • Domains und Webspaces, Hosts und ihre Pakete
  • Statische und Dynamische Websites
  • Begriffe
  • Webbrowser
  • Allgemeine Tastaturkürzel
  • Tastaturkürzel von Webbrowsern und ihr Kontextmenü
  • Technologie Überblick:
    • Auszeichnungssprachen: HTML, XML, XHTML, CSS
    • Skriptsprachen: JavaScript, PHP, MySQL, phpMyAdmin

HTML Schritt für Schritt

  • Syntax
    • Dokument-Struktur
    • Dokument-Objekt-Modell
    • Auszeichnungen und Tags
    • Attribute und Werte
  • Stilare Textauszeichnungen
    • Unterstrichen, durchgestrichen, tief- und hochgestellt, fett, vorformattiert
  • Semantische Textauszeichnungen
    • Kursiv, hervorgehoben, betont, wichtig, kleingedruckt, Abkürzung, Zeitangabe, Definition, Code, Variable, Maschinen-Output und -Input, Gelöschter und Eingefügter Text, Postadresse, thematische Trennung
    • Überschriften und Absätze
  • Mikrodaten
    • Kategorien und Elemente
  • Zitate
    • Inline- und Block-Zitate
  • Hyperreferenzen
    • Interne undexterne
    • E-Mail-, Skype- und Telefon-Referenzen
    • Relative und absolute Pfade
    • target
    • Referenztypen
  • Aufzählungen
    • ungeordnet, geordnet, Definition
    • Interaktive elemente
      • details
  • Anwendungselemente
    • meter
    • progress
  • Grafik, webtaugliche Formate
  • Multimedia
  • iFrames
  • Elemente der Kopfleiste: Meta tags, Verbindung mit externen Quellen
  • Tabellen
    • Einfache Tabelle
    • Tabelle mit Kopf- und Fußzeile
    • Säulen mit colgroup formatieren
    • Zellen vereinen
  • Formulare
    • Strukturelemente: Feldgruppen und Etikette
    • Textfelder: versteckt, einfach, E-Mail, Suchfeld, URL, Telefon, Textbox, Spracherkennung
    • Numerische felder: einfach, Extremwerte und Schritte, Datenfelder, Schieberegler, Farbwähler
    • Menüs: Pull-down, Optionsgruppe, Datenliste
    • Radioknöpfe, Checkbox, Attribute
    • File-Upload, Typenbegrenzung
    • Schlüsselgenerierung
    • Output
    • Knöpfe: Senden, Wiederherstellung, Bildknopf, leerer Knopf
  • Formatierung von Formularfeldern
    • Breite und Charakterzahl
    • Automatischer Fokus und Füllung
    • Vaidierung: Pflichtangabe, Tipp, Schablone, Aufhebung der Valdierung
    • Vordefinierter und Fix-Wert
  • Medien
    • Bilder und Formate (JPG, GIF, PNG, SVG)
    • Eingebettete Medien (Multimedia-Formate: MP3, MOV, MP4, OGV, WEBM, SWF)
    • Audio, Klangformate (MP3, OGG)
    • Video, Videoformate (MP4, OGV, WEBM)
  • Canvas
    • grafische Elemente und ihre Programmierung
  • Strukturelemente
    • Allgemeine Block- und Inline-Element
    • Kopfzeile, Überschrift-Gruppe, Navigation, Sektion, Artikel, Seitenelement, Fußzeile
    • normalize.css: Vereinheitlichung von Browser-Verhalten
  • Mediaqueries: Reaktion auf verschiedene Bildschirmbreiten und - orientierungen
    • Umstellung auf 2-spaltigem Layout (Tablet)
    • Umstellung auf 1-spaltigem Layout (Smartphone)

CSS 1-2 Schritt für Schritt

  • CSS auf HTML anwenden
    • Externe Stylesheets
    • Stile im Kopfbereich
    • Stilangaben als Tag-Attribut
    • Allgemeiner Syntax
    • Mehrfachauswahl (UND-Verbindung)
  • Selektoren
    • Tags
    • Klassen
    • Identifier
    • Universalselektor
    • Kindselektor
    • Geschwisterselektor
  • Pseudeselektoren
    • Dynamische Pseudeselektoren
    • Linkstatus-selektoren
  • Vererbung
  • Kaskade
  • Maßeinheiten
    • Farben
    • Größen
      • Relative Maßeinheiten (px, em, ex, %)
      • Absolute Maßeinheiten (SI-Maßeinheiten, der typografische Punkt, pica)
    • Pfadangaben
  • Schrifteigenschaften
    • Schriftfamilie
    • Schriftstil
    • Schriftvariante
    • Schriftgröße
    • Zeilenabstand
  • Texteigenschaften
    • Farbe
    • Zeichenabstad, Wortabstand
    • Absatzausrichtung
    • Absatz der ersten Zeile
    • Texdekoration
    • Text-Transformation
    • Textschatten
    • Zeilenbruch und Holräume
    • Vertikale Ausrichtung
  • Aufzählungen
  • Tabellen
    • Titel
    • Breite
    • Rahmen
    • Leere Zellen
  • Referenzen
    • Grundstatus
    • Fokus
    • Rollover
    • Angeklickt
    • Besucht
  • Hintergrund
    • Hintergrundfarbe
    • Hintergrundbild
      • Scrolling
      • Position
      • Wiederholung
  • Weitere Eigenschaften
    • Sichtbarkeit
    • Anzeige
  • Dynamische Inhalte
    • Zeichenketten
    • Bilder
    • Anführungszeichen
    • Zähler
    • Einstellung des Cursors
  • Das Boxmodell
    • Innenabstände
    • Außenabstände
    • Rahmen
    • Parameter
    • Skalierung
    • Eingrenzung der Skalierbarkeit
    • Übergroßer Inhalt
  • Positionierung
    • statisch, relativ, absolut, fixiert
    • Versetzung von Boxen
    • Schweben
    • Layers
    • Kommentierung

CSS3 Schritt für Schritt

  • Mediaqueries
    • Steuerung der Anzeige auf Smartphones
    • Medienspezifische Angaben in demselben Stylesheet
    • Formatierung für breitenbestimmte Anzeigen
    • Formatierung für den Druck
    • Formatierung für Geräte best. Orientierung
    • Formatierung für best. Seitenverhältnisse
    • Formatierung für Geräte best. Farbtiefe
  • Neue Texteigenschaften
    • Einbettung von Schrifttypen
    • Schriftschatten
    • Schriftkontur
    • Schriftdrehung
    • Zeilentrennung
    • Übergroßer Inhalt
    • Mehrspaltige Anordnung
  • Neue Boxeigenschaften
    • Farbübergänge (lineare, diagonale, radiale)
    • Kantenbild, Wiederholung, Dehnung
    • Abgerundete Ecken
    • Boxschatten
    • Spiegelung
    • Transformationen (Skalierung, Drehung, Versatz, Verzerrung)
    • Skalierung durch Benutzer
    • Skalierbare Hintergrundgrafik
    • Flexibles Boxmodell
  • Neue allgemeine Eigenschaften
    • Transparenz
    • Animation
  • Neue Selektoren
    • Attributselektor
      • Wertselektor
      • Boolwertselektor
    • Kindselektor
      • Erstes Kind
      • Kind n
      • Gerade und ungerade Kinder
      • Letztes kind
      • Einziges Kind
      • Kindloses Element
      • Ausnahmen
    • Auswahlselektor

XML

  • Anwendungen von XML: chemische, Multimedien-Integrier-, Erweiterbarer Hypertext-, Vektorgrafische, Business Reporting-Auszeichnungssprachen
  • XML-Sprachen
  • Wohlgeformtheit
  • DTD
  • Attributliste
  • Element vs. Attribut
  • XSD-Schema
  • Sitemap
  • Styling
  • Klassenbuch
  • Bildergalerie
  • Newsblock
  • XML-Import mit JavaScript:
    • Ein Bekenntnis
    • CD-Datenbank

Ausblick: JavaScript

  • Zeichnen mit Canvas
  • Programmierte Animation einer SVG-Grafik
  • Geolocation: Ortung von Besuchern