Inhaltsverzeichnis. Vorwort Über den Autor Einleitung Teil I HTML-Grundlagen HTML-Grundlagen... 33

Transkript

1 Inhaltsverzeichnis Vorwort Über den Autor Einleitung Was dieses Buch enhält Was wird benötigt? Die CD zum Buch Teil I HTML-Grundlagen HTML-Grundlagen Auf dem Weg zur ersten HTML-Datei Ein erster Versuch und jetzt etwas Theorie Die Struktur einer HTML-Datei HTML-Dokumente mit (Text-) Informationen Wie wird der Dokumenttitel festgelegt? Text und HTML-Struktur zusammenfassen Zeilenumbrüche und Absätze einfügen (K)ein Problem mit Sonderzeichen Kommentare im HTML-Quellcode Texte formatieren und gestalten Wie lassen sich Überschriften gestalten? Darstellung der Überschrift-Ebenen Überschriften ausrichten

2 6 Inhaltsverzeichnis 2.2 Einfache Befehle zur Textformatierung Textstellen fett auszeichnen Wie lässt sich Text kursiv formatieren? Textstellen unterstreichen Textauszeichnung physikalisch oder logisch? Fette Textstellen logisch auszeichnen Kursivtext logisch auszeichnen Hervorhebungen für Zitate Wörter mit <cite> auszeichnen Absätze mit <blockquote> hervorheben Besondere Hervorhebungen für Codestellen Listings mit <code> formatieren Vorformatierte Texte mit <pre> darstellen Tabellen (Listen) mit dem <tt>-tag <samp>-, <kbd>- und <var>-tags Textauszeichnung mit dem <address>-tag Weitere Tags zur Textauszeichnung Schriftvarianten <big> und <small> Hoch- und tiefgestellte Zeichen Blinkende und durchgestrichene Textstellen Schriftarten und -farben auswählen Die Schriftgröße wählen Schriftfarben setzen Zeilenumbruch verhindern Verschachtelte Tags Aufzählungen, Nummerierungen und Listen Arbeiten mit Aufzählungen Wie werden Aufzählungen realisiert? Gestufte Aufzählungen realisieren? Absatzeinzüge per <ul>-tag realisieren Aufzählungssymbol auswählen Ein Hinweis zu kompakten Aufzählungen Grafische Aufzählungssymbole Nummerierungen in HTML-Dokumenten Nummerierung mit dem <ol>-tag Unterbrochene Nummerierung Gestufte Nummerierungen Wechsel der Nummerierungswerte Wechsel des Nummerierungssymbols

3 Inhaltsverzeichnis Weitere Listen in HTML Listendarstellung mit dem <dl>-tag Listen mit <dir> zeugen Listen mit dem <menu>-tag gestalten Linien und Grafiken Arbeiten mit Linien Linie mit dem <hr>-tag anzeigen Wie lässt sich die Linienbreite einstellen? Festlegen der Liniendicke Ausrichten der Linien D-Darstellung in Linien unterdrücken Einstellen der Linienfarbe Grafiken als Linien einfügen Grafiken in HTML-Dokumente einbinden Pfadangaben im src-attribut Das alt-attribut als Grafikersatz Welche Grafikformate lassen sich nutzen? Grafiken skalieren Horizontale Ausrichtung der Grafiken Grafiken vertikal ausrichten Textabstand bei Grafiken setzen Rahmen ein-/ausblenden Grafiken und Überschriften Arbeiten mit Hyperlinks Verweise und Referenzen in HTML-Dokumenten Einen Verweis definieren Pfadangaben im href-attribut Absolute Verweise ins Absolute Verweise auf lokale Dateien Relative Verweise sind flexibler Hinweise zur Gestaltung von Hyperlinks Probleme bei»falschen«verweisen Slash-Zeichen statt des Backslashs Dateinamen in Anführungszeichen setzen Groß- und Kleinbuchstaben beachten Was ist mit langen Dateinamen? Wo sind die Dateinamen geblieben? Lokale Verzeichnisse anzeigen Tipps zum Gebrauch von Referenzen

