Das HTML/CSS Codebook

Transkript

1 Marianne Hauser, Tobias Hauser, Christian Wenz Das HTML/CSS Codebook 'ADDISON-WESLEY An imprint of Pearson Education München Boston San Francisco Harlow, England Don Mills, Ontario Sydney Mexico City Madrid Amsterdam

2 Inhaltsverzeichnis Vorwort 15 Teil I Einführung 19 1 Historie und Hintergründe Technische Grundlage HTML und das Web HTML und XHTML Die CSS-Idee Andere Technologien 44 2 Browser und andere Sorgen Browser - technisches Know-how Der Browserkrieg Browserlandschaft Testumgebung 83 3 HTML-Grundgerüst Aufbau Wichtige Fakten CSS-Grundlagen Grundbegriffe Einbinden Stile zuweisen Kaskadieren - welcher Stil gilt? Maßeinheiten Zukunft XHTML 2.0 CSS 3 Andere Technologien TeiIII Rezepte Textgestaltung Überschriften definieren Schriftart festlegen mit HTML Schriftart festlegen mit CSS

3 6» Inhaltsverzeichnis 4 Eine generische Schriftfamilie festlegen Downloadbare Schriften verwenden Schriftfarbe definieren mit HTML Schriftfarbe definieren mit CSS Schriftgröße definieren mit HTML Der Einfluss der Schriftgröße auf den Abstand zwischen zwei Absätzen Schriftgröße definieren mit CSS Kursive Schrift mit HTML Kursive Schrift mit CSS Schriftdicke mit HTML festlegen Schriftdicke mit CSS festlegen Diktengleiche Schrift festlegen Laufweite der Schrift festlegen Schriftvariante mit CSS festlegen Zeilenhöhe festlegen Schriftgestaltung all inclusive Schriftgestaltung für die ganze Seite mit HTML Schriftgestaltung für die ganze Seite mit CSS Seitenübergreifende Schriftgestaltung mit CSS Überschriften selbst gestalten Unterstreichen und durchstreichen mit HTML Unterstreichen, durchstreichen und vieles mehr mit CSS Textschatten erzeugen In Groß-und Kleinschreibung umwandeln Mit Laufschriften arbeiten Laufschrift mit JavaScript Abstände zwischen Buchstaben bestimmen Abstände zwischen Wörtern bestimmen Hoch- und tiefgestellte Zeichen mit HTML Logische Textauszeichnung verwenden Die Auszeichnung von Adressen Die Auszeichnung von Zitaten Änderungen kenntlich machen Textelemente ausrichten mit HTML Textelemente ausrichten mit CSS 234 Absätze Absätze und Zeilenumbrüche einfügen Ein Blockelement erstellen Ein Inline-Element erstellen Automatische Zeilenumbrüche verhindern und zulassen mit HTML Weiche Trennzeichen Geschützte Leerzeichen Automatische Zeilenumbrüche verhindern und vorformatierte Darstellungen übernehmen mit CSS 246

4 » Inhaltsverzeichnis 46 Vorformatierte Darstellungen übernehmen mit HTML 47 Einrücken derersten Textzeile 48 Außenabstände festlegen mit HTML 49 Außenabstände festlegen mit CSS 50 Innenabstände definieren mit CSS 51 Rahmen festlegen und gestalten 52 Das Boxmodell in CSS inklusive Bug und Hack 53 Rahmen um die Webseite erstellen 54 Transparente Rahmen ausnutzen 55 Linien verwenden und gestalten 56 Vertikale Linien verwenden 57 Die erste Zeile eines Absatzes besonders gestalten 58 Den ersten Buchstaben eines Absatzes besonders gestalten 59 Inhalte vor und nach speziellen Elementen einfügen 60 Per CSS am Seitenende eine Copyright-Meldung ausgeben 61 Das erste Kindelement besonders gestalten 62 Die Laufrichtung von Text verändern 63 Medienspezifische Stylesheets für die Druckausgabe nutzen Links und Textmarken 64 Textmarken setzen 65 Hyperlink setzen 66 Hyperlinks auf Textmarken in externen Dokumenten 67 XHTML-konforme Textmarken verwenden 68 Linkfarben gestalten mit HTML 69 Links mit Hinweistexten (Quickinfos) versehen 70 Links gestalten mit CSS - Pseudo-Klassen 71 Links nicht unterstreichen 72 Zielfenster für einen Link bestimmen 73 Links im Suchfenster öffnen 74 Links im Medienfenster öffnen 75 Eine globale Linkbasis festsetzen 76 Dateien zum Download anbieten 77 Ein Mailfenster öffnen 78 -Adressen schützen 79 Den Newsreader öffnen 80 Eine Nachricht per AIM, ICQ oder Yahoo! Messenger versenden 81 Den Mauszeiger verändern Grafiken und Hintergründe 82 Grafiken einbinden 83 Das richtige Grafikformat wählen 84 Grafiken für das Web aufbereiten 85 Animierte GIF-Grafiken verwenden 86 Ersatztexte und Hilfetexte bereitstellen

