1 HTML - Einstieg und Hintergrund 13 ) 1.1 Wer braucht eigentlich noch HTML? Hintergrundwissen zu HTML 17

Transkript

1 Inhaltsverzeichnis 1 HTML - Einstieg und Hintergrund 13 ) 1.1 Wer braucht eigentlich noch HTML? Hintergrundwissen zu HTML Die Entwicklung von HTML Der Umstieg von HTML4 zu HTML Was Sie über das Internet wissen sollten WWW-das World Wide Web Der Browser als Benutzeroberfläche Was Sie zu Webservern wissen sollten Überblick 33 ; 2 Grundbefehle zum Erstellen von HTML-Dokumenten 35 i 2.1 So funktionieren HTML-Tags Die Syntax von HTML-Tags Der Umgang mit Leerzeichen und Tabstopps Verbotene Zeichen und Symbole ü- Sonderzeichen im Text verwenden Der Aufbau von HTML-Dokumenten DOCTYPE - was haben Sie überhaupt vor? HTML - das Dokument eröffnen und beenden HEAD - der Kopf Ihres Dokuments CHARSET - den Zeichensatz definieren TITLE - Ihrem Dokument einen Titel geben BODY-ab hier gibt es Inhalte Überschriften, Abschnitte & Bereiche definieren Hl - Überschriften festlegen HGROUP - Überschriften gruppieren SECTION - Sinnabschnitte definieren ARTICLE - selbstständige Texte festlegen ASIDE - Randinformationen deklarieren NAV - Navigationselemente kennzeichnen

2 2.3.7 HEADER - Kopfbereiche anlegen FOOTER - Fußbereiche erstellen Übungen 58 r" Auszeichnungen für Absätze, Wörter & spezielle Elemente Auszeichnungen fürtextblöcke P - Absätze erzeugen BR - Zeilenumbrüche einfügen NOBR & WBR - Zeilenumbrüche steuern CITE -Titel, Sachnamen und Bezeichnungen Q & BLOCKQUOTE - Zitate hervorheben ADDRESS - Kontaktinformationen FIGURE - illustrierende Elemente deklarieren PRE - Textpassagen vorformatieren HR - Linien für die Texttrennung Kommentare in den HTML-Code einfügen Auszeichnungen für interaktive Elemente SCRIPT - Java-Skripte in Dokumente einbetten DETAILS - Zusatzinformationen per Widget MENU - Menüs für interaktive Elemente COMMAND - Befehle in Menüs erstellen CANVAS - der interaktive Multimedia-Container Auszeichnungen für Einzelelemente EM & STRONG - wichtige Wörter betonen B - Wörter hervorheben I - Stimmungen, Dialoge & Eigennamen MARK - wichtige Wörter farblich markieren SUP & SUB - Wörter hoch- oder tiefstellen SMALL - Wörter kleiner schreiben TIME - Zeit und Datum markieren ABBR - Abkürzungen markieren DFN - Definitionen deklarieren CODE, VAR, SAMP & KBD - Computertexte RUBV - Aussprache für asiatische Texte INS & DEL - Überarbeitungen markieren Übungen 92 6

3 ; 4 Aufzählungen und Listen erstellen UL - unsortierte Listen erstellen OL - nummerierte Listen erstellen Die Werte von nummerierten Listen anpassen DL - Definitionslisten erstellen Listen ineinander verschachteln Übungen Links-auf andere Webseiten verweisen So funktionieren Links - Sprungmarken und Anker Interne und externe Links erstellen Links auf externe Webseiten Interne Links erstellen Verweise zu bestimmten Textstellen erzeugen Ziele zum Öffnen von Links angeben Weitere Funktionen für Ihre Links Medium, Sprache oder Typ angeben Eine Link-Basis angeben Link-Typen - definieren Sie Ihre Links Links zu Funktionen - , FTP & Co Verschlüsselte Verbindungen Dateien per FTP herunterladen s per Klick erstellen Links auf Newsgroups Sonstige Link-Funktionen Übungen Bilder in die Webseite einbauen Die Grafikformate im Überblick So fügen Sie Bilder richtig ein Die Größe der Bilder anpassen Grafische Links erstellen 145 7

4 6.5 Image Maps - Bilder mit anklickbaren Bereichen erstellen Übungen 154 i"7 Tabellen - Inhalte übersichtlich darstellen Der Grundaufbau von Tabellen TABLE-Tabellen öffnen und schließen TR & TD - Zeilen und Spalten definieren Spaltenüberschriften hinzufügen Eine Überschrift für die Tabelle Tabellen strukturieren - Kopf-, Haupt- und Fußbereich Einen Tabellen köpf deklarieren Der Hauptteil - der Tabellenkörper Abschluss - der Fußbereich Tabellenzellen miteinander verbinden Eine Zelle über mehrere Spalten spannen Eine Zelle über mehrere Zeilen spannen Zeilen und Spalten gleichzeitig kombinieren Den Aufbau der Tabelle vorgeben Übungen Multimedia - Videos, Musik, Flash & Java Die Grundbefehle zum Einbinden von Objekten OBJECT - der Standardbefehl für Multimedia EMBED-der alternative Befehl IFRAME - universell einsetzbar Videos in die Homepage einbinden VIDEO - Filme direkt im Browser einbinden Alternative Möglichkeiten für Videos Das richtige Format für Ihre Internetvideos Arbeiten mit Audiodateien AUDIO - der Befehl speziell für Musikinhalte Audiodateien mit anderen Befehlen einbinden Audioformate für das Internet Flash-Elemente richtig verwenden 217 8