4 8 Inhaltsverzeichnis Verweise auf Fremddateien Protokolltypen bei URL-Verweisen Der Protokolltyp http Der Protokolltyp file Der Protokolltyp ftp Der Protokolltyp news Der Protokolltyp mailto Der Protokolltyp telnet Der Protokolltyp gopher Arbeiten mit lokalen Verweisen Den Anker definieren Verweis auf den Anker definieren Lokale Verweise in externe Dokumente Grafiken in Verweisen Beispiel: Grafiken zur Navigation Beispiel: Alphabetisches Inhaltsverzeichnis Teil II HTML-Spezialitäten Verweis-sensitive Grafiken Was sind Imagemaps? Server-seitige Imagemaps Client-seitige Imagemaps Ein Beispiel für eine Imagemap Imagemap-Erweiterungen in HTML Spezialeffekte Farben für Text, Verweise und Hintergrund Farben für Verweise und Text Einstellen der Hintergrundfarbe Bilder als Hintergrund einblenden Was macht <!DOCTYPE>? Der Einsatz des <meta>-tag Das <meta>-tag Hinweise zum name-attribut Hinweise zum http-equiv-attribut Suchmaschinen per <meta>-tag unterstützen Steuerung von Indizierungs-Robotern Realisierung von Client-Pull-Dokumenten Zugangskontrolle über PICS-Dienste

5 Inhaltsverzeichnis Weitere Tags im Header Das <isindex>-tag Was macht das <link>-tag? URL mit dem <base>-tag festlegen Multimedia, Sound und Marquee Sound in HTML-Dokumenten Sound beim Öffnen des Dokuments Einbinden einer externen Sounddatei Hinweise zum Einbinden von Audiodaten Videodateien einbinden Videodateien intern einbinden Einbinden einer externen Videodatei Animation mit Java-Applets Einbinden eines Uhrzeit-Applets Arbeiten mit dem <object>-tag Bilder mit <object> einbinden ActiveX-Komponenten in HTML-Dokumenten Laufschriften in HTML-Dokumenten Eigenschaften der Laufschrift setzen Tabellen in HTML Grundlagen der Tabellenerstellung Eine Tabelle erstellen Tabellen mit Rahmen Zellenabstand und Umrandungen Randabstand der Zelleninhalte anpassen Tabellenrahmen und -linien in HTML Weitere Optionen zur Tabellengestaltung Einstellen der Tabellenbreite und -höhe Höhe und Breite der Zellen festlegen Tabellenüberschriften und -legenden Zellen über mehrere Spalten/Zeilen HTML-4.0-Erweiterungen (col, colgroup) Tabellenformatierung Ausrichtung der Tabelleninhalte Wie lässt sich eine Tabelle ausrichten? Tabellenhintergrund einfärben Zellen einfärben Tabellen mit Hintergrundbildern

6 10 Inhaltsverzeichnis Ändern der Linienfarben Beispiele zum Einsatz von Tabellen Aufzählungen mit Tabellen realisieren Tabelle zur Seitengestaltung verwenden Spaltensatz in HTML Arbeiten mit Frames Grundlagen zur Nutzung von Frames Ein Fenster vertikal unterteilen Zweiter Versuch, ein Fenster horizontal zu teilen Mehr als zwei Frames erzeugen Techniken zum Einsatz von Frames Frames und Verweise Verweise auf mehrere Frames Frames gruppieren Ein erweitertes Frame-Beispiel Wo liegen die Probleme bei Frames? Hilfe, ich brauche ein neues Fenster Der Browser unterstützt keine Frames Arbeiten mit rahmenlosen Frames Arbeiten mit <iframe> Formulare Formulare erstellen Tags zur Formulargestaltung Was macht das <form>-tag Formulareinträge beschriften Textfelder für Eingaben Kennwortabfrage im Formular Mehrzeilige Textfelder Kontrollkästchen Optionsfelder Schaltflächen im Formular Auswahllisten per Listenfeld Versteckte Steuerelemente Beispiel: Formular zum Zugriff auf Suchmaschinen Formularlayout Formularelemente positionieren Formulargestaltung mit Tabellen XForms, der neue Weg

7 Inhaltsverzeichnis Cascading Style Sheets Grundlagen Was sind Formatvorlagen? Welche Vorteile bringen Style Sheets? Wie werden Formatvorlagen eingesetzt? Style Sheets einbinden Die Sprache für das Style Sheet festlegen Verwendung des style-attributs Stile im Dokumentkopf definieren Style Sheets extern speichern Techniken zur Definition der Styles Tags als Selektoren Selektoren gruppieren Eigenschaften gruppieren Vererbung bei Selektoren Kontextsensitive Selektoren Klasse als Selektor Allgemeine Klassen als Selektoren id als Selektor Bemerkungen zu Pseudo-Elementen Kommentare in Style Sheets Die important-anweisung Beispiele zur Anwendung von Style Sheets Spaltensatz mit CSS Ausrichten von Textelementen Eine Tabelle zentrieren Einstellen der Schriftgrößen Hintergrund farbig unterlegen Horizontale Linien Rahmen um Absätze ziehen Groß-/Kleinschreibung erzwingen Hintergrundbild und -farbe Aufzählungen, eine leidige Geschichte Teil III Scripting JavaScript Allgemeines JavaScript-Programme in HTML einbinden Scriptanweisungen verstecken