5 8» Inhaltsverzeichnis 87 Name für Grafiken Langbeschreibungen für Grafiken Höhe und Breite der Grafik festlegen Rahmen um Grafiken anzeigen und ausblenden Grafiken in Überschriften einbinden Grafiken ausrichten und beschriften Abstände zwischen Grafik und Text bestimmen Eigenes Icon für die Website Hintergrundfarbe für die gesamte Website festlegen mit HTML Hintergrundfarbe für die gesamte Website festlegen mit CSS Hintergrundgrafik festlegen mit HTML Hintergrundgrafik definieren mit CSS CSS-Befehle zur Beeinflussung von Hintergrundgrafiken Text grafisch unterstreichen Grafiken mit Links versehen Ein Bild mit mehreren Links versehen - Imagemaps 349 Listen Erstellen einer ungeordneten Liste Verschiedene Aufzählungszeichen für ungeordnete Listen mit HTML Verschiedene Aufzählungszeichen für ungeordnete Listen mit CSS Erstellen einer geordneten Liste Verschiedene Nummerierungssysteme für geordnete Listen mit HTML Verschiedene Nummerierungssysteme für geordnete Listen mit CSS Überspringen von Listenpunkten Erstellen einer Definitionsliste (Definitions-)Listen gestalten mit CSS Menü-und Verzeichnislisten erstellen Einrückung der Listenpunkte bestimmen Kompaktere Listendarstellung Verschachteln von Listen und Vererbung der Eigenschaften Verwendung von grafischen Aufzählungssymbolen mit HTML Verwendung von grafischen Aufzählungssymbolen mit CSS Kombination der CSS-Befehle zur Listengestaltung Automatische Nummerierung mit CSS Seiten sinnvoll strukturieren und gestalten mit CSS 385 Tabellen Grundgerüst einer Tabelle Tabellenrahmen mit HTML Tabellenrahmen mit CSS Tabelleninhalte mit HTML formatieren Tabelleninhalte mit CSS formatieren Hintergrundfarben für Tabellen und Zellen mit HTML Hintergrundbilder für Tabellen 404

6 » Inhaltsverzeichnis 128 Hintergrund in Tabellen gestalten mit CSS 129 Tabellen beschriften <I0 Tabellen- und Zellen-Kurzbeschreibungen verwenden 331 Höhe und Breite bestimmen.132 Spalten für schnelleres Rendern vorstrukturieren 113 Tabellen spaltenübergreifend formatieren 134 Tabellenzeilen gruppieren und formatieren $35 Tabellenzellen verbinden U6 Tabellen-Innenabstand festlegen mit HTML t37 Tabellen-Innenabstand festlegen mit CSS 138 Tabellen verschachteln 139 Rahmen um leere Zellen t40 Zeilenumbruch in Zellen verhindern 141 Tabellenbreite unabhängig vom Tabelleninhalt J42 Übergroße Zelleninhalte mit Scrollbalken sichtbar machen #43 Horizontale und vertikale Ausrichtung von Tabelleninhalten mit * HTML und CSS 144 Leserichtung einer Tabelle umkehren 445 Das CSS-Tabellenmodell - Tabellen in Zukunft per CSS realisieren 146 Tabellen per CSS schon heute realisieren J47 Grafisch gestaltete Tabellenrahmen 48 Attribute für Accessibility kennen lernen prmulare 149 Ein Formular auf die Seite einfügen ISO Das Versandziel festlegen 151 Sich für eine Versandmethode entscheiden 152 Formulare konform zu XHTML Strict machen 353 Ein einzeiliges Textfeld einfügen 1,54 Ein Passwortfeld einfügen S55 Ein mehrzeiliges Textfeld einfügen.156 Den Zeilenumbruch bei mehrzeiligen Textfeldern steuern 157 Eine Checkbox einfügen J58 Radiobuttons einfügen 159 Eine Auswahlliste einfügen <160 Eine Mehrfach-Auswahlliste einfügen 461 Ein verstecktes Formularfeld einfügen 162 Eine Schaltfläche zum Versenden einfügen 163 Eine grafische Schaltfläche zum Versenden einfügen 164 Eine Schaltfläche zum Zurücksetzen einfügen 165 Eine Schaltfläche einfügen 166 Eine Schaltfläche für neuere Webbrowser einfügen 167 Die Formulardaten per versenden 168 Ein Element zum Datei-Upload einfügen $69 Elemente gruppieren

