I > HTML, XHTML und XML: Gemeinsamkeiten und Unterschiede 19. Internet oder World Wide Web? Homepage: Grafik und Querverweise...

Transkript

1 Inhaltsverzeichnis I > HTML, XHTML und XML: Gemeinsamkeiten und Unterschiede 19 Internet oder World Wide Web? Homepage: Grafik und Querverweise HTML, die Sprache für Webseiten Das World Wide Web Consortium (W3C) HTML, XHTML oder XML? Was sich hinter WAP verbirgt Wo bekommen Sie Ihre Homepage? Kostenloser Webspace Die eigene Domäne Von Netscape bis Internet Explorer - Eigenheiten der Browsertypen Tools und Ressourcen HTML-Layoutprogramme HTML-Quelltext-Editoren Sonstige Tools Webressourcen m Willkommen im Web: Die erste Seite in HTML 33 HTML ist einfach: Head und Body erstellen Eine Seite ganz schnell erstellen Los geht s: Kopf und Rumpf Das Umlaut-Problem Verweis auf Dokumenttyp-Definition... 38

2 Seminararbeit im Netz: Überschriften und Absätze Überschriften, Absätze und Linien Tags mit Attributen steuern Nummerierung und Aufzählungszeichen Für die Optik: Erweiterte Schrifteigenschaften Tags zur Schriftgestaltung Schriftart und -färbe ändern Leerzeilen erzeugen Lauftext a Fotogalerie im Web: Farben und Grafiken 47 Mit Scanner und Digitalkamera - Bilder aufbereiten Vor- und Nachteile der Grafikformate Welches Grafikprogramm? Scannen und Nachbearbeiten der Fotos Fotos und Grafiken ins Dokument einbinden Eine Grafik als Verweis nutzen Grafik ausrichten Breite, höhe und Alternativtext Tapete für die Homepage: Hintergrund gestalten Ein-Pixel-Grafik Farbverlaufeffekt Hintergrundmuster Tipps und Tricks zu Grafiken Sichere Webpalette Hintergrundfarbe transparent schalten Rahmen um die Grafik legen Grafik baut sich langsam auf Animationen und Banner erstellen Textbanner mit Animation Shop Animation mit StarOffice... 60

3 4. Hyperlinks: Externe und interne Querverweise 63 Querverweise zu anderen Webseiten Planung muss sein: Struktur festlegen Seiten erstellen und miteinander verlinken Verweise auf Seiten in Unterordnern Links auf externe Webseiten setzen Links auf Dateien und Newsgruppen Verweis auf eine Datei Verweis auf eine Newsgruppe Feedback ist wichtig: Der -Link Link mit Betreff Grafik-Links als Schalter Verweise innerhalb der eigenen Seite Die Tipps-und-Tricks-Sammlung Interne Anker definieren Verweise auf interne Anker Sounds und Videos in die Seiten einbinden Hyperlink auf Mediadatei Datei per <embed> einbinden Klangdateien als Hintergrundsound Tipps und Tricks zu Hyperlinks Hyperlinks umfärben Neues Browserfenster öffnen Hyperlinks mit Quickinfo Image Maps erstellen a Präsentieren Sie Ihr Büro mit Style Sheets 85 Perfektes Layout durch Formatvorlagen Ihr Büro präsentiert sich im Web! Dokument ohne Formatvorlagen Style Sheets in das Dokument einbinden Die zweite Version des Dokuments... 91

4 Klassen, Container und Inline-Style Eigene Klassen definieren Kaskadierende Formatvorlagen Listen interessant gestalten Freie Gestaltung mit div und span Inline-Styles verwenden Elemente absolut positionieren Pixelgenaue Ausrichtung mit position Reihenfolge festlegen mit z-index Dynamische Hyperlinks erstellen Pseudo-Klassen Tipps zu Hover-Links Style Sheets extern auslagern a Die Meinungsumfrage per Feedback-Formular 105 Daten abschicken: per oder CGI? Quelltext für das Formular Formularauswertung per CGI Formularauswertung per Ihr Name bitte: Texteingabefelder erstellen Einfache Texteingabefelder Attribute für Texteingabefelder Mehrzeiliges Texteingabefeld Wählen Sie: Auswahlfelder, Radioknöpfe und Kontrollkästchen Auswahlfelder Radioknöpfe Kontrollkästchen Submit und Reset Exaktes Layout mit Tabellen 113 So erstellen Sie einfache Tabellen Einfache Tabelle Tabellen Interessant gestalten Zellen verbinden

5 Richten Sie den Zellinhalt genau aus Genaue Maße mit width und height Zellinhalt ausrlchten mit allgn und vallgn Tabelle passt sich der Breite des Browserfensters an a Besser navigieren mit Frames 125 Seite in zwei Frames aufteilen Dokumente vorbereiten Das Frameset erstellen Zeilen statt Spalten Anzeige der Frames steuern Rahmen unterdrücken Rollbalken anzelgen und unterdrücken Rahmengröße kann nicht verändert werden Abstand zwischen Rahmenrand und Rahmeninhalt Ein Logo einbinden: Dreigeteiltes Fenster Ungleichmäßiges Layout: Framesets schachteln Verweise aus dem Frameset heraus * Der schnelle Einstieg: Hallo XML 143 Wohlgeformte und gültige Dokumente Unterschiede zwischen HTML und XML Gültige Dokumente Der Nutzen von XML Wohlgeformte Dokumente Definieren Sie Ihre eigenen Tags Hallo XML! Struktur Im Browser betrachten Die Bücherliste mit Dokumenttyp-Definition Das XML-Dokument Die Dokumenttyp-Definition Schlüsselwörter und Indikatoren Verweis auf die DTD setzen Validierenden Parser verwenden