8 12 Inhaltsverzeichnis Wie der Browser Scripts interpretiert JavaScript-Kurzeinführung Objekte in JavaScript Was sind Eigenschaften? Methoden in JavaScript Ereignisse in JavaScript Die Struktur eines JavaScript-Programms Ein Programm definieren Funktionen definieren Variable und Konstante in JavaScript Ausdrücke und Operatoren Vergleichsoperatoren Kontrollstrukturen for-schleife while-schleife Built-In-Objekte und -Funktionen JavaScript-Beispiele Ausgabe im Dokument Ja/Nein-Abfrage mit JavaScript Eingabewerte in JavaScript abfragen Die Browser-Variante abfragen Wechsel in Frames Debug-Funktionen im Netscape Navigator Debugger für den Internet Explorer VBScript Allgemeines VBScript-Programme in HTML einbinden Scriptanweisungen verstecken Wie der Browser VBScript interpretiert VBScript-Kurzeinführung Objekte in VBScript Was sind Eigenschaften? Methoden in VBScript Ereignisse in VBScript Die Struktur eines VBScript-Programms Ein Programm definieren Prozeduren definieren Variable und Konstante in VBScript Ausdrücke und Operatoren Vergleichsoperatoren

9 Inhaltsverzeichnis Kontrollstrukturen For-Schleife While-Schleife Do... Loop-Schleife Select-Case-Anweisung Built-In-Funktionen VBScript-Beispiele Zugriff auf Textfelder Auswertung von Optionsfeldern und Kontrollkästchen Formulareingaben vor dem Senden prüfen Ausgabe im Dokument Ja/Nein-Abfrage mit VBScript Eingabewerte in VBScript abfragen Die Browser-Variante abfragen Wechsel in Frames Debug-Funktionen in VBScript DHTML und Gestaltungshilfen Grundsätzliches Einfache Übungen HTML-Elemente mit QuickInfos versehen Abschalten der Bildlaufleiste Anzeigen der Bildschirmeigenschaften Arbeiten mit Ereignissen Ereignis an eine Prozedur binden Generische Anbindung von Ereignissen Fenstermanipulation und Systemeigenschaften abfragen Scrollende Statuszeile per Timer-Ereignis Blinkende Statusanzeige Anzeige eines Popup-Fensters Anzeige des Änderungsdatums Zugriff auf HTML-Elemente HTML-Elemente per Script auflisten Arbeiten mit id und name Anpassen eines Attributwerts Schmuckpunkte beim Zeigen hervorheben Ändern der Hintergrundfarbe bei Texten Beispiele für DHTML (Netscape) Bild mit CSS1 im Text positionieren Bild im Texthintergrund positionieren

10 14 Inhaltsverzeichnis Elemente mit <layer> positionieren Layer und Namen festlegen Clipping, Hide/Show und Dynamik Animation der Ebenen Beispiele für Dynamic HTML (Microsoft) Bilder filtern Schattierte Texte Glimm-Effekte im Text Animation des Glimmens Filtern mit Schatteneffekt Filter mit Welleneffekt Blurr-Filter Fading-Effekte Ändern des Cursor-Stils Dynamic HTML unter Windows Teil IV Grafik und Design Grafikgrundlagen Grafikgrundlagen Darstellung von Grafiken Was sind Vektorgrafiken? Was sind Bitmap-Grafiken Was sind Meta-Grafiken? Animation und Multimedia Farbdarstellung in Bitmap-Bildern Welche Grafikformate gibt es? Grafikformate und HTML In HTML zulässige Grafikformate Was ist das GIF-Format? Was ist das JPEG-Format? Was ist das PNG-Format? Welches Format ist am besten geeignet? Techniken zur Bearbeitung von Grafikdateien Tipps zur Reduzierung der Dateigröße Tipps zur Gestaltung der Grafikdateien Fragen zur Farbreduzierung Tipps zum Scannen Transparente GIF-Bilder erstellen Animierte GIF-Bilder erstellen Techniken zur Grafikgestaltung

