Homepages mit HTML und CSS

Homepage-Kurs für alle: Wichtige Hinweise zu Beginn

Kapitel 1: HTML ist einfach! Dein Eigenheim im Web

• Projektordner einrichten

HTML, HEAD, TITLE und BODY: Grundlagen

Gar nicht so schwer: Grafik im GIF-Format!

• Erlaubte Dateiformate
• Dein erstes GIF-Bild mit Paint

HTML pur: Das erste Projekt im Quelltext

So sieht's im Browser aus

Blick hinter die Kulissen: HTML-Tags im Detail

• Der Kopfbereich im Detail
• Absätze und Zeilenumbruch

So fügst du eine Grafik ein: IMG und seine Attribute

• Verknüpfen statt Speichern!
• Grafik ausrichten mit align

Zusatzwissen für Profis: Grundbegriffe kurz erklärt

Übungsteil A: Erste Schritte mit HTML

Kapitel 2: Hyperlinks, die "Kreuz- und Querverweise"

• Seiten verbinden: Interne Links
• Grundsyntax der Hyperlinks

Mehr Feedback durch den E-Mail-Link

• Das Schlüsselwort mailto

Links nach draußen: Die externen Hyperlinks

Tipps und Tricks zu Hyperlinks

• Hyperlinks mit Beschreibung
• Links auf neuer Seite aufrufen

Zusatzwissen für Profis: E-Mail, Musik und PDF

• Supertricks zum E-Mail-Link
• Musik, Dateien, PDF: Mit Links!

Übungsteil B: Interne und externe Hyperlinks

Kapitel 3: Gestaltung mit Cascading Style Sheets

• Kopie des Ordners eigenheim
• Die Gesamt-Schriftart ändern

Die wichtigsten Stil-eigenschaften zur Schriftgestaltung

• Schrifteigenschaften
• Ausrichtung und Zeilenabstand
• Die Maßeinheiten von CSS

Vordergrund- und Hintergrundfarbe einstellen

• Farben in HTML und CSS
• Attribut color: Farbe zuweisen

Wichtige Gesetzmäßigkeiten von Style Sheets

Style Sheets an zentraler Stelle im HeAD notieren

• Style Sheets im HEAD notieren

Zusatzwissen für Profis: Schriftgestaltung und Listen

Übungsteil C: erste Schritte mit CSS

Kapitel 4: Rahmen, Ränder und Hintergrundeffekte

• Rahmen und Ränder
• Umrandungsstile von CSS

Flexible Gestaltung durch separate Stilklassen

• Separate Stilklassen notieren
• Gebundene und freie Klassen

Exaktes Layout: Ränder, Kasten und Innenrand

• Randeinstellungen mit margin
• Mehr Luft bitte: Innenrand

Absolut oder relativ? Breitenangaben justieren

• Breite des Elements einstellen
• Individuelle Breiten mit width

Alles im Rahmen: Hintergrundinfos zum Boxmodell

• Boxmodell-Fehler vom Explorer

Zusatzwissen für Profis: Mehr zu Hintergrundeffekten

Übungsteil D: Rahmen, Ränder, Effekte

Kapitel 5: CSS professionell! DIV, SPAN, Hover und Co.

• Mehr Freiheit:
  und
• Block- und Zeichenebene

Volle CSS-Power: Style Sheet-Bereich extern auslagern

• Externe CSS-Datei erstellen

Quelltext der externen CSS-Datei im überblick

• Link zur Style Sheet-Datei

So erzeugst du dynamische Querverweise mit hover

• Fünf Pseudo-Klassen für Links

Aufzählungszeichen mit Bildchen und Liste als Menü

• Individuelles Aufzählungszeichen
• Auch das geht: Menüs als Liste

Profi-Wissen: Hinweise zu externen Style Sheets

Übungsteil E: Übungen zu externen Style Sheets

Kapitel 6: Das Projekt - Spaltensatz mit Kopf- und Fußzeile

• Das Projekt „Ferienhaus“
• Das Layout im Überblick
• Schritt für Schritt zum Erfolg
• DIV-Container mit Eigenschaft id
• Die CSS-Datei „struktur.css“
• Der Trick mit der Hauptspalte

Kapitel 7: Exakt positioniert: Dreispalter mit fixierten DIVs

• CSS-P für exaktes Positionieren
• Eigenschaften und Werte von CSS-P
• Dreispalter mit Header
• CSS-P: Übersicht der Eigenschaften

Übungsteil F: Übungen zum Spaltensatz mit CSS

Kapitel 8: Die Feinheiten – Menü und Inhalt chic gestalten

• CSS-Datei „layout.css“
• Die Inhalte formatieren
• Gestaltung des main-Containers

Kapitel 9: Tabellen de luxe mit HTML und CSS

• Tabelle für Belegungsübersicht
• Tabelle mit CSS formatieren
• Zusatzwissen zu Tabellen

Übungsteil G: Übungen zu Tabellen und zum CSS-Layout

Kapitel 10: Bitte bestellen! Attraktive Formulare dank CSS

• TEXTAREA: Mehr Feedback!
• FIELDSET und LEGEND
• Submit- und Reset-Button
• Mann oder Frau? Pull-down-Menü!
• Nur einer gewinnt: Radioknöpfe
• Bitte wählen Sie per Checkbox

Die optische Gestaltung des Formulars mit CSS

• Der CSS-Code für das Formular

Übungsteil H: Übungen zu Formularen und zu CSS

Nützliche Tools, Links und Sites für HTML und CSS

• HTML und CSS prüfen
• HTML- und CSS-Referenzen
• Editoren
• Browser-Tools

Stichwortverzeichnis