Kapitel - HTML Lernen Und Die Eigene Homepage Erstellen

1
Kapitel: HTML lernen und die eigene Homepage erstellen

Inhalt
HTML lernen und die eigene Homepage erstellen................................................................................ 16
Ziel des HTML-Kurses ist ................................................................................................................... 16
Fragen und Hilfe zu HTML und CSS? - kein Problem!........................................................................ 17
Vielen Dank für die Blumen............................................................................................................... 17
Und nun viel Spaß beim HTML lernen............................................................................................... 18
Vorwort ................................................................................................................................................. 19
Einsteiger............................................................................................................................................... 19
Warum Handarbeit?.............................................................................................................................. 19
Vorteile .............................................................................................................................................. 19
Nachteile ........................................................................................................................................... 19
erste HTML-Seite................................................................................................................................... 20
sehr einfach HTML-Seite ................................................................................................................... 20
Schockiert wie einfach HTML Seiten sein können?........................................................................... 21
HTML-Grundlagen ................................................................................................................................. 21
Was ist HTML?................................................................................................................................... 21
HTML-TAG ......................................................................................................................................... 21
Anfangs- und End-TAGs..................................................................................................................... 22
Absätze erstellen ................................................................................................................................... 22
Hinweis .......................................................................................................................................... 23
Übung ................................................................................................................................................ 23

Texte formatieren - Überschrift ............................................................................................................ 24
Überschriften..................................................................................................................................... 24
Hinweis .......................................................................................................................................... 25
Übung: Überschriften und Absätze ............................................................................................... 25
html Editor............................................................................................................................................. 26
HTML-Editor Scripty .......................................................................................................................... 26
HTML-Editor Phase 5......................................................................................................................... 26
Editor Scriptly von Webocton ............................................................................................................... 27
Präsentation von Scriptly als Flash-Film............................................................................................ 27
Scriptly Schritt für Schritt .................................................................................................................. 27
HTML-Grundgerüst automatisch....................................................................................................... 31
Mögliche HTML-Attribute vorschlagen lassen .................................................................................. 34
2
WYSIWYG auch möglich .................................................................................................................... 35
Automatische Ersetzungen ............................................................................................................... 35
Download .......................................................................................................................................... 36
HTML Editor Phase 5 von Ulli Meybohm............................................................................................... 37
Bildschirmaufbau............................................................................................................................... 37
Bedienung.......................................................................................................................................... 38
weitergehende Einführung............................................................................................................ 39
Für Fortgeschrittene - Shortcuts zum hmtl-editor ............................................................................ 40
Grundgerüst einer HTML-Seite - DOCTYPE-Definition .......................................................................... 41
DOCTYPE-Definition - erste Zeile jeder Website ............................................................................... 41
Bereich html ...................................................................................................................................... 41
head-Bereich ..................................................................................................................................... 41
body-Bereich ..................................................................................................................................... 42
Texte formatieren - fett, kursiv und Co................................................................................................. 42
Fett - hervorgehoben ........................................................................................................................ 42
physisch-visuellen VERSUS semantisch-logische HTML-TAGs........................................................... 43
kursiv - schräge Sache ....................................................................................................................... 43
semantisch-logische für krusiv - em.............................................................................................. 43
Schachteln von HTML-TAGs .................................................................................................................. 44
TAGs verschachtelt............................................................................................................................ 44
Hinweis: ......................................................................................................................................... 44

Übung ................................................................................................................................................ 44
Unterstreichung von Text...................................................................................................................... 45
unterstrichen - (nicht einsetzen!)...................................................................................................... 45
Texte formatieren - hoch-tief und größer-kleiner................................................................................. 45
hochgestellt und tiefgestellt.............................................................................................................. 45
Text größer und kleiner..................................................................................................................... 46
Übung: ........................................................................................................................................... 46
HTML-Seite validieren ........................................................................................................................... 47
Add-ons zum Valdieren von HTML-Code .......................................................................................... 47
mit Scriptly validieren........................................................................................................................ 47
Sauberer HTML-Code ............................................................................................................................ 48
Definitionsliste....................................................................................................................................... 49
3
Aufgabe ............................................................................................................................................. 49
Listen, Aufzählungen ............................................................................................................................. 50
Listen mit Spiegelstrichen ................................................................................................................. 50
Listen mit automatischer Nummerierung......................................................................................... 51
Aufgabe: ........................................................................................................................................ 51
Aufgabe: ........................................................................................................................................ 51
Attribute bei HTML-TAGs ...................................................................................................................... 52
Art der Nummerierung bestimmen................................................................................................... 52
Start der Nummerierung festlegen ................................................................................................... 52
Aufgabe ......................................................................................................................................... 53
Umbrüche erzwingen ............................................................................................................................ 53
Trennlinien und Attribute von TAGs ..................................................................................................... 54
Trennlinien ........................................................................................................................................ 54
Attribute ................................................................................................................................................ 54
Größe eines Elementes ..................................................................................................................... 54
Anmerkung: ................................................................................................................................... 55
Aufbau Attribute ........................................................................................................................... 55
Ausrichtung - rechts, links, mittig...................................................................................................... 55
Breite eines Elementes...................................................................................................................... 56
Relativität !!! - ganz wichtig für alles weitere ................................................................................... 56
Tipp:............................................................................................................................................... 56

Links (Hyperlinks) in HTML erstellen ..................................................................................................... 57
Dateinamen und die Benennung .......................................................................................................... 57
Benennung der Startdatei ................................................................................................................. 57
Geschichtliches:............................................................................................................................. 57
Aufbau der Datei-Namen .................................................................................................................. 58
Aufgabe: Dateinamen für Website festlegen.................................................................................... 58
interne Links .......................................................................................................................................... 59
externe Links ......................................................................................................................................... 60
Links auf andere Seiten - externe Links............................................................................................. 60
Aufgabe ......................................................................................................................................... 60
Tipp................................................................................................................................................ 61
Tipp................................................................................................................................................ 61
4
Steuerung erstellen ............................................................................................................................... 61
Textlink .............................................................................................................................................. 61
Über mich .............................................................................................................................................. 62
Tipp................................................................................................................................................ 62
Aufgabe ......................................................................................................................................... 62
Verzeichnisse......................................................................................................................................... 63
Stolperfallen Slash "/" und Backslash ""............................................................................................ 63
Tipps zu Unterverzeichnisse:............................................................................................................. 63
Grafiken in Homepages integrieren - wie, was, wo, wie groß .............................................................. 63
Welches Format soll ich verwenden? ............................................................................................... 65
Dateiformat GIF............................................................................................................................. 66
Dateiformat JPG ............................................................................................................................ 66
Dateiformat PNG ........................................................................................................................... 66
Animation von Bildern....................................................................................................................... 67
Übertragungsdauer allgemein........................................................................................................... 67
Copyright von Bildern........................................................................................................................ 68
Tipp: Links mit Grafiken..................................................................................................................... 68
Bildmaterial ........................................................................................................................................... 69
Bilder ausrichten ................................................................................................................................... 70
Farben - die Welt ist bunt...................................................................................................................... 72
HTML-Tags für Farben ....................................................................................................................... 72

Farbenmischen .................................................................................................................................. 73
Welche Farben stehen zur Verfügung? ............................................................................................. 73
Die andere Art, Farben anzugeben ................................................................................................... 74
Farbpalette ........................................................................................................................................ 74
Tipp:............................................................................................................................................... 75
Tabellen - Grundlagen ........................................................................................................................... 76
Wie kam das Design auf Homepages ................................................................................................ 76
Woraus besteht ein Tabellenaufbau? ............................................................................................... 76
Tipp: Fehler bei Tabellen vermeiden:............................................................................................ 77
Tabellenkopf und Fuß............................................................................................................................ 78
Aufbau der Befehle............................................................................................................................ 78
Tabellen-Zellen miteinander verbinden................................................................................................ 79
5
Attribute bei Tabellen ........................................................................................................................... 80
Weitere Attribute bei Tabellen ......................................................................................................... 80
Breite und Höhe der Tabelle ......................................................................................................... 80
Farbe von Tabellenzellen............................................................................................................... 80
Ausrichtung innerhalb der Zellen .................................................................................................. 81
Seiten online stellen - Website publizieren........................................................................................... 82
per Scriptly ............................................................................................................................................ 83
Filezilla ................................................................................................................................................... 86
Download .......................................................................................................................................... 86
Dateien übertragen ........................................................................................................................... 86
Projekte einrichten............................................................................................................................ 88
Online stellen auf dem Uni-Server ........................................................................................................ 90
Server-Platz für Uni-Angehörige........................................................................................................ 90
Online stellen mit dem Netscape Composer..................................................................................... 90
Übertragen von Dateien per WS-FTP auf einen Server......................................................................... 92
HTML-Tags im Überblick ....................................................................................................................... 97
Inhalt: ................................................................................................................................................ 97
Cascade Style Sheets (CSS) .................................................................................................................. 103
Entstehung von CSS......................................................................................................................... 103
Vor- und Nachteile von CSS............................................................................................................. 103
Schneller, schöner Formatieren mit CSS ......................................................................................... 103

Trennung Inhalt und Design durch CSS ............................................................................................... 104
Aufbau von CSS Befehlen .................................................................................................................... 105
Grundlagen des CSS Konzept .......................................................................................................... 105
Aufbau ............................................................................................................................................. 105
Eigenschaften und Werte................................................................................................................ 105
Begriffe um CSS ................................................................................................................................... 105
Vererbung........................................................................................................................................ 105
Cascade: .......................................................................................................................................... 105
Stylesheets in HTML einbinden ........................................................................................................... 106
Variante 1: Befehl direkt im Quellcode ........................................................................................... 106
Natürlich können die Befehle auch kombiniert werden. ............................................................ 106
Variante 2: Am Anfang der HTML-Datei.......................................................................................... 106
6
Variante 3: Auslagern von CSS-Befehlen......................................................................................... 107
CSS-Anwendung einfach gemacht....................................................................................................... 108
Farbe und Schriftartgestaltung über CSS ........................................................................................ 108
Weitere Definitionen, die sich auf Schriften auswirken.................................................................. 110
Aufgabe: ...................................................................................................................................... 110
Schrift und Abstände....................................................................................................................... 111
Aufgabe ....................................................................................................................................... 111
Farbe: Vordergrund- und Hintergrundfarbe ................................................................................... 112
Aufgabe: ...................................................................................................................................... 112
Rahmen ........................................................................................................................................... 113
Aufgabe: Design für Rahmen für ................................................................................................. 113
Ausrichtung von Elementen ............................................................................................................ 114
Aufgabe: ...................................................................................................................................... 114
Grafik und Bilder.............................................................................................................................. 115
Beispiel: ....................................................................................................................................... 115
spezielleres ...................................................................................................................................... 116
Kurzschreibweisen........................................................................................................................... 116
Unter-, Durchstreichungen und Co ................................................................................................. 116
Box-Modell bei CSS.............................................................................................................................. 118
Wie sieht der Aufbau der "Box" aus?.............................................................................................. 118
Beispiele für die Anwendung des Box-Modells................................................................................... 119

Randgestaltung und Möglichkeiten ................................................................................................ 121
unterschiedliche Definitionen der Abstände .................................................................................. 122
Beim Außenabstand (margin) ..................................................................................................... 122
Beim Innenabstand (padding) ..................................................................................................... 122
Angaben verkürzen ......................................................................................................................... 122
CLASS und ID - Bezeichner für CSS-Elemente...................................................................................... 123
Sinn und Zweck von CLASS .............................................................................................................. 123
Sinn und Zweck von ID .................................................................................................................... 124
DIV und SPANs..................................................................................................................................... 125
DIV - Einsatz..................................................................................................................................... 125
SPAN - Anwendung (nicht SPAM!) .................................................................................................. 125
Mischen von DIVs und SPANs.......................................................................................................... 126
7
Design per CSS - FLOAT ....................................................................................................................... 126
Website-Layout mit Float, DIVs, CLASS und ID................................................................................ 127
sauberes 2 Spalten Layout .............................................................................................................. 128
CSS 2 Spalten Layout - Inhaltsbereich passt sich vorhandener Breite an ....................................... 129
CSS 2 Spalten Layout - Inhaltsbereich und Steuerung passen sich vorhandener Breite an............ 129
Seitenbreite begrenzen ....................................................................................................................... 130
CSS 2 Spalten Layout mit fixierter Breite ........................................................................................ 130
CSS-Layout nun Mittig ......................................................................................................................... 131
Mittige Ausrichtung des Layouts..................................................................................................... 131
Kopfzeile integrieren ........................................................................................................................... 133
Kopfbereich in CSS-Layout .............................................................................................................. 133
Fußzeile integrieren............................................................................................................................. 135
Fußzeile in CSS-Layout..................................................................................................................... 135
dreispaltiges Layout ............................................................................................................................ 137
3-spaltiges Layout in CSS ................................................................................................................. 137
Steuerung per CSS ............................................................................................................................... 139
Steuerung vertikal ........................................................................................................................... 139
Design über externe CSS-Datei.................................................................................................... 140
Steuerung horziontal....................................................................................................................... 141
Steuerung mit Feedback auf Benutzer ................................................................................. 143
Ergebniss der Pseudoklassen ............................................................................................... 144

Block- u. Inline-Elemente .................................................................................................................... 144
Steuerung horizontal....................................................................................................................... 145
Elemente ausblenden...................................................................................................................... 146
CSS - Bilder und Hintergrundbilder ..................................................................................................... 147
Hintergrundbilder - wie das Bild in den Hintergrund kommt ......................................................... 148
Hingrundbild komplett auf 100% .................................................................................................... 148
Hintergrund für andere Elemente................................................................................................... 149
CSS Definitionen - Übersicht CSS Befehle ........................................................................................... 149
CSS Tipps und Tricks ............................................................................................................................ 151
Abstand nach Überschriften etc...................................................................................................... 151
Bilderrahmen mit Punkten bei Mauskontakt.................................................................................. 151
Anfangsbuchstaben hervorgehoben ............................................................................................... 151
8
Text umfließt Bild ............................................................................................................................ 152
Anbei ein paar hübsche Showeffekte für den IE ............................................................................. 152
CSS-Layout-Generator ......................................................................................................................... 153
Vorstellung Projekt: erste selbsterstellte Website ............................................................................. 154
Vorstellung Projekte: erste selbst erstellte Websites ......................................................................... 154
Layout über CSS............................................................................................................................... 154
Layout über Tabelle - old school ..................................................................................................... 154
CSS Design - Tabellenloses Design....................................................................................................... 155
Schlanke Websites durch CSS-Design.............................................................................................. 155
die 4 Bereiche der Website ............................................................................................................. 155
sonstige Bilder ................................................................................................................................. 155
Beispielwebsite mit HTML und CSS ..................................................................................................... 156
Inhalt über HTML und CSS-Design................................................................................................... 156
1. Schritt – das HTML-Grundgerüst ................................................................................................. 156
2. Head-Bereich ............................................................................................................................... 157
3. CSS-Definitionen.......................................................................................................................... 158
4. der Inhaltsbereich ....................................................................................................................... 159
Hintergrundgrafik mit den Säulen................................................................................................... 161
Steuerung – welche Hintergrundfarbe............................................................................................ 162
Schattenwurf ................................................................................................................................... 163
Gestaltung Schrift............................................................................................................................ 164

Schrift im Kopfbereich..................................................................................................................... 165
Abstand innerhalb der Steuerung ................................................................................................... 166
Abstände innerhalb des Inhaltsbereichs ......................................................................................... 167
Websiten ohne Bikini-Streifen ........................................................................................................ 168
Perfekt machen – CSS-Definitionen auslagern................................................................................ 171
Übung: Ergänzung Fußzeile ......................................................................................................... 171
Layout über Tabellen - old school ....................................................................................................... 172
Projekt: Seiten erstellen ...................................................................................................................... 172
Projekt: Grunddesign........................................................................................................................... 174
Die einzelnen Elemente des table-TAGs ..................................................................................... 175
Projekt: Steuerung erstellen ............................................................................................................... 176
Projekt: Bilder aufnehmen .................................................................................................................. 177
9
Projekt: Text drauf............................................................................................................................... 181
Projekt: Design der Schrift................................................................................................................... 183
Design definieren über CSS ............................................................................................................. 183
Projekt: Domainnamen ....................................................................................................................... 185
Projekt: Online stellen......................................................................................................................... 185
Vorwort für Fortgeschrittene .............................................................................................................. 186
Programmpunkte für Fortgeschrittenen......................................................................................... 186
Farbtheorie.......................................................................................................................................... 187
Nutzwert - aus dem Farbkreis zur Farbzusammenstellung............................................................. 188
Analoge Farben ........................................................................................................................... 188
Komplementär-Farben ................................................................................................................ 188
Bilder-Ausschnitt anpassen & Größe verändern................................................................................. 189
Bilder-Ausschnitt anpassen (Bilder beschneiden)........................................................................... 189
Größe verändern ............................................................................................................................. 192
Histogramm und Tonwertkorrektur - Bilder optimieren .................................................................... 194
Bedeutung Histogramm .................................................................................................................. 194
Tonwertkorrektur............................................................................................................................ 196
Besseres Ausgangsmaterial............................................................................................................. 197
Tonwertkorrektur per Bildbearbeitung........................................................................................... 197

Schatten & Co...................................................................................................................................... 202
Bilder nachbearbeiten......................................................................................................................... 203
Bilderauswahl .................................................................................................................................. 203
Freistellen eines Bildausschnittes ................................................................................................... 204
Schlagschatten erzeugen................................................................................................................. 204
Mit Corel Draw 8.0 .............................................................................................................................. 205
Schlagschatten erzeugen............................................................................................................. 206
Bildgröße herrichten ....................................................................................................................... 209
fremde Bilder für die eigene Website ................................................................................................. 211
Organisieren von Bildern................................................................................................................. 211
Formulare ............................................................................................................................................ 212
die Elemente zur Formulargestaltung................................................................................................. 213
Texteingaben................................................................................................................................... 213
Auswahl-Kästchen ........................................................................................................................... 214
1
0
Schaltflächen ................................................................................................................................... 214
Grundlegendes ................................................................................................................................ 214
Frames - aus dem Rahmen fallen ........................................................................................................ 215
Was ist ein Frame ? ......................................................................................................................... 215
Definieren von Frames .................................................................................................................... 215
Eigenschaften von Frames .............................................................................................................. 216
Verweise im Frameset..................................................................................................................... 217
Schachteln von Frames.................................................................................................................... 218
Gefahren bei Frames ....................................................................................................................... 219
Wie kann man diese Nachteile ausgleichen? .............................................................................. 219
iFrames ................................................................................................................................................ 219
Attribute zu iFrame ......................................................................................................................... 220
Aufgabe: interaktiven Terminkalender einbinden .......................................................................... 220
von mir bevorzugte Software.............................................................................................................. 221
JavaScript............................................................................................................................................. 222
Auslagern von Scripten.................................................................................................................... 226
Tipps & Tricks .................................................................................................................................. 226
Tipps & Tricks - Hinweis, wenn JavaScript beim Surfer deaktiviert ist............................................ 227
Tipps & Tricks - Ausdruck ................................................................................................................ 227

Weiterführende Links...................................................................................................................... 228
Metatags.............................................................................................................................................. 228
Kurze Erklärung zu den einzelnen Metatags: .................................................................................. 229
Was bewirken die Metatag-Einträge bei Suchmaschinen?................................................................. 230
bei Suchmaschinen anmelden............................................................................................................. 232
robots.txt - was es mit dieser ominösen Datei auf sich hat ................................................................ 233
zu beachten ..................................................................................................................................... 234
Domainnamen..................................................................................................................................... 234
Domain-Namen reservieren............................................................................................................ 235
Auswahl von Provider zum Kaufen einer ............................................................................................ 235
Domain und Webspace ....................................................................................................................... 236
kostenloser Webspace und seine Kosten............................................................................................ 236
Testkandidaten................................................................................................................................ 237
kostenfreier Webspace Anbieter: Yahoo! GeoCities....................................................................... 237
1
1
kostenfreier Webspace Anbieter: Beepworld................................................................................. 240
kostenfreier Webspace Anbieter: Tripod........................................................................................ 240
kostenfreier Webspace Anbieter: Funpic........................................................................................ 243
Fazit zur Testaktion von Anbieter kostenfreiem Webspace (Freespace)........................................ 245
Recht kann das Gegenteil von Links sein! ........................................................................................... 246
Inhalte.......................................................................................................................................... 246
Bilder ........................................................................................................................................... 246
Domainnamen & Recht ............................................................................................................... 246
Bücher zum Thema.......................................................................................................................... 246
Geld verdienen mit der eigenen Homepage ....................................................................................... 247
Partnerprogramme (engl. Affiliate Programs) ................................................................................ 247
Konditionsmodelle - verschiedene Aktionen, um durch Ihren Besucher Geld zu verdienen ......... 248
Pay per Klick ................................................................................................................................ 248
Pay per Lead ................................................................................................................................ 248
Pay per Sale ..................................................................................................................................... 248
Geld eintreiben - eigenen Content verkaufen................................................................................. 249
Tipps zum Geld verdienen mit der eigenen Homepage.................................................................. 249
Tipps & Tricks ...................................................................................................................................... 251
Größenüberprüfung durch IE ganz einfach realisierbar.................................................................. 251

Bilder ausschalten - Design überprüfen (IE).................................................................................... 251
Weitere nützliche Tools in diesem Paket .................................................................................... 252
Design bis an den Rand ................................................................................................................... 252
Im Vollbildmodus Präsentieren....................................................................................................... 252
Offline Präsentieren mit IE .......................................................................................................... 253
Typografie im Internet ........................................................................................................................ 253
Trennstrich, Gedankenstrich, Geviertstrich .................................................................................... 254
Trennstrich - ................................................................................................................................ 254
Gedankenstrich –......................................................................................................................... 254
Geviertstrich — ........................................................................................................................... 254
Korrekte Gänsefüßchen (An- und Abführungszeichen) .................................................................. 254
Zahlen richtig gesetzt ...................................................................................................................... 255
Bookmarklet, Favelet .......................................................................................................................... 255
Folgende Bookmarklets sind für Website-Ersteller interessant...................................................... 256
1
2
Forum .................................................................................................................................................. 256
Diverses ............................................................................................................................................... 256
Inhalt Einheit "Netscape Composer"................................................................................................... 256
HTML-WYSIWYG-Werkzeug Netscape Composer............................................................................... 257
Programm starten ....................................................................................................................... 257
Abspeichern der Homepage........................................................................................................ 258
HTML-Code ansehen ................................................................................................................... 259
Texteingabe ................................................................................................................................. 260
Schriftformatierung ..................................................................................................................... 261
Bilder einbauen ........................................................................................................................... 264
Hintergrundbild (Textur) einbauen ............................................................................................. 266
E-Mail-Adresse einbauen ............................................................................................................ 267
Links hinzufügen.......................................................................................................................... 268
Navigationsleiste erstellen .......................................................................................................... 269
Software .............................................................................................................................................. 270
Internet-Browser............................................................................................................................. 270
FTP-Programme............................................................................................................................... 270
HTML-Editoren ................................................................................................................................ 271
Editor Scriptly von Webocton ..................................................................................................... 271

HTML Editor Phase 5 ................................................................................................................... 271
Zum Bilder bearbeiten:................................................................................................................ 271
Vermessen und Abstände: .......................................................................................................... 271
Farben:......................................................................................................................................... 272
Kleine WYSIWYG-Editoren........................................................................................................... 272
Professionielle WYSIWYG-Editoren............................................................................................. 272
Backup der Website ........................................................................................................................ 272
Vorteile Firefox für Webentwickler..................................................................................................... 273
Add-ons - Firefox tiefer gelegt und aufgebohrt .............................................................................. 274
IE Developer Toolbar........................................................................................................................... 274
Einblenden der DIV-Elemente ......................................................................................................... 275
Ändern der Fenstergröße ................................................................................................................ 276
Vermessen von Elementen.............................................................................................................. 276
Kontrolle der Website auf Fehler .................................................................................................... 277
1
3
Rund ums Internet............................................................................................................................... 278
PDF-Software................................................................................................................................... 278
Bücher ................................................................................................................................................. 278
eBook HTML-Seminar.de................................................................................................................. 278
Billig an Bücher zum Thema ............................................................................................................ 278
Buchtips:...................................................................................................................................... 278
Suche nach Büchern z.B. zum Thema HTML: .................................................................................. 280
Interessante Linksammlung zum Thema............................................................................................. 281
Klasse Seite mit guten Tipps........................................................................................................ 281
HTML-Onlinebuch: SELFHTML:.................................................................................................... 281
Guter Artikel von der Zeitschrift ct.............................................................................................. 281
Referenz Sonderzeichen...................................................................................................................... 282
maskierte Zeichen ........................................................................................................................... 282
maskierte Zeichen ............................................................................................................................... 282
Maßeinheiten ...................................................................................................................................... 285
absolute Maßeinheiten ................................................................................................................... 285
absolute/relative Maßeinheiten ..................................................................................................... 285
px - pixels..................................................................................................................................... 285
relative Maßeinheiten..................................................................................................................... 286

em................................................................................................................................................ 286
andere relative Maßeinheiten: % und ex .................................................................................... 286
Abk.; Computerchinesisch; Erklärungen ............................................................................................. 287
Applet .......................................................................................................................................... 287
Browser ....................................................................................................................................... 287
CSS ............................................................................................................................................... 287
DOCTYPE...................................................................................................................................... 287
FAQ .............................................................................................................................................. 287
ftp ................................................................................................................................................ 287
Homepage ................................................................................................................................... 288
KK-Antrag..................................................................................................................................... 288
Link .............................................................................................................................................. 288
Lorem Ipsum................................................................................................................................ 288
IP-Adresse.................................................................................................................................... 288
1
4
PHP .............................................................................................................................................. 288
Pfadangabe.................................................................................................................................. 289
Relaunch ...................................................................................................................................... 289
Site............................................................................................................................................... 289
Tutorial ........................................................................................................................................ 289
URL .............................................................................................................................................. 289
WebDAV .......................................................................................................................................... 289
xHTML.......................................................................................................................................... 290
headerinformationen-404-401-301 .................................................................................................... 290
Probleme bei merkwürdigen/falschen Zeichen meistens im Firefox.............................................. 292
Favicons - Icon für Lesezeichenverwaltung und Website ................................................................... 292
favicons erstellen ............................................................................................................................ 292
Fehler in Logfile vermeiden............................................................................................................. 293
Websites mit Unterverzeichnissen.................................................................................................. 293
Entweder Sie haben das HTML-Tutorial ............................................................................................. 294
Helfen Sie mit ... - Ihre Empfehlung freut uns besonders ............................................................... 294
Social-Bookmark.............................................................................................................................. 294
Sie möchten Geld spenden ............................................................................................................. 294
Sie helfen durch aktive Teilnahme im Forum.................................................................................. 294

Impressum........................................................................................................................................... 295
Impressum gemäß §6 Teledienstegesetz (TDG).............................................................................. 295
Bildquellen....................................................................................................................................... 295
1
5
kurz & gut: Um was geht es? Sie können hier HTML lernen - die Seiten bieten die Inhalte
und das Forum gibt Antworten auf individuelle Fragen.
Nach dem Kurs können Sie eine eigene Homepage erstellen.
HTML lernen und die eigene Homepage

erstellen
... ein Wunsch und bald Wirklichkeit - herzlich willkommen zum HTML-Seminar, das für
Erfolgsorientierte konzipiert ist. Dieser HTML-Kurs ist sowohl für Einsteiger und HTML-
Neulinge als auch für Fortgeschrittene.
Der Name ist Programm - durch gezielte Beschränkung auf das Wesentliche können Sie
HTML lernen und die Internetsites erfolgreich und mit dem nötigen Hintergrundwissen
erstellen. Für die Profi-Liga sind weiterführende Hinweise und Anregungen mit
aufgenommen.
Ziel des HTML-Kurses ist ...

Ziel des HTML-Kurses ist, dass Sie
während dem Lernen Spass haben und ...
• HTML lernen und CSS erstellen

können (das Beispiel rechts können
Sie nach dem Kurs selber erstellen)
• eine Einführung in HTML,

• die eigene Homepage erstellen
• Überblick über Möglichkeiten und
Werkzeuge
• Publizieren der eigenen Website
• und vieles mehr - lassen Sie sich
überraschen
Das Wissen soll praxisbezogen durch Erstellen einer eigenen Website und Publizieren im
Internet umgesetzt werden. Der Inhalt des Kurses wird laufend erweitert und durch Ihre
Anregungen Bestehendes optimiert.
Zum gleich ausprobieren von HTML-Tags gibt es einen kleinen Online-HTML-Editor, in

dem HTML-Tags eingegeben und sofort die Ausgabe im Browser angesehen werden kann.
Für den kleinen Online-HTML-Editor muss Java-Script aktiviert sein. Am besten, das Fenster
immer offen lassen und damit spielen.
1
6
Viel Spaß beim Stöbern und HTML Lernen. Ich hoffe, dass diese Einführung, die sich nicht
als Konkurrenz zu bekannten Standardwerken sieht, sondern als praktische Hinführung zu
HTML Ihnen Spaß macht und Sie mit den neuen Kenntnissen Erfolg haben. HTML und CSS
ist nicht schwer!
Empfehlenswert ist, die Reihenfolge des Kurses (Punkte links in der Steuerung) einzuhalten,
da diese aufeinander aufbauen und abgestimmt sind. Und nicht vergessen - ohne Feed-back
gibt es keine Verbesserung!
Viel Erfolg und vor allem Spaß beim Lernen von HTML.
der neue Firefox 2.0 ist da

Der Neue ist da, mit vielen Verbesserungen im Detail und Vorteile für Website-Entwickler.
Ein besonderer Vorteil ist ist die selektive Quellcode-Anzeige. Markieren Sie einen Teil einer
Seite erhalten Sie dazu den HTML-Quellcode angezeigt. Ein Beispiel finden Sie unter
[...Vorteile Firefox]
Fragen und Hilfe zu HTML und CSS?

- kein Problem!
Für Fragen, Anregungen und Austausch es gibt das Forum - administriert von Liza (Nick:
Lajya), Foster und pulse180
Dort sind Sie gut aufgehoben - nicht zögern, Fragen zu stellen und auch die der anderen
Teilnehmer zu beantworten. Dabei lernt man eine Menge und kommt vielleicht auf noch
bessere Ideen.
Lassen Sie z.B. ihre erstellte Homepage von anderen begutachten und holen Sie sich Tipps
und Ratschläge.
Kapitel: der neue Firefox 2.0 ist da
zum Diskussionsforum
Vielen Dank für die Blumen

Viele Leute habe unsere Seite empfohlen - einen herzlichen Dank dafür. Wenn Sie unsere
Seite empfehlen möchten und html-seminar.de unterstützen wollen, freuen wir uns über Ihren
Link auf http://www.html-seminar.de
Alle Links auf den Seiten sind als Empfehlung zu werten. Verlinkte Seiten sollen
weiterführende Informationen zu bestimmten Themen anzubieten und empfehlenswerte
1
7
Artikel zugänglich machen. Es kann allerdings passieren, dass die verlinkten Seiten sich
ändern. Wenn Sie also das Gefühl haben, dass ein Link auf meiner Seite nicht mehr stimmt,
dann geben Sie mir bitte Bescheid, damit ich diesen Link prüfen und ggf. entfernen kann.
Und nun viel Spaß beim HTML lernen

wünscht das Team von HTML-Seminar.de
Kapitel: der neue Firefox 2.0 ist da
1
8
Vorwort
Jeder Einstieg in ein neues Thema ist ein Abenteuer.
Hier bekommen Sie einen schnellen Zugang zu HTML und wie Sie Ihre eigene Internetseite
erstellen können.
Im Kapitel "Einsteiger" werden die Grundlagen vermittelt, welche HTML-Befehle wirklich

benötigt werden. Der Bereich "Projekt" zeigt, wie eine Website erstellt werden kann und bei
"Fortgeschrittene" folgend Feinheiten und Weiterführendes.
Den Kurs können Sie entweder Schritt für Schritt durchgehen oder nach belieben springen
und ansehen, was Sie gerade benötigen.
Viel Spaß und Erfolg wünscht Ihnen das Team von HTML-Seminar.
Einsteiger
Und nun geht es los. Für den Beginn kommen die Grundlagen - dabei wird teilweise mit
Vereinfachungen gearbeitet. Wichtig ist mir, dass Sie schnell einen Erfolg sehen und die
Zusammenhänge verstehen können.
Im Verlauf des Kurses vervollständigen wir nach und nach Ihr Wissen, damit korrekte Seiten
herauskommen.
Warum Handarbeit?
Es gibt mehrere Gründe dafür (und 1-2 dagegen :-)
Vorteile
• volle Kontrolle auch über Details
• besser lesbarer Code (kommt auf den Schreiber an)
• keine besondere Software ist nötig, HTML kann mit allem erstellt werden (selbst mit
Notepad)
• sauberer Code (sofern der Ersteller ein wenig Ahnung hat)
• besondere Kniffe sind per Hand einfacher realisierbar
• it´s cool, man
Kapitel: Vorwort
Nachteile
• Kenntnisse von HTML müssen vorhanden sein
• am Anfang zeitaufwendiger
1
9
erste HTML-Seite
Wir steigen hier ganz einfach ein. Dabei werden wir sehr schnell eine HTML-Seite entwerfen,
die in einem Web-Browser angezeigt werden kann.
Dabei werden die Beispiele am Anfang sehr einfach gehalten werden, damit ein
grundlegendes Verständnis aufgebaut werden kann. Dadurch sind die ersten Seiten, die wir
hier erstellen, noch kein valides XHTML, sondern einfach zum HTML lernen. Valide
XHTML-Seiten sind nach bestimmten Regeln aufgebaut.
Aber kein Angst - wir kommen von den einfachen Webseiten über den entsprechenden
Wissenzuwachs sehr bald zu validen XHTML-Seiten und Sie bekommen die Werkzeuge an
die Hand, um sich selber kontrollieren zu können!
sehr einfach HTML-Seite

Für das Grundverständnis legen wir nun eine Seite in einem einfachen Texteditor (z.B.
Notepad unter Windows) an und speichern diese mit dem Namen "index.htm". Wichtig ist
dabei die Endung. Durch die Endung sagen wir, dass es sich um eine HTML-Seite handelt.
Übung: erstellen Sie Ihre erste Seite mit folgendem Inhalt
Dazu geben wir exakt wie im folgenden Ausdruck den Code ein:
Herzlich willkommen auf

meiner ersten HTML-Seite
Hier finden
Sie meine erste Homepage zum
Lernen von HTML
Ihr
Manfred
Mustermann
Nun schauen wir uns diese Seite im einem Webbrowser an. Die Datei hat durch die Endung
".htm" im Betriebssystem das Browserlogo bekommen (meistens das Internet-Explorer E oder
je nach Webbrowser das entsprechenden). Sobald wird die Datei doppelt anklicken wird diese
im Webbrowser angezeigt. Die Ausgabe im Browser sollte ungefähr wie folgt aussehen:
Kapitel: erste HTML-Seite
Herzlich willkommen auf meiner ersten HTML-Seite Hier finden Sie meine erste Homepage
zum Lernen von HTML Ihr Manfred Mustermann
Erstaunlich, oder? Alle Umbrüche sind beseitigt und mehrere Leerzeichen werden zu einem
Leerzeichen zusammengefasst. Nicht wundern - denn dies ist in HMTL völlig normal.
2
0
Schockiert wie einfach HTML Seiten sein können?
Das ist durchaus schon eine HTML-Seite (wenn auch nicht valide). Hier sehen Sie den Grund
für den Siegeszug von HTML. Durch sehr einfache Mittel können Inhalte für andere
bereitsgestellt werden, die dann weltweit darauf zugreifen können. Unsere Datei müssten wir
dazu nur noch auf einen Webserfer schieben (dazu kommen wir später).
Als nächstes wollen wir unseren Text gliedern und sauber anzeigen lassen. Dazu benötigen
wir die ersten HTML-TAGs.
HTML-Grundlagen
Was ist HTML?
HTML ist eine Seitenbeschreibungssprache, mit der dem Browser "gesagt" wird, wie die
Daten angezeigt werden: welche Einheiten (Buchstaben, Wörter, Sätze, Absätze) z.B. fett
gedruckt werden, in bestimmten Farben dargestellt werden etc.
Dazu werden über das Internet HTML-Seiten übertragen. Das Bedeutsame dabei ist, dass die
HTML-Seiten in Klartext übertragen werden und so jeder schauen kann, wie das eigentlich
funktioniert. Einfach mal im Browser auf "Ansicht -> Quellcode anzeigen" gehen. Das
zunächst Verwirrende ist, dass zwischen den Informationen noch was auftaucht.
Es gibt also nicht nur Informationen, sondern auch Anweisungen, wie diese Informationen
angezeigt werden sollen. Das geschieht über HTML-TAGs.
HTML-TAG
Was ist nun ein HTML-TAG? - Als HTML-TAG wird ein einzelner HTML-"Befehl"
bezeichnet.
Dabei kommt der Begriff TAG aus dem Englischen und hat dort die Bedeutung von "Etikett,
Anhänger, Aufkleber, Marke, Kennzeichnung, Auszeichner". Am besten lässt sich es mit dem
Begriff "Kennzeichnung" veranschaulichen. Man kennzeichnet Bereiche innerhalb von
seinem Inhalt, dass diese in bestimmter Weise angezeigt werden soll. Dabei kann man dann
sagen, hier beginnt der Bereich und dort hört er wieder auf.
Kapitel: HTML-Grundlagen
Am Beispiel wird der HTML-TAG von 2 Absätzen gezeigt
<p>erster Absatz, der sehr lang sein kann</p>
<p>zweiter Absatz - und nach der Definition bewirken

Absätze immer einen Abstand (egal ob es sich um Text handelt
oder bei Schuhen zwischen Straße und Träger</p>
Dies bewirkt eine Ausgabe im HTML-Browser von
2
1
erster Absatz, der sehr lang sein kann
zweiter Absatz - und nach der Definition bewirken Absätze immer einen Abstand (egal ob es
sich um Text handelt oder bei Schuhen zwischen Straße und Träger)
für Fettschrift. Dabei sind 3 Dinge wichtig zu beachten:
1. Die TAGs sitzen immer zwischen Kleiner- und Größerzeichen < .. >
2. Zwischen den < > befindet sich die Anweisung - hier p - und wie so vieles im Leben
ist das eine Abkürzung und das Ganze von dem englischen "paragraph" (Absatz,
Abschnitt). Dementsprechend sind alle Befehle nur Abkürzungen von englischen
Begriffen. So lassen sich die Befehle gut merken (vorausgesetzt, man kann Englisch).
3. Alle HTML-TAGs immer klein schreiben! Dies ist für XHTML und valide Webseiten
wichtig.
Alles hat ein Anfang und ein Ende. So auch praktisch fast jeder HTML-TAG.
Anfangs- und End-TAGs

Weiterhin gibt es einen Anfangs-TAG und einen End-TAG. Sonst hätte wir nicht die
Möglichkeit, mehrer Absätze zu machen bzw. müssten fett geschrieben Texte bis zum Ende
der Seite immer fett sein. Der End-TAG ist fast identisch mit dem Anfangs-TAG, mit dem
einzigen Unterschied, dass nach dem Kleinerzeichen (<) ein Schrägstrich kommt. Dieser ist
auf der Tastatur beim 7er zu finde.
Also so:
</befehl>
Absätze erstellen
Ein weiterer existenzieller TAG ist der für Absätze. Damit sind nicht die hinteren
Kapitel: Absätze erstellen
Personenerhöhungen speziell für Frauen gemeint, sondern Text-Absätze. Sollen 2

Textabschnitte getrennt werden, sieht das wie folgt aus:
<p>Hier kommt unser erster Test.</p>
<p>Hallo Welt</p>
Das <p> steht für paragraph = Absatz

Das Ergebnis im Gegensatz zum <br />-TAG ist eine Trennung mit Leerzeile:
2
2
Hier kommt unser erster Test.
Hallo Welt.
Hinweis
Hier sieht man, dass sowohl am Anfang der Anfangs-TAG <p> und am Ende der End-TAG
</p> steht. Das sollte i. d. R. eingehalten werden, da es laut XHTML zwingend erforderlich
ist. Also für zukunftssicheren Code immer an den End-TAG denken.
Es soll nicht verschwiegen werden, dass Sie dasselbe Ergebnis auch ohne den End-TAG
erhalten. Dabei reagiert aber jeder Browser unterschiedlich. Der Internet Explorer ist sehr
fehlertolerant, Netscapes Navigator zeigt teilweise bei fehlenden End-TAGs gar nichts mehr
an.
Übung
Kapitel: Absätze erstellen
2
3
Texte formatieren - Überschrift
Jetzt kommen die grundlegenden Formatierungsmöglichkeiten für Texte. Diese Handvoll
TAGs werden Sie immer und immer wieder benötigen. Diese TAGs sich einzuprägen ist
weder falsch noch schwer.
Überschriften
Anhand von Überschriften wird Text gegliedert und strukturiert. Dabei sind wie in einem
Fachbuch verschiedene Hierarchien (Wichtigkeit) von Überschriften möglich, z.B.
Kapitelüberschrift, Abschnittsüberschriften ...
Für Überschriften wird der TAG <hX> genutzt. Dabei steht das h für das engl. header =
Überschrift. Das X wird durch die Wichtigkeit ersetzt. Dabei stehen für X 1 bis 6.
• 1 ist die größte und wichtigste

• ...
• 6 die kleinste und somit unwichtigste (aber immer noch wichtiger als normaler Text)
<h1> Überschriften-Ebenen 1 </h1>

normaler Text
Nach der Überschrift (End-TAG) erfolgt automatisch ein Umbruch.
Die Ausgabe im Browser sieht wie folgt aus:
Kapitel: Texte formatieren - Überschrift
2
4
Hinweis
Die Größe der einzelnen Überschriften sind relativ zueinander. Je nach Browser können diese
unterschiedlich ausfallen (Relativität). Dabei sind die unwichtigeren Überschriften teilweise
kleiner als der normale Text. Das ist OK so und kann wenn gewünscht über ->CSS geändert
werden.
Übung: Überschriften und Absätze
Geben Sie den Text im grünen Kasten exakt so in den Texteditor Notepad (oder anderen
einfachen Texteditor) ein. Bitte auch die Leerzeichen und die Umbrüche
Erweitern Sie den Text um Überschriften und Absätze
1. Überschrift 1. Ordnung: Herzlich ...

2. Absatz: Hier finden ...
3. Überschrift 2. Ordnung: Meine Hobbies
4. Absatz: Sind so zahlreich ...
5. Absatz: Ihr Mustermann
Herzlich willkommen auf

der meiner ersten HTML-Seite
Hier finden Sie meine erste Homepage zum

Lernen von HTML
Meine Hobbies
Sind so zahlreich, dass es demnächst

eine weitere Seite gibt
Ihr Mustermann
Nach der Eingabe speichern Sie die Datei unter dem Namen "index.htm". Ansehen in einem
Website-Browser (z. B. Internet Explorer oder Firefox) Kapitel: Texte formatieren - Überschrift
2
5
kurz & gut:
Zum Erstellen von Websites helfen Programme - sogenannte HTML-Editoren. Durch
farbliche Syntaxhervorhebung und Autovervollständigung von HTML-TAGs,
Vorschaufunktion können Fehler vermieden werden.
html Editor
Es gibt verschiedenste HTML-Editoren auf dem Markt und teilweise wird es als
Religionsfrage aufgefaßt, welcher HTML-Editor zu verwenden ist.
HTML-Editor Scripty
Auch die Empfehlung von Scriptly stellt eine subjektive Meinung (von mir) dar - aber das
Programm bietet extrem viel (nicht nur für Einsteiger) und unterstützt den Webdesigner bei
der Arbeit.
Mehr zu Scriptly und ein Video finden Sie auf der nächsten Seite
HTML-Editor Phase 5
Ein weitere HTML-Editor - schauen Sie sich diesen einfach an.
Kapitel: html Editor
2
6
kurz & gut:
Zum Erstellen von Websites helfen Programme - sogenannte HTML-Editoren. Hier wird der
HTML Editor Scriptly von Webocton vorgestellt. Eine Freeware mit vielen pfiffigen Hilfen,
wie z. B. vervollständigen von HTML-TAGs, Vorschaufunktion und zusätzlich integriertem
FTP-Client.
Sehr gut für Einsteiger geeignet. Fortgeschrittene werden das integrierte MDI, Fenstersplitting
und Unterstützung für PHP, Java und weitere Programmiersprachen schätzen.
Editor Scriptly von Webocton

Mein Favorit unter den Editoren ist seit Neuestem Scriptly von Webocton. Warum? Dafür
gibt es einige Gründe, und glauben Sie mir, nach zahllosen Stunden von Programmierung und
Website-Entwicklung wird man anspruchsvoll.
Gründe für Scriptly
• Code-Completion - Ergänzung der Befehle und deren Attribute (beugt Tippfehlern

und schlechtem Gedächtnis vor)
• MDI - bedeutet, mehrere Fenster können nebeneinander geöffnet werden
• Fenstersplittung - dieselbe Datei gleichzeitig an 2 unterschiedlichen Stellen anzeigen
• Projektverwaltung - Websites können bequem in Projekten verwaltet werden
• FTP-Client mit integriert
• Sehr leistungsstark und verlässt einen nicht, wenn man von der Erstellung von HTML-
Seiten in die Programmierung z. B. mit PHP übergeht
• Mehrsprachig (zur Zeit deutsch und englisch, ist aber problemlos auf beliebig viele
Sprachen erweiterbar)
• Freeware
• ... und noch einige Gründe mehr
Präsentation von Scriptly als Flash-Film

Und zum Ansehen von verschiedenen Highlights eine Präsentation von Scriptly als Flash-
Film unter:
Kapitel: Editor Scriptly von Webocton
http://www.html-seminar-de/filme/film-vorstellung-html-editor-scriptly.htm
Scriptly Schritt für Schritt

Nach dem Starten nicht erschlagen lassen (hier wird der Eindruck durch den kleinen
Bildschirm noch verstärkt). Für den Anfang werden die meisten Bereiche noch nicht benötigt.
Der Vollständigkeithalber die erste Ansicht.
2
7
Die Bereiche können bequem per Funktionstasten aus- und wieder eingeblendet werden
(natürlich auch über das Menü).
Der rechte Bereich mit Features wird mit F6 aus- und eingeblendet, der Explorer mit F7 und
das Informationsfenster mit F8.
2
8
Jetzt ist erstmal viel Platz zum Arbeiten
Wollen wir nun eine neue HTML-Seite erstellen, einfach auf das Icon mit dem leeren Blatt
klicken (weiter unten mehr zu dem Pfeil für die Auswahl neben diesem Icon)
Um die TAGs farbig hervorgehoben zu erhalten, den entsprechenden Syntax auswählen
Jetzt können wir anfangen zu tippen. Und sobald wir einen HTML-TAG anfangen, erhalten
wir Vorschläge, wie der TAG ergänzt werden kann, bzw. den END-TAG.
2
9
Wenn die Code-Completion erwünscht ist, einfach die Leertaste drücken und sie wird
übernommen.
Die Vorschau starten Sie über das folgende Icon oder über F9.
Clever an der Vorschau ist, dass die Ausgabegröße des Fensters bequem verändert werden
kann - das ist später bei Ihren durchdesignten Seiten wichtiger als bei unserem Beispiel hier.
3
0
Und nun noch abspeichern:
HTML-Grundgerüst automatisch
Scriptly kann beim Erstellen einer neuen Datei Ihnen sofort das Grundgerüst für die HTML-
Datei erstellen.
Klicken Sie mit der Maus neben dem Icon mit

dem weißen Blatt auf den kleinen Pfeil nach
unten. Sie erhalten dann folgende Auswahl mit
den verschiedenen Dateitypen.
Wählen Sie dann HTML aus.
3
1
Sie werden nun gefragt, was alles im Grundgerüst verankert sein soll.
3
2
Das Grundgerüst steht und Sie können gleich ans Eingemachte.
Der Zeilenumbruch kann bequem ein und ausgeschaltet werden. Nutzen Sie dazu das Icon
wie im folgenden Bild zu sehen
3
3
Das die Anzeige mit aktivierten Zeilenumbruch aktiv ist, sehen Sie vor dem Quellcode – die
Zeilen, die umgebrochen sind, haben anstatt der Nummer das entsprechende Icon
Mögliche HTML-Attribute vorschlagen lassen

HTML-Attribute vorschlagen lassen funktioniert, wenn der Cursor sich innerhalb eines TAGs
befindet und dann die Tastenkombination STRG und die Leertaste gedrückt wird. Alle
möglichen Attribute werden vorgeschlagen.
3
4
WYSIWYG auch möglich
Nicht verschwiegen werden soll die WYSIWYG-Variante. Dahin kann jederzeit vom HTML-
Code in diese Bearbeitungsmöglichkeit gewechselt werden. Dazu einfach im Fußbereich
WYSIWYG auswählen.
In der Natur der Sache liegt es, dass der über die WYSIWYG-Variante erzeugte HTML-Code
nicht so schön ist - zum Lernen aber eine geschickte Variante. Einfach mal damit spielen.
Automatische Ersetzungen
Als Hilfe (teilweise auch für Einsteiger verwirrend) sind die automatischen Ersetzungen bzw.
Ergänzungen. Wird ein Umlaut (öäüß) eingegeben, wird automatisch der entsprechende
HMTL-Code eingefügt.
Wird eine öffnende Klammer eingegeben, erscheint automatisch zusätzlich die schließende
Klammer. Auch bei einem Anführungszeichen – das ist für das Programmieren sehr hilfreich,
da man meistens das benötigt.
3
5
Sollte das stören, können Sie jederzeit über Optionen diese Ersetzungen deaktivieren.
Unter “Weitere Ersetzungen” findet sich die Ersetzung von den Anführungszeichen in "
- was ungeschickt ist (und schätzungsweise nur in dieser Version 0.8.93.0) so ist. Einfach
ausschalten!
Download
Den Editor erhalten Sie unter folgender Adresse:
http://www.scriptly.de
Dort gibt es vom engagierten Autor auch ein Forum rund um den Editor.
3
6
kurz & gut:
Vorstellung des HTML Editor Phase 5 urspünglich von Ulli Meybohm.
Bildschirmaufbau, Bedienung und für Fortgeschrittene Shortcuts.
HTML Editor Phase 5 von Ulli Meybohm

Der Editor unterstützt den Gestaltungsprozess und den Anfänger. Die Adresse, wo Sie die
aktuellste Version dieser Freeware für den privaten Gebrauch erhalten, finden Sie unter
Softwareempfehlungen.
Für den Einstieg möchte ich mich auf die wichtigsten Bedienungselemente beschränken.
Dazu gehört der grundlegende Aufbau des Programms und die wichtigsten Buttons (bzw., wer
mag, die entsprechenden Menüpunkte).
Bildschirmaufbau
Folgende 3 Bereiche sind vorhanden:
Kapitel: HTML Editor Phase 5 von Ulli Meybohm
1. Eingabefenster und Vorschau
2. Dateien
3. Ordner
3
7
Der Bereich "1. Eingabefenster und Vorschau" wird sowohl für die Eingabe des Quelltextes
als auch für die Vorschau genutzt. Unterstützt wird der Benutzer durch die farbigen
Hervorhebungen des HTML-TAGs.
Im Bereich "2. Dateien" sind alle erzeugten HTML-Dateien und Bilder ersichtlich. Klickt
man eine HTML-Datei an, wird diese geladen und der Quellcode angezeigt und kann direkt
bearbeitet werden. Per Drag & Drop können geschickt Bilder (aus dem Dateien-Bereich) in
HTML-Dokumente gezogen werden. Der benötigte Code wird komplett eingefügt.
Im Bereich "3. Order" wird die Struktur der Festplatte angezeigt. In der Abbildung ist mein
Aufbau der Website zu sehen :)
Oberhalb dieser Bereiche sind die Buttons und Menüs zu finden. Als nächstes werden die
zum Arbeiten wichtigsten kurz erklärt. Alles weitere empfiehlt sich zu probieren und spielen.
Bedienung
Für die Bedienung wird als erstes der Button benötigt, der wie ein weißes Blatt mit
umgeknickter Ecke aussieht.

Nach Anklicken werden Sie gefragt, ob Sie "Erstellen" oder "Leeres Dokument erstellen"
wollen. Der Unterschied ist, dass beim "Erstellen" der Editor das Grundgerüst erzeugt. Dies
ist später praktisch, für den Anfang ist zum besseren Verständnis Tipparbeit angesagt. Wählen
Sie bitte "Leeres Dokument erstellen" aus. Sie erhalten eine komplett leere Seite.
Der zweite wichtige Punkt ist das Speichern. Klicken Sie dazu auf die einzelne "Diskette" (die
erste links). Haben Sie noch nichts geschrieben, ist diese Diskette noch hellgrau und Sie
können auch nichts speichern. Nachdem Sie etwas geschrieben haben, speichern Sie dies
bitte. Als Dateinamen geben Sie bitte komplett "index.htm" ein. Wird dagegen die Endung
weggelassen, ergänzt der Editor die Datei und macht ein .html dazu! Also immer daran
denken und zum Dateinamen (dazu später noch mehr) immer ein ".htm" eingeben.
Um in die Vorschau umzuschalten, werden folgende Buttons benötigt...
3
8
Dabei schaltet das rechte Symbol (Weltkugel mit Blatt) die Vorschau ein. Um wieder zurück
zum Quellcode zu schalten, wird die "Zeitung" angeklickt.
Nachdem dies die wichtigste Funktion für ein direktes Feedback des eigenen Tun und
Waltens ist, empfiehlt es sich, dies durch die Taste F9 schneller zu machen. Durch einmal
Drücken bekommen Sie die Vorschau - beim nächsten Drücken wieder den Quelltext.
Beachten Sie zwei Dinge:
• Die Vorschau funktioniert nur, wenn der Internet Explorer installiert ist, was wohl so
gut wie auf jedem Windows-System der Fall sein dürfte.
• Bei jedem Ansehen in der Vorschau wird die Datei automatisch gespeichert.
weitergehende Einführung
Als weitergehende Einführung empfehle ich die Anleitung, die beim HTML-Editor dabei ist.
Ein paar Feinheiten werden hier später noch erklärt.
3
9
Für Fortgeschrittene - Shortcuts zum hmtl-editor
Shortcuts werden Tastenkombinationen genannt, durch die Eingaben schneller gemacht
werden können, bzw. die auch Aktionen auslösen.
Viele Shortcuts sind noch effizienter, wenn zuvor der Text markiert wird, auf den sich dies
beziehen soll. So wird z. B. der Anfangs-TAG vor den Text und der End-TAG hinter den
markierten Text gesetzt, z. B. bei Überschriften.
Anbei sind nur die wichtigsten aufgelistet (das sind die, die ich wohl am häufigsten benötige
:-)
Tastenkombination HTML-TAG was es bewirkt

STRG + #  Inhalt ignorieren
STRG + Leertaste erzwungenes Leerzeichen
STRG + RETURN <p> </p> Absatzmarken setzen
SHIFT + RETURN <br> Break-TAG (Zeilenumbruch)
ALT + RETURN <li></li> für Aufzählungen
Zum Scrollen des Quelltextes, ohne
STRG + Pfeiltaste
dass der Mauszeiger sich von der
hoch/runter
Stelle entfernt.
Vorschau wird gestartet, sofern
Internetexplorer installiert ist.
Dabei wird automatisch der
F9
Quelltext gespeichert! (nochmals F9
und man kehrt zum Quelltext
zurück)
STRG + F1 <h1></h1>
bis ... Überschrift setzen
STRG + F6 <h6></h6>
Link setzen (Shortcut ist ein kleines
STRG + l <a href=""></a>
L!)
<a
STRG + e E-Mail-Link setzen
href="mailto:"></a>
STRG + b <b></b> Schrift fett
Kapitel:
4
0
Grundgerüst einer HTML-Seite -
DOCTYPE-Definition
Eine HTML-Seite hat ein Grundaufbau. Dieses hat in der Minimalversion immer folgendes
Aussehen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>HTML-Tutorial von www.html-seminar.de</title>
</head>
<body>
</body>
</html>
DOCTYPE-Definition - erste Zeile jeder Website

Über die DOCTYPE-Definition teilen Sie dem Webbrowser mit, was er in der folgenden
Datei erwarten kann und welche HTML-Befehle Verwendung finden können. Im Klartext,
Kapitel: Grundgerüst einer HTML-Seite - DOCTYPE-Definition

was ist zulässig und was wäre falsch. Wir benötigen diese Zeile, damit wir bald unsere
erstellten HTML-Seiten von einem Programm automatisch validieren (überprüfen) lassen
können um schnell aus den eigenen Fehler (und aus den Fehlern anderer) richtiges HTML
lernen zu können. Für den Anfang ist es in Ordnung, wenn Sie diese Zeile exakt so
übernehmen. Achten Sie beim Übernehmen auf Groß- und Kleinschreibung. Am besten
einfach kopieren.
Für die exakte Erklärung vertröste ich Sie auf eine späteres Kapitel - wichtig zu wissen ist
nur, dass wir hier das aktuellste XHTML nutzen und dies in einer STRICT-Variante. Dadurch
fallen alle Fehler sofort auf:)
Bereich html
Hier fängt nun der HTML-Bereich an - den Endtag finden Sie am Ende und diese
umklammern den head und den body-Bereich
head-Bereich
Im Head-Bereich sind verschiedene Dinge definiert, die der Besucher nicht sieht (mit
Ausnahme von title) und für die Technik und Suchmaschinen da ist. Dazu kommen wir
später.
4
1
Der wichtigste Eintrag ist der <title>-Bereich. Dort wird eingetragen, was im Internetbrowser-
Kopfzeile angezeigt wird. Dieser Eintrag wird auch von Suchmaschinen verwendet und ist
dort dann die erste Zeile zum anklicken. Tragen Sie dort in wenigen Worten ein, was auch der
Einzelseite den Besucher erwartet! Investieren Sie hier Zeit (auch wenn es am Anfang für den
Einsteiger die Tragweite dieser Zeile noch nicht komplett abschätzbar und nachvollziehbar
sein wird.
Sie können sich einfach merken, dass man im allgemeine nicht sieht, was im Kopf (bei einem
Menschen zumindestens) vorgeht, aber der Körper sehr wohl sichtbar ist.
body-Bereich
Als erstes beschäftigen wir uns mit dem Body-Bereich. Alles was hier eingetragen wird, zeigt
der Browser an. Also zunächst machen wir alle Eintragungen zwischen <body> und </body>
Alle folgenden Kapitel gehen davon aus, dass Sie das Grundgerüst haben und alle
Eintragungen die im Browser angezeigt werden im Body-Bereich eintragen. Es wird aus
Platzgründen dann nicht mehr das komplette Grundgerüst gezeigt!
Texte formatieren - fett, kursiv und Co

Fett - hervorgehoben
Zu diesem Kapitel empfiehlt das Haus folgende Musik: "I´m fat" von "Weird Al" Yankovic.
Um wichtige Passagen oder Wörter hervorzuheben, können diese fett ausgegeben werden.
Dafür gibt es 2 verschiedene Befehle. Einerseits steht dafür der TAG <b> zur Verfügung. Das
b steht für das engl. bold = fett. Andererseits haben wir den HTML-TAG <strong> - engl.
"überzeugend, kräftig, fest, derb".
<p> nun <b>wichtiger</b> Text mit b</p> Kapitel: Texte formatieren - fett, kursiv und Co
<p>nun <strong>wichtiger</strong> Text mit strong</p>
nun wichtiger Text mit b
nun wichtiger Text mit strong
Wer den End-TAG vergisst, darf sich nicht wundern, wenn dann auch der restliche Text fett
wird.
4
2
So, wenn Sie sich wundern, warum beides gleich aussieht und dafür es 2 verschiedene
HTML-TAGs gibt, hier die Erklärung: es gibt semantisch-logische und physisch-visuelle
HTML-TAGs.
physisch-visuellen VERSUS semantisch-logische HTML-

TAGs
Der große Unterschied ist, dass wir nach der Maxime von XHTML zu einem logischen
Aufbau von unerem Inhalt wollen. Somit sollten i.d.R. die semantisch-logischen HTML-
Elemente verwendet werden.
Eine kleine Gemeinheit am Rand - nicht jeder Browser zweigt das Elemement strong auch
hervorgehoben in fetter Schrift an. Dazu können wir aber später die visuelle Ausgabe von
Strong (sprich wie es auf dem Bildschirm aussieht) über CSS dann nach unserem Geschmack
gestalten.
kursiv - schräge Sache

Um Passagen oder Wörter hervorzuheben, die aber nicht so stark wie bei Fettdruck sein
sollten, kann ein Text kursiv (in Windrichtung liegend) dargestellt werden:
Hier kommt nun <i>kursiver (schräger)</i> Text
Hier kommt nun kursiver (schräger) Text
Kapitel: Texte formatieren - fett, kursiv und Co

Das i steht für das engl. italic = italienisch. Das Wort "italienisch" hat erstmal nicht allzu viel
mit kursiv zu tun, sofern man die Hintergrundgeschichte nicht kennt. Diese
Hintergrundgeschichte ist ein Andenken an den ersten Schriftsetzer in der Druckerei von
Aldus Manutius, der schräge Buchstaben entwickelte, um mehr Buchstaben auf eine Seite zu
bekommen und dadurch das erste Taschenbuch herausbringen zu können. Dieser war Italiener
und die Druckerei war in Venedig.
PS: Das erste Taschenbuch musste nicht in Hosentaschen passen, sondern in Satteltaschen :)
semantisch-logische für krusiv - em
HTML-TAG em steht für engl. emphasis = "Betonung, Gewichtung, Nachdruck". Nutzen Sie
diesen statt dem i
4
3
Schachteln von
HTML-TAGs
TAGs verschachtelt
Die TAGs können nun bunt gemischt
werden - verschachtelt. Wollen Sie z. B.
einen Text erst fett und dann noch kursiv
darstellen, ist das jetzt kein Problem.
Hier kommt nun <strong>fetter und <em>kursiver (schräger)</em></strong> Text
Hier kommt nun fetter und kursiver (schräger) Text
Hinweis:
verschachten ist durchaus wörtlich gemeint. Wie bei Schachteln, die ineinander gestapelt
werden, müssen die Tags auch geöffnet und geschlossen werden, also der zuerst aufgemacht
wurde, muß zuletzt geschlossen werden. Z.B.: <b> <i> Inhalt </i> </b>
Übung
Bauen Sie folgende Seite exakt nach!
Kapitel: /Schachteln von HTML-TAGs
4
4
Unterstreichung von Text
unterstrichen - (nicht einsetzen!)
Nur der Vollständigkeit halber wird hier der TAG für unterstrichen aufgeführt. Dieser sollte
nach Möglichkeit vermieden werden!!!
Warum nicht einsetzen? - Weil jeder Surfer denkt, es handele sich bei unterstrichenem Text
um einen Link (viel Spaß beim sinnlosen Klicken auf diesen NICHT-Link).
Sobald er feststellt, dass er mit der Unterstreichung tierisch auf den Arm genommen wurde,
wird er sich frustriert abwenden und sofort den Computer ausschalten, verkaufen und sich
einem Buch oder ähnlichen Beschäftigungen widmen. Unter Umständen wird er sich nur
wundern oder aber Ihre Seite verlassen und sich andere Seiten ansehen.
Der TAG fürs Unterstreichen lautet <u> und entsprechend zum Beenden </u> - für engl.
underline = unterstreichen. Tun Sie sich und der Menschheit etwas Gutes und setzen Sie
diesen TAG nicht ein!!!
Texte formatieren - hoch-tief und größer-

kleiner
Folgende TAGs finden Sie in der freien Wildbahn nicht so häufig wie die bisherigen
Formatierungsmöglichkeiten. Diese haben aber durchaus ihre Relevanz.
hochgestellt und tiefgestellt

Hochgestellt und tiefgestellt = "Auf den Arm genommen und verladen"
Besonders bei Formeln und wissenschaftlichen Literaturhinweisen ist es wichtig. Dabei steht
der TAG <sup> für hochgestellt und <sub> für tiefgestellt.
Besonders bei Formeln H<sub>2</sub>O und

Kapitel: Unterstreichung von Text
bei Literaturhinweisen<sup>1</sup>
ist es wichtig und richtig.
Besonders bei Formeln H2O und bei Literaturhinweisen1

ist es wichtig und richtig.
4
5
Text größer und kleiner
Um innerhalb von Text eine Textpassage größer oder kleiner darzustellen, gibt es den TAG
<big> für größer und <small> für kleiner. Dabei sollten der entsprechende End-TAG nicht
vergessen werden (</big> und </small>.
Manchmal ist etwas <big>größer</big> oder <small>kleiner</small>,

als es erscheint.
Manchmal ist etwas größer oder kleiner,

als es erscheint.
Übung:
Probieren Sie bitte folgendes Beispiel zu erstellen. Als Tipp: Es ist möglich (wenn auch nicht
komfortabel) öfters als einmal einen Befehl auszuführen (das dient hier nur als Beispiel und
sollte nicht auf fertigen Homepages auftauchen).
Kapitel: Texte formatieren - hoch-tief und größer-kleiner

Ach te r bah n
PS: Beachten Sie bitte genau, wann die Schrift sich nicht mehr in der Größe ändert.
PS2: Sollten Sie nicht auf das Ergebnis kommen, schauen Sie sich den Quellcode an :)
4
6
HTML-Seite validieren
Um HTML-Seiten zu erstellen, ist das richtige Werkzeug zum schnellen und präzisen
Arbeiten notwendig. Warum hier der Firefox ideal ist, können Sie unter dem Kapitel “Vorteile
des Firefox” nachlesen. Ein großer Vorteil ist das Erweitern des Browsers durch
Zusatzprogramm, sogenannte Add-Ons.
Add-ons zum Valdieren von HTML-Code

Das Add-On "Html Validator" von Marc Gueury zweigt beim Surfen sofort an, ob Fehler auf
einer Seite existieren. Dies funktioniert sowohl Online wie Offline, also beim entwickeln der
eigenen Seiten.
Am rechten unteren Bereich der Fußzeile sehen Sie sofort nach

laden einer Seite, ob diese OK ist (dann grüner Knopf mit
Haken) oder ob sich Fehler eingeschlichen habe (roter Knopf).
Einfach doppelklick und die Fehler von oben nach unten
beseitigen. Wichtig ist, dass Sie von oben nach unten arbeiten,
ansonsten könnten durch Folgefehler die Suche erfolglos sein.
Download Html Validator: https://addons.mozilla.org/de/firefox/addon/249
mit Scriptly validieren

auch über Scriptly kann schnell der HTML-Code validiert werden – Linkes Fenster mit F6
und dann die Tastenkombination STRG + SHIFT + t
Kapitel: HTML-Seite validieren
4
7
Sauberer HTML-Code
Warum überhaupt der Hinweis auf sauberen Code? Dafür gibt es einige Gründe:
1. WYSIWYG-Editoren machen es nicht :-)

2. Eine eventuelle Fehlersuche geht später schneller
3. Nachträgliche Änderungen und Hinzufügen von Informationen ist problemlos
4. Der Kursleiter sieht gemachte Tippfehler schneller
Diesen sauberen HTML-Code machen Sie eigentlich nur für sich selber. Den Webbrowsern
ist egal, ob diesen den Inhalt in einer einzigen Zeile bekommen oder wenigstens mit
Umbrüchen oder mit sauberen Einrückungen. Diese zeigen alle 3 Variaten gleich an!
Für einen sauberen Code arbeiten Sie Umbrüchen und Leerzeilen und Einrückungen. So sollte
z.B. jeder Text-Abschnitt (<p>-TAG) davor und danach eine Leere Zeile haben, damit Sie
sehen, wo die Abschnitte sind. Sehen Sie folgendes Beispiel:
<p>Hier fängt unser erster Abschnitt mit seinem Inhalt an.

Dabei können Sie wie hier gezeigt sofort nach dem
p-Tag anfangen zu schreiben oder...</p>
<p>
wie in diesem zweiten Absatz in der nächsten Zeile nach dem p-Tag und am Ende
auch wieder eine Zeile freilassen.
</p>
Mit Einrückungen arbeiten Sie bei HTML-TAGs die mehrer Befehle benötigen. Z.B.
Aufzählungen oder Tabellen. So ist auf einen Blick im Quellcode sichtbar, wo Aufzählungen
anfangen und aufhören und was zusammengehört
<ul>
<li>erster Aufzählungspunkt</li>
<li>zweiter Aufzählungspunkt</li>
<li>dritter Aufzählungspunkt, der
mehr Platz benötigt</li>
<li>nach Ende keine Einrückung mehr</li>
</ul>
Und das Ganze als Negativbeispiel bei Aufzählungen:

Kapitel: Sauberer HTML-Code
<ul><li>erster Aufzählungspunkt</li><li>zweiter
Aufzählungspunkt</li><li>dritter Aufzählungspunkt, der mehr Platz
benötigt</li><li>nach Ende keine Einrückung mehr</li></ul>
Am folgende Beispiel sehen Sie sehr schön, dass alleine durch die Darstellung ein
Verständnis möglich ist (obwohl wir bisher keine Tabellen hatten). Sie sehen auf einen Blick,
wo die Tabellen anfangen und aufhören.
So sollte z. B. ein Tabellenaufbau dann aussehen. Achten Sie auf die Einrückungen, die die
einzelnen Zellen verdeutlichen.
4
8
<table>
<tr>
<td>
INHALT
</td>
<td>
INHALT
</td>
</tr>
</table>
Definitionsliste
Auflistungen von Definitionen tretten meistens in Glossaren auf. Erstellen wir hier ein kleines
HTML-Glossar, da es auch ideal das Schachteln von HTML-TAGs "übt".
Der HTML-Befehl, die die Auflistung umschließt, ist der HTML-TAG dl. Das dl steht für das
engl. definition list ("Definitionsliste"). Wird nun ein zu definierender Begriff genannt, ist das
der "definition term" - dt. Die Defitionsbeschreibung ist somit der HTML-TAG dd, engl.
definition description.
<dl>
<dt>Definition (list) Term</dt>
<dd>Definition (list) Description</dd>
</dl>
Aufgabe
Erstellen Sie nun ein kleines Glossar über die Begriffe "Hund" und "Katze" und deren
Erklärung, z. B. “Ein Tier mit vier Beinen, das Bäume liebt” und “Ein Tier mit vier Beinen,
das i.d.R. keine Hunde mag und die Flucht auf den Baum einem Hund vorzieht”. Kapitel: Definitionsliste
4
9
Listen, Aufzählungen
Listen und Aufzählungen kommen laufend vor und sind besonders zu Weihnachten sehr
wichtig. Ein Wunschzettel kann auch als Liste angesehen werden. Genauso natürlich ToDo-
Listen, Telefonlisten etc.
Listen mit Spiegelstrichen

Für Listen werden 2 verschiedene TAGs benötigt. Der ...
1. TAG, <ul>, um dem Browser mitzuteilen, um was für eine Liste es sich handelt und
wo diese anfängt und aufhört
2. TAG, <li>, um die einzelnen Listenpunkte festzulegen
Und voilà - schon haben wir eine Liste (und der Absatz oben mit 1. und 2. ist auch eine Liste).
Am Beispiel wird es deutlich, wie diese zusammenspielen und welche TAGs wie geschachtelt
sein sollten.
<ul>
<li>erster Listenpunkt</li>
<li>zweiter Listenpunkt</li>
<li>...</li>
<li>x-ter Listenpunkt</li>
</ul>
• erster Listenpunkt
• zweiter Listenpunkt
• ...
• x-ter Listenpunkt
Kapitel: Listen, Aufzählungen
Dabei steht <ul> für das engl. unsorted list = unsortierte Liste. Dieser TAG hat zur Folge,
dass für jedes <li> ein Spiegelstrich in Form einer Kugel gesetzt wird. Dabei steht <li> für
engl. list=Liste
5
0
Listen mit automatischer Nummerierung
Wenn jetzt eine sortierte Liste (durchnummerierte) benötigt wird, wird das <ul> durch <ol>
ersetzt. <ol> steht für engl. orderd list = sortierte Liste
Aufgabe:
Erstellen Sie wie im obigen Beispiel ein Liste mit diesem Aussehen. Allerdings dürfen Sie
nicht von Hand 1. 2. oder 3. eintippen!!
Das Ergebnis sollte so aussehen:
1. erster Listenpunkt
2. zweiter Listenpunkt
3. x-ter Listenpunkt
Aufgabe:
Um ein wenig Spannung in die Sache zu bringen: eine schwierigere Aufgabe. Erzeugen Sie
folgendes Aussehen. Dabei sehen Sie, dass sortierte und unsortierte Listen gemischt werden
können.
PS: Schachteln gehört dazu

PS2: Nachsehen im Quellcode der Seite ist nicht untersagt :)
1. erster Listenpunkt
2. zweiter Listenpunkt
o ein Unterpunkt zum zweiten Listenpunkt
Kapitel: Listen, Aufzählungen
o ein weiterer Unterpunkt zum zweiten Listenpunkt

3. x-ter Listenpunkt
5
1
Attribute bei HTML-TAGs
Früher wurde viel Design direkt über HTML gemacht. Dies wurde durch Attribute bei den
entsprechenden HTML-TAGs erreicht. So konnte z.B. die Ausrichtung von Text mitgegeben
werden (linksbündig, rechtsbündig, zentriert) oder Farben angegeben werden. Das sollte man
bei der Philosophie von XHTML dringend unterlassen (zumal viele dieser alten Attribute
sonst von den Validerungsroutinen als Fehler angemerkt werden) - das Design wird nun über
CSS gemacht. Es ist nur noch Inhalt und Logik gewünscht. Daher sind nicht mehr allzuviele
Attribute zugelassen bzw. gerne gesehen.
Zwei Attribute gibt es bei Aufzählungen, die als inhaltliche/logische Angabe angesehen
werden. Die Art der Aufzählung (ob mit Zahlen, Buchstaben etc.) und die Startzahl.
Art der Nummerierung bestimmen

Der TAG <ol> kann ergänzt werden durch <ol type=X>. Dabei gibt es für das X verschiedene
Ausprägungen.
Praktisch an dieser Konstruktion ist, dass allein durch Auswechseln von <ul type=> eine ganz
andere Anzeige möglich ist, z. B. mit 1. ,2. , 3. ... oder mit A, B, C, ... oder römischen Ziffern
• type=1 dadurch kommt die normale Aufzählung (arabische Ziffern) zustande, also 1,
2, 3 ...
• type=A Aufzählung mit Großbuchstaben, also A,B,C, ..., Z
• type=a Aufzählung mit Kleinbuchstaben, also a,b,c, ..., z
• type=i Aufzählung mit römischen Ziffern in klein, also i,ii,iii,iv,v, ...
• type=I Aufzählung mit römischen Ziffern in groß, also I,II,III,IV,V, ...
Start der Nummerierung festlegen

Hier wird über das Attribut start="ZAHL" der Beginn der Zählung festgelegt.
<ol start="5" type="a"> ...

Kapitel: Attribute bei HTML-TAGs
5
2
Aufgabe
Erstellen Sie die Liste der römisch-deutschen Herrscher. Die Aufzählung sollte mit der
Nummer 3 beginnen und in römischen Ziffern angezeigt werden.
III. Liudolfinger bzw. Ottonen

IV. Salier
V. Supplinburger
VI. Staufer
VII. Welfen
VIII. Staufer
Umbrüche erzwingen
Wenn Sie einen Umbruch erzwingen möchten, nutzen Sie dazu den TAG <br />.
Hier kommt unser erster Test. <br />
Hallo Welt.
Die Ausgabe im Browser sieht wie folgt aus:
Hier kommt unser erster Test.

Hallo Welt.
Kapitel: Umbrüche erzwingen
Alle HTML-TAGs kommen aus dem Englischen. So ist <br /> die Abkürzung für break =
Umbruch.
Der TAG <br /> ist XHTML konform. Oft werden Sie noch den "Vorgänger" in Form von
<br> sehen - funktioniert zwar auch, aber besser ist der Aktuelle - dann ist man für die
Zukunft gerüstet.
5
3
Trennlinien und Attribute von TAGs
Hier kommt die Maus - nein, eine Trennlinie. Durch diese können Sie Texte trennen. Anhand
dieser Trennlinie wird das Prinzip von Attributen erklärt. Diese Attribute benötigen Sie bei
allen möglichen TAGs - also bitte zu Gemüte führen
Trennlinien
Trennlinien <hr /> sind an und für sich nichts Besonderes. Diese trennen zwei Abschnitte.
Das <hr /> steht für engl. horizont ruler = horizontale Linie.
Text eins <hr /> Text zwei
Text eins
Text zwei
Der TAG <hr /> ist xHTML-gerecht. Oft werden Sie noch den "Vorgänger" in Form von <hr>
sehen - funktioniert zwar auch, aber besser ist der Aktuelle - dann ist man für die Zukunft
gerüstet.
Attribute Kapitel: Trennlinien und Attribute von TAGs
Spannend ist das Prinzip von Attributen. Bisher wurden bei allen HTML-TAGs keine
Attribute aufgeführt, obwohl es welche gibt.
Wird kein Attribut aufgeführt, wird das Standard-Attribut angenommen, z. B. dass etwas links
ausgerichtet ist.
Größe eines Elementes

Im Folgenden spreche ich bewusst von Elementen, da Attribute auf zahlreiche TAGs
angewendet werden können, z. B. hat sowohl eine Trennlinie eine Größe als auch eine Schrift
und beides mal ist die Benennung dieselbe. Das Attribut lautet size="X".
5
4
Bei dem TAG <hr /> sieht das dann wie folgt aus
Text eins
<hr size="20" />
Text zwei
Anmerkung:
Die Attribute wiederholen sich bei verschiedenen TAGs - allerdings sind nicht alle Attribute
bei allen TAGs erlaubt.
Text eins
Text zwei
Aufbau Attribute
Attribute setzt sich also aus 2 Teilen zusammen. Im ersten, z.B. "size", wird die Art der
Beeinflussung festgelegt und im zweiten dann die Ausprägung, hier 20.
Ausrichtung - rechts, links, mittig

Elemente können ausgerichtet werden. Dazu dient das Attribut "align" (engl.: ausrichten)
Dabei sind folgende Möglichkeiten vorhanden
• align="left"
• align="center"
• align="right"
Ein Wurm wanderte auf der Welt entlang ...

<hr width="55" align="left" />
<hr width="55" align="center" />
Kapitel: Attribute
<hr width="55" align="right" />
Das Attribut width="55" wird im nächsten Punkt erklärt. Benutzen Sie es einfach mal.
5
5
Breite eines Elementes
Ein weiteres Attribut ist die Breite width (engl. Breite/Weite). Im folgenden Beispiel sehen
Sie die Trennlinie mit einer Breite von 55.
Text eins
Text zwei
Relativität !!! - ganz wichtig für alles weitere

Spannend wird das Ganze, wenn Sie in Relationen arbeiten, d. h. nicht mehr fixe Angaben,
wie im letzten Beispiel 55 Bildpunkte, sondern in Prozenten. Im nächsten Beispiel ist die
Linie 55% breit abhängig vom Browserfenster. Probieren Sie das Beispiel aus und ändern Sie
dann die Fenstergröße des Browsers. Die Linie wird automatisch sofort kleiner bzw. größer.
Text eins
<hr width="55%" />
Text zwei
Text eins
Text zwei
Dies ist eine der wichtigsten Erkenntnisse, die Sie immer wieder brauchen. Das komplette
Design ist i. d. R. relativ. Sehen Sie sich einfach die Seite Relativität an und meditieren Sie
über die Auswirkungen auf Ihr weiteres Leben als HTML-Seiten-Designer.
Spielen Sie damit und probieren Sie.

Kapitel: Attribute
Tipp:
Ist etwas Standard, ist es eigentlich unnötig das Attribut zu setzen, z. B. bei <hr
align="center" /> oder bei Schrift eine Ausrichtung links. Denn ohne die Angabe wäre die
Anzeige die gleiche. Das spart Tipparbeit, Code und Übertragungszeit!
5
6
Links (Hyperlinks) in HTML erstellen
Durch Links wurde das WWW so groß und erfolgreich. Links (korrekt Hyperlinks, aber zu
lang, um jedes mal auszuschreiben :) verweisen auf andere Seiten und mehr.
Es gibt mehrere Arten von Links:
• Links innerhalb der Homepage

• Links auf andere Seiten im Internet
• Links mit E-Mail-Funktion
Dabei kann das Aussehen der Links verschieden sein. Einerseits als Text, andererseits als
Grafik. Vorerst wird das Prinzip des Links anhand von Text-Links innerhalb der eigenen
Homepage erklärt.
Im ersten Schritt wird der Aufbau von Dateinamen angesehen, um möglichst wenig Probleme
zu bekommen (ja, da kann es Probleme geben und falterweise merkt man es teilweise selber
nicht!)
Dann schauen wir uns externe Links an und wie am besten auf andere Websites verlinkt
werden kann.
Mit dem Wissen bauen wir unsere Steuerung innerhalb der Website
Dateinamen und die Benennung

Benennung der Startdatei
Die Startdatei sollten Sie tunlichst index.htm nennen. Oft ist auch index.html zu sehen. Das
zusätzliche L schadet zwar nicht, kann aber für Verwirrung sorgen. Deshalb immer index.htm
nennen. Wird bei einer URL, was gerne gemacht wird, nur der Pfad angeben, sucht der Kapitel: Links (Hyperlinks) in HTML erstellen
Browser automatisch nach einer index.htm(l).
Findet er diese, was zu hoffen ist, wird diese Startseite angezeigt. Findet er diese Seite nicht,
erhält der Nachfrager unter Umständen eine Auflistung der Dateien, die sich im Ordner
befinden.
Beispiel: Eingabe in die URL www.ard.de
Vom Browser wird automatisch http://www.ard.de/index.htm geladen
Geschichtliches:
Das .html stammt aus der UNIX-Welt. .htm stammt aus der DOS-Welt, da dort lange Zeit
nur Suffixe mit 3 Zeichen erlaubt waren.
5
7
Aufbau der Datei-Namen
Bei der Namensgebung sollte unbedingt auf mehrere Punkte geachtet werden:
1. keine äöüß oder sonstige Sonderzeichen

2. keine Leerzeichen im Namen, stattdessen ein - (Minus) oder _ (Unterstrich), das
Minus ist vorzuziehen
3. als Endung (.htm oder .html) sollte immer bei allen Ihren HTML-Dateien einheitlich
verwendet werden. Z. B. immer nur .htm oder immer nur .html - entscheiden Sie sich
einmal und bleiben Sie dabei!
gute Beispiel:
termine.htm
aktuell.htm
ueber-mich.htm
aktuelle-termine.htm
absolut nicht empfehlenswert:

Groß.htm
alles über mich.htm
ich ganz Groß.htm
Weiterhin empfehle ich ...
• dass der Dateinamen komplett klein geschrieben wird

• und in minimalistischer Form den Inhalt beschreibt
Erlaubt sind außer Buchstaben auch das Minus-Zeichen.
Unsere "Über mich"-Seite würde ich also benennen: ueber-mich.htm
Negativbeispiel: "Über mich.htm" funktioniert u. U. abhängig vom Browser - allerdings nicht

bei jedem :(. Grund ist das Ü, das spätestens bei Besuchern außerhalb Deutschlands Probleme
bereitet und das Leerzeichen, das teilweise nicht erkannt wird.
Kapitel: Dateinamen und die Benennung
Aufgabe: Dateinamen für Website festlegen

Vergeben Sie für folgende kleine Website mit 4 Seiten sinnvolle Namen. Die Website hat eine
Startseite, eine Seite mit Informationen über Sie, eine Seite mit Ihren Hobbies und eine Seite
mit Ihrer Linksammlung.
Die Verbindungslinien symbolisieren für später die Möglichkeit, dass man von jeder Seite aus
auf eine andere direkt wechseln kann.
5
8
interne Links
Alle Links einer Site sind relativ adressiert. Dies bedeutet, dass beim Setzen eines Links nicht
die komplette URL, sondern nur der Pfad ab der Startebene der Site angegeben werden muss.
Also wird weder Dienstart, Servername noch Länderkürzel eingegeben. Wenn Sie keine
Unterverzeichnisse verwenden, haben Sie auch kein Verzeichnis. Durch die relative
Adressierung wird Speicherplatz gespart und man kann mit der Internet-Site einfacher
umziehen (oder sie z.B. auf CD-ROM brennen)
Datei liegt im Hauptverzeichnis:

Kapitel: interne Links
index.htm
Somit sieht dann der HTML-Code wie folgt aus:
<a href="index.htm"> eine beliebige Umschreibung </a>
Datei liegt im Verzeichnis: kurse

kurse/index.htm
5
9
externe Links
Links auf andere Seiten - externe Links
Bei externe Links muss die komplette URL angegeben werden. Also sowohl Dienstart,
Servername noch Länderkürzel eingegeben und die Unterverzeichnisse, wenn diese
verwendet werden. Einfach

und sicher fahren Sie, indem Sie die Seite, auf die Sie einen Link setzen möchten, im Browser
angeben und wenn die Seite erfolgreich angezeigt wird die URL kopieren und in Ihren
HTML-Code übernehmen.
Somit sieht dann der HTML-Code wie folgt aus, wenn Sie einen Link auf dieses HTML-
Seminar setzen möchten:
<a href="http://www.html-seminar.de/"> eine beliebige Umschreibung </a>
Anstatt der beliebigen Umschreibung sollte etwas Sinnvolles stehen, damit dem Besucher
im Voraus bekannt ist, was ihn hinter dem Link erwartet. Negativbeispiel: hier klicken
Es wird nun die offizielle Startseite des Internetauftritts anzeigt. Es macht hier wenig Sinn,
zusätzlich noch index.htm anzugeben, sprich also http://www.html-seminar.de/index.htm.
Möchten Sie eine Unterseite direkt anspringen, geben Sie die komplette URL mit der
Unterseite an:
<a href="http://www.html-seminar.de/html-links.htm"> Infos zu Links </a>
Aufgabe
Erstellen Sie folgende Linkliste für die Unterseite "empfehlungen.htm" auf Ihrer Website:
Kapitel: externe Links
• HTML lernen mit HTML-Seminar.de

• PHP Tutorial und MySQL Kurs
6
0
Tipp
Wenn Sie Links nach außen setzen, verlieren Sie eigentlich Besucher Ihrer Website. Geben
Sie daher im Aufbau Ihres Links noch ein "target" an. Dadurch wird ein neues Fenster
geöffnet und Ihres bleibt erhalten. Nachdem der Surfer dieses schließt, ist er wieder bei Ihnen.
Hintergrund ist, dass sich viele schwer tun mit dem "Zurück-Button". Der Link sieht dann wie
folgt aus:
<a href="http://www.html-seminar.de/start.htm" target="_blank">jetzt HTML lernen</a>
Haben Sie auf Ihrer Homepage eine Linkliste, können Sie auch bestimmen, dass alle Links im
selben neuen Fenster geöffnet werden. Geben Sie dazu anstatt dem target="_blank" ein
target="linkliste" ein, wobei ein beliebiges Wort gewählt werden kann, solange es nicht
_blank ist.
Tipp
Verweisen Sie auf keinen Fall auf rechtlich zwielichtige Seiten wie z. B. Pornoseiten und
Hackerseiten. Das kann ins Auge gehen und eine Abmahnung etc. kostet Ihr Geld. Sagen Sie
nicht, ich hätte nicht gewarnt!
Links mit Grafik und E-Mail werden später behandelt. Erst folgt das Kapitel über Grafik
allgemein.
Steuerung erstellen
Textlink
Wie kommen wir also von unserer Startseite zur "Über mich"-Seite und zurück? Mit einem
Link, der durch die Maus angeklickt wird und dann zu der entsprechenden Seite führt.
Ein Link hat immer die Form von

<a href="DATEINAMEN.HTM">BESCHREIBUNG</a>
Dabei sollten die groß geschriebenen Teile durch den entsprechenden Inhalt ersetzt werden, in
unserem Beispiel also:
Kapitel: Steuerung erstellen
<a href="index.htm">Startseite</a>
<a href="ueber-mich.htm">Über mich</a>
<hr />
<h1>Über mich</h1>
<ul>
<li>mein Zelt</li>
<li>mein Fahrrad</li>
<li>mein Stocherkahn</li>
</ul>
6
1
Im Browserfenster wird der Link dann unterstrichen angezeigt. Das ist auch der Grund,
warum ich absolut von sonstigen Unterstreichungen abrate (siehe Kapitel: Texte formatieren -
> unterstrichen).
Der Link ändert auch seine Farbe, je nachdem ob er bereits angezeigt wurde oder die Seite
noch unbesucht blieb. Auch ändert sich der Mauszeiger, wenn man über einen Link fährt.
Startseite Über mich
Über mich
• mein Zelt
• mein Fahrrad
• mein Stocherkahn
In der BESCHREIBUNG kann alles stehen. Typische Einsteigerfehler dabei sind solche
Varianten wie "Klicken Sie hier, um mehr über mich zu erfahren". Wichtig sind also
aussagekräftigere Beschreibungen als das Wort "hier".
Tipp
Textlinks wie die obigen sind ideal für die Steuerung. Wenn diese in der ursprünglichen Form
belassen werden, werden diese von jedem Surfer schnell erkannt und genutzt. Jeder Surfer
erkennt einen blau unterstrichenen Text als Link und freut sich, dass er sich nicht erst in die
Nutzung einarbeiten muss und diese schnell benutzen kann.
Bisher gingen wir davon aus, dass Sie keine Unterverzeichnisse verwenden. Sollten Sie
Unterverzeichnisse verwenden (was bei kleineren Homepages unüblich ist), geben Sie einfach
noch den Pfad mit an. Wichtig dabei ist nur, dass Sie den / (Schrägstrich = Slash) verwenden
(das Teil auf der Tastatur, das sich seine Existenz mit der 7 teilt und oberhalb von ihr steht).
Unser Link würde, wenn die Seite in dem Unterverzeichnis "ich" gespeichert ist, also so
aussehen: <a href="ich/ueber-mich.htm">Über mich</a>
Aufgabe
Kapitel: Über mich
Erstellen Sie zusätzlich zu Ihrer Startseite und der bereits erstellten Seite "empfehlungen.htm"
eine Seite mit Ihren Hobbies und verlinken diese 3 Seiten, dass von jeder Seite auf jede Seite
gesprungen werden kann.
6
2
Verzeichnisse
Wenn Sie mit Verzeichnissen arbeiten, weil Ihre Struktur Ihrer Website sehr komplex wird,
müssen Sie bei den Links die Verzeichnisse mit angeben. Zusätzlich können Sie auch über die
Angabe ".\verzeichnis\seite.htm" angeben, dass er immer von dem Hauptverzeichnis
ausgeht, auch wenn Sie den Link in einem Unterverzeichnis aufrufen. Empfehlenswert ist es
eh nur bei komplexen Seiten (über 200 Seiten meiner Meinung nach). Verzeichnisse selber
sind wichtig, um z.B. die Bilder unterzubringen.
Stolperfallen Slash "/" und Backslash "\"

Bei der Pfadangabe von Links wird gerne anstatt dem "/" ein "\" gesetzt. Dies ergibt im
Browser von Netscape Probleme, hingegen moniert der Microsoft Internet-Explorer die
falsche Schreibweise nicht und führt sie einfach aus.
Tipps zu Unterverzeichnisse:
In jedem Verzeichnis sollte eine index.htm existieren, da ansonsten unter Umständen bei der
URL ohne Datei der Inhalt dieses Ordners aufgelistet wird oder nur eine Fehlermeldung
kommt.
Grafiken in Homepages integrieren - wie,

was, wo, wie groß
Es gibt bisher 2 Grafikformate, die in Betracht kommen. Diese 2 Formate werden von allen
Browsern unterstützt. GIF und JPEG sind die Grafikformate, die heute im Internet verwendet
werden.
Wenn Sie im Browser ein Bild sehen, können Sie beim Internet Explorer mit der rechten
Maustaste auf das Bild klicken. Sie erhalten dann ein Menü - der letzte Punkt "Eigenschaften"
zeigt den Namen, die Datei-Größe und die Abmessung des Bildes. Jedes Bild kann mit der
rechten Maustaste auch auf die eigene Festplatte gespeichert werden (beachten Sie unbedingt
das Copyright!). In dem Menü, das Sie durch die rechte Maustaste erhalten, gibt es den Punkt
"speichern unter..". Jetzt können Sie das Bild auf Ihrer Festplatte speichern. Machen Sie dies
mit dem folgenden Bild "jetzt HTML lernen" und speichern Sie das Bild in den Dateiordner,
in dem Sie bisher Ihre HTML-Dateien (index.htm, ueber-mich.htm) gespeichert haben.
Kapitel: Verzeichnisse
Teilweise aendert der IE die Endung - anstatt .jpg steht dann .jpeg - dann entweder wieder
umbenennen oder als html-seminar.jpeg einbinden.
6
3
Dieses Bild integrieren wir als Beispiel auf die Startseite (index.htm). Die Grundstruktur des
HTML-TAGs dafür lautet:
<img src="http://www.html-seminar.de/html-seminar.jpg" />
(img = engl. image = Bild)
<img src="http://www.html-seminar.de/html-seminar.jpg" />
Dabei gibt es für Bilder weitere Attribute, die aus verschiedenen Gründen sehr wichtig sind.
Attribut Bedeutung
width="X" Die Breite X des Bildes - sollte angegeben werden, damit

der Browser den Platzhalter in entsprechender Größe
Kapitel: Grafiken in Homepages integrieren - wie, was, wo, wie groß

vorsehen kann, solange das Bild noch nicht komplett
übertragen ist!
height="Y" Die Höhe des Bildes - sollte angegeben werden, damit der
Browser den Platzhalter in entsprechender Größe
vorsehen kann, solange das Bild noch nicht komplett
übertragen ist!
border="0" Ob ein Rahmen gezeichnet werden soll (wenn nicht, dann

0) und wenn er gezeichnet wird, mit welcher Stärke
alt="ERKLÄRUNG Der ALTernativtext - dieser ist aus verschiedenen

ZUM BILD" Gründen sehr wichtig:
• für Sehbinderte (die ihn von speziellen Browsern

vorgelesen bekommen)
• für Suchmaschinen, da diese auch diesen Text
indizieren
• zur Information für den Surfer
6
4
Der komplette Code sieht also wie folgt aus. Erstellen Sie Ihre Internetseite mit Bild, fahren
Sie mit der Maustaste auf das Bild und warten Sie kurz. Jetzt erscheint der Alternativtext als
Tooltip.
<img src="http://www.html-seminar.de/html-seminar.jpg" width="474"

height="66" border="1" alt="jetzt HTML lernen" />
Und wenn Sie mehr Ordnung im Verzeichnis haben möchten, legen Sie ein Unterverzeichnis
für Ihre Bilder an und schreiben dann:
<img src="http://www.html-seminar.de/bilder/html-seminar.jpg" width="474" height="66"
border="1" alt="jetzt HTML lernen" />
Welches Format soll ich verwenden?

Die Unterschiede der Formate sind in folgender Tabelle dargestellt. Wenn Sie sich nicht
entscheiden können, dann speichern Sie das gewünschte Bild über ein
Bildbearbeitungsprogramm sowohl in GIF als auch als JPG ab und schauen sich die
Dateigröße an.
Unterschiede der
GIF JPG
Formate:
Anzahl der
256 16,7 Mio

Farben:
Möglichkeiten zur
Ja Nein
Animation:
Möglichkeiten zur Kompressions-Grad
automatisch
Kompression: einstellbar
kleine Grafiken, Buttons, Bilder mit vielen Farben

Eignung:
animierte Grafiken (Photos)
Anzeige erfolgt stufenweise,
Besonderheit: dadurch kann der Surfer früher
erahnen, was für ein Bild kommt.
Übertragungszeiten abhängig von der Leitungsgeschwindigkeit am Beispiel einer Grafik mit

100 kB finden Sie im nächsten Abschnitt bei Übertragungsdauer allgemein.
Besonders bei Grafiken ist auf die Dateigröße zu achten. Werden die Dateien zu groß, was je
nach Geschmack schon bei 100kb beginnt, entwickelt sich das WWW für langsame Zugänge
(z. B. Modem) zum World Wide Wait. Daher sollte unbedingt auf die Dateigröße geachtet
werden. Getreu dem Motto: weniger ist mehr. Das entwickelt sich oft zur Gratwanderung
zwischen Bildqualität und Übertragungsgeschwindigkeit.
6
5
Um den Anforderungen des WWW gerecht zu werden, sollte die Datengröße eines Bildes
also möglichst gering sein. Zu bedenken gilt auch, dass Zeit Geld ist und hier im Speziellen
Telefonkosten verursacht, die es soweit als möglich zu vermeiden gilt.
Dateiformat GIF
Das Dateiformat GIF (Graphics Interchange Format, Graphikaustauschformat) war das erste
Format im Internet und wurde von der Firma CompuServe entwickelt. Es setzte sich durch, da
es, zusätzlich zu seinen Vorteilen und Möglichkeiten, erstmals lizenzfrei zu bekommen war.
Die GIF-Datei hat eine Palette von 256 Farben und wird zusätzlich komprimiert. Das Format
GIF hat den Vorteil, dass es sich beim Ladevorgang abgestuft aufbauen lässt (genannt
interlaced), was zur Folge hat, dass dem Betrachter bei längeren Ladezeiten das Warten nicht
so lange erscheint, da das Bild sich zwar unscharf, aber schon erkennbar aufbaut. Eine weitere
Eigenschaft von GIF ist, dass man animierte Sequenzen darstellen kann, die aus einer
Bildfolge von GIFs bestehen. So kann man in einer einzigen Bilddatei kleinere Animationen
abspeichern, die dann selbstständig ablaufen (s. Bsp. Verkehrsschild). Mit GIFs kann zudem
eine Farbe transparent dargestellt werden, was den Vorteil hat, dass man sie im Browser nicht
sieht und man somit mit den Hintergründen spielen kann, ohne die Position der Grafik
berücksichtigen zu müssen. So können Grafiken im Vordergrund harmonisch integriert
werden, ohne dass der Hintergrund störend zum Tragen kommt. Als Beispiel kann als
Hintergrund eine Gesteinsstruktur gewählt werden und als Vordergrundgrafik das
Firmenlogo, das sich durch die transparente Farbe nahtlos einfügt. Durch einen Stern (ich
möchte hier keinen Stuttgarter Automobilhersteller nennen) kann dann durch die inneren
Kreissegmente hindurch der Hintergrund zur Geltung kommen.

Dateiformat JPG
Im JPEG-Format (Joint Photographic Experts Group, Vereinigte Photoexperten-Gruppe) sind

bis zu 1,6 Millionen Farben speicherbar. Daher ist es auch am gebräuchlichsten für die
Darstellung von Photos und anderen Halbtonbildern in Dateien im Internet. Der große Vorzug
von JPEG ist, dass ein Komprimierungsgrad eingestellt werden kann. Somit kann eine Datei
auf ein Minimum reduziert werden.
Dateiformat PNG
PNG (portable Network Graphics, engl. portierbare Netzwerkgrafiken) ist ein Rasterformat.
Die Nachteile von GIF und JPG sind in diesem Format nicht vorhanden, aber viele Vorteile.
Es können alle Farben dargestellt werden, die Komprimierung ist verlustfrei (was man bei
JPG nicht sagen kann) und es gibt die Möglichkeit, durchsichtige Bereiche zu erstellen. Für
diese Transparenzen wirden Alphakanäle genutzt. Grafiken können so z.B. auf jeden farbigen
Hintergrund eingesetzt werden.
Ein kleiner Nachteil ist, das alte Browserversionen ein paar Probleme mit den PNG-Format
haben. Es werden z.B. die Trasparenten Bereiche dann nicht transparent dargestellt. Gilt aber
primär für alte Browser!
6
6
Animation von Bildern
Die Animation von GIF-Grafiken erfolgt durch Einzelbilder wie bei folgendem
Verkehrszeichen, das von der Bürgerinitiative für animierte Verkehrszeichen BFAZ uns zur
Verfügung gestellt wurde.
Nun die Einzelbilder:
Solche Animationen sind natürlich aufwendiger, da nicht nur 1 Bild benötigt wird, sondern
zahlreiche und wenn man nicht aufpasst, die Dateigröße der Grafik dann heftig groß wird.
Zum erstellen solcher Animationen gibt es zahlreiche Programme. Näheres dazu auf der Seite
über Software
Übertragungsdauer allgemein

Für einen Eindruck der Übertragungszeiten einer Datei (egal ob Homepage, Bild oder beides
zusammen) gebe ich zirka-Werte an. Diese können zusätzlich noch von der Auslastung des
Netztes negativ beeinflusst werden.
Bei einer Dateigröße von 108 KB betragen die Übertragungszeiten je nach Übertragungsart,
also was für eine Modemgeschwindigkeit bzw. ISDN verwendet wird:
Übertragungsgeschwindigkeit Übertragungszeit
14.4k 62.39 Sekunden
28.8k 32.20 Sekunden
56k 17.36 Sekunden
ISDN (128k) 8.79 Sekunden
T1 (1.44 MB) 2.60 Sekunden
Diese Zeiten wurden von der Seite NetMechanic mit dem "LOAD TIME CHECK" ermittelt.
http://www.netmechanic.com
Als Faustgröße für gute Internetseiten gilt: nicht mehr als 60 KB für Text, Hintergrundbild,
Logos und sonstige Bilder zu überschreiten! Ansonsten werden die Übertragungszeiten zu
lang und ungeduldige Surfer sind schon weitergesurft (und zwar auf eine andere Seite - die
treulosen Tomaten).
6
7
Copyright von Bildern
I. d. R. unterliegen Bilder und Grafiken (auch Bereiche davon) einem Copyright - also jemand
hat die Rechte an dem Werk. Daher sollten Sie, um rechtliche Probleme zu vermeiden,
entweder nur eigene Werke verwenden oder den Copyright-Besitzer fragen, ob er einer
Verwendung auf Ihrer Homepage zustimmt. Am Beispiel des oben verwendeten
Verkehrszeichen war das eine freundliche E-Mail, die ebenso schnell wie freundlich
zurückkam mitsamt der Zusage.
Tipp: Links mit Grafiken

Auch wenn ich kein Freund von Links mit Grafiken bin, da diese oft außer verspielt keinen
Mehrwert bringen und noch den Nachteil der erhöhten Übertragungsdauer haben, möchte ich
die Möglichkeit Ihnen nicht vorenthalten.
Mit dem bisherigen Wissen können Sie das. Kombinieren Sie nur einen Link und eine Grafik
HTML-TAG: Link
<a href="DATEINAMEN.HTM">BESCHREIBUNG</a>
HTML-TAG: Grafik
<img src="http://www.html-seminar.de/bilder/html-seminar.jpg"

width="474" height="66" border="1" alt="jetzt HTML lernen" />
Und als Kombination sieht das ganze dann wie folgt aus:
<a href="http://www.html-seminar.de/" target="_blank">
<img src="html-seminar.jpg"
width="474" height="66" border="1"
alt="html-seminar.de - jetzt HTML lernen" />
</a>
Das Bild wird also umschlossen von dem Link, und somit kommt der Surfer nach Anklicken
des Bildes auf die Seite, die in dem Link angegeben wurde.
Noch geschickter ist die Variante, wenn Sie die Grafik nicht auf Ihrem Webserver oder
Festplatte haben wollen, diese von der fremden Seite anzugeben (sollte von der fremden
Seiten abgesegnet sein).
<a href="http://www.html-seminar.de/" target="_blank">
<img src="http://www.html-seminar.de/bilder/html-seminar.jpg"
width="474" height="66" border="1"
6
8
alt="html-seminar.de - jetzt HTML lernen" />
</a>
PS: Über diese Art, einen kleinen Vermerk auf html-seminar.de einzubinden, freue ich mich
prinzipiell. Also nur zu.
Bildmaterial
Folgende Bilder können Lizensfrei für das Probieren mit Bilder für die Homepage genutzt
werden. Ein Link auf (www.html-seminar.de) den Fotografen (mich) wäre nett.
Die Bilder können von der Homepage unter http://www.html-seminar.de/lizensfreies-

bildmaterial-zum-testen.htm heruntergeladen werden - mit der Maus (rechte Maustaste) auf
das Bild klicken und “speichern unter...”
Karren in den Sand gesetzt
Kapitel: Bildmaterial
Baustop wegen Langzeitstreik
6
9
Osterhase unter Bewachung von Katze zur Vermeidung frühzeitiger Auslieferung der
Ostereier
Bilder ausrichten
Ein Text neben einem Bild kann an der oberen Bildkante, in der Mitte und unten ausgerichtet
werden.
Dazu wird der Befehl align="top|bottom|middle" innerhalb des IMG-TAGS verwendet.
• align="top" - Text wird an der oberen Bildkante ausgerichtet (top = oben)

• align="middle" - Text wird mittig zum Bild ausgerichtet (middle = mittig)
• align="bottom" - Text wird an der unteren Bildkante ausgerichtet (bottom = unten)
<p>
a) Schach matt -
<img src="schach_logo.jpg" align="top"
height="137" width="175" />
</p>
<p>
b) Schach matt -
<img src="schach_logo.jpg" align="middle"
</p>
Kapitel: Bilder ausrichten
<p>
c) Schach matt -
<img src="schach_logo.jpg" align="bottom"
</p>
Und durch die Erweiterung des TAGs durch align sieht das Ganze im Browser wie folgt aus:
7
0
a) Schach matt -
b) Schach matt -
c) Schach matt -
Kapitel: Bilder ausrichten
7
1
Farben - die Welt ist bunt
HTML-Tags für Farben
Internetseiten leben erst durch Farben. Farben können für die Schrift eingesetzt werden (aber
bitte in Maßen), können den Hintergrund verschönern, in einzelnen Tabellenzellen auftauchen
und die Welt bunt machen.
Um einer Schrift eine Farbe mitzugeben (in diesem Beispiel rot), benötigen Sie folgenden
HTML-TAG: Der HTML-TAG ist veraltet, ist aber zum testen von Farben OK.
<font color="#FF0000"> Ihr Text </font>
Die Welt ist b u n t
Um dem Hintergrund Farbe mitzugeben, wird im Body-TAG noch der Befehl bgcolor
(background-color) aufgenommen. Zusätzlich kann im Body-TAG noch angegeben werden,
welche Schriftfarbe standardmäßig für das ganze Dokument verwendet werden soll. Dies
geschieht mit dem HTML-TAG "text=" etc. - siehe folgendes Beispiel
Und nun wird es <font color="#FF0000"> bunt </font>
Anderen Elementen können natürlich auch Farben mitgegeben werden - es gibt für die
meisten Elemente die Möglichkeit, diesen eine Farbe mitzugeben, z.B. bei der Trennlinie <hr
color="red" /> bzw. als Hex-Code <hr color="#FF0000" />
Und nun eine rote Trennlinie:

Kapitel: Farben - die Welt ist bunt
<hr color="#FF0000" />
Und nun eine rote Trennlinie:
7
2
Probieren Sie es einmal aus (und machen Sie gleich einen Termin beim Augenarzt Ihrer Wahl
aus).
Farbenmischen
So, nun ist nur noch die Frage, welche Farben einem zur Verfügung stehen und was es mit
den 6 Zahlen bzw. dem F als Farbangabe auf sich hat.
Welche Farben stehen zur Verfügung?

Wie in der Physik gelehrt, kann man fast alle Farben aus den 3 Grundfarben Rot, Grün und
Blau zusammenmischen. Dieses Farbmodell wird oft in der Welt der Computer genutzt - es
heißt RGB-Farbmodell. Dabei steht r für red, g für green und b für (ratet mal :-).
Jede Farbe kann einen Wert zwischen 0 und 255 annehmen. Nimmt man den höchsten Wert,
erhält man die reine Farbe, wie im Beispiel zu sehen ist. So besteht Rot dann aus den Anteilen
255 Rot, 0 Grün und 0 Blau. Weiß ist 255,255,255 und Schwarz das Gegenteil 0,0,0.
Eine Farbe, hier Rot, wird in der Regel wie folgt angegeben.
color="#FF0000"
7
3
So, laut der Aussage von vorhin müsste doch eigentlich eine 9stellige Zahl dastehen. Was
macht also hier die 4stellige Zahl mit dem doppelten F?
Damit es nicht zu einfach wird, werden die Werte hexadezimal angegeben. Aber keine Panik -
jedes bessere HTML-Tool unterstützt sie. Beim HTML-Editor können Sie direkt aus den
Farben auswählen und bekommen dann die entsprechende Hexadezimalzahlen.
Dezimal 0 1 2 ... 9 10 11 12 13 14 15 16 17 18 ... 255

Hexadezimal 0 1 2 ... 9 A B C D E F 10 11 12 ... FF
Der Aufbau der Farbnummer ist im Hexadezimalsystem immer wie folgt.
Die andere Art, Farben anzugeben

Farben können auch über ihren englischen Namen angegeben werden. Auch hierbei
unterstützt einen der HTML-Editor. Wenn Sie den Reiter "Colors" anklicken, können Sie im
rechten Pulldownmenü den Punkt "Namen" auswählen. Ab jetzt werden die Farbwerte mit
ihren Namen eingetragen.
color="silver"
color="red"
color="yellow"
color="fuchsia"
color="gainsboro"
Farbpalette
Normalerweise sollten Sie sich nach Möglichkeit immer an das Standard-Schema halten, das
von den Browsern optimal interpretiert wird. Die Standard-Palette wird eingesetzt, weil es
immer Surfer gibt, die auf ihrem Computer nur 256 Farben anzeigen lassen. Für diese Surfer
ist die Standard-Palette konzipiert. Wird diese nicht eingesetzt, werden Farben unter
Umständen aufgerastert und das Ergebnis ist nicht optimal.
Die Standard-Palette bietet 216 Farben. Dabei handelt es sich um bestimmte Farben
(mathematisch sind bei der Standard-Palette die RGB-Farbnummern durch 51 dividierbar).
Um nun nicht mit dem Taschenrechner dasitzen zu müssen, hilft uns wie immer der HTML-
Editor. Stellen Sie bei dem Reiter "Color" das Pulldownmenü auf st216_xxx.bmp
7
4
Sie haben dann die folgenden Farben zur Auswahl. Hier sehen Sie alle 216 Standardfarben
und ihre hexadezimale Schreibweise.
Tipp:
Weniger ist mehr - viele Homepages sind zu bunt und zeichnen den Ersteller so durch
schlechten Geschmack aus.
7
5
Genug der Farben - sonst treiben wir es noch zu bunt.
kurz & gut:

Wie werden Tabellen erstellt und einzelne Zellen verbunden.
Tabellen - Grundlagen
Wie kam das Design auf Homepages
Sicher haben Sie sich bisher schon gefragt, wie kam das Design früher ohne CSS auf
Homepages? - Normalerweise über Tabellen, die unsichtbar sind. Dazu später mehr. Nun
erstmals zu Tabellen, die sichtbar sind und damit einfacher zu verstehen.
Woraus besteht ein Tabellenaufbau?

Tabellen bestehen aus Reihen und Spalten. Diese werden wir nun schrittweise aufbauen (zum
besseren Verständnis) bis hin zur Design-Tabelle
Grundlage ist der HTML-TAG <table>. Damit fängt jede Tabelle an und mit dem
entsprechenden END-TAG hört diese auf. Wichtig ist, dass beide gesetzt werden, da zwar bei
fehlendem END-TAG der IE die halbfertige Tabelle anzeigt, dagegen der Netscape u.U. gar
nichts anzeigt.
<table> </table>
Mit diesem Code passiert noch gar nichts, da weder eine Anzahl der Spalten noch die Anzahl
der Zeilen angegeben wurde.
Als nächsten Schritt legen wir eine Zeile mit <tr> an. Das tr steht für engl. table row =
Tabellen Reihe
<table> <tr> </tr> </table>
Auch jetzt wird noch nichts angezeigt - es fehlen die Tabellendatenzellen - also der HTML-
TAG <td>, das für das engl. table data = Tabellen Daten steht
Kapitel: Tabellen - Grundlagen
<table> <tr> <td> </td> </tr> </table>
Auch jetzt wird noch herzhaft wenig angezeigt, da kein Inhalt da ist. Tragen wir als Inhalt in
unsere Tabelle:
<table> <tr> <td> Inhalt 1 </td> </tr> </table>
INHALT 1
7
6
Irgendwie sieht es auch noch nicht anders aus als unsere bisherigen HTML-Seiten - also soll
der Rahmen der Tabelle noch angezeigt werden.
<table border="1"> <tr> <td> Inhalt 1 </td> </tr> </table>
INHALT 1
Und nun kommen noch mehr Spalten in Form von <td> hinzu
<table border="1"> <tr> <td> Inhalt 1 </td> <td> Inhalt 2 </td> </tr> </table>
INHALT 1 INHALT 2
So, das gleiche mit noch mehr Zeilen - beides kann nach Belieben variiert werden.
<table border="1"> <tr> <td> INHALT ZELLE 1 </td> <td> INHALT ZELLE 2 </td>
</tr> <tr> <td> INHALT ZELLE 3 </td> <td> INHALT ZELLE 4 </td> </tr> </table>
INHALT 1 INHALT 2
INHALT 3 INHALT 4
So sollte ein Tabellenaufbau dann aussehen. Achten Sie auf die Einrückungen, die die
einzelnen Zellen verdeutlichen.
Tipp: Fehler bei Tabellen vermeiden:

Kapitel: Tabellen - Grundlagen
Wegen der Übersichtlichkeit und um Probleme zu umgehen, sollte besonders bei Tabellen auf
sauberen Code geachtet werden. Also auf jeden Fall mit Einrückungen zur besseren Übersicht
arbeiten!
Beim Arbeiten mit Tabellen sollten Sie die einzelnen Zellen anfangs am besten
durchnummerieren und beim HTML-TAG table zugleich auch das Attribut border setzen,
also: <table border="1">
7
7
Tabellenkopf und Fuß
Es kann bei Tabellen der Kopf und der Fuß angelegt werden. Dies hat den Vorteil, dass beim
Ausdruck wenn es einen Seitenumbruch gibt, der Kopf und der Tabellenfuß automatisch auf
jede neue Seite neu gedruckt wird. Soweit die Theorie - in der Praxis sieht es so aus, dass dies
beim Firefox funktioniert, beim IE nicht (auch nicht in der aktuellen Version).
Aufbau der Befehle
<table border="1">
<thead>
<tr>
<th>Studiengang 1</th>
</tr>
</thead>
<tfoot>
<tr>
<td>8.6 mio.</td>
<td>12.3 mio.</td>
<td>3.2 mio.</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Stuttgart</td>
<td>Tübingen</td>
<td>Karlsruhe</td>
</tr>
<tr>
<td>Stuttgart</td>
<td>Tübingen</td>
<td>Karlsruhe</td>
</tr>
</tbody>
</table>
Das Aussehen der Tabelle

Kapitel: Tabellenkopf und Fuß
Studiengang 1 Studiengang 2 Studiengang 3

8.6 mio. 12.3 mio. 3.2 mio.
Stuttgart Tübingen Karlsruhe
Stuttgart Tübingen Karlsruhe
7
8
Tabellen-Zellen miteinander verbinden
Wenn wir nun Tabellenzellen miteinander verbinden möchten, dass z.B. anstatt 3 Zellen nur
eine vorhanden ist, funktioniert das über colspan und rowspan.
Im folgenden Beispiel sollen das Feld A, B, C miteinander verbunden werden, damit nur der
Inhalt von A übrig bleibt.
So sieht normalerweise die Tabelle aus:
A B C
1 2 3
Nun kommt der Befehl colspan zum Einsatz - nachdem wir die Zellen A, B und C verbinden
möchten, also colspan="3"
<table border="1"> <tr> <td colspan="3" > A </td> <td> B </td> <td> C </td>
</tr> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> </table>
Das hat die Auswirkung:
A B C
1 2 3 Kapitel: Tabellen-Zellen miteinander verbinden
Die Zelle B und C werden nach rechts hinausgeschoben, also einfach die entsprechenden <td>
löschen, und gut ist
<table border="1"> <tr> <td colspan="3" > A </td> </tr> <tr> <td> 1 </td> <td>
2 </td> <td> 3 </td> </tr> </table>
A
1 2 3
7
9
Das gleiche klappt auch in der Vertikalen mit rowspan. Wir wollen anstatt ABC nun B und 2
verbinden.
<table border="1"> <tr> <td> A </td> <td rowspan="2" > B </td> <td> C </td>
</tr> <tr> <td> 1 </td> <td> 3 </td> </tr> </table>
Und nun haben wir Platz für den Inhalt auf der rechten Seite:
A C
B
1 3
Attribute bei Tabellen

Warnung: Diese Seite und die Erklärungen der Attribute für Tabellen werden nur aus
historischen Gründen hier aufgeführt. Design wird normalerweise nicht über Attribute und
Tabellen gemacht, sondern über CSS mit DIV und SPAN. Die hier erläuterten Attribute sind
ein veralteter Weg!
Weitere Attribute bei Tabellen

Breite und Höhe der Tabelle
Die Breite wird über width angegeben und die Höhe über height - werden Prozente
angegeben, dann wird die Tabelle abhängig von der Größe des Fensters des Surfers
gezeichnet. Ausprobieren!
<table border="1" height="200" width="80%" > <tr> <td> A </td> <td rowspan="2"
> B </td> <td> C </td> </tr> <tr> <td> 1 </td> <td> 3 </td> </tr> </table>
Ergibt eine Breite von 80% vom Browserfenster und eine Höhe von 200px.
A C
B
1 3
Kapitel:
Farbe von Tabellenzellen
Die entsprechende Erweiterung der Attribute ist hier bgcolor

8
0
<table border="1" height="200" width="80%" > <tr> <td bgcolor="yellow"> A
</td> <td bgcolor="silver" rowspan="2" > B </td> <td bgcolor="red"> C </td>
</tr> <tr> <td> 1 </td> <td bgcolor="pink"> 3 </td> </tr> </table>
A C
B
1 3
Ausrichtung innerhalb der Zellen
Für die Ausrichtung gibt es auf der Horizontalen:
• <td align="left"> - links ist Standard und muss nicht angegeben werden
• <td align="center"> - mitte
• <td align="right"> - rechts
Für die Ausrichtung gibt es auf der Vertikalen:
• <td valign="top"> - Ausrichtung oben

• <td valign="middle"> - Ausrichtung mittig
• <td valign="bottom"> - Ausrichtung unten
Und das kann natürlich kombiniert werden,

z.B. <td bgcolor="yellow" align="right" valign="top"> A </td> - so nun viel Spaß beim
ausprobieren.
Kapitel: Attribute bei Tabellen
8
1
Seiten online stellen - Website publizieren
Und nun zum Wichtigsten: das Publizieren der Website. Nach dem Publizieren kann endlich
die ganze Welt auf den Inhalt zugreifen.
Für diesen Vorgang verwendet man im Regelfall (es geht auch bedeutend umständlicher :-)
eine Software.
Kapitel: Seiten online stellen - Website publizieren

Hier finden Sie die Beschreibungen für 3 gängige Programme. Sollten Sie ein anderes FTP-
Programm einsetzen (so nennt sich diese Programmgruppe), ist die Vorgehensweise meist
ähnlich.
Der Composer ist ein Bestandteil von Netscape Navigator. Sollten Sie nicht mit diesem
arbeiten, empfehle ich FileZilla.
• FTP-Upload per FileZilla

• online stellen mit dem Netscape Composer
• online stellen mit WS-FTP 32
Eine weitere Anleitung für WinSCP (das auch sFTP unterstützt) unter http://www.php-
kurs.com/winscp-ftp-konfigurieren-und-nutzen.htm
Ganz wichtig ist, dass Sie sich nach dem Onlinestellen alle Seiten im Netz noch mal
anschauen, am allerbesten mit verschiedenen Browsern. Oft fallen Fehler erst dann auf!
8
2
per Scriptly
Der HTML-Editor Scriptly hat auch ein FTP-Programm integriert. Hier eine kurze Anleitung,
wie dieses eingerichtet und genutzt werden kann.
Und nun die FTP-Daten eintragen.
Kapitel: per Scriptly
8
3
4
8
5
8
Filezilla
Dieses FTP-Programm kann sehr viel, bietet eine komfortable Verwaltung von beliebig vielen
ftp-Zugängen und zusätzlich verfügt es über die Möglichkeit einer sicheren Übertragung
per SSL.
Zusätzlich spricht es deutsch und ist Freeware - was will man mehr?
Download
Es kann direkt heruntergeladen werden unter:
http://prdownloads.sourceforge.net/filezilla/FileZilla_2_2_18_setup.exe?download
Allgemeine Informationen erhalten Sie bei Sourceforge unter Filezilla Projekt:

http://sourceforge.net/projects/filezilla/
Dateien übertragen
Nach dem Installieren und starten können Sie direkt die Zugangsdaten eingeben.
Die Zugangsdaten erhalten Sie von Ihrem Provider.
1. Adresse: die ftp-Adresse kann je nach Provider sehr verschiedene Formen haben (z.B.
ftp.html-seminar.de oder auch nur html-seminar.de)
2. Benutzer: der Benutzername
3. Passwort: Kennwort, Passwort
Und zum Schluss auf Verbinden (beschriftet in der Grafik mit 4) klicken
Kapitel: Filezilla
8
6
1. in diesem Bereich sehen Sie die Aktion des ftp-Programmes und ggf. auch die
Fehlermeldungen vom ftp-Server (z.B. wenn Sie ein falsches Passwort eingegeben
haben)
2. in diesem Bereich ist der Inhalt Ihrer Festplatte aufgelistet
3. zeigt die Daten auf dem FTP-Server an (am Anfang eher wenige bis keine)
4. Dateibereich Heim-Festplatte: nach Auswahl des Verzeichnisses erscheinen unter 4
die Daten auf Ihrer Festplatte
5. Bereich - hier werden die zu übertragenden Dateien aufgelistet und abgearbeitet
Kapitel: Filezilla
8
7
Wird nun im Bereich "Dateien Heim-Festplatte" auf eine Datei doppelt geklickt, so erfolgt die
Übertragung der Datei. Die Übertragungsrichtung ist sehr schön im untersten Bereich zu
sehen.
Projekte einrichten
Da man in der Regel nicht bei jedem Übertragen alle Zugangsdaten eintragen möchte, kann
man sich Projekte einrichten.
Klicken Sie auf das erste Symbol in der Menüleiste oben.

Kapitel: Filezilla
8
8
Hier können nun alle Daten für den jeweiligen Zugang eingetragen werden (unter Erweitert
auch der Platz auf der heimischen Festplatte). Wenn möglich kann auch eine sichere SSL-
Verbindung eingerichtet werden. Dadurch wird das Passwort auf dem Übertragungsweg
verschlüsselt und ist durch eine "man-in-the-middle"-Attacke nur schwer auslesbar.
Einige Provider bieten die SSL-Verschlüsselung an (z.B. 1&1). Was also tun? - Einfach
erstmal ohne SSL einrichten, Verbindungsaufbau testen und die verschiedenen SSL-Arten
durchprobieren, bis eine funktioniert. Kapitel: Filezilla
Ist ein Projekt eingerichtet, erhalten Sie unter dem ersten Menü-Button eine Auswahl -
anklicken und Sie werden verbunden und können Dateien übertragen - so einfach kann die
Welt sein.
8
9
Online stellen auf dem Uni-Server
Dies funktioniert nur für Uniangehörige der Universität Tübingen. Sollten Sie nicht dazu
zählen (was durchaus wahrscheinlich ist), finden Sie auf der Seite online stellen auf
beliebigen Servern die gesuchten Informationen.
Server-Platz für Uni-Angehörige

Und nun zum Wichtigsten: das Publizieren der Website. Nach dem Publizieren kann endlich
die ganze Welt auf den Inhalt zugreifen.
Dazu müssen allerdings zuvor noch einige Arbeiten erledigt werden. Das erste ist der
Serverplatz. Man benötigt einen Provider, der einem Serverplatz zur Verfügung stellt. Im
Ihrem Fall melden Sie an der Uni eine eigene Homepage an.
Näheres dazu unter:

http://www.uni-tuebingen.de/zdv/faq/data/0000007.html
Und zum Anmelden dann unter:

http://www.uni-tuebingen.de/cgi-bin/homepages
Online stellen mit dem Netscape Composer

Nachdem Sie einen Serverplatz haben, müssen Sie im Composer noch einstellen, wie und
wohin er die Seiten übertragen soll.
Kapitel: Online stellen auf dem Uni-Server
9
0
Dabei stellt sich beim Netscape Composer ein kleines Problem, das bei anderen Programmen
nicht auftritt. Das Publikationsziel muss komplett bekannt sein. Bei anderen Programmen, z.
B. WS-FTP32 und Windows Commander 32 ist die URL-Angabe "http://homepages.uni-
tuebingen.de/" ausreichend.
Nicht so beim Netscape Composer - er benötigt den kompletten Pfad. Um den kompletten
Pfad herauszubekommen, gehen Sie in Windows auf den Start-Button, dort auf Ausführen
und geben dort ein:
ftp homepages.uni-tuebingen.de
Jetzt erscheint folgendes Fenster. Alle rot (im Ausdruck hellgrau) markierten Punkte müssen
eingegeben werden. Dazu gehört die Login-ID, die bei Studenten mit zx beginnt und 7-stellig
ist, und das Passwort. Nachdem die Meldung "User logged in" erschienen ist, folgt die
Eingabe "pwd".
Die grün (ausgedruckt hellgrau) markierte Ausgabe, die bei jedem anders ist, ist der Endteil
des Pfades. Dieser wird nach "http://homepages.uni-tuebingen.de/" in der Maske vom
Composer eingegeben.
Jetzt kann publiziert werden. Wurden die Dateien erfolgreich übertragen, erhalten Sie
folgende Meldung.
Kapitel: Online stellen auf dem Uni-Server
Herzlichen Glückwunsch - Sie haben der Welt Ihre erste Internetseite zur Verfügung gestellt.
Auf dem Uni-Server finden Sie sich im Normalfall unter der URL
http://homepages.uni-tuebingen.de/student/vorname.familienname/
oder über http://homepages.uni-tuebingen.de/ unter Persönliche Homepages in der

entsprechenden Rubrik.
Tipp: Zum Übertragen der Dateien per FTP gibt es weitaus komfortablere
Software. Näheres finden Sie unter Online stellen mit WS-FTP.
Wichtig: Sie können per FTP und externen Zugang nur innerhalb der Uni-
9
1
Grenzen arbeiten, wenn Sie nicht über den Proxy-freien Zugang
kommen!! Sollte also Ihr FTP-Programm Probleme machen, könnte
es auch daran liegen. Stellen Sie Ihren externen Zugang um.
Näheres dazu finden Sie in der FAQ auf http://www.uni-
tuebingen.de/zdv/
Übertragen von Dateien per WS-FTP auf

einen Server
Nach der Installation von WS-FTP starten Sie das Programm mit einem Doppelklick.
Automatisch erhalten Sie nach dem Start folgenden Bildschirm. Hier können Sie mit dem
Button "New" die Zugangsdaten für den Server und die Internetseite eingeben.
Kapitel: Übertragen von Dateien per WS-FTP auf einen Server

Hier werden jetzt die Zugangsdaten eingetragen:
9
2
• Der Profile-Name dient zu Orientierung für einen selber. Normalerweise wird man
wohl den Namen der Site eingeben.
• Host Name/Adresse: Der Name des ftp-Servers. Diese Daten werden vom Provider
vergeben/zugeteilt. Bei kostenlosem Serverplatz findet man die Zugangsdaten
normalerweise in den FAQs (beschrieben). Teilweise werden die Zugangsdaten auch
per E-Mail zugesandt.
(für die Uni-Tübingen ist es "homepages.uni-tuebingen.de")
• Host Type: Automatic detect eingestellt lassen
• User ID: siehe Host Name/Adresse
(für die Uni-Tübingen finden Sie dies auf Ihrem Passwortausdruck unter Login-ID)
• Password: siehe Host Name/Adresse

(für die Uni-Tübingen finden Sie dies auf Ihrem Passwortausdruck unter Passwort)
Das Abspeichern des Passwortes ist aus Sicherheitsgründen nicht zu empfehlen. Das Passwort
wird zwar verschlüsselt auf der Festplatte abgespeichert, aber es gibt bereits Software zum
Entschlüsseln dieser Daten. Wenn Sie also Wert auf Sicherheit legen, nutzen Sie Ihr
Gedächtnis und tippen das Passwort lieber jedes Mal neu ein.
Für den Verbindungsaufbau sollten Sie bereits "online" sein. Jetzt den Button "OK" drücken.
Das Programm versucht nun, sich mit dem Server zu verbinden.
9
3
Sie sehen jetzt auf der rechten Seite die Daten auf dem entfernten Server und links Ihre
Festplatte. Bevor Sie übertragen, sollten Sie den Übertragungsmodus auf "Auto" schalten!

Die Einstiegsseite der Homepage wird im Regelfall immer entweder index.html oder
index.htm heißen!
9
4
Zum Übertragen einer Datei markieren Sie diese z. B. im Fenster von der eigenen Festplatte
und klicken auf den in der Mitte zu findenden Pfeil, der auf das andere Fenster zeigt. Dann
werden die markierten Dateien übertragen.

Um die Verbindung zu beenden, klicken Sie links unten auf den Button "Close".
Um die Verbindung wieder aufzubauen, klicken Sie links unten auf den Button "Connect".
Dazu müssen Sie bereits online sein.
9
5
6
9
HTML-Tags im Überblick
Als Download gibt es die XHTML und CSS Kurzreferenz im PDF-Format.
Inhalt:
• Allgemeines
• Schriftattribute
• Schriftgrößen
• Absatzaufbau
• Aufzählungen
• Verweise [Links]
• Html-Farben
Die Kurzreferenz listet die wichtigsten Tags auf. Dabei wurden die Befehle thematisch
sortiert. Die Auflistung ist das Grundhandwerkszeug und erhebt keinen Anspruch auf
Vollständigkeit. So sind bewusst auch alle browserspezifischen und nicht allgemein
unterstützten HTML-Befehle nicht mit aufgenommen.
Die Auflistung ist wie folgt aufgebaut.
1. Spalte: HTML-Tag
2. Spalte: zusätzliche Angaben (Attribute), die wichtig sind, werden aufgeführt - das
Standardattribut ist fett dargestellt und muss nicht angegeben werden.
3. Spalte: Bedeutung
mit (e) wird erklärt, welche englische Abkürzung dahinter steckt - so kann man sich
die Teile besser merken :-)
4. Spalte: End-Tag
In hellgrau sind die HTML-TAGs und Attribute markiert, die veraltet sind und nicht mehr
genutzt werden sollten. Diese werden durch die entsprechenden CSS-Auszeichnungen
gemacht. Kapitel: HTML-Tags im Überblick
9
7
Allgemeines
HTML-Tag Attribute End-Tag Bedeutung
 Damit können ganze Passagen ausgeklammert

werden und werden vom Browser nicht mehr
angezeigt. Sehr schöne Möglichkeit, um Dinge
auszuprobieren!!!
So werden Kommentare im HTML-Code vermerkt,
die auf der im Browser angezeigten Seite nicht
sichtbar, aber beim Erstellen und Erweitern
hilfreich sind.
<hr /> Damit können Trennlinien eingezogen werden.
Farbe, Länge und Stärke können bestimmt
werden.
(e: hr = horizontal ruler = horizontale Linie)
<html> </html> Anfang und Ende des HTML-Codes. Ihre neue
Spielwiese :-)
(e: html=hypertext markup language)
<head> </head> Der Kopfbereich, in dem allgemeine Angaben
gemacht werden, die nicht im Browserfenster
angezeigt werden.
(e: head=kopf)
<body> </body> ab hier kommt unser eigentlicher Inhalt, der im
Gegensatz zum head-Bereich im Browserfenster
angezeigt wird.
(e: body=Körper)
<title> </title> Wichtig! Titel hat mehrere wichtige Funktionen:
- Titelzeile des Anzeigefensters
- Namen von gesetzten Lesenzeichen/Bookmarks
- Liste der bereits besuchten Seiten
- und für die Eintragung bei Suchmaschinen
(e: title=Titel)
Schriftattribute
HTML- Attribute End-Tag Bedeutung
Tag
Kapitel: HTML-Tags im Überblick
<b> </b> Schrift wird fett angezeigt

(e: b=bold=fett)
<i> </i> kursive Schrift
(e: i=italic)
<u> </u> unterstrichene Schrift - sehr mit Vorsicht zu
genießen,
da der Surfer bei unterstrichenen Passagen von Links
ausgeht!
(e: u=underlined=unterstrichen)
<sup> </sup> hochgestellte Schrift, z.B. 0C
9
8
(e: sup=superscript, zu deutsch etwa Hochstellung)
<sub> </sub> tiefgestellte Schrift, z.B. H2O
(e: sub=subscript, zu deutsch ungefaehr Tiefstellung)
<tt> </tt> bewirkt Schrift mit gleichen Abständen
(dicktengleich)
(e: tt=teletyper=Fernschreiber)
Schriftgröße
<h1> .. </h1> .. Leitet eine Überschrift ein (reagiert wie

<h6> </h6> Absatz!) x kann einen Wert von 1 bis 6
annehmen. Die größte Überschrift ist 1,
die kleinste 6.
(e: h=heading=Überschrift)
<h1 align=left </h1> Überschriften können wie Absätzen
.. align=center .. ausgerichtet werden (jetzt in CSS
<h2 align=right </h6> umsetzen)
align=justify
<small> </small> Macht die Schrift um einen Schritt kleiner

(e: small=kleiner)
<big> </big> Macht die Schrift um einen Schritt größer
(e: big=größer)
<font < /font > Bestimmen Sie hier die Schriftgröße von
size=...> 1 - 7. Die Angaben sind relativ. Die
Normalschriftgröße ist 3. Größere Schrift
bekommt man mit 4,5,6 oder 7. Kleinere
Schrift mit 1 oder 2.
(e: font size = Schriftgröße)
Absatzaufbau
<p> align="left" </p> Absatzbeginn - vor und nach

align="center" dem Absatz wird automatisch
align="right" Platz gehalten

align="justify" (e: p=paragraph)
(e: align=Ausrichtung)
<center> </center> zentrierte Ausrichtung (oft bei
Gedichten)
(e: center=zentriert)
<br /> erzwungener Zeilenumbruch
(Zeilenende)
(e: br=break=Umbruch)
<nobr> </nobr> erzwungener Zusammenhalt,
was z.B. für Wortgebilde wie
9
9
"V 4.1" geschickt ist.
(e: nobr=nobreak=kein
Umbruch)
<blockquote> </blockquote> Hiermit können Zitate
aufgenommen werden. Tag
verhält sich wie Absatztag,
wobei das aussehen vom
Browser definiert wird!
Meistens eingerückt, auf jeden
Fall anders formatiert wie
Rest.
(e: blockquote=geblocktes
Zitat)
Aufzählungen
Tag
<li> </li> Bei allen Aufzählungen (nächste 2 Punkte)

müssen die Einzelpunkte durch diesen Tag
gekennzeichnet sein.
(e: li = list item = Listeneintrag )
<ul> </ul> Leitet eine Aufzählugsliste ein. Wie der
Spiegelstrich dargestellt wird, bestimmt der
WWW-Browser. (weiteres siehe TAG <li> !)
(e: ul=unordered list=unsortierte Liste)
<ol start="1" </ol> Leitet eine nummerierte Liste ein - Attribut ist
type="1"> erforderlich!
start="1" start="1" - aber welcher Einheit gestartet
type="I"> werden soll
start="1" type="1" - für numerische Liste
type="i"> type="I" - Liste mit römischen Ziffern
start="1" type="i" - Liste mit kleinen römischen Ziffern
type="A"> type="A" - Liste mit Buchstaben
start="1" type="a" - Liste mit kleinen Buchstaben
type="a"> (e: ol=ordered list=numerierte Liste)
Verweise [Links]
HTML- Attribute End- Bedeutung
Tag Tag
<a href="..."> Ihre </a> für interne & externe Linkes. "Ihre
Beschreibung dazu Beschreibung" wird später im
Browser als so genannter Link
angezeigt und kann angeklickt
werden.
(e: a=anchor=Anker)
(e: href=hyper
1
0
0
reference=Hypertext-Referenz
<a href="start.htm"> </a> interner Link
<a href="http://www.uxl.de/"> </a> externe Link
<a href="http://www.uxl.de/" </a> für externen Link wird neue
target="_blank"> Browserinstanz aufgemacht.
<a href="#xy">Sprung nach xy </a> Sprungmarke (wird durch #
gekennzeichnet) zu einem
bestimmten Punkt, hier "xy". Der
Punkt muss definiert werden -
dazu nächsten Tag anschauen.
<a name="xy">irgendwas </a> dieser Punkt, hier "xy", soll direkt
anspringbar sein. "irgendwas"
darf nicht leer bleiben,.
<a href="mailto:axl@uxl.de"> </a> So kann eine E-Mail-Adresse
axl@uxl.de eingegeben werden. Durch
anklicken öffnet sich das E-Mail-
Prg. (sofern installiert) und die E-
Mail-Adresse ist bereits
eingegeben.
(e: mailto= schicke nach
Farben in HTML
Tag
<body bgcolor="..."> Hintergrundfarbe der ganzen Seite

<font color="...">farbiges </font> Farbe der Schrift
<table bgcolor="..."> </table> Hintergrundfarbe Tabellen
<td bgcolor="..."> </td> Hintergrundfarbe Tabellenzelle (geht
auch für Tabellenzeile bei <tr>)
Farben werden in HTML als sechsstellige Hex-Zahl notiert, es gibt jedoch auch eine Reihe festgelegter Namen,
die man stattdessen benutzen kann
Farbnamen Hex + Farbe

black #000000
maroon #800000
green #008000
olive #808000
navy #000080
purple #800080
teal #008080
gray #808080
silver #c0c0c0
1
0
1
red #FF0000
lime #00FF00
yellow #FFFF00
blue #0000FF
fuchsia #FF00FF
aqua #00FFFF
white #FFFFFF
Kapitel:
1
0
2
Cascade Style Sheets (CSS)
Entstehung von CSS
Das World Wide Web Consortium (W3C) entwickelte CSS, um zum ursprünglichen
Grundgedanken von HTML zurückzukehren: die Trennung der Informationen von der
Präsentation. Ohne CSS ist HTML für Inhalt, Struktur und Aussehen zuständig. Ein
aufgeblähter und unübersichtlicher Code entsteht.
Mit CSS ist HTML hauptsächlich mit der Struktur eines Dokumentes beschäftigt, CSS
dagegen ist für das Aussehen verantwortlich.
Über CSS kann eine wesentlich schlankere Seite (Downloadzeiten) in kürzerer Zeit (warum
irgend etwas doppelt angeben?) erstellt werden - und das für alle Einzelseiten einer
Homepage. Änderungen am Design sind innerhalb kürzester Zeit erledigt. Wer nicht CSS
nutzt, ist selber schuld!
Vor- und Nachteile von CSS

• Größere Layoutmöglichkeiten:
Das Design ist konsistent zwischen den Browser (siehe unten).
• Kürzere Zeiten
zur Erstellung und Pflege von Homepages: Von einer einzigen Datei aus kann ein
komplettes Homepage-Design erstellt und bei Bedarf geändert werden.
• Schnellere Übertragung:
CSS macht zahlreiche HTML-Wiederholungen überflüssig. Weniger Code bedeutet
schnelleren Download.
• Homepage funktioniert auch noch bei alten Browsern:

Auch bei Browsern, die CSS nicht unterstützen, wird die Homepage noch angezeigt Kapitel: Cascade Style Sheets (CSS)
(allerdings dann ohne CSS-Design).
• Unterschiedliche Unterstützung durch Browser:

Größter Nachteil ist die teilweise uneinheitliche Unterstützung durch Browser.
Deshalb sollten nicht alle CSS-Definitionen eingesetzt werden.
Schneller, schöner Formatieren mit CSS

Über CSS können die Formatierungen einfach und elegant vorgenommen werden. So können
z. B. Schriftattribute wie Farbe, Schriftart und Abstände bequem eingestellt werden. CSS sind
vergleichbar mit den Formatvorlagen bei Word.
Das Besondere an CSS ist, dass diese "Formatierungen" durch Auslagerung dann einfach für
alle Seiten einer Homepage gelten. Dementsprechend werden Änderungen nur noch an einer 1
0
3
zentralen Stelle durchgeführt und können auf alle Seiten einer Homepage Auswirkungen
haben (wird erst weiter hinten gezeigt).
CSS ist in der Version 1 so weit verbreitet, dass es problemlos eingesetzt werden kann. Das
Besondere an CSS ist, dass Browser, die kein CSS kennen, absolut kein Problem mit CSS
haben. Alte Browser ignorieren CSS einfach und der Seitenaufbau funktioniert trotzdem. CSS
greift nicht in die HTML-Befehle ein, sondern wird darüber gelegt.
Trennung Inhalt und Design durch CSS

Ein extrem großer Vorteil von CCS ist die Trennung des eigentlichen Inhalts vom Design.
Das Design wird in eine eigene Datei ausgelagert und kann für alle Seiten eines
Internetauftritts verwendet werden. Werden Änderungen am Design gemacht, sind durch eine
Datei sofort alle Einzelseiten uptodate
Eine Seite - viele Gesichter
An folgendem Beispiel soll gezeigt werden, das eine inhaltlich identische Seite vollständig
unterschiedlich aussehen kann.
Das Zusammenspiel von CSS und HTML-Tags in den folgenden Kapiteln
Beispiel: identische Inhalt und anderes Design CSSZengarden http://www.csszengarden.com/
Kapitel: Trennung Inhalt und Design durch CSS
1
0
4
Aufbau von CSS Befehlen
Grundlagen des CSS Konzept
CSS ist einfacher als im Allgemeinen angenommen. Es gibt nur ein paar grundlegende Regeln
zum Erfolg mit CSS:
Aufbau
Selektor Deklaration
Beispiel: h1 {color: red}
Selektor - darauf bezieht sich der Vereinbarung

Zusammenhang: zweite Teil, die Deklaration in den (Declaration), wie was
geschweiften Klammern { ... } aussehen soll.
Im Beispiel oben werden alle Überschriften h1 nun die Farbe rot bekommen.
Eigenschaften und Werte

Die Vereinbarung (Deklaration) besteht aus zwei Teilen:
• dem Eigenschaftsteil, wie z. B. Farbe, Größe, und

• der dazugehörige Wert, wie rot(Farbe) oder 30 (Größe).
TAG {Eigenschaft: Wert}
TIPP: Immer die geschwungenen Klammern beachten!
Begriffe um CSS Kapitel: Aufbau von CSS Befehlen
Vererbung
Die Deklarationen können vererbt werden. Wird z. B. für das <body>-TAG die Farbe per
CSS bestimmt, hat der <li>-TAG automatisch die gleiche Farbe, wenn diese dort nicht
definiert ist.
Cascade:
Es kann mehrere Style Sheets geben, die auch konkurrierend sein können. Wer dann jeweils
"gewinnt", hängt von verschiedenen Regeln ab. Das gehört aber zu den Techniken für
Fortgeschrittene. So kann z. B. auch ein Design extra für den Ausdruck definiert werden.
1
0
5
Stylesheets in HTML einbinden
Es gibt mehrer Möglichkeiten - zum erlernen sind die ersten 2 Verfahren geschickt. Dort sind
die CSS direkt in der HTML-Datei. Für die Entwicklung von Websites dann empfiehlt sich
die 3 Variante. Dort werden die CSS in einer externen Datei hinterlegt und diese Datei wird
dann in jede HTML-Seite eingebunden.
Variante 1: Befehl direkt im Quellcode

Direkt im Quellcode wirkt der Befehl nur an dieser bestimmten Stelle der Seite, so dass man
abweichende Designs verwenden kann.
Beispiel:
<h1 style="letter-spacing:30;">Überschrift</h1>
Alle Buchstaben bis zum Ende von </h1> werden jeweils mit einem Abstand von 30
zwischen den Buchstaben dargestellt.
Natürlich können die Befehle auch kombiniert werden.
Zusätzlich zur Buchstabenbreite kommt jetzt noch eine andere Farbe hinzu:
<h1 style="letter-spacing:30;color:red;">Überschrift</h1>
Hier ist natürlich die Frage berechtigt, warum nicht gleich mit den gewohnten HTML
Befehlen? Die Logik der Sache wird klar, wenn man diese Formatdefinitionen auslagert
(siehe Variante 3 unten). Dadurch kann dann z. B. eine Einstellung erstellt werden, die dann
für alle <h1> gelten, ohne dass speziell noch in den HTML-TAG eingegriffen werden muss.
Variante 2: Am Anfang der HTML-Datei

Im Kopfbereich der HTML-Datei werden die CSS-Eigenschaften definiert. Diese wirken dann Kapitel: Stylesheets in HTML einbinden
auf das ganze HTML-Dokument
<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<h1>jetzt HTML lernen mit CSS</h1>
</body>
</html>
1
0
6
Variante 3: Auslagern von CSS-Befehlen
Zum Auslagern werden 2 Dinge benötigt. Als erstes eine neue Datei, ich nenne diese
design.css (kann aber auch beliebig anders heißen) und als zweites einen Verweis darauf in
der HTML-Datei, die diese ausgelagerte Datei nutzen soll.
Verweis in der HTML-Datei:

Dieser Verweis sollte im head-Bereich eingegeben werden.
<link rel="stylesheet" href="design.css" type="text/css">
So, nun erstellen wir eine neue Datei mit dem Namen "design.css".
Inhalt:
h1 {
color:red;
letter-spacing:30;
}
Unbedingt auf Leerzeichen achten, und als Klammern kommen hier die geschweiften zum
Zuge!! So, Datei abspeichern und im HTML Editor zurück zur ursprünglichen Internetseite.
Kapitel: Stylesheets in HTML einbinden
1
0
7
kurz & gut:
CSS angewendet - Einstieg in Design über CSS.
Anhand einfacher Beispiele wird die Grundlage geschaffen.
CSS-Anwendung einfach gemacht

Anhand von den verschiedenen Elementen wollen wir das Zuweisen von Design über CSS
zeigen. Im ersten Beispiel wird der Überschrift h1 die Größe 28pt, die Farbe Orange und die
Schriftart Arial zugewiesen.
Farbe und Schriftartgestaltung über CSS

Für die Gestaltung der Schrift werden folgende CSS-Befehle benötigt:
color:#FF9F00;
Farbe: orange, kann entweder als Hex-Wert:"#FF9F00" oder als Farbnamen
angegeben werden: "orange", also "color:orange;" - die Farbnamen sind immer auf
Englisch!
font-size:28pt;
Schriftgröße: hier als 28pt, kann auch relativ in EM angegeben werden
font-family:arial, "lucida console", sans-serif;
Schriftart: wenn vorhanden Arial, wenn nicht vorhanden, dann "lucida console" und
wenn diese nicht vorhanden, dann eine vorhandene serifenlose Schrift
Schriften mit Serifen (Standfüßchen)
font-family:courier, serif;

</style>
<h1>wichtigste Überschrift h1</h1>
<p>Und nun ein normaler Absatz</p>
<h2>Überschrift h2</h2>
<p>Und nun ein normaler Absatz</p>
<h2>Überschrift h2</h2>
<p>Noch ein normaler Absatz</p>

1
0
8
Ausgabe:
9
0
1
Weitere Definitionen, die sich auf Schriften auswirken
font-weight:bold;
Die Schriftstärke, zur Auswahl stehen normal|bold|bolder|lighter
font-style:italic;
Anzeige der Schrift (kurz ob kursiv oder normal)
italic = kursive
oblique = schräggestellt
normal = normal
text-indent:1.5em;
Einrückung der ersten Zeile eines Textblockes um den vorgegebenen Abstand
Aufgabe:
Gestalten Sie normale Absätze (<p>) mit folgenden Eigenschaften:
• Farbe: dunkles Violett

• Schriftstärke: fett
• Schriftschnitt: kursiv
• Texteinrückung der ersten Zeile: 1.5em;
Die Ausgabe sollte ungefähr folgendes Bild haben:
An diesem Beispiel ist schön zu sehen, dass durch einmalige Definition alle Absätze einer
Seite das gleiche Design haben.
1
1
0
Schrift und Abstände
line-height:2em;
Zeilenhöhe bestimmen, wenn der Text mehrzeilig angezeigt wird - dabei ist ratsam,
das Ganze relativ zur Schriftgröße anzugeben, also in EM
letter-spacing:0.3em;
Abstände zwischen den einzelnen Buchstaben - sollte relativ angegeben werden, also
in EM
word-spacing:0.5em;
Abstände zwischen den einzelnen Wörtern - sollte relativ angegeben werden, also in
EM
Aufgabe
Bitte Überschrift 2 (<h2>) mit folgendem Design:
• Farbe: rostbraun
• Zeilenhöhe: 2em
• Abstände zwischen den einzelnen Buchstaben: 0.3em
• Abstände zwischen den einzelnen Wörtern: 3.5em
und für Absätze:
• Zeilenhöhe: 2em
• Abstände zwischen den einzelnen Buchstaben: 0.3em
1
1
1
Anmerkung: An diesem Beispiel ist die Auswirkung des Zeilenabstands erst beim
mehrzeiligen Text zu sehen.
Farbe: Vordergrund- und Hintergrundfarbe

color:#FF9F00;
Farbe für Vordergrund - angewendet auf Schrift ist dies die Farbe der Schrift. Kann
entweder als Hex-Wert:"#FF9F00" oder als Farbnamen angegeben werden: "orange"
background-color:#FF00FF
Farbe für den Hintergrundbereich; auch diese als Hex-Wert oder Farbnamen.
Aufgabe:
Hintergrundfarben für:
• h1 - #FF00FF;
• h2 - lightgrey;
• p - yellow;
1
1
2
Rahmen
border-color:#00FFFF;
Rahmenfarbe - soll nur ein Teil des Rahmens gefärbt werden, dann:
border-top-color, border-right-color, border-bottom-color und border-left-color
border-width:4px;
Rahmenstärke in Pixel
soll nur ein Bereich geändert werden:
border-top-width, border-right-width, border-bottom-width und border-left-width
border-style: dotted;
Rahmenart bestimmen - folgende Möglichkeiten gibt es:
solid = durchgezogen
double = doppelt
none = kein Rahmen (unsichtbar)
hidden = kein Rahmen (unsichtbar)
dotted = gepunktet
dashed = gestrichelt
groove = 3D-Effekt
ridge = 3D-Effekt
inset = 3D-Effekt
outset = 3D-Effekt
Soll nur ein Teil des Rahmen definiert werden, dann:

border-top-style, border-right-style, border-bottom-style und border-left-style
Aufgabe: Design für Rahmen für
• h1 - Farbe lila, Breite 1px und solid

• h2 - hellgrau, nur links und oben mit Rahmenstärke von 10px und solid
• p - Schrift schwarz, unten und rechts gepunktet orange
1
1
3
Ausrichtung von Elementen
text-align:right;
Ausrichtung von Text, möglich sind: left|center|right|justify
left = linksbündig ausgerichtet (Standard)
center = zentriert ausgerichtet
right = rechtsbündig ausgerichtet
justify = als Blocksatz ausgerichtet
vertical-align:top;
über "vertical-align:" kann die vertikale Ausrichtung bestimmen werden. Möglich
sind:
top = obenbündig
middle = mittig
bottom = untenbündig
baseline = ausrichten an Basislinie falls vorhanden, ansonsten unten bündig
sub = tieferstellen (ohne Änderung der Schriftgröße)
super = höherstellen (ohne Änderung der Schriftgröße)
text-top = am oberen Schriftrand
text-bottom = am unteren Schriftrand
Aufgabe:
• h1 - Textausrichtung rechts und Hintergrundfarbe lightskyblue

• h2 - Textausrichtung zentriert, Schriftfarbe weiß, Hintergrundfarbe limegreen
1
1
4
Grafik und Bilder
background-image: url("hintergrund.jpg");
Für das Element wird ein Hintergrundbild geladen und in der Größe des Elements
angezeigt
background-repeat:no-repeat;
Verhaltensweise des Bilds - ob es nur einmal angezeigt wird oder wiederholt -
folgende Werte sind möglich:
repeat = wiederholen (Standard)
repeat-y = nur in Y-Richtung, also senkrecht wiederholen
repeat-x = nur in X-Richtung, also waagerecht wiederholen
no-repeat = nicht wiederholen, nur einmal anzeigen
background-attachment:fixed;
Wasserzeicheneffekt - Bild bleibt trotz Scrollen stehen - mögliche Werte:
scroll = mitscrollen (Standard)
fixed = Hintergrundbild bleibt fixiert
background-position:right;
Ausrichtung des Bilds, mögliche Werte:
top = vertikal oben
bottom = vertikal unten
center = zentriert (horizontal wie vertikal)
left = horizontal links
right = horizontal rechts
Anmerkung: vertikal und Horizontal kann auch vermengt werden, z.B. soll es rechts
oben sitzen: background-position:right top;
Beispiel:
1
1
5
spezielleres
white-space:nowrap;
in bestimmten Fällen ist es notwendig, dass kein automatischer (willkürlicher
Umbruch) im ausgegeben Text stattfindet. Dies kann über die white-space: beeinflusst
werden.
normal = Zeilenumbruch automatisch (nur nicht bei HTML-Tags <pre> und
<nowrap>)
pre = Zeilenumbruch wie vorgegeben
nowrap = kein Zeilenumbruch - Umbruch benötigt HTML-Tag
text-transform:
eine automatisierte Umsetzung des Textes während der Anzeige. Mögliche Werte:
capitalize = alle Wortanfänge als Großbuchstaben
uppercase = nur Großbuchstaben
lowercase = nur Kleinbuchstaben
none = normal (Standard)
Kurzschreibweisen
Für viele CSS-Elemente gibt es Kurzschreibweisen, durch die eine schnellere Zuweisung
erfolgen kann - inwieweit das für Einsteiger zum einfachen lernen und der Übersichtlichkeit
hilft, muss jeder selber entscheiden:)
border: 1px dotted #ffee66;

Rahmen: Stärke, Art des Rahmentyps und Farbe
border-width:4px 10px;
Es können sofort die Rahmenstärken für oben/unten (im Beispiel 4px) und rechts/links
angegeben werden
Die kann auch für alle 4 Seiten erfolgen, wobei die Lesweise oben im Uhrzeiger sind
beginnt: Beispiel "border-width:4px 10px 6px 7px;" bedeutet, das oben 4 Pixel, rechts

10 Pixel, unten 6 Pixel und links 7 Pixel Rahmenstärke vergeben werden.
font: 100.01% #FF9F00 Arial,Verdana,sans-serif;
In der Kurzschreibweise können die Font-Definitionen abkürzen werden, möglich
sind:
'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' und 'font-family'
Beispiel: "font: normal small-caps 120%/80% courier;"
in langer Form ausgeschrieben wäre das: font-style: normal; font-variant: small-caps;
font-size: 120%; line-height: 80%; font-family: courier;
Unter-, Durchstreichungen und Co

text-decoration:line-through;
Mögliche Werte der "Dekoration" des Textes (wird gerne genutzt bei Links
none = normal (keine Text-Dekoration)
underline = unterstrichen
1
1
6
overline = überstrichen
line-through = durchgestrichen
kurz & gut:

Grundlagen für das Design einer Website über CSS - das Box-Modell liefert das
Grundverständnis.
Über dieses werden z. B. Farben und Abstände definiert.
1
1
7
Box-Modell bei CSS
Für jedes Element wird eine rechteckige Fläche in CSS reserviert. Der englische Begriff
"Box" steht für Schachtel (in unserem Fall, da html-Seiten ja eher in 2 Dimensionen leben,
also eine Fläche). Über das Box-Modell wird das Design einer Seite erstellt, daher ist ein
Verständnis diese Box-Modells wichtig.
Wie sieht der Aufbau der "Box" aus?

Von Innen nach außen:
• Inhalt: für den Inhalt kann eine Breite (width) und eine Höhe (height) definiert werden
• Innenabstand: definiert den Platz zwischen Inhalt und Rahmen
• Rahmen: dem Rahmen kann eine Stärke mitgegeben werden, die Strichart und eine
Farbe (auch der Rahmen unsichtbar sein)
• Außenabstand: Abstand zu anderen Elementen
Kapitel: Box-Modell bei CSS
Zur Veranschaulichung einfach die verschiedene Bespiele für die Anwendung des
Boxmodells ansehen.
1
1
8
Beispiele für die Anwendung des Box-
Modells
Farben für die einzelnen Bereiche
• Inhaltsbereich ist GELB

• Rand grün
Probieren Sie die einzelnen HTML-CSS Beispiele:
<div style="background-color:yellow;
width: 400px;
height: 100px;
">
INHALT
</div>
width: 400px; height: 100px;
Kapitel: Beispiele für die Anwendung des Box-Modells

width: 50%;
height: 50px;
">
INHALT
</div>
width: 50%; height: 50px;
width:350px;
height:50px;
border:3px green solid
">
INHALT
1
1
9
</div>
width: 350px;
height: 50px;
border: 3px green solid;
width:400px;
height:100px;
padding: 10px;
">
INHALT
</div>
width: 400px;
height: 100px;
padding: 10px;
width:400px;

height:100px;
padding: 10px;
margin: 15px;
">
INHALT
</div>
width: 400px;
height: 100px;
padding: 10px;
margin: 15px;
1
2
0
Randgestaltung und Möglichkeiten
Und nun Spielvarianten zum Rand - dem Rand kann für jeder Seite eine Definition
mitgegeben werden.
Mögliche Werte:
Linie = solid
kein Rahmen = none
unsichtbarer Rahmen = hidden
gepunktet = dotted
gestrichelt = dashed
doppelte Linie = double
3D-Effekt = groove |ridge | inset | outset
width:400px;
padding: 10px;
margin: 15px;
border-top: 3px green solid;
border-right: 2px red hidden;
border-bottom: 2px black dashed;
border-left: 12px red double;
">
INHALT
</div>
width: 400px;
padding: 10px;

margin: 15px;
border-top: 3px green solid;
border-right: 0px red hidden;
border-bottom: 2px black dashed;
border-left: 12px red double;
1
2
1
unterschiedliche Definitionen der Abstände
unterschiedliche Definitionen der Abstände für oben, unten, rechts und links
Beim Außenabstand (margin)
Genauso wie beim Rahmen kann für den Außenabstand verschiedene Abstände definiert
werden.
margin-top: Wert;
margin-right: Wert;
margin-bottom: Wert;
margin-left: Wert;
Beim Innenabstand (padding)
Genauso wie beim Rahmen kann für den Außenabstand verschiedene Abstände definiert
werden.
padding-top: Wert;
padding-right: Wert;
padding-bottom: Wert;
padding-left: Wert;
Angaben verkürzen

Es gibt Kurzschreibweisen. Haben alle 4 Seiten denselben Wert, reicht eine Angabe (z. B.
"margin: 20px;" bewirkt, das auf allen 4 Seiten ein Abstand von 20px eingehalten wird)
Soll für oben/unten und rechts/links der selbe Wert definiert werden, ist die Schreibweise
"margin:20px 35px;" - 20px für oben/unten, 35 px rechts/links
In der verkürzen können auch alle 4 Seiten definiert werden: "margin:20px 35px 15px 60px;"
- 20px für oben, 35 px rechts, 15px unten, 60px links - gelesen wird wie die Uhrzeit, man
fängt oben an.
Die verkürzte Schreibweise funktioniert sowohl für
• margin
• padding
• border
1
2
2
CLASS und ID - Bezeichner für CSS-
Elemente
CSS-Elemente können über diese beiden "Bezeichner" angesprochen werden.
Beispiel:
<p class="inhalt">Text</p>
<strong class="inhalt">Text</strong>
<p id="inhalt"> Text</p>
<strong id="inhalt"> Text</strong>
Das besonderer an CLASS ist, das damit mehrere Elemente ausgezeichnet werden können,
dagegen die ID nur für 1 einziges Element pro Seite verwendet werden darf. ID ist also zur
eindeutigen Bestimmung eines Elementes.
Sinn und Zweck von CLASS

Über die Klassen können wiederholende Designelemente bestimmt werden, im folgenden
Beispiel wird im Text mehrere Stellen mit einer Art Textmarker hervorgehoben.
Kapitel: CLASS und ID - Bezeichner für CSS-Elemente


</style>
im Beispiel wird diese

<strong class="textmarkergelb">Stelle im Text</strong>
mit einer Art
<strong class="textmarkerrot">Textmarker</strong>
hervorgehoben.
im Beispiel wird diese Stelle im Text mit einer Art Textmarker hervorgehoben.
1
2
3
Hinweis: für Classen wird in der CSS-Definition vor dem Namen ein Punkt geschrieben (für
ID ein # - siehen unten).
Sinn und Zweck von ID

Elemente, die es nur einmal gibt. Z.B. die Steuerung können so mit einer ID und den
dazugehörigen CSS-Design ausgestattet werden.
Beispiel: Rahmen um die Steuerung und Hintergrundfarbe

</style>
<div id="navi">
<ul>
<li><a href="index.htm">Startseite</a></li>
<li><a href="impressum.htm">Impressum</a></li>
</ul>
</div>
<div id="inhalt">
Hier kommt mehr zum Thema html lernen und homepage erstellen …
</div>
Kapitel: CLASS und ID - Bezeichner für CSS-Elemente

• Startseite
• Impressum
Hier kommt mehr zum Thema html lernen und homepage erstellen …
Hinweis: bei IDs wird in der CSS-Definition vor dem Namen ein # geschrieben!
Die Frage, warum nicht alles mit STYLE gemacht wird ist berechtigt – die Antwort die ich
gerade parat habe ist, das es nicht von gutem Stil zeugt und es geschickter ist, wenn man auf
einen Blick sieht, was einmalige Objekte sind.
Zu FLOAT: gibt es mehr in einem folgenden Kapitel.
TIPP: Die Definition der CSS-Style-Sheets erfolgt am besten in einer externen Datei, damit
die Definition nur einmal gemacht werden muss und in beliebig viele HTML-Seiten
eingebunden werden kann.
1
2
4
DIV und SPANs
Über die 2 Elemente DIV und SPAN kann CSS erst seine volle Pracht entfalten. DIV steht für
das englische "division" in der Bedeutung "Bereich" und ist ein allgemeines Block-Element.
Lustigerweise hat SPAN im englischen auch die Bedeutung von "Bereich", ist aber ein Inline-
Element.
Beide Elemente werden primär zum Begrenzen von Bereichen genutzt. Und über die Attribute
der Elemente kann dann Design in die umschlossenen Bereiche gebracht werden. Dabei
können die Elemente geschachtelt werden.
Wichtig ist zu verstehen, was der Unterschied zwischen den 2 Elementen ist. DIV ist ein
Blockelement. Nach ein dem DIV erfolgt nach der Definition ein neuer Block. SPAN dagegen
kann innerhalb eines Bereiches angewendet werden. Im folgenden Beispiel wird der
Unterscheid deutlicher.
Der CSS-Befehl background-color:farbe; bewirkt, dass der Hintergrund des Elements

eingefährbt wird.
DIV - Einsatz
Zwei Bereiche (z. B. die Steuerung und der Inhalt) werden platziert.
<div style="background-color:red;">
Steuerung
</div>
<div style="background-color:lawngreen;">
Inhalt
</div>
Durch die Verwendung von DIV geht das nächste Element in der nächsten Zeile weiter - wie
eine Platzierung nebeneinander erfolgen kann, kommt in einem späteren Kapitel Kapitel: DIV und SPANs
Steuerung
Inhalt
SPAN - Anwendung (nicht SPAM!)

Innerhalb eines Textes wird z. B. eine Hervorhebung ausgezeichnet. Als Beispiel wird in
diesem Text ein Teil wie vom Textmarker hervorgehoben und dann geht es normal weiter.
ein <span style="background-color:yellow;">wie vom Textmarker
hervorgehobener</span> Text und dann geht es normal weiter
1
2
5
Innerhalb der Zeile geht es nach dem SPAN-Element ganz normal weiter.
ein wie vom Textmarker hervorgehobener Text und dann geht es normal weiter
Mischen von DIVs und SPANs

Die Elemente können ineinander geschachtet werden (egal ob SPAN oder DIV).
Im Beispiel wird das Textmarkerbeispiel erweitert, dass der Text zusätzlich noch rot wird.
ein
<span style="background-color:yellow;">
wie vom
<span style="color:red;">
Textmarker
</span>
hervorgehobener
</span>
Text und dann geht es normal weiter
ein wie vom Textmarker hervorgehobener Text und dann geht es normal weiter
Design per CSS - FLOAT

Über das Float-Element kann eine Ausrichtung von Elementen geschehen.
Float ( engl. = fließen, Hin- und Herbewegung) bestimmt wie ein Blockelement reagieren soll
- im Klartext, neben dem Blockelement dürfen weitere Elementen sich befinden, die Kapitel: Design per CSS - FLOAT
ansonsten unterhalb platziert würden.
Beispiel Bildervorschau (ohne Links zur Vereinfachung)
Beispiel Bildervorschau (ohne Links zur Vereinfachung)

</style>
<img class="bildvorschau" src="ax.gif" />

1
2
6
...
Interessant ist, was passiert, wenn der Platz im Anzeigefenster nicht ausreicht - dann wird
einfach in die nächste Zeile umgebrochen. Das ist ein Grund, warum manche Websitenbauer
das FLOAT-Element in den Wahnsinn treibt : - aber es halb so wild.
Website-Layout mit Float, DIVs, CLASS und ID

Und endlich kommen wir zu dem wichtigen Punkt - Layout einer Website mit CSS.
Wir wollen im ersten Beispiel ein 2 spaltiges Layout (links Steuerung, rechts Inhalt) erstellen.
Quellcode vereinfacht ohne Links - es geht erst mal ums Prinzip.
Startseite
Impressum
Hier HTML und CSS lernen und die eigene Website erstellen - selbst ist der Mensch
Der entsprechende Quellcode:

</style>
<div id="navi">
<ul> <li>Startseite</li>
<li>Impressum</li>
</ul>
</div> 1
2
7
<div id="inhalte">
Hier HTML und CSS lernen und die eigene Website erstellen - selbst ist der
Mensch
</div>
Und im folgenden Beispiel ist zu sehen, wie ein float:right wirkt - am besten auch selber
probieren!
Startseite
Impressum
sauberes 2 Spalten Layout

OK - das bei float das Element von weiteren Inhalten "umflossen" wird, mag nicht jedem
gefallen, aber es ist der erste Schritt. Die zweite Box (mit dem Inhalt) kann jetzt z.B. über
margin ausgerichtet werden. Gleiches Beispiel oben.

</style>
<div id="navi">
<ul> <li>Startseite</li>
<li>Impressum</li>
</ul>
</div>
<div id="inhalte">
Hier HTML und CSS lernen und die
eigene Website erstellen - selbst ist der Mensch
</div>
Und das Ergebnis davon
1
2
8
Startseite
Impressum
CSS 2 Spalten Layout - Inhaltsbereich passt sich

vorhandener Breite an
Gleiches Beispiel wie oben, nun soll sich aber der Bereich für den Inhalt die verfügbare Breite
nutzen (und wenn das Browserfenster verkleinert wird, automatisch kleiner werden).
Zusätzlich wird die Breiten nicht mehr mit Pixel definiert, sondern über "em".

</style>
<div id="navi">
<ul>
<li>Startseite</li>
<li>Impressum</li>
</ul>
</div>
<div id="inhalte">
</div>
Und das Ergebnis davon selber probieren und dann Browserfenster in der Breite varrieren!
CSS 2 Spalten Layout - Inhaltsbereich und Steuerung

passen sich vorhandener Breite an
Gleiches Beispiel wie oben, nun sollen sich beide Bereiche der verfügbare Breite anpassen -
dazu werden die Breiten in Prozenten definiert.
<style type="text/css"> 1
2
9

</style>
<div id="navi">
<ul>
<li>Startseite</li>
<li>Impressum</li>
</ul>
</div>
<div id="inhalte">
</div>
Seitenbreite begrenzen
Oft wird gewünscht, dass nicht der maximal verfügbare Platz (der mit neuen großen
Monitoren immer größer wird - oft schon 1600 Pixel in der Breite) genutzt wird.
Dadurch wird die angezeigte Satzlänge pro Zeile nicht mehr so lang und die Lesbarkeit nimmt
zu
CSS 2 Spalten Layout mit fixierter Breite

Kapitel: Seitenbreite begrenzen
Gleiches Beispiel wie im Kapitel zuvor, die Breite wird auf 780 Pixel fixiert. Dazu wird um
die bisherigen Bereiche ein weiteres DIV gelegt, dem die Breite zugewießen wird.

</style>
<div id="seitenbereich">
<div id="navi">
<ul>
<li>Startseite</li>
<li>Impressum</li>
</ul>
</div>
<div id="inhalte">
</div>
</div>
CSS-Layout nun Mittig

Für eine harmonische Wirkung wird gerne der Inhalt mittig dargestellt. Somit verteilt sich die
"leeren" Bereiche, die bei größeren Auflösungen entstehen, gleichmäßig rechts und links.
Mittige Ausrichtung des Layouts

Kapitel: CSS-Layout nun Mittig
Zusätzlich kommt nun noch die mittige Ausrichtung - für den IE muß zusätzlich über den
Body-Bereich dies geschehen - für standardkonforme Browser klappt das über "margin: 0
auto;" - das auto sagt, auf beiden Seiten den Platz automatisch aufteilen.

</style>
Kapitel: CSS-Layout nun Mittig
<div id="navi">
<ul>
<li>Startseite</li>
<li>Impressum</li>
</ul> 1
3
2
</div>
<div id="inhalte">
</div>
</div>
Kopfzeile integrieren
In der Regel sieht man meistens eine Kopfzeile, in der der Domainnamen und ein Logo oder
Bild auftaucht.
Kopfbereich in CSS-Layout
Zum bisherigen Design kommt nun ein weiterer DIV-Bereich für die Kopfzeile - dieser wird
farblich hinterlegt, damit besser Sichtbar und bekommt im unteren Bereich einen schwarzen
Rand zur Abgrenzung.

</style>
<div id="seitenbereich"> Kapitel: Kopfzeile integrieren
<div id="kopfzeile">
www.HTML-Seminar.de - jetzt html lernen
</div>
<div id="navi">
<ul>
<li>Startseite</li>
<li>Impressum</li> 1
3
4
</ul>
</div>
<div id="inhalte">
</div>
</div>
Fußzeile integrieren
Die Fußzeile am Ende der Seite enthält oft das Datum der letzten Aktulisierung und einen
Link, um wieder an den Anfang der Seite zugelangen (geschickt bei längeren Seiten).
Fußzeile in CSS-Layout
Zum bisherigen Design kommt nun ein weiterer DIV-Bereich für die Fußzeile - dabei muß
allerdings den vorherigen Bereich abgeschlossen werden, was durch ein "clear:both;" erfolgt.
Die Fußzeile wird farblich hinterlegt, damit besser sichtbar und bekommt im oberen Bereich
einen schwarzen Rand mit 2 Pixel Breite zur Abgrenzung.

</style>
1
3
6
<div id="kopfzeile">
www.HTML-Seminar.de - jetzt html lernen
</div>
<div id="navi">
<ul>
<li>Startseite</li>
<li>Impressum</li>
</ul>
</div>
<div id="inhalte">
</div>
<div id="fusszeile">
www.html-seminar.de - Kontakt über .... [AT] html-seminar.de
</div>
</div> Kapitel: dreispaltiges Layout
dreispaltiges Layout
Zusätzlich neben Navigation und Steuerung kommt noch eine dritte Spalte, hier der
Infokasten.
3-spaltiges Layout in CSS

Die 3 Spalte wird über float:right; auf der rechten Seite ausgerichtet. Zusätzlich wird bei der
mittleren Spalte die entsprechenden Abstände zum Rand definiert - margin: 0 10em 0 13em;
1
3
7
Dabei steht:
• die 1. Angabe von 0 für die oberen Abstand von 0 Pixel

• die 2. Angabe von 10em für den Abstand nach rechts, was für den Infokasten benötigt
wird
• die 3. Angabe von 0 für den Abstand nach unten von 0 Pixel
• die 4. Angabe von 13em für den Abstand nach links, was für die Navigation benötigt
wird.
Als fertiger Code sieht es wie folgt aus:

</style>
1
3
8
<div id="navi">
<ul>
<li>Startseite</li>
<li>Impressum</li>
</ul>
</div>
<div id="inhalte">
</div>
<div id="infokasten">
Auf dieser Seite bekommen Sie Informationen zu ...
</div>
</div>
Steuerung per CSS

So nun geht es an die Feinarbeit - wir basteln eine Steuerung per CSS - dazu nehmen Sie als
Zutaten (den nur mit hochwertigen Zutaten schmeckt das Gericht), ein Prise <ul>, eine
Handvoll <li>, als Füllung wählen Sie Ihren gewünschten Inhalt wie Beispielsweise
Kapitel: Steuerung per CSS
"Startseite", "Über mich", "Termine" etc.
Zum Abschmecken eine Handvoll CSS, wie "border", "background-color" und "padding" und
"margin"
Steuerung vertikal
Unser Grundaufbau in HTML sieht wie folgt aus (das ganze Design kommt aus der CSS-
Definition!)
1
3
9
<div id="navi"> <ul> <li><a href="index.htm">Startseite</a></li> <li><a
href="ueber-mich.htm">Über mich</a></li> <li><a
href="termine.htm">Termine</a></li> <li><a
href="impressum.htm">Impressum</a></li> </ul> </div>
Das sieht erstmal als reines HTML nicht wirklich spektakulär aus.
• Startseite
• Über mich
• Termine
• Impressum
Da die Steuerung auf jeder unserer Seiten später auftaucht, binden wir die CSS-Definition
über eine externe Datei ein. Dadurch können Änderungen (Relaunch einer Website)
vereinfacht werden. Designumstellungen werden i.d.R. an einer einzigen Datei erledigt (egal
wie viele html-Seiten Sie auch haben.)
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <link
rel="stylesheet" type="text/css" media="screen" href="design.css" /> </head>
<body> <div id="navi"> <ul> <li><a href="index.htm">Startseite</a></li> <li><a
href="ueber-mich.htm">Über mich</a></li> <li><a
href="termine.htm">Termine</a></li> <li><a
href="impressum.htm">Impressum</a></li> </ul> </div> </body> </html>
Design über externe CSS-Datei
Diese Datei speichern wir mit dem Name "design.css" ab (der Namen, mit der die Datei über
link rel="stylesheet" eingebunden wird).
Inhalt der Datei ist folgender:
#navi {
width:200px; /* Breite des Bereichs */

text-align:left; /* Textausrichtung */
margin-top:10px; /* Außenabstand oben */
margin-bottom:10px; /* Außenabstand unten */
margin-left:20px; /* Außenabstand links */
margin-right:15px; /* Außenabstand rechts */
}
#navi ul {
list-style:none; /* keine Aufzählungspunkte */
}
#navi li {
background-color:silver; /* Hintergrundfarbe */
border-top:1px black solid; /* Rahmenfarbe Auflistungpunkt oben */ 1
4
0
border-left:25px orange solid; /* Rahmenfarbe Auflistungpunkt oben */
border-bottom:1px red solid; /* Rahmenfarbe unten */
border-right:2px blue solid; /* Rahmenfarbe unten */
padding-top:8px; /* Innenabstand oben */
padding-bottom:8px; /* Innenabstand unten */
padding-left:8px; /* Innenabstand unten */
padding-right:8px; /* Innenabstand unten */
}
• Startseite
• Über mich
• Termine
• Impressum
Steuerung horziontal
Aus der vertikal Steuerung können wir schnell eine horziontale machen, wenn nur ein wenige
Menüpunkte vorhanden sind.
Nutzen Sie hier einfach float:left;
#navi {
text-align:left; /* Textausrichtung */
margin-bottom:10px; /* Außenabstand unten */
margin-left:20px; /* Außenabstand links */
margin-right:15px; /* Außenabstand rechts */
}
#navi ul {
list-style:none; /* keine Aufzählungspunkte */
#navi li {
float:left; /* Anordnung links */
margin-left:15px; /* Außenabstand oben */
width:90px; /* Breite des Links */
background-color:silver; /* Hintergrundfarbe */
border-top:1px black solid; /* Rahmenfarbe Auflistungpunkt oben */
border-left:25px orange solid; /* Rahmenfarbe Auflistungpunkt oben */
border-bottom:1px red solid; /* Rahmenfarbe unten */
border-right:2px blue solid; /* Rahmenfarbe unten */
padding-top:8px; /* Innenabstand oben */ 1
4
1
padding-bottom:8px; /* Innenabstand unten */
padding-left:8px; /* Innenabstand unten */
padding-right:8px; /* Innenabstand unten */
}
• Startseite
• Über mich
• Termine
1
4
2
Steuerung mit Feedback auf
Benutzer
Das Aussehen von Links kann beeinflußt werden. Dazu gibt es 5 verschiedene
Zustände von Links:
Link, ...
• auf eine noch nicht besuchten Seiten

• auf eine besuchten Seiten
• der gerade den Fokus hat
• über den mit der Maus gefahren wird
• der aktiv ist.
Diese in CSS existierende Klassen nennen sich Pseudoklassen. In alten Browser

funktionierten diese nicht alle. Auch heute ist noch wichtig, bei der Definition die
exakte Reihenfolge einzuhalten. Erst kommt link, dann visited, focus, hover und
dann active.
Am Beispiel wird es deutlicher:
Die Steuerung nehmen wir aus der letzten Seite und ergänzen diese mit dem
Bereich für die Pseudoklassen. Dabei wollen wir folgende Reaktionen erreichen
(es geht hier nicht um Design sondern um das Lernen von CSS und die
Zusammenhänge).
Art des Links -> gewünschte Reaktion
• noch nicht besuchten Seiten - Text blau, keine Unterstrichung
Kapitel: Steuerung mit Feedback auf Benutzer

• auf eine besuchten Seiten - Text schwarz, durchstrichen
• der gerade den Fokus hat - Textfarbe grün, blinkt
• über den mit der Maus gefahren wird - Textfarbe rot, überstrichen
• der aktiv ist - Textfarbe orange, unterstrichen
HTML-Datei mit Steuerung als letztem Beispiel
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <link rel="stylesheet"
type="text/css" media="screen" href="design.css" /> </head> <body> <div id="navi">
<ul> <li><a href="index.htm">Startseite</a></li> <li><a href="ueber-mich.htm">Über
mich</a></li> <li><a href="termine.htm">Termine</a></li> <li><a
href="impressum.htm">Impressum</a></li> </ul> </div> </body> </html>
Und die erweiterte externe CSS-Datei (mit dem Dateinamen design.css)
#navi { text-align:left; /* Textausrichtung */ margin-top:10px; /* Außenabstand

oben */ margin-bottom:10px; /* Außenabstand unten */ margin-left:20px; /*
Außenabstand links */ margin-right:15px; /* Außenabstand rechts */ } #navi ul {
1
4
3
list-style:none; /* keine Aufzählungspunkte */ } #navi li { float:left; /*
Anordnung links */ margin-left:15px; /* Außenabstand oben */ width:90px; /* Breite
des Links */ background-color:silver; /* Hintergrundfarbe */ border-top:1px black
solid; /* Rahmenfarbe Auflistungpunkt oben */ border-left:25px orange solid; /*
Rahmenfarbe Auflistungpunkt oben */ border-bottom:1px red solid; /* Rahmenfarbe
unten */ border-right:2px blue solid; /* Rahmenfarbe unten */ margin-top:10px; /*
Außenabstand oben */ padding-top:8px; /* Innenabstand oben */ padding-bottom:8px;
/* Innenabstand unten */ padding-left:8px; /* Innenabstand unten */ padding-
right:8px; /* Innenabstand unten */ } #navi a:link { color:blue; text-
decoration:none; } #navi a:visited { color:black; text-decoration:line-through; }
#navi a:focus { color:green; text-decoration:overline; } #navi a:hover { color:red;
text-decoration:overline; } #navi a:active { color:orange; text-
decoration:underline; }
Ergebniss der Pseudoklassen

Probieren und nun mit den Möglichkeiten von CSS herumspielen, damit die
Steuerung auch nach was aussieht!
Den Zustand von focus erreicht man, wenn man über die TAB-Taste (öfters
drücken) zu einem Link wandert. Dieser kann dann mit der Return gewählt
werden.
• Startseite
• Über mich
• Termine
• Impressum
Block- u. Inline-Elemente Kapitel: Block- u. Inline-Elemente

Blockelemente benötigen nach der Definitionen einen ganzen Block und Inline-Elemente
können innerhalb einer Linie (bzw. Block) vorkommen.
Was eine Inline-Element und was ein Block-Element darstellt, ist im DTD (Document Type
Definition) hinterlegt. Typische Blockelemente sind z.B. "h1 ... h6, p".
Typische Inline-Elemente sind z.B. "strong, em, a".
Interessant ist, dass diese durch CSS "umdefiniert" werden können. Aus einem Blockelement
kann ein Inline-Element gemacht werden, bzw. die Verhaltensweise eines Inline-Elements.
Dadurch kann oftmals float geschickt ersetzt werden.
Die Umdefinition geschieht durch "display" - Beispiele:
1
4
4
li { display:inline; }
img {display:block; }
Im Beispiel werden Aufzählen in einer Reihe dargestellt und jedes Bild benötigt eine eigene
Zeile.
Steuerung horizontal
Im Beispiel mit unserer Steuerung horizontal sieht der Quellcode dann aus:
#navi3 {
text-align:left;
margin-top:10px;
margin-bottom:10px;
margin-left:20px;
margin-right:15px;
#navi3 ul {
list-style:none;
#navi3 li { Kapitel: Block- u. Inline-Elemente

display:inline; /* ERSATZ FÜR: float:left; */
margin-left:15px;
width:90px;
border-top:1px black solid;
border-left:25px orange solid;
border-bottom:1px red solid;
border-right:2px blue solid;
1
4
5
margin-top:10px;
padding-top:8px;
padding-bottom:8px;
padding-left:8px;
padding-right:8px;
</style>
<div id="navi3">
<ul>
<li><a href=index.htm>Startseite</a></li>
<li><a href=ueber-mich.htm>Über mich</a></li>
<li><a href=termine.htm>Termine</a></li>
</ul>
</div>
• Startseite
• Über mich
• Termine
Kapitel: Block- u. Inline-Elemente
Elemente ausblenden
Es gibt auch die Möglichkeit, Elemente komplett auszublenden, das keinerlei Platz für das
Element in der Browserausgabe reserviert wird. Dies hat z.B. seine Anwendung bei einer
CSS-Definition für den Ausdruck, wo beispielweise die komplette Steuerung nicht mit
ausgedruckt werden soll.
#steuerung { display: none; }
1
4
6
kurz & gut:
Bilder können präzise auf einer Seite mit CSS ausgerichtet werden. Hintergrundbilder finden
teilweise als Designelemente Verwendung - auf den ersten Blick nicht als Bild zu erkennen.
CSS - Bilder und Hintergrundbilder

Auch bei Bilder hat die Trennung von Inhalt und Design nicht halt gemacht. Im HTML-Code
wird vermerkt, dass ein Bild kommt und wo der Speicherort ist. In der CSS-Design erfolgt die
Größe, Ausrichtung, Randabstände und Randdarstellung.
Im HTML-Code kann das Bild eine ID bekommen, wenn die Einstellungen nur für dieses
Bild gelten sollen oder eine Klasse (class), wenn man mehrere Bilder mit der selben Größe,
Ausrichtung und Eigenschaften hat.
Im folgenden Beispiel wird das Bild durch die CSS-Definition rechts ausgerichtet, mit einem
Abstand nach links von 20 Pixel und dass der Text das Bild umfließt.

</style>
<img id="rechts" src="bilder/html-kurs-logo.gif" />

Hier kommt Text, der das Bild links umfließt und automatisch umgebrochen wird
Kapitel: CSS - Bilder und Hintergrundbilder
Hier kommt Text, der das Bild links umfließt und automatisch umgebrochen wird.
Für eine bessere Darstellung der Bildgröße, erhält das Bild einen roten Rahmen.
1
4
7
Hintergrundbilder - wie das Bild in den Hintergrund
kommt
Um das Bild in den Hintergrund zu packen, gibt es mehrere Möglichkeiten. Die verbreiteste
ist, es in der CSS-Datei einen Bereich zu Definieren, der für das komplette HTML-Dokument
gilt - also der Tag html bzw. body.
Beispiel: Das Bild wird nun gesetzt und wiederholt sich automatisch.
Die Schriftgröße wird auf 80% definiert und das eine Verdana verwendet werden soll. Ist
keine Verdana auf dem Computer installiert, dann eine Arial und notfall einfach eine Schrift
ohne Serifen.
Und zum Schluß wird noch die Farbe #ff0000 mitgegeben.
html, body {
background:url(bilder/html-kurs-logo.gif);
font: 80% Verdana, Arial, Verdana, Helvetica, sans-serif;
color: #ff0000;
}
Hintergrundbild mit Wiederholung X/Y
Beispiel: Das Bild wird nun links oben (left top) gesetzt und wiederholt sich nicht.
html, body {
background:url(bilder/html-kurs-logo.gif) no-repeat right top;
}
Beispiel: Das Bild wiederholt sich in der Horizontalen.
html, body {
background:url(bilder/html-kurs-logo.gif) repeat-x;
}
Kapitel: CSS - Bilder und Hintergrundbilder

Hintergrundbild mit Wiederholung x
Und nun kommt der Kniff, für was man solche Hintergrundwiederholungen gebrauchen kann
1. Man nehme folgende Grafik: Bild alleine anzeigen

2. lasse diese Grafik als Hintergrundbild horizontal wiederholen
3. Platziere die Steuerung in diesen Bereich
4. Platziere den Inhalt unterhalb
5. Fertig ist eine einfacher Internetauftritt
Und hier das fertige Beispiel - varrieren Sie die Fenstergröße
Hingrundbild komplett auf 100%
1
4
8
Wenn nun ein Hintergrundbild komplett angezeigt werden soll und automatisch in der Größe
varriert (man möchte immer das ganze Bild sehen) gibt es auch dafür einen Kniff - das aber
nur als Beispiel - in Quellcode sehen uns selber erarbeiten :)
100% Hintergrundbild
Hintergrund für andere Elemente

Anderen Elementen kann auch über die Auszeichnung "background:url(bilder/...)" ein
Hintergrundbild zugewießen werden.
Beispielsweise einer Tabelle - Beispiel in extra Fenster (variieren Sie die Fensterbreite!)
table {
width:80%;
height:70%;
background:#ffffff url(../photo/seifenstuecke-hell.jpg) no-repeat scroll ;
margin:0pt auto;
}
Tabelle mit Hintergrundbild
CSS Definitionen - Übersicht CSS Befehle

Als Download gibt es die XHTML und CSS Kurzreferenz im PDF-Format.
Es sind verschiedene Begriffe um CSS zu finden wie beispielsweise CSS Definitionen, CSS
Kapitel: CSS Definitionen - Übersicht CSS Befehle

Notation, CSS Syntax, CSS Elemente und CSS Formate. Im folgenden eine Übersicht über
die wichtigsten CSS Befehle und deren Eigenschaften
Befehl Bedeutung weitere mögliche Angaben

Schrift
font-family Schriftart Arial, Times New Roman, etc.
numerischer Wert in pt(Punkt) mm
font-size Schriftgröße
oder cm
red, green, white usw. oder HTML
color Schriftfarbe
Farbangabe
font-variant Schriftvariante normal, small-caps
font-weight Schriftgewicht normal, bold, bolder, lighter
font-style Schriftstil normal, oblique, italic
Textgestaltung
text-align Textausrichtung left, right, center, justify (Blocksatz)
line-height Zeilenabstand numerischer Wert in pt(Punkt) mm 1
4
9
(Durchschuß) oder cm
underline, overline, line-through,
text-decoration Textgestaltung
blink
word-spacing Wortabstand
oder cm
letter-spacing Zeichenabstand
oder cm
text-indent Texteinrückung
oder cm
capitalize, uppercase, lowercase,
text-transform Textart
none
Seitenränder
absoluter Abstand zum numerischer Wert in pt(Punkt) mm
margin-left
Seitenrand oder cm
margin-right
Seitenrand oder cm
margin-bottom
Seitenrand oder cm
margin-top
Seitenrand oder cm
Links
A:link Link fast alle CSS-Befehle anwendbar
A:visited Besuchter Link fast alle CSS-Befehle anwendbar
A:active Angeklickter Link fast alle CSS-Befehle anwendbar
Kapitel: CSS Definitionen - Übersicht CSS Befehle

Link beim überfahren mit
A:hover fast alle CSS-Befehle anwendbar
Maus
Bilder
red, green, white usw. oder HTML
background Hintergrundfarbe
Farbangabe
background-
Hintergrundbild none, URL
image
background- repeat, repeat-x, repeat-y, no-
Kachel
repeat repeat
Ränder
border-top-width Dicke der Rahmenlinie thin, medium, thick oder num. Wert
border-bottom-
Dicke der Rahmenlinie thin, medium, thick oder num. Wert
width
border-left-width Dicke der Rahmenlinie thin, medium, thick oder num. Wert
border-right- Dicke der Rahmenlinie thin, medium, thick oder num. Wert
1
5
0
width:
none, dotted, dashed, solid, double,
border-style Rahmentyp
groove, ridge, inset, outset
border-color Rahmenfarbe Farbname oder Hex.
padding-top Tabellenabstand oben Prozent oder num. Wert.
padding-bottom Tabellenabstand unten Prozent oder num. Wert.
padding-right Tabellenabstand rechts Prozent oder num. Wert.
padding-left Tabellenabstand links Prozent oder num. Wert.
width Rahmenbreite Auto, Prozent, num. Wert
height Rahmenhöhe Auto, Prozent, num. Wert
CSS Tipps und Tricks

Abstand nach Überschriften etc.
Teilweise ist der Abstand nach einem Blockelement wie z.B. die Überschrift nicht erwünscht.
Dieser Abstand kann sehr einfach über CSS wie gewünscht eingestellt werden.
Abstände komplett aufheben - Abstände nach oben/unten definieren:
<h1 style="margin-bottom: 0px;">H1-Überschrift</h1>

<p style="margin-top: 0px;">Fließtexte usw. usw.</p>
Nach Belieben kann der Abstand geändert werden - einfach die gewünschte Pixelzahl
einstellen. Also anstatt 0px z.B. dann 3px
<h1 style="margin-bottom: 3px;">H1-Überschrift</h1>
Bilderrahmen mit Punkten bei Mauskontakt

Wenn ein Bild mit der Maus überfahren wird, erscheinen anstatt dem normalen Rahmen ein
gepunkteter Rahmen
Kapitel: CSS Tipps und Tricks
für die ausgelagerte css-Datei

:hover img { border: 1px dashed #0000FF }
für die HTML-Seite

<a href="seite.htm">
<img src="bild.jpg" alt="Erklärung zum Bild" border="1" />
</a>
Anfangsbuchstaben hervorgehoben
1
5
1
Besonders als erster Buchstabe in einem Absatz lockert er den Absatz auf und dient dem
Aussehen. Natürlich sollte genug Text folgen, damit dieser den Buchstaben "umfließen" kann.
Ist der Browser nicht CSS-tauglich, wird der Buchstabe ganz normal angezeigt.
.letterspeziale
{ float: left;
font-size: large;
font-weight: bolder;
padding: 5px;
background: midnightblue;
color: white;
}
für die HTML-Seite

<span class="letterspeziale">B</span>esonders netter Effekt ...
Text umfließt Bild

Wenn anstatt dem HTML-TAG align="right" CCS verwendet werden soll, kann dies über die
folgenden Zeilen definiert werden. Um das Bild fließt der Text. Über float wird festgelegt, ob
rechts oder links herum.
width und height sollten auf das entsprechende Bild angepasst werden.
Einen Rahmen erhält man durch die border-Anweisung.
.bild {
float:right;
width:160px;
height:259px;
border:1px solid black;
}
für die HTML-Seite

<img class="bild" src="bilder.jpg" alt="Erklärung zum Bild" /> Kapitel: CSS Tipps und Tricks
Anbei ein paar hübsche Showeffekte für den IE

Die Effekte sind allerdings mit Vorsicht zu genießen, da sie nur mit dem IE ab der Version 4
laufen. Trotz allem nett :-)
Nette Effekte (nur für IE)
1
5
2
CSS-Layout-Generator
Dieser Punkt kann nur Online genutzt werden:
http://www.html-seminar.de/css-layout-generator.htm
Kapitel: CSS-Layout-Generator
1
5
3
Vorstellung Projekt: erste selbsterstellte
Website
Nachdem am besten das Lernen durch ein eigenes Umsetzen erfolgt, wird im folgenden das
bisherige Wissen praktisch umgesetzt. Dazu wird eine komplette Website erstellt.
Entweder Sie überlegen sich ein eigenes Projekt oder übernehmen einfach das
Beispielprojekt: Eine Website für den (eigenen?) Verein.
Wenn Sie dieses Kapitel vollständig durchgearbeitet haben, haben Sie eine eigene Website,
die Sie nach Belieben auch noch erweitern können. Hier werden alle grundlegenden Schritte
nacheinander vorgestellt und sofort umgesetzt.
Vorstellung Projekte: erste selbst erstellte

Websites
Im folgenden werden 2 verschiedene Techniken gezeigt.
Layout über CSS

Durch die aktuelle Technik ist eine Trennung von Inhalt
und Design möglich, die schlanke und schnelle Websiten
Kapitel: Vorstellung Projekt: erste selbsterstellte Website

ermöglicht.
Im Beispiel erstellen wir ein Website "Säulen des 20.

Jahrhunderts" mit Grafik, Steuerung und Schlagschatten.
Layout über Tabelle - old school

Die alte Art, Design zu machen, war über Tabellen und
ausblenden der Rahmen. Da sehr viele Websiten noch auf
diese Art gemacht sind, ist es Sinnvoll, auch diese Technik
zu kennen - dadurch können Sie die aktuelle Technik über
CSS Design zu machen, besser einschätzen.
Beispiel ist ein imaginärer Schachclub.
1
5
4
CSS Design - Tabellenloses Design
Schlanke Websites durch
CSS-Design
Im folgenden Projekt werden wir rechts im
Beispiel angezeigte Homepage erstellen.
Testen Sie bei der fertigen HTML-Seite die
Reaktion, wenn das Browserfenster
verkleinert wird. Und bei Bedarf können Sie
nachsehen, wie der komplette Quellcode
aussieht.
die 4 Bereiche der Website

Diese Website gliedert sich in 4 Bereich
• Kopfzeile: Hintergrundbild-Download
• Zeile Steuerung: Hintergrundfarbe ist #ceb98e
• Übergang mit Schattenwurf: Download Schattenwurf
• Inhaltsbereich
Wenn Sie mit einem anderen Bild für den Kopfbereich probieren wollen, stehen folgende zur
Verfügung:
• Feuerwerk 1
• Feuerwerk 2
• Taubendach
• Weinberge
Kapitel: CSS Design - Tabellenloses Design

• Katze
• Hund
Nach dem Anzeigen mit der rechten Maustaste auf das Bild klicken und "Bild speichern
unter" wählen.
Die Bilder können frei verwendet werden, da ich diese selber fotografiert habe - bitte einen
Link auf mich (www.pratzner.de) setzen.
sonstige Bilder
• Welpe
1
5
5
Beispielwebsite mit HTML und CSS
Inhalt über HTML und CSS-Design
Wir bauen am Beispiel "Säulen des 20. Jahrhunderts" eine extrem schlanke und schnelle
Website mit HTML und CSS auf, die aktuellen Forderungen entspricht. Die Inhalte werden in
HTML erstellt, das Design wird komplett über CSS realisiert.
Wie anfange – ist oft das Problem vom Anfänger. Sehen wir uns an der Beispielseite die
Entstehungsschritte an. Die einzelnen Schritte sind mit den entsprechenden Kommentaren
versehen, damit ersichtlich ist, warum dieser Weg gegangen wird.
Es gibt natürlich mehrere Wege nach Rom und zur eigenen Website – dies hier soll zum
lernen dienen und nicht als Religionsfrage. Warum wir primäre CSS nehmen, können Sie an
anderer Stelle im Kurs nachlesen.
Kapitel: Beispielwebsite mit HTML und CSS
1. Schritt – das HTML-Grundgerüst

Als erstes wird das Grundgerüst in HTML erstellt. Dies ist deshalb so wichtig, dass das
Aussehen nicht abweicht. Bereits durch die erste Zeile mit der DOCTYPE-Definition wird
dem Browser gesagt, wie er reagieren soll. Wichtig ist, dass die DOCTYPE-Definition in der
ersten Zeile steht, ansonsten verfällt der Browser (i.d.R. der IE in den Quircks-Modus) in
merkwürdige Darstellungsformen und man wundert sich. Nehmen Sie das sehr ernst, selbst
eine Leerzeile vor der DOCTYPE entwertet diese!

1
5
6
Es gibt bei den DOCTYPE-Definitionen 3 (eigentlich nur 2 ernstzunehmende) Möglichkeiten.

Wir nutzen hier die härteste – die Strict Methode.
Zum Grundgerüst gehören natürlich der HEAD-Bereich und der BODY-Bereich. Das Ganze
wird von unserem hmlt-TAG umrahnt.

<head>
</head>
<body>
</body>
</html>
2. Head-Bereich
Innerhalb des Head-Bereich geben wir den Title dieser Seite mit.

<title>Design über CSS pur - Beispiel</title>
Dieser wird im Kopf des Browserfensters angezeigt, in den Lesezeichen und von
Suchmaschinen dann als Link zum anklicken.
Weiterhin wird der Zeichensatz (charset) angegeben, damit dem Browser im Vorfeld bekannt
ist, welcher Zeichsatz (Anmerkung öäüß) er erwarten kann.
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> 1

5
7
3. CSS-Definitionen
Innerhalb dieses Beispieles werden wir im Kopfbereich auch die CSS-Definitonen
aufnehmen. Dies hat mehr didaktische Gründe, das man sobald es mehr als eine Seite ist, die
CSS-Definitionen in eine eigene Datei auslagert. Hier ist es zum Erstellen und Lernen OK
und am Ende hält Sie niemand davon ab, die CSS-Definition auslzuagern.
<!—
-->
</style>
Unser fertiger HEAD-Bereich am Stück:

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />

<title>Design über CSS pur - Beispiel</title>
<!—
-->
</style>
</head>
<body>
1
5
8
</body>
</html>
4. der Inhaltsbereich
Der sichtbare Inhalt besteht aus 4 Bereichen:
• der obere Bereich mit den Säulen für den Hintergrund und den Moto der Seite.
• die Steuerung
• der Übergangsbereich mit dem Schlagschatten
• der Inhaltsbereich
Für diese 4 Bereiche erstellen wir jeweils einen DIV-Container. Vorerst werde ich für jeden
Bereich wenig Inhalt eingeben, damit man sieht, wo welcher Bereich steckt.
<div id="kopfbereich">
<p>Säulenbauten des 20. Jahrhunderts</p>
</div>
<div id="steuerung">
Steuerung

</div>
<div id="schatten">
Hier kommt der Schatten später
</div>
<div id="inhalt">
Der eigentliche Inhaltsbereich
</div>
Diese packten wir nun in umserem Grundgerüst in den Bereich zwischen dem Anfangs-TAG
<body> und dem End-TAG </body>.
1
5
9
Wenn wir uns nun den bisherigen HTML-Code in der Vorschau ansehen, ist das noch nicht
wirklich überzeugend.
Es sieht eher aus, als wäre die Seite 1995 erstellt worden.
Das besondere bei CSS ist, das eine Trennung zwischen Inhalt und Design stattfindet. Daher
werden die HTML-Seiten auch extrem schlank und schnell.
Jetzt fangen wir an, uns ans Design zu machen.
Zum Kontrolle (und zum Lernen) werden wir nun jedem DIV-Bereich eine Hintergrundfarbe
mitgeben. Dadurch sehen wir nun bei der Vorschau, wo welcher Bereich anfängt und aufhört.
Dazu geben wir im CSS-Bereich nun für die einzelnen DIV-Bereiche die CSS-Definitionen

ein. Eine exakte Auflistung aller CSS-Befehle finden Sie im Kapitel CSS Definitionen -
Übersicht CSS Befehle.
Der obere Bereich mit dem Namen "kopfbereich" bekommt nun seine Hintergrundfarbe.

Zur Erinnerung, das # sagt, dass es sich um eine ID-Bereich handelt. Zwischen die
geschweiften Klammern kommen die eigentlichen CSS-Defintionen:
1
6
0

Nutzen Sie die Einrückungen. Diese sind nur für Sie und dienen primär der Übersicht. So
sehen Sie gemachte Fehler später schneller. Einer der beliebtesten Fehler in CSS sind die
vergessenen Semikolons ";". Machen Sie nach jedem Befehl eines!! Sofort! Den ein
vergessenes kann die ganzen späteren folgenden Definitionen ausschalten.
Geben Sie nun jedem der 4 Bereiche eine Farbe (gelb = yellow, grün = green, orange =
orange) und sehen Sie sich das Ergebnis in der Vorschau an.
Hintergrundgrafik mit den Säulen

Nun wird das erste Design-Element aufgenommen – die Grafik mir den Säulen. Wenn wir die
Grafik genau ansehen, fällt einem auf, das diese herzhaft breit ist. Die Grafik ist breiter als
jeder normale Monitor. Warum das? Wir wissen nicht, mit was für einer Auflösung die
Besucher kommt. Hat dieser 1024 Pixel in der Breite oder 1650. Die Grafik ist breiter und
somit wird einfach mehr angezeigt. Den Rest sieht niemand und stört damit auch niemand.
Natürlich kann man die Frage stellen, warum wir eine Grafik für den Hintergrund brauchen
und nicht einfach eine Farbe nehmen ist. In der Grafik ist der Himmel mit einem leichten
1
6
1
Farbverlauf versehen. Das entspricht der Wirklichkeit und sieht somit besser aus (sehen Sie
keinen Farbverlauf, dann wird es Zeit für einen anständigen Monitor).
Laden Sie die Grafik herunter (rechts Maustaste auf den folgenden Link und dann "Speichern
unter...". Erstellen Sie ein Verzeichnis mit dem Namen "bilder" in dem Verzeichnis, in dem
Ihre HTML-Datei liegt und speichern dort die Grafik mit dem Namen "hg-saeulen-img-
9599.jpg" ab.
Um diese nun in den Hintergrund von unseren Seite zu packen, wird der CSS-Bereich
ergänzt:
#kopfbereich {
background:url(bilder/hg-saeulen-img-9599.jpg) no-repeat left top;
height:150px;
Über die CSS-Definition "backgrund" geben wir den Dateinamen und das Verzeichnis der
Grafik mit, sagen über "no-repeat" dass die Grafik nicht wiederholt werden darf und dass
diese platziert wird. Die Platzierung erfolgt oben (top) und links (left).
Zusätzlich sagen wir dem DIV-Bereich, dass dieses 150 Pixel hoch sein soll, damit die Grafik
in der kompletten Höhe angezeigt wird.
Zu Schrift in diesem Bereich kommen wir später.
Steuerung – welche Hintergrundfarbe

1
6
2
Mit Farben tun sich viele Websiten-Bastler schwer. Wenn wie in diesem Beispiel bereits ein
Bild vorhanden ist, nehmen Sie eine Farbe aus dem Bild. Hier nehmen wir ein Beige aus den
Säulen. Wenn Sie den HTML-Editor Scriptly nutzen, können Sie über die Pipette die Farbe
auswählen.
Über die CSS-Definition background-color geben wir dem Bereich für die Steuerung die
Farbe mit.
#steuerung {
background-color:#ceb98e;
Achten Sie bei den Hintergrundfarben darauf, dass diese einen guten Kontrast zu
Vordergrundfarbe (Schrift) bietet. Auf die Lesbarkeit der Schrift kommt es an. Wenn Sie die
Besucher quälen wollen, nehmen Sie ein Blau als Hintergrund und ein Rot als Schriftfarbe.
Das ist immer schmerzlich und garantiert unerwünscht.
Schattenwurf
Für Bereich zwischen der Steuerung und dem Inhalt gibt es einen Schattenwurf. Dieser ist
auch nur eine Grafik. Das besondere an der Grafik ist, das diese Grafik nur 1 Pixel breit ist.
Damit aus der 1-Pixel-breiten Grafik ein Schatten wird, lassen wir diesen einfach in der X-
Richtung wiederholen.
Wie schon bei den Säulenhintergrund wird der CSS-Befehl "background" verwendet, diesmal
mit "repeat-x".
1
6
3
#schatten {
background:url(bilder/schattenwurf-grau-v.png) repeat-x;
Warum nur 1 Pxel breit? Das ergibt eine minimale Dateigröße :)
Gestaltung Schrift
Wir wollen eine saubere Schrift wie Arial – und zwar für alle Bereiche unserer Website.
Daher definieren wir nun die Schrift und zwar für 2 HTML-TAGs , die auf jeden Fall
vorkommen und unseren kompletten Inhalt umschließen. Dadurch, dass diese den kompletten
Inhalt umschließen, gilt die Definition für alle Elemente.

Deshalb definieren wir die Schrift für die TAGs "html, body". Dabei werden verschiedene
Schriften angegeben. Arial, Helvetica, sans-serif. Ist auf dem Computer des Sufers keine Aral
installiert, wird Helvetica genutzt. Ist diese auch nicht vorhanden, wir eine Schrift ohne
Serifen genutzt (also irgendwas, was Arial ähnlich sieht).
html, body {
font: 100% Arial, Helvetica, sans-serif;
Danach wird alle Schrift in Arial, bzw. einer serifenlosen Schrift angezeigt.
1
6
4
Schrift im Kopfbereich
Unsere oberste Schrift soll weiß werden und rechts ausgerichtet sein. Das besondere ist, das
egal wie groß das Browserfenster diese rechts bleibt und gegebenenfalls umbricht.
Wir haben diese Schrift zwischen den Absatz-TAGS <p> und </p> gesetzt. Somit können wir
für den HTML-TAG <p> definieren, dass die Schrift weiß ist und eine gewisse Größe haben
soll.
Damit dies nur für den Kopfbereich gilt, setzen wir den CSS-Tag entsprechend:
#kopfbereich p {

color:white;
text-align:right;
font-size:2em;
padding:0.4em 0.4em 0 0;
color:white – irgendwie logisch
text-align:right; - die Schrift soll rechts ausgerichtet werden.
font-size: 2em; - wir geben die Schriftgröße relativ an. Das hat verschiedene Vorteile (siehe
hierzu das entsprechende Kapitel).
1
6
5
padding: 0.4em 0.4em 0 0; - es soll Abstand zu den Rändern gehalten werden, und zwar 0.4
em von oben (das ist der erste Wert), 0.4em nach rechts (das ist der zweite Wert) und jeweils
0 nach unten und 0 nach rechts. (Tipp: diese Angaben sind immer wie eine Uhr im
Uhrzeigersinn zu lesen und der Start ist bei 12 Uhr).
Durch diese Angaben haben wir nun eine große weiße Schrift. In der Vorschau ansehen.
Abstand innerhalb der Steuerung

In der Steuerung wollen wir auch einen Abstand zum linken Rand: wir geben dazu im DIV-
Bereich "steuerung" ein:

padding-left:1em;
1
6
6
Abstände innerhalb des Inhaltsbereichs
Damit auch der Inhalt Abstand zu den Nachbarn hält (ist immer gut und beugt
Rechtsstreitigkeiten vor), geben wir dem DIV-Bereich "inhalt" folgenden Wert mit:
padding-left:2em;
Dadurch die einzelne Angabe wird nun 2em Abstand von oben, rechts, unten und links
gehalten. Vergleichen Sie dazu die Angabe bei "Schrift im Kopfbereich".
Wenn wir jetzt das Ergebnis in der Vorschau ansehen, sieht das dem gewünschten Ergbenis
schon sehr ähnlich. Es fällt nun noch ein Abstand von allen Elementen zum Rand auf, indem

das weiß heftig hervorblitzt.
1
6
7
Websiten ohne Bikini-Streifen
Um keinen Abstand um alle Elemente mehr zu haben, setzen wir die Abstände für margin und
für padding kollektiv auf 0. Dies scheint jetzt erstmals verwunderlich, ist aber absolut üblich.
Dadurch hat man selber in der Hand, wie groß einzelne Abstände sein sollen. Allerdings sollte
man auch keine Abstände vergessen zu definieren. Schauen wir uns erstmals das Ergebnis
von unserem 0-Setzen an. Durch das * definieren wir, dass es auf alle Elemente angewendet
wird.
* {
margin:0;

padding:0;
1
6
8
Keine lästigen weißen Streifen mehr. Allerdings sind die Abstände zwischen den
Überschriften und den Absätzen auch verschwunden. Sollten Sie das nicht sehen, fügen Sie
ein paar Überschriften und Absätze im Inhaltsbereich ein.
Nun Definieren wir noch die Abstände und das Ergebnis entspricht der Vorlagen:
#inhalt h1, h2, h3, p, ul {
padding-bottom:.7em;
1
6
9
Wir definieren, dass die Elemente "h1,h2,h3,p,ul" einen Abstand nach unten von 0.7em haben
sollen. Dabei ist die relative Größenangabe von "em" wirklich praktisch.
Zusätzlich noch für Auflistungen Abstand von links, damit die Aufzählungspunkte sauber
sitzen.
#inhalt ul {
padding-left:2em;
Und nun wird die orange Hintergrundfarbe noch entfernt, und es sieht wie geplant aus.
1
7
0
Perfekt machen – CSS-Definitionen auslagern
Um die Sache abzurunden (bisher war es praktisch, das Design in der HTML-Datei zu
entwickeln um schnell die Auswirkungen von Änderungen kontrollieren zu können), können
wir den kompletten CSS-Bereich auslagern.
Anstatt der CSS-Definitionen kommt dann der Link zu der CSS-Datei in den Head-Bereich in
der Form:
<link href="style.css" type="text/css" rel="stylesheet" />
Viel Spaß beim Spielen und Variieren Ab jetzt beginnt das Spielen und Variieren – probieren
und testen und die Ergebnisse in verschiedenen Browsern ansehen. Das ist eine effektive
Form des lernen. Viel Spaß beim Testen und CSS lernen.
Übung: Ergänzung Fußzeile
Ergänzen Sie das Beispiel um die abgebildete Fußzeile.
1
7
1
Layout über Tabellen - old school
Inhaltlich kommen folgende Schritte:
1. Seiten erstellen
Seiten sind für das Projekt sinnvoll
2. Grunddesign
Erscheinungsbild von der Aufteilung der einzelnen Elemente
3. Steuerung erstellen
Wie kommt die Steuerung auf alle Seiten
4. Logo/Bilder platzieren
Logo in der Seite aufnehmen
5. Text auf die Seiten
das bildet angeblich :)
6. Design über CSS
Farbe/Art der Schrift etc.
7. Domain anmelden
Ist mein Wunschnamen noch frei und wie kann ich diesen reservieren
8. Online stellen
die Website online stellen, damit die Welt mein Werk bewundern kann
Lassen Sie sich am Anfang nicht durch ein weniger schönes Design abhalten. Das Aussehen
kommt erst im Schritt "Design über CSS". Solange sieht die Website "relativ" langweilig aus.
Die grundlegenden Techniken (HTML-Editor bedienen, HTML-Tags einfügen) sollen bereits

bekannt sein. Wenn noch Fragen offen sind - die Antworten finden Sie in dem Kapitel
"Einsteiger"
So - und nun viel Spaß bei unserem Praxis-Projekt

weiter zum erster Schritt Seiten erstellen
Projekt: Seiten erstellen Kapitel: Layout über Tabellen - old school
Als Projekt erstellen wir im Folgenden eine Website für den eigenen Verein. Natürlich
können Sie nach Belieben anderen Inhalte und Aufbau wählen - es zählt hier zum Lernen
primär der Vorgang und weniger der Inhalt!
Theorie: Bevor Sie wie wild, irgendwelche Seiten erstellen, sollten Sie sich überlegen, was
erwarten Ihre Besucher von Ihrer Homepage. Und genau diese Seiten sollten auf jeden Fall
(natürlich nicht bei Ausruf einer Anarchie) vorhanden sein. Fragen Sie einfach verschiedene
Menschen, was diese erwarten würden.
Für unseren Verein - sagen wir doch einfach Schachverein "Patt e.V." werden folgende Seiten
gewünscht:
1
7
2
Startseite kurze Vorstellung, um wen es hier geht
Wann sind die normalen Treffen / wann besondere

Termine
Ereignisse (Feste/Feiern) / wann sind Auswärtsspiele
neue Mitglieder wie können Interessenten dazu stoßen, was sind die
werben Voraussetzungen (Alter/Wissen)
Lageplan Damit man auch gefunden wird
wie kann ich Fragen loswerden, wen kann ich ansprechen,

Kontakt
wer ist wofür zuständig
gesetzliche Anforderungen müssen erfüllt werden - dazu

Impressum
gehört das Impressum und der Inhalt
So - das soll für den Anfang ausreichen. Es können beliebig viele weitere Seiten später
aufgenommen werden.
Als erstes benötigen wird die entsprechenden Seitennamen. Wie unter "Links" beschrieben,
gibt es bestimmte Anforderungen an die Dateinamen:
• nur Kleinbuchstaben
• keine Leerzeichen
• keine öäüß oder sonstige Sonderzeichen
• mehr unter Links
Seite Dateinamen
Startseite index.htm
Termine termine.htm
Kapitel: Projekt: Seiten erstellen
neue Mitglieder werben mitglieder_neue.htm
Lageplan lageplan.htm
Kontakt kontakt.htm
Impressum impressum.htm
Auf allen HTML-Seiten benötigen Sie folgendes Grundgerüst, das später ausgeschmückt
wird.
1
7
3
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Legen Sie diese Seiten nun an.
Projekt: Grunddesign
Die Aufteilung der einzelnen Elemente, wie beispielsweise Steuerleiste, Inhalt, Adresse, Logo
wird im Grunddesign festgelegt. Dabei gilt es die Zielgruppe zu beachten. Je weniger
Webproof (Internetunerfahren) die meisten Besucher sein werden, desto "gewohnter" sollte
der Aufbau sein. Mit dem folgenden Aufbau liegen Sie normalerweise nie falsch.
Das Logo kann links oben platziert werden. Darunter die Anschrift und Telefon. Auf der
linken Seite die Steuerung und rechts der Inhalt.
Kapitel: Projekt: Grunddesign
Wenn Sie sich für ein Design entschieden haben, sollten Sie dieses auf allen Seiten Ihrer
Website verwenden. Haben Sie auf jeder Seite ein anderes Design, führt das nur zur
Verunsicherung des Besuchers - wenn Sie das möchten, müssen Sie das machen.
Für diesen Aufbau benötigen wir eine Tabelle. Die linke Spalte für das
Logo/Anschrift/Steuerung. Die rechte Spalte für den Inhalt.
<table height="100%" cellpadding="10" border="1" >

1
7
4
<tr>
<td width="175" bgcolor="yellow" >
Logo <br>
Adresse <br>
<br>
Steuerung
</td>
<td width="*" >
Inhalte
</td>
</tr>
</table>
Die Ausgabe im Browser sieht wie folgt aus: Ansicht im Browser
Die einzelnen Elemente des table-TAGs

Kapitel: Projekt: Grunddesign
<table bgcolor="yellow" height="100%" width="175"
cellpadding="10" border="1" >
Dabei haben die einzelnen Attribute bei der Tabelle folgende Funktion:
bgcolor="yellow"
Die Hintergrundfarbe der Tabelle - je nach Geschmack, aber immer mit der Prämisse
der bestmöglichen Lesbarkeit!
height="100%"
Die Höhe der Tabelle - also den gesamten Bildschirm = 100%
1
7
5
width="175"
Die Breite dieser Tabelle - für das Logo und die Steuerung reichen im Normalfall 150
Punkte aus - es soll ja auch noch Platz für den eigentlichen Inhalt übrig bleiben
border="1"
Der Rand der Tabelle wird während der Entwicklungsphase der Website eingeschaltet,
damit exakt ersichtlich ist, wo was anfängt und aufhört. Ist das Design dann
entsprechend fertig, werden die Ränder normalerweise mit border="0" ausgeschaltet
cellpadding="10"
Um ein wenig Rand zwischen Tabelle und Tabellen-Inhalt zu schaffen, gibt es diesen
Befehl
Damit die Tabelle bündig an die Seitenränder anschließt, finden Sie den entsprechenden Tipp
unter Tipps und Tricks.
Weiter geht es zum Erstellen der Steuerung.
Projekt: Steuerung erstellen

Als nächsten Schritt integrieren wir die Links auf die einzelnen Seiten - das Ganze wird dann
Steuerung genannt.
In das bisherige Grunddesign kommen die einzelnen Links:
<tr>
<td width="175" bgcolor="yellow" > Kapitel: Projekt: Steuerung erstellen
Logo <br>
Adresse <br>
<br>

<a href="index.htm"> Startseite </a>
<br>
1
7
6
<a href="termine.htm"> Termine </a>
<br>
<a href="mitglieder_neue.htm"> mitspielen? </a>
<br>
<a href="lageplan.htm"> Lageplan </a>
<br>
<a href="kontakt.htm"> Kontakt </a>
<br>
<a href="impressum.htm"> Impressum </a>
</td>
<td width="*" >
Inhalte
</td>
</tr> Kapitel: Projekt: Bilder aufnehmen
</table>
Im nächsten Schritt integrieren wir das Logo und eine Grafik auf der Startseite.
Projekt: Bilder aufnehmen

1
7
7
Als nächsten Schritt integrieren wir das Logo.
In das bisherige Grunddesign kommt das Logo ganz oben platziert:
Wenn Sie Befehle nicht mehr auswendig kennen (was vorkommen kann) - kann unter
Einsteiger -> Grafiken 1 nachgeschlagen werden.
<tr>
<td width="175" bgcolor="yellow" >

<img src="http://www.html-seminar.de/schach_logo.jpg"
width="175" height="137" border="0" alt="">
Adresse <br>
<br>

Kapitel: Projekt: Bilder aufnehmen
<br>
<br>
<br>

1
7
8
<br>
<br>
</td>
<td width="*" >
Inhalte
</td>
</tr>
</table>
Hinweis: Nach dem Tabellen-End-TAG folgt sofort ohne Leerzeichen das Bild. Somit wird
das Bild ganz oben in der Tabelle dargestellt.
Damit Sie mit demselben Bild probieren können, klicken Sie in der Browser-Ansicht auf dem
Bild mit der rechten Maustaste und wählen aus dem Menü "Bild speichern unter..." und
speichern es auf Ihre Festplatte in das entsprechende Verzeichnis, in dem Sie Ihre HTML-
Kapitel: Projekt: Bilder aufnehmen
Daten lagern.
Nun kommt noch die Anschrift des Vereins dazu:
<tr>
<td valign="top" width="175" bgcolor="yellow" >

1
7
9


Patt e.V. <br>
Springer-Weg 12 <br>
77777 Turmstadt <br>
Tel. 555-555-0 <br>
<br>

<br>
<a href="termine.htm"> Termine </a> Kapitel: Projekt: Bilder aufnehmen

<br>
<br>
<br>
<br> 1
8
0
</td>
<td width="*" >
Inhalte
</td>
</tr>
</table>
Im nächsten Schritt integrieren wir Text.
Projekt: Text drauf

Nun kommen wir zum Text - und benötigen nur eine Handvoll Befehle. Bitte daran denken -
das Design kommt erst im nächsten Schritt.
Beim Text geht es nun primär erst einmal um die Aufteilung des Textes. Lange Bleiwüsten
Kapitel: Projekt: Text drauf
will niemand lesen - daher schöne Absätze machen und sich kurz fassen.
Wenn Sie Befehle nicht mehr auswendig kennen (was vorkommen kann) - kann unter
Einsteiger -> Umbruch, Absatz und Einsteiger -> Überschriften und folgend nachgeschlagen
werden.
1
8
1
<tr>
<td valign="top" width="175" >

Adresse <br>
<br>

<br>
<br>
<br>

Kapitel: Projekt: Text drauf
<br>
<br>
</td>
1
8
2
<td width="*" >
<h1>Ihr Schachverein sagt gut Brett</h1>
<p>Und nun kommt der Inhalt - ein bisschen kreativer
als ich sollte es schon sein ....</p>
<p>Am besten mehrere Absätze, das sieht dann nach
mehr aus - also mit den Absätzen nicht sparen!
</p>
</td>
</tr>
</table>
Hinweis: mehrere Leerzeichen und Umbrüche sind egal - es wird immer nur ein Leerzeichen Kapitel: Projekt: Design der Schrift
angezeigt.
Bilder auf die Seite zu bringen funktioniert genauso wie beim Logo. Probieren!
Im nächsten Schritt erstellen wir das Design über CSS.
Projekt: Design der Schrift

Design definieren über CSS
1
8
3
Hier kommt der Teil, der viel Zeit spart - besonders dann, wenn der Tag kommt, an dem
einem die alte Seite nicht mehr gefällt und man zum Renovieren übergeht.
Über CSS kann sehr bequem ein Design in einer einzigen Datei erstellt werden, das für alle
Seiten gilt.
Nachgeschlagen werden kann unter

Fortgeschrittene -> Cascade Style Sheet
Damit diese Datei in jeder HTML-Seite berücksichtig wird, muss jeder HTML-Seite deren
Existenz und Lage mitgegeben werden. Dazu kommt folgender Code rein.
<html>
<head>
<link rel="stylesheet" href="design.css" type="text/css">
</head>
<body>
<table bgcolor="yellow" height="100%" cellpadding="10" border="1" >
<tr>

<td width="175" valign="top">
<img src="schach_logo.jpg" width="175" height="137" border="0" alt="">
Adresse <br />
<br />


<br>
<br>
<br>
<br>
<br>
</td>
<td width="*" >

Kapitel: Projekt: Design der Schrift
<h1>Ihr Schachverein sagt gut Brett</h1>
<p>Und nun kommt der Inhalt - ein bisschen kreativer

wie ich sollte es schon sein ....</p>
<p>Am besten mehrere Absätze, das sieht dann nach

mehr aus - also mit den Absätzen nicht sparen!
</p>
</td>
</tr>
</table>
</body>
</html>
Und nun benötigen wir eine leere Datei mit dem Namen "design.css"
1
8
4
Hinweis: Die Datei hat die Endung .css und NICHT .htm oder so!
In die Datei schreiben wir nun folgende Zeilen:
h1 { color: darkmagenta; letter-spacing: 3;}

p { color: gray; }
Projekt: Domainnamen
So - nun kommen wir zum besonderen Teil. Wenn der Internetauftritt nicht nur aus Jux und
Dollerei entstehen soll, sondern was darstellen muss, sollte ein passender Domainname her.
Bei Domainnamen gilt es Einiges zu beachten, um nicht in die rechtliche Falle zu treten. Mehr
dazu unter Recht
Irgendwie sollte nun der Domainname etwas mit der Sache zu tun haben, rechtlich problemlos
und noch gut merkbar sein. Wenn Sie jetzt den Wunschnamen suchen, gehen Sie über
www.denic.de und schauen, ob er noch frei ist.
Wenn er frei ist, wird ein virtuelles Grundstück benötigt. Dazu sind Provider da. Die
bekanntesten sind z. B. Schlund und Partner, 1&1 und Strato. [mehr dazu]
Paketgröße wählen und sicherstellen, dass das Konto gedeckt ist. Bei Minderjährigen sollte
das Auswählen des Providers unbedingt gemeinsam mit dem Erziehungsberechtigten
erfolgen.
Nach dem Beantragen wird dann innerhalb von 2 Stunden bis 2 Wochen die Domain auf Ihren
Namen eingetragen und der Inhalt kann übertragen werden.
Projekt: Online stellen

Dazu benötigen wir als erstes ein FTP-Programm.
Kapitel: Projekt: Domainnamen
Zur Bedienung bitte unter Online stellen nachsehen.
Bei Fragen, da es verschiedene FTP-Programme gibt, bitte ins Forum - Lajya freut sich.
1
8
5
Vorwort für Fortgeschrittene
"Überzeugungen sind Krankheiten, die durch Begeisterung übertragen werden."
Siegfried Lenz
So vielleicht auch meine Meinungen und Ansichten zu perfektem HTML-Code, die Kunst des
Tags und der Umgang mit der Relativität. Prüfen Sie also, was für Sie sinnvoll ist, und bauen
Sie Ihr Wissen auf. Nach dem Fortgeschrittenen-Teil werden Sie sehen, dass es viele Wege
nach Rom gibt und die meisten auch dort ankommen (abgesehen davon, dass der HTML-
Code weder etwas mit Liebe noch mit Kunst zu tun hat).
Aber trotz alledem hinterfragen Sie Meinungen. So gibt es im Internet die Fangemeinde von
JavaScipt, die Framehasser, die IE-aus-Prinzip-Ablehner und viele weitere wunderlichen
Gestalten. Hinterfragen und schauen und ausprobieren - "that´s the way to the light".
Im Fortgeschrittenen-Teil werde ich versuchen, nicht nur das "Wie", sondern auch das
"Warum" zu beleuchten. Wenn jemand etwas besser weiß - bitte es mich wissen lassen. Auch
ich bin lernfähig und absolut nicht perfekt.
Programmpunkte für Fortgeschrittenen

• Dieses Vorwort
• von mir bevorzugte Software
• Frames - pro und vor allem kontra
• Cascade Style Sheet (CSS)
• JavaScript
• Domainname
• Provider
• Metatags - das Salz in der Suppe, die Butter auf dem Brot
• Anmelden bei Suchmaschinen
• Weiterführende Empfehlungen & Links Kapitel: Vorwort für Fortgeschrittene
1
8
6
Farbtheorie
Warum Theorie? - Darüber kommt man schnell zu einer harmonischen
Farbzusammenstellung für die eigene Website.
In der Farbentheorie gibt es zahlreiche Ansätze, Definitionen und Richtungen. Hier werden
die Basics und anhand einem Modell die Zusammenhänge aufgezeigt, damit eine schnelle
harmonische Farbauswahl für Websites erreicht werden kann.
Der traditionelle Farbkreis (rot, gelb und blau) wurde von Sir Isaac Newton entwickelt.
Es basiert auf einer logisch geordneten Reihenfolge von reinen Farben.
Primär-Farben
Rot, Gelb und Blau
Diese 3 Farben (bei Pigmentfarben) können nicht durch irgendwelche Kombinationen anderer
Farben gemischt und angezeigt werden - daher Primärfarben.
Alle weiteren Farben entstehen durch Mischen von 2 nebeneinander liegenden Farben. Beim
Mischen von gelb und rot entsteht orange u.s.w.
Kapitel: Farbtheorie
1
8
7
Sekundär-Farben
Grün, Orange, Violett (Purple ?)
Die Sekundär-Farben entstehen durch das Mischen der Primär-Farben.
Tertiär-Farben
Durch Mischen der Primär- und Sekundärfarben entstehen Tertiär-Farben und der Farbkreis
wird komplettiert.
Nutzwert - aus dem Farbkreis zur Farbzusammenstellung

Es gibt verschiedenste Theorien für Harmonien. Im Folgenden zwei weit verbreitete
Methoden.
Analoge Farben
Die Farbenzusammenstellung basiert auf analogen Farben. Aus dem Farbkreis werden 3
aneinander grenzende Farben ausgewählt.
Kapitel: Farbtheorie
In der Regel herrscht eine der 3 Farben vor.
Komplementär-Farben
1
8
8
Aus dem Farbkreis wird die gegenüberliegende Farbe ausgewählt - die komplementäre Farbe
also.
Die im Farbkreis gegenüberliegende Farbe erzeugt einen maximalen Kontrast.
Bilder-Ausschnitt anpassen & Größe

verändern
Um Bilder bearbeiten zu können, wird eine Software benötigt. Für kleine Arbeiten empfiehlt
sich das Programm IrfanView, das FREEWARE für den privaten Gebrauch ist (und in
deutsch). Primär ist es ein sehr gutes Bilderbetrachtungsprogramm mit Zusatzfunktionen wie
Ausschnitt anpassen und Größenänderungen etc.
IrfanView ist unter http://www.irfanview.de erhältlich.
Bilder-Ausschnitt anpassen (Bilder beschneiden)

Ist auf dem Bild noch unnötiger Rand etc., kann man das Bild auch entsprechend verkleinern,
Kapitel: Bilder-Ausschnitt anpassen & Größe verändern

z. B. auf Seitenbreite 260, es beschneiden und dann nochmals auf die letztendliche Größe
verkleinern.
Nach dem Verkleinern mit der Maus spannen Sie einen Rahmen auf dem Bild. Im Kopf des
Fensters ist die Größe der Umrandung ersichtlich.
1
8
9
Die Seitenbereiche der Umrandung können einzeln verschoben werden.
Verschieben, bis die gewünschte Größe erreicht ist (siehe Fensterkopf).
1
9
0
Zum Freistellen des umrandeten Bereichs den Menü-Punkt "Bearbeiten" -> "Freistellen"
anwählen.
Im Fuß des Fensters sind die Größe und Farbtiefe des Bildes zu sehen.
1
9
1
Größe verändern
Menü "Bild" -> "Größe ändern"
Neue Größe eintragen - dabei darauf achten, dass wenn von dem Bild nur ein Ausschnitt
gewählt werden soll, dort auch noch Platz zum Beschneiden ist. Wie im Beispiel soll das Bild
nachher eine Größe von 225 auf 150 haben. Daher wird als Breite 225 eingestellt, damit man
mehr als 150 zum Beschneiden hat!
1
9
2
Zum Schluss das Bild noch speichern. Am besten mit neuem Namen, ansonsten verliert man
das Original!
"Datei" -> "Bild speichern unter".
1
9
3
Histogramm und Tonwertkorrektur - Bilder
optimieren
Hier ein kleiner Abstecher zu Qualität von Bildern und wie ...
aus mittelprächtigen Bildern ...
Kapitel: Histogramm und Tonwertkorrektur - Bilder optimieren

... gute Bilder werden können.
Wenn Sie keinen großen Unterschied zwischen den beiden obigen Bildern sehen, könnte eine
Anschaffung eines guten Monitors helfen.
Bedeutung Histogramm
Für einen gelungenen Webauftritt werden gute Bilder benötigt. Nachdem oft eine
Digitalkamera griffbereit ist, können Bilder auch schnell selber gemacht werden, bzw. finden
sich schon in der eigenen Sammlung. Dabei kommt dem Histogramm eine große Bedeutung
zu, um Bilder einzuschätzen und mögliche Verbesserungen über die Tonwertkorrektur zu
beurteilen.
Im Histogramm sind die genutzten Tonwerte zu sehen, wie diese den vorhandenen möglichen
Bereich ausnützen.
Das Histogramm im Beispiel zeigt, dass nur der mittlere Bereich genutzt wird - das Bild wirkt
flau.
1
9
4
Liegt ein Ungleichgewicht in eine Richtung vor, kommt es zu dunkeln Bilder - das Bild ist
unterbelichtet
oder zur Überbelichtung, also zu hellen Bildern.
1
9
5
Zum Vergleich die optimale Verteilung
Möchten Sie nun ein falsch belichtetes Bild optimieren, benötigen Sie die
Tonwertkorrektur
Bei der Tonwertkorrektur werden alle vorhandenen Werte auf die gesamt mögliche Breite
verteilt. Das Bild ist wieder kräftig. Das Ergebnis überzeugt - die Manipulation ist oft nicht
sichtbar. Die fehlenden Werte mitten im Histogramm werden vom Auge nicht bemerkt (im
Gegensatz zum nicht Nutzen der möglichen Breite).
1
9
6
Beim genauen Betrachten des Histogramms sehen Sie die Lücken, beim direkten Vergleich
des optimalen Bildes zum Optimierten werden Ihnen wahrscheinlich kaum die Unterschiede
auffallen.
Histogramm des optimalen Bildes
im Vergleich zu den mit gespreizten Tonwerten
Und die jeweiligen Bilder zu den Histogrammen
Besseres Ausgangsmaterial
Die beste Lösung ist natürlich ein besseres Ausgangsmaterial. Viele Digitalkameras können
zur Vorschau das Histogramm einblenden, damit hier schon die Qualität der Aufnahme
kontrolliert werden kann.
Tonwertkorrektur per Bildbearbeitung

1
9
7
Liegt bereits ein schlechtes Bild vor - dann hilft eine Software zur Bildbearbeitung. Im
folgenden Fall wird das mit FixFoto erledigt, ein klasse Shareware die jeden Euro wert ist,
pfiffige Lösungen bietet und in Deutschland programmiert wird. Den Link dazu finden Sie
unter Software.
Nach dem Laden des Bildes gehen Sie in das Menü "Bild -> Tonwert -> Histogramm"

Falls Ihnen das neue Fenster zu klein ist (was normalerweise der Fall ist) - vergrößern Sie das
Fenster, damit Sie sauber arbeiten können.
Sie sehen eine Vorschau auf das Bild und mehrere Histogramme. Die ersten 3 sind für den
jeweiligen Farbkanal - das untere ist für alle. Nutzen Sie das untere.
1
9
8
Schieben Sie den Regler als erstes nach rechts bis zum Anfang des "Berges".
1
9
9
Das gleiche auf der anderen Seite (nach links dann).
0
0
2
Spielen Sie ein wenig mit den verschiedenen Schiebereglern - danach können Sie mit Freude

feststellen, dass Sie mit den Schaltflächen RGB-Max oder Y-Max schneller schöne
Ergebnisse erzielen.
Wenn Sie zufrieden mit der Vorschau sind - gehen Sie auf Ausführen. Vergessen Sie nicht Ihr
Bild abzuspeichern.
2
0
1
Schatten & Co.
Kein Charakter - vielleicht?
Kein Schatten - unwahrscheinlich!
Uups - falscher Schatten
Kapitel: Schatten & Co.
2
0
2
Bilder nachbearbeiten
kurz und bündig
• freistellen
• Ränderübergänge glätten
• Schatten hinzufügen
Hört sich nicht schwierig an und ist mit ein wenig Übung und dem richtigen Werkzeug
problemlos machbar.
Ich verwende zur Bildbearbeitung Paint Shop Pro. Noch professioneller wird es mit Adobes
Photoshop.
Bilderauswahl
Kapitel: Bilder nachbearbeiten
Das Bild sollte in einer guten Qualität vorliegen. Das bedeutet, dass nach dem Scannen eines
Fotos oder dem Erzeugen des Bildes mit einer digitalen Kamera das Bild in keinem Fall in der
Auflösung verringert wird! Erst wenn alles fertig ist, wird die Auflösung auf eine Größe für
das Web gebracht.
Um sich Frustration zu ersparen, sollte man das Bild so oft wie möglich in seinen
verschiedenen Bearbeitungsstufen unter verschiedenen Namen abspeichern. Wenn dann
irgendetwas schief geht, holt man sich eine frühere Stufe wieder her und probiert nochmals
sein Glück!
2
0
3
Freistellen eines Bildausschnittes
Als Beispiel zum Freistellen verwenden wir das Foto eines Menschen (mich :-)). Der
Hintergrund ist unnötig, daher wird dieser entfernt. Zum Entfernen des nicht gewünschten
Bereiches gibt es mehrere Möglichkeiten.
Ist der Hintergrund von der Person gut getrennt, z.b. durch eine einheitliche andere Farbe,
kann mit dem Lassowerkzeug gearbeitet werden.
Dies ist jedoch oft nicht der Fall. Dann hilft das Markierwerkzeug und eine ruhige Hand.
Damit wird dann das freizustellende Objekt umfahren. Ist das Objekt komplett markiert, wird
die Markierung umgekehrt, so dass nun der komplette Hintergrund markiert ist. Durch die
Entferntaste wird diesem die Hintergrundfarbe zugewiesen - im Normalfall wohl weiß.
Um einen weichen Ränderübergang zwischen dem Objekt und dem Hintergrund zu erhalten,
wird die Randunschärfe der Markierung erhöht. Dadurch ist nun ein Stück der Umrisses
markiert. Dieser wird nicht gelöscht, sondern über die Funktion im Menü "Unschärfe"
weicher gemacht. Dies kann mehrmals wiederholt werden, bis einem das Ergebnis zusagt.
Schlagschatten erzeugen
Jetzt kommt der härteste Part. Einen natürlich erscheinenden Schatten zu erzeugen ist selbst
für Grafikdesigner oft ein Problem. Hier stellt sich heraus, wer ein gutes räumliches
Vorstellungsvermögen hat.
Um nicht das freigestellte Bild zu zerstören, empfiehlt es sich mit mehreren Ebenen zu
arbeiten. Dazu erzeugt man im Zeichenprogramm eine Ebene für den Schatten. Diese Ebene
sollte zweckmäßigerweise hinter dem eigentlichen Bild liegen.
Ursprüngliches Bild
Kapitel: Bilder nachbearbeiten
2
0
4
Mit Corel Draw 8.0
Über das Beschneidewerkzeug kann der Bildausschnitt markiert werden.
Beschneidewerkzeuge:
• 1. Rechteckmaske
• 2. Kreismaske
• 3. Freihandmaske
• 4. Lassomaske
• 5. Maskenschere
Kapitel: Mit Corel Draw 8.0
• 6. Zauberstab
• 7. Maskenpinsel
Markieren mit Freihandmaske (falls es mit Zauberstab nicht funktioniert). Wenn der Großteil
des gewünschten Bereichs umfahren ist, klicken Sie mit der Maus doppelt. Dadurch wird die
Markierung geschlossen. Um den Bereich erscheint eine gestrichelte Linie.
2
0
5
Zum Löschen des Hintergrundes invertieren (umkehren) wir die Markierung. Durch das
Invertieren ist dann alles außer dem gewünschten Bereich markiert.
Menü: Maske->Invertieren
Um nun diesen Bereich weiß zu bekommen, drücken Sie die ENTF-Taste -> dadurch wird der
markierte Rest mit der Hintergrundfarbe gefüllt. Die Person ist freigestellt.
Jetzt können weitere Feinarbeiten und Nacharbeiten mit der Freihandmaske erfolgen, falls
dies nötig sein sollte.
Schlagschatten erzeugen
Nochmals invertieren, damit wieder der gewünschte Bereich (Person) markiert ist.
Menü: Bearbeiten->Kopieren
2
0
6
Der Bereich wird in den Zwischenspeicher kopiert.
Menü: Bearbeiten -> Einfügen als neues Objekt
Eine neue Ebene mit dem gleichen Objekt wird eingefügt.
Menü: Objekt -> Hinterlegter Schatten
2
0
7
Das Menü für den Schatten wird aufgerufen. Hier kann die Richtung und die Intensität des
Schattens eingestellt werden. Spielen Sie herum.
2
0
8
Bildgröße herrichten
Maskieren Sie den gewünschten Bereich.
Menü: Bild -> Beschneiden -> Beschneiden aus Maske
Größe:
Menü: Bild -> Bild neu erstellen (Größe eingeben)
Objekt: Objekt kombinieren mit Hintergrund
Beim Speichern ist wichtig, dass keine Markierung mehr aktiv ist. Also Menü: Maske ->
entfernen
Und nicht vergessen - für das Internet sind bisher nur 2 Formate brauchbar: JPG und GIF!
2
0
9
Über das Komprimierungsmenü ist die Dateigröße später ersichtlich.
So, nun kann das fertige Bild mit Schatten auf der Website eingesetzt werden. Beim nächsten
Bild wird dieser Vorgang schon schneller gehen und irgendwann werden freigestellte Bilder
absolut kein Problem mehr darstellen. Im Gegensatz zu Bildern mit unnötigem Hintergrund
machen sie wesentlich mehr her, der Betrachter wird nicht vom Hintergrund abgelenkt und
die Bilder benötigen normalerweise weniger Speicherplatz und sind schneller übertragen
Hier nun unser fertiges Bild
2
1
0
fremde Bilder für die eigene Website
Es gibt verschiedene Bilderdienste.
Teilweise ist die Nutzung auf der
Website kostenfrei (es muss ein Link
auf den Bilderdienst/Fotograf gesetzt
werden), teilweise mit Kosten
verbunden.
Hier einige Adressen mit

Anmerkungen:
• http://www.photocase.com -
schöne Auswahl
• http://www.fotolia.de - große
Auswahl zu kleinen Preisen
• http://www.digitalstock.de
• http://www.fotocommunity.de - weniger zum bekommen, sondern eher zum
Diskutieren über eigene Fotos
• http://www.pixelquelle.de
Organisieren von Bildern

Ab einer gewissen Menge von Bildern auf der eigenen Festplatte, ist eine Software zum
Organisieren und Verwalten sinnvoll.
Hier kann die kostenloses Picasa von Google helfen - einfach probieren. Verwaltet Bilder,
zeigt Diashows mit schönen Effekten und die Bilder können mit Schlagworten versehen
werden und können so schnell wieder gefunden werden. Zusätzlich können Bilder auf die
Kapitel: fremde Bilder für die eigene Website

eigene Website hochgeladen werden - so ist schnell ein Blog realisierbar.
Download unter:
http://www.html-seminar.de/bilder_fuer_die_website.htm
2
1
1
Formulare
Zum versenden von Daten sind Formulare klasse. Es gibt verschiede Eingabefelder
Für Text z.B.
<input type="Text" name="vorname" value="" size="30" maxlength="50">
Um alle Eingabefelder zu versenden (sind ja im Normalfall mehr als eins), wird ein Formular
um die Eingabefelder geschachtelt.
als Beispiel:
<form action="" method="" target="">
</form>
Damit er weiß, wohin er senden soll, muß das in die Form-Action dies vermerkt werden
<form action="mailto:deine@e-mail-adresse.de" method=post enctype="text/plain">

Kapitel: Formulare
</form>
Und zu guter Letzt brauchen wir noch einen Submit-Button, daß losgesendet wird.
2
1
2
<form action="mailto:deine@e-mail-adresse.de" method=post enctype="text/plain">
<input type="Submit" name="absenden" value="absenden">
</form>
So, das wars. Damit sollte die E-Mail auf den Weg geschickt werden, sofern bei Sender das
E-Mail-Programm sauber installiert ist. Das ist auch der Nachteil bei der Geschichte. Um ein
Beispiel zu sehen, um diesen Nachteil zu umgehen, einfach in den Quellcode von www.feed-
back.de reinschauen.
Bei folgenden Beispielen einfach in den Quellcode reinschauen. Dann dürfte der Aufbau klar
sein.
die Elemente zur Formulargestaltung

Um im Internet eine Kommunikation mit dem Benutzer aufzubauen, werden Formulare
verwendet. Dazu gibt es verschiedene Standardelemente, die die Kommunikation
vereinfachen sollen.
Kapitel: die Elemente zur Formulargestaltung

Texteingaben
- einzeilige Textfelder, zur Eingabe von beliebigem Text
***
- Paßwortfelder, ähnlich dem einzeiligen Textfeld, allerdings werden gemachte
Eingaben nur mit Sternen angezeigt
- mehrzeilige Textfelder. Wird mehr Text eingegeben, als das Textfeld

darstellen kann, erscheint auf der rechten Seite ein Rollbalken, mit dem man den verdeckten
Text sichtbar machen kann.
2
1
3
Auswahlfenster, über das ein vorgegebener Text ausgewählt werden
kann. Eigene Eingaben sind nicht vorgesehen.
Auswahl-Kästchen
weiblich männlich keine Angaben
runde Auswahl-Punkte, in den nur eines von den Angeboten möglich ist. Wird ein anderes
angeklickt, wird die erste Selektion aufgehoben und das neu angeklickte wird markiert.
Bücher lesen Musik hören Filme sehen

Bei diesen Kästchen sind mehrere Selektionen möglich.
Schaltflächen
Über Schaltflächen sind Aktionen möglich. So z.B. daß Fragen übersprungen werden, bzw.
die Eingaben abgeschlossen und versendet werden. Folgende Schaltflächen sind in
Formularen zu finden:
Eingaben absenden
Diese Schaltfläche ist normalerweise immer vorhanden. Formulare zeichnen sich noch aus,
daß es "Absenden-Schaltfläche" zum Schluß erscheint. Die gemachten Eingaben werden
abgeschlossen, gegebenenfalls überprüft und abgesendet.
Zurücksetzen
Oft sieht man auch eine Schaltfläche, um die eingegebenen Informationen zu löschen. Von
Kapitel: die Elemente zur Formulargestaltung

diesem Element ist abzuraten, da erfahrungsgemäß viele Benutzer versehentlich diese
Schaltfläche anklicken, in der Annahme, daß sie ihre Daten versenden. Alle Daten werden
gelöscht und nichts versendet. Wenn der Benutzer seinen Irrtum bemerkt, muß er nochmals
alles eingeben. Besonders bei größeren Formularen wird er das beim zweiten mal weniger
ausführlich machen, wenn er überhaupt noch dazu bereit ist.
Grundlegendes
Ein dem Standard entsprechender Gebrauch besonders bei den Auswahl-Kästchen ist wichtig,
da es den Komfort erhöht, wenn es dem gewohnten und erwarteten Verhalten entspricht.
Wird ein nicht standardmäßiger Gebrauch erzwungen, was technisch problemlos machbar ist,
kann es den Benutzer verwirren und von der eigentlichen Aufgabe abhalten - das Formular
auszufüllen.
2
1
4
Frames - aus dem Rahmen fallen
• Was ist ein Frame?
• Definieren von Frames
• Eigenschaften der Frames
• Verweise im Frameset
• Schachteln von Frames
• Gefahren bei Frames
Was ist ein Frame ?

Frames (engl. Rahmen) stellen eine Möglichkeit der Gestaltung
dar. Im Browser werden durch Frames mehrere HTML-Seiten
gleichzeitig angezeigt. Die Frames müssen nicht sichtbar sein! In
dem Beispielbild sehen Sie 3 HTML-Seiten. Zur besseren
Übersicht ist kein Inhalt, sondern nur die Namen der
entsprechenden HTML-Seite angegeben.
Der Aufbau und die Lage werden in einer weiteren Datei definiert
- dem Frameset. Im Unterschied zu Tabellen scrollen bei Frames die Inhalte von einem
Bereich (Frame) nicht mit, wenn in einem anderen Frame gescrollt wird. Die Framesetdatei ist
auch eine HTML-Datei, die normalerweise nicht sichtbar ist.
Definieren von Frames

Die erste und wichtigste Datei ist die mit der Definition des Framesets. Hier wird festgelegt,
wie die Bildschirmaufteilung ist und welche HTML-Seiten dann in den entsprechenden Seiten
geladen werden sollen.
Diese Datei wird zwar als URL aufgerufen, wird aber nicht angezeigt! Angezeigt werden
diejenigen HTML-Dateien, die in dieser Frameset-Definitions-HTML-Datei (nett langes
Kapitel: Frames - aus dem Rahmen fallen

Wort) aufgeführt sind.
Der Aufbau der Frameset-Datei weicht vom bisher bekannten Aufbau einer HTML-Datei ab.
Es wird zwischen Kopf-Bereich und Inhalts-Bereich, also zwischen </head> und <body>
definiert. Im normalen Bereich kann ganz normal gearbeitet werden - dieser wird aber nur
angezeigt, wenn der Browser nicht mit Frames umgehen kann (alte Browser).
Grundlegender Aufbau
... </head> <frameset [cols oder rows]="*,*"> <frame src="http://www.html-

seminar.de/[HTML-Datei]" name="[Verweisname]"> <frame src="http://www.html-
seminar.de/[HTML-Datei]" name="[Verweisname]"> </frameset> <body> ... Als
Beispiel mit Reihen: <frameset rows="200,*"> <frame src="http://www.html-
seminar.de/steuerung.htm" name="steuerframe"> <frame src="http://www.html-
seminar.de/inhalt.htm" name="inhaltsframe"> </frameset>
2
1
5
Entweder rows (engl. Reihen), wenn die Frames übereinander, oder cols (engl. columns =
Spalten) wenn die Frames nebeneinander liegen sollen.
Anstatt den Sternen kann entweder
• ein fixer Wert angegeben werden oder

• ein relativer Wert, also mit Prozenten, oder
• ein Stern belassen werden, damit die optimale Breite (bzw. Höhe) vom Browser selbst
bestimmt wird.
Es kann aber auch gemischt werden, also der erste Frame ist fix 200 und der zweite soll
optimal dargestellt werden, also mit * (Stern) versehen, wie im obigen Beispiel 2.
<frame src="http://www.html-seminar.de/steuerung.htm" name="steuerframe">
Nach der Lage wird nun der Inhalt zugewiesen. Im src-TAG steht die html-Seite, die in den
Frame geladen werden soll. Die zweite Angabe, der Framename, dient später dazu, die Seiten
zu verlinken (später mehr dazu). Unbedingt bei dem Framenamen auf Groß- und
Kleinschreibung achten, da diese hier wichtig sind!
Wenn man 2 Frames hat, benötigt man auch 2 dieser Angaben!
</frameset>
Und zu guter Letzt, der End-TAG.
So, das war es mit der Definition. Wenn jetzt im Browser die HTML-Datei, die die Definition
des Framesets enthält, geladen wird, werden die definierten Dateien angezeigt.
Wenn diese nicht angezeigt werden, sollten diese vielleicht erst erstellt werden.
Aufgabe 1:
Erstellen Sie eine Seite mit Frames, auf der rechts die
Steuerleiste ist, die ca. 30% des Bildschirms einnimmt.
Der dargestellte Inhalt eines Frames sollte größer sein als
auf dem Bildschirm darstellbar (viel Text schreiben :-)).
Spielen Sie mit der Scrollfunktion und beobachten Sie den
anderen Frame.
Eigenschaften von Frames

Folgende Attribute (Möglichkeiten) können noch angegeben werden. Dabei werden manche
Befehle anscheinend doppelt benötigt. Das kommt daher, dass Netscape und Microsoft
unterschiedlich reagieren und daher Befehle "doppelt" bzw. "zweisprachig" benötigen.
2
1
6
Befehle im <frameset ...>
border=[0...x] frameborder=[0...x]
Hier kann die Rahmenstärke angegeben werden. Wird eine Rahmenstärke von 0 angegeben,
ist kein Rahmen sichtbar. Somit kann man auf den ersten Blick nicht zwischen einer
Blindtabelle und einem Frameaufbau unterscheiden.
Befehle im Frame-TAG <frame ...>
scrolling=[yes/no/auto] • yes = ist der Standard; so kommt immer

eine Scroll-Leiste, auch wenn diese nicht
nötig wäre
• auto = optimiert das yes - es kommt nur
noch eine Scroll-Leiste, wenn diese auch
sinnvoll ist.
• no = niemals eine Scroll-Leiste - ist
extrem gefährlich, da besonders dann bei
kleineren Bildschirmauflösungen der
Surfer nicht mehr alles sieht und auch
nicht zum Unsichtbaren scrollen kann!
noresize (engl. no resize = keine Größenänderung)

Dadurch kann der Surfer die im frameset
definierten Größen nicht mehr verändern.
marginwidth= (engl. margin = Rand) Der linke und rechte
Abstand vom Frame-Inhalt zum Frame-Rand
werden hier festgelegt. Angabe ist sowohl fix
als auch relativ, also prozentual, möglich.

marginheight= (engl. height = Höhe) Der obere und untere
Abstand vom Frame-Inhalt zum Frame-Rand
werden hier festgelegt. Angabe ist sowohl fix
als auch relativ, also prozentual, möglich.
Beliebter Schreibfehler bei ght!!
Verweise im Frameset
Um in den Frames navigieren zu können, werden unsere bekannten Links benötigt. Der
HTML-TAG <a href=""> wird nun erweitert durch <a href="" target="Verweisname">.
Jetzt kommen die Verweisnamen, die wir im Frameset vergeben haben, zum Zuge. Besonders
wichtig ist es hier, auf Groß- und Kleinschreibung zu achten, sonst funktioniert es nicht.
Als plastisches Bespiel: 2

1
7
Unser linker Frame heißt "steuerframe" und enthält die Steuerleiste (wer hätte das auch
vermutet :-)). In unserem rechten Frame soll immer der Inhalt angezeigt werden, und dieser
hat den wundervollen Verweisnamen im Frameset erhalten, der da lauten soll "inhaltsframe".
Im Steuerframe habe ich einen Link in Form von < a href="mehr.htm">. Klicke ich nun auf
diesen Link, wird im Bereich des Steuerframes die Seite mehr.htm geladen.
So wollten wir das aber nicht. Daher benötigt der Link nun noch das Ziel (engl. target = Ziel),
also < a href="mehr.htm" target="inhaltsframe">. Klicken wir nun auf diesen Link mit Target
in dem Frame Steuerleiste, wird nach dem Klick in dem Inhaltsframe die HTML-Datei
"mehr.htm" geladen.
Dadurch ist es sehr einfach, eine Steuerleiste zu erstellen, die einfach zu aktualisieren ist, da
sie nur einmal vorhanden ist. Doch die Nachteile sprechen gegen dieses Vorgehen, und dieser
Komfort kann auch anders hergestellt werden.
Aufgabe 2:
Erstellen Sie eine Seite mit Frames, auf der rechts die
Steuerleiste ist, die zwei interne Links und einen externen
Link enthält, die alle dann im linken Fenster dargestellt
werden sollen.
Bei dem Setzen von Links möchte man nicht immer, dass diese dann im eigenen Frameset
angezeigt werden, was auch rechtlich problematisch sein kann. Daher gibt es hier noch ein
paar weitere Attribute, die im target="" angegeben werden.
Wenn das Frameset beim Anklicken eines Links beendet werden soll, muss das target mit
target="_parent" angegeben werden. Sind mehrere Framesets ineinander verschachtelt, muss
stattdessen target="_top" angegeben werden.

Aufgabe 3:
Erweiteren Sie das letzte Beispiel, so dass beim Anklicken

des externen Links dieser nicht im Frameset angezeigt wird,
sondern wieder das ganze Browerfenster nutzt.
Schachteln von Frames

Frames können auch geschachtelt werden. Dadurch können dann
wie in den Bildern gezeigte Aufteilungen entstehen. Gefahr ist, dass
alles irgendwann zu klein wird. Der Code kann dann wie folgt
aussehen:
2
1
8
<frameset cols="35%,75%"> <frame src="http://www.html-seminar.de/steuerung.htm"
name="steuerframe" > <frameset rows="150,*> <frame src="http://www.html-
seminar.de/werbung.htm" name="bannerframe" > <frame src="http://www.html-
seminar.de/inhalt.htm" name="inhaltsframe" > </frameset> </frameset>
Gefahren bei Frames

Der Einsatz von Frames ist meiner Meinung nach aus verschiedenen Gründen nachteilig.
1. Bookmarks (Lesezeichen) können nicht auf einzelne Seiten gesetzt werden

2. Alte Browser können keine Frames darstellen
3. Manche Suchmaschinen indizieren keine Sites mit Frames bzw. nur rudimentär
4. In anderen Suchmaschinen wird nur eine Seite im Frameset indiziert und der Surfer
steigt dann genau in dieser ein, der Rest des Framesets wird nicht geladen, z. B. die
Steuerung (dumm gelaufen :-))
5. Es gibt Framehasser, die Seiten mit Frames meiden
Ein Vorteil ist, dass für interne Anwendungen in Firmen (die ja im allgemeinen nicht in
Suchmaschinen auftauchen sollen) Frames geschickt sein können.
Wie kann man diese Nachteile ausgleichen?
zu 1.) - gar nicht :-(
zu 2.) - Pech, fragt sich nur für wen :-(
zu 3.) - Es sollte eh prinzipell der noframes-Bereich ausgefüllt werden! Aber einfacher ist es,
von Vornherein keine Frames zu nutzen
zu 4.) - über ein JavaScript (das natürlich nicht nur Vorteile hat) kann das Laden des
Framesets erzwungen werden, sofern JavaScript vom Browser unterstützt und zugelassen
wird. Mehr dazu dann im JavaScript-Kapitel.
zu 5.) - missionarisch tätig sein oder keine Frames einsetzten.
iFrames
Die neuere Variane von Frames sind iFrames. Diese eingebetteten Frames sind wie
beispielsweise Bilder in den Inhalt eingebettet (im Gegensatz zu Frames, die eine Aufteilung
des Bildschirms zur Folge haben).
Kapitel: iFrames
Die iFrames haben dieselben Nachteile !!! wie die Frames, eigenen sich aber geschickt und
externen Inhalt einzubinden (sofern das vom anderen Anbieter erlaubt ist).
Im folgenden Beispiel wird von www.sprichwort-des-tages.de das tägliche Sprichwort des

Tages auf die eigene Website gebracht.
2
1
9
<iframe src="http://www.html-seminar.de/http://www.sprichwort-des-
tages.de/zitat.htm"
width="95%" height="100" name="sprichwort_des_tages">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
Sie können die eingebettete Seite über den folgenden
Verweis aufrufen:
http://www.sprichwort-des-tages.de/zitat.htm
</p>
</iframe>
Attribute zu iFrame
Es stehen folgende Attribute zur Verfügung: die Breite (width) und die Höhe (height), die
sowohl relativ über Prozente auch absolut in Pixel eingegeben werden können.
Für die Bildlaufleiste:
• scrolling="yes" - Bildlaufleisten erzwingen,

• scrolling="no" - Bildlaufleisten unterdrücken
• scrolling="auto" - automatisch, je nach Platzbedarf (ist Voreinstellung)
Rahmenbreite
• frameborder="0" - Rahmen nicht sichtbar

• frameborder="1" - Rahmen sichtbar
Im obigen Beispiel ändert sich nun nicht viel zum Testen, da nur einmal pro Tag der Spruch
sich ändert. Testen Sie anhand der folgenden Aufgabe die Vorteile von iFrames. Es können
über iFrames auch Webapplikationen einbinden.
Aufgabe: interaktiven Terminkalender einbinden

Kapitel: iFrames
Binden Sie den kostenlosen Terminkalender von www.termine-verwalten.com ein. Wenn Sie
sich nicht anmelden möchten, nutzen Sie einfach den Demo-Zugang ( http://www.termine-
verwalten.com/kalender.php?benutzername=Demo )
2
2
0
von mir bevorzugte Software
Hier finden Sie die von mir bevorzugte Software. Natürlich ist so etwas immer
Geschmackssache, und bekanntlich kann man über Geschmack ja gut streiten - aber als
Wegweiser und Anregung, welche Software einem helfen kann ...
F=Freeware; S=Shareware; P=Payware
Name Beschreibung & Link Status

HTML Editor Der HTML-Editor schlechthin - Meine Wertung: F/S
Phase 5 von Ulli nonplusultragut
Meybohm
Jede Menge Informationen und der Download sind im
HTML-Editor Portal zu finden.
http://www.qhaut.de/
Xenu's Link Ideal, um komplette Websites auf gebrochene Links F

Sleuth zu überprüfen. Sie erhalten auf Wunsch einen Bericht
in HTML. Zusätzlich kann die Software einem sehr
behilflich sein beim Erstellen von Sitemaps!
System: Win9x/NT
Eine deutsche Anleitung ist unter
http://www.aspheute.com/artikel/20010518.htm zu
finden.
http://home.snafu.de/tilman/xenulink.html
Sizer Webseiten für verschiedene Auflösungen optimieren F
ist mit diesem Tool einfach. Ein Klick mit der rechten
Maustaste auf den rechten unteren Rand und es kann
die Größe gewählt werden. (640 x 480 / 800 x 600 /
1024 x 768 oder beliebig einstellbar)
Kapitel: von mir bevorzugte Software
http://www.jugglesaver.co.uk/sizer.html
FTP-Uploader Programm zum ftp-Upload auf Server. In Deutsch F/S

und mit Anleitung auf der Seite
http://www.ftp-uploader.de
OpTool Damit kann schnell die erstellte Seite in mehreren F
Browsern kontrolliert werden. So entfällt das lästige
"URL kopieren - anderen Browser starten - URL
einfügen" - Spiel. Zusätzlich kann die Größe des
Fensters gewählt werden. (640 x 480 / 800 x 600 /
1024 x 768 oder beliebig einstellbar)
2
2
1
http://www.kreacom.dk/tools/optool/
FileZilla (FTP- sehr gutes FTP-Programm zum Datei-Upload auf F

Programm) Server. In Deutsch und bietet Möglichkeiten für
verschlüsselten Upload (sFTP).
sourceforge.net/projects/filezilla
JavaScript
Da ich es durch die zahlreichen Browser-Inkompatibiltäten als müßig empfinde, JavaScript
im Tiefgang zu vermitteln, und vor allem da dafür wohl mehrere Tage Zeit zu veranschlagen
sind, gibt es hier die Basics, um bereits fertige JavaScripte in die eigenen HTML-Seiten zu
integrieren.
Bei JavaScript handelt es sich um eine Programmiersprache, die von Netscape eingeführt
wurde. Daher kann der Netscape Browser in diesem Bereich auch meist ein wenig mehr als
der von Microsoft. Und auch hier liegt schon die große Gefahr. Es gibt kleine aber feine
Unterschiede, ansonsten funktioniert das eingebaute JavaScript-Programm nur bei einigen
Surfern.
Aber vor den Nachteilen schauen wir uns jetzt erstmal Aufbau, Implementierung und
Möglichkeiten an.
JavaScript ist wie HTML im Klartext lesbar. Es kann entweder direkt in die HTML-Seite mit
aufgenommen oder als eigene Datei ausgelagert werden. Zum Auslagern kommen wir später
noch.
Oft (nicht immer) wird das JavaScript im Kopfbereich aufgenommen. Dadurch soll
sichergestellt werden, dass es bereits vor dem ersten Aufruf geladen wurde.
z. B.
<head>
<title>Seite mit JavaScript</title>

Kapitel: JavaScript
<script language="JavaScript">

</script>
2
2
2
</head>
<body>
</body>
</html>
Hier anklicken, dann wird dieses JavaScript-Beispiel ausgeführt.
Der Programmteil wird immer auskommentiert, also zwischen  gesetzt. Somit ist
er für Browser, die kein JavaScript können, unsichtbar.
Natürlich soll nicht jedes JavaScript sofort bei Aufruf der Seite gestartet werden. Daher gibt
es die Möglichkeit, Funktionen zu definieren. Diese Funktionen können dann durch Aktionen
auf der Seite aufgerufen werden. Im nächsten Beispiel wird erst nach Drücken einer
Schaltfläche (Button) das JavaScript ausgeführt.
<html>
<head>
<title>JavaScript-Programmausführung aufgrund Button</title>

</script>
</head>
Kapitel: JavaScript
<body>
<form>
<input type=button value="Datum & Uhrzeit gefällig ?"
onClick="Quadrat()">
</form>
2
2
3
</body>
</html>
Hier anklicken, dann wird dieses JavaScript-Beispiel 2 ausgeführt.
Als nächstes basteln wir uns einen rudimentären Passwortschutz. Integriert dazu folgendes
Script. Die Funktionsweise wird nach dem Script erklärt.
<html>
<head>
<title>Passwortschutz</title>
</head>

</script>
<body>
<form name="formularname" onSubmit="false;">

Kapitel: JavaScript
Kennwort:
<input type="TEXT" name="dateiname" size="10"
maxlenght="10">
<br>
<input type="button" value="OK" onClick="passwort()">

2
2
4
</form>
</body>
</html>
Schauen wir uns den Passwortschutz von hinten an. Wir haben im HTML-Code ein Formular,
das den Namen "Formularname" hat. In dem Formular gibt es ein Feld mit dem Namen
"dateiname". Sobald nun der Button angeklickt wird, wird die oben definierte Funktion
"passwort()" aufgerufen.
In der Funktion "passwort()" wird nun eine neue Seite (URL) aufgerufen mit den
eingegebenen Daten aus dem Formular. Die Funktion baut aus der Eingabe eine URL
zusammen und versucht nun, diese URL zu laden. Ist das richtige "Passwort" (eigentlich die
URL der so geschützen Seite) eingegeben, wird durch die Funktion die richtige URL erzeugt
und diese Seite angezeigt. Wenn eine falsche Eingabe erfolgt, erhält man nur eine
Fehlermeldung in Form von "404 - Seite existiert nicht"!
Dies ist nur ein sehr rudimentärer Schutz und hat so seine Tücken. Aber für ein paar Zeilen
Code ist er nicht schlecht und demonstriert den Gebrauch von Variablen.
Aufgabe Passwortschutz:
Erstellen Sie 2 Seiten. Die zweite "geschützte" Seite soll

durch die erste Seite aufgerufen werden, wenn das richtige
Passwort eingegeben wird. Auf der ersten Seite wird die
Passwortabfrage integriert.
Es gibt noch weitere Möglichkeiten, die Scripte starten zu lassen. Der Weg über den Button
ist nur eine Möglichkeit.
• bei Abbruch - onAbort

• beim Verlassen - onBlur
• bei erfolgter Änderung - onChange
• beim Anklicken - onClick
Kapitel: JavaScript
• bei doppeltem Anklicken - onDblClick

• im Fehlerfall - onError
• beim Aktivieren - onFocus
• bei gedrückter Taste - onKeydown
• bei erfolgtem Tastendruck - onKeypress
• bei losgelassener Taste - onKeyup
• beim Laden einer Seite - onLoad
• bei gedrückter Maustaste - onMousedown 2
2
5
• bei weiterbewegter Maus - onMousemove
• beim Verlassen des Elements mit der Maus - onMouseout
• beim Überfahren des Elements mit der Maus - onMouseover
• bei losgelassener Maustaste - onMouseUp
• beim Zurücksetzen des Formulars - onReset
• beim Selektieren von Text - onSelect
• beim Absenden des Formulars - onSubmit
• beim Verlassen der Datei - onUnload
• bei Verweisen - javascript:
Näheres zu diesen Aufrufmöglichkeiten finden Sie unter

http://de.selfhtml.org/javascript/sprache/eventhandler.htm
Da wenig Leute Zeit haben, sich in JavaScript tief hineinzuknien, besteht der wichtigste Part
darin zu verstehen, wie die Aufrufe möglich sind, wie Parameter (Zusatzangaben) übergeben
werden können und woher man dann bereits fertige Scripte bekommt.
Eine sehr schöne Sammlung an brauchbaren Scripten ist unter folgendem Link zu finden:
http://www.24fun.com
Beachten Sie dabei aber immer, dass auch auf JavaScripten ein Copyright liegen kann. Also
sollten Sie vor Einsatz eines Scriptes den Autor kurz um Erlaubnis bitten, wenn diese nicht
bereits im Script ausdrücklich gegeben wurde!
Auslagern von Scripten

Bei umfangreichen Scripten oder bei Scripten, die auf mehreren Seiten benutzt werden,
sollten diese ausgelagert werden! Dadurch wird der HTML-Code wieder schlanker und
redundanter Code (doppelt und dreifach) wird vermieden.
Dazu wird der Code des JavaScripts in eine extra Datei ausgelagert, z.B. berechnung.js
In der HTML-Seite erfolgt anstatt dem JavaScript im Kopfbereich dann folgende Eintragung:
<script type="text/javascript" src="http://www.html-seminar.de/berechnung.js">

Kapitel: JavaScript
</script>
Tipps & Tricks

2
2
6
Wenn man unbedingt mit Frames arbeiten will bzw. muss, kann mit folgendem JavaScript
eine Abfrage gefahren werden, ob die Seite in einem Frameset angezeigt wird oder alleine.
Wird sie alleine angezeigt (z.B. Aufruf aus Suchmaschine heraus), stellt das Script fest, dass
der top.frame = 0 ist (also nicht da ist) und lädt dann die Seite frameaufbau.htm.

</script>
Das Script sollte also möglichst weit oben in der Seite stehen.
Tipps & Tricks - Hinweis, wenn JavaScript beim Surfer

deaktiviert ist
Sollte JavaScript auf Ihrer Website nötig sein, sollten Sie die Besucher darauf hinweisen, die
es deaktiviert haben!
Dazu gibt es die HTML-Tags <noscript> und </noscript>
Als Beispiel
<noscript>
<h1>JavaScript-deaktiviert</h1>
<p>Um den vollen Funktionsumfang dieser Website nutzen zu können,

Kapitel: JavaScript
müssen Sie JavaScript in Ihrem Browser aktivieren ...
</noscript>
Tipps & Tricks - Ausdruck

2
2
7
Soll eine Seite direkt nach Seitenaufruf ausgedruckt werden (Druckversion einer Seite), kann
dies mit folgendem Code erreicht werden
Der Code muß im body-Tag stehen!
Als Beispiel
<body onload="self.print()">
Soll ein Link für den Druck angeboten werden (was nur klappt, wenn JavaScript aktiviert ist),
dann hilft dieser Code
<a href="javascript:self.print()">Seite drucken</a>
Weiterführende Links
gute Sache - SelfHTML unter: http://selfhtml.teamone.de/javascript/index.htm
kurz & gut:

Metatags unterstützen Suchmaschinen beim Kategorisieren und geben den
Lesezeichen/Favoriten Ihre Beschreibung.
Metatags
Metatags dienen den Suchmaschinen zum Katalogisieren und Einordnen der Seite. Hier sollte
man sich besonders Mühe geben, da ein guter Platz in den Suchmaschinen (genannt Ranking)
für eine größere Besucherzahl sorgt.
Hier können Sie die Wirkung der Metatags bei einer Suchmaschinen begutachten.
Die wichtigsten Metatags:
<title> </title>
<meta http-equiv="content-type"
Kapitel: Metatags
content="text/html; charset=iso-8859-1" />
<meta name="content-language" content="de" />
<meta name="author" content=" " />
<meta name="publisher" content=" " />

2
2
8
<meta name="copyright" content=" " />
<meta name="keywords" content=" " />
<meta name="description" content=" " />
<meta name="page-topic" content=" " />
<meta name="page-type" content=" " />
<meta name="language" content="Deutsch" />
<meta name="revisit" content="After 30 days" />
<meta name="robots" content="INDEX,FOLLOW" />
Kurze Erklärung zu den einzelnen Metatags:

Titel
Beinhaltet Titel oder Name der Homepage. Wird gerne vergessen! Unbedingtes Muss,
ansonsten outen Sie sich als blutiger Laie.
Content-Type und Language
Über diese Angabe wird der europäische Zeichensatz definiert. Durch die Angabe kommen
die Browser und Suchmaschinen auch mit Umlauten zurecht.
author, publisher, copyright
Was soll man dazu noch sagen?
keywords:
Alle Begriffe und Wortkombinationen, unter denen die Homepage gefunden werden soll,
sollten hier auftauchen. Die Begriffe werden mit Komma oder Semikola getrennt und kein
Begriff sollte öfters als 3 mal vorkommen.
Es empfiehlt sich, bei den Schlüsselwörtern sowohl die Schreibweise mit äöüß als auch mit
ae, oe, ue, ss zu nehmen.
description:
Kapitel: Metatags
Eine kurze Beschreibung Ihrer Homepage, die nicht länger als 200 Zeichen sein sollte.
Längere Beschreibungen werden von vielen Suchmaschinen nicht akzeptiert.
index:
2
2
9
Hier geben Sie der Suchmaschine Anweisung, ob sie auch Ihre weiteren Seiten aufnehmen
soll, also nicht nur die Startseite. Dabei gibt es 4 Varianten, die teilweise noch gemischt
werden können.
index - die betroffene Seite soll aufgenommen werden

noindex – Seite nicht aufnehmen
follow - alle Links auf der Homepage weiterverfolgen und diese auch aufnehmen
nofollow – die Links unberücksichtigt lassen.
Und natürlich kann gemischt werden. Beispiel: "index, follow" oder "index, nofollow"
revisit
hier kann eine Tagesangabe gemacht werden, nach der die Suchmaschine wieder
vorbeischauen kann, um neue Inhalte aufzunehmen. Beispiel "after 30 days"
Die Metatags haben ihren Platz im HTML-Code zwischen <head> und </head>.
Was bewirken die Metatag-Einträge bei

Suchmaschinen?
Kapitel: Was bewirken die Metatag-Einträge bei Suchmaschinen?

folgende Metatags beeinflussen normalerweise die Einträge in den Suchmaschinen:
<TITLE>Abt. Erwachsenenbildung/Weiterbildung der Universität

Tübingen</TITLE>
<META NAME="Description" CONTENT="Erwachsenen- und Weiterbildung an der
Universität Tübingen">
Dies bewirkt folgendes Aussehen in Suchmaschinen:
2
3
0
Der <TITLE> - Tag erscheint in der obersten Zeile der Browser und wird auch bei setzen
eines Bookmarks bzw. Favoriten in der Bookmarkliste als Beschreibung verwendet
Kapitel: Was bewirken die Metatag-Einträge bei Suchmaschinen?

Oberste Zeile des Browser
Bookmarks / Favoriten
2
3
1
Daher ist es besonders "schlimm", wenn kein Titel oder nur nichtssagende Titel verwendet
werden!
Anmerkung: Suchmaschinen durchsuchen mit Vorliebe die Titel um das Rating zu vergeben,
d.h. auf welcher Position diese Seite in der Suchmaschine auftaucht.
Und weil es so schön ist und man sich ohne <TITLE> - Tag in bester Gesellschaft befindet
(2.377.939 mal am 5.12.1999) ein Negativ-Beispiel. Zur Abrundung ist natürlich wichtig,
dass man keine weiteren Metatags gesetzt hat und der Anfangstext auf der Webseite nicht
sonderlich aussagekräftig ist :-)
Kapitel: bei Suchmaschinen anmelden
bei Suchmaschinen anmelden

Bevor Sie eine Site bei Suchmaschinen anmelden, achten Sie unbedingt darauf, dass alle Ihre
<TITLE>-Tags mit sinnvollem Inhalt versehen sind und Sie die Metatags sinnvoll auf allen
eingetragen haben.
Die optimale Anmeldung bei Suchmaschinen erfolgt per Handarbeit. Dazu geht man in die
gewünschte Suchmaschine, und dann suchen Sie nach etwas, das sich wie "URL anmelden",
"Ihr URL-Eintrag (altavista.de)" oder "So schlagen Sie Ihre Website vor (yahoo.de)" oder
"Homepage anmelden (web.de)" oder "Seite anmelden (lycos.de)" aussieht.
Ab dann werden Sie Schritt für Schritt durchgeleitet. Je nach Suchmaschine ist eine solche
Anmeldung innerhalb von 3 Minuten geschehen oder benötigt 30 Minuten.
2
3
2
Der einfachere Weg ist, über irgendeinen Internetservice die Seiten anmelden zu lassen.
Dabei wird allerdings Ihre Homepage i.d.R. nicht optimal angemeldet und Sie sind bei den
Suchmaschinen eher auf den hinteren Plätzen.
Bis Sie dann nach dem Anmelden Ihre Seiten in den Suchmaschinen finden, kann auch
geraume Zeit ins Land gehen. Je nach Suchmaschine sind Sie bereits am nächsten Tag
auffindbar (altavista.de) oder erst nach Wochen (yahoo.de).
Tipp 1: Das Anmelden sollte von Zeit zu Zeit von Neuem erfolgen.
Tipp 2: Richten Sie sich eine E-Mail-Adresse ein, auf die alle
Anmeldebestätigungen und sonstige Nebenerscheinungen auflaufen
können. Trennen Sie unbedingt diese E-Mails von Ihren normalen E-
Mails. Ansonsten werden Sie sich über unzählige Junkmails wundern /
ärgern.
robots.txt - was es mit dieser ominösen

Datei auf sich hat
Suchmaschinen schicken kleine Programme im Netz umher, um neue Internetseiten zu finden.
Diese Suchprogramme sind unter verschiedenen Namen geläufig: crawler, spiders, robots.
Diese Programme schauen, ob eine Datei mit dem Namen robots.txt für sie bereitgehalten
Kapitel: robots.txt - was es mit dieser ominösen Datei auf sich hat
wird, die ihnen die Vorgehensweise vorschlägt. Darin wird meistens den Spidern erklärt,
welche Dateien und Verzeichnisse nicht aufgenommen werden sollen.
Warum also sollte man solche Datei anlegen, wenn alles von den Suchmaschinen gefunden
werden soll? Ganz einfach: Gibt es diese Datei nicht, wird jedes Mal, wenn ein Spider anfragt
eine 404 Fehlermeldung im Log produziert.
Daher ist es praktisch, eine Basis-robots.txt im Hauptverzeichnis abzulegen mit folgendem

Inhalt
# robots.txt for http://www.ihre-domainname.de/
# Zugriff auf alle Dateien erlauben
User-agent: *
Disallow:
Bedeutung:
die ersten 2 Zeilen mit dem # als Anfang sind nur Erklärungen ohne Wirkung.
durch den * beim User-agent ist der Zugriff durch alle Spider erwünscht.
durch keine Angaben bei Disallow ist nichts gesperrt.

2
3
3
zu beachten
Für die vorgesehene Funktion sind folgende Punkte zu beachten:
• die Schreibung der Datei muss exakt so sein - also alles klein: "robots.txt".
• die robots.txt muss im Hauptverzeichnis abgelegt werden.
• beim Erstellen sollten Sie einen reinen Texteditor verwenden, damit nicht
irgendwelche Sonderzeichen reinrutschen. Geeignete Editoren sind unter Windows
das notepad.exe, unter DOS der edit.com und vi unter Linux.
• beim Übertragen auf den Webserver muss die Datei im ASCII Modus übertragen
werden.
Domainnamen
Ein Domainnamen ist z.B. www.axelino.de oder auch www.ard.de. Die Endung, hier z.B. .de,
ist das Länderkürzel. Im Normalfall steht die Endung für das Land. Hierbei gibt es 4 wichtige
Ausnahmen, die auch in der folgenden Tabelle aufgelistet sind. Folgend also die wichtigsten
Endungen.
wichtige deutschsprachige Länderkürzel

.de Deutschland
.at Austria - Österreich
.ch Confoederatio Helvetica - Schweiz
wichtige allgemeine Endungen

.com Comercial
.edu Education
.net Network
.org Organisation
.gov Gouverment
Immer mehr deutsche Domain-Namen sind vergeben. Ende 1999 waren es ca. 1. Mio
Domains, aktuell sind schon über 10 Mio. registriert.
Kapitel: Domainnamen
Schöne grafische Übersichten über die Anzahl der registrierten Namen ist bei dem Deutschen-
Nic unter http://www.denic.de/de/domains/statistiken/ zu finden.
Als Domain-Namen bezeichnet man also das erste URL-Stück - wie z.B. "www.ard.de" oder
"www.tagesschau.de" usw. Wenn Sie jetzt einen eigenen Namen möchten und nicht mehr Ihre
Internetsite unter z.B. "http://homepages.uni-tuebingen.de/student/vorname.nachname/" haben
wollen, sondern z.B. unter "www.ihr-nachname.de", müssen Sie eine eigene Domain
anmelden bzw. reservieren. 2
3
4
Domain-Namen reservieren
Wenn Sie sich einen eigenen Domain-Namen sichern möchten, gibt es einige Dinge zu
beachten. Beachten Sie, dass auf verschiedene Namen ein Markenrecht existiert ("www.ein-
markenname.de" – Garant für einen Gerichtsprozess) und bei anderen Domainnamen gegen
den guten Geschmack verstoßen oder religiös schwieriges Gebiet betreten wird, wo es dann
schnell zu einer Abmahnung kommen kann.
Um zu überprüfen, ob eine Domain noch frei ist, können Sie über den deutschen DE-NIC
gehen.
DE-NIC finden Sie im Internet unter "http://www.nic.de/". Mit dem Punkt Whois-Abfrage
können Sie überprüfen, ob der gewünschte Namen noch frei ist. Gehen Sie am besten immer
über DE-NIC. Es sind schon Fälle bekannt geworden, dass Anbieter, die Namen auf die
Registrierbarkeit überprüfen, zusätzlich die Eingaben abgefangen und interessante Namen
dann für sich selber gesichert haben (es gibt immer schwarze Schafe, nicht jeder Anbieter
macht das!). Während der Anmeldung sollten Sie den Namen solange für sich behalten, bis er
eingetragen ist. Auch das können Sie über DE-NIC überprüfen.
Kapitel: Auswahl von Provider zum Kaufen einer

Domains mit den Endungen .de / .com / .info / .biz / .co.uk / .ag / .net / .org / .li und mehr
können Sie überprüfen unter dem Punkt Wunschdomain noch frei.
Wenn Sie sich jetzt für eine Domain entschieden haben und alle rechtlichen Dinge abgeklärt
haben, z.B. ob Sie bei Verwendung eines markenrechtlich geschützten Begriffs in dem
gewünschten Domainnamen (auch nur in Teilen) eine Lizenz benötigen oder wer der Inhaber
dieser Marke ist, kann zur Registrierung geschritten werden. Darüber finden Sie mehr bei
Domains registrieren und Webplatz
Auswahl von Provider zum Kaufen einer
2
3
5
Domain und Webspace
Diese Liste ist nicht vollständig und stellt keine Empfehlung dar!
Die Kosten dieser Seite sollen (schauen wir mal, ob das klappt) über die eventuellen
Vermittlungsprovisionen gedeckt werden. Wenn Sie also eine Domain bestellen und über die
bei den Providern angegebenen Links gehen, erhalten wir Provision und unsere laufenden
Kosten werden vielleicht gedeckt.
Name Internet-Adresse
1&1 www.1und1.de
Strato AG www.strato.de
goneo www.goneo.de
Lycos webhosting.lycos.de
Loomes www.loomes.net
united-domains AG www.united-domains.de
Wenn Sie sich also an den laufenden Kosten dieser Site über eine indirekte Spende beteiligen
wollen und eh gerade für sich eine Domain reservieren, können Sie das, indem Sie die
Reservierung über die obigen Links vornehmen.
Aktuelle Informationen und Angebote gibt es unter:

http://www.html-seminar.de/provider.htm
Für eine professionelle Seite ist die richtige Providerwahl sehr wichtig. Dies kann nicht mehr
über eine Auflistung geschehen. Es muss dabei berücksichtigt werden, ob vielleicht zukünftig
ein Online-Shop eröffnet werden soll und inwieweit die Zugriffe der Besucher zur
Verbesserung ausgewertet werden sollen. Aber für tiefer gehende Informationen stehe ich für
einen Obolus gerne bereit :-)
kostenloser Webspace und seine Kosten Kapitel: Domain und Webspace
Da im Forum immer wieder in verschiedenen Bereichen das Thema auf kostenlosen

Webspace und Freespace-Anbieter kommt, hier nun mein eigener persönlicher Test zu
verschiedenen Anbietern (welche natürlich nicht vollständig ist!).
Ich habe versucht, keine Anbieter zu nehmen, die nur Baukästen anbieten. D.h. wo man
eigentlich keine komplette HTML-Seite selber hinterlegen kann und was somit im Rahmen
von HTML lernen nichts verloren hat.
Kriterien waren:
• ftp sollte angeboten sein (und zwar kostenfrei im Paket)

• PHP wäre schön, falls man mal programmieren möchte
• die Menge der Werbung 2
3
6
• die Unversehrtheit des Quellcodes bzw. zumindestens dass das Design dadurch nicht
geändert wird
Werbefrei gibt es nicht (zumindest habe ich keinen gefunden). Bei allen Anbietern müssen
Werbeeinblendungen in Kauf genommen werden müssen. Die Anbieter müssen ja auch von
was leben (was ja OK ist). Allerdings verbinden sich damit verschiedene Probleme – siehe am
Ende des Textes.
Ein Problem von diesen Werbeeinblendungen ist, dass diese dadurch gelöst werden, dass der
eigene hochgeladen HTML-Code verändert wird. Dass kann dann soweit gehen, dass die
Seite nicht mehr so aussieht, weil die Änderungen zu hart in den Code eingreifen und dadurch
das Design verändern!
Testkandidaten
1. Yahoo! GeoCities
2. beepworld
3. Lycos Tripod!
4. funpic
Direkt zum Fazit
kostenfreier Webspace Anbieter: Yahoo! GeoCities

http://de.geocities.yahoo.com/
Beim Anmelden wird man nach den Anzeigenthemen auf der Website gefragt. Das ist dazu
gut, dass die Werbung später dann besser passt, damit der Anbieter Changen hat, etwas zu
verdienen.
Kapitel: kostenloser Webspace und seine Kosten

Wenn man bereits ein Yahoo-E-Mail-Konto hat geht’s schneller beim anmelden. Man erhält
nach der Anmeldung (wie bei allen Anbietern, deshalb wird es jetzt nur einmal erwähnt) eine
Bestätigungsmail, in der man per Link seine E-Mail-Adresse verifiziert. Dann geht’s zum
einloggen und man kann seine Website per FTP hochladen.
Dass ganze Prozedere lief problemlos ab. Die hochgeladene Website dann mit
Werbeeinblendung:
2
3
7
Allerdings kann man die Werbung zusammenfalten und diese gehört nicht zu den größten
(vielleicht ja Zufall und es wird nach Tagesform unterschiedliche Werbegrößen verwendet).
Zusammengefaltet ist die Werbung sehr klein am oberen rechten Rand. Allerdings entspricht

die Website nicht mehr dem Original.
2
3
8
In Quellcode wird automatisch eingegriffen. Beim ersten Aufruf der Seite, ist noch kein
weißer Rand oben, beim zweiten Mal dann schon (es wurde JavaScript vom Freespace-
Anbieter für die Werbung integriert).

Weiterhin hat die fehlerfreie Seite nach dem Hochladen Fehler, da anscheinend das JavaScript
nicht ganz auf dem Laufenden ist – Browser hier IE7. Immerhin kann man das überdeckende
Fenster klein machen.
Eine Möglichkeit, die eigenen HTML- und Bilddateien per Webformular hochzuladen, ist
möglich (aber nicht sinnvoll).
2
3
9
Test PHP: PHP ist nicht vorhanden - Dateien mit .php werden nicht angezeigt
kostenfreier Webspace Anbieter: Beepworld

Ist bei mir schlicht und ergreifend mit den anfangs genannten Kriterien durchgefallen. Die
fehlenden Informationen haben mich zum Anmelden verleitet. Während der Anmeldung die
erste Verwunderung bei mir: es gibt ein Punk mit web-surance Domainschutz und das
Kästchen ist bereits als Vorgabe angekreuzt (ist angeblich kostenlos – aber eigentlich wollte
ich Webspace und nicht irgendeine Versicherung).

Nach dem Einloggen dann eine weitere Ernüchterung, außer einem Homepagebaukasten (also
nicht zu unterstützen von HTML lernen) gibt es nicht einmal kostenlos FTP. FTP nur mit
Aufpreis, was dann Rundum-Sorglos-Paket genannt wird und als günstig angepriesen wird.
Allerdings sind über 3 Euro NICHT günstig. Da kann ich gleich zu einem normalen Provider
gehen und bekomme es um 1,25 Euro - das ist günstig!
FAZIT: nichts zum HTML lernen, kein FTP, mangelnde Beschreibung am Anfang (sonst
hätte ich mich nicht einmal angemeldet und somit muss B. mit dieser meine Kritik leben und
bekommt nicht einmal einen Link hier!
kostenfreier Webspace Anbieter: Tripod

www.tripod.lycos.de
2
4
0
Geworben wird mit: Erstellen Sie Ihre eigene Websites mit wenigen Klicks. Komplett
kostenlos! Neu jetzt mit 1024MB Speicher und PHP5. Tripod Features: PHP, MySQL, FTP,
WebFTP, Gästebuch, Formulare, Counter, Statistiken, Umfragen
Soweit so gut – das lasst einen gespannt sein, inwieweit die Werbung sich mit der Realität
deckt.
Nach dem Anmelden und dem hochladen der Website per FTP (was beides problemlos war)
dann die größere Werbefront. Hier sagt ein Bild mehr als tausend Worte:

Man kann die untere Werbung verkleinern:
2
4
1
Oben bleiben die Einblendungen von in meinem Fall (lusterweise) der Google Anzeigen.
Lycos Tripod versucht also seine Kosten mit Werbeeinnahmen von Google zu decken:). Ein
bisschen wenig Werbung hätte es auch getan.
2
4
2
Der PHP-Test war problemlos. Inwieweit alle PHP Möglichkeiten vorhanden sind müsste
man ausprobieren (bei jedem Anbieter wurden nur die Grundfunktion getestet).
Der PHP-Befehl "echo" und phpinfo(); wurde ausgeführt. So ist auch die PHP-Version am
schnellsten zu sehen.

kostenfreier Webspace Anbieter: Funpic
http://www.funpic.de/
Bei Funpic gibt es noch mehr Speicherplatz 2500 MB, Traffic inklusiv, PHP, FTP und
MySQL. Hört sich vielversprechend an. Anmeldprozedur ähnlich wie bei den anderen mit E-
Mail und Link. Nach dem Einloggen war ich vom Design der Oberflache ganz angetan. Da
hat jemand mit Liebe design und auch die Hilfen waren beim überlfiegen in Ordnung. Der
FTP-Zugang muss erst von einem selber freigeschaltet werden (dabei vergibt man gleich das
Kennwort).
So, Daten hochladen ohne Problem und Website ansehen.
Was bisher überzeugt war, hatte nun prompt die größte Werbung vorschaltet. Ob es Zufall
war, oder nicht, bleibt mal dahingestellt. Aber die Jungs müssen auch Ihr Geld verdiene. Das
im Hintergrund ist die Website. 2
4
3
Nach Wegklicken der Werbung dann die eigene Website in voller Pracht. Und was mir
aufgefallen ist – kein JavaScript Fehler (wie bei manchen anderen, der dann im unteren linken
Eck angezeigt werden würde).
Der PHP-Test lief auch sauber und zur Zeit das aktuelle PHP 5. 2
4
4
Insgesamt soweit in Ordnung.
Fazit zur Testaktion von Anbieter kostenfreiem Webspace

(Freespace)
Es gibt im Leben nicht für Umsonst. Zwar kostet hier der Webspace kein Geld, allerdings

"erkauft" man das sich mit fremder Werbung. Durch die Werbung kann es notwendig werden,
dass man ein Impressum auf der Website hinterlegt, da man jetzt nach deutschem Rechts
bereits in einen geschäftsmäßigen Bereich reinrutschen kann! Flapsig gesagt: es ist keine
Hobbies-Seite mehr, da ja Werbung darauf ist. Juristen mögen mir die flapsige Umschreibung
verzeihen.
Das Werbung Geld bringen kann, ist abhängig vom Inhalt der Seite. Wenn man nun wirklich
Inhalt auf seiner Seite hat, verdienen der kostenfreien Webspace Anbieter. Natürlich haben
diese auch Kosten für den Traffic der Seite.
Läuft also was mit der Seite, ist es naheliegend, selber das Geld für die Werbeeinnahmen
einzustreichen (siehe http://www.geld-verdienen-durch-internet.de) und selber z.B. AdSense
aufzuschalten. Es bleibt also hier jedem selber überlassen, sich zu überlegen, ob aus seiner
Website mehr wird und eine Leserschaft sich für die Inhalte findet (z.B. dür die Hobbies oder
was immer auf der Website auftaucht) oder man zum herumtesten mit HTML einen
Webspace benötigt. Überlegen sollte man es sich fast im Vorfeld, denn ein Domain mit
eigenen Domainnamen (sofern er gut ist) und gut besucht wird, nimmt im Lauf der Zeit an
Wert zu. Das hat man natürlich bei den Freehostern nicht, da man ja nur eine Subdomain hat. 2
4
5
Sobald man bei den Freespace-Anbieter hochstuft (und Geld ausgibt), kann ein normaler
Provider billiger sein (siehe Goneo).
Soviel dazu – somit kann ich nun immer vom Forum auf diesen Beitrag verweisen.
Recht kann das Gegenteil von Links sein!

Beim Erstellen von Internetseiten muss immer der rechtliche Aspekt bedacht werden. Dazu
gehören nicht nur das Copyright und das Recht an Bild, Wort und Ton, sondern neuerdings
auch Links.
Inhalte
Wer Inhalte von einer Website 1 zu 1 ohne Einwilligung oder Erlaubnis (am besten
schriftlich) übernimmt, darf sich nicht wundern, wenn er Stress bekommt. Nette Dienste im
Internet wie z.B. http://www.copyscape.com finden schnell Plagiate. (Hallo
http://web.tiscali.it/aaaxvoqb/ und http://fxpisaniceidea.tripod.com/ ;-)
Bilder
Bilder, auch wenn es nur Ausschnitte sind, unterliegen ebenfalls dem Urheberrecht des
Photografen. Also Finger weg davon
Domainnamen & Recht
Hier bringt Florian Huber, Wirtschaftsjurist (Univ. Bayreuth) Wissenswertes zu

Domainnamen und 7 goldenen Regeln für die Registrierung. Er hat auch einen sehr
informativen Newsletter.
Kapitel: Recht kann das Gegenteil von Links sein!

http://www.domain-recht.de
Bücher zum Thema

• Die rechtssichere Homepage. Was Sie beachten müssen, bevor Sie Ihre Homepage
online stellen - von Christina Klein
• Ihr rechtssicherer Internetauftritt. Von der Infoseite bis zum Online-Shop - ohne
Rechtsstreit! von Georg F. Schröder
Mehr Informationen zu den Büchern erhalten Sie durch Anklicken derselben.
2
4
6
Geld verdienen mit der eigenen Homepage
Anmerkung: Eine weitere Seite von uns, die sich tiefergehend mit dieser Thematik
beschäftigt, finden Sie unter: http://www.geld-verdienen-durch-internet.de/
Der Traum eines jeden - einmaliger Einsatz und dann nebenher ohne weiteren Aufwand Geld
verdienen. Dies ist in begrenztem Umfang möglich. Dazu werden Werbelinks eingebaut, die
auf Buchläden, T-Shirt-Druckereien, Webspace-Verkäufer oder Reisebüros verweisen.
Natürlich sollte sich jeder bewusst sein, dass im Normalfall der Website-Besucher nur auf für
ihn interessante Links klicken wird. So macht auf einer Seite über Karibikurlaub durchaus ein
Link auf ein Reisebüro Sinn. Hat der Werbepartner keinen Zusammenhang zum Inhalt der
Seite, ist es unwahrscheinlich, dass irgend jemand auf den Werbelink klickt, höchstens aus
Verzweiflung, weil er nichts brauchbares auf der Homepage findet und schnell weg will.
Partnerprogramme (engl. Affiliate Programs)

Um Anbieter von Produkten bzw. Werbung mit Anbietern von Internetseiten (also mit Ihnen)
zusammenzubringen, gibt es Partnerprogramme. Bei den Partnerprogrammen haben Sie als
Internetseitenbetreiber eine große Auswahl an Firmen, bei denen Sie für Werbung bzw.
Empfehlung, platziert auf Ihrer Internetseite, Geld verdienen.
Vorteile der Partnerprogramme:
• Die Partnerprogramme bieten Ihnen verschiedenste Werbepartner an.

• Die Partnerprogramme managen die Verwaltung der Einkünfte (auch bei
verschiedenen Werbepartern).
•
Kapitel: Geld verdienen mit der eigenen Homepage

Es werden umfangreiche Statistiken bereitgestellt
• und das wichtigste, die Partnerprogramme zahlen das verdiente Geld dann
gesammelt an Sie aus.
Als Beispiel finden Sie bei Zanox über 1100 Partnerprogramme. Die Anmeldung kostet Sie
als Seitenbetreiber normalerweise nichts - melden Sie sich einfach mal direkt bei den
folgenden Partnerprogrammen an. So können Sie schnell sehen, ob ein passender Partner für
Sie und Ihre Website existiert (normalerweise sind immer interessante dabei) und unter
Umständen können Sie schon in 1 Stunde mit Ihrer Website Geld verdienen. Wichtig ist, dass
Sie bei der Anmeldung den Internet Explorer verwenden, da beide Seiten ein
Darstellungsproblem mit dem Firefox zur Zeit haben.
Folgende Partnerprogramme kann ich empfehlen:
• Zanox (über 1100 Partnerprogramme)

• ADbutler
2
4
7
Kostenlos anmelden und testen! Der erwirtschaftete Betrag wird erst ab einer bestimmten
Höhe ausgezahlt (z.B. 25 €), aber bekanntlich macht Kleinvieh auch Mist.
Bei anderen Partnerprogrammen sollte man immer darauf achten, ob die Teilnahme ohne
Kosten für den Teilnehmer (also für einen selber) ist und bei ausländischen
Partnerprogrammen, ob die Auszahlungsmodalitäten gut geregelt sind und nicht das Einlösen
des Schecks mehr Gebühren verursacht als der Gegenwert des Schecks ist.
Bei obigen Partnerprogrammen werden umfangreiche Online-Statistiken angeboten, die Sie

jederzeit abrufen können. So können Sie Ihre Seite/Werbung nachoptimieren.
Für einen Einblick in den Affili-Markt ist der kostenlose Newsletter `Geld verdienen im
Internet` von 100partnerprogramme interessant.
Konditionsmodelle - verschiedene Aktionen, um durch

Ihren Besucher Geld zu verdienen
Pay per Klick
Hierbei wird Geld verdient, wenn ein Klick auf das Werbemittel (Banner, Textlink) erfolgt.
Pay per Lead
Hierbei wird davon ausgegangen, dass der Besucher irgendeine Aktion macht. Also bei einem
Preisrätsel mitmacht, Kontakt aufnimmt oder Informationen anfordert. Im Klartext: Dabei
werden gerne Adressen gesammelt; ob man das mag, bleibt jedem selber überlassen, vor
allem den Besuchern, die ja freiwillig ihre Daten hergeben (oder auch nicht :-)

Wenn Sie sich beispielsweise über folgenden Link bei Google Adsense anmelden, ist das der
Lead:
Ähnlich dazu ist das "Pay per SignUp", wenn also die Bestellung z. B. eines Newsletters
erfolgt.
Pay per Sale

Wenn durch den Besuch auch etwas verkauft wird. Das beste Beispiel hierzu ist Amazon.
Dabei berechnen sich die Einnahmen in Abhängigkeit vom Verkaufspreis - es erfolgt eine
prozentuale Beteiligung zwischen 5 und 15 Prozent.
Beispielweise, wenn Sie eine Handycarte bei SIMply bestellen: Einfach-Mobilfunk.de simply
the best!
(klasse Anbieter ohne Grundgebühr)

2
4
8
Beispiele dafür finden Sie auf der Seite unter der Bücherseite buecher.htm
bzw. kann über ein Suchfeld zu Amazon gelangt werden
Schnellsuche
Alles
Suchbegriff
HTML
Geld eintreiben - eigenen Content verkaufen

Für Kleinbeträge (unter € 10) kommt die Möglichkeit eines Einzuges per 0900 Nummer, die
über eine andere Firma läuft, in Frage.
Auf der eigenen Webseite wird der Besucher aufgefordert, eine 0900-Telefonnummer (in
anderen Ländern andere Nummern) anzurufen. Dort erhalten diese dann ein Passwort. Mit
jedem Anruf wird ein neues Passwort generiert.

Dieses Passwort gibt der Besucher dann wieder auf der Homepage ein. TeleWord prüft dieses
Passwort, wobei dieser Vorgang für den Besucher nicht sichtbar ist.
Ist das Passwort korrekt (hat der Besucher also wirklich angerufen), so erhöht sich der eigene
Kontostand bei TeleWord. Einmal im Monat (wenn der Betrag hoch genug ist) wird das Geld
ausgezahlt.
Der Besucher, sofern das Passwort richtig war, erhält dann die versprochene Serviceleistung
oder den Content.
Und zusätzlich steckt hinter dem Teleword-Logo noch ein Partnerprogramm - für jeden
geworbenen Partner wird man an dessen Umsätzen beteiligt. Also wenn Sie Teleword zum
Geldverdienen nutzen möchten, dann bitte erst über das Banner oder diesen Link und ich
freue mich :-).
Tipps zum Geld verdienen mit der eigenen Homepage

Kreativität hilft. Die Werbelinks können Sie auch in Ihre versendeten E-Mails aufnehmen.
Richten Sie einen Textlink in Ihrem E-Mail-Programm als Signatur entsprechend ein. 2
4
9
Einmal Aufwand und automatisch unter jeder E-Mail. Zusätzlich haben Sie so den Effekt,
dass die angeschriebenen Empfänger Sie im Normalfall kennen und so die Empfehlung noch
mehr Gewicht hat.
Achten Sie darauf, dass Sie Ihre Seite nicht mit Werbung überladen, als wären die
Webseiten nur zum Geld verdienen da.
Halte Sie Ihre Webseiten ruhig. Blinkende Werbebanner haben laut einer Untersuchung
weniger Effekt (und somit wird weniger Geld verdient) als gezielt eingesetzte Links. Wählen
Sie die Werbemittel mit Bedacht aus - die Anbieter stellen meistens verschiedene Formen zur
Verfügung (sowohl Werbebanner wie nur Textlinks).
2
5
0
Tipps & Tricks
Größenüberprüfung durch IE ganz einfach realisierbar
Zum Überprüfen der Wirkung von Internetseiten muss die fertige Seite überprüft werden, wie
diese mit verschiedenen Auflösungen (640 x 480; 800 x 600; 1024 x 768) aussieht.
Entwickeln sollten Sie auf einem Monitor, auf dem mindestens die Auflösung 1024 auf 768
läuft!
1. Eintrag in die URL von javascript:window.resizeTo(640,480)

2. Nun kann davon ein Favorit (Bookmark) gemacht werden; noch besser ist es, den Link
in die Linkliste zu ziehen!
3. In der Linkleiste kann über die rechte Maustaste dem Ganzen ein sinnvoller Name
gegeben werden!
4. Das gleiche sollte nun noch mit den restlichen wichtigen Auflösungen gemacht
werden.
o javascript:window.resizeTo(800,600)
o javascript:window.resizeTo(1024,768)
Das Ganze sieht dann fertig so aus:
Bilder ausschalten - Design überprüfen (IE)

Einige Surfer haben die Bilder ausgeschaltet. Damit Ihr Design nicht zusammenbricht und
Ihre Steuerung im Nirwana verschwindet, müssen Sie Ihre Entwicklung darauf überprüfen,
Kapitel: Tipps & Tricks
was passiert, wenn die Bilder ausgeschaltet sind.
Der einfachste Weg dazu ist, wenn zusätzlich zum IE-Explorer noch das vom selben
Hersteller angebotene Toolkit mit dem schönen Namen "Power Toys für den IE" eingesetzt
wird.
Nach der Installation haben Sie den ImageToggler in der Linkzeile als Button und können
bequem Bilder ein- und ausschalten (und auch das Laden von Bildern aus dem Internet
abstellen).
2
5
1
Wird nach dem Abschalten der Bilder kein Text als Ersatz angezeigt, sollten Sie dringend die
ALT-Tags bei den Bildern eintragen!
Weitere nützliche Tools in diesem Paket
• Open Frame: Öffnet Frames in einem neuen Browser-Fenster

• Quick Search: Hiermit kann man für die einzelnen Suchdienste Abkürzungen
benutzen. Man braucht dann nur noch die Abkürzung gefolgt vom Suchbegriff in die
Adressleiste eingeben.
• Zoom In/Zoom Out: Mit einem Mausklick kann man jede Grafik vergrößern bzw.
verkleinern.
• Text Highlighter: Der Textmarker fürs Internet.
• Web Search: Startet eine Anfrage bei Suchmaschinen nach dem markierten Wort.
• Links List: Erstellt eine Liste mit allen Links der Webseite.
Design bis an den Rand

Bei Browsern wird erst die ganze Fläche genutzt, wenn im Body-Tag folgende Sequenz
auftaucht:
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">

Kapitel: Tipps & Tricks
Im Vollbildmodus Präsentieren
2
5
2
Bei den meisten Browser kann mit der F11-Taste in den Vollbildmodus gewechselt werden,
bzw. wieder durch F11 der Vollbildmodus verlassen werden. Im Vollbildmodus entfällt der
Browserrahmen und es wird nur noch der Inhalt angezeigt. Ideal z.B. im Schaufenster,
Messen oder bei Vorträgen und Präsentationen.
Offline Präsentieren mit IE
HTML-Seiten offline automatisch als Vollbild (Kioskmodus) präsentieren kann der IE mit
dem Eintrag
iexplore -k [site]
Beenden der Präsentation mit [ALT] + [F4]
Vor- und Nachteil - je nach dem: aus dem Kioskmodus kann nicht in den Normal-Modus
gewechselt werden. Mit [STRG]+ [N] kann ein neues Fenster im Normal-Modus geöffnet
werden.
Typografie im Internet
Für alle, die aus dem klassischen Druckbereich kommen - Internet ist etwas komplett anderes,
und wenn der "klassische Drucker" sich nicht von seiner Welt lösen kann, ist er als
Webdesigner völlig fehl am Platz!
Anbei ein paar Hinweise, die auf Webseiten weder üblich und oft nicht gangbar sind.
exaktes Layout
vergessen (und zwar sofort) - allein durch die unterschiedlichen Browser und
Plattformen (Windows, Mac, Unix) gibt es immer Unterschiede. Zum Beispiel werden
auf dem Mac i. d. R. die Schriften kleiner dargestellt.
Unterschneidungen
haben durchaus ihren Sinn, sind allerdings nicht in der aktuellen Browsergeneration
Kapitel: /Typografie im Internet
integriert - also vergessen.
erzwungene Satzumbrüche zwecks Design

macht wegen der Relativität der Darstellung eigentlich keinen Sinn und wird von
manchen Webdesignern meistens nur gemacht, damit der Kunde nicht weiter nervt.
Wir sprechen hier nicht von Absätzen, die den Text gliedern!
2
5
3
Trennstrich, Gedankenstrich, Geviertstrich
Trennstrich -
Trennstriche (Divis, Bindestriche) werden nur zwischen Kuppelwörtern verwendet. Auf

keinen Fall, um ein Wort für einen Umbruch auf die nächste Zeile zu trennen. Das ist eine
Todsünde!
Der Trennstich muss nicht speziell eingegeben werden - es wird das Minuszeichen verwendet.
Gedankenstrich –
Auf den meisten Internetseiten nicht besonders üblich, da die meisten Menschen keinen
Unterschied sehen und durch die Gewohnheit meiner Meinung nach dieser Unterschied auch
mehr und mehr verschwinden wird.
Ein Gedankenstrich ist korrekt ein Halbgeviertelstrich - er hat genau die halbe Breite eines
Gevierts. Vor und nach diesem ist ein Leerzeichen üblich. Am besten ein geschütztes
Leerzeichen (wird nicht getrennt - als HMTL-Tag )
Als HTML-Tag muss er gesondert ausgezeichnet werden mit dem HTML-TAG – und
mit den geschützten Leerzeichen sieht das dann so aus: – (viel Spaß
dabei :)
Geviertstrich —
Noch unüblicher im Netz - hat die Breite eines vollen Gevierts. Wird als Auslassungszeichen
für Centbeträge direkt nach dem Komma gesetzt, also € 12,—
Korrekte Gänsefüßchen (An- und Abführungszeichen)

Auch wer hier nach typo korrekte Zeichen haben will, darf mehr arbeiten. Dabei gilt immer zu
bedenken, dass je nach Land die Anführungszeichen anders gehandhabt werden :)
Anführungszeichen nach Land:

„in Deutschland“
‚in Deutschland‘
und mehr davon - andere Länder andere Sitten

«Frankreich, Italien, Schweiz»
Kapitel:
»Schwedisch«
und sollten Sie noch motiviert sein, dies umzusetzen, die entsprechenden HTML-Tags dazu:
2
5
4
„ &bdquo; doppeltes Anführungszeichen
“ “ doppeltes Abführungszeichen
‚ &sbquo; einfaches Anführungszeichen
‘ ‘ einfaches Abführungszeichen
« « angewinkelte Anführungszeichen links
» » angewinkelte Anführungszeichen rechts
Zahlen richtig gesetzt

Als Vereinfachung empfiehlt sich, zwischen den Zahlen ein geschütztes Leerzeichen zu
setzen, also als HTML-Tag
Telefon- und Faxnummern:

werden jeweils von rechts ausgehend in Zweiergruppen aufgeteilt:
Bsp: Telefon (0 70 73) 9 10 16 10
Bankleitzahlen:
werden von links nach rechts in 3er Gruppen aufgeteilt (also 3 3 2)
Bsp: BLZ 300 902 22
Kontonummern:
von rechts nach links in 3er Gruppen
Bsp: Konto 8 412 564 324
größere Zahlen
können zwecks Übersichtlichkeit in 3er Gruppen von rechts gruppiert werden.
Bsp:
8 300 000 Pageviews
340 000 Stammkunden
1 500 Neuanmeldungen
Bookmarklet, Favelet
Kleines Programm (eigentlich i. d. R. nur der Aufruf eines Service von einer anderen
Website), dass in den Bookmarks abgespeichert wird und so im Browser direkt aufgerufen
werden kann.
Dadurch werden z. B. Übersetzungen realisiert (zu übersetzendes Wort markieren und das
Kapitel:
Bookmarklet aufrufen), hier auf der Website Fehler gemeldet und vieles mehr.
Das Installieren der Bookmarklets ist sehr einfach - ziehen Sie einfach den Link auf ihre
Lesezeichen, bzw. Leiste mit den direkten Lesezeichen. Ab jetzt können Sie per Klick das
2
5
5
Programm aufrufen. Wichtig ist, das JavaScript im Browser zugelassen ist (was der Standard
ist)
Folgende Bookmarklets sind für Website-Ersteller

interessant
• Gitter im Hintergrund
http://www.andybudd.com/archives/2006/07/layout_grid_bookmarklet/index.php
zauber ein Gitter in den Hintergrund - damit können Maße abgeschätzt werden.
Forum
Fragen und Hilfe? - ab ins Forum
Dort sind Sie gut aufgehoben - nicht zögern, Fragen zu stellen und auch die der anderen
Teilnehmer zu beantworten. Dabei lernt man eine Menge und kommt vielleicht auf noch
bessere Ideen.
Lassen Sie z.B. ihre Homepage von anderen begutachten und holen Sie sich ein Paar Tipps
und Ratschläge.
ins Forum.
Diverses
Hier finden Sie Informationen rund ums Thema, wie Software, Bücher, Linklisten usw.
Wenn Sie Anregungen haben, lassen Sie uns diese Zukommen.
Inhalt Einheit "Netscape Composer"

• Programm starten
• Abspeichern der Homepage
• HTML-Code ansehen
• Texteingabe
• Schriftformatierung
o Exkurs: Relativität der Darstellung
Kapitel: Forum
o Überschriften - Absatzgestaltung
o Textausrichtung
• Bilder einbauen
• Hintergrundbild (Textur) einbauen
• E-Mail-Adresse einbauen
• Links hinzufügen
• Navigationsleiste
2
5
6
HTML-WYSIWYG-Werkzeug
Netscape Composer
Programm starten
Der Netscape Composer ist Bestandteil vom Netscape Browser. Zum Aufrufen gehen Sie
entweder über den Menu-Eintrag "Start->Programme->Netscape Communicator-
>Composer" oder über das Symbol, das sich in der unteren Leiste installiert hat.
Kapitel: /HTML-WYSIWYG-Werkzeug Netscape Composer

Es erscheint jetzt folgendes Fenster, in dem der Großteil leer ist - hier wird unser Inhalt Platz
haben.
2
5
7
Abspeichern der Homepage
Um Computerabstürze weniger ärgerlich zu machen, sollte von Zeit zu Zeit die bereits
geleistete Arbeit gesichert werden. Zum Sichern gehen Sie entweder auf der Button-Leiste auf
Speichern

oder über
"Datei -> Speichern"
Prinzipiell sollte man für seine Dateien ein Verzeichnis anlegen, in dem alle Dateien
gespeichert werden. Der Dateiname für die Startseite muss index.htm lauten! Warum und
wieso und weitere Tipps zu Dateinamen später im Kurs.
Wenn jetzt gespeichert wird und noch kein Homepage-Titel angegeben wurde, werden Sie
jetzt danach gefragt.
2
5
8
Geben Sie dem Ganzen einen sinnvollen Namen! Dieser Namen kann später in
Suchmaschinen auftauchen, ohne dass Sie darauf Einfluss haben. Dieser Titel dient also der
Orientierung für den Surfer und für die Suchmaschinen. Detaillierte Informationen später im
Kurs.
HTML-Code ansehen
Um den HTML-Code anzusehen, gehen wir in das Menü
"Ansicht -> Seitenquelltext"
Obwohl bisher kein Inhalt vorhanden ist, gibt es HTML-Code. Dieser HTML-Code ist das
Gerüst, das jede Internetseite benötigt.
Hier ist das Grundgerüst, das bei jeder HTML-Seite zu finden ist. Diese zunächst verwirrende
Auflistung soll erstmal nicht stören. Wichtig zu wissen ist nur, dass später unser angezeigter
Inhalt sich zwischen den TAGs
<body>
Ihr sichtbarer Inhalt

2
5
9
</body>
befindet. TAGs nennen sich die HTML Befehle. Der Aufbau ist immer der selbe. Ein TAG
sitzt zwischen einem < > Es gibt einen Start-TAG < .. > und einen End-TAG </ .. >. Der
End-TAG ist immer derselbe Befehl wie der Start-TAG, allerdings mit einem / vorneweg.
Anstatt den 2 Punkten sollte dort der HTML-Befehl eingegeben werden.
Zum Beenden dieser Ansicht klicken Sie einfach auf das x des Fensters. Nicht das x des
Composers!
Texteingabe
Wie in einer normalen Textverarbeitung kann jetzt das Inhaltliche geschrieben werden.
Begrüßen Sie z. B. den Besucher Ihrer Homepage.
Und weil wir neugierig sind, wie das jetzt in HTML aussieht, gehen wir in das Menü
"Ansicht -> Seitenquelltext".
2
6
0
Unser Text taucht jetzt zwischen den <body> - TAGs auf. Bei genauerem Hinsehen fallen ein
<p> und diverse Hieroglyphen auf.
Hier haben wir einen der wichtigen HTML-Befehle
<p> fügt einen Absatz ein. Dabei kann das <p> an beliebigem Ort stehen. Alle HTML-Befehle
lassen sich aus ihrer englischen Herkunft ableiten. Das vereinfacht es, sie sich zu merken. Das
p steht für "paragraph" (Absatz).
Das <p> kann, braucht nicht, aber sollte einen End-TAG haben, also ein </p>
Die Hieroglyphen ü

Dabei handelt es sich um die Sonderzeichen der deutschen Sprache. Da das Internet weltweit
verfügbar ist, was von deutschen Sonderzeichen nicht zu sagen ist, werden diese besonders
beschrieben. Dazu hier die wichtigsten.
• für ä die Zeichenfolge ä

• für Ä die Zeichenfolge Ä
• für ö die Zeichenfolge ö
• für Ö die Zeichenfolge Ö
• für ü die Zeichenfolge ü
• für Ü die Zeichenfolge Ü
• für ß die Zeichenfolge ß
Zurück zu unserem Inhalt und der Gestaltung.
Schriftformatierung
Wie bei einer Textverarbeitung kann mit verschiedenen Schriftgrößen, Farben und Arten
variiert werden.
2
6
1
Um den Textbereich nach den eigenen Vorstellungen zu gestalten, wird er erst markiert.
Sobald der betreffende Bereich blau unterlegt ist, wird im Menüpunkt Format die gewünschte
Änderung an Schriftgröße, Schriftfarbe, Schnitt und Schriftart vorgenommen.
Zu beachten gilt: Im Internet ist vieles relativ - so auch die Schriftgröße.

Exkurs: Relativität der Darstellung
Überschriften - Absatzgestaltung

Besser als eine direkte Eingabe der Schriftgröße ist die Zuweisung von Formaten! Denn
dadurch wird am besten der Relativität des Internets Rechnung getragen. Es gibt dafür 6
verschiedene Überschriftgrößen, Absatzformate, Listenformate und die Ausrichtungen.
Für die Auswirkungen sehen Sie bitte folgende Beispiele:
2
6
2
Der dazugehörige HTML-TAG ist <H1> bis <H6>, wobei das H für "Headline" steht und die

Nummer für die Größenabstufung. Nachdem die Überschrift vorbei ist, muss der TAG wieder
geschlossen werden mit </H1> bzw. der entsprechenden Größe.
Textausrichtung
2
6
3
Der entsprechende HTML-Code ist für:
linksbündig: keiner, da eh standardmäßig

rechtsbündig: <div align="right"> und als End-TAG </div>
zentriert: <center> und als End-TAG </center>
Bilder einbauen
Und nun zu dem Thema, welches das Internet so schön bunt macht. Vielleicht wäre das Wort
grell öfters auch richtig. Bauen wir jetzt auf unserer Homepage Bilder ein.
Der einfachste Weg, wenn bereits ein Bild vorliegt:
Im Composer in das Menü Einfügen -> Grafik

Hier dann die entsprechende Datei auswählen über Datei wählen
2
6
4
Und dann erscheint die Grafik auf der Homepage.
In HTML erscheint nun der Befehl:
<img SCR="dateiname.gif">
Tipp: Die Ausrichtung der Grafik erfolgt genau so wie die Ausrichtung von Text!
2
6
5
Die Höhen- und Breitenangaben sollten gemacht werden, da dadurch der
spätere Seitenaufbau beim Browser beschleunigt wird. Wenn die Bildgröße
bekannt ist, sieht das so aus:
<img SCR="dateiname.gif" height="100" width="60">.
Hintergrundbild (Textur) einbauen
Und zu guter Letzt kann noch ein Hintergrundbild eingefügt werden, das flächendeckend sein
kann.
Dazu wird bei der Auswahl der Grafik nur das Auswahlkästchen "Als Hintergrundgrafik
verwenden" angewählt.
Als Ergebnis gibt es eine Homepage, die unter Umständen schlechter lesbar ist und auf jeden
Fall längere Übertragungszeiten benötigt.
Im HTML-Code sieht das Ganze dann wie folgt aus, und zwar immer zusätzlich im body-
TAG, der fast am Anfang der Seite zu finden ist.
<body background="hintergrundbild.jpg">
Tipp: Achten Sie auf die Dateigröße, ansonsten dauert die Übertragung zu
2
6
6
lange.
E-Mail-Adresse einbauen
Damit die Besucher der Homepage mit Ihnen in Kontakt treten können, sollten Sie Ihre E-
Mail-Adresse eingeben. Dazu gehen Sie in das Menü "Einfügen->Verknüpfung".

Unter Text tragen Sie Ihre E-Mail-Adresse ein. Dadurch kann der Surfer die E-Mail-Adresse
beliebig weiterverarbeiten. Unter Verknüpfung tragen Sie vor Ihrer E-Mail-Adresse ein
mailto: gefolgt von Ihrer E-Mail-Adresse ohne Leerzeichen!
Angezeigt bekommen Sie dann die E-Mail-Adresse als Link. Wird dieser Link angeklickt,
öffnet sich beim Surfer automatisch (sollte wenigstens) sein E-Mail-Programm, und Ihre E-
Mail-Adresse ist als Empfänger bereits eingetragen.
2
6
7
Der entsprechende HTML-Code:
<a href="mailto:max@mustermann.de"> max@mustermann.de </a>
Links hinzufügen

Sollen nun mehrere Seiten miteinander verknüpft werden, geschieht das über Links. Es gibt
interne und externe Links. Zu den externen Links später mehr.
Erstmal die internen Links. Durch diese werden mehrere Seiten Ihrer Internetsite miteinander
verbunden und können durch einen Klick auf den Link aufgerufen werden.
Um einen Link einzufügen, gehen Sie wieder auf das Menü "Einfügen->Verknüpfung".
Hier geben Sie unter Verknüpfungsquelle den auf der Homepage sichtbaren Text ein, unter
Verknüpfung die html-Seite, die aufgerufen werden soll.
2
6
8
Fertig sieht der Link wie folgt aus: in der Fußzeile erscheint der Pfad. Die Links müssen
unbedingt später nach dem Publizieren im Internet überprüft werden!
In HTML sehen Links wie folgt aus:
<a href="kontakt.htm">zu meiner Kontaktseite</a>
Navigationsleiste erstellen
2
6
9
Alle Links können zu einer Navigationsleiste vereint werden. Dadurch hat der Nutzer eine
einfachere Zugangsweise und die Steuerung der Site ist sofort einsichtig. Dazu werden gerne
Tabellen oder Frames hergenommen. Dazu später mehr.
Software
Die aufgeführten "Empfehlungen" sind nach meinem Erfahrungsschatz Software und Links,
die ich persönlich bevorzuge und gut finde. Aber Geschmäcker sind verschieden!
Internet-Browser
Firefox - ideal zum Entwickeln. Enthält viele Bonbons für Entwickler. Z.B. wird von einem
Internetseite nur von dem markieren Bereich der Quellcode angezeigt. - Vorgehensweise:
Bereich markieren, rechte Maustaste auf diesem Bereich, "Auswahl-Quelltext anzeigen"
anklicken
Opera - auch ein schöner Browser

http://www.opera.com/lang/de/
MS Internet-Explorer - die aktuelle 7-Version

http://www.microsoft.com/germany/windows/ie/worldwide/default.mspx
FTP-Programme
Um die erstellten Dateien im Internet komfortabel zu publizieren, werden FTP-Programme
verwendet. Diese sind oft wie der Windows- oder NT-Explorer aufgebaut.
Dazu kann ich FileZilla empfehlen - zusätzlich zu FTP noch sichere

übertragungsmöglichkeiten mit S-FTP (Open Source - GPL) sowohl deutsch und englisch und
viele andere Sprachen mehr
http://sourceforge.net/projects/filezilla/
oder WinSCP mit S-FTP-Funktionalität (Open Source) empfehlen - sowohl deutsch und
englisch und viele andere Sprachen mehr
Kapitel: Software
http://winscp.sourceforge.net
oder Total Commander Version 6 (Shareware)

http://www.ghisler.com/
oder über das Kontextmenü als "Senden an" die Freeware SendTo FTP
http://www.pclightning.com/ 2
7
0
HTML-Editoren
Editor Scriptly von Webocton
Editor mit viel Komfort und Freeware

http://www.scriptly.de/
HTML Editor Phase 5
Ulli Meybohms HTML Editor Phase 5 (kostenlose Nutzung für Privatpersonen und Schulen
erlaubt - Lizenzen siehe Website qhaut.de)
Jede Menge Informationen und der Download sind im HTML-Editor Portal zu finden:
http://www.qhaut.de/
Zum Bilder bearbeiten:
Paint Shop Pro (Shareware)

http://www.jasc.de/
Fixfoto
http://www.j-k-s.com/
Vermessen und Abstände:
ScreenRuler
Schönes Programm zu vermessen - ein durchsichtiges Lineal kann an beliebiger Position in

verschiedenen Größen gezogen werden.
Kapitel: Software
Beispiel:
Freeware Freeware ScreenRuler - auf der Website der Link mit "Download ScreenRULER
executable (~ 200 KB)".
2
7
1
Farben:
Anry Color Picker
Mit Anry Color Picker können Farbwerte aus Bildern und

Websiten ermittelt werden. Die Freeware ist unter
http://www.anryhome.com/software/colorpicker/ downloadbar.
(Freeware /Mehrsprachig mit deutsch)
ColorPic
Weitere Farben-Pipette - http://www.iconico.com/colorpic/ - ColorPic (Freeware)
Kleine WYSIWYG-Editoren
FrontPage Express (ist bei Installation von Internet-Explorer von Microsoft dabei)
Netscape Composer (ist bei Installation von Netscape dabei)
Nvu - HTML-Editor -eine Stand-Alone-Weiterentwicklung der Mozilla-Suite-Komponente

Composer, basierend auf der Gecko-Engine von Mozilla. - mit integriertem ftp-Client
(Freeware, sowohl Windows, Linux wie Mac).
http://www.nvu-composer.de/
Professionielle WYSIWYG-Editoren
Dreamweaver
Frontpage (von Microsoft)
Backup der Website

Zur Sicherheit können Sie von Ihre Website (natürlich auch Ihren Computer/oder Laptop) ein
Backup erstellen - gute und für alle Möglichkeiten gerüstete Software ist SyncFolder
Die Software kann über ftp die Daten von der Website downloaden (oder auch uploaden - je
Kapitel: Software
nach Wunsch) und das ganze auch automatisiert mit Zeitplaner.
2
7
2
Vorteile Firefox für Webentwickler
Ein besonderer Vorteil ist die selektive Anzeige von Quellcode, der hinter Teilen von
Websiten liegt. Dazu selektiert man den gewünschten Bereich mit der Maus (wie im
folgenden Beispiel der Startseite des HTML-Seminars).
Nach der Selektion dann rechte Maustaste (auf dem blauen Bereich) klicken und im Menü
den Punkt: "Auswahl Quelltext anzeigen" auswählen.
Kapitel: Vorteile Firefox für Webentwickler
Bild zum vergrößern anklicken
Diese Funktion ist sehr geschickt, um andere Webseiten zu analysieren und dadurch zu lernen
oder bei der eigenen Fehler zu entdecken :)
2
7
3
Add-ons - Firefox tiefer gelegt und aufgebohrt
Für den Browser gibt es zahlreiche Zusatztools, die einfach eingebunden werden können und
die Erstellung von Websites wesentlich komfortabler machen.
Eine kleine Auswahl von Links:
• http://www.erweiterungen.de/ - Auflistung vieler Erweiterungen (in deutsch)

• Html Validator - Anzeige von HTML-Fehlern von Marc
Gueury
• http://adblockplus.org/de/ - Werbeblocker
• http://livehttpheaders.mozdev.org - die Daten sichtbar machen, die der Server liefert
(wichtig für Weiterleitungen)
• http://www.erweiterungen.de/detail/Measure_It/ -Elemente ausmessen und Größen
bestimmen
• http://www.fortysomething.ca/mt/etc/archives/006375.php Bildschirmcaptures
erstellen
IE Developer Toolbar
Der Internet Explorer Developer Toolbar frisch erschienen am 12.1.2007 als Beta 3 hat einige
Funktionen, die das Entwickeln von Websites vereinfacht.
Microsoft Download
Nach dem Download installieren. Das Anzeigen der Toolbar geschieht über den das Menü
(versteckt sich gerne recht - Punkt IE Developer Toolbar) oder über Menü Extras ->
Kapitel: IE Developer Toolbar
Symbolleiste -> Explorer Leiste -> IE DOM Explorer.
2
7
4
Verschiedene praktische Unterstützungen beim Entwickeln und Gestalten von Websites
unterstützen einen.
Einblenden der DIV-Elemente

Dadurch ist sichtbar, wie eine Website aufgebaut ist.
2
7
5
Ändern der Fenstergröße
Zur Kontrolle, wie das Design in verschiedenen Bildschirmauflösungen wirkt, kann schnell
die Browsergröße umgestellt werden (man sollte allerdings einen großen Bildschirm
besitzen...)
Vermessen von Elementen

Mehrere Lineale (in verschiedenen Farben) können eingezeichnet werden. Fährt man mit der
Maus über das Lineal, erhält man die Größe und die Lage. Viel Spaß beim zeichnen (geht
auch quer).
2
7
6
Kontrolle der Website auf Fehler
Über Validate und HTML bzw. CSS kann getestet werden wo welche Fehler sitzen
2
7
7
Rund ums Internet
Software, die immer wieder benötigt werden und für den Internet-Alltag Pflicht ist.
PDF-Software
http://www.foxitsoftware.com/
PDF-Anzeiger Foxit Reader 2.0 von Foxit Software, der sehr klein und schnell ist.
Bücher
• eBook HTML-Seminar
• billig an Bücher über eBay
• Empfehlung HTML-Handbuch
• Neu über Amazon
eBook HTML-Seminar.de
Die komplette Website gibt es auch als E-Book im PDF-Format mit Inhaltsverzeichnis und
219 Seiten. Alles, was Sie hier auf den Seiten lesen, können Sie auch in aller Ruhe offline
lesen, bzw. bequem über das PDF-File ausdrucken (mit Ausnahme des Forums). eBook html-
Seminar.de
Billig an Bücher zum Thema

Um billig an Bücher zum Thema zu kommen, einfach in eBay stöbern. Teilweise gibt es da
Kapitel: Rund ums Internet
bereits ab einem Euro Bücher zu HTML, JavaScript und Programmierung.
Beispiele für Angebote zu HTML - klicken und Sie kommen bei eBay Ihres Landes raus im
Bereich für HTML
Buchtips:
2
7
8
Ein Muß für den HTML-Programmierer
D as v er k n ü p fte B ild k an n n ic h t
an g ezeig t w er d en . M ö g lic h er w eise
w u r d e d ie D atei v er sc h o b en ,
u m b en an n t o d er g elö sc h t. S tellen
S ie sic h er , d ass d ie V er k n ü p fu n g
au f d ie k o r r ek te D atei u n d d en
k o r r ek ten S p eic h er o r t zeig t.
Das Buch ist für Anfänger und Profis gleichermaßen geeignet. Der
Anfang wird Schritt für Schritt in die Geheimnisse von HTML eingeführt.
Die Elementrefenz eignet sich sehr gut zum Nachschlagen.
Dieses Buch kann über folgendes Formular direkt beim Verlag

Versandkostenfrei bestellt werden. (Wenn Sie dieses Formular nutzen,
unterstützen Sie unsere Seite)
Bestellmöglichkeit
Hiermit bestelle ich den Titel: 'HTML Handbuch' zum Preis von 30 EUR.
Bei einem Bestellwert von unter 20 Euro fallen zusätzlich 3 Euro
Versandkosten an. Die Lieferung erfolgt gegen Rechnung an die
angegebene Anschrift.
Anrede: Herr
Vorname:
Name:
Strasse:
Hausnr.:
PLZ:
Ort:
Land: Deutschland
eMail:
Die AGB der Franzis' Verlag GmbH

habe ich zur Kenntnis genommen und bin
mit ihnen einverstanden.
Bestellvorgang starten
Im folgenden Schritt können Sie die Bestellung noch abbrechen. Erst durch Ihre endgültige Bestätigung im nächsten
Schritt wird der bestellte Titel zum Gegenstand des Kaufvertrages.
Kapitel: /Bücher
2
7
9
Suche nach Büchern z.B. zum Thema HTML:
Schnellsuche
Alles
Suchbegriff
HTML
Kapitel: /Bücher
2
8
0
Interessante Linksammlung zum Thema
Die aufgeführten "Empfehlungen" sind die ich persönlich bevorzuge und gut finde. Aber
Geschmäcker sind verschieden!
Klasse Seite mit guten Tipps
und Newsletter, die kostenfrei abonniert werden kann (wer tiefer einsteigen möchte)
http://drweb.de/
HTML-Onlinebuch: SELFHTML:
Autor: Stefan Münz

http://de.selfhtml.org/
Und wer lieber SELFHTML von Stefan Münz als Buch lesen möchte, kann über diesen Link
beim Verlag ordern.
Guter Artikel von der Zeitschrift ct
"Der steinige Weg zu gutem WWW-Design"

Kann man jedem nur ans Herz legen!
http://www.heise.de/ct/00/05/246/
Kapitel: Interessante Linksammlung zum Thema
2
8
1
Referenz Sonderzeichen
maskierte Zeichen
folgende Sonderzeichen können entweder über den Namen oder über die Angabe der
Nummer sauber in HTML-Code integriert werden. Man spricht bei den Sonderzeichen von
maskierten Zeichen.
maskierte Zeichen
Aussehen Name Nummer Beschreibung englisch
einfaches
‘ ‘ left single quote
Anführungzeichen
einfaches
’ ’ right single quote
Anführungzeichen
einfaches unteres
‚ &sbquo; single low-9 quote
Anführungszeichen
“ “ Anführungszeichen left double quote
” ” Anführungszeichen right double quote
double low-9
„ &bdquo; Anführungszeichen unten
quote
† &dagger; dagger
‡ &Dagger; double dagger
‰ &permil; Promil per mill sign
single left-pointing
‹ &lsaquo;
angle quote
single right-
› &rsaquo; pointing angle
quote
&spades; Spielkarte Blatt black spade suit
&clubs; Spielkarten Kreuz black club suit
Kapitel: Referenz Sonderzeichen
&hearts; Spielkarte Herz black heart suit

&diams; Spielkarte Karo black diamond suit
overline = spacing
&oline; obere Linie
overscore
← Pfeil links leftward arrow
→ Pfeil rechts rightward arrow
↑ Pfeil aufwärts upward arrow
↓ Pfeil abwärts downward arrow
™ ™ Trademark Zeichen trademark sign
horizontaler Tabulator horizontal tab
2
8
2

line feed line feed
Leerzeichen space
! ! Ausrufungszeichen exclamation mark
doppelte double quotation
" " "
Anführungszeichen mark
# #
$ $ Dollarzeichen dollar sign
% % Prozentzeichen percent sign
kaufmänisches Und-
& & & ampersand
Zeichen
' ' Apostroph apostrophe
( ( Klammer auf left parenthesis
) ) Klammer zu right parenthesis
* * Stern (Asterisk) asterisk
+ * Plus-Zeichen plus sign
, , Komma comma
- - Bindestrich hyphen
. . Periodenzeichen period
&frasl; / Slash slash
0 0 Zahlen 0 bis digits 0-
9 9 9 digit 9
: : Doppelpunkt colon
; ; Strich-Punkt semicolon
< < < Kleiner als Zeichen less-than sign
= = Gleichzeichen equals sign
> < > Größer-als-Zeichen greater-than sign
? ? Fragezeichen question mark
@ @ Klammeraffee at sign
uppercase letters
A bis A Großbuchstaben A bis
A-
uppercase letters
Z Z Z
Z
[ [ eckige Klammer links left square bracket
Kapitel: maskierte Zeichen
\ \ Backslash backslash

right square
] ] eckige Klammer rechts
bracket
^ ^ Dach caret
horizontal bar
_ _ unterstrichen
(underscore)
` ` Accent grave grave accent
lowercase letters
a bis a Kleinbuchstaben a bis
a- 2
8
3
lowercase letters -
z z Kleinbuchstaben bis z
z
{ { geschweifte Klammer auf left curly brace
| | Vertikaler Strich vertical bar
} } geschweifte Klammer zu right curly brace
~ ~ Tilde tilde
– – kurzer Bindestrich en dash
— — Gedankenstrich em dash
umgekehrtes inverted
¡ ¡ ¡
Ausrufungszeichen exclamation
¢ ¢ ¢ Cent cent sign
£ £ £ engl. Pfund pound sterling
generelles general currency
¤ ¤ ¤
Währungszeichen sign
¥ ¥ ¥ Währung Yen yen sign
¦
unterbrochene vertikale
¦ oder ¦ broken vertical bar
Linie
&brkbar;
§ § § Paragraphenzeichen section sign
¨ oder
¨ ¨ Umlaut-Zeichen umlaut
&die;
© © © Copyright copyright
ª ª ª feminine ordinal
« « « left angle quote
¬ ¬ ¬ Zeichen für Nicht not sign
weiches Trennzeichen soft hyphen
eingetragenes registered
® ® ®
Wahrenzeichen trademark
¯ oder
¯ ¯ macron accent
&hibar;
° ° ° Grad-Zeichen degree sign
± ± ± Plus-Minus Zeichen plus or minus
² ² ² 2 hochgestellt superscript two
Kapitel: maskierte Zeichen
³ ³ ³ 3 hochgestellt superscript three

´ ´ ´ acute accent
µ µ µ Mycro-Zeichen micro sign
¶ ¶ ¶ Paragrafen-Zeichen paragraph sign
· · · Punkt mittig middle dot
¸ ¸ ¸ cedilla
¹ ¹ ¹ hochgestellte eins superscript one
º º º masculine ordinal
» » » right angle quote
2
8
4
¼ ¼ ¼ einviertel one-fourth
½ ½ ½ einhalb one-half
¾ ¾ ¾ dreiviertel three-fourths
inverted question
¿ ¿ &#; Fragezeichen auf Kopf
mark
uppercase A,
Ä Ä Ä Umlaut Ä
umlaut
uppercase O,
Ö Ö Ö Umlaut Ö
umlaut
× × &#; Multiplikationszeichen multiplication sign
Ø Ø Ø uppercase O, slash
uppercase U,
Ü Ü Ü Umlaut Ü
umlaut
lowercase sharps,
ß ß ß Sz
German
lowercase a,
ä ä ä Umlaut ä
umlaut
lowercase o,
ö ö ö Umlaut ö
umlaut
÷ ÷ ÷ Geteilt Zeichen division sign
ø ø ø Durchschnittzeichen klein lowercase o, slash
lowercase u,
ü ü ü Umlaut ü
umlaut
Maßeinheiten
Im Webdesign kann mit relativen oder absoluten Maßeinheiten gearbeitet werden.
absolute Maßeinheiten
pt - Punkt: 1 Punkt entspricht 1/72 Inches
pc - Pica: 1 Pica entspricht 12 Punkt
in - Inch: 1 Inch entspricht 2.54 cm
cm - cm: hinreichend bekannt :)
mm - mm: 10mm entspricht 1cm
Kapitel: Maßeinheiten
absolute/relative Maßeinheiten
px - pixels
Beim Pixel haben wie die Mischform von absolut und relativ. Die größe eines Pixels ist je
nach Ausgabegerät größer oder kleiner (wenn man es in mm nachmißt - siehe Bild auf
2
8
5
Monitor und Beamer). Die größe ist also relativ je nach Ausgabegerät. Bezogen auf ein und
dasselbe Ausgabegerät ist ein Pixel absolut.
relative Maßeinheiten
em
em (engl. equal M) bestimmt die Zeilenbreite in Relation zur Schriftgröße anhand der Breite
des des Großbuchstabens M (im Schriftsatz). Beim Webdesign fließt nicht nur die Breite
sondern auch die Höhe mit ein.
Anwendung von em beim Schriftsatz
Ein Kriterium für eine gute Lesbarkeit ist die Breite einer Spalte. Ist die Zeile zu lange, wird
für das Auge das finden der nächsten Zeile erschwert. Ist die Zeile zu kurz, entstehen größere
Leerräume am Zeilenenden.
Anwendung von em bei Webdesign
Die die Maßeinheit em (und dadurch die vorhandene Breite) lässt sich eine Breite definieren,
die ein angenehmes Schriftbild (Zeilen weder zu lang noch zu kurz) erzeugt. Durch die
realtive Definition passt sich bei der Größenänderung der Schrift dann automatisch die
Zeilenbreite an.
andere relative Maßeinheiten: % und ex
ex steht für die Höhe des Kleinbuchstaben x.
Kapitel: Maßeinheiten
2
8
6
Abk.; Computerchinesisch; Erklärungen
Applet
Applets sind in Java (nicht JavaScript!) geschriebene kleine Programme, die für Ihre
Ausführung meistens einen javafähigen Browser benötigen. Die Applets werden über das
Internet übertragen und Ihr Aufruf sind in Webseiten über spezielle HTML-Tags eingebettet.
Browser
Softwareprogramm, das auf WWW-Server zugreift und durch die Seitenbeschreibungssprache

HTML spezifizierte Dokumente darstellt. Im Browser gibt man die URL (siehe nächster
Begriff) ein, um die gewünschten Seiten zu sehen.
CSS
Cascading Style Sheets - aufeinander aufbauende (muß nicht, kann aber) Design-
Definitionen.
DOCTYPE
Am Anfang eines HTML-Dokuments wird dem Browser über den Doctype mitgeteilt, was er
nun erwarten kann. Bei xHTML muß die richtige Doctype-Definition sofort in der ersten
Zeile. Sollte versehentlich eine Leerzeile vor dem Doctype reinrutschen, verfällt der Browser
in einen Kompatibilitätsmodus (Quirks genannt) und die Reaktion auf diverse CSS
Auszeichnungen sind nicht wie gewohnt.
Bei xHTML gibt es folgende 3 Definitionen:
Kapitel: Abk.; Computerchinesisch; Erklärungen

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "DTD/xhtml-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-

transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Frameset//EN" "DTD/xhtml-

frameset.dtd">
FAQ
englische Abkürzung für Frequently Asked Questions - was übersetzt bedeutet "häufig
gestellte Fragen". Wären unter dem Punkt nur die Fragen zu finden, würde das den Nutzer
nicht weiterbringen, daher sind in der Regel zu den Fragen auch die Antworten zu finden.
ftp
2
8
7
Das File Transfer Protocol dient dem Dateitransfer zwischen Rechnern. Durch dieses
Protokoll und entsprechende Programme werden unsere hergestellten Seiten auf den
Homepage-Server transferiert.
Homepage
(Startseite) Die Seite, die der WWW-Benutzer beim Start eines Browsers zu sehen bekommt.
KK-Antrag
Konnektivitäts-Koordinations-Antrag: Wenn Sie von einem Provider zu einem anderen

Provider mit Ihrer Domain wechseln, wird solch ein Antrag gestellt werden (siehe hierzu auch
c´t 8/2000). Diesen KK-Antrag erhalten Sie meistens automatisch von Ihrem neuen Provider
zum unterschreiben und zurückfaxen. Beispiele finden Sie unter http://www.provider-
wechsel.de/ am Ende der Seite - diese gelten i. d. R. auch für andere Provider - wie immer
auch diese Aussage ohne Gewähr!
Link
Ein Verweis von einem Webdokument auf ein Anderes. Dieses kann sowohl innerhalb der
eigenen Website als auch auf eine beliebige andere Website zeigen.
Lorem Ipsum
Ein beliebter Platzhalter (sogenannter Blindtext), um das Design einer Website zu testen,
wenn noch keine Textinhalte vorliegen. Wird teilweise kontrovers diskutiert, da nur
Kleinbuchstaben und die Wortlängen nicht typisch deutsch sind. Wurde bereits im 16.
Jahrhundert eingesetzt. Für "eine Portion Lorem Ipsum" finden Sie hier einen Lorem-Ipsum-
Generator

IP-Adresse
Jeder Teilnehmer im Internet hat eine IP-Adresse - egal ob Website oder Surfer. Wenn Sie
Ihre aktuelle IP-Adresse jetzt gerade beim surfen herausbekommen möchten, nutzen Sie
http://www.ihre-ip-adresse.de
Auch jede Homepage hat eine IP-Adresse (teilweise muss eine Homepage die IP-Adresse mit
anderen Website teilen, was Shared Hosting bedeutet). Um die IP-Adresse einer Homepage
herauszubekommen, nutzen Sie in Windows die command-Shell (Start-Button -> Ausführen -
> cmd (eingeben) -> OK klicken) und dann im DOS-Fenster eingeben: PING www.html-
seminar.de
Danach erscheint in der nächsten Zeile Ping www.html-seminar.de [xxx.xxx.xxx.xxx] mit ... -
Voila die IP-Adresse.
PHP
2
8
8
Programmiersprache, die bei vielen Internetseiten im Hintergrund läuft (für Gästebücher,
Kontaktformulare, Diskussionsforen) und sehr einfach zu erlernen ist - gute Seite zum PHP
lernen ist http://www.PHP-Kurs.com
Pfadangabe
Eigentlich nichts anderes als die URL. Man kann aber bei der Homepage-Erstellung auch den
Teil der URL darunter verstehen, der ab dem home-Verzeichnis beginnt.
Relaunch
Was im Haushalt unter Frühjahrsputz fällt - ein alter Auftritt wird durch einen neuen ersetzt,
wobei durch Relaunch in der Regel das Design und die Usability optimiert werden.
Site
Ohne (e) bezeichnet keine einzelne Seite, sondern die komplette Anzahl aller einzelnen
Seiten.
Tutorial
Das englische Wort Tutorial ist i.d.R. eine Schritt für Schritt Anleitung. Häufig wird Tutorials
die Vorgehensweise sehr detailliert und ausführlich dargestellt. Tutorials stellen eine gute
Starthilfe für Anfänger dar. Diesen Kurs können Sie auch als HTML-Lern-Tutorial
bezeichnen :)
URL
URL=Universal/Uniform Resource Locator (Internet) Eine Namenskonvention, die den

Standort eines Computers, eines Verzeichnisses oder einer Datei im Internet eindeutig
kennzeichnet. Darüber hinaus gibt die URL-Adresse das geeignete Internet-Protokoll an, z.B.
HTTP oder FTP. Ein Beispiel für einen URL ist http://www.uni-
tuebingen.de/zdv/faq/faq.html
WebDAV
Abkürzung für Web-based Distributed Authoring and Versioning. Dadurch können Dateien
im Internet bereitgestellt werden. Praktisch gestaltet es sich so, als würde man auf der eigenen
Festplatte arbeiten und alle gewohnten Dateibrowser können genutzt werden (Online-
Festplatte). WebDAV kann auch als Ersatz für ein FTP-Programm verwendet werden.
2
8
9
Allerdings zickt Windows Vista beim einrichten erst einmal herum. Vorgehensweise ist (kurz
Beschrieben): regedit.exe aufrufen -> den Wert von "BasicAuthLevel" unter
"HKEY_LOCAL_MACHINESYSTEMCurrentControlSetServicesWebClientParameters" auf
2 setzen -> Computer frisch booten -> dann unter Computer auf "Netzlaufwerk zuordnen"
gehen -> "Verbindung mit einer Website herstellen ..." -> Weiter -> URL eingeben
"http://ihre-gewuenschte-domain.de:81" -> Benutzername und Kennwort eingeben -> Namen
zum wiederfinden verpassen -> benutzen
xHTML
extensible HyperText Markup Language - Seitenbeschreibungssprache zur Darstellung von

Internetseiten. XHTML stellt eine Weiterentwicklung und Adaption zu HTML dar und führt
HTML mit XML zusammen.
headerinformationen-404-401-301
Jede Internetseite liefert Headerinformationen. Im Normalfall steht bei einer erfolgreich
übertragenen Seite als OK die 404
Diese Informationen können bequem über das Firefox-Plugin LiveHTTPHeaders

(http://livehttpheaders.mozdev.org/index.html) angezeigt werden.
Kapitel: headerinformationen-404-401-301
2
9
0
Kapitel: headerinformationen-404-401-301
Exisitert nun eine Domain nicht mehr, bzw. soll auf die Hauptdomain weitergeleitet werden,
wird über die Datei ".htaccess" die Weiterleitungsinformationen weitergegeben:
RewriteEngine On
RewriteRule ^(.*)$ http://www.html-seminar.de/$1 [R=301,L]
RewriteRule .+ http://www.html-seminar.de/ [R=301,L]
Funktioniert, wenn Sie als Server eine Apache einsetzen, bzw. der Provider diesen Server
einsetzt.
2
9
1
Probleme bei merkwürdigen/falschen Zeichen meistens im
Firefox
Ein Problem im Firefox ist, dass auf verschiedenen Seiten statt der Umlaute und
Sonderzeichen merkwürdige Zeichen kommen. Das hat den Grund, dass der Fuchs erst mal
nach dem Zeichensatz schaut, was vom Webserver kommt. Und nachdem er dort nichts
findet, kann es vorkommen, das er ratet (daher ist es nicht immer, das Spitzohr) und leider
nicht immer richtig rät. Um auf diesen Einfluß zu nehmen (geht nur bei Apache!), folgende
Zeile in die .htaccess
AddDefaultCharset iso-8859-1
Und dann noch im Head-Bereich der HTML-Datei:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
Und wenn Sie fremde Seite ansehen, können Sie beim Firefox die verwendeten Zeichensatz
von Hand einstellen: Ansicht -> Zeichenkodierung -> Westlich (ISO 8859-1)
Kapitel: Favicons - Icon für Lesezeichenverwaltung und Website

Favicons - Icon für Lesezeichenverwaltung
und Website
Favicon ist ein Kunstwort und entstand durch die Zusammenziehung der der Worte Favorit
und Icon = Favicon. Diese Favicons erscheinen auf vielen Webseiten neben der URL als
kleine Grafik. Dieses Icon wird auch in den Lesezeichen angezeigt, wenn man die Website
bookmarkt.
Beispiel der Website fehlerlos.de - links neben der URL erscheint ein roter Haken, der eine
16x16 Pixel große Grafik ist.
favicons erstellen
2
9
2
Die Icons sind relativ einfach erstellbar. Man nehme eine Grafik - konvertiere diese auf eine
Größe von 16 auf 16 Pixel und speichere diese Grafik unter dem Namen favicon.ico
Wichtig ist als Dateiformat .ico - dieses lässt sich mit Irfanview erstellen. Grafik laden (egal
ob jpg der gif) und speichern unter ico. Mehr zum bearbeiten mit Irfanview im Bereich Bilder
bearbeiten
Die Grafikdatei wird nun in das Hauptverzeichnis (dort liegt die index.htm) der Website
hochgeladen.
Auf allen html-Seiten wird dann noch folgender Code im Head-Bereich eingebunden:
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
Fehler in Logfile vermeiden

Aus einem weiteren Grund ist es geschickt, so ein Icon für seine Website zu erstellen - es
wird automatisch vom Browser abgefragt und wenn es nicht existiert, wird jedes mal eine
Fehler im Logfile geschrieben.
Websites mit Unterverzeichnissen
Kapitel: Favicons - Icon für Lesezeichenverwaltung und Website

Ist die Struktur der Website mit Unterverzeichnissen aufgebaut, wird die .ico Datei nur im
Hauptverzeichnis abgelegt und als href dann dort die Angabe href="/favicon.ico"
2
9
3
Entweder Sie haben das HTML-Tutorial ...
... komplett durchgearbeitet, oder Sie haben unten zu lesen angefangen :). Auf jeden Fall sind
Sie auf dieser Seite gelandet und das deutet darauf hin, dass der Kurs Ihnen gefallen hat und
nützlich ist.
Daher können Sie (wenn Sie wollen) mithelfen.
Helfen Sie mit ... - Ihre Empfehlung freut uns besonders

Um das HTML-Tutorial bekannter zu machen, setzen Sie einen Link auf Ihrer Homepage.
Am besten ein Textlink in der Art:
<a href="http://www.html-seminar.de"
title="HTML Tutorial zum HTML lernen"
target="_blank" >www.html-seminar.de - html lernen einfach gemacht</a>
Den Text des Links können Sie natürlich nach Belieben ändern.
Social-Bookmark
Natürlich freuen wir uns auch über jeden (Social)-Bookmark ...
• del.icio.us
Kapitel: Entweder Sie haben das HTML-Tutorial ...

• www.mister-wong.de
Sie möchten Geld spenden ...

dann ist die einfachste Möglichkeit über PayPal. Die Höhe können Sie natürlich frei
bestimmen. Dabei sind auch kleine Beträge OK - Sie zeigen uns, dass unser Einsatz Ihnen
weiterhilft.
Sie helfen durch aktive Teilnahme im Forum

Geben Sie Ihre Erfahrungen weiter und nehmen Sie aktiv an unserem Forum teil. So helfen
Nutzer andern Nutzern.
2
9
4
Impressum
Impressum gemäß §6 Teledienstegesetz (TDG)
Verantwortlicher Redakteur und Webmaster für die Planung, Realisierung und Betreuung der
Internetinhalte sowie für die Administration der Domains www.html-seminar.de und
www.htmlseminar.de (Admin-c) ist
Institut für webbasierte Kommunikation und E-Learning (iwke.com)
Axel Pratzner
Kingersheimer Str. 39/1
72070 Tübingen
Germany
Tel. 07071 - 77 044 71
http://www.html-seminar.de
Das Projekt verfolgt keine kommerziellen Interessen sondern dient der Forschung. Falls Sie
Fragen, Kritik oder Anregungen zu diesem Internetprojekt haben, dann senden Sie einfach
eine E-Mail.
Bildquellen
Verwendete Bilder sind entweder aus dem eigenen Fundus bzw. von PhotoCase. Vielen Dank
an PhotoCase.com und die Fotografen.
Kapitel: Impressum
2
9
5

Kapitel - HTML Lernen Und Die Eigene Homepage Erstellen

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Kapitel - HTML Lernen Und Die Eigene Homepage Erstellen

Hochgeladen von

Copyright:

Verfügbare Formate

1

Kapitel: HTML lernen und die eigene Homepage erstellen

Kapitel: HTML lernen und die eigene Homepage erstellen

Kapitel: HTML lernen und die eigene Homepage erstellen

Kapitel: HTML lernen und die eigene Homepage erstellen

Kapitel: HTML lernen und die eigene Homepage erstellen

Kapitel: HTML lernen und die eigene Homepage erstellen

Kapitel: HTML lernen und die eigene Homepage erstellen

Kapitel: HTML lernen und die eigene Homepage erstellen

Kapitel: HTML lernen und die eigene Homepage erstellen

Kapitel: HTML lernen und die eigene Homepage erstellen

Kapitel: HTML lernen und die eigene Homepage erstellen

Kapitel: HTML lernen und die eigene Homepage erstellen

Kapitel: HTML lernen und die eigene Homepage erstellen

Kapitel: HTML lernen und die eigene Homepage erstellen

Kapitel: HTML lernen und die eigene Homepage erstellen

Nach dem Kurs können Sie eine eigene Homepage erstellen.

HTML lernen und die eigene Homepage

Ziel des HTML-Kurses ist ...

• HTML lernen und CSS erstellen

Kapitel: HTML lernen und die eigene Homepage erstellen

Zum gleich ausprobieren von HTML-Tags gibt es einen kleinen Online-HTML-Editor, in

der neue Firefox 2.0 ist da

Fragen und Hilfe zu HTML und CSS?

Vielen Dank für die Blumen

Und nun viel Spaß beim HTML lernen

Kapitel: der neue Firefox 2.0 ist da

Im Kapitel "Einsteiger" werden die Grundlagen vermittelt, welche HTML-Befehle wirklich

sehr einfach HTML-Seite

Übung: erstellen Sie Ihre erste Seite mit folgendem Inhalt

Herzlich willkommen auf

Am Beispiel wird der HTML-TAG von 2 Absätzen gezeigt

<p>erster Absatz, der sehr lang sein kann</p>

<p>zweiter Absatz - und nach der Definition bewirken

Dies bewirkt eine Ausgabe im HTML-Browser von

für Fettschrift. Dabei sind 3 Dinge wichtig zu beachten:

Anfangs- und End-TAGs

Personenerhöhungen speziell für Frauen gemeint, sondern Text-Absätze. Sollen 2

<p>Hier kommt unser erster Test.</p>

Das <p> steht für paragraph = Absatz

Kapitel: Absätze erstellen

• 1 ist die größte und wichtigste

<h1> Überschriften-Ebenen 1 </h1>

Nach der Überschrift (End-TAG) erfolgt automatisch ein Umbruch.

Die Ausgabe im Browser sieht wie folgt aus:

Kapitel: Texte formatieren - Überschrift

Übung: Überschriften und Absätze

Erweitern Sie den Text um Überschriften und Absätze

1. Überschrift 1. Ordnung: Herzlich ...

Herzlich willkommen auf

Hier finden Sie meine erste Homepage zum

Sind so zahlreich, dass es demnächst

Kapitel: html Editor

Editor Scriptly von Webocton

Gründe für Scriptly

• Code-Completion - Ergänzung der Befehle und deren Attribute (beugt Tippfehlern

Präsentation von Scriptly als Flash-Film

Scriptly Schritt für Schritt

Kapitel: Editor Scriptly von Webocton

Um die TAGs farbig hervorgehoben zu erhalten, den entsprechenden Syntax auswählen

Kapitel: Editor Scriptly von Webocton

Klicken Sie mit der Maus neben dem Icon mit

Wählen Sie dann HTML aus.