11 Inhaltsverzeichnis Schmuckpunkte und Linien Schaltflächen gestalten Hintergrundgrafiken entwerfen Hintergrundmuster kacheln Spezialeffekte im Hintergrund Farbverläufe und andere Objekte Design von HTML-Seiten Vorbereitung Ihrer HTML-Präsentation Was, wie und wo? Ziele und Inhalte planen Organisation und Navigation Gestaltung des Seitenlayouts Fragen zur Dokumentgestaltung mit HTML Welche HTML-Erweiterungen nutze ich? HTML-Dokumente überprüfen Regeln zur Gestaltung von HTML-Dokumenten Teil V XML XML Eine Einführung Was sind Auszeichnungssprachen? Der erste Ansatz SGML ein ISO-Standard HTML als Auszeichnungssprache XML als Auszeichnungssprache XML, warum? Wo hakt es bei SGML? XML, der kleine Bruder von SGML Beispiel: Abbildung von Datentabellen Weitere XML Empfehlungen Grundüberlegungen zu XML Elemente zur Beschreibung der logischen Struktur Attribute geben Zusatzinformationen Zeichensätze Entities, was ist denn das? XML-Begriffe Tag versus Element Dokumenttyp Document Type Description Dokument, XML-Dokument und Instanz

12 16 Inhaltsverzeichnis 19 XML Kurzeinführung Hinweise zur XML-Struktur Die Struktur eines XML-Dokuments Zeichen im XML-Dokument Der Prolog Die XML-Deklaration Die Dokumenttyp-Deklaration Interne DocumentType-Declaration Elementtyp-Deklaration Attributlistendeklarationen Die Dokumentinstanz XML-Elemente Attribute Zusatzhinweise zu XML-Dokumenten Wohlgeformte und gültige XML-Dokumente Vordefinierte Entities Geparste und nicht geparste Entities CDATA-Abschnitte Kommentare Namen Literale Extended Backus-Naur Form (EBNF) XML praktische Übungen Einige Werkzeuge zur XML-Handhabung XML-Dokumente erstellen Anzeige von XML-Dokumenten MSXLS: XML-Dokumente in HTML konvertieren Einfache XML-Beispiele Ein fehlerhaftes XML-Beispiel Eine Namensliste per XML abbilden Probleme mit Umlauten XML-Daten in HTML-Tabellen anbinden HTML-Dokument mit XML-Daten Blättern in den XML-Daten XML-Daten einfügen/löschen Arbeiten mit dem XMLDOM-Objekt Die Namensliste per XMLDOM-Objekt auflisten HTML-Serientext mit XML-Daten

13 Inhaltsverzeichnis XML-Datenanzeige per XSL-Style-Sheet Anzeige eines einfachen XML-Dokuments Eine komplexere XML-Dokumentdatei Vector Markup Language (VML) Rechtecke mit VML darstellen Arbeiten mit den VML-Elementen Texteffekte und Hintergrund mit Farbverlauf Ovale Hintergründe und Schattierung WAP-Seitenerstellung mit WML Entwicklungswerkzeuge Grundaufbau einer WML-Datei Die erste WAP-Seite Texte ausrichten Texte formatieren Arbeiten mit externen Links Links auf Cards Navigation mit dem <do>-tag Bilder in Cards einbinden Tabellen gestalten Eingabefelder nutzen Auswahloptionen realisieren Arbeiten mit Timern und Ereignissen Teil VI Anhang A HTML-Tag-Referenz A.1 <!-- --> (Kommentar) HTML x A.2 <!DOCTYPE...> HTML x A.3 <a...> (Anker) HTML x A.4 <abbr> HTML 4.0x A.5 <acronym> HTML 4.0x A.6 <address> HTML x A.7 <applet> HTML x A.8 <area> HTML x A.9 <b> HTML x A.10 <base> HTML x A.11 <basefont> HTML x A.12 <bdo> HTML 4.0x A.13 <big> HTML x A.14 <blockquote> HTML x

14 18 Inhaltsverzeichnis A.15 <form> HTML x A.16 <frame> HTML 4.0x A.17 <frameset> HTML 4.0x A.18 <h1>... <h6> HTML x A.19 <head> HTML x A.20 <hr> HTML x A.21 <html> HTML x A.22 <i> HTML x A.23 <iframe> HTML 4.0x A.24 <img> HTML x A.25 <input> HTML x A.26 <ins> HTML 4.0x A.27 <isindex> HTML x A.28 <kbd> HTML x A.29 <label> HTML 4.0x A.30 <legend> HTML 4.0x A.31 <li> HTML x A.32 <link> HTML x A.33 <listing> HTML A.34 <map> HTML x A.35 <marquee> (Internet Explorer) A.36 <menu> HTML A.37 <meta> HTML x A.38 <noframes> HTML 4.0x A.39 <noscript> HTML 4.0x A.40 <object> HTML 4.0x A.41 <ol> HTML x A.42 <optgroup> HTML 4.0x A.43 <option> HTML x A.44 <p> HTML x A.45 <param> HTML 4.0x A.46 <plaintext> HTML A.47 <pre> HTML x A.48 <q> HTML 4.0x A.49 <s> HTML A.50 <samp> HTML x A.51 <script> HTML 4.0x A.52 <select> HTML x