7 10» Inhaltsverzeichnis 170 Elemente beschriften Textfelder sperren Formularfelder deaktivieren Mehrfaches Versenden von Formularen verhindern Textfelder rechtsbündig ausrichten Ein Textfeld speziell formatieren Den Inhalt eines Textfeldes vorauswählen Das Formular per Enter versenden lassen Tabulator-Reihenfolge von Formularfeldern ändern Eine Schnellnavigation mit einer Auswahlliste erzeugen Formularelemente bequem im Browser einsehen 505 Frames und Iframes Grundgerüst eines Framesets erstellen Inhalte für die einzelnen Frames festlegen Frames ineinander verschachteln Größenangaben der einzelnen Frames sinnvoll bestimmen Browser ohne Frameunterstützung unterstützen Framerahmen gestalten mit HTML Framerahmen gestalten mit CSS Beeinflussen, ob in einem Frame Scrollbalken erscheinen Die festgelegte Framegröße fixieren Innenabstand des Frameinhalts zum Framerahmen festlegen Framedokumente direkt an den Framerand positionieren Den Inhalt eines einzelnen Frames mittels Links verändern Mit Frames Navigationsleisten gestalten Mehrere Frames auf einmal ändern Einen Basiszielframe festlegen Reservierte Werte für target und ihre Verwendung Ein unabhängiges Fenster im Fenster erzeugen (Iframe) Größe des Iframes dynamisch anpassen 548 Positionierung und Layout Text und Objekte ausrichten mit HTML Text und Objekte ausrichten mit CSS Breite und Höhe von Objekten festlegen Maximale und minimale Breite und Höhe von Elementen Minimale Breite und Höhe für (fast) alle Browser Überlauf bei zu kleinen Elementbereichen Sichtbarkeit von Objekten Elemente um andere Objekte fließen lassen mit CSS Das Umfließen von Objekten beenden Positionieren, Umfließen und Umfließen beenden mit HTML Positionierung von CSS verstehen Absolute Positionierung von Objekten 574

8 » Inhaltsverzeichnis Fixe Positionierung von Objekten, JH2 Relative Positionierung von Objekten.213 Vermischung von relativer und absoluter Positionierung 214 Überlappungen mit dem Z-Index beeinflussen «115 CSS-Positionierung im Netscape Navigator 4.x Sichtbare Bereiche festlegen p17 Die display-eigenschaft verwenden Positionierung mit Tabellen verstehen ; 219 Leerräume um Bilder und Objekte 220 Seitenlayout konzeptionieren Seitenlayout mit unsichtbaren Tabellen Zentriertes Seitenlayout mit Tabellen Seitenlayout mit CSS Zentriertes zweispaltiges Seitenlayout mit CSS Hilfetexte mit CSS-Positionierung und JavaScript jgins und Multimedia Medien einbinden Alternativtext für Nutzer ohne Plugin anbieten Plugin bei Bedarf nachladen Hintergrundmusik einbinden Vordergrundmusik im Netscape einbinden Flash-Filme einbinden Auf Flash-Plugin prüfen Werbebanner über das Dokument legen Shockwave-Filme einbinden Auf Shockwave-Plugin prüfen Windows Media Player einbinden Eine Meta-Datei für Windows Media Player erstellen Real Player einbinden QuickTime Player einbinden Java-Applets einbinden SVG-Dateien einbinden MathML-Dateien einbinden XML einbinden Webseiten einbinden Auf Vorhandensein eines Plugins prüfen srnet Explorer Browserspezifisches Stylesheet für die Entwicklung Elemente vergrößern Lupeneffekt Scrollen unterdrücken Scrollbalken einfärben Oberlaufende Zeilen abbrechen