6 10. XML-Praxis: Datenbank, Hyperlinks und WML 159 DTD und Tags für die Produktdatenbank Die DTD planen Attribute definieren Das XML-Dokument INamensräume und Dateninseln HTML-Datei in XML einbinden Geht auch: XML in HTML Hyperlinks mit XLink Grundaufbau einer WML-Datei Diese Tags können Sie verwenden Beispielseite in WML «CSS oder XSL? Layout für XML 171 XML-Dokumente mit CSS gestalten Verweis auf CSS-Datei setzen Display: inline oder block? XSL als XSLT im Internet Explorer Das erste Beispiel: Hallo XSL Grafik und Tabelle mit XSL Mit Inline-Styles arbeiten XSL professionell: Daten aufbereiten und sortieren Schleife bilden mit for-each Die Produktdatenbank mit XSL gestalten Datenbank als sortierte Liste ausgeben Mehr Dynamik durch JavaScript 185 Durchstarten mit JavaScript JavaScript und Java Objekte, Eigenschaften und Methoden Hallo Welt - Das erste Programm JavaScript und XML/XSL

7 JavaScript in Funktionen einbinden Skript in eine Funktion einbauen Funktionen durch Event-handler aufrufen Farbwechsler: Mehrere Funktionen kombinieren Umleitung, Passwort, Browserabfrage Hyperlinks mit JavaScript Surfer auf andere Seiten umleiten Begrüßung mit Variablen Einfache Passwortabfragen erstellen Passwortabfrage in externe Datei auslagern hartnäckige Abfrage mit der while-schleife Dreimalige Abfrage mit einer Zählschleife Passwortabfrage mit Fallunterscheidung Passwortabfrage, die schwerer zu enträtseln ist Browserabfrage und Infos zum Surfer Bequemer navigieren per Menü Pulldown-Menü mit Schaltfläche Noch bequemer navigieren mit OnChange Eigene JavaScript-Fenster programmieren Einfache Fenster erzeugen Fensterinhalt rollen und exakt positionieren Fenster schließen Fenster als Fernbedienung Besser reagieren: Cookies, Datum, Frames und Forms 235 Fehlerbehandlung in Formularen Versehentliches Reset verhindern Formularfeld auf Eingabe kontrollieren Kontrolle vor dem Abschicken Adresse auf Gültigkeit prüfen Datum und Uhrzeit anzeigen Das Datum ausgeben Arrays helfen: Wochentag und Monatsnamen Uhrzeitanzeige im Formularfeld Besuchszeit ermitteln

8 Mit JavaScript Cookies definieren Cookies schnell im Griff Surfer wiedererkennen mit Cookies Speicherort der Cookies Cookie auslesen und reagieren Namentliche Begrüßung mit Cookies Besser navigieren in Framesets Zwei Frames auf einmal ändern Drei Frames auf einmal ändern Pulldown-Menü in Frames Dokumente in Framesets ein- bzw. ausgliedern Seiten mit Pep: Animation, Dynamik und DHTML 285 Dynamische Schaltflächen Dynamik mit Inline-Skript Skript verbessern durch Vorladen der Grafiken Ein animiertes Banner erstellen Banner mit JavaScript Diashow statt Banner Lauftext erzeugen Lauftext im Formularfeld Lauftext in der Statuszeile Ebenentechnik: Objekte fliegen lassen Objekte animieren Skript für beide Browser tauglich machen Pulldown-Menü mit DHTML Style Sheets vorbereiten Das komplette Dokument Das Skript im Überblick Hallo Webmaster, bitte hochladen 309 Meta-Tags und mehr Die Site auf den Server laden 310

9 Seiten mit WS_FTP auf den Server laden Tipps zu WS_FTP Anmeldung bei Suchmaschinen Suchmaschinen im Überblick Seite bei Katalogen anmelden Seite bei Crawlern anmelden Automatische Eintragung..., Anhang 317 Internetzugang per DFÜ Tipps für erfolgreiches Webdesign Gästebuch und Besucherzähler Für Umsteiger: HTML versus XHTML Viele Freiheiten in HTML XHTML als strenge Fassung von HTML Dokumenttyp-Definition (DTD) Aufbau eines korrekten XHTML-Dokuments Weitere Unterschiede Fehler im JavaScript-Code finden Referenz 335 Dateiendungen und Zeichencodes HTML-Kurzreferenz Farben Sonderzeichen in HTML Allgemeine Tags Die wichtigsten Tags zur Textauszeichnung Font-Tag Tags zur Ausrichtung von Text Listen Formulare Sonstige Tags Lauftext (marquee)

10 Grafiken und Mediadateien einbinden Anker und Hyperlinks Tabellen Framesets CSS-Referenz: Die wichtigsten Attribute Maßeinheiten in CSS Schrifteigenschaften Texthervorhebungen Textausrichtung Listen gestalten Farben und Hintergrund Außenrand und Innenrand Rahmen Elemente absolut positionieren Pseudo-Klassen für Hyperlinks JavaScript-Kurzreferenz Skript in HTML-Code einbinden: Funktionen definieren Event-Handler Rechenoperatoren und Verkettungsoperator Vergleichsoperatoren Eingabe, Ausgabe, Bestätigung Seiten öffnen, schließen und auf Seiten verweisen JavaScript-Fenster öffnen Informationen über das screen-objekt auslesen Methoden des date-objekts Das history-objekt Schleifen Bedingungen und Fallentscheidung Zeichenketten Arrays Position in Ebenen ansprechen Sonstige Anweisungen und Schlüsselwörter Stichwortverzeichnis 365