15 Inhaltsverzeichnis 19 A.53 <small> HTML x A.54 <span> HTML 4.0x A.55 <strike> HTML x A.56 <strong> HTML x A.57 <style> HTML 4.0x A.58 <sub> HTML x A.59 <sup> HTML x A.60 <table> HTML x A.61 <tbody> HTML 4.0x A.62 <td> HTML x A.63 <textarea> HTML x A.64 <tfoot> HTML 4.0x A.65 <th> HTML x A.66 <thead> HTML 4.0x A.67 <title> HTML x A.68 <tr> HTML x A.69 <tt> HTML x A.70 <u> HTML x A.71 <ul> HTML x A.72 <var> HTML x B Attribute in HTML C Formateigenschaften in CSS C.1 Eigenschaften der Gruppe»font« C.1.1 font-family C.1.2 font-style C.1.3 font-variant C.1.4 font-weight C.2 font-size C.2.1 font C.3 Eigenschaften»color«und»background« C.3.1 color C.3.2 background-color C.3.3 background-image C.3.4 background-repeat C.3.5 background-attachment C.3.6 background-position C.3.7 background

16 20 Inhaltsverzeichnis C.4 Text-Eigenschaften C.4.1 word-spacing C.4.2 letter-spacing C.4.3 text-decoration C.4.4 vertical-align C.4.5 text-transform C.4.6 text-align C.4.7 text-indent C.4.8 line-height C.5 Eigenschaften für Rahmen (Box) C.5.1 margin-top C.5.2 margin-right C.5.3 margin-bottom C.5.4 margin-left C.5.5 margin C.5.6 padding-top C.5.7 padding-right C.5.8 padding-bottom C.5.9 padding-left C.5.10 padding C.5.11 border-top-width C.5.12 border-right-width C.5.13 border-bottom-width C.5.14 border-left-width C.5.15 border-width C.5.16 border-color C.5.17 border-style C.5.18 border-top C.5.19 border-right C.5.20 border-bottom C.5.21 border-left C.5.22 border C.5.23 width C.5.24 height C.5.25 float C.5.26 clear C.6 Eigenschaften zur Klassifizierung C.6.1 display C.6.2 white space C.6.3 list-style-type C.6.4 list-style-image

17 Inhaltsverzeichnis 21 C.6.5 list-style-position C.6.6 list-style C.7 Einheiten in CSS C.7.1 Abmessungen C.7.2 Prozentwerte C.7.3 Farbwerte C.7.4 URL C.8 Browser-Unterstützung von CSS-Eigenschaften C.8.1 Allgemeines C.8.2 Font-Eigenschaften C.8.3 Farben und Hintergrund C.8.4 Texteigenschaften C.8.5 Rahmeneigenschaften C.8.6 Unterstützung von Einheiten D Namen in HTML D.1 Farbnamen und Codes in HTML E Zeichenkodierung nach ISO F Ländercodes nach ISO G HTML-Seiten ins Web stellen G.1 Allgemeine Hinweise G.1.1 America Online G.1.2 CompuServe G.1.3 Microsoft-Web-Publishing-Assistent G.2 Was tun, wenn es mal nicht klappt? G.2.1 Webseite in Suchdiensten anmelden H XHTML, was ist das? H.1 XHMTL-Dokumente müssen wohlgeformt sein I WML-Tag-Referenz I.1 <?xml version="1.0"?> I.2 <!-- Kommentar--> I.3 <!DOCTYPE..> I.4 <a> I.5 <b> I.6 <big> I.7 <br/>

18 22 Inhaltsverzeichnis I.8 <card> I.9 <do> I.10 <em> I.11 <i> I.12 <img> I.13 <input> I.14 <meta> I.15 <onevent> I.16 <option> I.17 <p> I.18 <prev/> I.19 <select> I.20 <small> I.21 <strong> I.22 <table> I.23 <td> I.24 <timer> I.25 <tr> I.26 <u> I.27 <wml> Literatur Stichwortverzeichnis