5 8.5 Java-Applets in der Homepage nutzen ActiveX in der Webseite nutzen Geodäten, Drag & Drop, Offline-Arbeit & Co Übungen Formulare erstellen und verarbeiten Das Grundgerüst für Formulare erstellen Hintergrund - so funktionieren Formulare Ein neues Formular definieren Einfache Eingabefelder erstellen Schaltflächen für die Verarbeitung Bereiche und Gruppen definieren Eingabefelder für Text erstellen Einfache Textfelder erzeugen Feldgröße und Eingabelänge bestimmen Beispiele oder Hilfetexte mit angeben Werte vorgeben, sperren oder erzwingen Textbereiche für längere Eingaben erzeugen Spezielle Input-Typen für das Eingabefeld Suchbegriffe deklarieren Adressen überprüfen Felder für URLs - Internetadressen Felder für die Telefonnummer Felder für Nummern und Zahlen erstellen :6 Das Datum mit speziellen Feldern darstellen Eingabefelder für die Uhrzeit Wertebereiche - Maximum, Minimum und Schritte Passwörter im Browser ausblenden Einen Farbwähler erstellen Unsichtbare Informationen mitschicken Dateien per Formular hochladen Buttons, Checkboxen, Listen und Gruppen erstellen Radio-Buttons - Auswahlknöpfe erstellen Checkboxen - anklickbare Listen hinzufügen Ausklappbare Auswahllisten erstellen 280 9

6 9.4.4 Lange Auswahllisten mit Gruppen strukturieren Datenlisten - unsichtbare Hilfsdaten anbieten Weitere Formularelemente BUTTON - beliebige Schaltknöpfe erstellen KEYGEN - der Schlüsselgenerator PROGRESS-den Fortschritt anzeigen METER - Füllbalken erzeugen PATTERN - Zahlenfolgen überprüfen OUTPUT - Ergebnisse deklarieren Kleiner Exkurs: CGIs mit Perl und PHP Übungen Metatags - Zusatzinformationen für die Welt So funktionieren Metatags Hintergrundinformationen zum Dokument Erstellungsdatum, Events oder Ablaufdatum Suchmaschinen einladen oder abweisen Sonstige Meta-Informationen Übungen 313 I 11 Exkurs HTML4: Framesets in Webseiten Das Frame-Konzept Die Grundbefehle für Framesets Die Frames mit Inhalten füllen 320 i 12 CSS - erste Schritte in der Webformatierung 12.1 Einstieg - so funktioniert CSS STYLE - CSS-Formatierungen einleiten Die Syntax für CSS-Formatierungen Farben mit CSS bestimmen 12.2 CSS richtig in HTML einbinden Option 1 - Elemente direkt formatieren Option 2 - CSS im Header deklarieren

7 Option 3 - CSS in eine externe Datei auslagern HTML-Elemente mit CSS formatieren Body-Bereich - das Layout der Seite festlegen Schriften und Texte beliebig formatieren Den Text und andere Elemente ausrichten Den äußeren Abstand einstellen Den inneren Abstand einstellen Objekte ganz exakt ausrichten Hintergrund, Rahmen und Bilder Listen definieren und formatieren Tabellen mit CSS formatieren Links, MouseOver und Zeiger einstellen Mit eigenen Elementen und Bereichen arbeiten DIV & SPAN - Bereiche definieren CLASS und ID - Elemente identifizieren Eigene CSS-Klassen definieren Elemente mit selbst definierten Klassen formatieren Bereiche mit selbst definierten Klassen formatieren Bedingungen bei der Zuweisung von Klassen Übungen 377 A Lösungen zu den Übungen 379 i B Kurzreferenz HTML 403 C Kurzreferenz CSS 411 C.1 Schriftformatierung 411 C.2 Rahmen 412 C.3 Hintergrund 412 C.4 Listen definieren 413 C.5 Tabellen 413 C.6 Innenabstand 413 C.7 Außenabstand 414 C.8 Ausrichtung Text

8 C.9 Ausrichtung von Elementen 414 C.10 Mauszeiger 416 C.11 Größenangaben 416 C.12 Relative Größen 416 [D Sonderzeichen 417 i D.1 ASCII-Zeichensatz 417 D.2 HTML-eigene Zeichen 417 D.3 Deutsche Sonderzeichen 418 D.4 Währung & Wirtschaft 418 D.5 Interpunktion & Grammatik 418 D.6 Mathematische Zeichen 420 D.7 Griechische Buchstaben 422 D.8 Sonderzeichen anderer Sprachen 423 D.9 Pfeile und Linien 425 D.10 Diverse Symbole 426 [T~MIME-Types 427 j F Farben in HTML 433 i G Links und Programme 439! Stichwortverzeichnis 441 i 12