9 12» Inhaltsverzeichnis 252 Filter nutzen Filter interaktiv einsetzen Transition-Filter nutzen Verhalten nutzen Transparente PNGs dank Verhalten und Filter Stilanweisungen nur für den Internet Explorer Stilbefehle nur für den Internet Explorer Stilanweisungen für bestimmte Internet Explorer-Versionen Konditionale Kommentare zur Browsererkennung nutzen Lokale Dokumente in der Internetzone ausführen Eine Seite den Favoriten hinzufügen Eine Seite zur Startseite machen 709 Mozilla und Konsorten Browserspezifisches Stylesheet für die Entwicklung XUL für eigene Oberflächen Mozilla-CSS-Befehle einsetzen Mit Netscape Navigator 4.x zurechtkommen Stilbefehle vor Netscape Navigator 4.x verstecken RSS-Feeds für Firefox einbinden 717 Andere Browser Browserspezifisches Stylesheet in Konqueror/Safari Browserspezifisches Stylesheet in Opera Scrollbalken färben mit Opera Scrollbalken färben mit Konqueror/Safari Opera-CSS-Befehle einsetzen Online eine Seite mit Safari/Konqueror betrachten Mehrere alternative Stylesheets anbieten 726 Meta-Tags und Suchmaschinen Meta-Informationen angeben Automatische Weiterleitung Automatische Weiterleitung mit JavaScript Automatische Weiterleitung mit JavaScript, ohne Zurück Automatische Weiterleitung mit serverseitigen Mitteln Seiten regelmäßig neu laden Einem Dokument ein Ablaufdatum geben Caching verhindern Suchmaschinen die Indexierung einer Seite verbieten Suchmaschinen das Folgen von Links verbieten Suchmaschinen den Zugriff auf bestimmte Teilbereiche verbieten Zusätzliche Informationen für Suchmaschinen integrieren Zusätzliche Informationen nach DCMI integrieren Suchmaschinen erneut vorbeischauen lassen 745

10 Inhaltsverzeichnis 13 Standardsprachen der Seite 746 Den MIME-Typ und Zeichensatz einer Seite festsetzen 747 Jugendschutzinformationen in Seiten unterbringen 747 Die eigene Website in Suchmaschinen platzieren 751 Webseiten für Suchmaschinen optimieren 752 Google-Anzeigen in Webseiten integrieren 753 sibility und Usability 755 Accessibility-Richtlinien verstehen 755 Priorität 1 gemäß WCAG erfüllen 757 Priorität 2 gemäß WCAG erfüllen 759 Priorität 3 gemäß WCAG erfüllen 760 Webseiten auf Einhaltung der WCAG-Bestimmungen prüfen 762 Webseiten auf Accessibility und Qualität prüfen 764 Webseiten per Checkliste auf Behindertengerechtheit prüfen 765 Webseiten per Screen Reader betrachten 766 Online einen Screen Reader testen 766 Webseiten per Textbrowser betrachten 767 Tastaturkürzel einsetzen 768 Einen guten Farbkontrast wählen 769 Webseiten für Farbenblinde optimieren 770 Impressum anlegen 770 Usability prüfen 772 Usability verbessern 774 Usability: verschiedene Stile anbieten 778 Webseiten»vorlesen«781 : über den Tellerrand 783 s versenden 783 Formulare automatisch überprüfen 789 Formulare automatisch überprüfen (mit detaillierter Fehlermeldung) 793 Formulare automatisch überprüfen (aber nur Pflichtfelder) 796 Automatische Formularüberprüfung mit ASP.NET 799 Dynamische Ausklappmenüs erstellen 802 HTML-Code schützen 811 Rechte Maustaste deaktivieren 812 JavaScript-Code im Internet Explorer schützen 814 HTML-Code reparieren 816 Mehrere Frames auf einmal ändern 818 Frames nachladen 821 Ein neues Fenster öffnen 823 Eine Sitemap erstellen 826 Eine sich selbst schließende Sitemap erstellen 828 Popup-Blocker erkennen 830 Phishing verstehen und vermeiden 831

11 14» Inhaltsverzeichnis 332 Passwortschutz mit JavaScript Passwortschutz mit Apache Passwortschutz mit IIS Passwortschutz mit PHP Passwortschutz mit ASP.NET und Windows-Authentifizierung Web Services mit dem Internet Explorer aufrufen Web Services mit Mozilla/Netscape/Firefox aufrufen Eigene Webserver-Fehlermeldungen mit Apache Eigene Webserver-Fehlermeldungen mit IIS Rollover-Grafiken einsetzen Verlinkte Rollover-Grafiken einsetzen Grafiken vorladen Sprachinformationen in Webseiten 859 Teil III Referenz Glossar Tabellarische Übersichten Längen- und Prozentangaben Zeitangaben Farbangaben Codierte Zeichen und Sonderzeichen Index der HTML-Elemente Index der Attribute zu den HTML-Elementen Index der CSS-Eigenschaften CSS-Kompatibilitätstabelle HTTP-Status-Codes Top-Level-Domains Übersicht der Sprachenkürzel Übersicht der Länderkürzel 945 Stichwortverzeichnis 953 CSS-Befehlsverzeichnis 967 HTML-Tag-Verzeichnis 969 HTML-Attribute-Verzeichnis 971