Sie wollen auch ein ePaper? Erhöhen Sie die Reichweite Ihrer Titel.
YUMPU macht aus Druck-PDFs automatisch weboptimierte ePaper, die Google liebt.
Kapitel: HTML lernen und die eigene Homepage erstellen<br />
1
Inhalt<br />
HTML lernen und die eigene Homepage erstellen................................................................................ 16<br />
Ziel des HTML-Kurses ist ................................................................................................................... 16<br />
Fragen und Hilfe zu HTML und <strong>CSS</strong>? - kein Problem!........................................................................ 17<br />
Vielen Dank für die Blumen............................................................................................................... 17<br />
Und nun viel Spaß beim HTML lernen............................................................................................... 18<br />
Vorwort ................................................................................................................................................. 19<br />
Einsteiger............................................................................................................................................... 19<br />
Warum Handarbeit?.............................................................................................................................. 19<br />
Vorteile.............................................................................................................................................. 19<br />
Nachteile ........................................................................................................................................... 19<br />
erste HTML-Seite................................................................................................................................... 20<br />
sehr einfach HTML-Seite ................................................................................................................... 20<br />
Schockiert wie einfach HTML Seiten sein können?........................................................................... 21<br />
HTML-Grundlagen ................................................................................................................................. 21<br />
Was ist HTML?................................................................................................................................... 21<br />
HTML-TAG ......................................................................................................................................... 21<br />
Anfangs- und End-TAGs..................................................................................................................... 22<br />
Absätze erstellen................................................................................................................................... 22<br />
Hinweis .......................................................................................................................................... 23<br />
Übung ................................................................................................................................................ 23<br />
Texte formatieren - Überschrift ............................................................................................................ 24<br />
Überschriften..................................................................................................................................... 24<br />
Hinweis .......................................................................................................................................... 25<br />
Übung: Überschriften und Absätze ............................................................................................... 25<br />
html Editor............................................................................................................................................. 26<br />
HTML-Editor Scripty .......................................................................................................................... 26<br />
HTML-Editor Phase 5......................................................................................................................... 26<br />
Editor Scriptly von Webocton ............................................................................................................... 27<br />
Präsentation von Scriptly als Flash-Film............................................................................................ 27<br />
Scriptly Schritt für Schritt .................................................................................................................. 27<br />
HTML-Grundgerüst automatisch....................................................................................................... 31<br />
Mögliche HTML-Attribute vorschlagen lassen .................................................................................. 34<br />
Kapitel: HTML lernen und die eigene Homepage erstellen<br />
2
WYSIWYG auch möglich .................................................................................................................... 35<br />
Automatische Ersetzungen ............................................................................................................... 35<br />
Download .......................................................................................................................................... 36<br />
HTML Editor Phase 5 von Ulli Meybohm............................................................................................... 37<br />
Bildschirmaufbau............................................................................................................................... 37<br />
Bedienung.......................................................................................................................................... 38<br />
weitergehende Einführung............................................................................................................ 39<br />
Für Fortgeschrittene - Shortcuts zum hmtl-editor ............................................................................ 40<br />
Grundgerüst einer HTML-Seite - DOCTYPE-Definition .......................................................................... 41<br />
DOCTYPE-Definition - erste Zeile jeder Website ............................................................................... 41<br />
Bereich html ...................................................................................................................................... 41<br />
head-Bereich ..................................................................................................................................... 41<br />
body-Bereich ..................................................................................................................................... 42<br />
Texte formatieren - fett, kursiv und Co................................................................................................. 42<br />
Fett - hervorgehoben ........................................................................................................................ 42<br />
physisch-visuellen VERSUS semantisch-logische HTML-TAGs........................................................... 43<br />
kursiv - schräge Sache ....................................................................................................................... 43<br />
semantisch-logische für krusiv - em.............................................................................................. 43<br />
Schachteln von HTML-TAGs .................................................................................................................. 44<br />
TAGs verschachtelt............................................................................................................................ 44<br />
Hinweis: ......................................................................................................................................... 44<br />
Übung ................................................................................................................................................ 44<br />
Unterstreichung von Text...................................................................................................................... 45<br />
unterstrichen - (nicht einsetzen!)...................................................................................................... 45<br />
Texte formatieren - hoch-tief und größer-kleiner................................................................................. 45<br />
hochgestellt und tiefgestellt.............................................................................................................. 45<br />
Text größer und kleiner..................................................................................................................... 46<br />
Übung: ........................................................................................................................................... 46<br />
HTML-Seite validieren ........................................................................................................................... 47<br />
Add-ons zum Valdieren von HTML-Code .......................................................................................... 47<br />
mit Scriptly validieren........................................................................................................................ 47<br />
Sauberer HTML-Code ............................................................................................................................ 48<br />
Definitionsliste....................................................................................................................................... 49<br />
Kapitel: HTML lernen und die eigene Homepage erstellen<br />
3
Aufgabe ............................................................................................................................................. 49<br />
Listen, Aufzählungen ............................................................................................................................. 50<br />
Listen mit Spiegelstrichen ................................................................................................................. 50<br />
Listen mit automatischer Nummerierung......................................................................................... 51<br />
Aufgabe: ........................................................................................................................................ 51<br />
Aufgabe: ........................................................................................................................................ 51<br />
Attribute bei HTML-TAGs ...................................................................................................................... 52<br />
Art der Nummerierung bestimmen................................................................................................... 52<br />
Start der Nummerierung festlegen ................................................................................................... 52<br />
Aufgabe ......................................................................................................................................... 53<br />
Umbrüche erzwingen ............................................................................................................................ 53<br />
Trennlinien und Attribute von TAGs ..................................................................................................... 54<br />
Trennlinien ........................................................................................................................................ 54<br />
Attribute ................................................................................................................................................ 54<br />
Größe eines Elementes ..................................................................................................................... 54<br />
Anmerkung:................................................................................................................................... 55<br />
Aufbau Attribute ........................................................................................................................... 55<br />
Ausrichtung - rechts, links, mittig...................................................................................................... 55<br />
Breite eines Elementes...................................................................................................................... 56<br />
Relativität !!! - ganz wichtig für alles weitere ................................................................................... 56<br />
Tipp:............................................................................................................................................... 56<br />
Links (Hyperlinks) in HTML erstellen ..................................................................................................... 57<br />
Dateinamen und die Benennung .......................................................................................................... 57<br />
Benennung der Startdatei ................................................................................................................. 57<br />
Geschichtliches:............................................................................................................................. 57<br />
Aufbau der Datei-Namen .................................................................................................................. 58<br />
Aufgabe: Dateinamen für Website festlegen.................................................................................... 58<br />
interne Links .......................................................................................................................................... 59<br />
externe Links ......................................................................................................................................... 60<br />
Links auf andere Seiten - externe Links............................................................................................. 60<br />
Aufgabe ......................................................................................................................................... 60<br />
Tipp................................................................................................................................................ 61<br />
Tipp................................................................................................................................................ 61<br />
Kapitel: HTML lernen und die eigene Homepage erstellen<br />
4
Steuerung erstellen ............................................................................................................................... 61<br />
Textlink .............................................................................................................................................. 61<br />
Über mich .............................................................................................................................................. 62<br />
Tipp................................................................................................................................................ 62<br />
Aufgabe ......................................................................................................................................... 62<br />
Verzeichnisse......................................................................................................................................... 63<br />
Stolperfallen Slash "/" und Backslash ""............................................................................................ 63<br />
Tipps zu Unterverzeichnisse:............................................................................................................. 63<br />
Grafiken in Homepages integrieren - wie, was, wo, wie groß .............................................................. 63<br />
Welches Format soll ich verwenden? ............................................................................................... 65<br />
Dateiformat GIF............................................................................................................................. 66<br />
Dateiformat JPG ............................................................................................................................ 66<br />
Dateiformat PNG ........................................................................................................................... 66<br />
Animation von Bildern....................................................................................................................... 67<br />
Übertragungsdauer allgemein........................................................................................................... 67<br />
Copyright von Bildern........................................................................................................................ 68<br />
Tipp: Links mit Grafiken..................................................................................................................... 68<br />
Bildmaterial ........................................................................................................................................... 69<br />
Bilder ausrichten ................................................................................................................................... 70<br />
Farben - die Welt ist bunt...................................................................................................................... 72<br />
HTML-Tags für Farben....................................................................................................................... 72<br />
Farbenmischen.................................................................................................................................. 73<br />
Welche Farben stehen zur Verfügung?............................................................................................. 73<br />
Die andere Art, Farben anzugeben ................................................................................................... 74<br />
Farbpalette ........................................................................................................................................ 74<br />
Tipp:............................................................................................................................................... 75<br />
Tabellen - Grundlagen........................................................................................................................... 76<br />
Wie kam das Design auf Homepages ................................................................................................ 76<br />
Woraus besteht ein Tabellenaufbau? ............................................................................................... 76<br />
Tipp: Fehler bei Tabellen vermeiden:............................................................................................ 77<br />
Tabellenkopf und Fuß............................................................................................................................ 78<br />
Aufbau der Befehle............................................................................................................................ 78<br />
Tabellen-Zellen miteinander verbinden................................................................................................ 79<br />
Kapitel: HTML lernen und die eigene Homepage erstellen<br />
5
Attribute bei Tabellen ........................................................................................................................... 80<br />
Weitere Attribute bei Tabellen ......................................................................................................... 80<br />
Breite und Höhe der Tabelle ......................................................................................................... 80<br />
Farbe von Tabellenzellen............................................................................................................... 80<br />
Ausrichtung innerhalb der Zellen .................................................................................................. 81<br />
Seiten online stellen - Website publizieren........................................................................................... 82<br />
per Scriptly ............................................................................................................................................ 83<br />
Filezilla ................................................................................................................................................... 86<br />
Download .......................................................................................................................................... 86<br />
Dateien übertragen ........................................................................................................................... 86<br />
Projekte einrichten............................................................................................................................ 88<br />
Online stellen auf dem Uni-Server ........................................................................................................ 90<br />
Server-Platz für Uni-Angehörige........................................................................................................ 90<br />
Online stellen mit dem Netscape Composer..................................................................................... 90<br />
Übertragen von Dateien per WS-FTP auf einen Server......................................................................... 92<br />
HTML-Tags im Überblick ....................................................................................................................... 97<br />
Inhalt: ................................................................................................................................................ 97<br />
Cascade Style Sheets (<strong>CSS</strong>) .................................................................................................................. 103<br />
Entstehung von <strong>CSS</strong>......................................................................................................................... 103<br />
Vor- und Nachteile von <strong>CSS</strong>............................................................................................................. 103<br />
Schneller, schöner Formatieren mit <strong>CSS</strong> ......................................................................................... 103<br />
Trennung Inhalt und Design durch <strong>CSS</strong> ............................................................................................... 104<br />
Aufbau von <strong>CSS</strong> Befehlen .................................................................................................................... 105<br />
Grundlagen des <strong>CSS</strong> Konzept .......................................................................................................... 105<br />
Aufbau ............................................................................................................................................. 105<br />
Eigenschaften und Werte................................................................................................................ 105<br />
Begriffe um <strong>CSS</strong> ................................................................................................................................... 105<br />
Vererbung........................................................................................................................................ 105<br />
Cascade: .......................................................................................................................................... 105<br />
Stylesheets in HTML einbinden ........................................................................................................... 106<br />
Variante 1: Befehl direkt im Quellcode ........................................................................................... 106<br />
Natürlich können die Befehle auch kombiniert werden. ............................................................ 106<br />
Variante 2: Am Anfang der HTML-Datei.......................................................................................... 106<br />
Kapitel: HTML lernen und die eigene Homepage erstellen<br />
6
Variante 3: Auslagern von <strong>CSS</strong>-Befehlen......................................................................................... 107<br />
<strong>CSS</strong>-Anwendung einfach gemacht....................................................................................................... 108<br />
Farbe und Schriftartgestaltung über <strong>CSS</strong> ........................................................................................ 108<br />
Weitere Definitionen, die sich auf Schriften auswirken.................................................................. 110<br />
Aufgabe: ...................................................................................................................................... 110<br />
Schrift und Abstände....................................................................................................................... 111<br />
Aufgabe ....................................................................................................................................... 111<br />
Farbe: Vordergrund- und Hintergrundfarbe ................................................................................... 112<br />
Aufgabe: ...................................................................................................................................... 112<br />
Rahmen ........................................................................................................................................... 113<br />
Aufgabe: Design für Rahmen für ................................................................................................. 113<br />
Ausrichtung von Elementen ............................................................................................................ 114<br />
Aufgabe: ...................................................................................................................................... 114<br />
Grafik und Bilder.............................................................................................................................. 115<br />
Beispiel: ....................................................................................................................................... 115<br />
spezielleres...................................................................................................................................... 116<br />
Kurzschreibweisen........................................................................................................................... 116<br />
Unter-, Durchstreichungen und Co ................................................................................................. 116<br />
Box-Modell bei <strong>CSS</strong>.............................................................................................................................. 118<br />
Wie sieht der Aufbau der "Box" aus?.............................................................................................. 118<br />
Beispiele für die Anwendung des Box-Modells................................................................................... 119<br />
Randgestaltung und Möglichkeiten ................................................................................................ 121<br />
unterschiedliche Definitionen der Abstände .................................................................................. 122<br />
Beim Außenabstand (margin) ..................................................................................................... 122<br />
Beim Innenabstand (padding) ..................................................................................................... 122<br />
Angaben verkürzen ......................................................................................................................... 122<br />
CLASS und ID - Bezeichner für <strong>CSS</strong>-Elemente...................................................................................... 123<br />
Sinn und Zweck von CLASS .............................................................................................................. 123<br />
Sinn und Zweck von ID .................................................................................................................... 124<br />
DIV und SPANs..................................................................................................................................... 125<br />
DIV - Einsatz..................................................................................................................................... 125<br />
SPAN - Anwendung (nicht SPAM!) .................................................................................................. 125<br />
Mischen von DIVs und SPANs.......................................................................................................... 126<br />
Kapitel: HTML lernen und die eigene Homepage erstellen<br />
7
Design per <strong>CSS</strong> - FLOAT ....................................................................................................................... 126<br />
Website-Layout mit Float, DIVs, CLASS und ID................................................................................ 127<br />
sauberes 2 Spalten Layout .............................................................................................................. 128<br />
<strong>CSS</strong> 2 Spalten Layout - Inhaltsbereich passt sich vorhandener Breite an ....................................... 129<br />
<strong>CSS</strong> 2 Spalten Layout - Inhaltsbereich und Steuerung passen sich vorhandener Breite an............ 129<br />
Seitenbreite begrenzen ....................................................................................................................... 130<br />
<strong>CSS</strong> 2 Spalten Layout mit fixierter Breite ........................................................................................ 130<br />
<strong>CSS</strong>-Layout nun Mittig ......................................................................................................................... 131<br />
Mittige Ausrichtung des Layouts..................................................................................................... 131<br />
Kopfzeile integrieren ........................................................................................................................... 133<br />
Kopfbereich in <strong>CSS</strong>-Layout .............................................................................................................. 133<br />
Fußzeile integrieren............................................................................................................................. 135<br />
Fußzeile in <strong>CSS</strong>-Layout..................................................................................................................... 135<br />
dreispaltiges Layout ............................................................................................................................ 137<br />
3-spaltiges Layout in <strong>CSS</strong> ................................................................................................................. 137<br />
Steuerung per <strong>CSS</strong> ............................................................................................................................... 139<br />
Steuerung vertikal ........................................................................................................................... 139<br />
Design über externe <strong>CSS</strong>-Datei.................................................................................................... 140<br />
Steuerung horziontal....................................................................................................................... 141<br />
Steuerung mit Feedback auf Benutzer................................................................................. 143<br />
Ergebniss der Pseudoklassen ............................................................................................... 144<br />
Block- u. Inline-Elemente .................................................................................................................... 144<br />
Steuerung horizontal....................................................................................................................... 145<br />
Elemente ausblenden...................................................................................................................... 146<br />
<strong>CSS</strong> - Bilder und Hintergrundbilder ..................................................................................................... 147<br />
Hintergrundbilder - wie das Bild in den Hintergrund kommt ......................................................... 148<br />
Hingrundbild komplett auf 100% .................................................................................................... 148<br />
Hintergrund für andere Elemente................................................................................................... 149<br />
<strong>CSS</strong> Definitionen - Übersicht <strong>CSS</strong> Befehle ........................................................................................... 149<br />
<strong>CSS</strong> Tipps und Tricks ............................................................................................................................ 151<br />
Abstand nach Überschriften etc...................................................................................................... 151<br />
Bilderrahmen mit Punkten bei Mauskontakt.................................................................................. 151<br />
Anfangsbuchstaben hervorgehoben............................................................................................... 151<br />
Kapitel: HTML lernen und die eigene Homepage erstellen<br />
8
Text umfließt Bild ............................................................................................................................ 152<br />
Anbei ein paar hübsche Showeffekte für den IE ............................................................................. 152<br />
<strong>CSS</strong>-Layout-Generator......................................................................................................................... 153<br />
Vorstellung Projekt: erste selbsterstellte Website ............................................................................. 154<br />
Vorstellung Projekte: erste selbst erstellte Websites ......................................................................... 154<br />
Layout über <strong>CSS</strong>............................................................................................................................... 154<br />
Layout über Tabelle - old school ..................................................................................................... 154<br />
<strong>CSS</strong> Design - Tabellenloses Design....................................................................................................... 155<br />
Schlanke Websites durch <strong>CSS</strong>-Design.............................................................................................. 155<br />
die 4 Bereiche der Website ............................................................................................................. 155<br />
sonstige Bilder ................................................................................................................................. 155<br />
Beispielwebsite mit HTML und <strong>CSS</strong> ..................................................................................................... 156<br />
Inhalt über HTML und <strong>CSS</strong>-Design................................................................................................... 156<br />
1. Schritt – das HTML-Grundgerüst................................................................................................. 156<br />
2. Head-Bereich............................................................................................................................... 157<br />
3. <strong>CSS</strong>-Definitionen.......................................................................................................................... 158<br />
4. der Inhaltsbereich ....................................................................................................................... 159<br />
Hintergrundgrafik mit den Säulen................................................................................................... 161<br />
Steuerung – welche Hintergrundfarbe............................................................................................ 162<br />
Schattenwurf ................................................................................................................................... 163<br />
Gestaltung Schrift............................................................................................................................ 164<br />
Schrift im Kopfbereich..................................................................................................................... 165<br />
Abstand innerhalb der Steuerung ................................................................................................... 166<br />
Abstände innerhalb des Inhaltsbereichs ......................................................................................... 167<br />
Websiten ohne Bikini-Streifen ........................................................................................................ 168<br />
Perfekt machen – <strong>CSS</strong>-Definitionen auslagern................................................................................ 171<br />
Übung: Ergänzung Fußzeile ......................................................................................................... 171<br />
Layout über Tabellen - old school ....................................................................................................... 172<br />
Projekt: Seiten erstellen ...................................................................................................................... 172<br />
Projekt: Grunddesign........................................................................................................................... 174<br />
Die einzelnen Elemente des table-TAGs ..................................................................................... 175<br />
Projekt: Steuerung erstellen ............................................................................................................... 176<br />
Projekt: Bilder aufnehmen .................................................................................................................. 177<br />
Kapitel: HTML lernen und die eigene Homepage erstellen<br />
9
Projekt: Text drauf............................................................................................................................... 181<br />
Projekt: Design der Schrift................................................................................................................... 183<br />
Design definieren über <strong>CSS</strong> ............................................................................................................. 183<br />
Projekt: Domainnamen ....................................................................................................................... 185<br />
Projekt: Online stellen......................................................................................................................... 185<br />
Vorwort für Fortgeschrittene .............................................................................................................. 186<br />
Programmpunkte für Fortgeschrittenen......................................................................................... 186<br />
Farbtheorie.......................................................................................................................................... 187<br />
Nutzwert - aus dem Farbkreis zur Farbzusammenstellung............................................................. 188<br />
Analoge Farben ........................................................................................................................... 188<br />
Komplementär-Farben ................................................................................................................ 188<br />
Bilder-Ausschnitt anpassen & Größe verändern................................................................................. 189<br />
Bilder-Ausschnitt anpassen (Bilder beschneiden)........................................................................... 189<br />
Größe verändern ............................................................................................................................. 192<br />
Histogramm und Tonwertkorrektur - Bilder optimieren .................................................................... 194<br />
Bedeutung Histogramm .................................................................................................................. 194<br />
Tonwertkorrektur............................................................................................................................ 196<br />
Besseres Ausgangsmaterial............................................................................................................. 197<br />
Tonwertkorrektur per Bildbearbeitung........................................................................................... 197<br />
Schatten & Co...................................................................................................................................... 202<br />
Bilder nachbearbeiten......................................................................................................................... 203<br />
Bilderauswahl .................................................................................................................................. 203<br />
Freistellen eines Bildausschnittes ................................................................................................... 204<br />
Schlagschatten erzeugen................................................................................................................. 204<br />
Mit Corel Draw 8.0 .............................................................................................................................. 205<br />
Schlagschatten erzeugen............................................................................................................. 206<br />
Bildgröße herrichten ....................................................................................................................... 209<br />
fremde Bilder für die eigene Website ................................................................................................. 211<br />
Organisieren von Bildern................................................................................................................. 211<br />
Formulare ............................................................................................................................................ 212<br />
die Elemente zur Formulargestaltung................................................................................................. 213<br />
Texteingaben................................................................................................................................... 213<br />
Auswahl-Kästchen ........................................................................................................................... 214<br />
Kapitel: HTML lernen und die eigene Homepage erstellen<br />
1<br />
0
Schaltflächen ................................................................................................................................... 214<br />
Grundlegendes ................................................................................................................................ 214<br />
Frames - aus dem Rahmen fallen ........................................................................................................ 215<br />
Was ist ein Frame ? ......................................................................................................................... 215<br />
Definieren von Frames .................................................................................................................... 215<br />
Eigenschaften von Frames .............................................................................................................. 216<br />
Verweise im Frameset..................................................................................................................... 217<br />
Schachteln von Frames.................................................................................................................... 218<br />
Gefahren bei Frames ....................................................................................................................... 219<br />
Wie kann man diese Nachteile ausgleichen?.............................................................................. 219<br />
iFrames ................................................................................................................................................ 219<br />
Attribute zu iFrame ......................................................................................................................... 220<br />
Aufgabe: interaktiven Terminkalender einbinden .......................................................................... 220<br />
von mir bevorzugte Software.............................................................................................................. 221<br />
JavaScript............................................................................................................................................. 222<br />
Auslagern von Scripten.................................................................................................................... 226<br />
Tipps & Tricks .................................................................................................................................. 226<br />
Tipps & Tricks - Hinweis, wenn JavaScript beim Surfer deaktiviert ist............................................ 227<br />
Tipps & Tricks - Ausdruck ................................................................................................................ 227<br />
Weiterführende Links...................................................................................................................... 228<br />
Metatags.............................................................................................................................................. 228<br />
Kurze Erklärung zu den einzelnen Metatags: .................................................................................. 229<br />
Was bewirken die Metatag-Einträge bei Suchmaschinen?................................................................. 230<br />
bei Suchmaschinen anmelden............................................................................................................. 232<br />
robots.txt - was es mit dieser ominösen Datei auf sich hat ................................................................ 233<br />
zu beachten ..................................................................................................................................... 234<br />
Domainnamen..................................................................................................................................... 234<br />
Domain-Namen reservieren............................................................................................................ 235<br />
Auswahl von Provider zum Kaufen einer ............................................................................................ 235<br />
Domain und Webspace ....................................................................................................................... 236<br />
kostenloser Webspace und seine Kosten............................................................................................ 236<br />
Testkandidaten................................................................................................................................ 237<br />
kostenfreier Webspace Anbieter: Yahoo! GeoCities....................................................................... 237<br />
Kapitel: HTML lernen und die eigene Homepage erstellen<br />
1<br />
1
kostenfreier Webspace Anbieter: Beepworld................................................................................. 240<br />
kostenfreier Webspace Anbieter: Tripod........................................................................................ 240<br />
kostenfreier Webspace Anbieter: Funpic........................................................................................ 243<br />
Fazit zur Testaktion von Anbieter kostenfreiem Webspace (Freespace)........................................ 245<br />
Recht kann das Gegenteil von Links sein! ........................................................................................... 246<br />
Inhalte.......................................................................................................................................... 246<br />
Bilder ........................................................................................................................................... 246<br />
Domainnamen & Recht ............................................................................................................... 246<br />
Bücher zum Thema.......................................................................................................................... 246<br />
Geld verdienen mit der eigenen Homepage ....................................................................................... 247<br />
Partnerprogramme (engl. Affiliate Programs) ................................................................................ 247<br />
Konditionsmodelle - verschiedene Aktionen, um durch Ihren Besucher Geld zu verdienen ......... 248<br />
Pay per Klick ................................................................................................................................ 248<br />
Pay per Lead ................................................................................................................................ 248<br />
Pay per Sale ..................................................................................................................................... 248<br />
Geld eintreiben - eigenen Content verkaufen................................................................................. 249<br />
Tipps zum Geld verdienen mit der eigenen Homepage.................................................................. 249<br />
Tipps & Tricks ...................................................................................................................................... 251<br />
Größenüberprüfung durch IE ganz einfach realisierbar.................................................................. 251<br />
Bilder ausschalten - Design überprüfen (IE).................................................................................... 251<br />
Weitere nützliche Tools in diesem Paket .................................................................................... 252<br />
Design bis an den Rand ................................................................................................................... 252<br />
Im Vollbildmodus Präsentieren....................................................................................................... 252<br />
Offline Präsentieren mit IE .......................................................................................................... 253<br />
Typografie im Internet ........................................................................................................................ 253<br />
Trennstrich, Gedankenstrich, Geviertstrich .................................................................................... 254<br />
Trennstrich - ................................................................................................................................ 254<br />
Gedankenstrich –......................................................................................................................... 254<br />
Geviertstrich — ........................................................................................................................... 254<br />
Korrekte Gänsefüßchen (An- und Abführungszeichen) .................................................................. 254<br />
Zahlen richtig gesetzt ...................................................................................................................... 255<br />
Bookmarklet, Favelet .......................................................................................................................... 255<br />
Folgende Bookmarklets sind für Website-Ersteller interessant...................................................... 256<br />
Kapitel: HTML lernen und die eigene Homepage erstellen<br />
1<br />
2
Forum .................................................................................................................................................. 256<br />
Diverses ............................................................................................................................................... 256<br />
Inhalt Einheit "Netscape Composer"................................................................................................... 256<br />
HTML-WYSIWYG-Werkzeug Netscape Composer............................................................................... 257<br />
Programm starten ....................................................................................................................... 257<br />
Abspeichern der Homepage........................................................................................................ 258<br />
HTML-Code ansehen ................................................................................................................... 259<br />
Texteingabe ................................................................................................................................. 260<br />
Schriftformatierung..................................................................................................................... 261<br />
Bilder einbauen ........................................................................................................................... 264<br />
Hintergrundbild (Textur) einbauen ............................................................................................. 266<br />
E-Mail-Adresse einbauen ............................................................................................................ 267<br />
Links hinzufügen.......................................................................................................................... 268<br />
Navigationsleiste erstellen .......................................................................................................... 269<br />
Software .............................................................................................................................................. 270<br />
Internet-Browser............................................................................................................................. 270<br />
FTP-Programme............................................................................................................................... 270<br />
HTML-Editoren ................................................................................................................................ 271<br />
Editor Scriptly von Webocton ..................................................................................................... 271<br />
HTML Editor Phase 5 ................................................................................................................... 271<br />
Zum Bilder bearbeiten:................................................................................................................ 271<br />
Vermessen und Abstände: .......................................................................................................... 271<br />
Farben:......................................................................................................................................... 272<br />
Kleine WYSIWYG-Editoren........................................................................................................... 272<br />
Professionielle WYSIWYG-Editoren............................................................................................. 272<br />
Backup der Website ........................................................................................................................ 272<br />
Vorteile Firefox für Webentwickler..................................................................................................... 273<br />
Add-ons - Firefox tiefer gelegt und aufgebohrt .............................................................................. 274<br />
IE Developer Toolbar........................................................................................................................... 274<br />
Einblenden der DIV-Elemente ......................................................................................................... 275<br />
Ändern der Fenstergröße................................................................................................................ 276<br />
Vermessen von Elementen.............................................................................................................. 276<br />
Kontrolle der Website auf Fehler .................................................................................................... 277<br />
Kapitel: HTML lernen und die eigene Homepage erstellen<br />
1<br />
3
Rund ums Internet............................................................................................................................... 278<br />
PDF-Software................................................................................................................................... 278<br />
Bücher ................................................................................................................................................. 278<br />
eBook HTML-Seminar.de................................................................................................................. 278<br />
Billig an Bücher zum Thema ............................................................................................................ 278<br />
Buchtips:...................................................................................................................................... 278<br />
Suche nach Büchern z.B. zum Thema HTML: .................................................................................. 280<br />
Interessante Linksammlung zum Thema............................................................................................. 281<br />
Klasse Seite mit guten Tipps........................................................................................................ 281<br />
HTML-Onlinebuch: SELFHTML:.................................................................................................... 281<br />
Guter Artikel von der Zeitschrift ct.............................................................................................. 281<br />
Referenz Sonderzeichen...................................................................................................................... 282<br />
maskierte Zeichen ........................................................................................................................... 282<br />
maskierte Zeichen ............................................................................................................................... 282<br />
Maßeinheiten...................................................................................................................................... 285<br />
absolute Maßeinheiten ................................................................................................................... 285<br />
absolute/relative Maßeinheiten ..................................................................................................... 285<br />
px - pixels..................................................................................................................................... 285<br />
relative Maßeinheiten..................................................................................................................... 286<br />
em................................................................................................................................................ 286<br />
andere relative Maßeinheiten: % und ex .................................................................................... 286<br />
Abk.; Computerchinesisch; Erklärungen ............................................................................................. 287<br />
Applet .......................................................................................................................................... 287<br />
Browser ....................................................................................................................................... 287<br />
<strong>CSS</strong> ............................................................................................................................................... 287<br />
DOCTYPE...................................................................................................................................... 287<br />
FAQ .............................................................................................................................................. 287<br />
ftp ................................................................................................................................................ 287<br />
Homepage ................................................................................................................................... 288<br />
KK-Antrag..................................................................................................................................... 288<br />
Link .............................................................................................................................................. 288<br />
Lorem Ipsum................................................................................................................................ 288<br />
IP-Adresse.................................................................................................................................... 288<br />
Kapitel: HTML lernen und die eigene Homepage erstellen<br />
1<br />
4
PHP .............................................................................................................................................. 288<br />
Pfadangabe.................................................................................................................................. 289<br />
Relaunch...................................................................................................................................... 289<br />
Site............................................................................................................................................... 289<br />
Tutorial ........................................................................................................................................ 289<br />
URL .............................................................................................................................................. 289<br />
WebDAV .......................................................................................................................................... 289<br />
xHTML.......................................................................................................................................... 290<br />
headerinformationen-404-401-301 .................................................................................................... 290<br />
Probleme bei merkwürdigen/falschen Zeichen meistens im Firefox.............................................. 292<br />
Favicons - Icon für Lesezeichenverwaltung und Website ................................................................... 292<br />
favicons erstellen ............................................................................................................................ 292<br />
Fehler in Logfile vermeiden............................................................................................................. 293<br />
Websites mit Unterverzeichnissen.................................................................................................. 293<br />
Entweder Sie haben das HTML-Tutorial ............................................................................................. 294<br />
Helfen Sie mit ... - Ihre Empfehlung freut uns besonders ............................................................... 294<br />
Social-Bookmark.............................................................................................................................. 294<br />
Sie möchten Geld spenden ............................................................................................................. 294<br />
Sie helfen durch aktive Teilnahme im Forum.................................................................................. 294<br />
Impressum........................................................................................................................................... 295<br />
Impressum gemäß §6 Teledienstegesetz (TDG).............................................................................. 295<br />
Bildquellen....................................................................................................................................... 295<br />
Kapitel: HTML lernen und die eigene Homepage erstellen<br />
1<br />
5
kurz & gut: Um was geht es? Sie können hier HTML lernen - die Seiten bieten die Inhalte<br />
und das Forum gibt Antworten auf individuelle Fragen.<br />
Nach dem Kurs können Sie eine eigene Homepage erstellen.<br />
HTML lernen und die eigene Homepage<br />
erstellen<br />
... ein Wunsch und bald Wirklichkeit - herzlich willkommen zum HTML-Seminar, das für<br />
Erfolgsorientierte konzipiert ist. Dieser HTML-Kurs ist sowohl für Einsteiger und HTML-<br />
Neulinge als auch für Fortgeschrittene.<br />
Der Name ist Programm - durch gezielte Beschränkung auf das Wesentliche können Sie<br />
HTML lernen und die Internetsites erfolgreich und mit dem nötigen Hintergrundwissen<br />
erstellen. Für die Profi-Liga sind weiterführende Hinweise und Anregungen mit<br />
aufgenommen.<br />
Ziel des HTML-Kurses ist ...<br />
Ziel des HTML-Kurses ist, dass Sie<br />
während dem Lernen Spass haben und ...<br />
• HTML lernen und <strong>CSS</strong> erstellen<br />
können (das Beispiel rechts können<br />
Sie nach dem Kurs selber erstellen)<br />
• eine Einführung in HTML,<br />
• die eigene Homepage erstellen<br />
• Überblick über Möglichkeiten und<br />
Werkzeuge<br />
• Publizieren der eigenen Website<br />
• und vieles mehr - lassen Sie sich<br />
überraschen<br />
Das Wissen soll praxisbezogen durch Erstellen einer eigenen Website und Publizieren im<br />
Internet umgesetzt werden. Der Inhalt des Kurses wird laufend erweitert und durch Ihre<br />
Anregungen Bestehendes optimiert.<br />
Zum gleich ausprobieren von HTML-Tags gibt es einen kleinen Online-HTML-Editor, in<br />
dem HTML-Tags eingegeben und sofort die Ausgabe im Browser angesehen werden kann.<br />
Für den kleinen Online-HTML-Editor muss Java-Script aktiviert sein. Am besten, das Fenster<br />
immer offen lassen und damit spielen.<br />
Kapitel: HTML lernen und die eigene Homepage erstellen<br />
1<br />
6
Viel Spaß beim Stöbern und HTML Lernen. Ich hoffe, dass diese Einführung, die sich nicht<br />
als Konkurrenz zu bekannten Standardwerken sieht, sondern als praktische Hinführung zu<br />
HTML Ihnen Spaß macht und Sie mit den neuen Kenntnissen Erfolg haben. HTML und <strong>CSS</strong><br />
ist nicht schwer!<br />
Empfehlenswert ist, die Reihenfolge des Kurses (Punkte links in der Steuerung) einzuhalten,<br />
da diese aufeinander aufbauen und abgestimmt sind. Und nicht vergessen - ohne Feed-back<br />
gibt es keine Verbesserung!<br />
Viel Erfolg und vor allem Spaß beim Lernen von HTML.<br />
der neue Firefox 2.0 ist da<br />
Der Neue ist da, mit vielen Verbesserungen im Detail und Vorteile für Website-Entwickler.<br />
Ein besonderer Vorteil ist ist die selektive Quellcode-Anzeige. Markieren Sie einen Teil einer<br />
Seite erhalten Sie dazu den HTML-Quellcode angezeigt. Ein Beispiel finden Sie unter<br />
[...Vorteile Firefox]<br />
Fragen und Hilfe zu HTML und <strong>CSS</strong>?<br />
- kein Problem!<br />
Für Fragen, Anregungen und Austausch es gibt das Forum - administriert von Liza (Nick:<br />
Lajya), Foster und pulse180<br />
Dort sind Sie gut aufgehoben - nicht zögern, Fragen zu stellen und auch die der anderen<br />
Teilnehmer zu beantworten. Dabei lernt man eine Menge und kommt vielleicht auf noch<br />
bessere Ideen.<br />
Lassen Sie z.B. ihre erstellte Homepage von anderen begutachten und holen Sie sich Tipps<br />
und Ratschläge.<br />
zum Diskussionsforum<br />
Vielen Dank für die Blumen<br />
Viele Leute habe unsere Seite empfohlen - einen herzlichen Dank dafür. Wenn Sie unsere<br />
Seite empfehlen möchten und html-seminar.de unterstützen wollen, freuen wir uns über Ihren<br />
Link auf http://www.html-seminar.de<br />
Alle Links auf den Seiten sind als Empfehlung zu werten. Verlinkte Seiten sollen<br />
weiterführende Informationen zu bestimmten Themen anzubieten und empfehlenswerte<br />
Kapitel: der neue Firefox 2.0 ist da<br />
1<br />
7
Artikel zugänglich machen. Es kann allerdings passieren, dass die verlinkten Seiten sich<br />
ändern. Wenn Sie also das Gefühl haben, dass ein Link auf meiner Seite nicht mehr stimmt,<br />
dann geben Sie mir bitte Bescheid, damit ich diesen Link prüfen und ggf. entfernen kann.<br />
Und nun viel Spaß beim HTML lernen<br />
wünscht das Team von HTML-Seminar.de<br />
Kapitel: der neue Firefox 2.0 ist da<br />
1<br />
8
Vorwort<br />
Jeder Einstieg in ein neues Thema ist ein Abenteuer.<br />
Hier bekommen Sie einen schnellen Zugang zu HTML und wie Sie Ihre eigene Internetseite<br />
erstellen können.<br />
Im Kapitel "Einsteiger" werden die Grundlagen vermittelt, welche HTML-Befehle wirklich<br />
benötigt werden. Der Bereich "Projekt" zeigt, wie eine Website erstellt werden kann und bei<br />
"Fortgeschrittene" folgend Feinheiten und Weiterführendes.<br />
Den Kurs können Sie entweder Schritt für Schritt durchgehen oder nach belieben springen<br />
und ansehen, was Sie gerade benötigen.<br />
Viel Spaß und Erfolg wünscht Ihnen das Team von HTML-Seminar.<br />
Einsteiger<br />
Und nun geht es los. Für den Beginn kommen die Grundlagen - dabei wird teilweise mit<br />
Vereinfachungen gearbeitet. Wichtig ist mir, dass Sie schnell einen Erfolg sehen und die<br />
Zusammenhänge verstehen können.<br />
Im Verlauf des Kurses vervollständigen wir nach und nach Ihr Wissen, damit korrekte Seiten<br />
herauskommen.<br />
Warum Handarbeit?<br />
Es gibt mehrere Gründe dafür (und 1-2 dagegen :-)<br />
Vorteile<br />
• volle Kontrolle auch über Details<br />
• besser lesbarer Code (kommt auf den Schreiber an)<br />
• keine besondere Software ist nötig, HTML kann mit allem erstellt werden (selbst mit<br />
Notepad)<br />
• sauberer Code (sofern der Ersteller ein wenig Ahnung hat)<br />
• besondere Kniffe sind per Hand einfacher realisierbar<br />
• it´s cool, man<br />
Nachteile<br />
• Kenntnisse von HTML müssen vorhanden sein<br />
• am Anfang zeitaufwendiger<br />
Kapitel: Vorwort<br />
1<br />
9
erste HTML-Seite<br />
Wir steigen hier ganz einfach ein. Dabei werden wir sehr schnell eine HTML-Seite entwerfen,<br />
die in einem Web-Browser angezeigt werden kann.<br />
Dabei werden die Beispiele am Anfang sehr einfach gehalten werden, damit ein<br />
grundlegendes Verständnis aufgebaut werden kann. Dadurch sind die ersten Seiten, die wir<br />
hier erstellen, noch kein valides XHTML, sondern einfach zum HTML lernen. Valide<br />
XHTML-Seiten sind nach bestimmten Regeln aufgebaut.<br />
Aber kein Angst - wir kommen von den einfachen Webseiten über den entsprechenden<br />
Wissenzuwachs sehr bald zu validen XHTML-Seiten und Sie bekommen die Werkzeuge an<br />
die Hand, um sich selber kontrollieren zu können!<br />
sehr einfach HTML-Seite<br />
Für das Grundverständnis legen wir nun eine Seite in einem einfachen Texteditor (z.B.<br />
Notepad unter Windows) an und speichern diese mit dem Namen "index.htm". Wichtig ist<br />
dabei die Endung. Durch die Endung sagen wir, dass es sich um eine HTML-Seite handelt.<br />
Übung: erstellen Sie Ihre erste Seite mit folgendem Inhalt<br />
Dazu geben wir exakt wie im folgenden Ausdruck den Code ein:<br />
Herzlich willkommen auf<br />
meiner ersten HTML-Seite<br />
Hier finden<br />
Sie meine erste Homepage zum<br />
Lernen von HTML<br />
Ihr<br />
Manfred<br />
Mustermann<br />
Nun schauen wir uns diese Seite im einem Webbrowser an. Die Datei hat durch die Endung<br />
".htm" im Betriebssystem das Browserlogo bekommen (meistens das Internet-Explorer E oder<br />
je nach Webbrowser das entsprechenden). Sobald wird die Datei doppelt anklicken wird diese<br />
im Webbrowser angezeigt. Die Ausgabe im Browser sollte ungefähr wie folgt aussehen:<br />
Herzlich willkommen auf meiner ersten HTML-Seite Hier finden Sie meine erste Homepage<br />
zum Lernen von HTML Ihr Manfred Mustermann<br />
Erstaunlich, oder? Alle Umbrüche sind beseitigt und mehrere Leerzeichen werden zu einem<br />
Leerzeichen zusammengefasst. Nicht wundern - denn dies ist in HMTL völlig normal.<br />
Kapitel: erste HTML-Seite<br />
2<br />
0
Schockiert wie einfach HTML Seiten sein können?<br />
Das ist durchaus schon eine HTML-Seite (wenn auch nicht valide). Hier sehen Sie den Grund<br />
für den Siegeszug von HTML. Durch sehr einfache Mittel können Inhalte für andere<br />
bereitsgestellt werden, die dann weltweit darauf zugreifen können. Unsere Datei müssten wir<br />
dazu nur noch auf einen Webserfer schieben (dazu kommen wir später).<br />
Als nächstes wollen wir unseren Text gliedern und sauber anzeigen lassen. Dazu benötigen<br />
wir die ersten HTML-TAGs.<br />
HTML-Grundlagen<br />
Was ist HTML?<br />
HTML ist eine Seitenbeschreibungssprache, mit der dem Browser "gesagt" wird, wie die<br />
Daten angezeigt werden: welche Einheiten (Buchstaben, Wörter, Sätze, Absätze) z.B. fett<br />
gedruckt werden, in bestimmten Farben dargestellt werden etc.<br />
Dazu werden über das Internet HTML-Seiten übertragen. Das Bedeutsame dabei ist, dass die<br />
HTML-Seiten in Klartext übertragen werden und so jeder schauen kann, wie das eigentlich<br />
funktioniert. Einfach mal im Browser auf "Ansicht -> Quellcode anzeigen" gehen. Das<br />
zunächst Verwirrende ist, dass zwischen den Informationen noch was auftaucht.<br />
Es gibt also nicht nur Informationen, sondern auch Anweisungen, wie diese Informationen<br />
angezeigt werden sollen. Das geschieht über HTML-TAGs.<br />
HTML-TAG<br />
Was ist nun ein HTML-TAG? - Als HTML-TAG wird ein einzelner HTML-"Befehl"<br />
bezeichnet.<br />
Dabei kommt der Begriff TAG aus dem Englischen und hat dort die Bedeutung von "Etikett,<br />
Anhänger, Aufkleber, Marke, Kennzeichnung, Auszeichner". Am besten lässt sich es mit dem<br />
Begriff "Kennzeichnung" veranschaulichen. Man kennzeichnet Bereiche innerhalb von<br />
seinem Inhalt, dass diese in bestimmter Weise angezeigt werden soll. Dabei kann man dann<br />
sagen, hier beginnt der Bereich und dort hört er wieder auf.<br />
Am Beispiel wird der HTML-TAG von 2 Absätzen gezeigt<br />
erster Absatz, der sehr lang sein kann<br />
zweiter Absatz - und nach der Definition bewirken<br />
Absätze immer einen Abstand (egal ob es sich um Text handelt<br />
oder bei Schuhen zwischen Straße und Träger<br />
Dies bewirkt eine Ausgabe im HTML-Browser von<br />
Kapitel: HTML-Grundlagen<br />
2<br />
1
erster Absatz, der sehr lang sein kann<br />
zweiter Absatz - und nach der Definition bewirken Absätze immer einen Abstand (egal ob es<br />
sich um Text handelt oder bei Schuhen zwischen Straße und Träger)<br />
für Fettschrift. Dabei sind 3 Dinge wichtig zu beachten:<br />
1. Die TAGs sitzen immer zwischen Kleiner- und Größerzeichen < .. ><br />
2. Zwischen den < > befindet sich die Anweisung - hier p - und wie so vieles im Leben<br />
ist das eine Abkürzung und das Ganze von dem englischen "paragraph" (Absatz,<br />
Abschnitt). Dementsprechend sind alle Befehle nur Abkürzungen von englischen<br />
Begriffen. So lassen sich die Befehle gut merken (vorausgesetzt, man kann Englisch).<br />
3. Alle HTML-TAGs immer klein schreiben! Dies ist für XHTML und valide Webseiten<br />
wichtig.<br />
Alles hat ein Anfang und ein Ende. So auch praktisch fast jeder HTML-TAG.<br />
Anfangs- und End-TAGs<br />
Weiterhin gibt es einen Anfangs-TAG und einen End-TAG. Sonst hätte wir nicht die<br />
Möglichkeit, mehrer Absätze zu machen bzw. müssten fett geschrieben Texte bis zum Ende<br />
der Seite immer fett sein. Der End-TAG ist fast identisch mit dem Anfangs-TAG, mit dem<br />
einzigen Unterschied, dass nach dem Kleinerzeichen (
Hier kommt unser erster Test.<br />
Hallo Welt.<br />
Hinweis<br />
Hier sieht man, dass sowohl am Anfang der Anfangs-TAG und am Ende der End-TAG<br />
steht. Das sollte i. d. R. eingehalten werden, da es laut XHTML zwingend erforderlich<br />
ist. Also für zukunftssicheren Code immer an den End-TAG denken.<br />
Es soll nicht verschwiegen werden, dass Sie dasselbe Ergebnis auch ohne den End-TAG<br />
erhalten. Dabei reagiert aber jeder Browser unterschiedlich. Der Internet Explorer ist sehr<br />
fehlertolerant, Netscapes Navigator zeigt teilweise bei fehlenden End-TAGs gar nichts mehr<br />
an.<br />
Übung<br />
Kapitel: Absätze erstellen<br />
2<br />
3
Texte formatieren - Überschrift<br />
Jetzt kommen die grundlegenden Formatierungsmöglichkeiten für Texte. Diese Handvoll<br />
TAGs werden Sie immer und immer wieder benötigen. Diese TAGs sich einzuprägen ist<br />
weder falsch noch schwer.<br />
Überschriften<br />
Anhand von Überschriften wird Text gegliedert und strukturiert. Dabei sind wie in einem<br />
Fachbuch verschiedene Hierarchien (Wichtigkeit) von Überschriften möglich, z.B.<br />
Kapitelüberschrift, Abschnittsüberschriften ...<br />
Für Überschriften wird der TAG genutzt. Dabei steht das h für das engl. header =<br />
Überschrift. Das X wird durch die Wichtigkeit ersetzt. Dabei stehen für X 1 bis 6.<br />
• 1 ist die größte und wichtigste<br />
• ...<br />
• 6 die kleinste und somit unwichtigste (aber immer noch wichtiger als normaler Text)<br />
Überschriften-Ebenen 1 <br />
Überschriften-Ebenen 2 <br />
Überschriften-Ebenen 3 <br />
Überschriften-Ebenen 4 <br />
Überschriften-Ebenen 5 <br />
Überschriften-Ebenen 6 <br />
normaler Text<br />
Nach der Überschrift (End-TAG) erfolgt automatisch ein Umbruch.<br />
Die Ausgabe im Browser sieht wie folgt aus:<br />
Kapitel: Texte formatieren - Überschrift<br />
2<br />
4
Hinweis<br />
Die Größe der einzelnen Überschriften sind relativ zueinander. Je nach Browser können diese<br />
unterschiedlich ausfallen (Relativität). Dabei sind die unwichtigeren Überschriften teilweise<br />
kleiner als der normale Text. Das ist OK so und kann wenn gewünscht über -><strong>CSS</strong> geändert<br />
werden.<br />
Übung: Überschriften und Absätze<br />
Geben Sie den Text im grünen Kasten exakt so in den Texteditor Notepad (oder anderen<br />
einfachen Texteditor) ein. Bitte auch die Leerzeichen und die Umbrüche<br />
Erweitern Sie den Text um Überschriften und Absätze<br />
1. Überschrift 1. Ordnung: Herzlich ...<br />
2. Absatz: Hier finden ...<br />
3. Überschrift 2. Ordnung: Meine Hobbies<br />
4. Absatz: Sind so zahlreich ...<br />
5. Absatz: Ihr Mustermann<br />
Herzlich willkommen auf<br />
der meiner ersten HTML-Seite<br />
Hier finden Sie meine erste Homepage zum<br />
Lernen von HTML<br />
Meine Hobbies<br />
Sind so zahlreich, dass es demnächst<br />
eine weitere Seite gibt<br />
Ihr Mustermann<br />
Nach der Eingabe speichern Sie die Datei unter dem Namen "index.htm". Ansehen in einem<br />
Website-Browser (z. B. Internet Explorer oder Firefox)<br />
Kapitel: Texte formatieren - Überschrift<br />
2<br />
5
kurz & gut:<br />
Zum Erstellen von Websites helfen Programme - sogenannte HTML-Editoren. Durch<br />
farbliche Syntaxhervorhebung und Autovervollständigung von HTML-TAGs,<br />
Vorschaufunktion können Fehler vermieden werden.<br />
html Editor<br />
Es gibt verschiedenste HTML-Editoren auf dem Markt und teilweise wird es als<br />
Religionsfrage aufgefaßt, welcher HTML-Editor zu verwenden ist.<br />
HTML-Editor Scripty<br />
Auch die Empfehlung von Scriptly stellt eine subjektive Meinung (von mir) dar - aber das<br />
Programm bietet extrem viel (nicht nur für Einsteiger) und unterstützt den Webdesigner bei<br />
der Arbeit.<br />
Mehr zu Scriptly und ein Video finden Sie auf der nächsten Seite<br />
HTML-Editor Phase 5<br />
Ein weitere HTML-Editor - schauen Sie sich diesen einfach an.<br />
Kapitel: html Editor<br />
2<br />
6
kurz & gut:<br />
Zum Erstellen von Websites helfen Programme - sogenannte HTML-Editoren. Hier wird der<br />
HTML Editor Scriptly von Webocton vorgestellt. Eine Freeware mit vielen pfiffigen Hilfen,<br />
wie z. B. vervollständigen von HTML-TAGs, Vorschaufunktion und zusätzlich integriertem<br />
FTP-Client.<br />
Sehr gut für Einsteiger geeignet. Fortgeschrittene werden das integrierte MDI, Fenstersplitting<br />
und Unterstützung für PHP, Java und weitere Programmiersprachen schätzen.<br />
Editor Scriptly von Webocton<br />
Mein Favorit unter den Editoren ist seit Neuestem Scriptly von Webocton. Warum? Dafür<br />
gibt es einige Gründe, und glauben Sie mir, nach zahllosen Stunden von Programmierung und<br />
Website-Entwicklung wird man anspruchsvoll.<br />
Gründe für Scriptly<br />
• Code-Completion - Ergänzung der Befehle und deren Attribute (beugt Tippfehlern<br />
und schlechtem Gedächtnis vor)<br />
• MDI - bedeutet, mehrere Fenster können nebeneinander geöffnet werden<br />
• Fenstersplittung - dieselbe Datei gleichzeitig an 2 unterschiedlichen Stellen anzeigen<br />
• Projektverwaltung - Websites können bequem in Projekten verwaltet werden<br />
• FTP-Client mit integriert<br />
• Sehr leistungsstark und verlässt einen nicht, wenn man von der Erstellung von HTML-<br />
Seiten in die Programmierung z. B. mit PHP übergeht<br />
• Mehrsprachig (zur Zeit deutsch und englisch, ist aber problemlos auf beliebig viele<br />
Sprachen erweiterbar)<br />
• Freeware<br />
• ... und noch einige Gründe mehr<br />
Präsentation von Scriptly als Flash-Film<br />
Und zum Ansehen von verschiedenen Highlights eine Präsentation von Scriptly als Flash-<br />
Film unter:<br />
http://www.html-seminar-de/filme/film-vorstellung-html-editor-scriptly.htm<br />
Scriptly Schritt für Schritt<br />
Nach dem Starten nicht erschlagen lassen (hier wird der Eindruck durch den kleinen<br />
Bildschirm noch verstärkt). Für den Anfang werden die meisten Bereiche noch nicht benötigt.<br />
Der Vollständigkeithalber die erste Ansicht.<br />
Kapitel: Editor Scriptly von Webocton<br />
2<br />
7
Die Bereiche können bequem per Funktionstasten aus- und wieder eingeblendet werden<br />
(natürlich auch über das Menü).<br />
Der rechte Bereich mit Features wird mit F6 aus- und eingeblendet, der Explorer mit F7 und<br />
das Informationsfenster mit F8.<br />
Kapitel: Editor Scriptly von Webocton<br />
2<br />
8
Jetzt ist erstmal viel Platz zum Arbeiten<br />
Wollen wir nun eine neue HTML-Seite erstellen, einfach auf das Icon mit dem leeren Blatt<br />
klicken (weiter unten mehr zu dem Pfeil für die Auswahl neben diesem Icon)<br />
Um die TAGs farbig hervorgehoben zu erhalten, den entsprechenden Syntax auswählen<br />
Jetzt können wir anfangen zu tippen. Und sobald wir einen HTML-TAG anfangen, erhalten<br />
wir Vorschläge, wie der TAG ergänzt werden kann, bzw. den END-TAG.<br />
Kapitel: Editor Scriptly von Webocton<br />
2<br />
9
Wenn die Code-Completion erwünscht ist, einfach die Leertaste drücken und sie wird<br />
übernommen.<br />
Die Vorschau starten Sie über das folgende Icon oder über F9.<br />
Clever an der Vorschau ist, dass die Ausgabegröße des Fensters bequem verändert werden<br />
kann - das ist später bei Ihren durchdesignten Seiten wichtiger als bei unserem Beispiel hier.<br />
Kapitel: Editor Scriptly von Webocton<br />
3<br />
0
Und nun noch abspeichern:<br />
HTML-Grundgerüst automatisch<br />
Scriptly kann beim Erstellen einer neuen Datei Ihnen sofort das Grundgerüst für die HTML-<br />
Datei erstellen.<br />
Klicken Sie mit der Maus neben dem Icon mit<br />
dem weißen Blatt auf den kleinen Pfeil nach<br />
unten. Sie erhalten dann folgende Auswahl mit<br />
den verschiedenen Dateitypen.<br />
Wählen Sie dann HTML aus.<br />
Kapitel: Editor Scriptly von Webocton<br />
3<br />
1
Sie werden nun gefragt, was alles im Grundgerüst verankert sein soll.<br />
Kapitel: Editor Scriptly von Webocton<br />
3<br />
2
Das Grundgerüst steht und Sie können gleich ans Eingemachte.<br />
Der Zeilenumbruch kann bequem ein und ausgeschaltet werden. Nutzen Sie dazu das Icon<br />
wie im folgenden Bild zu sehen<br />
Kapitel: Editor Scriptly von Webocton<br />
3<br />
3
Das die Anzeige mit aktivierten Zeilenumbruch aktiv ist, sehen Sie vor dem Quellcode – die<br />
Zeilen, die umgebrochen sind, haben anstatt der Nummer das entsprechende Icon<br />
Mögliche HTML-Attribute vorschlagen lassen<br />
HTML-Attribute vorschlagen lassen funktioniert, wenn der Cursor sich innerhalb eines TAGs<br />
befindet und dann die Tastenkombination STRG und die Leertaste gedrückt wird. Alle<br />
möglichen Attribute werden vorgeschlagen.<br />
Kapitel: Editor Scriptly von Webocton<br />
3<br />
4
WYSIWYG auch möglich<br />
Nicht verschwiegen werden soll die WYSIWYG-Variante. Dahin kann jederzeit vom HTML-<br />
Code in diese Bearbeitungsmöglichkeit gewechselt werden. Dazu einfach im Fußbereich<br />
WYSIWYG auswählen.<br />
In der Natur der Sache liegt es, dass der über die WYSIWYG-Variante erzeugte HTML-Code<br />
nicht so schön ist - zum Lernen aber eine geschickte Variante. Einfach mal damit spielen.<br />
Automatische Ersetzungen<br />
Als Hilfe (teilweise auch für Einsteiger verwirrend) sind die automatischen Ersetzungen bzw.<br />
Ergänzungen. Wird ein Umlaut (öäüß) eingegeben, wird automatisch der entsprechende<br />
HMTL-Code eingefügt.<br />
Wird eine öffnende Klammer eingegeben, erscheint automatisch zusätzlich die schließende<br />
Klammer. Auch bei einem Anführungszeichen – das ist für das Programmieren sehr hilfreich,<br />
da man meistens das benötigt.<br />
Kapitel: Editor Scriptly von Webocton<br />
3<br />
5
Sollte das stören, können Sie jederzeit über Optionen diese Ersetzungen deaktivieren.<br />
Unter “Weitere Ersetzungen” findet sich die Ersetzung von den Anführungszeichen in "<br />
- was ungeschickt ist (und schätzungsweise nur in dieser Version 0.8.93.0) so ist. Einfach<br />
ausschalten!<br />
Download<br />
Den Editor erhalten Sie unter folgender Adresse:<br />
http://www.scriptly.de<br />
Dort gibt es vom engagierten Autor auch ein Forum rund um den Editor.<br />
Kapitel: Editor Scriptly von Webocton<br />
3<br />
6
kurz & gut:<br />
Vorstellung des HTML Editor Phase 5 urspünglich von Ulli Meybohm.<br />
Bildschirmaufbau, Bedienung und für Fortgeschrittene Shortcuts.<br />
HTML Editor Phase 5 von Ulli Meybohm<br />
Der Editor unterstützt den Gestaltungsprozess und den Anfänger. Die Adresse, wo Sie die<br />
aktuellste Version dieser Freeware für den privaten Gebrauch erhalten, finden Sie unter<br />
Softwareempfehlungen.<br />
Für den Einstieg möchte ich mich auf die wichtigsten Bedienungselemente beschränken.<br />
Dazu gehört der grundlegende Aufbau des Programms und die wichtigsten Buttons (bzw., wer<br />
mag, die entsprechenden Menüpunkte).<br />
Bildschirmaufbau<br />
Folgende 3 Bereiche sind vorhanden:<br />
1. Eingabefenster und Vorschau<br />
2. Dateien<br />
3. Ordner<br />
Kapitel: HTML Editor Phase 5 von Ulli Meybohm<br />
3<br />
7
Der Bereich "1. Eingabefenster und Vorschau" wird sowohl für die Eingabe des Quelltextes<br />
als auch für die Vorschau genutzt. Unterstützt wird der Benutzer durch die farbigen<br />
Hervorhebungen des HTML-TAGs.<br />
Im Bereich "2. Dateien" sind alle erzeugten HTML-Dateien und Bilder ersichtlich. Klickt<br />
man eine HTML-Datei an, wird diese geladen und der Quellcode angezeigt und kann direkt<br />
bearbeitet werden. Per Drag & Drop können geschickt Bilder (aus dem Dateien-Bereich) in<br />
HTML-Dokumente gezogen werden. Der benötigte Code wird komplett eingefügt.<br />
Im Bereich "3. Order" wird die Struktur der Festplatte angezeigt. In der Abbildung ist mein<br />
Aufbau der Website zu sehen :)<br />
Oberhalb dieser Bereiche sind die Buttons und Menüs zu finden. Als nächstes werden die<br />
zum Arbeiten wichtigsten kurz erklärt. Alles weitere empfiehlt sich zu probieren und spielen.<br />
Bedienung<br />
Für die Bedienung wird als erstes der Button benötigt, der wie ein weißes Blatt mit<br />
umgeknickter Ecke aussieht.<br />
Nach Anklicken werden Sie gefragt, ob Sie "Erstellen" oder "Leeres Dokument erstellen"<br />
wollen. Der Unterschied ist, dass beim "Erstellen" der Editor das Grundgerüst erzeugt. Dies<br />
ist später praktisch, für den Anfang ist zum besseren Verständnis Tipparbeit angesagt. Wählen<br />
Sie bitte "Leeres Dokument erstellen" aus. Sie erhalten eine komplett leere Seite.<br />
Der zweite wichtige Punkt ist das Speichern. Klicken Sie dazu auf die einzelne "Diskette" (die<br />
erste links). Haben Sie noch nichts geschrieben, ist diese Diskette noch hellgrau und Sie<br />
können auch nichts speichern. Nachdem Sie etwas geschrieben haben, speichern Sie dies<br />
bitte. Als Dateinamen geben Sie bitte komplett "index.htm" ein. Wird dagegen die Endung<br />
weggelassen, ergänzt der Editor die Datei und macht ein .html dazu! Also immer daran<br />
denken und zum Dateinamen (dazu später noch mehr) immer ein ".htm" eingeben.<br />
Um in die Vorschau umzuschalten, werden folgende Buttons benötigt...<br />
Kapitel: HTML Editor Phase 5 von Ulli Meybohm<br />
3<br />
8
Dabei schaltet das rechte Symbol (Weltkugel mit Blatt) die Vorschau ein. Um wieder zurück<br />
zum Quellcode zu schalten, wird die "Zeitung" angeklickt.<br />
Nachdem dies die wichtigste Funktion für ein direktes Feedback des eigenen Tun und<br />
Waltens ist, empfiehlt es sich, dies durch die Taste F9 schneller zu machen. Durch einmal<br />
Drücken bekommen Sie die Vorschau - beim nächsten Drücken wieder den Quelltext.<br />
Beachten Sie zwei Dinge:<br />
• Die Vorschau funktioniert nur, wenn der Internet Explorer installiert ist, was wohl so<br />
gut wie auf jedem Windows-System der Fall sein dürfte.<br />
• Bei jedem Ansehen in der Vorschau wird die Datei automatisch gespeichert.<br />
weitergehende Einführung<br />
Als weitergehende Einführung empfehle ich die Anleitung, die beim HTML-Editor dabei ist.<br />
Ein paar Feinheiten werden hier später noch erklärt.<br />
Kapitel: HTML Editor Phase 5 von Ulli Meybohm<br />
3<br />
9
Für Fortgeschrittene - Shortcuts zum hmtl-editor<br />
Shortcuts werden Tastenkombinationen genannt, durch die Eingaben schneller gemacht<br />
werden können, bzw. die auch Aktionen auslösen.<br />
Viele Shortcuts sind noch effizienter, wenn zuvor der Text markiert wird, auf den sich dies<br />
beziehen soll. So wird z. B. der Anfangs-TAG vor den Text und der End-TAG hinter den<br />
markierten Text gesetzt, z. B. bei Überschriften.<br />
Anbei sind nur die wichtigsten aufgelistet (das sind die, die ich wohl am häufigsten benötige<br />
:-)<br />
Tastenkombination HTML-TAG was es bewirkt<br />
STRG + # Inhalt ignorieren<br />
STRG + Leertaste erzwungenes Leerzeichen<br />
STRG + RETURN Absatzmarken setzen<br />
SHIFT + RETURN Break-TAG (Zeilenumbruch)<br />
ALT + RETURN für Aufzählungen<br />
STRG + Pfeiltaste<br />
hoch/runter<br />
F9<br />
STRG + F1<br />
bis<br />
STRG + F6<br />
<br />
...<br />
<br />
STRG + l <br />
STRG + e<br />
<br />
Zum Scrollen des Quelltextes, ohne<br />
dass der Mauszeiger sich von der<br />
Stelle entfernt.<br />
Vorschau wird gestartet, sofern<br />
Internetexplorer installiert ist.<br />
Dabei wird automatisch der<br />
Quelltext gespeichert! (nochmals F9<br />
und man kehrt zum Quelltext<br />
zurück)<br />
Überschrift setzen<br />
Link setzen (Shortcut ist ein kleines<br />
L!)<br />
E-Mail-Link setzen<br />
STRG + b Schrift fett<br />
Kapitel:<br />
4<br />
0
Grundgerüst einer HTML-Seite -<br />
DOCTYPE-Definition<br />
Eine HTML-Seite hat ein Grundaufbau. Dieses hat in der Minimalversion immer folgendes<br />
Aussehen:<br />
<br />
<br />
<br />
HTML-Tutorial von www.html-seminar.de<br />
<br />
<br />
<br />
<br />
DOCTYPE-Definition - erste Zeile jeder Website<br />
Über die DOCTYPE-Definition teilen Sie dem Webbrowser mit, was er in der folgenden<br />
Datei erwarten kann und welche HTML-Befehle Verwendung finden können. Im Klartext,<br />
was ist zulässig und was wäre falsch. Wir benötigen diese Zeile, damit wir bald unsere<br />
erstellten HTML-Seiten von einem Programm automatisch validieren (überprüfen) lassen<br />
können um schnell aus den eigenen Fehler (und aus den Fehlern anderer) richtiges HTML<br />
lernen zu können. Für den Anfang ist es in Ordnung, wenn Sie diese Zeile exakt so<br />
übernehmen. Achten Sie beim Übernehmen auf Groß- und Kleinschreibung. Am besten<br />
einfach kopieren.<br />
Für die exakte Erklärung vertröste ich Sie auf eine späteres Kapitel - wichtig zu wissen ist<br />
nur, dass wir hier das aktuellste XHTML nutzen und dies in einer STRICT-Variante. Dadurch<br />
fallen alle Fehler sofort auf:)<br />
Bereich html<br />
Hier fängt nun der HTML-Bereich an - den Endtag finden Sie am Ende und diese<br />
umklammern den head und den body-Bereich<br />
head-Bereich<br />
Im Head-Bereich sind verschiedene Dinge definiert, die der Besucher nicht sieht (mit<br />
Ausnahme von title) und für die Technik und Suchmaschinen da ist. Dazu kommen wir<br />
später.<br />
Kapitel: Grundgerüst einer HTML-Seite - DOCTYPE-Definition<br />
4<br />
1
Der wichtigste Eintrag ist der -Bereich. Dort wird eingetragen, was im Internetbrowser-<br />
Kopfzeile angezeigt wird. Dieser Eintrag wird auch von Suchmaschinen verwendet und ist<br />
dort dann die erste Zeile zum anklicken. Tragen Sie dort in wenigen Worten ein, was auch der<br />
Einzelseite den Besucher erwartet! Investieren Sie hier Zeit (auch wenn es am Anfang für den<br />
Einsteiger die Tragweite dieser Zeile noch nicht komplett abschätzbar und nachvollziehbar<br />
sein wird.<br />
Sie können sich einfach merken, dass man im allgemeine nicht sieht, was im Kopf (bei einem<br />
Menschen zumindestens) vorgeht, aber der Körper sehr wohl sichtbar ist.<br />
body-Bereich<br />
Als erstes beschäftigen wir uns mit dem Body-Bereich. Alles was hier eingetragen wird, zeigt<br />
der Browser an. Also zunächst machen wir alle Eintragungen zwischen und <br />
Alle folgenden Kapitel gehen davon aus, dass Sie das Grundgerüst haben und alle<br />
Eintragungen die im Browser angezeigt werden im Body-Bereich eintragen. Es wird aus<br />
Platzgründen dann nicht mehr das komplette Grundgerüst gezeigt!<br />
Texte formatieren - fett, kursiv und Co<br />
Fett - hervorgehoben<br />
Zu diesem Kapitel empfiehlt das Haus folgende Musik: "I´m fat" von "Weird Al" Yankovic.<br />
Um wichtige Passagen oder Wörter hervorzuheben, können diese fett ausgegeben werden.<br />
Dafür gibt es 2 verschiedene Befehle. Einerseits steht dafür der TAG zur Verfügung. Das<br />
b steht für das engl. bold = fett. Andererseits haben wir den HTML-TAG - engl.<br />
"überzeugend, kräftig, fest, derb".<br />
nun wichtiger Text mit b<br />
nun wichtiger Text mit strong<br />
nun wichtiger Text mit b<br />
nun wichtiger Text mit strong<br />
Wer den End-TAG vergisst, darf sich nicht wundern, wenn dann auch der restliche Text fett<br />
wird.<br />
Kapitel: Texte formatieren - fett, kursiv und Co<br />
4<br />
2
So, wenn Sie sich wundern, warum beides gleich aussieht und dafür es 2 verschiedene<br />
HTML-TAGs gibt, hier die Erklärung: es gibt semantisch-logische und physisch-visuelle<br />
HTML-TAGs.<br />
physisch-visuellen VERSUS semantisch-logische HTML-<br />
TAGs<br />
Der große Unterschied ist, dass wir nach der Maxime von XHTML zu einem logischen<br />
Aufbau von unerem Inhalt wollen. Somit sollten i.d.R. die semantisch-logischen HTML-<br />
Elemente verwendet werden.<br />
Eine kleine Gemeinheit am Rand - nicht jeder Browser zweigt das Elemement strong auch<br />
hervorgehoben in fetter Schrift an. Dazu können wir aber später die visuelle Ausgabe von<br />
Strong (sprich wie es auf dem Bildschirm aussieht) über <strong>CSS</strong> dann nach unserem Geschmack<br />
gestalten.<br />
kursiv - schräge Sache<br />
Um Passagen oder Wörter hervorzuheben, die aber nicht so stark wie bei Fettdruck sein<br />
sollten, kann ein Text kursiv (in Windrichtung liegend) dargestellt werden:<br />
Hier kommt nun kursiver (schräger) Text<br />
Hier kommt nun kursiver (schräger) Text<br />
Das i steht für das engl. italic = italienisch. Das Wort "italienisch" hat erstmal nicht allzu viel<br />
mit kursiv zu tun, sofern man die Hintergrundgeschichte nicht kennt. Diese<br />
Hintergrundgeschichte ist ein Andenken an den ersten Schriftsetzer in der Druckerei von<br />
Aldus Manutius, der schräge Buchstaben entwickelte, um mehr Buchstaben auf eine Seite zu<br />
bekommen und dadurch das erste Taschenbuch herausbringen zu können. Dieser war Italiener<br />
und die Druckerei war in Venedig.<br />
PS: Das erste Taschenbuch musste nicht in Hosentaschen passen, sondern in Satteltaschen :)<br />
semantisch-logische für krusiv - em<br />
HTML-TAG em steht für engl. emphasis = "Betonung, Gewichtung, Nachdruck". Nutzen Sie<br />
diesen statt dem i<br />
Kapitel: Texte formatieren - fett, kursiv und Co<br />
4<br />
3
Schachteln von<br />
HTML-TAGs<br />
TAGs verschachtelt<br />
Die TAGs können nun bunt gemischt<br />
werden - verschachtelt. Wollen Sie z. B.<br />
einen Text erst fett und dann noch kursiv<br />
darstellen, ist das jetzt kein Problem.<br />
Hier kommt nun fetter und kursiver (schräger) Text<br />
Hier kommt nun fetter und kursiver (schräger) Text<br />
Hinweis:<br />
verschachten ist durchaus wörtlich gemeint. Wie bei Schachteln, die ineinander gestapelt<br />
werden, müssen die Tags auch geöffnet und geschlossen werden, also der zuerst aufgemacht<br />
wurde, muß zuletzt geschlossen werden. Z.B.: Inhalt <br />
Übung<br />
Bauen Sie folgende Seite exakt nach!<br />
Kapitel: /Schachteln von HTML-TAGs<br />
4<br />
4
Unterstreichung von Text<br />
unterstrichen - (nicht einsetzen!)<br />
Nur der Vollständigkeit halber wird hier der TAG für unterstrichen aufgeführt. Dieser sollte<br />
nach Möglichkeit vermieden werden!!!<br />
Warum nicht einsetzen? - Weil jeder Surfer denkt, es handele sich bei unterstrichenem Text<br />
um einen Link (viel Spaß beim sinnlosen Klicken auf diesen NICHT-Link).<br />
Sobald er feststellt, dass er mit der Unterstreichung tierisch auf den Arm genommen wurde,<br />
wird er sich frustriert abwenden und sofort den Computer ausschalten, verkaufen und sich<br />
einem Buch oder ähnlichen Beschäftigungen widmen. Unter Umständen wird er sich nur<br />
wundern oder aber Ihre Seite verlassen und sich andere Seiten ansehen.<br />
Der TAG fürs Unterstreichen lautet und entsprechend zum Beenden - für engl.<br />
underline = unterstreichen. Tun Sie sich und der Menschheit etwas Gutes und setzen Sie<br />
diesen TAG nicht ein!!!<br />
Texte formatieren - hoch-tief und größerkleiner<br />
Folgende TAGs finden Sie in der freien Wildbahn nicht so häufig wie die bisherigen<br />
Formatierungsmöglichkeiten. Diese haben aber durchaus ihre Relevanz.<br />
hochgestellt und tiefgestellt<br />
Hochgestellt und tiefgestellt = "Auf den A rm genommen und verladen"<br />
Besonders bei Formeln und wissenschaftlichen Literaturhinweisen ist es wichtig. Dabei steht<br />
der TAG für hochgestellt und für tiefgestellt.<br />
Besonders bei Formeln H2O und<br />
bei Literaturhinweisen1<br />
ist es wichtig und richtig.<br />
Besonders bei Formeln H2O und bei Literaturhinweisen 1<br />
ist es wichtig und richtig.<br />
Kapitel: Unterstreichung von Text<br />
4<br />
5
Text größer und kleiner<br />
Um innerhalb von Text eine Textpassage größer oder kleiner darzustellen, gibt es den TAG<br />
für größer und für kleiner. Dabei sollten der entsprechende End-TAG nicht<br />
vergessen werden ( und .<br />
Manchmal ist etwas größer oder kleiner,<br />
als es erscheint.<br />
Manchmal ist etwas größer oder kleiner,<br />
als es erscheint.<br />
Übung:<br />
Probieren Sie bitte folgendes Beispiel zu erstellen. Als Tipp: Es ist möglich (wenn auch nicht<br />
komfortabel) öfters als einmal einen Befehl auszuführen (das dient hier nur als Beispiel und<br />
sollte nicht auf fertigen Homepages auftauchen).<br />
A c h t e r b a h n<br />
PS: Beachten Sie bitte genau, wann die Schrift sich nicht mehr in der Größe ändert.<br />
PS2: Sollten Sie nicht auf das Ergebnis kommen, schauen Sie sich den Quellcode an :)<br />
Kapitel: Texte formatieren - hoch-tief und größer-kleiner<br />
4<br />
6
HTML-Seite validieren<br />
Um HTML-Seiten zu erstellen, ist das richtige Werkzeug zum schnellen und präzisen<br />
Arbeiten notwendig. Warum hier der Firefox ideal ist, können Sie unter dem Kapitel “Vorteile<br />
des Firefox” nachlesen. Ein großer Vorteil ist das Erweitern des Browsers durch<br />
Zusatzprogramm, sogenannte Add-Ons.<br />
Add-ons zum Valdieren von HTML-Code<br />
Das Add-On "Html Validator" von Marc Gueury zweigt beim Surfen sofort an, ob Fehler auf<br />
einer Seite existieren. Dies funktioniert sowohl Online wie Offline, also beim entwickeln der<br />
eigenen Seiten.<br />
Am rechten unteren Bereich der Fußzeile sehen Sie sofort nach<br />
laden einer Seite, ob diese OK ist (dann grüner Knopf mit<br />
Haken) oder ob sich Fehler eingeschlichen habe (roter Knopf).<br />
Einfach doppelklick und die Fehler von oben nach unten<br />
beseitigen. Wichtig ist, dass Sie von oben nach unten arbeiten,<br />
ansonsten könnten durch Folgefehler die Suche erfolglos sein.<br />
Download Html Validator: https://addons.mozilla.org/de/firefox/addon/249<br />
mit Scriptly validieren<br />
auch über Scriptly kann schnell der HTML-Code validiert werden – Linkes Fenster mit F6<br />
und dann die Tastenkombination STRG + SHIFT + t<br />
Kapitel: HTML-Seite validieren<br />
4<br />
7
Sauberer HTML-Code<br />
Warum überhaupt der Hinweis auf sauberen Code? Dafür gibt es einige Gründe:<br />
1. WYSIWYG-Editoren machen es nicht :-)<br />
2. Eine eventuelle Fehlersuche geht später schneller<br />
3. Nachträgliche Änderungen und Hinzufügen von Informationen ist problemlos<br />
4. Der Kursleiter sieht gemachte Tippfehler schneller<br />
Diesen sauberen HTML-Code machen Sie eigentlich nur für sich selber. Den Webbrowsern<br />
ist egal, ob diesen den Inhalt in einer einzigen Zeile bekommen oder wenigstens mit<br />
Umbrüchen oder mit sauberen Einrückungen. Diese zeigen alle 3 Variaten gleich an!<br />
Für einen sauberen Code arbeiten Sie Umbrüchen und Leerzeilen und Einrückungen. So sollte<br />
z.B. jeder Text-Abschnitt (-TAG) davor und danach eine Leere Zeile haben, damit Sie<br />
sehen, wo die Abschnitte sind. Sehen Sie folgendes Beispiel:<br />
Hier fängt unser erster Abschnitt mit seinem Inhalt an.<br />
Dabei können Sie wie hier gezeigt sofort nach dem<br />
p-Tag anfangen zu schreiben oder...<br />
<br />
wie in diesem zweiten Absatz in der nächsten Zeile nach dem p-Tag und am Ende<br />
auch wieder eine Zeile freilassen.<br />
<br />
Mit Einrückungen arbeiten Sie bei HTML-TAGs die mehrer Befehle benötigen. Z.B.<br />
Aufzählungen oder Tabellen. So ist auf einen Blick im Quellcode sichtbar, wo Aufzählungen<br />
anfangen und aufhören und was zusammengehört<br />
<br />
erster Aufzählungspunkt<br />
zweiter Aufzählungspunkt<br />
dritter Aufzählungspunkt, der<br />
mehr Platz benötigt<br />
nach Ende keine Einrückung mehr<br />
<br />
Und das Ganze als Negativbeispiel bei Aufzählungen:<br />
erster Aufzählungspunktzweiter<br />
Aufzählungspunktdritter Aufzählungspunkt, der mehr Platz<br />
benötigtnach Ende keine Einrückung mehr<br />
Am folgende Beispiel sehen Sie sehr schön, dass alleine durch die Darstellung ein<br />
Verständnis möglich ist (obwohl wir bisher keine Tabellen hatten). Sie sehen auf einen Blick,<br />
wo die Tabellen anfangen und aufhören.<br />
So sollte z. B. ein Tabellenaufbau dann aussehen. Achten Sie auf die Einrückungen, die die<br />
einzelnen Zellen verdeutlichen.<br />
Kapitel: Sauberer HTML-Code<br />
4<br />
8
<br />
<br />
INHALT<br />
<br />
<br />
INHALT<br />
<br />
<br />
<br />
Definitionsliste<br />
Auflistungen von Definitionen tretten meistens in Glossaren auf. Erstellen wir hier ein kleines<br />
HTML-Glossar, da es auch ideal das Schachteln von HTML-TAGs "übt".<br />
Der HTML-Befehl, die die Auflistung umschließt, ist der HTML-TAG dl. Das dl steht für das<br />
engl. definition list ("Definitionsliste"). Wird nun ein zu definierender Begriff genannt, ist das<br />
der "definition term" - dt. Die Defitionsbeschreibung ist somit der HTML-TAG dd, engl.<br />
definition description.<br />
<br />
Definition (list) Term<br />
Definition (list) Description<br />
<br />
Aufgabe<br />
Erstellen Sie nun ein kleines Glossar über die Begriffe "Hund" und "Katze" und deren<br />
Erklärung, z. B. “Ein Tier mit vier Beinen, das Bäume liebt” und “Ein Tier mit vier Beinen,<br />
das i.d.R. keine Hunde mag und die Flucht auf den Baum einem Hund vorzieht”.<br />
Kapitel: Definitionsliste<br />
4<br />
9
Listen, Aufzählungen<br />
Listen und Aufzählungen kommen laufend vor und sind besonders zu Weihnachten sehr<br />
wichtig. Ein Wunschzettel kann auch als Liste angesehen werden. Genauso natürlich ToDo-<br />
Listen, Telefonlisten etc.<br />
Listen mit Spiegelstrichen<br />
Für Listen werden 2 verschiedene TAGs benötigt. Der ...<br />
1. TAG, , um dem Browser mitzuteilen, um was für eine Liste es sich handelt und<br />
wo diese anfängt und aufhört<br />
2. TAG, , um die einzelnen Listenpunkte festzulegen<br />
Und voilà - schon haben wir eine Liste (und der Absatz oben mit 1. und 2. ist auch eine Liste).<br />
Am Beispiel wird es deutlich, wie diese zusammenspielen und welche TAGs wie geschachtelt<br />
sein sollten.<br />
<br />
erster Listenpunkt<br />
zweiter Listenpunkt<br />
...<br />
x-ter Listenpunkt<br />
<br />
• erster Listenpunkt<br />
• zweiter Listenpunkt<br />
• ...<br />
• x-ter Listenpunkt<br />
Dabei steht für das engl. unsorted list = unsortierte Liste. Dieser TAG hat zur Folge,<br />
dass für jedes ein Spiegelstrich in Form einer Kugel gesetzt wird. Dabei steht für<br />
engl. list=Liste<br />
Kapitel: Listen, Aufzählungen<br />
5<br />
0
Listen mit automatischer Nummerierung<br />
Wenn jetzt eine sortierte Liste (durchnummerierte) benötigt wird, wird das durch <br />
ersetzt. steht für engl. orderd list = sortierte Liste<br />
Aufgabe:<br />
Erstellen Sie wie im obigen Beispiel ein Liste mit diesem Aussehen. Allerdings dürfen Sie<br />
nicht von Hand 1. 2. oder 3. eintippen!!<br />
Das Ergebnis sollte so aussehen:<br />
1. erster Listenpunkt<br />
2. zweiter Listenpunkt<br />
3. x-ter Listenpunkt<br />
Aufgabe:<br />
Um ein wenig Spannung in die Sache zu bringen: eine schwierigere Aufgabe. Erzeugen Sie<br />
folgendes Aussehen. Dabei sehen Sie, dass sortierte und unsortierte Listen gemischt werden<br />
können.<br />
PS: Schachteln gehört dazu<br />
PS2: Nachsehen im Quellcode der Seite ist nicht untersagt :)<br />
1. erster Listenpunkt<br />
2. zweiter Listenpunkt<br />
o ein Unterpunkt zum zweiten Listenpunkt<br />
o ein weiterer Unterpunkt zum zweiten Listenpunkt<br />
3. x-ter Listenpunkt<br />
Kapitel: Listen, Aufzählungen<br />
5<br />
1
Attribute bei HTML-TAGs<br />
Früher wurde viel Design direkt über HTML gemacht. Dies wurde durch Attribute bei den<br />
entsprechenden HTML-TAGs erreicht. So konnte z.B. die Ausrichtung von Text mitgegeben<br />
werden (linksbündig, rechtsbündig, zentriert) oder Farben angegeben werden. Das sollte man<br />
bei der Philosophie von XHTML dringend unterlassen (zumal viele dieser alten Attribute<br />
sonst von den Validerungsroutinen als Fehler angemerkt werden) - das Design wird nun über<br />
<strong>CSS</strong> gemacht. Es ist nur noch Inhalt und Logik gewünscht. Daher sind nicht mehr allzuviele<br />
Attribute zugelassen bzw. gerne gesehen.<br />
Zwei Attribute gibt es bei Aufzählungen, die als inhaltliche/logische Angabe angesehen<br />
werden. Die Art der Aufzählung (ob mit Zahlen, Buchstaben etc.) und die Startzahl.<br />
Art der Nummerierung bestimmen<br />
Der TAG kann ergänzt werden durch . Dabei gibt es für das X verschiedene<br />
Ausprägungen.<br />
Praktisch an dieser Konstruktion ist, dass allein durch Auswechseln von eine ganz<br />
andere Anzeige möglich ist, z. B. mit 1. ,2. , 3. ... oder mit A, B, C, ... oder römischen Ziffern<br />
• type=1 dadurch kommt die normale Aufzählung (arabische Ziffern) zustande, also 1,<br />
2, 3 ...<br />
• type=A Aufzählung mit Großbuchstaben, also A,B,C, ..., Z<br />
• type=a Aufzählung mit Kleinbuchstaben, also a,b,c, ..., z<br />
• type=i Aufzählung mit römischen Ziffern in klein, also i,ii,iii,iv,v, ...<br />
• type=I Aufzählung mit römischen Ziffern in groß, also I,II,III,IV,V, ...<br />
Start der Nummerierung festlegen<br />
Hier wird über das Attribut start="ZAHL" der Beginn der Zählung festgelegt.<br />
...<br />
Kapitel: Attribute bei HTML-TAGs<br />
5<br />
2
Aufgabe<br />
Erstellen Sie die Liste der römisch-deutschen Herrscher. Die Aufzählung sollte mit der<br />
Nummer 3 beginnen und in römischen Ziffern angezeigt werden.<br />
III. Liudolfinger bzw. Ottonen<br />
IV. Salier<br />
V. Supplinburger<br />
VI. Staufer<br />
VII. Welfen<br />
VIII. Staufer<br />
Umbrüche erzwingen<br />
Wenn Sie einen Umbruch erzwingen möchten, nutzen Sie dazu den TAG .<br />
Hier kommt unser erster Test. <br />
Hallo Welt.<br />
Die Ausgabe im Browser sieht wie folgt aus:<br />
Hier kommt unser erster Test.<br />
Hallo Welt.<br />
Alle HTML-TAGs kommen aus dem Englischen. So ist die Abkürzung für break =<br />
Umbruch.<br />
Der TAG 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<br />
Zukunft gerüstet.<br />
Kapitel: Umbrüche erzwingen<br />
5<br />
3
Trennlinien und Attribute von TAGs<br />
Hier kommt die Maus - nein, eine Trennlinie. Durch diese können Sie Texte trennen. Anhand<br />
dieser Trennlinie wird das Prinzip von Attributen erklärt. Diese Attribute benötigen Sie bei<br />
allen möglichen TAGs - also bitte zu Gemüte führen<br />
Trennlinien<br />
Trennlinien sind an und für sich nichts Besonderes. Diese trennen zwei Abschnitte.<br />
Das steht für engl. horizont ruler = horizontale Linie.<br />
Text eins Text zwei<br />
Text eins<br />
Text zwei<br />
Der TAG ist xHTML-gerecht. 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<br />
gerüstet.<br />
Attribute<br />
Spannend ist das Prinzip von Attributen. Bisher wurden bei allen HTML-TAGs keine<br />
Attribute aufgeführt, obwohl es welche gibt.<br />
Wird kein Attribut aufgeführt, wird das Standard-Attribut angenommen, z. B. dass etwas links<br />
ausgerichtet ist.<br />
Größe eines Elementes<br />
Im Folgenden spreche ich bewusst von Elementen, da Attribute auf zahlreiche TAGs<br />
angewendet werden können, z. B. hat sowohl eine Trennlinie eine Größe als auch eine Schrift<br />
und beides mal ist die Benennung dieselbe. Das Attribut lautet size="X".<br />
Kapitel: Trennlinien und Attribute von TAGs<br />
5<br />
4
Bei dem TAG sieht das dann wie folgt aus<br />
Text eins<br />
<br />
Text zwei<br />
Anmerkung:<br />
Die Attribute wiederholen sich bei verschiedenen TAGs - allerdings sind nicht alle Attribute<br />
bei allen TAGs erlaubt.<br />
Text eins<br />
Text zwei<br />
Aufbau Attribute<br />
Attribute setzt sich also aus 2 Teilen zusammen. Im ersten, z.B. "size", wird die Art der<br />
Beeinflussung festgelegt und im zweiten dann die Ausprägung, hier 20.<br />
Ausrichtung - rechts, links, mittig<br />
Elemente können ausgerichtet werden. Dazu dient das Attribut "align" (engl.: ausrichten)<br />
Dabei sind folgende Möglichkeiten vorhanden<br />
• align="left"<br />
• align="center"<br />
• align="right"<br />
Ein Wurm wanderte auf der Welt entlang ...<br />
<br />
<br />
<br />
Das Attribut width="55" wird im nächsten Punkt erklärt. Benutzen Sie es einfach mal.<br />
Kapitel: Attribute<br />
5<br />
5
Breite eines Elementes<br />
Ein weiteres Attribut ist die Breite width (engl. Breite/Weite). Im folgenden Beispiel sehen<br />
Sie die Trennlinie mit einer Breite von 55.<br />
Text eins<br />
Text zwei<br />
Relativität !!! - ganz wichtig für alles weitere<br />
Spannend wird das Ganze, wenn Sie in Relationen arbeiten, d. h. nicht mehr fixe Angaben,<br />
wie im letzten Beispiel 55 Bildpunkte, sondern in Prozenten. Im nächsten Beispiel ist die<br />
Linie 55% breit abhängig vom Browserfenster. Probieren Sie das Beispiel aus und ändern Sie<br />
dann die Fenstergröße des Browsers. Die Linie wird automatisch sofort kleiner bzw. größer.<br />
Text eins<br />
<br />
Text zwei<br />
Text eins<br />
Text zwei<br />
Dies ist eine der wichtigsten Erkenntnisse, die Sie immer wieder brauchen. Das komplette<br />
Design ist i. d. R. relativ. Sehen Sie sich einfach die Seite Relativität an und meditieren Sie<br />
über die Auswirkungen auf Ihr weiteres Leben als HTML-Seiten-Designer.<br />
Spielen Sie damit und probieren Sie.<br />
Tipp:<br />
Ist etwas Standard, ist es eigentlich unnötig das Attribut zu setzen, z. B. bei oder bei Schrift eine Ausrichtung links. Denn ohne die Angabe wäre die<br />
Anzeige die gleiche. Das spart Tipparbeit, Code und Übertragungszeit!<br />
Kapitel: Attribute<br />
5<br />
6
Links (Hyperlinks) in HTML erstellen<br />
Durch Links wurde das WWW so groß und erfolgreich. Links (korrekt Hyperlinks, aber zu<br />
lang, um jedes mal auszuschreiben :) verweisen auf andere Seiten und mehr.<br />
Es gibt mehrere Arten von Links:<br />
• Links innerhalb der Homepage<br />
• Links auf andere Seiten im Internet<br />
• Links mit E-Mail-Funktion<br />
Dabei kann das Aussehen der Links verschieden sein. Einerseits als Text, andererseits als<br />
Grafik. Vorerst wird das Prinzip des Links anhand von Text-Links innerhalb der eigenen<br />
Homepage erklärt.<br />
Im ersten Schritt wird der Aufbau von Dateinamen angesehen, um möglichst wenig Probleme<br />
zu bekommen (ja, da kann es Probleme geben und falterweise merkt man es teilweise selber<br />
nicht!)<br />
Dann schauen wir uns externe Links an und wie am besten auf andere Websites verlinkt<br />
werden kann.<br />
Mit dem Wissen bauen wir unsere Steuerung innerhalb der Website<br />
Dateinamen und die Benennung<br />
Benennung der Startdatei<br />
Die Startdatei sollten Sie tunlichst index.htm nennen. Oft ist auch index.html zu sehen. Das<br />
zusätzliche L schadet zwar nicht, kann aber für Verwirrung sorgen. Deshalb immer index.htm<br />
nennen. Wird bei einer URL, was gerne gemacht wird, nur der Pfad angeben, sucht der<br />
Browser automatisch nach einer index.htm(l).<br />
Findet er diese, was zu hoffen ist, wird diese Startseite angezeigt. Findet er diese Seite nicht,<br />
erhält der Nachfrager unter Umständen eine Auflistung der Dateien, die sich im Ordner<br />
befinden.<br />
Beispiel: Eingabe in die URL www.ard.de<br />
Vom Browser wird automatisch http://www.ard.de/index.htm geladen<br />
Geschichtliches:<br />
Das .html stammt aus der UNIX-Welt. .htm stammt aus der DOS-Welt, da dort lange Zeit<br />
nur Suffixe mit 3 Zeichen erlaubt waren.<br />
Kapitel: Links (Hyperlinks) in HTML erstellen<br />
5<br />
7
Aufbau der Datei-Namen<br />
Bei der Namensgebung sollte unbedingt auf mehrere Punkte geachtet werden:<br />
1. keine äöüß oder sonstige Sonderzeichen<br />
2. keine Leerzeichen im Namen, stattdessen ein - (Minus) oder _ (Unterstrich), das<br />
Minus ist vorzuziehen<br />
3. als Endung (.htm oder .html) sollte immer bei allen Ihren HTML-Dateien einheitlich<br />
verwendet werden. Z. B. immer nur .htm oder immer nur .html - entscheiden Sie sich<br />
einmal und bleiben Sie dabei!<br />
gute Beispiel:<br />
termine.htm<br />
aktuell.htm<br />
ueber-mich.htm<br />
aktuelle-termine.htm<br />
absolut nicht empfehlenswert:<br />
Groß.htm<br />
alles über mich.htm<br />
ich ganz Groß.htm<br />
Weiterhin empfehle ich ...<br />
• dass der Dateinamen komplett klein geschrieben wird<br />
• und in minimalistischer Form den Inhalt beschreibt<br />
Erlaubt sind außer Buchstaben auch das Minus-Zeichen.<br />
Unsere "Über mich"-Seite würde ich also benennen: ueber-mich.htm<br />
Negativbeispiel: "Über mich.htm" funktioniert u. U. abhängig vom Browser - allerdings nicht<br />
bei jedem :(. Grund ist das Ü, das spätestens bei Besuchern außerhalb Deutschlands Probleme<br />
bereitet und das Leerzeichen, das teilweise nicht erkannt wird.<br />
Aufgabe: Dateinamen für Website festlegen<br />
Vergeben Sie für folgende kleine Website mit 4 Seiten sinnvolle Namen. Die Website hat eine<br />
Startseite, eine Seite mit Informationen über Sie, eine Seite mit Ihren Hobbies und eine Seite<br />
mit Ihrer Linksammlung.<br />
Die Verbindungslinien symbolisieren für später die Möglichkeit, dass man von jeder Seite aus<br />
auf eine andere direkt wechseln kann.<br />
Kapitel: Dateinamen und die Benennung<br />
5<br />
8
interne Links<br />
Alle Links einer Site sind relativ adressiert. Dies bedeutet, dass beim Setzen eines Links nicht<br />
die komplette URL, sondern nur der Pfad ab der Startebene der Site angegeben werden muss.<br />
Also wird weder Dienstart, Servername noch Länderkürzel eingegeben. Wenn Sie keine<br />
Unterverzeichnisse verwenden, haben Sie auch kein Verzeichnis. Durch die relative<br />
Adressierung wird Speicherplatz gespart und man kann mit der Internet-Site einfacher<br />
umziehen (oder sie z.B. auf CD-ROM brennen)<br />
Datei liegt im Hauptverzeichnis:<br />
index.htm<br />
Somit sieht dann der HTML-Code wie folgt aus:<br />
eine beliebige Umschreibung <br />
Datei liegt im Verzeichnis: kurse<br />
kurse/index.htm<br />
Kapitel: interne Links<br />
5<br />
9
externe Links<br />
Links auf andere Seiten - externe Links<br />
Bei externe Links muss die komplette URL angegeben werden. Also sowohl Dienstart,<br />
Servername noch Länderkürzel eingegeben und die Unterverzeichnisse, wenn diese<br />
verwendet werden. Einfach<br />
und sicher fahren Sie, indem Sie die Seite, auf die Sie einen Link setzen möchten, im Browser<br />
angeben und wenn die Seite erfolgreich angezeigt wird die URL kopieren und in Ihren<br />
HTML-Code übernehmen.<br />
Somit sieht dann der HTML-Code wie folgt aus, wenn Sie einen Link auf dieses HTML-<br />
Seminar setzen möchten:<br />
eine beliebige Umschreibung <br />
Anstatt der beliebigen Umschreibung sollte etwas Sinnvolles stehen, damit dem Besucher<br />
im Voraus bekannt ist, was ihn hinter dem Link erwartet. Negativbeispiel: hier klicken<br />
Es wird nun die offizielle Startseite des Internetauftritts anzeigt. Es macht hier wenig Sinn,<br />
zusätzlich noch index.htm anzugeben, sprich also http://www.html-seminar.de/index.htm.<br />
Möchten Sie eine Unterseite direkt anspringen, geben Sie die komplette URL mit der<br />
Unterseite an:<br />
Infos zu Links <br />
Aufgabe<br />
Erstellen Sie folgende Linkliste für die Unterseite "empfehlungen.htm" auf Ihrer Website:<br />
• HTML lernen mit HTML-Seminar.de<br />
• PHP Tutorial und MySQL Kurs<br />
Kapitel: externe Links<br />
6<br />
0
Tipp<br />
Wenn Sie Links nach außen setzen, verlieren Sie eigentlich Besucher Ihrer Website. Geben<br />
Sie daher im Aufbau Ihres Links noch ein "target" an. Dadurch wird ein neues Fenster<br />
geöffnet und Ihres bleibt erhalten. Nachdem der Surfer dieses schließt, ist er wieder bei Ihnen.<br />
Hintergrund ist, dass sich viele schwer tun mit dem "Zurück-Button". Der Link sieht dann wie<br />
folgt aus:<br />
jetzt HTML lernen<br />
Haben Sie auf Ihrer Homepage eine Linkliste, können Sie auch bestimmen, dass alle Links im<br />
selben neuen Fenster geöffnet werden. Geben Sie dazu anstatt dem target="_blank" ein<br />
target="linkliste" ein, wobei ein beliebiges Wort gewählt werden kann, solange es nicht<br />
_blank ist.<br />
Tipp<br />
Verweisen Sie auf keinen Fall auf rechtlich zwielichtige Seiten wie z. B. Pornoseiten und<br />
Hackerseiten. Das kann ins Auge gehen und eine Abmahnung etc. kostet Ihr Geld. Sagen Sie<br />
nicht, ich hätte nicht gewarnt!<br />
Links mit Grafik und E-Mail werden später behandelt. Erst folgt das Kapitel über Grafik<br />
allgemein.<br />
Steuerung erstellen<br />
Textlink<br />
Wie kommen wir also von unserer Startseite zur "Über mich"-Seite und zurück? Mit einem<br />
Link, der durch die Maus angeklickt wird und dann zu der entsprechenden Seite führt.<br />
Ein Link hat immer die Form von<br />
BESCHREIBUNG<br />
Dabei sollten die groß geschriebenen Teile durch den entsprechenden Inhalt ersetzt werden, in<br />
unserem Beispiel also:<br />
Startseite<br />
Über mich<br />
<br />
Über mich<br />
<br />
mein Zelt<br />
mein Fahrrad<br />
mein Stocherkahn<br />
<br />
Kapitel: Steuerung erstellen<br />
6<br />
1
Im Browserfenster wird der Link dann unterstrichen angezeigt. Das ist auch der Grund,<br />
warum ich absolut von sonstigen Unterstreichungen abrate (siehe Kapitel: Texte formatieren -<br />
> unterstrichen).<br />
Der Link ändert auch seine Farbe, je nachdem ob er bereits angezeigt wurde oder die Seite<br />
noch unbesucht blieb. Auch ändert sich der Mauszeiger, wenn man über einen Link fährt.<br />
Startseite Über mich<br />
Über mich<br />
• mein Zelt<br />
• mein Fahrrad<br />
• mein Stocherkahn<br />
In der BESCHREIBUNG kann alles stehen. Typische Einsteigerfehler dabei sind solche<br />
Varianten wie "Klicken Sie hier, um mehr über mich zu erfahren". Wichtig sind also<br />
aussagekräftigere Beschreibungen als das Wort "hier".<br />
Tipp<br />
Textlinks wie die obigen sind ideal für die Steuerung. Wenn diese in der ursprünglichen Form<br />
belassen werden, werden diese von jedem Surfer schnell erkannt und genutzt. Jeder Surfer<br />
erkennt einen blau unterstrichenen Text als Link und freut sich, dass er sich nicht erst in die<br />
Nutzung einarbeiten muss und diese schnell benutzen kann.<br />
Bisher gingen wir davon aus, dass Sie keine Unterverzeichnisse verwenden. Sollten Sie<br />
Unterverzeichnisse verwenden (was bei kleineren Homepages unüblich ist), geben Sie einfach<br />
noch den Pfad mit an. Wichtig dabei ist nur, dass Sie den / (Schrägstrich = Slash) verwenden<br />
(das Teil auf der Tastatur, das sich seine Existenz mit der 7 teilt und oberhalb von ihr steht).<br />
Unser Link würde, wenn die Seite in dem Unterverzeichnis "ich" gespeichert ist, also so<br />
aussehen: Über mich<br />
Aufgabe<br />
Erstellen Sie zusätzlich zu Ihrer Startseite und der bereits erstellten Seite "empfehlungen.htm"<br />
eine Seite mit Ihren Hobbies und verlinken diese 3 Seiten, dass von jeder Seite auf jede Seite<br />
gesprungen werden kann.<br />
Kapitel: Über mich<br />
6<br />
2
Verzeichnisse<br />
Wenn Sie mit Verzeichnissen arbeiten, weil Ihre Struktur Ihrer Website sehr komplex wird,<br />
müssen Sie bei den Links die Verzeichnisse mit angeben. Zusätzlich können Sie auch über die<br />
Angabe ".\verzeichnis\seite.htm" angeben, dass er immer von dem Hauptverzeichnis<br />
ausgeht, auch wenn Sie den Link in einem Unterverzeichnis aufrufen. Empfehlenswert ist es<br />
eh nur bei komplexen Seiten (über 200 Seiten meiner Meinung nach). Verzeichnisse selber<br />
sind wichtig, um z.B. die Bilder unterzubringen.<br />
Stolperfallen Slash "/" und Backslash "\"<br />
Bei der Pfadangabe von Links wird gerne anstatt dem "/" ein "\" gesetzt. Dies ergibt im<br />
Browser von Netscape Probleme, hingegen moniert der Microsoft Internet-Explorer die<br />
falsche Schreibweise nicht und führt sie einfach aus.<br />
Tipps zu Unterverzeichnisse:<br />
In jedem Verzeichnis sollte eine index.htm existieren, da ansonsten unter Umständen bei der<br />
URL ohne Datei der Inhalt dieses Ordners aufgelistet wird oder nur eine Fehlermeldung<br />
kommt.<br />
Grafiken in Homepages integrieren - wie,<br />
was, wo, wie groß<br />
Es gibt bisher 2 Grafikformate, die in Betracht kommen. Diese 2 Formate werden von allen<br />
Browsern unterstützt. GIF und JPEG sind die Grafikformate, die heute im Internet verwendet<br />
werden.<br />
Wenn Sie im Browser ein Bild sehen, können Sie beim Internet Explorer mit der rechten<br />
Maustaste auf das Bild klicken. Sie erhalten dann ein Menü - der letzte Punkt "Eigenschaften"<br />
zeigt den Namen, die Datei-Größe und die Abmessung des Bildes. Jedes Bild kann mit der<br />
rechten Maustaste auch auf die eigene Festplatte gespeichert werden (beachten Sie unbedingt<br />
das Copyright!). In dem Menü, das Sie durch die rechte Maustaste erhalten, gibt es den Punkt<br />
"speichern unter..". Jetzt können Sie das Bild auf Ihrer Festplatte speichern. Machen Sie dies<br />
mit dem folgenden Bild "jetzt HTML lernen" und speichern Sie das Bild in den Dateiordner,<br />
in dem Sie bisher Ihre HTML-Dateien (index.htm, ueber-mich.htm) gespeichert haben.<br />
Teilweise aendert der IE die Endung - anstatt .jpg steht dann .jpeg - dann entweder wieder<br />
umbenennen oder als html-seminar.jpeg einbinden.<br />
Kapitel: Verzeichnisse<br />
6<br />
3
Dieses Bild integrieren wir als Beispiel auf die Startseite (index.htm). Die Grundstruktur des<br />
HTML-TAGs dafür lautet:<br />
<br />
(img = engl. image = Bild)<br />
<br />
Dabei gibt es für Bilder weitere Attribute, die aus verschiedenen Gründen sehr wichtig sind.<br />
Attribut Bedeutung<br />
width="X" Die Breite X des Bildes - sollte angegeben werden, damit<br />
der Browser den Platzhalter in entsprechender Größe<br />
vorsehen kann, solange das Bild noch nicht komplett<br />
übertragen ist!<br />
height="Y" Die Höhe des Bildes - sollte angegeben werden, damit der<br />
Browser den Platzhalter in entsprechender Größe<br />
vorsehen kann, solange das Bild noch nicht komplett<br />
übertragen ist!<br />
border="0" Ob ein Rahmen gezeichnet werden soll (wenn nicht, dann<br />
0) und wenn er gezeichnet wird, mit welcher Stärke<br />
alt="ERKLÄRUNG<br />
ZUM BILD"<br />
Der ALTernativtext - dieser ist aus verschiedenen<br />
Gründen sehr wichtig:<br />
• für Sehbinderte (die ihn von speziellen Browsern<br />
vorgelesen bekommen)<br />
• für Suchmaschinen, da diese auch diesen Text<br />
indizieren<br />
• zur Information für den Surfer<br />
Kapitel: Grafiken in Homepages integrieren - wie, was, wo, wie groß<br />
6<br />
4
Der komplette Code sieht also wie folgt aus. Erstellen Sie Ihre Internetseite mit Bild, fahren<br />
Sie mit der Maustaste auf das Bild und warten Sie kurz. Jetzt erscheint der Alternativtext als<br />
Tooltip.<br />
<br />
Und wenn Sie mehr Ordnung im Verzeichnis haben möchten, legen Sie ein Unterverzeichnis<br />
für Ihre Bilder an und schreiben dann:<br />
<br />
Welches Format soll ich verwenden?<br />
Die Unterschiede der Formate sind in folgender Tabelle dargestellt. Wenn Sie sich nicht<br />
entscheiden können, dann speichern Sie das gewünschte Bild über ein<br />
Bildbearbeitungsprogramm sowohl in GIF als auch als JPG ab und schauen sich die<br />
Dateigröße an.<br />
Unterschiede der<br />
Formate:<br />
Anzahl der<br />
Farben:<br />
Möglichkeiten zur<br />
Animation:<br />
Möglichkeiten zur<br />
Kompression:<br />
Eignung:<br />
Besonderheit:<br />
GIF JPG<br />
256 16,7 Mio<br />
Ja Nein<br />
automatisch<br />
kleine Grafiken, Buttons,<br />
animierte Grafiken<br />
Anzeige erfolgt stufenweise,<br />
dadurch kann der Surfer früher<br />
erahnen, was für ein Bild kommt.<br />
Kompressions-Grad<br />
einstellbar<br />
Bilder mit vielen Farben<br />
(Photos)<br />
Übertragungszeiten abhängig von der Leitungsgeschwindigkeit am Beispiel einer Grafik mit<br />
100 kB finden Sie im nächsten Abschnitt bei Übertragungsdauer allgemein.<br />
Besonders bei Grafiken ist auf die Dateigröße zu achten. Werden die Dateien zu groß, was je<br />
nach Geschmack schon bei 100kb beginnt, entwickelt sich das WWW für langsame Zugänge<br />
(z. B. Modem) zum World Wide Wait. Daher sollte unbedingt auf die Dateigröße geachtet<br />
werden. Getreu dem Motto: weniger ist mehr. Das entwickelt sich oft zur Gratwanderung<br />
zwischen Bildqualität und Übertragungsgeschwindigkeit.<br />
Kapitel: Grafiken in Homepages integrieren - wie, was, wo, wie groß<br />
6<br />
5
Um den Anforderungen des WWW gerecht zu werden, sollte die Datengröße eines Bildes<br />
also möglichst gering sein. Zu bedenken gilt auch, dass Zeit Geld ist und hier im Speziellen<br />
Telefonkosten verursacht, die es soweit als möglich zu vermeiden gilt.<br />
Dateiformat GIF<br />
Das Dateiformat GIF (Graphics Interchange Format, Graphikaustauschformat) war das erste<br />
Format im Internet und wurde von der Firma CompuServe entwickelt. Es setzte sich durch, da<br />
es, zusätzlich zu seinen Vorteilen und Möglichkeiten, erstmals lizenzfrei zu bekommen war.<br />
Die GIF-Datei hat eine Palette von 256 Farben und wird zusätzlich komprimiert. Das Format<br />
GIF hat den Vorteil, dass es sich beim Ladevorgang abgestuft aufbauen lässt (genannt<br />
interlaced), was zur Folge hat, dass dem Betrachter bei längeren Ladezeiten das Warten nicht<br />
so lange erscheint, da das Bild sich zwar unscharf, aber schon erkennbar aufbaut. Eine weitere<br />
Eigenschaft von GIF ist, dass man animierte Sequenzen darstellen kann, die aus einer<br />
Bildfolge von GIFs bestehen. So kann man in einer einzigen Bilddatei kleinere Animationen<br />
abspeichern, die dann selbstständig ablaufen (s. Bsp. Verkehrsschild). Mit GIFs kann zudem<br />
eine Farbe transparent dargestellt werden, was den Vorteil hat, dass man sie im Browser nicht<br />
sieht und man somit mit den Hintergründen spielen kann, ohne die Position der Grafik<br />
berücksichtigen zu müssen. So können Grafiken im Vordergrund harmonisch integriert<br />
werden, ohne dass der Hintergrund störend zum Tragen kommt. Als Beispiel kann als<br />
Hintergrund eine Gesteinsstruktur gewählt werden und als Vordergrundgrafik das<br />
Firmenlogo, das sich durch die transparente Farbe nahtlos einfügt. Durch einen Stern (ich<br />
möchte hier keinen Stuttgarter Automobilhersteller nennen) kann dann durch die inneren<br />
Kreissegmente hindurch der Hintergrund zur Geltung kommen.<br />
Dateiformat JPG<br />
Im JPEG-Format (Joint Photographic Experts Group, Vereinigte Photoexperten-Gruppe) sind<br />
bis zu 1,6 Millionen Farben speicherbar. Daher ist es auch am gebräuchlichsten für die<br />
Darstellung von Photos und anderen Halbtonbildern in Dateien im Internet. Der große Vorzug<br />
von JPEG ist, dass ein Komprimierungsgrad eingestellt werden kann. Somit kann eine Datei<br />
auf ein Minimum reduziert werden.<br />
Dateiformat PNG<br />
PNG (portable Network Graphics, engl. portierbare Netzwerkgrafiken) ist ein Rasterformat.<br />
Die Nachteile von GIF und JPG sind in diesem Format nicht vorhanden, aber viele Vorteile.<br />
Es können alle Farben dargestellt werden, die Komprimierung ist verlustfrei (was man bei<br />
JPG nicht sagen kann) und es gibt die Möglichkeit, durchsichtige Bereiche zu erstellen. Für<br />
diese Transparenzen wirden Alphakanäle genutzt. Grafiken können so z.B. auf jeden farbigen<br />
Hintergrund eingesetzt werden.<br />
Ein kleiner Nachteil ist, das alte Browserversionen ein paar Probleme mit den PNG-Format<br />
haben. Es werden z.B. die Trasparenten Bereiche dann nicht transparent dargestellt. Gilt aber<br />
primär für alte Browser!<br />
Kapitel: Grafiken in Homepages integrieren - wie, was, wo, wie groß<br />
6<br />
6
Animation von Bildern<br />
Die Animation von GIF-Grafiken erfolgt durch Einzelbilder wie bei folgendem<br />
Verkehrszeichen, das von der Bürgerinitiative für animierte Verkehrszeichen BFAZ uns zur<br />
Verfügung gestellt wurde.<br />
Nun die Einzelbilder:<br />
Solche Animationen sind natürlich aufwendiger, da nicht nur 1 Bild benötigt wird, sondern<br />
zahlreiche und wenn man nicht aufpasst, die Dateigröße der Grafik dann heftig groß wird.<br />
Zum erstellen solcher Animationen gibt es zahlreiche Programme. Näheres dazu auf der Seite<br />
über Software<br />
Übertragungsdauer allgemein<br />
Für einen Eindruck der Übertragungszeiten einer Datei (egal ob Homepage, Bild oder beides<br />
zusammen) gebe ich zirka-Werte an. Diese können zusätzlich noch von der Auslastung des<br />
Netztes negativ beeinflusst werden.<br />
Bei einer Dateigröße von 108 KB betragen die Übertragungszeiten je nach Übertragungsart,<br />
also was für eine Modemgeschwindigkeit bzw. ISDN verwendet wird:<br />
Übertragungsgeschwindigkeit Übertragungszeit<br />
14.4k 62.39 Sekunden<br />
28.8k 32.20 Sekunden<br />
56k 17.36 Sekunden<br />
ISDN (128k) 8.79 Sekunden<br />
T1 (1.44 MB) 2.60 Sekunden<br />
Diese Zeiten wurden von der Seite NetMechanic mit dem "LOAD TIME CHECK" ermittelt.<br />
http://www.netmechanic.com<br />
Als Faustgröße für gute Internetseiten gilt: nicht mehr als 60 KB für Text, Hintergrundbild,<br />
Logos und sonstige Bilder zu überschreiten! Ansonsten werden die Übertragungszeiten zu<br />
lang und ungeduldige Surfer sind schon weitergesurft (und zwar auf eine andere Seite - die<br />
treulosen Tomaten).<br />
Kapitel: Grafiken in Homepages integrieren - wie, was, wo, wie groß<br />
6<br />
7
Copyright von Bildern<br />
I. d. R. unterliegen Bilder und Grafiken (auch Bereiche davon) einem Copyright - also jemand<br />
hat die Rechte an dem Werk. Daher sollten Sie, um rechtliche Probleme zu vermeiden,<br />
entweder nur eigene Werke verwenden oder den Copyright-Besitzer fragen, ob er einer<br />
Verwendung auf Ihrer Homepage zustimmt. Am Beispiel des oben verwendeten<br />
Verkehrszeichen war das eine freundliche E-Mail, die ebenso schnell wie freundlich<br />
zurückkam mitsamt der Zusage.<br />
Tipp: Links mit Grafiken<br />
Auch wenn ich kein Freund von Links mit Grafiken bin, da diese oft außer verspielt keinen<br />
Mehrwert bringen und noch den Nachteil der erhöhten Übertragungsdauer haben, möchte ich<br />
die Möglichkeit Ihnen nicht vorenthalten.<br />
Mit dem bisherigen Wissen können Sie das. Kombinieren Sie nur einen Link und eine Grafik<br />
HTML-TAG: Link<br />
BESCHREIBUNG<br />
HTML-TAG: Grafik<br />
<br />
Und als Kombination sieht das ganze dann wie folgt aus:<br />
<br />
<br />
<br />
Das Bild wird also umschlossen von dem Link, und somit kommt der Surfer nach Anklicken<br />
des Bildes auf die Seite, die in dem Link angegeben wurde.<br />
Noch geschickter ist die Variante, wenn Sie die Grafik nicht auf Ihrem Webserver oder<br />
Festplatte haben wollen, diese von der fremden Seite anzugeben (sollte von der fremden<br />
Seiten abgesegnet sein).<br />
<br />
alt="html-seminar.de - jetzt HTML lernen" /><br />
<br />
PS: Über diese Art, einen kleinen Vermerk auf html-seminar.de einzubinden, freue ich mich<br />
prinzipiell. Also nur zu.<br />
Bildmaterial<br />
Folgende Bilder können Lizensfrei für das Probieren mit Bilder für die Homepage genutzt<br />
werden. Ein Link auf (www.html-seminar.de) den Fotografen (mich) wäre nett.<br />
Die Bilder können von der Homepage unter http://www.html-seminar.de/lizensfreiesbildmaterial-zum-testen.htm<br />
heruntergeladen werden - mit der Maus (rechte Maustaste) auf<br />
das Bild klicken und “speichern unter...”<br />
Karren in den Sand gesetzt<br />
Baustop wegen Langzeitstreik<br />
Kapitel: Bildmaterial<br />
6<br />
9
Osterhase unter Bewachung von Katze zur Vermeidung frühzeitiger Auslieferung der<br />
Ostereier<br />
Bilder ausrichten<br />
Ein Text neben einem Bild kann an der oberen Bildkante, in der Mitte und unten ausgerichtet<br />
werden.<br />
Dazu wird der Befehl align="top|bottom|middle" innerhalb des IMG-TAGS verwendet.<br />
• align="top" - Text wird an der oberen Bildkante ausgerichtet (top = oben)<br />
• align="middle" - Text wird mittig zum Bild ausgerichtet (middle = mittig)<br />
• align="bottom" - Text wird an der unteren Bildkante ausgerichtet (bottom = unten)<br />
<br />
a) Schach matt -<br />
<br />
<br />
<br />
b) Schach matt -<br />
<br />
<br />
<br />
c) Schach matt -<br />
<br />
<br />
Und durch die Erweiterung des TAGs durch align sieht das Ganze im Browser wie folgt aus:<br />
Kapitel: Bilder ausrichten<br />
7<br />
0
a) Schach matt -<br />
b) Schach matt -<br />
c) Schach matt -<br />
Kapitel: Bilder ausrichten<br />
7<br />
1
Farben - die Welt ist bunt<br />
HTML-Tags für Farben<br />
Internetseiten leben erst durch Farben. Farben können für die Schrift eingesetzt werden (aber<br />
bitte in Maßen), können den Hintergrund verschönern, in einzelnen Tabellenzellen auftauchen<br />
und die Welt bunt machen.<br />
Um einer Schrift eine Farbe mitzugeben (in diesem Beispiel rot), benötigen Sie folgenden<br />
HTML-TAG: Der HTML-TAG ist veraltet, ist aber zum testen von Farben OK.<br />
Ihr Text <br />
Die Welt ist b u n t<br />
Um dem Hintergrund Farbe mitzugeben, wird im Body-TAG noch der Befehl bgcolor<br />
(background-color) aufgenommen. Zusätzlich kann im Body-TAG noch angegeben werden,<br />
welche Schriftfarbe standardmäßig für das ganze Dokument verwendet werden soll. Dies<br />
geschieht mit dem HTML-TAG "text=" etc. - siehe folgendes Beispiel<br />
Und nun wird es bunt <br />
Anderen Elementen können natürlich auch Farben mitgegeben werden - es gibt für die<br />
meisten Elemente die Möglichkeit, diesen eine Farbe mitzugeben, z.B. bei der Trennlinie bzw. als Hex-Code <br />
Und nun eine rote Trennlinie:<br />
<br />
Und nun eine rote Trennlinie:<br />
Kapitel: Farben - die Welt ist bunt<br />
7<br />
2
Probieren Sie es einmal aus (und machen Sie gleich einen Termin beim Augenarzt Ihrer Wahl<br />
aus).<br />
Farbenmischen<br />
So, nun ist nur noch die Frage, welche Farben einem zur Verfügung stehen und was es mit<br />
den 6 Zahlen bzw. dem F als Farbangabe auf sich hat.<br />
Welche Farben stehen zur Verfügung?<br />
Wie in der Physik gelehrt, kann man fast alle Farben aus den 3 Grundfarben Rot, Grün und<br />
Blau zusammenmischen. Dieses Farbmodell wird oft in der Welt der Computer genutzt - es<br />
heißt RGB-Farbmodell. Dabei steht r für red, g für green und b für (ratet mal :-).<br />
Jede Farbe kann einen Wert zwischen 0 und 255 annehmen. Nimmt man den höchsten Wert,<br />
erhält man die reine Farbe, wie im Beispiel zu sehen ist. So besteht Rot dann aus den Anteilen<br />
255 Rot, 0 Grün und 0 Blau. Weiß ist 255,255,255 und Schwarz das Gegenteil 0,0,0.<br />
Eine Farbe, hier Rot, wird in der Regel wie folgt angegeben.<br />
color="#FF0000"<br />
Kapitel: Farben - die Welt ist bunt<br />
7<br />
3
So, laut der Aussage von vorhin müsste doch eigentlich eine 9stellige Zahl dastehen. Was<br />
macht also hier die 4stellige Zahl mit dem doppelten F?<br />
Damit es nicht zu einfach wird, werden die Werte hexadezimal angegeben. Aber keine Panik -<br />
jedes bessere HTML-Tool unterstützt sie. Beim HTML-Editor können Sie direkt aus den<br />
Farben auswählen und bekommen dann die entsprechende Hexadezimalzahlen.<br />
Dezimal 0 1 2 ... 9 10 11 12 13 14 15 16 17 18 ... 255<br />
Hexadezimal 0 1 2 ... 9 A B C D E F 10 11 12 ... FF<br />
Der Aufbau der Farbnummer ist im Hexadezimalsystem immer wie folgt.<br />
Die andere Art, Farben anzugeben<br />
Farben können auch über ihren englischen Namen angegeben werden. Auch hierbei<br />
unterstützt einen der HTML-Editor. Wenn Sie den Reiter "Colors" anklicken, können Sie im<br />
rechten Pulldownmenü den Punkt "Namen" auswählen. Ab jetzt werden die Farbwerte mit<br />
ihren Namen eingetragen.<br />
Farbpalette<br />
color="silver"<br />
color="red"<br />
color="yellow"<br />
color="fuchsia"<br />
color="gainsboro"<br />
Normalerweise sollten Sie sich nach Möglichkeit immer an das Standard-Schema halten, das<br />
von den Browsern optimal interpretiert wird. Die Standard-Palette wird eingesetzt, weil es<br />
immer Surfer gibt, die auf ihrem Computer nur 256 Farben anzeigen lassen. Für diese Surfer<br />
ist die Standard-Palette konzipiert. Wird diese nicht eingesetzt, werden Farben unter<br />
Umständen aufgerastert und das Ergebnis ist nicht optimal.<br />
Die Standard-Palette bietet 216 Farben. Dabei handelt es sich um bestimmte Farben<br />
(mathematisch sind bei der Standard-Palette die RGB-Farbnummern durch 51 dividierbar).<br />
Um nun nicht mit dem Taschenrechner dasitzen zu müssen, hilft uns wie immer der HTML-<br />
Editor. Stellen Sie bei dem Reiter "Color" das Pulldownmenü auf st216_xxx.bmp<br />
Kapitel: Farben - die Welt ist bunt<br />
7<br />
4
Sie haben dann die folgenden Farben zur Auswahl. Hier sehen Sie alle 216 Standardfarben<br />
und ihre hexadezimale Schreibweise.<br />
Tipp:<br />
Weniger ist mehr - viele Homepages sind zu bunt und zeichnen den Ersteller so durch<br />
schlechten Geschmack aus.<br />
Kapitel: Farben - die Welt ist bunt<br />
7<br />
5
Genug der Farben - sonst treiben wir es noch zu bunt.<br />
kurz & gut:<br />
Wie werden Tabellen erstellt und einzelne Zellen verbunden.<br />
Tabellen - Grundlagen<br />
Wie kam das Design auf Homepages<br />
Sicher haben Sie sich bisher schon gefragt, wie kam das Design früher ohne <strong>CSS</strong> auf<br />
Homepages? - Normalerweise über Tabellen, die unsichtbar sind. Dazu später mehr. Nun<br />
erstmals zu Tabellen, die sichtbar sind und damit einfacher zu verstehen.<br />
Woraus besteht ein Tabellenaufbau?<br />
Tabellen bestehen aus Reihen und Spalten. Diese werden wir nun schrittweise aufbauen (zum<br />
besseren Verständnis) bis hin zur Design-Tabelle<br />
Grundlage ist der HTML-TAG . Damit fängt jede Tabelle an und mit dem<br />
entsprechenden END-TAG hört diese auf. Wichtig ist, dass beide gesetzt werden, da zwar bei<br />
fehlendem END-TAG der IE die halbfertige Tabelle anzeigt, dagegen der Netscape u.U. gar<br />
nichts anzeigt.<br />
<br />
Mit diesem Code passiert noch gar nichts, da weder eine Anzahl der Spalten noch die Anzahl<br />
der Zeilen angegeben wurde.<br />
Als nächsten Schritt legen wir eine Zeile mit an. Das tr steht für engl. table row =<br />
Tabellen Reihe<br />
<br />
Auch jetzt wird noch nichts angezeigt - es fehlen die Tabellendatenzellen - also der HTML-<br />
TAG , das für das engl. table data = Tabellen Daten steht<br />
<br />
Auch jetzt wird noch herzhaft wenig angezeigt, da kein Inhalt da ist. Tragen wir als Inhalt in<br />
unsere Tabelle:<br />
Inhalt 1 <br />
INHALT 1<br />
Kapitel: Tabellen - Grundlagen<br />
7<br />
6
Irgendwie sieht es auch noch nicht anders aus als unsere bisherigen HTML-Seiten - also soll<br />
der Rahmen der Tabelle noch angezeigt werden.<br />
Inhalt 1 <br />
INHALT 1<br />
Und nun kommen noch mehr Spalten in Form von hinzu<br />
Inhalt 1 Inhalt 2 <br />
INHALT 1 INHALT 2<br />
So, das gleiche mit noch mehr Zeilen - beides kann nach Belieben variiert werden.<br />
INHALT ZELLE 1 INHALT ZELLE 2 <br />
INHALT ZELLE 3 INHALT ZELLE 4 <br />
INHALT 1 INHALT 2<br />
INHALT 3 INHALT 4<br />
So sollte ein Tabellenaufbau dann aussehen. Achten Sie auf die Einrückungen, die die<br />
einzelnen Zellen verdeutlichen.<br />
Tipp: Fehler bei Tabellen vermeiden:<br />
Wegen der Übersichtlichkeit und um Probleme zu umgehen, sollte besonders bei Tabellen auf<br />
sauberen Code geachtet werden. Also auf jeden Fall mit Einrückungen zur besseren Übersicht<br />
arbeiten!<br />
Beim Arbeiten mit Tabellen sollten Sie die einzelnen Zellen anfangs am besten<br />
durchnummerieren und beim HTML-TAG table zugleich auch das Attribut border setzen,<br />
also: <br />
Kapitel: Tabellen - Grundlagen<br />
7<br />
7
Tabellenkopf und Fuß<br />
Es kann bei Tabellen der Kopf und der Fuß angelegt werden. Dies hat den Vorteil, dass beim<br />
Ausdruck wenn es einen Seitenumbruch gibt, der Kopf und der Tabellenfuß automatisch auf<br />
jede neue Seite neu gedruckt wird. Soweit die Theorie - in der Praxis sieht es so aus, dass dies<br />
beim Firefox funktioniert, beim IE nicht (auch nicht in der aktuellen Version).<br />
Aufbau der Befehle<br />
<br />
<br />
<br />
Studiengang 1<br />
Studiengang 2<br />
Studiengang 3<br />
<br />
<br />
<br />
<br />
8.6 mio.<br />
12.3 mio.<br />
3.2 mio.<br />
<br />
<br />
<br />
<br />
Stuttgart<br />
Tübingen<br />
Karlsruhe<br />
<br />
<br />
Stuttgart<br />
Tübingen<br />
Karlsruhe<br />
<br />
<br />
<br />
Das Aussehen der Tabelle<br />
Studiengang 1 Studiengang 2 Studiengang 3<br />
8.6 mio. 12.3 mio. 3.2 mio.<br />
Stuttgart Tübingen Karlsruhe<br />
Stuttgart Tübingen Karlsruhe<br />
Kapitel: Tabellenkopf und Fuß<br />
7<br />
8
Tabellen-Zellen miteinander verbinden<br />
Wenn wir nun Tabellenzellen miteinander verbinden möchten, dass z.B. anstatt 3 Zellen nur<br />
eine vorhanden ist, funktioniert das über colspan und rowspan.<br />
Im folgenden Beispiel sollen das Feld A, B, C miteinander verbunden werden, damit nur der<br />
Inhalt von A übrig bleibt.<br />
So sieht normalerweise die Tabelle aus:<br />
A B C<br />
1 2 3<br />
Nun kommt der Befehl colspan zum Einsatz - nachdem wir die Zellen A, B und C verbinden<br />
möchten, also colspan="3"<br />
A B C <br />
1 2 3 <br />
Das hat die Auswirkung:<br />
A B C<br />
1 2 3<br />
Die Zelle B und C werden nach rechts hinausgeschoben, also einfach die entsprechenden <br />
löschen, und gut ist<br />
A 1 <br />
2 3 <br />
A<br />
1 2 3<br />
Kapitel: Tabellen-Zellen miteinander verbinden<br />
7<br />
9
Das gleiche klappt auch in der Vertikalen mit rowspan. Wir wollen anstatt ABC nun B und 2<br />
verbinden.<br />
A B C <br />
1 3 <br />
Und nun haben wir Platz für den Inhalt auf der rechten Seite:<br />
A B C<br />
1 3<br />
Attribute bei Tabellen<br />
Warnung: Diese Seite und die Erklärungen der Attribute für Tabellen werden nur aus<br />
historischen Gründen hier aufgeführt. Design wird normalerweise nicht über Attribute und<br />
Tabellen gemacht, sondern über <strong>CSS</strong> mit DIV und SPAN. Die hier erläuterten Attribute sind<br />
ein veralteter Weg!<br />
Weitere Attribute bei Tabellen<br />
Breite und Höhe der Tabelle<br />
Die Breite wird über width angegeben und die Höhe über height - werden Prozente<br />
angegeben, dann wird die Tabelle abhängig von der Größe des Fensters des Surfers<br />
gezeichnet. Ausprobieren!<br />
A B C 1 3 <br />
Ergibt eine Breite von 80% vom Browserfenster und eine Höhe von 200px.<br />
A<br />
C<br />
B<br />
1 3<br />
Farbe von Tabellenzellen<br />
Die entsprechende Erweiterung der Attribute ist hier bgcolor<br />
Kapitel:<br />
8<br />
0
A<br />
B C <br />
1 3 <br />
A<br />
C<br />
B<br />
1 3<br />
Ausrichtung innerhalb der Zellen<br />
Für die Ausrichtung gibt es auf der Horizontalen:<br />
• - links ist Standard und muss nicht angegeben werden<br />
• - mitte<br />
• - rechts<br />
Für die Ausrichtung gibt es auf der Vertikalen:<br />
• - Ausrichtung oben<br />
• - Ausrichtung mittig<br />
• - Ausrichtung unten<br />
Und das kann natürlich kombiniert werden,<br />
z.B. A - so nun viel Spaß beim<br />
ausprobieren.<br />
Kapitel: Attribute bei Tabellen<br />
8<br />
1
Seiten online stellen - Website publizieren<br />
Und nun zum Wichtigsten: das Publizieren der Website. Nach dem Publizieren kann endlich<br />
die ganze Welt auf den Inhalt zugreifen.<br />
Für diesen Vorgang verwendet man im Regelfall (es geht auch bedeutend umständlicher :-)<br />
eine Software.<br />
Hier finden Sie die Beschreibungen für 3 gängige Programme. Sollten Sie ein anderes FTP-<br />
Programm einsetzen (so nennt sich diese Programmgruppe), ist die Vorgehensweise meist<br />
ähnlich.<br />
Der Composer ist ein Bestandteil von Netscape Navigator. Sollten Sie nicht mit diesem<br />
arbeiten, empfehle ich FileZilla.<br />
• FTP-Upload per FileZilla<br />
• online stellen mit dem Netscape Composer<br />
• online stellen mit WS-FTP 32<br />
Eine weitere Anleitung für WinSCP (das auch sFTP unterstützt) unter http://www.phpkurs.com/winscp-ftp-konfigurieren-und-nutzen.htm<br />
Ganz wichtig ist, dass Sie sich nach dem Onlinestellen alle Seiten im Netz noch mal<br />
anschauen, am allerbesten mit verschiedenen Browsern. Oft fallen Fehler erst dann auf!<br />
Kapitel: Seiten online stellen - Website publizieren<br />
8<br />
2
per Scriptly<br />
Der HTML-Editor Scriptly hat auch ein FTP-Programm integriert. Hier eine kurze Anleitung,<br />
wie dieses eingerichtet und genutzt werden kann.<br />
Und nun die FTP-Daten eintragen.<br />
Kapitel: per Scriptly<br />
8<br />
3
Kapitel: per Scriptly<br />
8<br />
4
Kapitel: per Scriptly<br />
8<br />
5
Filezilla<br />
Dieses FTP-Programm kann sehr viel, bietet eine komfortable Verwaltung von beliebig vielen<br />
ftp-Zugängen und zusätzlich verfügt es über die Möglichkeit einer sicheren Übertragung<br />
per SSL.<br />
Zusätzlich spricht es deutsch und ist Freeware - was will man mehr?<br />
Download<br />
Es kann direkt heruntergeladen werden unter:<br />
http://prdownloads.sourceforge.net/filezilla/FileZilla_2_2_18_setup.exe?download<br />
Allgemeine Informationen erhalten Sie bei Sourceforge unter Filezilla Projekt:<br />
http://sourceforge.net/projects/filezilla/<br />
Dateien übertragen<br />
Nach dem Installieren und starten können Sie direkt die Zugangsdaten eingeben.<br />
Die Zugangsdaten erhalten Sie von Ihrem Provider.<br />
1. Adresse: die ftp-Adresse kann je nach Provider sehr verschiedene Formen haben (z.B.<br />
ftp.html-seminar.de oder auch nur html-seminar.de)<br />
2. Benutzer: der Benutzername<br />
3. Passwort: Kennwort, Passwort<br />
Und zum Schluss auf Verbinden (beschriftet in der Grafik mit 4) klicken<br />
Kapitel: Filezilla<br />
8<br />
6
1. in diesem Bereich sehen Sie die Aktion des ftp-Programmes und ggf. auch die<br />
Fehlermeldungen vom ftp-Server (z.B. wenn Sie ein falsches Passwort eingegeben<br />
haben)<br />
2. in diesem Bereich ist der Inhalt Ihrer Festplatte aufgelistet<br />
3. zeigt die Daten auf dem FTP-Server an (am Anfang eher wenige bis keine)<br />
4. Dateibereich Heim-Festplatte: nach Auswahl des Verzeichnisses erscheinen unter 4<br />
die Daten auf Ihrer Festplatte<br />
5. Bereich - hier werden die zu übertragenden Dateien aufgelistet und abgearbeitet<br />
Kapitel: Filezilla<br />
8<br />
7
Wird nun im Bereich "Dateien Heim-Festplatte" auf eine Datei doppelt geklickt, so erfolgt die<br />
Übertragung der Datei. Die Übertragungsrichtung ist sehr schön im untersten Bereich zu<br />
sehen.<br />
Projekte einrichten<br />
Da man in der Regel nicht bei jedem Übertragen alle Zugangsdaten eintragen möchte, kann<br />
man sich Projekte einrichten.<br />
Klicken Sie auf das erste Symbol in der Menüleiste oben.<br />
Kapitel: Filezilla<br />
8<br />
8
Hier können nun alle Daten für den jeweiligen Zugang eingetragen werden (unter Erweitert<br />
auch der Platz auf der heimischen Festplatte). Wenn möglich kann auch eine sichere SSL-<br />
Verbindung eingerichtet werden. Dadurch wird das Passwort auf dem Übertragungsweg<br />
verschlüsselt und ist durch eine "man-in-the-middle"-Attacke nur schwer auslesbar.<br />
Einige Provider bieten die SSL-Verschlüsselung an (z.B. 1&1). Was also tun? - Einfach<br />
erstmal ohne SSL einrichten, Verbindungsaufbau testen und die verschiedenen SSL-Arten<br />
durchprobieren, bis eine funktioniert.<br />
Ist ein Projekt eingerichtet, erhalten Sie unter dem ersten Menü-Button eine Auswahl -<br />
anklicken und Sie werden verbunden und können Dateien übertragen - so einfach kann die<br />
Welt sein.<br />
Kapitel: Filezilla<br />
8<br />
9
Online stellen auf dem Uni-Server<br />
Dies funktioniert nur für Uniangehörige der Universität Tübingen. Sollten Sie nicht dazu<br />
zählen (was durchaus wahrscheinlich ist), finden Sie auf der Seite online stellen auf<br />
beliebigen Servern die gesuchten Informationen.<br />
Server-Platz für Uni-Angehörige<br />
Und nun zum Wichtigsten: das Publizieren der Website. Nach dem Publizieren kann endlich<br />
die ganze Welt auf den Inhalt zugreifen.<br />
Dazu müssen allerdings zuvor noch einige Arbeiten erledigt werden. Das erste ist der<br />
Serverplatz. Man benötigt einen Provider, der einem Serverplatz zur Verfügung stellt. Im<br />
Ihrem Fall melden Sie an der Uni eine eigene Homepage an.<br />
Näheres dazu unter:<br />
http://www.uni-tuebingen.de/zdv/faq/data/0000007.html<br />
Und zum Anmelden dann unter:<br />
http://www.uni-tuebingen.de/cgi-bin/homepages<br />
Online stellen mit dem Netscape Composer<br />
Nachdem Sie einen Serverplatz haben, müssen Sie im Composer noch einstellen, wie und<br />
wohin er die Seiten übertragen soll.<br />
Kapitel: Online stellen auf dem Uni-Server<br />
9<br />
0
Dabei stellt sich beim Netscape Composer ein kleines Problem, das bei anderen Programmen<br />
nicht auftritt. Das Publikationsziel muss komplett bekannt sein. Bei anderen Programmen, z.<br />
B. WS-FTP32 und Windows Commander 32 ist die URL-Angabe "http://homepages.unituebingen.de/"<br />
ausreichend.<br />
Nicht so beim Netscape Composer - er benötigt den kompletten Pfad. Um den kompletten<br />
Pfad herauszubekommen, gehen Sie in Windows auf den Start-Button, dort auf Ausführen<br />
und geben dort ein:<br />
ftp homepages.uni-tuebingen.de<br />
Jetzt erscheint folgendes Fenster. Alle rot (im Ausdruck hellgrau) markierten Punkte müssen<br />
eingegeben werden. Dazu gehört die Login-ID, die bei Studenten mit zx beginnt und 7-stellig<br />
ist, und das Passwort. Nachdem die Meldung "User logged in" erschienen ist, folgt die<br />
Eingabe "pwd".<br />
Die grün (ausgedruckt hellgrau) markierte Ausgabe, die bei jedem anders ist, ist der Endteil<br />
des Pfades. Dieser wird nach "http://homepages.uni-tuebingen.de/" in der Maske vom<br />
Composer eingegeben.<br />
Jetzt kann publiziert werden. Wurden die Dateien erfolgreich übertragen, erhalten Sie<br />
folgende Meldung.<br />
Herzlichen Glückwunsch - Sie haben der Welt Ihre erste Internetseite zur Verfügung gestellt.<br />
Auf dem Uni-Server finden Sie sich im Normalfall unter der URL<br />
http://homepages.uni-tuebingen.de/student/vorname.familienname/<br />
oder über http://homepages.uni-tuebingen.de/ unter Persönliche Homepages in der<br />
entsprechenden Rubrik.<br />
Tipp: Zum Übertragen der Dateien per FTP gibt es weitaus komfortablere<br />
Software. Näheres finden Sie unter Online stellen mit WS-FTP.<br />
Wichtig: Sie können per FTP und externen Zugang nur innerhalb der Uni-<br />
Kapitel: Online stellen auf dem Uni-Server<br />
9<br />
1
Grenzen arbeiten, wenn Sie nicht über den Proxy-freien Zugang<br />
kommen!! Sollte also Ihr FTP-Programm Probleme machen, könnte<br />
es auch daran liegen. Stellen Sie Ihren externen Zugang um.<br />
Näheres dazu finden Sie in der FAQ auf http://www.unituebingen.de/zdv/<br />
Übertragen von Dateien per WS-FTP auf<br />
einen Server<br />
Nach der Installation von WS-FTP starten Sie das Programm mit einem Doppelklick.<br />
Automatisch erhalten Sie nach dem Start folgenden Bildschirm. Hier können Sie mit dem<br />
Button "New" die Zugangsdaten für den Server und die Internetseite eingeben.<br />
Hier werden jetzt die Zugangsdaten eingetragen:<br />
Kapitel: Übertragen von Dateien per WS-FTP auf einen Server<br />
9<br />
2
• Der Profile-Name dient zu Orientierung für einen selber. Normalerweise wird man<br />
wohl den Namen der Site eingeben.<br />
• Host Name/Adresse: Der Name des ftp-Servers. Diese Daten werden vom Provider<br />
vergeben/zugeteilt. Bei kostenlosem Serverplatz findet man die Zugangsdaten<br />
normalerweise in den FAQs (beschrieben). Teilweise werden die Zugangsdaten auch<br />
per E-Mail zugesandt.<br />
(für die Uni-Tübingen ist es "homepages.uni-tuebingen.de")<br />
• Host Type: Automatic detect eingestellt lassen<br />
• User ID: siehe Host Name/Adresse<br />
(für die Uni-Tübingen finden Sie dies auf Ihrem Passwortausdruck unter Login-ID)<br />
• Password: siehe Host Name/Adresse<br />
(für die Uni-Tübingen finden Sie dies auf Ihrem Passwortausdruck unter Passwort)<br />
Das Abspeichern des Passwortes ist aus Sicherheitsgründen nicht zu empfehlen. Das Passwort<br />
wird zwar verschlüsselt auf der Festplatte abgespeichert, aber es gibt bereits Software zum<br />
Entschlüsseln dieser Daten. Wenn Sie also Wert auf Sicherheit legen, nutzen Sie Ihr<br />
Gedächtnis und tippen das Passwort lieber jedes Mal neu ein.<br />
Für den Verbindungsaufbau sollten Sie bereits "online" sein. Jetzt den Button "OK" drücken.<br />
Das Programm versucht nun, sich mit dem Server zu verbinden.<br />
Kapitel: Übertragen von Dateien per WS-FTP auf einen Server<br />
9<br />
3
Sie sehen jetzt auf der rechten Seite die Daten auf dem entfernten Server und links Ihre<br />
Festplatte. Bevor Sie übertragen, sollten Sie den Übertragungsmodus auf "Auto" schalten!<br />
Die Einstiegsseite der Homepage wird im Regelfall immer entweder index.html oder<br />
index.htm heißen!<br />
Kapitel: Übertragen von Dateien per WS-FTP auf einen Server<br />
9<br />
4
Zum Übertragen einer Datei markieren Sie diese z. B. im Fenster von der eigenen Festplatte<br />
und klicken auf den in der Mitte zu findenden Pfeil, der auf das andere Fenster zeigt. Dann<br />
werden die markierten Dateien übertragen.<br />
Um die Verbindung zu beenden, klicken Sie links unten auf den Button "Close".<br />
Um die Verbindung wieder aufzubauen, klicken Sie links unten auf den Button "Connect".<br />
Dazu müssen Sie bereits online sein.<br />
Kapitel: Übertragen von Dateien per WS-FTP auf einen Server<br />
9<br />
5
Kapitel: Übertragen von Dateien per WS-FTP auf einen Server<br />
9<br />
6
HTML-Tags im Überblick<br />
Als Download gibt es die XHTML und <strong>CSS</strong> Kurzreferenz im PDF-Format.<br />
Inhalt:<br />
• Allgemeines<br />
• Schriftattribute<br />
• Schriftgrößen<br />
• Absatzaufbau<br />
• Aufzählungen<br />
• Verweise [Links]<br />
• Html-Farben<br />
Die Kurzreferenz listet die wichtigsten Tags auf. Dabei wurden die Befehle thematisch<br />
sortiert. Die Auflistung ist das Grundhandwerkszeug und erhebt keinen Anspruch auf<br />
Vollständigkeit. So sind bewusst auch alle browserspezifischen und nicht allgemein<br />
unterstützten HTML-Befehle nicht mit aufgenommen.<br />
Die Auflistung ist wie folgt aufgebaut.<br />
1. Spalte: HTML-Tag<br />
2. Spalte: zusätzliche Angaben (Attribute), die wichtig sind, werden aufgeführt - das<br />
Standardattribut ist fett dargestellt und muss nicht angegeben werden.<br />
3. Spalte: Bedeutung<br />
mit (e) wird erklärt, welche englische Abkürzung dahinter steckt - so kann man sich<br />
die Teile besser merken :-)<br />
4. Spalte: End-Tag<br />
In hellgrau sind die HTML-TAGs und Attribute markiert, die veraltet sind und nicht mehr<br />
genutzt werden sollten. Diese werden durch die entsprechenden <strong>CSS</strong>-Auszeichnungen<br />
gemacht.<br />
Kapitel: HTML-Tags im Überblick<br />
9<br />
7
HTML-Tag Attribute End-Tag Bedeutung<br />
Allgemeines<br />
Damit können ganze Passagen ausgeklammert<br />
werden und werden vom Browser nicht mehr<br />
angezeigt. Sehr schöne Möglichkeit, um Dinge<br />
auszuprobieren!!!<br />
So werden Kommentare im HTML-Code vermerkt,<br />
die auf der im Browser angezeigten Seite nicht<br />
sichtbar, aber beim Erstellen und Erweitern<br />
hilfreich sind.<br />
Damit können Trennlinien eingezogen werden.<br />
Farbe, Länge und Stärke können bestimmt<br />
werden.<br />
(e: hr = horizontal ruler = horizontale Linie)<br />
Anfang und Ende des HTML-Codes. Ihre neue<br />
Spielwiese :-)<br />
(e: html=hypertext markup language)<br />
Der Kopfbereich, in dem allgemeine Angaben<br />
gemacht werden, die nicht im Browserfenster<br />
angezeigt werden.<br />
(e: head=kopf)<br />
ab hier kommt unser eigentlicher Inhalt, der im<br />
Gegensatz zum head-Bereich im Browserfenster<br />
angezeigt wird.<br />
(e: body=Körper)<br />
Wichtig! Titel hat mehrere wichtige Funktionen:<br />
- Titelzeile des Anzeigefensters<br />
- Namen von gesetzten Lesenzeichen/Bookmarks<br />
- Liste der bereits besuchten Seiten<br />
- und für die Eintragung bei Suchmaschinen<br />
(e: title=Titel)<br />
HTML-<br />
Tag<br />
Attribute End-Tag Bedeutung<br />
Schrift wird fett angezeigt<br />
(e: b=bold=fett)<br />
kursive Schrift<br />
(e: i=italic)<br />
Schriftattribute<br />
unterstrichene Schrift - sehr mit Vorsicht zu<br />
genießen,<br />
da der Surfer bei unterstrichenen Passagen von Links<br />
ausgeht!<br />
(e: u=underlined=unterstrichen)<br />
hochgestellte Schrift, z.B. 0 C<br />
Kapitel: HTML-Tags im Überblick<br />
9<br />
8
(e: sup=superscript, zu deutsch etwa Hochstellung)<br />
tiefgestellte Schrift, z.B. H2O<br />
(e: sub=subscript, zu deutsch ungefaehr Tiefstellung)<br />
bewirkt Schrift mit gleichen Abständen<br />
(dicktengleich)<br />
(e: tt=teletyper=Fernschreiber)<br />
HTML-Tag Attribute End-Tag Bedeutung<br />
..<br />
<br />
"V 4.1" geschickt ist.<br />
(e: nobr=nobreak=kein<br />
Umbruch)<br />
Hiermit können Zitate<br />
aufgenommen werden. Tag<br />
verhält sich wie Absatztag,<br />
wobei das aussehen vom<br />
Browser definiert wird!<br />
Meistens eingerückt, auf jeden<br />
Fall anders formatiert wie<br />
Rest.<br />
(e: blockquote=geblocktes<br />
Zitat)<br />
HTML-<br />
Tag<br />
Attribute End-Tag Bedeutung<br />
Aufzählungen<br />
Bei allen Aufzählungen (nächste 2 Punkte)<br />
müssen die Einzelpunkte durch diesen Tag<br />
gekennzeichnet sein.<br />
(e: li = list item = Listeneintrag )<br />
Leitet eine Aufzählugsliste ein. Wie der<br />
Spiegelstrich dargestellt wird, bestimmt der<br />
WWW-Browser. (weiteres siehe TAG !)<br />
(e: ul=unordered list=unsortierte Liste)<br />
<br />
start="1"<br />
type="I"><br />
start="1"<br />
type="i"><br />
start="1"<br />
type="A"><br />
start="1"<br />
type="a"><br />
HTML-<br />
Tag<br />
Leitet eine nummerierte Liste ein - Attribut ist<br />
erforderlich!<br />
start="1" - aber welcher Einheit gestartet<br />
werden soll<br />
type="1" - für numerische Liste<br />
type="I" - Liste mit römischen Ziffern<br />
type="i" - Liste mit kleinen römischen Ziffern<br />
type="A" - Liste mit Buchstaben<br />
type="a" - Liste mit kleinen Buchstaben<br />
(e: ol=ordered list=numerierte Liste)<br />
Attribute End-<br />
Tag<br />
Ihre<br />
Beschreibung dazu<br />
Verweise [Links]<br />
Bedeutung<br />
für interne & externe Linkes. "Ihre<br />
Beschreibung" wird später im<br />
Browser als so genannter Link<br />
angezeigt und kann angeklickt<br />
werden.<br />
(e: a=anchor=Anker)<br />
(e: href=hyper<br />
Kapitel: HTML-Tags im Überblick<br />
1<br />
0<br />
0
interner Link<br />
externe Link<br />
<br />
reference=Hypertext-Referenz<br />
für externen Link wird neue<br />
Browserinstanz aufgemacht.<br />
Sprung nach xy Sprungmarke (wird durch #<br />
gekennzeichnet) zu einem<br />
bestimmten Punkt, hier "xy". Der<br />
Punkt muss definiert werden -<br />
dazu nächsten Tag anschauen.<br />
irgendwas dieser Punkt, hier "xy", soll direkt<br />
anspringbar sein. "irgendwas"<br />
darf nicht leer bleiben,.<br />
<br />
axl@uxl.de<br />
HTML-<br />
Tag<br />
Attribute End-Tag Bedeutung<br />
So kann eine E-Mail-Adresse<br />
eingegeben werden. Durch<br />
anklicken öffnet sich das E-Mail-<br />
Prg. (sofern installiert) und die E-<br />
Mail-Adresse ist bereits<br />
eingegeben.<br />
(e: mailto= schicke nach<br />
Farben in HTML<br />
Hintergrundfarbe der ganzen Seite<br />
farbiges Farbe der Schrift<br />
Hintergrundfarbe Tabellen<br />
Hintergrundfarbe Tabellenzelle (geht<br />
auch für Tabellenzeile bei )<br />
Farben werden in HTML als sechsstellige Hex-Zahl notiert, es gibt jedoch auch eine Reihe festgelegter Namen,<br />
die man stattdessen benutzen kann<br />
Farbnamen Hex + Farbe<br />
black #000000<br />
maroon #800000<br />
green #008000<br />
olive #808000<br />
navy #000080<br />
purple #800080<br />
teal #008080<br />
gray #808080<br />
silver #c0c0c0<br />
Kapitel: HTML-Tags im Überblick<br />
1<br />
0<br />
1
ed #FF0000<br />
lime #00FF00<br />
yellow #FFFF00<br />
blue #0000FF<br />
fuchsia #FF00FF<br />
aqua #00FFFF<br />
white #FFFFFF<br />
Kapitel:<br />
1<br />
0<br />
2
Cascade Style Sheets (<strong>CSS</strong>)<br />
Entstehung von <strong>CSS</strong><br />
Das World Wide Web Consortium (W3C) entwickelte <strong>CSS</strong>, um zum ursprünglichen<br />
Grundgedanken von HTML zurückzukehren: die Trennung der Informationen von der<br />
Präsentation. Ohne <strong>CSS</strong> ist HTML für Inhalt, Struktur und Aussehen zuständig. Ein<br />
aufgeblähter und unübersichtlicher Code entsteht.<br />
Mit <strong>CSS</strong> ist HTML hauptsächlich mit der Struktur eines Dokumentes beschäftigt, <strong>CSS</strong><br />
dagegen ist für das Aussehen verantwortlich.<br />
Über <strong>CSS</strong> kann eine wesentlich schlankere Seite (Downloadzeiten) in kürzerer Zeit (warum<br />
irgend etwas doppelt angeben?) erstellt werden - und das für alle Einzelseiten einer<br />
Homepage. Änderungen am Design sind innerhalb kürzester Zeit erledigt. Wer nicht <strong>CSS</strong><br />
nutzt, ist selber schuld!<br />
Vor- und Nachteile von <strong>CSS</strong><br />
• Größere Layoutmöglichkeiten:<br />
Das Design ist konsistent zwischen den Browser (siehe unten).<br />
• Kürzere Zeiten<br />
zur Erstellung und Pflege von Homepages: Von einer einzigen Datei aus kann ein<br />
komplettes Homepage-Design erstellt und bei Bedarf geändert werden.<br />
• Schnellere Übertragung:<br />
<strong>CSS</strong> macht zahlreiche HTML-Wiederholungen überflüssig. Weniger Code bedeutet<br />
schnelleren Download.<br />
• Homepage funktioniert auch noch bei alten Browsern:<br />
Auch bei Browsern, die <strong>CSS</strong> nicht unterstützen, wird die Homepage noch angezeigt<br />
(allerdings dann ohne <strong>CSS</strong>-Design).<br />
• Unterschiedliche Unterstützung durch Browser:<br />
Größter Nachteil ist die teilweise uneinheitliche Unterstützung durch Browser.<br />
Deshalb sollten nicht alle <strong>CSS</strong>-Definitionen eingesetzt werden.<br />
Schneller, schöner Formatieren mit <strong>CSS</strong><br />
Über <strong>CSS</strong> können die Formatierungen einfach und elegant vorgenommen werden. So können<br />
z. B. Schriftattribute wie Farbe, Schriftart und Abstände bequem eingestellt werden. <strong>CSS</strong> sind<br />
vergleichbar mit den Formatvorlagen bei Word.<br />
Das Besondere an <strong>CSS</strong> ist, dass diese "Formatierungen" durch Auslagerung dann einfach für<br />
alle Seiten einer Homepage gelten. Dementsprechend werden Änderungen nur noch an einer<br />
Kapitel: Cascade Style Sheets (<strong>CSS</strong>)<br />
1<br />
0<br />
3
zentralen Stelle durchgeführt und können auf alle Seiten einer Homepage Auswirkungen<br />
haben (wird erst weiter hinten gezeigt).<br />
<strong>CSS</strong> ist in der Version 1 so weit verbreitet, dass es problemlos eingesetzt werden kann. Das<br />
Besondere an <strong>CSS</strong> ist, dass Browser, die kein <strong>CSS</strong> kennen, absolut kein Problem mit <strong>CSS</strong><br />
haben. Alte Browser ignorieren <strong>CSS</strong> einfach und der Seitenaufbau funktioniert trotzdem. <strong>CSS</strong><br />
greift nicht in die HTML-Befehle ein, sondern wird darüber gelegt.<br />
Trennung Inhalt und Design durch <strong>CSS</strong><br />
Ein extrem großer Vorteil von CCS ist die Trennung des eigentlichen Inhalts vom Design.<br />
Das Design wird in eine eigene Datei ausgelagert und kann für alle Seiten eines<br />
Internetauftritts verwendet werden. Werden Änderungen am Design gemacht, sind durch eine<br />
Datei sofort alle Einzelseiten uptodate<br />
Eine Seite - viele Gesichter<br />
An folgendem Beispiel soll gezeigt werden, das eine inhaltlich identische Seite vollständig<br />
unterschiedlich aussehen kann.<br />
Das Zusammenspiel von <strong>CSS</strong> und HTML-Tags in den folgenden Kapiteln<br />
Beispiel: identische Inhalt und anderes Design <strong>CSS</strong>Zengarden http://www.csszengarden.com/<br />
Kapitel: Trennung Inhalt und Design durch <strong>CSS</strong><br />
1<br />
0<br />
4
Aufbau von <strong>CSS</strong> Befehlen<br />
Grundlagen des <strong>CSS</strong> Konzept<br />
<strong>CSS</strong> ist einfacher als im Allgemeinen angenommen. Es gibt nur ein paar grundlegende Regeln<br />
zum Erfolg mit <strong>CSS</strong>:<br />
Aufbau<br />
Selektor Deklaration<br />
Beispiel: h1 {color: red}<br />
Zusammenhang:<br />
Selektor - darauf bezieht sich der<br />
zweite Teil, die Deklaration in den<br />
geschweiften Klammern { ... }<br />
Im Beispiel oben werden alle Überschriften h1 nun die Farbe rot bekommen.<br />
Eigenschaften und Werte<br />
Die Vereinbarung (Deklaration) besteht aus zwei Teilen:<br />
• dem Eigenschaftsteil, wie z. B. Farbe, Größe, und<br />
• der dazugehörige Wert, wie rot(Farbe) oder 30 (Größe).<br />
TAG {Eigenschaft: Wert}<br />
TIPP: Immer die geschwungenen Klammern beachten!<br />
Begriffe um <strong>CSS</strong><br />
Vererbung<br />
Vereinbarung<br />
(Declaration), wie was<br />
aussehen soll.<br />
Die Deklarationen können vererbt werden. Wird z. B. für das -TAG die Farbe per<br />
<strong>CSS</strong> bestimmt, hat der -TAG automatisch die gleiche Farbe, wenn diese dort nicht<br />
definiert ist.<br />
Cascade:<br />
Es kann mehrere Style Sheets geben, die auch konkurrierend sein können. Wer dann jeweils<br />
"gewinnt", hängt von verschiedenen Regeln ab. Das gehört aber zu den Techniken für<br />
Fortgeschrittene. So kann z. B. auch ein Design extra für den Ausdruck definiert werden.<br />
Kapitel: Aufbau von <strong>CSS</strong> Befehlen<br />
1<br />
0<br />
5
Stylesheets in HTML einbinden<br />
Es gibt mehrer Möglichkeiten - zum erlernen sind die ersten 2 Verfahren geschickt. Dort sind<br />
die <strong>CSS</strong> direkt in der HTML-Datei. Für die Entwicklung von Websites dann empfiehlt sich<br />
die 3 Variante. Dort werden die <strong>CSS</strong> in einer externen Datei hinterlegt und diese Datei wird<br />
dann in jede HTML-Seite eingebunden.<br />
Variante 1: Befehl direkt im Quellcode<br />
Direkt im Quellcode wirkt der Befehl nur an dieser bestimmten Stelle der Seite, so dass man<br />
abweichende Designs verwenden kann.<br />
Beispiel:<br />
Überschrift<br />
Alle Buchstaben bis zum Ende von werden jeweils mit einem Abstand von 30<br />
zwischen den Buchstaben dargestellt.<br />
Natürlich können die Befehle auch kombiniert werden.<br />
Zusätzlich zur Buchstabenbreite kommt jetzt noch eine andere Farbe hinzu:<br />
Überschrift<br />
Hier ist natürlich die Frage berechtigt, warum nicht gleich mit den gewohnten HTML<br />
Befehlen? Die Logik der Sache wird klar, wenn man diese Formatdefinitionen auslagert<br />
(siehe Variante 3 unten). Dadurch kann dann z. B. eine Einstellung erstellt werden, die dann<br />
für alle gelten, ohne dass speziell noch in den HTML-TAG eingegriffen werden muss.<br />
Variante 2: Am Anfang der HTML-Datei<br />
Im Kopfbereich der HTML-Datei werden die <strong>CSS</strong>-Eigenschaften definiert. Diese wirken dann<br />
auf das ganze HTML-Dokument<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
jetzt HTML lernen mit <strong>CSS</strong><br />
<br />
<br />
Kapitel: Stylesheets in HTML einbinden<br />
1<br />
0<br />
6
Variante 3: Auslagern von <strong>CSS</strong>-Befehlen<br />
Zum Auslagern werden 2 Dinge benötigt. Als erstes eine neue Datei, ich nenne diese<br />
design.css (kann aber auch beliebig anders heißen) und als zweites einen Verweis darauf in<br />
der HTML-Datei, die diese ausgelagerte Datei nutzen soll.<br />
Verweis in der HTML-Datei:<br />
Dieser Verweis sollte im head-Bereich eingegeben werden.<br />
<br />
So, nun erstellen wir eine neue Datei mit dem Namen "design.css".<br />
Inhalt:<br />
h1 {<br />
color:red;<br />
letter-spacing:30;<br />
}<br />
Unbedingt auf Leerzeichen achten, und als Klammern kommen hier die geschweiften zum<br />
Zuge!! So, Datei abspeichern und im HTML Editor zurück zur ursprünglichen Internetseite.<br />
Kapitel: Stylesheets in HTML einbinden<br />
1<br />
0<br />
7
kurz & gut:<br />
<strong>CSS</strong> angewendet - Einstieg in Design über <strong>CSS</strong>.<br />
Anhand einfacher Beispiele wird die Grundlage geschaffen.<br />
<strong>CSS</strong>-Anwendung einfach gemacht<br />
Anhand von den verschiedenen Elementen wollen wir das Zuweisen von Design über <strong>CSS</strong><br />
zeigen. Im ersten Beispiel wird der Überschrift h1 die Größe 28pt, die Farbe Orange und die<br />
Schriftart Arial zugewiesen.<br />
Farbe und Schriftartgestaltung über <strong>CSS</strong><br />
Für die Gestaltung der Schrift werden folgende <strong>CSS</strong>-Befehle benötigt:<br />
color:#FF9F00;<br />
Farbe: orange, kann entweder als Hex-Wert:"#FF9F00" oder als Farbnamen<br />
angegeben werden: "orange", also "color:orange;" - die Farbnamen sind immer auf<br />
Englisch!<br />
font-size:28pt;<br />
Schriftgröße: hier als 28pt, kann auch relativ in EM angegeben werden<br />
font-family:arial, "lucida console", sans-serif;<br />
Schriftart: wenn vorhanden Arial, wenn nicht vorhanden, dann "lucida console" und<br />
wenn diese nicht vorhanden, dann eine vorhandene serifenlose Schrift<br />
Schriften mit Serifen (Standfüßchen)<br />
font-family:courier, serif;<br />
<br />
<br />
<br />
wichtigste Überschrift h1<br />
Und nun ein normaler Absatz<br />
Überschrift h2<br />
Und nun ein normaler Absatz<br />
Überschrift h2<br />
Noch ein normaler Absatz<br />
Kapitel: <strong>CSS</strong>-Anwendung einfach gemacht<br />
1<br />
0<br />
8
Ausgabe:<br />
Kapitel: <strong>CSS</strong>-Anwendung einfach gemacht<br />
1<br />
0<br />
9
Weitere Definitionen, die sich auf Schriften auswirken<br />
font-weight:bold;<br />
Die Schriftstärke, zur Auswahl stehen normal|bold|bolder|lighter<br />
font-style:italic;<br />
Anzeige der Schrift (kurz ob kursiv oder normal)<br />
italic = kursive<br />
oblique = schräggestellt<br />
normal = normal<br />
text-indent:1.5em;<br />
Einrückung der ersten Zeile eines Textblockes um den vorgegebenen Abstand<br />
Aufgabe:<br />
Gestalten Sie normale Absätze () mit folgenden Eigenschaften:<br />
• Farbe: dunkles Violett<br />
• Schriftstärke: fett<br />
• Schriftschnitt: kursiv<br />
• Texteinrückung der ersten Zeile: 1.5em;<br />
Die Ausgabe sollte ungefähr folgendes Bild haben:<br />
An diesem Beispiel ist schön zu sehen, dass durch einmalige Definition alle Absätze einer<br />
Seite das gleiche Design haben.<br />
Kapitel: <strong>CSS</strong>-Anwendung einfach gemacht<br />
1<br />
1<br />
0
Schrift und Abstände<br />
line-height:2em;<br />
Zeilenhöhe bestimmen, wenn der Text mehrzeilig angezeigt wird - dabei ist ratsam,<br />
das Ganze relativ zur Schriftgröße anzugeben, also in EM<br />
letter-spacing:0.3em;<br />
Abstände zwischen den einzelnen Buchstaben - sollte relativ angegeben werden, also<br />
in EM<br />
word-spacing:0.5em;<br />
Abstände zwischen den einzelnen Wörtern - sollte relativ angegeben werden, also in<br />
EM<br />
Aufgabe<br />
Bitte Überschrift 2 () mit folgendem Design:<br />
• Farbe: rostbraun<br />
• Zeilenhöhe: 2em<br />
• Abstände zwischen den einzelnen Buchstaben: 0.3em<br />
• Abstände zwischen den einzelnen Wörtern: 3.5em<br />
und für Absätze:<br />
• Zeilenhöhe: 2em<br />
• Abstände zwischen den einzelnen Buchstaben: 0.3em<br />
Kapitel: <strong>CSS</strong>-Anwendung einfach gemacht<br />
1<br />
1<br />
1
Anmerkung: An diesem Beispiel ist die Auswirkung des Zeilenabstands erst beim<br />
mehrzeiligen Text zu sehen.<br />
Farbe: Vordergrund- und Hintergrundfarbe<br />
color:#FF9F00;<br />
Farbe für Vordergrund - angewendet auf Schrift ist dies die Farbe der Schrift. Kann<br />
entweder als Hex-Wert:"#FF9F00" oder als Farbnamen angegeben werden: "orange"<br />
background-color:#FF00FF<br />
Farbe für den Hintergrundbereich; auch diese als Hex-Wert oder Farbnamen.<br />
Aufgabe:<br />
Hintergrundfarben für:<br />
• h1 - #FF00FF;<br />
• h2 - lightgrey;<br />
• p - yellow;<br />
Kapitel: <strong>CSS</strong>-Anwendung einfach gemacht<br />
1<br />
1<br />
2
Rahmen<br />
border-color:#00FFFF;<br />
Rahmenfarbe - soll nur ein Teil des Rahmens gefärbt werden, dann:<br />
border-top-color, border-right-color, border-bottom-color und border-left-color<br />
border-width:4px;<br />
Rahmenstärke in Pixel<br />
soll nur ein Bereich geändert werden:<br />
border-top-width, border-right-width, border-bottom-width und border-left-width<br />
border-style: dotted;<br />
Rahmenart bestimmen - folgende Möglichkeiten gibt es:<br />
solid = durchgezogen<br />
double = doppelt<br />
none = kein Rahmen (unsichtbar)<br />
hidden = kein Rahmen (unsichtbar)<br />
dotted = gepunktet<br />
dashed = gestrichelt<br />
groove = 3D-Effekt<br />
ridge = 3D-Effekt<br />
inset = 3D-Effekt<br />
outset = 3D-Effekt<br />
Soll nur ein Teil des Rahmen definiert werden, dann:<br />
border-top-style, border-right-style, border-bottom-style und border-left-style<br />
Aufgabe: Design für Rahmen für<br />
• h1 - Farbe lila, Breite 1px und solid<br />
• h2 - hellgrau, nur links und oben mit Rahmenstärke von 10px und solid<br />
• p - Schrift schwarz, unten und rechts gepunktet orange<br />
Kapitel: <strong>CSS</strong>-Anwendung einfach gemacht<br />
1<br />
1<br />
3
Ausrichtung von Elementen<br />
text-align:right;<br />
Ausrichtung von Text, möglich sind: left|center|right|justify<br />
left = linksbündig ausgerichtet (Standard)<br />
center = zentriert ausgerichtet<br />
right = rechtsbündig ausgerichtet<br />
justify = als Blocksatz ausgerichtet<br />
vertical-align:top;<br />
über "vertical-align:" kann die vertikale Ausrichtung bestimmen werden. Möglich<br />
sind:<br />
top = obenbündig<br />
middle = mittig<br />
bottom = untenbündig<br />
baseline = ausrichten an Basislinie falls vorhanden, ansonsten unten bündig<br />
sub = tieferstellen (ohne Änderung der Schriftgröße)<br />
super = höherstellen (ohne Änderung der Schriftgröße)<br />
text-top = am oberen Schriftrand<br />
text-bottom = am unteren Schriftrand<br />
Aufgabe:<br />
• h1 - Textausrichtung rechts und Hintergrundfarbe lightskyblue<br />
• h2 - Textausrichtung zentriert, Schriftfarbe weiß, Hintergrundfarbe limegreen<br />
Kapitel: <strong>CSS</strong>-Anwendung einfach gemacht<br />
1<br />
1<br />
4
Grafik und Bilder<br />
background-image: url("hintergrund.jpg");<br />
Für das Element wird ein Hintergrundbild geladen und in der Größe des Elements<br />
angezeigt<br />
background-repeat:no-repeat;<br />
Verhaltensweise des Bilds - ob es nur einmal angezeigt wird oder wiederholt -<br />
folgende Werte sind möglich:<br />
repeat = wiederholen (Standard)<br />
repeat-y = nur in Y-Richtung, also senkrecht wiederholen<br />
repeat-x = nur in X-Richtung, also waagerecht wiederholen<br />
no-repeat = nicht wiederholen, nur einmal anzeigen<br />
background-attachment:fixed;<br />
Wasserzeicheneffekt - Bild bleibt trotz Scrollen stehen - mögliche Werte:<br />
scroll = mitscrollen (Standard)<br />
fixed = Hintergrundbild bleibt fixiert<br />
background-position:right;<br />
Ausrichtung des Bilds, mögliche Werte:<br />
top = vertikal oben<br />
bottom = vertikal unten<br />
center = zentriert (horizontal wie vertikal)<br />
left = horizontal links<br />
right = horizontal rechts<br />
Anmerkung: vertikal und Horizontal kann auch vermengt werden, z.B. soll es rechts<br />
oben sitzen: background-position:right top;<br />
Beispiel:<br />
Kapitel: <strong>CSS</strong>-Anwendung einfach gemacht<br />
1<br />
1<br />
5
spezielleres<br />
white-space:nowrap;<br />
in bestimmten Fällen ist es notwendig, dass kein automatischer (willkürlicher<br />
Umbruch) im ausgegeben Text stattfindet. Dies kann über die white-space: beeinflusst<br />
werden.<br />
normal = Zeilenumbruch automatisch (nur nicht bei HTML-Tags und<br />
)<br />
pre = Zeilenumbruch wie vorgegeben<br />
nowrap = kein Zeilenumbruch - Umbruch benötigt HTML-Tag<br />
text-transform:<br />
eine automatisierte Umsetzung des Textes während der Anzeige. Mögliche Werte:<br />
capitalize = alle Wortanfänge als Großbuchstaben<br />
uppercase = nur Großbuchstaben<br />
lowercase = nur Kleinbuchstaben<br />
none = normal (Standard)<br />
Kurzschreibweisen<br />
Für viele <strong>CSS</strong>-Elemente gibt es Kurzschreibweisen, durch die eine schnellere Zuweisung<br />
erfolgen kann - inwieweit das für Einsteiger zum einfachen lernen und der Übersichtlichkeit<br />
hilft, muss jeder selber entscheiden:)<br />
border: 1px dotted #ffee66;<br />
Rahmen: Stärke, Art des Rahmentyps und Farbe<br />
border-width:4px 10px;<br />
Es können sofort die Rahmenstärken für oben/unten (im Beispiel 4px) und rechts/links<br />
angegeben werden<br />
Die kann auch für alle 4 Seiten erfolgen, wobei die Lesweise oben im Uhrzeiger sind<br />
beginnt: Beispiel "border-width:4px 10px 6px 7px;" bedeutet, das oben 4 Pixel, rechts<br />
10 Pixel, unten 6 Pixel und links 7 Pixel Rahmenstärke vergeben werden.<br />
font: 100.01% #FF9F00 Arial,Verdana,sans-serif;<br />
In der Kurzschreibweise können die Font-Definitionen abkürzen werden, möglich<br />
sind:<br />
'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' und 'font-family'<br />
Beispiel: "font: normal small-caps 120%/80% courier;"<br />
in langer Form ausgeschrieben wäre das: font-style: normal; font-variant: small-caps;<br />
font-size: 120%; line-height: 80%; font-family: courier;<br />
Unter-, Durchstreichungen und Co<br />
text-decoration:line-through;<br />
Mögliche Werte der "Dekoration" des Textes (wird gerne genutzt bei Links<br />
none = normal (keine Text-Dekoration)<br />
underline = unterstrichen<br />
Kapitel: <strong>CSS</strong>-Anwendung einfach gemacht<br />
1<br />
1<br />
6
overline = überstrichen<br />
line-through = durchgestrichen<br />
kurz & gut:<br />
Grundlagen für das Design einer Website über <strong>CSS</strong> - das Box-Modell liefert das<br />
Grundverständnis.<br />
Über dieses werden z. B. Farben und Abstände definiert.<br />
Kapitel: <strong>CSS</strong>-Anwendung einfach gemacht<br />
1<br />
1<br />
7
Box-Modell bei <strong>CSS</strong><br />
Für jedes Element wird eine rechteckige Fläche in <strong>CSS</strong> reserviert. Der englische Begriff<br />
"Box" steht für Schachtel (in unserem Fall, da html-Seiten ja eher in 2 Dimensionen leben,<br />
also eine Fläche). Über das Box-Modell wird das Design einer Seite erstellt, daher ist ein<br />
Verständnis diese Box-Modells wichtig.<br />
Wie sieht der Aufbau der "Box" aus?<br />
Von Innen nach außen:<br />
• Inhalt: für den Inhalt kann eine Breite (width) und eine Höhe (height) definiert werden<br />
• Innenabstand: definiert den Platz zwischen Inhalt und Rahmen<br />
• Rahmen: dem Rahmen kann eine Stärke mitgegeben werden, die Strichart und eine<br />
Farbe (auch der Rahmen unsichtbar sein)<br />
• Außenabstand: Abstand zu anderen Elementen<br />
Zur Veranschaulichung einfach die verschiedene Bespiele für die Anwendung des<br />
Boxmodells ansehen.<br />
Kapitel: Box-Modell bei <strong>CSS</strong><br />
1<br />
1<br />
8
Beispiele für die Anwendung des Box-<br />
Modells<br />
Farben für die einzelnen Bereiche<br />
• Inhaltsbereich ist GELB<br />
• Rand grün<br />
Probieren Sie die einzelnen HTML-<strong>CSS</strong> Beispiele:<br />
<br />
INHALT<br />
<br />
width: 400px;<br />
height: 100px;<br />
width: 400px; height: 100px;<br />
<br />
INHALT<br />
<br />
width: 50%;<br />
height: 50px;<br />
width: 50%; height: 50px;<br />
<br />
INHALT<br />
width:350px;<br />
height:50px;<br />
border:3px green solid<br />
Kapitel: Beispiele für die Anwendung des Box-Modells<br />
1<br />
1<br />
9
width: 350px;<br />
height: 50px;<br />
border: 3px green solid;<br />
<br />
INHALT<br />
<br />
width:400px;<br />
height:100px;<br />
padding: 10px;<br />
width: 400px;<br />
height: 100px;<br />
padding: 10px;<br />
border: 3px green solid;<br />
border:3px green solid<br />
<br />
INHALT<br />
<br />
width:400px;<br />
height:100px;<br />
padding: 10px;<br />
margin: 15px;<br />
width: 400px;<br />
height: 100px;<br />
padding: 10px;<br />
margin: 15px;<br />
border: 3px green solid;<br />
border:3px green solid<br />
Kapitel: Beispiele für die Anwendung des Box-Modells<br />
1<br />
2<br />
0
Randgestaltung und Möglichkeiten<br />
Und nun Spielvarianten zum Rand - dem Rand kann für jeder Seite eine Definition<br />
mitgegeben werden.<br />
Mögliche Werte:<br />
Linie = solid<br />
kein Rahmen = none<br />
unsichtbarer Rahmen = hidden<br />
gepunktet = dotted<br />
gestrichelt = dashed<br />
doppelte Linie = double<br />
3D-Effekt = groove |ridge | inset | outset<br />
<br />
INHALT<br />
<br />
width: 400px;<br />
padding: 10px;<br />
margin: 15px;<br />
border-top: 3px green solid;<br />
border-right: 0px red hidden;<br />
border-bottom: 2px black dashed;<br />
border-left: 12px red double;<br />
Kapitel: Beispiele für die Anwendung des Box-Modells<br />
1<br />
2<br />
1
unterschiedliche Definitionen der Abstände<br />
unterschiedliche Definitionen der Abstände für oben, unten, rechts und links<br />
Beim Außenabstand (margin)<br />
Genauso wie beim Rahmen kann für den Außenabstand verschiedene Abstände definiert<br />
werden.<br />
margin-top: Wert;<br />
margin-right: Wert;<br />
margin-bottom: Wert;<br />
margin-left: Wert;<br />
Beim Innenabstand (padding)<br />
Genauso wie beim Rahmen kann für den Außenabstand verschiedene Abstände definiert<br />
werden.<br />
padding-top: Wert;<br />
padding-right: Wert;<br />
padding-bottom: Wert;<br />
padding-left: Wert;<br />
Angaben verkürzen<br />
Es gibt Kurzschreibweisen. Haben alle 4 Seiten denselben Wert, reicht eine Angabe (z. B.<br />
"margin: 20px;" bewirkt, das auf allen 4 Seiten ein Abstand von 20px eingehalten wird)<br />
Soll für oben/unten und rechts/links der selbe Wert definiert werden, ist die Schreibweise<br />
"margin:20px 35px;" - 20px für oben/unten, 35 px rechts/links<br />
In der verkürzen können auch alle 4 Seiten definiert werden: "margin:20px 35px 15px 60px;"<br />
- 20px für oben, 35 px rechts, 15px unten, 60px links - gelesen wird wie die Uhrzeit, man<br />
fängt oben an.<br />
Die verkürzte Schreibweise funktioniert sowohl für<br />
• margin<br />
• padding<br />
• border<br />
Kapitel: Beispiele für die Anwendung des Box-Modells<br />
1<br />
2<br />
2
CLASS und ID - Bezeichner für <strong>CSS</strong>-<br />
Elemente<br />
<strong>CSS</strong>-Elemente können über diese beiden "Bezeichner" angesprochen werden.<br />
Beispiel:<br />
Text<br />
Text<br />
Text<br />
Text<br />
Das besonderer an CLASS ist, das damit mehrere Elemente ausgezeichnet werden können,<br />
dagegen die ID nur für 1 einziges Element pro Seite verwendet werden darf. ID ist also zur<br />
eindeutigen Bestimmung eines Elementes.<br />
Sinn und Zweck von CLASS<br />
Über die Klassen können wiederholende Designelemente bestimmt werden, im folgenden<br />
Beispiel wird im Text mehrere Stellen mit einer Art Textmarker hervorgehoben.<br />
<br />
<br />
<br />
im Beispiel wird diese<br />
Stelle im Text<br />
mit einer Art<br />
Textmarker<br />
hervorgehoben.<br />
im Beispiel wird diese Stelle im Text mit einer Art Textmarker hervorgehoben.<br />
Kapitel: CLASS und ID - Bezeichner für <strong>CSS</strong>-Elemente<br />
1<br />
2<br />
3
Hinweis: für Classen wird in der <strong>CSS</strong>-Definition vor dem Namen ein Punkt geschrieben (für<br />
ID ein # - siehen unten).<br />
Sinn und Zweck von ID<br />
Elemente, die es nur einmal gibt. Z.B. die Steuerung können so mit einer ID und den<br />
dazugehörigen <strong>CSS</strong>-Design ausgestattet werden.<br />
Beispiel: Rahmen um die Steuerung und Hintergrundfarbe<br />
<br />
<br />
<br />
<br />
<br />
Startseite<br />
Impressum<br />
<br />
<br />
<br />
Hier kommt mehr zum Thema html lernen und homepage erstellen …<br />
<br />
• Startseite<br />
• Impressum<br />
Hier kommt mehr zum Thema html lernen und homepage erstellen …<br />
Hinweis: bei IDs wird in der <strong>CSS</strong>-Definition vor dem Namen ein # geschrieben!<br />
Die Frage, warum nicht alles mit STYLE gemacht wird ist berechtigt – die Antwort die ich<br />
gerade parat habe ist, das es nicht von gutem Stil zeugt und es geschickter ist, wenn man auf<br />
einen Blick sieht, was einmalige Objekte sind.<br />
Zu FLOAT: gibt es mehr in einem folgenden Kapitel.<br />
TIPP: Die Definition der <strong>CSS</strong>-Style-Sheets erfolgt am besten in einer externen Datei, damit<br />
die Definition nur einmal gemacht werden muss und in beliebig viele HTML-Seiten<br />
eingebunden werden kann.<br />
Kapitel: CLASS und ID - Bezeichner für <strong>CSS</strong>-Elemente<br />
1<br />
2<br />
4
DIV und SPANs<br />
Über die 2 Elemente DIV und SPAN kann <strong>CSS</strong> erst seine volle Pracht entfalten. DIV steht für<br />
das englische "division" in der Bedeutung "Bereich" und ist ein allgemeines Block-Element.<br />
Lustigerweise hat SPAN im englischen auch die Bedeutung von "Bereich", ist aber ein Inline-<br />
Element.<br />
Beide Elemente werden primär zum Begrenzen von Bereichen genutzt. Und über die Attribute<br />
der Elemente kann dann Design in die umschlossenen Bereiche gebracht werden. Dabei<br />
können die Elemente geschachtelt werden.<br />
Wichtig ist zu verstehen, was der Unterschied zwischen den 2 Elementen ist. DIV ist ein<br />
Blockelement. Nach ein dem DIV erfolgt nach der Definition ein neuer Block. SPAN dagegen<br />
kann innerhalb eines Bereiches angewendet werden. Im folgenden Beispiel wird der<br />
Unterscheid deutlicher.<br />
Der <strong>CSS</strong>-Befehl background-color:farbe; bewirkt, dass der Hintergrund des Elements<br />
eingefährbt wird.<br />
DIV - Einsatz<br />
Zwei Bereiche (z. B. die Steuerung und der Inhalt) werden platziert.<br />
<br />
Steuerung<br />
<br />
<br />
Inhalt<br />
<br />
Durch die Verwendung von DIV geht das nächste Element in der nächsten Zeile weiter - wie<br />
eine Platzierung nebeneinander erfolgen kann, kommt in einem späteren Kapitel<br />
Steuerung<br />
Inhalt<br />
SPAN - Anwendung (nicht SPAM!)<br />
Innerhalb eines Textes wird z. B. eine Hervorhebung ausgezeichnet. Als Beispiel wird in<br />
diesem Text ein Teil wie vom Textmarker hervorgehoben und dann geht es normal weiter.<br />
ein wie vom Textmarker<br />
hervorgehobener Text und dann geht es normal weiter<br />
Kapitel: DIV und SPANs<br />
1<br />
2<br />
5
Innerhalb der Zeile geht es nach dem SPAN-Element ganz normal weiter.<br />
ein wie vom Textmarker hervorgehobener Text und dann geht es normal weiter<br />
Mischen von DIVs und SPANs<br />
Die Elemente können ineinander geschachtet werden (egal ob SPAN oder DIV).<br />
Im Beispiel wird das Textmarkerbeispiel erweitert, dass der Text zusätzlich noch rot wird.<br />
ein<br />
<br />
wie vom<br />
<br />
Textmarker<br />
<br />
hervorgehobener<br />
<br />
Text und dann geht es normal weiter<br />
ein wie vom Textmarker hervorgehobener Text und dann geht es normal weiter<br />
Design per <strong>CSS</strong> - FLOAT<br />
Über das Float-Element kann eine Ausrichtung von Elementen geschehen.<br />
Float ( engl. = fließen, Hin- und Herbewegung) bestimmt wie ein Blockelement reagieren soll<br />
- im Klartext, neben dem Blockelement dürfen weitere Elementen sich befinden, die<br />
ansonsten unterhalb platziert würden.<br />
Beispiel Bildervorschau (ohne Links zur Vereinfachung)<br />
Beispiel Bildervorschau (ohne Links zur Vereinfachung)<br />
<br />
<br />
<br />
<br />
Kapitel: Design per <strong>CSS</strong> - FLOAT<br />
1<br />
2<br />
6
...<br />
<br />
Interessant ist, was passiert, wenn der Platz im Anzeigefenster nicht ausreicht - dann wird<br />
einfach in die nächste Zeile umgebrochen. Das ist ein Grund, warum manche Websitenbauer<br />
das FLOAT-Element in den Wahnsinn treibt : - aber es halb so wild.<br />
Website-Layout mit Float, DIVs, CLASS und ID<br />
Und endlich kommen wir zu dem wichtigen Punkt - Layout einer Website mit <strong>CSS</strong>.<br />
Wir wollen im ersten Beispiel ein 2 spaltiges Layout (links Steuerung, rechts Inhalt) erstellen.<br />
Quellcode vereinfacht ohne Links - es geht erst mal ums Prinzip.<br />
Startseite<br />
Impressum<br />
Hier HTML und <strong>CSS</strong> lernen und die eigene Website erstellen - selbst ist der Mensch<br />
Der entsprechende Quellcode:<br />
<br />
<br />
<br />
<br />
Startseite<br />
Impressum<br />
<br />
<br />
Kapitel: Design per <strong>CSS</strong> - FLOAT<br />
1<br />
2<br />
7
Hier HTML und <strong>CSS</strong> lernen und die eigene Website erstellen - selbst ist der<br />
Mensch<br />
<br />
Und im folgenden Beispiel ist zu sehen, wie ein float:right wirkt - am besten auch selber<br />
probieren!<br />
Startseite<br />
Impressum<br />
Hier HTML und <strong>CSS</strong> lernen und die eigene Website erstellen - selbst ist der Mensch<br />
sauberes 2 Spalten Layout<br />
OK - das bei float das Element von weiteren Inhalten "umflossen" wird, mag nicht jedem<br />
gefallen, aber es ist der erste Schritt. Die zweite Box (mit dem Inhalt) kann jetzt z.B. über<br />
margin ausgerichtet werden. Gleiches Beispiel oben.<br />
<br />
<br />
<br />
<br />
Startseite<br />
Impressum<br />
<br />
<br />
<br />
Hier HTML und <strong>CSS</strong> lernen und die<br />
eigene Website erstellen - selbst ist der Mensch<br />
<br />
Und das Ergebnis davon<br />
Kapitel: Design per <strong>CSS</strong> - FLOAT<br />
1<br />
2<br />
8
Startseite<br />
Impressum<br />
Hier HTML und <strong>CSS</strong> lernen und die eigene Website erstellen - selbst ist der Mensch<br />
<strong>CSS</strong> 2 Spalten Layout - Inhaltsbereich passt sich<br />
vorhandener Breite an<br />
Gleiches Beispiel wie oben, nun soll sich aber der Bereich für den Inhalt die verfügbare Breite<br />
nutzen (und wenn das Browserfenster verkleinert wird, automatisch kleiner werden).<br />
Zusätzlich wird die Breiten nicht mehr mit Pixel definiert, sondern über "em".<br />
<br />
<br />
<br />
<br />
<br />
Startseite<br />
Impressum<br />
<br />
<br />
<br />
Hier HTML und <strong>CSS</strong> lernen und die<br />
eigene Website erstellen - selbst ist der Mensch<br />
<br />
Und das Ergebnis davon selber probieren und dann Browserfenster in der Breite varrieren!<br />
<strong>CSS</strong> 2 Spalten Layout - Inhaltsbereich und Steuerung<br />
passen sich vorhandener Breite an<br />
Gleiches Beispiel wie oben, nun sollen sich beide Bereiche der verfügbare Breite anpassen -<br />
dazu werden die Breiten in Prozenten definiert.<br />
<br />
Kapitel: Design per <strong>CSS</strong> - FLOAT<br />
1<br />
2<br />
9
<br />
<br />
<br />
Startseite<br />
Impressum<br />
<br />
<br />
<br />
Hier HTML und <strong>CSS</strong> lernen und die<br />
eigene Website erstellen - selbst ist der Mensch<br />
<br />
Und das Ergebnis davon selber probieren und dann Browserfenster in der Breite varrieren!<br />
Seitenbreite begrenzen<br />
Oft wird gewünscht, dass nicht der maximal verfügbare Platz (der mit neuen großen<br />
Monitoren immer größer wird - oft schon 1600 Pixel in der Breite) genutzt wird.<br />
Dadurch wird die angezeigte Satzlänge pro Zeile nicht mehr so lang und die Lesbarkeit nimmt<br />
zu<br />
<strong>CSS</strong> 2 Spalten Layout mit fixierter Breite<br />
Gleiches Beispiel wie im Kapitel zuvor, die Breite wird auf 780 Pixel fixiert. Dazu wird um<br />
die bisherigen Bereiche ein weiteres DIV gelegt, dem die Breite zugewießen wird.<br />
<br />
#navi {<br />
float:left;<br />
width:13em;<br />
background-color:thistle;<br />
}<br />
#inhalte {<br />
margin-left: 14em;<br />
background-color:lightblue;<br />
}<br />
--><br />
<br />
<br />
<br />
<br />
Startseite<br />
Impressum<br />
<br />
<br />
<br />
Hier HTML und <strong>CSS</strong> lernen und die<br />
eigene Website erstellen - selbst ist der Mensch<br />
<br />
<br />
Und das Ergebnis davon selber probieren und dann Browserfenster in der Breite varrieren!<br />
<strong>CSS</strong>-Layout nun Mittig<br />
Für eine harmonische Wirkung wird gerne der Inhalt mittig dargestellt. Somit verteilt sich die<br />
"leeren" Bereiche, die bei größeren Auflösungen entstehen, gleichmäßig rechts und links.<br />
Mittige Ausrichtung des Layouts<br />
Zusätzlich kommt nun noch die mittige Ausrichtung - für den IE muß zusätzlich über den<br />
Body-Bereich dies geschehen - für standardkonforme Browser klappt das über "margin: 0<br />
auto;" - das auto sagt, auf beiden Seiten den Platz automatisch aufteilen.<br />
<br />
}<br />
text-align: center; /* Zentrierung IE */<br />
#seitenbereich {<br />
}<br />
text-align:left; /* Inhalt wieder links */<br />
margin: 0 auto; /* Zentrierung mitte */<br />
width: 780px;<br />
background-color:silver;<br />
#navi {<br />
}<br />
float:left;<br />
width:13em;<br />
background-color:thistle;<br />
#inhalte {<br />
}<br />
margin-left: 14em;<br />
background-color:lightblue;<br />
--><br />
<br />
<br />
<br />
<br />
Startseite<br />
Impressum<br />
<br />
Kapitel: <strong>CSS</strong>-Layout nun Mittig<br />
1<br />
3<br />
2
<br />
Hier HTML und <strong>CSS</strong> lernen und die<br />
eigene Website erstellen - selbst ist der Mensch<br />
<br />
<br />
Kopfzeile integrieren<br />
In der Regel sieht man meistens eine Kopfzeile, in der der Domainnamen und ein Logo oder<br />
Bild auftaucht.<br />
Kopfbereich in <strong>CSS</strong>-Layout<br />
Zum bisherigen Design kommt nun ein weiterer DIV-Bereich für die Kopfzeile - dieser wird<br />
farblich hinterlegt, damit besser Sichtbar und bekommt im unteren Bereich einen schwarzen<br />
Rand zur Abgrenzung.<br />
<br />
}<br />
#kopfzeile {<br />
}<br />
background-color:lightskyblue;<br />
border-bottom:1px solid black;<br />
#navi {<br />
}<br />
float:left;<br />
width:13em;<br />
background-color:thistle;<br />
#inhalte {<br />
}<br />
margin-left: 14em;<br />
background-color:lightblue;<br />
--><br />
<br />
<br />
<br />
www.HTML-Seminar.de - jetzt html lernen<br />
<br />
<br />
<br />
Startseite<br />
Impressum<br />
Kapitel: Kopfzeile integrieren<br />
1<br />
3<br />
4
<br />
<br />
Hier HTML und <strong>CSS</strong> lernen und die<br />
eigene Website erstellen - selbst ist der Mensch<br />
<br />
<br />
Fußzeile integrieren<br />
Die Fußzeile am Ende der Seite enthält oft das Datum der letzten Aktulisierung und einen<br />
Link, um wieder an den Anfang der Seite zugelangen (geschickt bei längeren Seiten).<br />
Fußzeile in <strong>CSS</strong>-Layout<br />
Zum bisherigen Design kommt nun ein weiterer DIV-Bereich für die Fußzeile - dabei muß<br />
allerdings den vorherigen Bereich abgeschlossen werden, was durch ein "clear:both;" erfolgt.<br />
Die Fußzeile wird farblich hinterlegt, damit besser sichtbar und bekommt im oberen Bereich<br />
einen schwarzen Rand mit 2 Pixel Breite zur Abgrenzung.<br />
<br />
}<br />
width: 780px;<br />
background-color:silver;<br />
#kopfzeile {<br />
}<br />
background-color:lightskyblue;<br />
border-bottom:1px solid black;<br />
#fusszeile {<br />
}<br />
clear: both;<br />
background-color:lightskyblue;<br />
border-top:2px solid black;<br />
#navi {<br />
}<br />
float:left;<br />
width:13em;<br />
background-color:thistle;<br />
#inhalte {<br />
}<br />
margin-left: 14em;<br />
background-color:lightblue;<br />
--><br />
<br />
<br />
Kapitel: Fußzeile integrieren<br />
1<br />
3<br />
6
www.HTML-Seminar.de - jetzt html lernen<br />
<br />
<br />
<br />
Startseite<br />
Impressum<br />
<br />
<br />
<br />
Hier HTML und <strong>CSS</strong> lernen und die<br />
eigene Website erstellen - selbst ist der Mensch<br />
<br />
<br />
www.html-seminar.de - Kontakt über .... [AT] html-seminar.de<br />
<br />
<br />
dreispaltiges Layout<br />
Zusätzlich neben Navigation und Steuerung kommt noch eine dritte Spalte, hier der<br />
Infokasten.<br />
3-spaltiges Layout in <strong>CSS</strong><br />
Die 3 Spalte wird über float:right; auf der rechten Seite ausgerichtet. Zusätzlich wird bei der<br />
mittleren Spalte die entsprechenden Abstände zum Rand definiert - margin: 0 10em 0 13em;<br />
Kapitel: dreispaltiges Layout<br />
1<br />
3<br />
7
Dabei steht:<br />
• die 1. Angabe von 0 für die oberen Abstand von 0 Pixel<br />
• die 2. Angabe von 10em für den Abstand nach rechts, was für den Infokasten benötigt<br />
wird<br />
• die 3. Angabe von 0 für den Abstand nach unten von 0 Pixel<br />
• die 4. Angabe von 13em für den Abstand nach links, was für die Navigation benötigt<br />
wird.<br />
Als fertiger Code sieht es wie folgt aus:<br />
<br />
<br />
float:right;<br />
width: 10em;<br />
background-color:yellowgreen;<br />
<br />
<br />
Kapitel: dreispaltiges Layout<br />
1<br />
3<br />
8
<br />
Startseite<br />
Impressum<br />
<br />
<br />
<br />
Hier HTML und <strong>CSS</strong> lernen und die<br />
eigene Website erstellen - selbst ist der Mensch<br />
<br />
<br />
Auf dieser Seite bekommen Sie Informationen zu ...<br />
<br />
<br />
Steuerung per <strong>CSS</strong><br />
So nun geht es an die Feinarbeit - wir basteln eine Steuerung per <strong>CSS</strong> - dazu nehmen Sie als<br />
Zutaten (den nur mit hochwertigen Zutaten schmeckt das Gericht), ein Prise , eine<br />
Handvoll , als Füllung wählen Sie Ihren gewünschten Inhalt wie Beispielsweise<br />
"Startseite", "Über mich", "Termine" etc.<br />
Zum Abschmecken eine Handvoll <strong>CSS</strong>, wie "border", "background-color" und "padding" und<br />
"margin"<br />
Steuerung vertikal<br />
Unser Grundaufbau in HTML sieht wie folgt aus (das ganze Design kommt aus der <strong>CSS</strong>-<br />
Definition!)<br />
Kapitel: Steuerung per <strong>CSS</strong><br />
1<br />
3<br />
9
Startseite Über mich Termine Impressum <br />
Das sieht erstmal als reines HTML nicht wirklich spektakulär aus.<br />
• Startseite<br />
• Über mich<br />
• Termine<br />
• Impressum<br />
Da die Steuerung auf jeder unserer Seiten später auftaucht, binden wir die <strong>CSS</strong>-Definition<br />
über eine externe Datei ein. Dadurch können Änderungen (Relaunch einer Website)<br />
vereinfacht werden. Designumstellungen werden i.d.R. an einer einzigen Datei erledigt (egal<br />
wie viele html-Seiten Sie auch haben.)<br />
<br />
<br />
Startseite Über mich Termine Impressum <br />
Design über externe <strong>CSS</strong>-Datei<br />
Diese Datei speichern wir mit dem Name "design.css" ab (der Namen, mit der die Datei über<br />
link rel="stylesheet" eingebunden wird).<br />
Inhalt der Datei ist folgender:<br />
#navi {<br />
width:200px; /* Breite des Bereichs */<br />
text-align:left; /* Textausrichtung */<br />
margin-top:10px; /* Außenabstand oben */<br />
margin-bottom:10px; /* Außenabstand unten */<br />
margin-left:20px; /* Außenabstand links */<br />
margin-right:15px; /* Außenabstand rechts */<br />
}<br />
#navi ul {<br />
list-style:none; /* keine Aufzählungspunkte */<br />
}<br />
#navi li {<br />
background-color:silver; /* Hintergrundfarbe */<br />
border-top:1px black solid; /* Rahmenfarbe Auflistungpunkt oben */<br />
Kapitel: Steuerung per <strong>CSS</strong><br />
1<br />
4<br />
0
}<br />
border-left:25px orange solid; /* Rahmenfarbe Auflistungpunkt oben */<br />
border-bottom:1px red solid; /* Rahmenfarbe unten */<br />
border-right:2px blue solid; /* Rahmenfarbe unten */<br />
margin-top:10px; /* Außenabstand oben */<br />
padding-top:8px; /* Innenabstand oben */<br />
padding-bottom:8px; /* Innenabstand unten */<br />
padding-left:8px; /* Innenabstand unten */<br />
padding-right:8px; /* Innenabstand unten */<br />
• Startseite<br />
• Über mich<br />
• Termine<br />
• Impressum<br />
Steuerung horziontal<br />
Aus der vertikal Steuerung können wir schnell eine horziontale machen, wenn nur ein wenige<br />
Menüpunkte vorhanden sind.<br />
Nutzen Sie hier einfach float:left;<br />
#navi {<br />
text-align:left; /* Textausrichtung */<br />
margin-top:10px; /* Außenabstand oben */<br />
margin-bottom:10px; /* Außenabstand unten */<br />
margin-left:20px; /* Außenabstand links */<br />
margin-right:15px; /* Außenabstand rechts */<br />
}<br />
#navi ul {<br />
list-style:none; /* keine Aufzählungspunkte */<br />
}<br />
#navi li {<br />
float:left; /* Anordnung links */<br />
margin-left:15px; /* Außenabstand oben */<br />
width:90px; /* Breite des Links */<br />
background-color:silver; /* Hintergrundfarbe */<br />
border-top:1px black solid; /* Rahmenfarbe Auflistungpunkt oben */<br />
border-left:25px orange solid; /* Rahmenfarbe Auflistungpunkt oben */<br />
border-bottom:1px red solid; /* Rahmenfarbe unten */<br />
border-right:2px blue solid; /* Rahmenfarbe unten */<br />
margin-top:10px; /* Außenabstand oben */<br />
padding-top:8px; /* Innenabstand oben */<br />
Kapitel: Steuerung per <strong>CSS</strong><br />
1<br />
4<br />
1
}<br />
padding-bottom:8px; /* Innenabstand unten */<br />
padding-left:8px; /* Innenabstand unten */<br />
padding-right:8px; /* Innenabstand unten */<br />
• Startseite<br />
• Über mich<br />
• Termine<br />
Kapitel: Steuerung per <strong>CSS</strong><br />
1<br />
4<br />
2
Steuerung mit Feedback auf<br />
Benutzer<br />
Das Aussehen von Links kann beeinflußt werden. Dazu gibt es 5 verschiedene<br />
Zustände von Links:<br />
Link, ...<br />
• auf eine noch nicht besuchten Seiten<br />
• auf eine besuchten Seiten<br />
• der gerade den Fokus hat<br />
• über den mit der Maus gefahren wird<br />
• der aktiv ist.<br />
Diese in <strong>CSS</strong> existierende Klassen nennen sich Pseudoklassen. In alten Browser<br />
funktionierten diese nicht alle. Auch heute ist noch wichtig, bei der Definition die<br />
exakte Reihenfolge einzuhalten. Erst kommt link, dann visited, focus, hover und<br />
dann active.<br />
Am Beispiel wird es deutlicher:<br />
Die Steuerung nehmen wir aus der letzten Seite und ergänzen diese mit dem<br />
Bereich für die Pseudoklassen. Dabei wollen wir folgende Reaktionen erreichen<br />
(es geht hier nicht um Design sondern um das Lernen von <strong>CSS</strong> und die<br />
Zusammenhänge).<br />
Art des Links -> gewünschte Reaktion<br />
• noch nicht besuchten Seiten - Text blau, keine Unterstrichung<br />
• auf eine besuchten Seiten - Text schwarz, durchstrichen<br />
• der gerade den Fokus hat - Textfarbe grün, blinkt<br />
• über den mit der Maus gefahren wird - Textfarbe rot, überstrichen<br />
• der aktiv ist - Textfarbe orange, unterstrichen<br />
HTML-Datei mit Steuerung als letztem Beispiel<br />
<br />
Startseite Über<br />
mich Termine Impressum <br />
Und die erweiterte externe <strong>CSS</strong>-Datei (mit dem Dateinamen design.css)<br />
#navi { text-align:left; /* Textausrichtung */ margin-top:10px; /* Außenabstand<br />
oben */ margin-bottom:10px; /* Außenabstand unten */ margin-left:20px; /*<br />
Außenabstand links */ margin-right:15px; /* Außenabstand rechts */ } #navi ul {<br />
Kapitel: Steuerung mit Feedback auf Benutzer<br />
1<br />
4<br />
3
list-style:none; /* keine Aufzählungspunkte */ } #navi li { float:left; /*<br />
Anordnung links */ margin-left:15px; /* Außenabstand oben */ width:90px; /* Breite<br />
des Links */ background-color:silver; /* Hintergrundfarbe */ border-top:1px black<br />
solid; /* Rahmenfarbe Auflistungpunkt oben */ border-left:25px orange solid; /*<br />
Rahmenfarbe Auflistungpunkt oben */ border-bottom:1px red solid; /* Rahmenfarbe<br />
unten */ border-right:2px blue solid; /* Rahmenfarbe unten */ margin-top:10px; /*<br />
Außenabstand oben */ padding-top:8px; /* Innenabstand oben */ padding-bottom:8px;<br />
/* Innenabstand unten */ padding-left:8px; /* Innenabstand unten */ paddingright:8px;<br />
/* Innenabstand unten */ } #navi a:link { color:blue; textdecoration:none;<br />
} #navi a:visited { color:black; text-decoration:line-through; }<br />
#navi a:focus { color:green; text-decoration:overline; } #navi a:hover { color:red;<br />
text-decoration:overline; } #navi a:active { color:orange; textdecoration:underline;<br />
}<br />
Ergebniss der Pseudoklassen<br />
Probieren und nun mit den Möglichkeiten von <strong>CSS</strong> herumspielen, damit die<br />
Steuerung auch nach was aussieht!<br />
Den Zustand von focus erreicht man, wenn man über die TAB-Taste (öfters<br />
drücken) zu einem Link wandert. Dieser kann dann mit der Return gewählt<br />
werden.<br />
• Startseite<br />
• Über mich<br />
• Termine<br />
• Impressum<br />
Block- u. Inline-Elemente<br />
Blockelemente benötigen nach der Definitionen einen ganzen Block und Inline-Elemente<br />
können innerhalb einer Linie (bzw. Block) vorkommen.<br />
Was eine Inline-Element und was ein Block-Element darstellt, ist im DTD (Document Type<br />
Definition) hinterlegt. Typische Blockelemente sind z.B. "h1 ... h6, p".<br />
Typische Inline-Elemente sind z.B. "strong, em, a".<br />
Interessant ist, dass diese durch <strong>CSS</strong> "umdefiniert" werden können. Aus einem Blockelement<br />
kann ein Inline-Element gemacht werden, bzw. die Verhaltensweise eines Inline-Elements.<br />
Dadurch kann oftmals float geschickt ersetzt werden.<br />
Die Umdefinition geschieht durch "display" - Beispiele:<br />
Kapitel: Block- u. Inline-Elemente<br />
1<br />
4<br />
4
li { display:inline; }<br />
img {display:block; }<br />
Im Beispiel werden Aufzählen in einer Reihe dargestellt und jedes Bild benötigt eine eigene<br />
Zeile.<br />
Steuerung horizontal<br />
Im Beispiel mit unserer Steuerung horizontal sieht der Quellcode dann aus:<br />
<br />
#navi3 {<br />
}<br />
text-align:left;<br />
margin-top:10px;<br />
margin-bottom:10px;<br />
margin-left:20px;<br />
margin-right:15px;<br />
#navi3 ul {<br />
}<br />
list-style:none;<br />
#navi3 li {<br />
display:inline; /* ERSATZ FÜR: float:left; */<br />
margin-left:15px;<br />
width:90px;<br />
background-color:silver;<br />
border-top:1px black solid;<br />
border-left:25px orange solid;<br />
border-bottom:1px red solid;<br />
border-right:2px blue solid;<br />
Kapitel: Block- u. Inline-Elemente<br />
1<br />
4<br />
5
}<br />
margin-top:10px;<br />
padding-top:8px;<br />
padding-bottom:8px;<br />
padding-left:8px;<br />
padding-right:8px;<br />
<br />
<br />
<br />
Startseite<br />
Über mich<br />
Termine<br />
<br />
<br />
• Startseite<br />
• Über mich<br />
• Termine<br />
Elemente ausblenden<br />
Es gibt auch die Möglichkeit, Elemente komplett auszublenden, das keinerlei Platz für das<br />
Element in der Browserausgabe reserviert wird. Dies hat z.B. seine Anwendung bei einer<br />
<strong>CSS</strong>-Definition für den Ausdruck, wo beispielweise die komplette Steuerung nicht mit<br />
ausgedruckt werden soll.<br />
#steuerung { display: none; }<br />
Kapitel: Block- u. Inline-Elemente<br />
1<br />
4<br />
6
kurz & gut:<br />
Bilder können präzise auf einer Seite mit <strong>CSS</strong> ausgerichtet werden. Hintergrundbilder finden<br />
teilweise als Designelemente Verwendung - auf den ersten Blick nicht als Bild zu erkennen.<br />
<strong>CSS</strong> - Bilder und Hintergrundbilder<br />
Auch bei Bilder hat die Trennung von Inhalt und Design nicht halt gemacht. Im HTML-Code<br />
wird vermerkt, dass ein Bild kommt und wo der Speicherort ist. In der <strong>CSS</strong>-Design erfolgt die<br />
Größe, Ausrichtung, Randabstände und Randdarstellung.<br />
Im HTML-Code kann das Bild eine ID bekommen, wenn die Einstellungen nur für dieses<br />
Bild gelten sollen oder eine Klasse (class), wenn man mehrere Bilder mit der selben Größe,<br />
Ausrichtung und Eigenschaften hat.<br />
Im folgenden Beispiel wird das Bild durch die <strong>CSS</strong>-Definition rechts ausgerichtet, mit einem<br />
Abstand nach links von 20 Pixel und dass der Text das Bild umfließt.<br />
<br />
<br />
<br />
<br />
Hier kommt Text, der das Bild links umfließt und automatisch umgebrochen wird<br />
Hier kommt Text, der das Bild links umfließt und automatisch umgebrochen wird.<br />
Für eine bessere Darstellung der Bildgröße, erhält das Bild einen roten Rahmen.<br />
Kapitel: <strong>CSS</strong> - Bilder und Hintergrundbilder<br />
1<br />
4<br />
7
Hintergrundbilder - wie das Bild in den Hintergrund<br />
kommt<br />
Um das Bild in den Hintergrund zu packen, gibt es mehrere Möglichkeiten. Die verbreiteste<br />
ist, es in der <strong>CSS</strong>-Datei einen Bereich zu Definieren, der für das komplette HTML-Dokument<br />
gilt - also der Tag html bzw. body.<br />
Beispiel: Das Bild wird nun gesetzt und wiederholt sich automatisch.<br />
Die Schriftgröße wird auf 80% definiert und das eine Verdana verwendet werden soll. Ist<br />
keine Verdana auf dem Computer installiert, dann eine Arial und notfall einfach eine Schrift<br />
ohne Serifen.<br />
Und zum Schluß wird noch die Farbe #ff0000 mitgegeben.<br />
html, body {<br />
background:url(bilder/html-kurs-logo.gif);<br />
font: 80% Verdana, Arial, Verdana, Helvetica, sans-serif;<br />
color: #ff0000;<br />
}<br />
Hintergrundbild mit Wiederholung X/Y<br />
Beispiel: Das Bild wird nun links oben (left top) gesetzt und wiederholt sich nicht.<br />
html, body {<br />
background:url(bilder/html-kurs-logo.gif) no-repeat right top;<br />
}<br />
Beispiel: Das Bild wiederholt sich in der Horizontalen.<br />
html, body {<br />
background:url(bilder/html-kurs-logo.gif) repeat-x;<br />
}<br />
Hintergrundbild mit Wiederholung x<br />
Und nun kommt der Kniff, für was man solche Hintergrundwiederholungen gebrauchen kann<br />
1. Man nehme folgende Grafik: Bild alleine anzeigen<br />
2. lasse diese Grafik als Hintergrundbild horizontal wiederholen<br />
3. Platziere die Steuerung in diesen Bereich<br />
4. Platziere den Inhalt unterhalb<br />
5. Fertig ist eine einfacher Internetauftritt<br />
Und hier das fertige Beispiel - varrieren Sie die Fenstergröße<br />
Hingrundbild komplett auf 100%<br />
Kapitel: <strong>CSS</strong> - Bilder und Hintergrundbilder<br />
1<br />
4<br />
8
Wenn nun ein Hintergrundbild komplett angezeigt werden soll und automatisch in der Größe<br />
varriert (man möchte immer das ganze Bild sehen) gibt es auch dafür einen Kniff - das aber<br />
nur als Beispiel - in Quellcode sehen uns selber erarbeiten :)<br />
100% Hintergrundbild<br />
Hintergrund für andere Elemente<br />
Anderen Elementen kann auch über die Auszeichnung "background:url(bilder/...)" ein<br />
Hintergrundbild zugewießen werden.<br />
Beispielsweise einer Tabelle - Beispiel in extra Fenster (variieren Sie die Fensterbreite!)<br />
table {<br />
width:80%;<br />
height:70%;<br />
background:#ffffff url(../photo/seifenstuecke-hell.jpg) no-repeat scroll ;<br />
margin:0pt auto;<br />
}<br />
Tabelle mit Hintergrundbild<br />
<strong>CSS</strong> Definitionen - Übersicht <strong>CSS</strong> Befehle<br />
Als Download gibt es die XHTML und <strong>CSS</strong> Kurzreferenz im PDF-Format.<br />
Es sind verschiedene Begriffe um <strong>CSS</strong> zu finden wie beispielsweise <strong>CSS</strong> Definitionen, <strong>CSS</strong><br />
Notation, <strong>CSS</strong> Syntax, <strong>CSS</strong> Elemente und <strong>CSS</strong> Formate. Im folgenden eine Übersicht über<br />
die wichtigsten <strong>CSS</strong> Befehle und deren Eigenschaften<br />
Befehl Bedeutung weitere mögliche Angaben<br />
Schrift<br />
font-family Schriftart Arial, Times New Roman, etc.<br />
font-size Schriftgröße<br />
color Schriftfarbe<br />
numerischer Wert in pt(Punkt) mm<br />
oder cm<br />
red, green, white usw. oder HTML<br />
Farbangabe<br />
font-variant Schriftvariante normal, small-caps<br />
font-weight Schriftgewicht normal, bold, bolder, lighter<br />
font-style Schriftstil normal, oblique, italic<br />
Textgestaltung<br />
text-align Textausrichtung left, right, center, justify (Blocksatz)<br />
line-height Zeilenabstand numerischer Wert in pt(Punkt) mm<br />
Kapitel: <strong>CSS</strong> Definitionen - Übersicht <strong>CSS</strong> Befehle<br />
1<br />
4<br />
9
text-decoration Textgestaltung<br />
word-spacing Wortabstand<br />
letter-spacing Zeichenabstand<br />
text-indent Texteinrückung<br />
text-transform Textart<br />
Seitenränder<br />
margin-left<br />
margin-right<br />
margin-bottom<br />
margin-top<br />
Links<br />
(Durchschuß) oder cm<br />
absoluter Abstand zum<br />
Seitenrand<br />
absoluter Abstand zum<br />
Seitenrand<br />
absoluter Abstand zum<br />
Seitenrand<br />
absoluter Abstand zum<br />
Seitenrand<br />
underline, overline, line-through,<br />
blink<br />
numerischer Wert in pt(Punkt) mm<br />
oder cm<br />
numerischer Wert in pt(Punkt) mm<br />
oder cm<br />
numerischer Wert in pt(Punkt) mm<br />
oder cm<br />
capitalize, uppercase, lowercase,<br />
none<br />
numerischer Wert in pt(Punkt) mm<br />
oder cm<br />
numerischer Wert in pt(Punkt) mm<br />
oder cm<br />
numerischer Wert in pt(Punkt) mm<br />
oder cm<br />
numerischer Wert in pt(Punkt) mm<br />
oder cm<br />
A:link Link fast alle <strong>CSS</strong>-Befehle anwendbar<br />
A:visited Besuchter Link fast alle <strong>CSS</strong>-Befehle anwendbar<br />
A:active Angeklickter Link fast alle <strong>CSS</strong>-Befehle anwendbar<br />
A:hover<br />
Bilder<br />
Link beim überfahren mit<br />
Maus<br />
background Hintergrundfarbe<br />
backgroundimage<br />
backgroundrepeat<br />
Ränder<br />
Hintergrundbild none, URL<br />
Kachel<br />
fast alle <strong>CSS</strong>-Befehle anwendbar<br />
red, green, white usw. oder HTML<br />
Farbangabe<br />
repeat, repeat-x, repeat-y, norepeat<br />
border-top-width Dicke der Rahmenlinie thin, medium, thick oder num. Wert<br />
border-bottomwidth<br />
Dicke der Rahmenlinie thin, medium, thick oder num. Wert<br />
border-left-width Dicke der Rahmenlinie thin, medium, thick oder num. Wert<br />
border-right- Dicke der Rahmenlinie thin, medium, thick oder num. Wert<br />
Kapitel: <strong>CSS</strong> Definitionen - Übersicht <strong>CSS</strong> Befehle<br />
1<br />
5<br />
0
width:<br />
border-style Rahmentyp<br />
none, dotted, dashed, solid, double,<br />
groove, ridge, inset, outset<br />
border-color Rahmenfarbe Farbname oder Hex.<br />
padding-top Tabellenabstand oben Prozent oder num. Wert.<br />
padding-bottom Tabellenabstand unten Prozent oder num. Wert.<br />
padding-right Tabellenabstand rechts Prozent oder num. Wert.<br />
padding-left Tabellenabstand links Prozent oder num. Wert.<br />
width Rahmenbreite Auto, Prozent, num. Wert<br />
height Rahmenhöhe Auto, Prozent, num. Wert<br />
<strong>CSS</strong> Tipps und Tricks<br />
Abstand nach Überschriften etc.<br />
Teilweise ist der Abstand nach einem Blockelement wie z.B. die Überschrift nicht erwünscht.<br />
Dieser Abstand kann sehr einfach über <strong>CSS</strong> wie gewünscht eingestellt werden.<br />
Abstände komplett aufheben - Abstände nach oben/unten definieren:<br />
H1-Überschrift<br />
Fließtexte usw. usw.<br />
Nach Belieben kann der Abstand geändert werden - einfach die gewünschte Pixelzahl<br />
einstellen. Also anstatt 0px z.B. dann 3px<br />
H1-Überschrift<br />
Bilderrahmen mit Punkten bei Mauskontakt<br />
Wenn ein Bild mit der Maus überfahren wird, erscheinen anstatt dem normalen Rahmen ein<br />
gepunkteter Rahmen<br />
für die ausgelagerte css-Datei<br />
:hover img { border: 1px dashed #0000FF }<br />
für die HTML-Seite<br />
<br />
<br />
<br />
Anfangsbuchstaben hervorgehoben<br />
Kapitel: <strong>CSS</strong> Tipps und Tricks<br />
1<br />
5<br />
1
Besonders als erster Buchstabe in einem Absatz lockert er den Absatz auf und dient dem<br />
Aussehen. Natürlich sollte genug Text folgen, damit dieser den Buchstaben "umfließen" kann.<br />
Ist der Browser nicht <strong>CSS</strong>-tauglich, wird der Buchstabe ganz normal angezeigt.<br />
für die ausgelagerte css-Datei<br />
.letterspeziale<br />
{ float: left;<br />
font-size: large;<br />
font-weight: bolder;<br />
padding: 5px;<br />
background: midnightblue;<br />
color: white;<br />
}<br />
für die HTML-Seite<br />
Besonders netter Effekt ...<br />
Text umfließt Bild<br />
Wenn anstatt dem HTML-TAG align="right" CCS verwendet werden soll, kann dies über die<br />
folgenden Zeilen definiert werden. Um das Bild fließt der Text. Über float wird festgelegt, ob<br />
rechts oder links herum.<br />
width und height sollten auf das entsprechende Bild angepasst werden.<br />
Einen Rahmen erhält man durch die border-Anweisung.<br />
für die ausgelagerte css-Datei<br />
.bild {<br />
float:right;<br />
width:160px;<br />
height:259px;<br />
border:1px solid black;<br />
}<br />
für die HTML-Seite<br />
<br />
Anbei ein paar hübsche Showeffekte für den IE<br />
Die Effekte sind allerdings mit Vorsicht zu genießen, da sie nur mit dem IE ab der Version 4<br />
laufen. Trotz allem nett :-)<br />
Nette Effekte (nur für IE)<br />
Kapitel: <strong>CSS</strong> Tipps und Tricks<br />
1<br />
5<br />
2
<strong>CSS</strong>-Layout-Generator<br />
Dieser Punkt kann nur Online genutzt werden:<br />
http://www.html-seminar.de/css-layout-generator.htm<br />
Kapitel: <strong>CSS</strong>-Layout-Generator<br />
1<br />
5<br />
3
Vorstellung Projekt: erste selbsterstellte<br />
Website<br />
Nachdem am besten das Lernen durch ein eigenes Umsetzen erfolgt, wird im folgenden das<br />
bisherige Wissen praktisch umgesetzt. Dazu wird eine komplette Website erstellt.<br />
Entweder Sie überlegen sich ein eigenes Projekt oder übernehmen einfach das<br />
Beispielprojekt: Eine Website für den (eigenen?) Verein.<br />
Wenn Sie dieses Kapitel vollständig durchgearbeitet haben, haben Sie eine eigene Website,<br />
die Sie nach Belieben auch noch erweitern können. Hier werden alle grundlegenden Schritte<br />
nacheinander vorgestellt und sofort umgesetzt.<br />
Vorstellung Projekte: erste selbst erstellte<br />
Websites<br />
Im folgenden werden 2 verschiedene Techniken gezeigt.<br />
Layout über <strong>CSS</strong><br />
Durch die aktuelle Technik ist eine Trennung von Inhalt<br />
und Design möglich, die schlanke und schnelle Websiten<br />
ermöglicht.<br />
Im Beispiel erstellen wir ein Website "Säulen des 20.<br />
Jahrhunderts" mit Grafik, Steuerung und Schlagschatten.<br />
Layout über Tabelle - old school<br />
Die alte Art, Design zu machen, war über Tabellen und<br />
ausblenden der Rahmen. Da sehr viele Websiten noch auf<br />
diese Art gemacht sind, ist es Sinnvoll, auch diese Technik<br />
zu kennen - dadurch können Sie die aktuelle Technik über<br />
<strong>CSS</strong> Design zu machen, besser einschätzen.<br />
Beispiel ist ein imaginärer Schachclub.<br />
Kapitel: Vorstellung Projekt: erste selbsterstellte Website<br />
1<br />
5<br />
4
<strong>CSS</strong> Design - Tabellenloses Design<br />
Schlanke Websites durch<br />
<strong>CSS</strong>-Design<br />
Im folgenden Projekt werden wir rechts im<br />
Beispiel angezeigte Homepage erstellen.<br />
Testen Sie bei der fertigen HTML-Seite die<br />
Reaktion, wenn das Browserfenster<br />
verkleinert wird. Und bei Bedarf können Sie<br />
nachsehen, wie der komplette Quellcode<br />
aussieht.<br />
die 4 Bereiche der Website<br />
Diese Website gliedert sich in 4 Bereich<br />
• Kopfzeile: Hintergrundbild-Download<br />
• Zeile Steuerung: Hintergrundfarbe ist #ceb98e<br />
• Übergang mit Schattenwurf: Download Schattenwurf<br />
• Inhaltsbereich<br />
Wenn Sie mit einem anderen Bild für den Kopfbereich probieren wollen, stehen folgende zur<br />
Verfügung:<br />
• Feuerwerk 1<br />
• Feuerwerk 2<br />
• Taubendach<br />
• Weinberge<br />
• Katze<br />
• Hund<br />
Nach dem Anzeigen mit der rechten Maustaste auf das Bild klicken und "Bild speichern<br />
unter" wählen.<br />
Die Bilder können frei verwendet werden, da ich diese selber fotografiert habe - bitte einen<br />
Link auf mich (www.pratzner.de) setzen.<br />
sonstige Bilder<br />
• Welpe<br />
Kapitel: <strong>CSS</strong> Design - Tabellenloses Design<br />
1<br />
5<br />
5
Beispielwebsite mit HTML und <strong>CSS</strong><br />
Inhalt über HTML und <strong>CSS</strong>-Design<br />
Wir bauen am Beispiel "Säulen des 20. Jahrhunderts" eine extrem schlanke und schnelle<br />
Website mit HTML und <strong>CSS</strong> auf, die aktuellen Forderungen entspricht. Die Inhalte werden in<br />
HTML erstellt, das Design wird komplett über <strong>CSS</strong> realisiert.<br />
Wie anfange – ist oft das Problem vom Anfänger. Sehen wir uns an der Beispielseite die<br />
Entstehungsschritte an. Die einzelnen Schritte sind mit den entsprechenden Kommentaren<br />
versehen, damit ersichtlich ist, warum dieser Weg gegangen wird.<br />
Es gibt natürlich mehrere Wege nach Rom und zur eigenen Website – dies hier soll zum<br />
lernen dienen und nicht als Religionsfrage. Warum wir primäre <strong>CSS</strong> nehmen, können Sie an<br />
anderer Stelle im Kurs nachlesen.<br />
1. Schritt – das HTML-Grundgerüst<br />
Als erstes wird das Grundgerüst in HTML erstellt. Dies ist deshalb so wichtig, dass das<br />
Aussehen nicht abweicht. Bereits durch die erste Zeile mit der DOCTYPE-Definition wird<br />
dem Browser gesagt, wie er reagieren soll. Wichtig ist, dass die DOCTYPE-Definition in der<br />
ersten Zeile steht, ansonsten verfällt der Browser (i.d.R. der IE in den Quircks-Modus) in<br />
merkwürdige Darstellungsformen und man wundert sich. Nehmen Sie das sehr ernst, selbst<br />
eine Leerzeile vor der DOCTYPE entwertet diese!<br />
<br />
Kapitel: Beispielwebsite mit HTML und <strong>CSS</strong><br />
1<br />
5<br />
6
Es gibt bei den DOCTYPE-Definitionen 3 (eigentlich nur 2 ernstzunehmende) Möglichkeiten.<br />
Wir nutzen hier die härteste – die Strict Methode.<br />
Zum Grundgerüst gehören natürlich der HEAD-Bereich und der BODY-Bereich. Das Ganze<br />
wird von unserem hmlt-TAG umrahnt.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
2. Head-Bereich<br />
Innerhalb des Head-Bereich geben wir den Title dieser Seite mit.<br />
Design über <strong>CSS</strong> pur - Beispiel<br />
Dieser wird im Kopf des Browserfensters angezeigt, in den Lesezeichen und von<br />
Suchmaschinen dann als Link zum anklicken.<br />
Weiterhin wird der Zeichensatz (charset) angegeben, damit dem Browser im Vorfeld bekannt<br />
ist, welcher Zeichsatz (Anmerkung öäüß) er erwarten kann.<br />
<br />
Kapitel: Beispielwebsite mit HTML und <strong>CSS</strong><br />
1<br />
5<br />
7
3. <strong>CSS</strong>-Definitionen<br />
Innerhalb dieses Beispieles werden wir im Kopfbereich auch die <strong>CSS</strong>-Definitonen<br />
aufnehmen. Dies hat mehr didaktische Gründe, das man sobald es mehr als eine Seite ist, die<br />
<strong>CSS</strong>-Definitionen in eine eigene Datei auslagert. Hier ist es zum Erstellen und Lernen OK<br />
und am Ende hält Sie niemand davon ab, die <strong>CSS</strong>-Definition auslzuagern.<br />
<br />
<br />
<br />
Unser fertiger HEAD-Bereich am Stück:<br />
<br />
<br />
<br />
<br />
Design über <strong>CSS</strong> pur - Beispiel<br />
<br />
<br />
<br />
<br />
<br />
Kapitel: Beispielwebsite mit HTML und <strong>CSS</strong><br />
1<br />
5<br />
8
<br />
4. der Inhaltsbereich<br />
Der sichtbare Inhalt besteht aus 4 Bereichen:<br />
• der obere Bereich mit den Säulen für den Hintergrund und den Moto der Seite.<br />
• die Steuerung<br />
• der Übergangsbereich mit dem Schlagschatten<br />
• der Inhaltsbereich<br />
Für diese 4 Bereiche erstellen wir jeweils einen DIV-Container. Vorerst werde ich für jeden<br />
Bereich wenig Inhalt eingeben, damit man sieht, wo welcher Bereich steckt.<br />
<br />
Säulenbauten des 20. Jahrhunderts<br />
<br />
<br />
Steuerung<br />
<br />
<br />
Hier kommt der Schatten später<br />
<br />
<br />
Der eigentliche Inhaltsbereich<br />
<br />
Diese packten wir nun in umserem Grundgerüst in den Bereich zwischen dem Anfangs-TAG<br />
und dem End-TAG .<br />
Kapitel: Beispielwebsite mit HTML und <strong>CSS</strong><br />
1<br />
5<br />
9
Wenn wir uns nun den bisherigen HTML-Code in der Vorschau ansehen, ist das noch nicht<br />
wirklich überzeugend.<br />
Es sieht eher aus, als wäre die Seite 1995 erstellt worden.<br />
Das besondere bei <strong>CSS</strong> ist, das eine Trennung zwischen Inhalt und Design stattfindet. Daher<br />
werden die HTML-Seiten auch extrem schlank und schnell.<br />
Jetzt fangen wir an, uns ans Design zu machen.<br />
Zum Kontrolle (und zum Lernen) werden wir nun jedem DIV-Bereich eine Hintergrundfarbe<br />
mitgeben. Dadurch sehen wir nun bei der Vorschau, wo welcher Bereich anfängt und aufhört.<br />
Dazu geben wir im <strong>CSS</strong>-Bereich nun für die einzelnen DIV-Bereiche die <strong>CSS</strong>-Definitionen<br />
ein. Eine exakte Auflistung aller <strong>CSS</strong>-Befehle finden Sie im Kapitel <strong>CSS</strong> Definitionen -<br />
Übersicht <strong>CSS</strong> Befehle.<br />
Der obere Bereich mit dem Namen "kopfbereich" bekommt nun seine Hintergrundfarbe.<br />
<br />
<br />
Zur Erinnerung, das # sagt, dass es sich um eine ID-Bereich handelt. Zwischen die<br />
geschweiften Klammern kommen die eigentlichen <strong>CSS</strong>-Defintionen:<br />
Kapitel: Beispielwebsite mit HTML und <strong>CSS</strong><br />
1<br />
6<br />
0
<br />
background-color: red;<br />
Nutzen Sie die Einrückungen. Diese sind nur für Sie und dienen primär der Übersicht. So<br />
sehen Sie gemachte Fehler später schneller. Einer der beliebtesten Fehler in <strong>CSS</strong> sind die<br />
vergessenen Semikolons ";". Machen Sie nach jedem Befehl eines!! Sofort! Den ein<br />
vergessenes kann die ganzen späteren folgenden Definitionen ausschalten.<br />
Geben Sie nun jedem der 4 Bereiche eine Farbe (gelb = yellow, grün = green, orange =<br />
orange) und sehen Sie sich das Ergebnis in der Vorschau an.<br />
Hintergrundgrafik mit den Säulen<br />
Nun wird das erste Design-Element aufgenommen – die Grafik mir den Säulen. Wenn wir die<br />
Grafik genau ansehen, fällt einem auf, das diese herzhaft breit ist. Die Grafik ist breiter als<br />
jeder normale Monitor. Warum das? Wir wissen nicht, mit was für einer Auflösung die<br />
Besucher kommt. Hat dieser 1024 Pixel in der Breite oder 1650. Die Grafik ist breiter und<br />
somit wird einfach mehr angezeigt. Den Rest sieht niemand und stört damit auch niemand.<br />
Natürlich kann man die Frage stellen, warum wir eine Grafik für den Hintergrund brauchen<br />
und nicht einfach eine Farbe nehmen ist. In der Grafik ist der Himmel mit einem leichten<br />
Kapitel: Beispielwebsite mit HTML und <strong>CSS</strong><br />
1<br />
6<br />
1
Farbverlauf versehen. Das entspricht der Wirklichkeit und sieht somit besser aus (sehen Sie<br />
keinen Farbverlauf, dann wird es Zeit für einen anständigen Monitor).<br />
Laden Sie die Grafik herunter (rechts Maustaste auf den folgenden Link und dann "Speichern<br />
unter...". Erstellen Sie ein Verzeichnis mit dem Namen "bilder" in dem Verzeichnis, in dem<br />
Ihre HTML-Datei liegt und speichern dort die Grafik mit dem Namen "hg-saeulen-img-<br />
9599.jpg" ab.<br />
Um diese nun in den Hintergrund von unseren Seite zu packen, wird der <strong>CSS</strong>-Bereich<br />
ergänzt:<br />
#kopfbereich {<br />
}<br />
background:url(bilder/hg-saeulen-img-9599.jpg) no-repeat left top;<br />
height:150px;<br />
Über die <strong>CSS</strong>-Definition "backgrund" geben wir den Dateinamen und das Verzeichnis der<br />
Grafik mit, sagen über "no-repeat" dass die Grafik nicht wiederholt werden darf und dass<br />
diese platziert wird. Die Platzierung erfolgt oben (top) und links (left).<br />
Zusätzlich sagen wir dem DIV-Bereich, dass dieses 150 Pixel hoch sein soll, damit die Grafik<br />
in der kompletten Höhe angezeigt wird.<br />
Zu Schrift in diesem Bereich kommen wir später.<br />
Steuerung – welche Hintergrundfarbe<br />
Kapitel: Beispielwebsite mit HTML und <strong>CSS</strong><br />
1<br />
6<br />
2
Mit Farben tun sich viele Websiten-Bastler schwer. Wenn wie in diesem Beispiel bereits ein<br />
Bild vorhanden ist, nehmen Sie eine Farbe aus dem Bild. Hier nehmen wir ein Beige aus den<br />
Säulen. Wenn Sie den HTML-Editor Scriptly nutzen, können Sie über die Pipette die Farbe<br />
auswählen.<br />
Über die <strong>CSS</strong>-Definition background-color geben wir dem Bereich für die Steuerung die<br />
Farbe mit.<br />
#steuerung {<br />
}<br />
background-color:#ceb98e;<br />
Achten Sie bei den Hintergrundfarben darauf, dass diese einen guten Kontrast zu<br />
Vordergrundfarbe (Schrift) bietet. Auf die Lesbarkeit der Schrift kommt es an. Wenn Sie die<br />
Besucher quälen wollen, nehmen Sie ein Blau als Hintergrund und ein Rot als Schriftfarbe.<br />
Das ist immer schmerzlich und garantiert unerwünscht.<br />
Schattenwurf<br />
Für Bereich zwischen der Steuerung und dem Inhalt gibt es einen Schattenwurf. Dieser ist<br />
auch nur eine Grafik. Das besondere an der Grafik ist, das diese Grafik nur 1 Pixel breit ist.<br />
Damit aus der 1-Pixel-breiten Grafik ein Schatten wird, lassen wir diesen einfach in der X-<br />
Richtung wiederholen.<br />
Wie schon bei den Säulenhintergrund wird der <strong>CSS</strong>-Befehl "background" verwendet, diesmal<br />
mit "repeat-x".<br />
Kapitel: Beispielwebsite mit HTML und <strong>CSS</strong><br />
1<br />
6<br />
3
#schatten {<br />
}<br />
background:url(bilder/schattenwurf-grau-v.png) repeat-x;<br />
Warum nur 1 Pxel breit? Das ergibt eine minimale Dateigröße :)<br />
Gestaltung Schrift<br />
Wir wollen eine saubere Schrift wie Arial – und zwar für alle Bereiche unserer Website.<br />
Daher definieren wir nun die Schrift und zwar für 2 HTML-TAGs , die auf jeden Fall<br />
vorkommen und unseren kompletten Inhalt umschließen. Dadurch, dass diese den kompletten<br />
Inhalt umschließen, gilt die Definition für alle Elemente.<br />
Deshalb definieren wir die Schrift für die TAGs "html, body". Dabei werden verschiedene<br />
Schriften angegeben. Arial, Helvetica, sans-serif. Ist auf dem Computer des Sufers keine Aral<br />
installiert, wird Helvetica genutzt. Ist diese auch nicht vorhanden, wir eine Schrift ohne<br />
Serifen genutzt (also irgendwas, was Arial ähnlich sieht).<br />
html, body {<br />
}<br />
font: 100% Arial, Helvetica, sans-serif;<br />
Danach wird alle Schrift in Arial, bzw. einer serifenlosen Schrift angezeigt.<br />
Kapitel: Beispielwebsite mit HTML und <strong>CSS</strong><br />
1<br />
6<br />
4
Schrift im Kopfbereich<br />
Unsere oberste Schrift soll weiß werden und rechts ausgerichtet sein. Das besondere ist, das<br />
egal wie groß das Browserfenster diese rechts bleibt und gegebenenfalls umbricht.<br />
Wir haben diese Schrift zwischen den Absatz-TAGS und gesetzt. Somit können wir<br />
für den HTML-TAG definieren, dass die Schrift weiß ist und eine gewisse Größe haben<br />
soll.<br />
Damit dies nur für den Kopfbereich gilt, setzen wir den <strong>CSS</strong>-Tag entsprechend:<br />
#kopfbereich p {<br />
}<br />
color:white;<br />
text-align:right;<br />
font-size:2em;<br />
padding:0.4em 0.4em 0 0;<br />
color:white – irgendwie logisch<br />
text-align:right; - die Schrift soll rechts ausgerichtet werden.<br />
font-size: 2em; - wir geben die Schriftgröße relativ an. Das hat verschiedene Vorteile (siehe<br />
hierzu das entsprechende Kapitel).<br />
Kapitel: Beispielwebsite mit HTML und <strong>CSS</strong><br />
1<br />
6<br />
5
padding: 0.4em 0.4em 0 0; - es soll Abstand zu den Rändern gehalten werden, und zwar 0.4<br />
em von oben (das ist der erste Wert), 0.4em nach rechts (das ist der zweite Wert) und jeweils<br />
0 nach unten und 0 nach rechts. (Tipp: diese Angaben sind immer wie eine Uhr im<br />
Uhrzeigersinn zu lesen und der Start ist bei 12 Uhr).<br />
Durch diese Angaben haben wir nun eine große weiße Schrift. In der Vorschau ansehen.<br />
Abstand innerhalb der Steuerung<br />
In der Steuerung wollen wir auch einen Abstand zum linken Rand: wir geben dazu im DIV-<br />
Bereich "steuerung" ein:<br />
padding-left:1em;<br />
Kapitel: Beispielwebsite mit HTML und <strong>CSS</strong><br />
1<br />
6<br />
6
Abstände innerhalb des Inhaltsbereichs<br />
Damit auch der Inhalt Abstand zu den Nachbarn hält (ist immer gut und beugt<br />
Rechtsstreitigkeiten vor), geben wir dem DIV-Bereich "inhalt" folgenden Wert mit:<br />
padding-left:2em;<br />
Dadurch die einzelne Angabe wird nun 2em Abstand von oben, rechts, unten und links<br />
gehalten. Vergleichen Sie dazu die Angabe bei "Schrift im Kopfbereich".<br />
Wenn wir jetzt das Ergebnis in der Vorschau ansehen, sieht das dem gewünschten Ergbenis<br />
schon sehr ähnlich. Es fällt nun noch ein Abstand von allen Elementen zum Rand auf, indem<br />
das weiß heftig hervorblitzt.<br />
Kapitel: Beispielwebsite mit HTML und <strong>CSS</strong><br />
1<br />
6<br />
7
Websiten ohne Bikini-Streifen<br />
Um keinen Abstand um alle Elemente mehr zu haben, setzen wir die Abstände für margin und<br />
für padding kollektiv auf 0. Dies scheint jetzt erstmals verwunderlich, ist aber absolut üblich.<br />
Dadurch hat man selber in der Hand, wie groß einzelne Abstände sein sollen. Allerdings sollte<br />
man auch keine Abstände vergessen zu definieren. Schauen wir uns erstmals das Ergebnis<br />
von unserem 0-Setzen an. Durch das * definieren wir, dass es auf alle Elemente angewendet<br />
wird.<br />
* {<br />
}<br />
margin:0;<br />
padding:0;<br />
Kapitel: Beispielwebsite mit HTML und <strong>CSS</strong><br />
1<br />
6<br />
8
Keine lästigen weißen Streifen mehr. Allerdings sind die Abstände zwischen den<br />
Überschriften und den Absätzen auch verschwunden. Sollten Sie das nicht sehen, fügen Sie<br />
ein paar Überschriften und Absätze im Inhaltsbereich ein.<br />
Nun Definieren wir noch die Abstände und das Ergebnis entspricht der Vorlagen:<br />
#inhalt h1, h2, h3, p, ul {<br />
}<br />
padding-bottom:.7em;<br />
Kapitel: Beispielwebsite mit HTML und <strong>CSS</strong><br />
1<br />
6<br />
9
Wir definieren, dass die Elemente "h1,h2,h3,p,ul" einen Abstand nach unten von 0.7em haben<br />
sollen. Dabei ist die relative Größenangabe von "em" wirklich praktisch.<br />
Zusätzlich noch für Auflistungen Abstand von links, damit die Aufzählungspunkte sauber<br />
sitzen.<br />
#inhalt ul {<br />
}<br />
padding-left:2em;<br />
Und nun wird die orange Hintergrundfarbe noch entfernt, und es sieht wie geplant aus.<br />
Kapitel: Beispielwebsite mit HTML und <strong>CSS</strong><br />
1<br />
7<br />
0
Perfekt machen – <strong>CSS</strong>-Definitionen auslagern<br />
Um die Sache abzurunden (bisher war es praktisch, das Design in der HTML-Datei zu<br />
entwickeln um schnell die Auswirkungen von Änderungen kontrollieren zu können), können<br />
wir den kompletten <strong>CSS</strong>-Bereich auslagern.<br />
Anstatt der <strong>CSS</strong>-Definitionen kommt dann der Link zu der <strong>CSS</strong>-Datei in den Head-Bereich in<br />
der Form:<br />
<br />
Viel Spaß beim Spielen und Variieren Ab jetzt beginnt das Spielen und Variieren – probieren<br />
und testen und die Ergebnisse in verschiedenen Browsern ansehen. Das ist eine effektive<br />
Form des lernen. Viel Spaß beim Testen und <strong>CSS</strong> lernen.<br />
Übung: Ergänzung Fußzeile<br />
Ergänzen Sie das Beispiel um die abgebildete Fußzeile.<br />
Kapitel: Beispielwebsite mit HTML und <strong>CSS</strong><br />
1<br />
7<br />
1
Layout über Tabellen - old school<br />
Inhaltlich kommen folgende Schritte:<br />
1. Seiten erstellen<br />
Seiten sind für das Projekt sinnvoll<br />
2. Grunddesign<br />
Erscheinungsbild von der Aufteilung der einzelnen Elemente<br />
3. Steuerung erstellen<br />
Wie kommt die Steuerung auf alle Seiten<br />
4. Logo/Bilder platzieren<br />
Logo in der Seite aufnehmen<br />
5. Text auf die Seiten<br />
das bildet angeblich :)<br />
6. Design über <strong>CSS</strong><br />
Farbe/Art der Schrift etc.<br />
7. Domain anmelden<br />
Ist mein Wunschnamen noch frei und wie kann ich diesen reservieren<br />
8. Online stellen<br />
die Website online stellen, damit die Welt mein Werk bewundern kann<br />
Lassen Sie sich am Anfang nicht durch ein weniger schönes Design abhalten. Das Aussehen<br />
kommt erst im Schritt "Design über <strong>CSS</strong>". Solange sieht die Website "relativ" langweilig aus.<br />
Die grundlegenden Techniken (HTML-Editor bedienen, HTML-Tags einfügen) sollen bereits<br />
bekannt sein. Wenn noch Fragen offen sind - die Antworten finden Sie in dem Kapitel<br />
"Einsteiger"<br />
So - und nun viel Spaß bei unserem Praxis-Projekt<br />
weiter zum erster Schritt Seiten erstellen<br />
Projekt: Seiten erstellen<br />
Als Projekt erstellen wir im Folgenden eine Website für den eigenen Verein. Natürlich<br />
können Sie nach Belieben anderen Inhalte und Aufbau wählen - es zählt hier zum Lernen<br />
primär der Vorgang und weniger der Inhalt!<br />
Theorie: Bevor Sie wie wild, irgendwelche Seiten erstellen, sollten Sie sich überlegen, was<br />
erwarten Ihre Besucher von Ihrer Homepage. Und genau diese Seiten sollten auf jeden Fall<br />
(natürlich nicht bei Ausruf einer Anarchie) vorhanden sein. Fragen Sie einfach verschiedene<br />
Menschen, was diese erwarten würden.<br />
Für unseren Verein - sagen wir doch einfach Schachverein "Patt e.V." werden folgende Seiten<br />
gewünscht:<br />
Kapitel: Layout über Tabellen - old school<br />
1<br />
7<br />
2
Startseite kurze Vorstellung, um wen es hier geht<br />
Termine<br />
neue Mitglieder<br />
werben<br />
Wann sind die normalen Treffen / wann besondere<br />
Ereignisse (Feste/Feiern) / wann sind Auswärtsspiele<br />
wie können Interessenten dazu stoßen, was sind die<br />
Voraussetzungen (Alter/Wissen)<br />
Lageplan Damit man auch gefunden wird<br />
Kontakt<br />
Impressum<br />
wie kann ich Fragen loswerden, wen kann ich ansprechen,<br />
wer ist wofür zuständig<br />
gesetzliche Anforderungen müssen erfüllt werden - dazu<br />
gehört das Impressum und der Inhalt<br />
So - das soll für den Anfang ausreichen. Es können beliebig viele weitere Seiten später<br />
aufgenommen werden.<br />
Als erstes benötigen wird die entsprechenden Seitennamen. Wie unter "Links" beschrieben,<br />
gibt es bestimmte Anforderungen an die Dateinamen:<br />
• nur Kleinbuchstaben<br />
• keine Leerzeichen<br />
• keine öäüß oder sonstige Sonderzeichen<br />
• mehr unter Links<br />
Seite Dateinamen<br />
Startseite index.htm<br />
Termine termine.htm<br />
neue Mitglieder werben mitglieder_neue.htm<br />
Lageplan lageplan.htm<br />
Kontakt kontakt.htm<br />
Impressum impressum.htm<br />
Auf allen HTML-Seiten benötigen Sie folgendes Grundgerüst, das später ausgeschmückt<br />
wird.<br />
Kapitel: Projekt: Seiten erstellen<br />
1<br />
7<br />
3
<br />
<br />
<br />
<br />
<br />
<br />
Legen Sie diese Seiten nun an.<br />
Projekt: Grunddesign<br />
Die Aufteilung der einzelnen Elemente, wie beispielsweise Steuerleiste, Inhalt, Adresse, Logo<br />
wird im Grunddesign festgelegt. Dabei gilt es die Zielgruppe zu beachten. Je weniger<br />
Webproof (Internetunerfahren) die meisten Besucher sein werden, desto "gewohnter" sollte<br />
der Aufbau sein. Mit dem folgenden Aufbau liegen Sie normalerweise nie falsch.<br />
Das Logo kann links oben platziert werden. Darunter die Anschrift und Telefon. Auf der<br />
linken Seite die Steuerung und rechts der Inhalt.<br />
Wenn Sie sich für ein Design entschieden haben, sollten Sie dieses auf allen Seiten Ihrer<br />
Website verwenden. Haben Sie auf jeder Seite ein anderes Design, führt das nur zur<br />
Verunsicherung des Besuchers - wenn Sie das möchten, müssen Sie das machen.<br />
Für diesen Aufbau benötigen wir eine Tabelle. Die linke Spalte für das<br />
Logo/Anschrift/Steuerung. Die rechte Spalte für den Inhalt.<br />
<br />
Kapitel: Projekt: Grunddesign<br />
1<br />
7<br />
4
<br />
Logo <br />
Adresse <br />
<br />
Steuerung<br />
<br />
<br />
Inhalte<br />
<br />
<br />
<br />
Die Ausgabe im Browser sieht wie folgt aus: Ansicht im Browser<br />
Die einzelnen Elemente des table-TAGs<br />
<br />
Dabei haben die einzelnen Attribute bei der Tabelle folgende Funktion:<br />
bgcolor="yellow"<br />
Die Hintergrundfarbe der Tabelle - je nach Geschmack, aber immer mit der Prämisse<br />
der bestmöglichen Lesbarkeit!<br />
height="100%"<br />
Die Höhe der Tabelle - also den gesamten Bildschirm = 100%<br />
Kapitel: Projekt: Grunddesign<br />
1<br />
7<br />
5
width="175"<br />
Die Breite dieser Tabelle - für das Logo und die Steuerung reichen im Normalfall 150<br />
Punkte aus - es soll ja auch noch Platz für den eigentlichen Inhalt übrig bleiben<br />
border="1"<br />
Der Rand der Tabelle wird während der Entwicklungsphase der Website eingeschaltet,<br />
damit exakt ersichtlich ist, wo was anfängt und aufhört. Ist das Design dann<br />
entsprechend fertig, werden die Ränder normalerweise mit border="0" ausgeschaltet<br />
cellpadding="10"<br />
Um ein wenig Rand zwischen Tabelle und Tabellen-Inhalt zu schaffen, gibt es diesen<br />
Befehl<br />
Damit die Tabelle bündig an die Seitenränder anschließt, finden Sie den entsprechenden Tipp<br />
unter Tipps und Tricks.<br />
Weiter geht es zum Erstellen der Steuerung.<br />
Projekt: Steuerung erstellen<br />
Als nächsten Schritt integrieren wir die Links auf die einzelnen Seiten - das Ganze wird dann<br />
Steuerung genannt.<br />
In das bisherige Grunddesign kommen die einzelnen Links:<br />
<br />
<br />
<br />
Logo <br />
Adresse <br />
<br />
<br />
Startseite <br />
<br />
Kapitel: Projekt: Steuerung erstellen<br />
1<br />
7<br />
6
Termine <br />
<br />
mitspielen? <br />
<br />
Lageplan <br />
<br />
Kontakt <br />
<br />
Impressum <br />
<br />
<br />
Inhalte<br />
<br />
<br />
<br />
Die Ausgabe im Browser sieht wie folgt aus: Ansicht im Browser<br />
Im nächsten Schritt integrieren wir das Logo und eine Grafik auf der Startseite.<br />
Projekt: Bilder aufnehmen<br />
Kapitel: Projekt: Bilder aufnehmen<br />
1<br />
7<br />
7
Als nächsten Schritt integrieren wir das Logo.<br />
In das bisherige Grunddesign kommt das Logo ganz oben platziert:<br />
Wenn Sie Befehle nicht mehr auswendig kennen (was vorkommen kann) - kann unter<br />
Einsteiger -> Grafiken 1 nachgeschlagen werden.<br />
<br />
<br />
<br />
<br />
<br />
Adresse <br />
<br />
<br />
Startseite <br />
<br />
Termine <br />
<br />
mitspielen? <br />
<br />
Lageplan <br />
Kapitel: Projekt: Bilder aufnehmen<br />
1<br />
7<br />
8
Kontakt <br />
<br />
Impressum <br />
<br />
<br />
Inhalte<br />
<br />
<br />
<br />
Hinweis: Nach dem Tabellen-End-TAG folgt sofort ohne Leerzeichen das Bild. Somit wird<br />
das Bild ganz oben in der Tabelle dargestellt.<br />
Die Ausgabe im Browser sieht wie folgt aus: Ansicht im Browser<br />
Damit Sie mit demselben Bild probieren können, klicken Sie in der Browser-Ansicht auf dem<br />
Bild mit der rechten Maustaste und wählen aus dem Menü "Bild speichern unter..." und<br />
speichern es auf Ihre Festplatte in das entsprechende Verzeichnis, in dem Sie Ihre HTML-<br />
Daten lagern.<br />
Nun kommt noch die Anschrift des Vereins dazu:<br />
<br />
<br />
<br />
Kapitel: Projekt: Bilder aufnehmen<br />
1<br />
7<br />
9
<br />
<br />
Patt e.V. <br />
Springer-Weg 12 <br />
77777 Turmstadt <br />
Tel. 555-555-0 <br />
<br />
<br />
Startseite <br />
<br />
Termine <br />
<br />
mitspielen? <br />
<br />
Lageplan <br />
<br />
Kontakt <br />
<br />
Kapitel: Projekt: Bilder aufnehmen<br />
1<br />
8<br />
0
Impressum <br />
<br />
<br />
Inhalte<br />
<br />
<br />
<br />
Die Ausgabe im Browser sieht wie folgt aus: Ansicht im Browser<br />
Im nächsten Schritt integrieren wir Text.<br />
Projekt: Text drauf<br />
Nun kommen wir zum Text - und benötigen nur eine Handvoll Befehle. Bitte daran denken -<br />
das Design kommt erst im nächsten Schritt.<br />
Beim Text geht es nun primär erst einmal um die Aufteilung des Textes. Lange Bleiwüsten<br />
will niemand lesen - daher schöne Absätze machen und sich kurz fassen.<br />
Wenn Sie Befehle nicht mehr auswendig kennen (was vorkommen kann) - kann unter<br />
Einsteiger -> Umbruch, Absatz und Einsteiger -> Überschriften und folgend nachgeschlagen<br />
werden.<br />
<br />
Kapitel: Projekt: Text drauf<br />
1<br />
8<br />
1
<br />
<br />
<br />
Adresse <br />
<br />
<br />
Startseite <br />
<br />
Termine <br />
<br />
mitspielen? <br />
<br />
Lageplan <br />
<br />
Kontakt <br />
<br />
Impressum <br />
<br />
Kapitel: Projekt: Text drauf<br />
1<br />
8<br />
2
Ihr Schachverein sagt gut Brett<br />
Und nun kommt der Inhalt - ein bisschen kreativer<br />
als ich sollte es schon sein ....<br />
Am besten mehrere Absätze, das sieht dann nach<br />
mehr aus - also mit den Absätzen nicht sparen!<br />
<br />
<br />
<br />
<br />
Hinweis: mehrere Leerzeichen und Umbrüche sind egal - es wird immer nur ein Leerzeichen<br />
angezeigt.<br />
Die Ausgabe im Browser sieht wie folgt aus: Ansicht im Browser<br />
Bilder auf die Seite zu bringen funktioniert genauso wie beim Logo. Probieren!<br />
Im nächsten Schritt erstellen wir das Design über <strong>CSS</strong>.<br />
Projekt: Design der Schrift<br />
Design definieren über <strong>CSS</strong><br />
Kapitel: Projekt: Design der Schrift<br />
1<br />
8<br />
3
Hier kommt der Teil, der viel Zeit spart - besonders dann, wenn der Tag kommt, an dem<br />
einem die alte Seite nicht mehr gefällt und man zum Renovieren übergeht.<br />
Über <strong>CSS</strong> kann sehr bequem ein Design in einer einzigen Datei erstellt werden, das für alle<br />
Seiten gilt.<br />
Nachgeschlagen werden kann unter<br />
Fortgeschrittene -> Cascade Style Sheet<br />
Damit diese Datei in jeder HTML-Seite berücksichtig wird, muss jeder HTML-Seite deren<br />
Existenz und Lage mitgegeben werden. Dazu kommt folgender Code rein.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Adresse <br />
<br />
<br />
Startseite <br />
<br />
Termine <br />
<br />
mitspielen? <br />
<br />
Lageplan <br />
<br />
Kontakt <br />
<br />
Impressum <br />
<br />
<br />
Ihr Schachverein sagt gut Brett<br />
Und nun kommt der Inhalt - ein bisschen kreativer<br />
wie ich sollte es schon sein ....<br />
Am besten mehrere Absätze, das sieht dann nach<br />
mehr aus - also mit den Absätzen nicht sparen!<br />
<br />
<br />
<br />
<br />
<br />
<br />
Und nun benötigen wir eine leere Datei mit dem Namen "design.css"<br />
Kapitel: Projekt: Design der Schrift<br />
1<br />
8<br />
4
Hinweis: Die Datei hat die Endung .css und NICHT .htm oder so!<br />
In die Datei schreiben wir nun folgende Zeilen:<br />
h1 { color: darkmagenta; letter-spacing: 3;}<br />
p { color: gray; }<br />
Die Ausgabe im Browser sieht wie folgt aus: Ansicht im Browser<br />
Projekt: Domainnamen<br />
So - nun kommen wir zum besonderen Teil. Wenn der Internetauftritt nicht nur aus Jux und<br />
Dollerei entstehen soll, sondern was darstellen muss, sollte ein passender Domainname her.<br />
Bei Domainnamen gilt es Einiges zu beachten, um nicht in die rechtliche Falle zu treten. Mehr<br />
dazu unter Recht<br />
Irgendwie sollte nun der Domainname etwas mit der Sache zu tun haben, rechtlich problemlos<br />
und noch gut merkbar sein. Wenn Sie jetzt den Wunschnamen suchen, gehen Sie über<br />
www.denic.de und schauen, ob er noch frei ist.<br />
Wenn er frei ist, wird ein virtuelles Grundstück benötigt. Dazu sind Provider da. Die<br />
bekanntesten sind z. B. Schlund und Partner, 1&1 und Strato. [mehr dazu]<br />
Paketgröße wählen und sicherstellen, dass das Konto gedeckt ist. Bei Minderjährigen sollte<br />
das Auswählen des Providers unbedingt gemeinsam mit dem Erziehungsberechtigten<br />
erfolgen.<br />
Nach dem Beantragen wird dann innerhalb von 2 Stunden bis 2 Wochen die Domain auf Ihren<br />
Namen eingetragen und der Inhalt kann übertragen werden.<br />
Projekt: Online stellen<br />
Dazu benötigen wir als erstes ein FTP-Programm.<br />
Zur Bedienung bitte unter Online stellen nachsehen.<br />
Bei Fragen, da es verschiedene FTP-Programme gibt, bitte ins Forum - Lajya freut sich.<br />
Kapitel: Projekt: Domainnamen<br />
1<br />
8<br />
5
Vorwort für Fortgeschrittene<br />
"Überzeugungen sind Krankheiten, die durch Begeisterung übertragen werden." Siegfried Lenz<br />
So vielleicht auch meine Meinungen und Ansichten zu perfektem HTML-Code, die Kunst des<br />
Tags und der Umgang mit der Relativität. Prüfen Sie also, was für Sie sinnvoll ist, und bauen<br />
Sie Ihr Wissen auf. Nach dem Fortgeschrittenen-Teil werden Sie sehen, dass es viele Wege<br />
nach Rom gibt und die meisten auch dort ankommen (abgesehen davon, dass der HTML-<br />
Code weder etwas mit Liebe noch mit Kunst zu tun hat).<br />
Aber trotz alledem hinterfragen Sie Meinungen. So gibt es im Internet die Fangemeinde von<br />
JavaScipt, die Framehasser, die IE-aus-Prinzip-Ablehner und viele weitere wunderlichen<br />
Gestalten. Hinterfragen und schauen und ausprobieren - "that´s the way to the light".<br />
Im Fortgeschrittenen-Teil werde ich versuchen, nicht nur das "Wie", sondern auch das<br />
"Warum" zu beleuchten. Wenn jemand etwas besser weiß - bitte es mich wissen lassen. Auch<br />
ich bin lernfähig und absolut nicht perfekt.<br />
Programmpunkte für Fortgeschrittenen<br />
• Dieses Vorwort<br />
• von mir bevorzugte Software<br />
• Frames - pro und vor allem kontra<br />
• Cascade Style Sheet (<strong>CSS</strong>)<br />
• JavaScript<br />
• Domainname<br />
• Provider<br />
• Metatags - das Salz in der Suppe, die Butter auf dem Brot<br />
• Anmelden bei Suchmaschinen<br />
• Weiterführende Empfehlungen & Links<br />
Kapitel: Vorwort für Fortgeschrittene<br />
1<br />
8<br />
6
Farbtheorie<br />
Warum Theorie? - Darüber kommt man schnell zu einer harmonischen<br />
Farbzusammenstellung für die eigene Website.<br />
In der Farbentheorie gibt es zahlreiche Ansätze, Definitionen und Richtungen. Hier werden<br />
die Basics und anhand einem Modell die Zusammenhänge aufgezeigt, damit eine schnelle<br />
harmonische Farbauswahl für Websites erreicht werden kann.<br />
Der traditionelle Farbkreis (rot, gelb und blau) wurde von Sir Isaac Newton entwickelt.<br />
Es basiert auf einer logisch geordneten Reihenfolge von reinen Farben.<br />
Primär-Farben<br />
Rot, Gelb und Blau<br />
Diese 3 Farben (bei Pigmentfarben) können nicht durch irgendwelche Kombinationen anderer<br />
Farben gemischt und angezeigt werden - daher Primärfarben.<br />
Alle weiteren Farben entstehen durch Mischen von 2 nebeneinander liegenden Farben. Beim<br />
Mischen von gelb und rot entsteht orange u.s.w.<br />
Kapitel: Farbtheorie<br />
1<br />
8<br />
7
Sekundär-Farben<br />
Grün, Orange, Violett (Purple ?)<br />
Die Sekundär-Farben entstehen durch das Mischen der Primär-Farben.<br />
Tertiär-Farben<br />
Durch Mischen der Primär- und Sekundärfarben entstehen Tertiär-Farben und der Farbkreis<br />
wird komplettiert.<br />
Nutzwert - aus dem Farbkreis zur Farbzusammenstellung<br />
Es gibt verschiedenste Theorien für Harmonien. Im Folgenden zwei weit verbreitete<br />
Methoden.<br />
Analoge Farben<br />
Die Farbenzusammenstellung basiert auf analogen Farben. Aus dem Farbkreis werden 3<br />
aneinander grenzende Farben ausgewählt.<br />
In der Regel herrscht eine der 3 Farben vor.<br />
Komplementär-Farben<br />
Kapitel: Farbtheorie<br />
1<br />
8<br />
8
Aus dem Farbkreis wird die gegenüberliegende Farbe ausgewählt - die komplementäre Farbe<br />
also.<br />
Die im Farbkreis gegenüberliegende Farbe erzeugt einen maximalen Kontrast.<br />
Bilder-Ausschnitt anpassen & Größe<br />
verändern<br />
Um Bilder bearbeiten zu können, wird eine Software benötigt. Für kleine Arbeiten empfiehlt<br />
sich das Programm IrfanView, das FREEWARE für den privaten Gebrauch ist (und in<br />
deutsch). Primär ist es ein sehr gutes Bilderbetrachtungsprogramm mit Zusatzfunktionen wie<br />
Ausschnitt anpassen und Größenänderungen etc.<br />
IrfanView ist unter http://www.irfanview.de erhältlich.<br />
Bilder-Ausschnitt anpassen (Bilder beschneiden)<br />
Ist auf dem Bild noch unnötiger Rand etc., kann man das Bild auch entsprechend verkleinern,<br />
z. B. auf Seitenbreite 260, es beschneiden und dann nochmals auf die letztendliche Größe<br />
verkleinern.<br />
Nach dem Verkleinern mit der Maus spannen Sie einen Rahmen auf dem Bild. Im Kopf des<br />
Fensters ist die Größe der Umrandung ersichtlich.<br />
Kapitel: Bilder-Ausschnitt anpassen & Größe verändern<br />
1<br />
8<br />
9
Die Seitenbereiche der Umrandung können einzeln verschoben werden.<br />
Verschieben, bis die gewünschte Größe erreicht ist (siehe Fensterkopf).<br />
Kapitel: Bilder-Ausschnitt anpassen & Größe verändern<br />
1<br />
9<br />
0
Zum Freistellen des umrandeten Bereichs den Menü-Punkt "Bearbeiten" -> "Freistellen"<br />
anwählen.<br />
Im Fuß des Fensters sind die Größe und Farbtiefe des Bildes zu sehen.<br />
Kapitel: Bilder-Ausschnitt anpassen & Größe verändern<br />
1<br />
9<br />
1
Größe verändern<br />
Menü "Bild" -> "Größe ändern"<br />
Neue Größe eintragen - dabei darauf achten, dass wenn von dem Bild nur ein Ausschnitt<br />
gewählt werden soll, dort auch noch Platz zum Beschneiden ist. Wie im Beispiel soll das Bild<br />
nachher eine Größe von 225 auf 150 haben. Daher wird als Breite 225 eingestellt, damit man<br />
mehr als 150 zum Beschneiden hat!<br />
Kapitel: Bilder-Ausschnitt anpassen & Größe verändern<br />
1<br />
9<br />
2
Zum Schluss das Bild noch speichern. Am besten mit neuem Namen, ansonsten verliert man<br />
das Original!<br />
"Datei" -> "Bild speichern unter".<br />
Kapitel: Bilder-Ausschnitt anpassen & Größe verändern<br />
1<br />
9<br />
3
Histogramm und Tonwertkorrektur - Bilder<br />
optimieren<br />
Hier ein kleiner Abstecher zu Qualität von Bildern und wie ...<br />
aus mittelprächtigen Bildern ...<br />
... gute Bilder werden können.<br />
Wenn Sie keinen großen Unterschied zwischen den beiden obigen Bildern sehen, könnte eine<br />
Anschaffung eines guten Monitors helfen.<br />
Bedeutung Histogramm<br />
Für einen gelungenen Webauftritt werden gute Bilder benötigt. Nachdem oft eine<br />
Digitalkamera griffbereit ist, können Bilder auch schnell selber gemacht werden, bzw. finden<br />
sich schon in der eigenen Sammlung. Dabei kommt dem Histogramm eine große Bedeutung<br />
zu, um Bilder einzuschätzen und mögliche Verbesserungen über die Tonwertkorrektur zu<br />
beurteilen.<br />
Im Histogramm sind die genutzten Tonwerte zu sehen, wie diese den vorhandenen möglichen<br />
Bereich ausnützen.<br />
Das Histogramm im Beispiel zeigt, dass nur der mittlere Bereich genutzt wird - das Bild wirkt<br />
flau.<br />
Kapitel: Histogramm und Tonwertkorrektur - Bilder optimieren<br />
1<br />
9<br />
4
Liegt ein Ungleichgewicht in eine Richtung vor, kommt es zu dunkeln Bilder - das Bild ist<br />
unterbelichtet<br />
oder zur Überbelichtung, also zu hellen Bildern.<br />
Kapitel: Histogramm und Tonwertkorrektur - Bilder optimieren<br />
1<br />
9<br />
5
Zum Vergleich die optimale Verteilung<br />
Möchten Sie nun ein falsch belichtetes Bild optimieren, benötigen Sie die<br />
Tonwertkorrektur<br />
Bei der Tonwertkorrektur werden alle vorhandenen Werte auf die gesamt mögliche Breite<br />
verteilt. Das Bild ist wieder kräftig. Das Ergebnis überzeugt - die Manipulation ist oft nicht<br />
sichtbar. Die fehlenden Werte mitten im Histogramm werden vom Auge nicht bemerkt (im<br />
Gegensatz zum nicht Nutzen der möglichen Breite).<br />
Kapitel: Histogramm und Tonwertkorrektur - Bilder optimieren<br />
1<br />
9<br />
6
Beim genauen Betrachten des Histogramms sehen Sie die Lücken, beim direkten Vergleich<br />
des optimalen Bildes zum Optimierten werden Ihnen wahrscheinlich kaum die Unterschiede<br />
auffallen.<br />
Histogramm des optimalen Bildes<br />
im Vergleich zu den mit gespreizten Tonwerten<br />
Und die jeweiligen Bilder zu den Histogrammen<br />
Besseres Ausgangsmaterial<br />
Die beste Lösung ist natürlich ein besseres Ausgangsmaterial. Viele Digitalkameras können<br />
zur Vorschau das Histogramm einblenden, damit hier schon die Qualität der Aufnahme<br />
kontrolliert werden kann.<br />
Tonwertkorrektur per Bildbearbeitung<br />
Kapitel: Histogramm und Tonwertkorrektur - Bilder optimieren<br />
1<br />
9<br />
7
Liegt bereits ein schlechtes Bild vor - dann hilft eine Software zur Bildbearbeitung. Im<br />
folgenden Fall wird das mit FixFoto erledigt, ein klasse Shareware die jeden Euro wert ist,<br />
pfiffige Lösungen bietet und in Deutschland programmiert wird. Den Link dazu finden Sie<br />
unter Software.<br />
Nach dem Laden des Bildes gehen Sie in das Menü "Bild -> Tonwert -> Histogramm"<br />
Falls Ihnen das neue Fenster zu klein ist (was normalerweise der Fall ist) - vergrößern Sie das<br />
Fenster, damit Sie sauber arbeiten können.<br />
Sie sehen eine Vorschau auf das Bild und mehrere Histogramme. Die ersten 3 sind für den<br />
jeweiligen Farbkanal - das untere ist für alle. Nutzen Sie das untere.<br />
Kapitel: Histogramm und Tonwertkorrektur - Bilder optimieren<br />
1<br />
9<br />
8
Schieben Sie den Regler als erstes nach rechts bis zum Anfang des "Berges".<br />
Kapitel: Histogramm und Tonwertkorrektur - Bilder optimieren<br />
1<br />
9<br />
9
Das gleiche auf der anderen Seite (nach links dann).<br />
Kapitel: Histogramm und Tonwertkorrektur - Bilder optimieren<br />
2<br />
0<br />
0
Spielen Sie ein wenig mit den verschiedenen Schiebereglern - danach können Sie mit Freude<br />
feststellen, dass Sie mit den Schaltflächen RGB-Max oder Y-Max schneller schöne<br />
Ergebnisse erzielen.<br />
Wenn Sie zufrieden mit der Vorschau sind - gehen Sie auf Ausführen. Vergessen Sie nicht Ihr<br />
Bild abzuspeichern.<br />
Kapitel: Histogramm und Tonwertkorrektur - Bilder optimieren<br />
2<br />
0<br />
1
Schatten & Co.<br />
Kein Charakter - vielleicht?<br />
Kein Schatten - unwahrscheinlich!<br />
Uups - falscher Schatten<br />
Kapitel: Schatten & Co.<br />
2<br />
0<br />
2
Bilder nachbearbeiten<br />
kurz und bündig<br />
• freistellen<br />
• Ränderübergänge glätten<br />
• Schatten hinzufügen<br />
Hört sich nicht schwierig an und ist mit ein wenig Übung und dem richtigen Werkzeug<br />
problemlos machbar.<br />
Ich verwende zur Bildbearbeitung Paint Shop Pro. Noch professioneller wird es mit Adobes<br />
Photoshop.<br />
Bilderauswahl<br />
Das Bild sollte in einer guten Qualität vorliegen. Das bedeutet, dass nach dem Scannen eines<br />
Fotos oder dem Erzeugen des Bildes mit einer digitalen Kamera das Bild in keinem Fall in der<br />
Auflösung verringert wird! Erst wenn alles fertig ist, wird die Auflösung auf eine Größe für<br />
das Web gebracht.<br />
Um sich Frustration zu ersparen, sollte man das Bild so oft wie möglich in seinen<br />
verschiedenen Bearbeitungsstufen unter verschiedenen Namen abspeichern. Wenn dann<br />
irgendetwas schief geht, holt man sich eine frühere Stufe wieder her und probiert nochmals<br />
sein Glück!<br />
Kapitel: Bilder nachbearbeiten<br />
2<br />
0<br />
3
Freistellen eines Bildausschnittes<br />
Als Beispiel zum Freistellen verwenden wir das Foto eines Menschen (mich :-)). Der<br />
Hintergrund ist unnötig, daher wird dieser entfernt. Zum Entfernen des nicht gewünschten<br />
Bereiches gibt es mehrere Möglichkeiten.<br />
Ist der Hintergrund von der Person gut getrennt, z.b. durch eine einheitliche andere Farbe,<br />
kann mit dem Lassowerkzeug gearbeitet werden.<br />
Dies ist jedoch oft nicht der Fall. Dann hilft das Markierwerkzeug und eine ruhige Hand.<br />
Damit wird dann das freizustellende Objekt umfahren. Ist das Objekt komplett markiert, wird<br />
die Markierung umgekehrt, so dass nun der komplette Hintergrund markiert ist. Durch die<br />
Entferntaste wird diesem die Hintergrundfarbe zugewiesen - im Normalfall wohl weiß.<br />
Um einen weichen Ränderübergang zwischen dem Objekt und dem Hintergrund zu erhalten,<br />
wird die Randunschärfe der Markierung erhöht. Dadurch ist nun ein Stück der Umrisses<br />
markiert. Dieser wird nicht gelöscht, sondern über die Funktion im Menü "Unschärfe"<br />
weicher gemacht. Dies kann mehrmals wiederholt werden, bis einem das Ergebnis zusagt.<br />
Schlagschatten erzeugen<br />
Jetzt kommt der härteste Part. Einen natürlich erscheinenden Schatten zu erzeugen ist selbst<br />
für Grafikdesigner oft ein Problem. Hier stellt sich heraus, wer ein gutes räumliches<br />
Vorstellungsvermögen hat.<br />
Um nicht das freigestellte Bild zu zerstören, empfiehlt es sich mit mehreren Ebenen zu<br />
arbeiten. Dazu erzeugt man im Zeichenprogramm eine Ebene für den Schatten. Diese Ebene<br />
sollte zweckmäßigerweise hinter dem eigentlichen Bild liegen.<br />
Ursprüngliches Bild<br />
Kapitel: Bilder nachbearbeiten<br />
2<br />
0<br />
4
Mit Corel Draw 8.0<br />
Über das Beschneidewerkzeug kann der Bildausschnitt markiert werden.<br />
Beschneidewerkzeuge:<br />
• 1. Rechteckmaske<br />
• 2. Kreismaske<br />
• 3. Freihandmaske<br />
• 4. Lassomaske<br />
• 5. Maskenschere<br />
• 6. Zauberstab<br />
• 7. Maskenpinsel<br />
Markieren mit Freihandmaske (falls es mit Zauberstab nicht funktioniert). Wenn der Großteil<br />
des gewünschten Bereichs umfahren ist, klicken Sie mit der Maus doppelt. Dadurch wird die<br />
Markierung geschlossen. Um den Bereich erscheint eine gestrichelte Linie.<br />
Kapitel: Mit Corel Draw 8.0<br />
2<br />
0<br />
5
Zum Löschen des Hintergrundes invertieren (umkehren) wir die Markierung. Durch das<br />
Invertieren ist dann alles außer dem gewünschten Bereich markiert.<br />
Menü: Maske->Invertieren<br />
Um nun diesen Bereich weiß zu bekommen, drücken Sie die ENTF-Taste -> dadurch wird der<br />
markierte Rest mit der Hintergrundfarbe gefüllt. Die Person ist freigestellt.<br />
Jetzt können weitere Feinarbeiten und Nacharbeiten mit der Freihandmaske erfolgen, falls<br />
dies nötig sein sollte.<br />
Schlagschatten erzeugen<br />
Nochmals invertieren, damit wieder der gewünschte Bereich (Person) markiert ist.<br />
Menü: Bearbeiten->Kopieren<br />
Kapitel: Mit Corel Draw 8.0<br />
2<br />
0<br />
6
Der Bereich wird in den Zwischenspeicher kopiert.<br />
Menü: Bearbeiten -> Einfügen als neues Objekt<br />
Eine neue Ebene mit dem gleichen Objekt wird eingefügt.<br />
Menü: Objekt -> Hinterlegter Schatten<br />
Kapitel: Mit Corel Draw 8.0<br />
2<br />
0<br />
7
Das Menü für den Schatten wird aufgerufen. Hier kann die Richtung und die Intensität des<br />
Schattens eingestellt werden. Spielen Sie herum.<br />
Kapitel: Mit Corel Draw 8.0<br />
2<br />
0<br />
8
Bildgröße herrichten<br />
Maskieren Sie den gewünschten Bereich.<br />
Menü: Bild -> Beschneiden -> Beschneiden aus Maske<br />
Größe:<br />
Menü: Bild -> Bild neu erstellen (Größe eingeben)<br />
Objekt: Objekt kombinieren mit Hintergrund<br />
Beim Speichern ist wichtig, dass keine Markierung mehr aktiv ist. Also Menü: Maske -><br />
entfernen<br />
Und nicht vergessen - für das Internet sind bisher nur 2 Formate brauchbar: JPG und GIF!<br />
Kapitel: Mit Corel Draw 8.0<br />
2<br />
0<br />
9
Über das Komprimierungsmenü ist die Dateigröße später ersichtlich.<br />
So, nun kann das fertige Bild mit Schatten auf der Website eingesetzt werden. Beim nächsten<br />
Bild wird dieser Vorgang schon schneller gehen und irgendwann werden freigestellte Bilder<br />
absolut kein Problem mehr darstellen. Im Gegensatz zu Bildern mit unnötigem Hintergrund<br />
machen sie wesentlich mehr her, der Betrachter wird nicht vom Hintergrund abgelenkt und<br />
die Bilder benötigen normalerweise weniger Speicherplatz und sind schneller übertragen<br />
Hier nun unser fertiges Bild<br />
Kapitel: Mit Corel Draw 8.0<br />
2<br />
1<br />
0
fremde Bilder für die eigene Website<br />
Es gibt verschiedene Bilderdienste.<br />
Teilweise ist die Nutzung auf der<br />
Website kostenfrei (es muss ein Link<br />
auf den Bilderdienst/Fotograf gesetzt<br />
werden), teilweise mit Kosten<br />
verbunden.<br />
Hier einige Adressen mit<br />
Anmerkungen:<br />
• http://www.photocase.com -<br />
schöne Auswahl<br />
• http://www.fotolia.de - große<br />
Auswahl zu kleinen Preisen<br />
• http://www.digitalstock.de<br />
• http://www.fotocommunity.de - weniger zum bekommen, sondern eher zum<br />
Diskutieren über eigene Fotos<br />
• http://www.pixelquelle.de<br />
Organisieren von Bildern<br />
Ab einer gewissen Menge von Bildern auf der eigenen Festplatte, ist eine Software zum<br />
Organisieren und Verwalten sinnvoll.<br />
Hier kann die kostenloses Picasa von Google helfen - einfach probieren. Verwaltet Bilder,<br />
zeigt Diashows mit schönen Effekten und die Bilder können mit Schlagworten versehen<br />
werden und können so schnell wieder gefunden werden. Zusätzlich können Bilder auf die<br />
eigene Website hochgeladen werden - so ist schnell ein Blog realisierbar.<br />
Download unter:<br />
http://www.html-seminar.de/bilder_fuer_die_website.htm<br />
Kapitel: fremde Bilder für die eigene Website<br />
2<br />
1<br />
1
Formulare<br />
Zum versenden von Daten sind Formulare klasse. Es gibt verschiede Eingabefelder<br />
Für Text z.B.<br />
<br />
Um alle Eingabefelder zu versenden (sind ja im Normalfall mehr als eins), wird ein Formular<br />
um die Eingabefelder geschachtelt.<br />
als Beispiel:<br />
<br />
<br />
<br />
Damit er weiß, wohin er senden soll, muß das in die Form-Action dies vermerkt werden<br />
<br />
<br />
<br />
Und zu guter Letzt brauchen wir noch einen Submit-Button, daß losgesendet wird.<br />
Kapitel: Formulare<br />
2<br />
1<br />
2
<br />
<br />
<br />
So, das wars. Damit sollte die E-Mail auf den Weg geschickt werden, sofern bei Sender das<br />
E-Mail-Programm sauber installiert ist. Das ist auch der Nachteil bei der Geschichte. Um ein<br />
Beispiel zu sehen, um diesen Nachteil zu umgehen, einfach in den Quellcode von www.feedback.de<br />
reinschauen.<br />
Bei folgenden Beispielen einfach in den Quellcode reinschauen. Dann dürfte der Aufbau klar<br />
sein.<br />
die Elemente zur Formulargestaltung<br />
Um im Internet eine Kommunikation mit dem Benutzer aufzubauen, werden Formulare<br />
verwendet. Dazu gibt es verschiedene Standardelemente, die die Kommunikation<br />
vereinfachen sollen.<br />
Texteingaben<br />
***<br />
- einzeilige Textfelder, zur Eingabe von beliebigem Text<br />
- Paßwortfelder, ähnlich dem einzeiligen Textfeld, allerdings werden gemachte<br />
Eingaben nur mit Sternen angezeigt<br />
- mehrzeilige Textfelder. Wird mehr Text eingegeben, als das Textfeld<br />
darstellen kann, erscheint auf der rechten Seite ein Rollbalken, mit dem man den verdeckten<br />
Text sichtbar machen kann.<br />
Kapitel: die Elemente zur Formulargestaltung<br />
2<br />
1<br />
3
Auswahlfenster, über das ein vorgegebener Text ausgewählt werden<br />
kann. Eigene Eingaben sind nicht vorgesehen.<br />
Auswahl-Kästchen<br />
weiblich männlich keine Angaben<br />
runde Auswahl-Punkte, in den nur eines von den Angeboten möglich ist. Wird ein anderes<br />
angeklickt, wird die erste Selektion aufgehoben und das neu angeklickte wird markiert.<br />
Bücher lesen Musik hören Filme sehen<br />
Bei diesen Kästchen sind mehrere Selektionen möglich.<br />
Schaltflächen<br />
Über Schaltflächen sind Aktionen möglich. So z.B. daß Fragen übersprungen werden, bzw.<br />
die Eingaben abgeschlossen und versendet werden. Folgende Schaltflächen sind in<br />
Formularen zu finden:<br />
Eingaben absenden<br />
Diese Schaltfläche ist normalerweise immer vorhanden. Formulare zeichnen sich noch aus,<br />
daß es "Absenden-Schaltfläche" zum Schluß erscheint. Die gemachten Eingaben werden<br />
abgeschlossen, gegebenenfalls überprüft und abgesendet.<br />
Zurücksetzen<br />
Oft sieht man auch eine Schaltfläche, um die eingegebenen Informationen zu löschen. Von<br />
diesem Element ist abzuraten, da erfahrungsgemäß viele Benutzer versehentlich diese<br />
Schaltfläche anklicken, in der Annahme, daß sie ihre Daten versenden. Alle Daten werden<br />
gelöscht und nichts versendet. Wenn der Benutzer seinen Irrtum bemerkt, muß er nochmals<br />
alles eingeben. Besonders bei größeren Formularen wird er das beim zweiten mal weniger<br />
ausführlich machen, wenn er überhaupt noch dazu bereit ist.<br />
Grundlegendes<br />
Ein dem Standard entsprechender Gebrauch besonders bei den Auswahl-Kästchen ist wichtig,<br />
da es den Komfort erhöht, wenn es dem gewohnten und erwarteten Verhalten entspricht.<br />
Wird ein nicht standardmäßiger Gebrauch erzwungen, was technisch problemlos machbar ist,<br />
kann es den Benutzer verwirren und von der eigentlichen Aufgabe abhalten - das Formular<br />
auszufüllen.<br />
Kapitel: die Elemente zur Formulargestaltung<br />
2<br />
1<br />
4
Frames - aus dem Rahmen fallen<br />
• Was ist ein Frame?<br />
• Definieren von Frames<br />
• Eigenschaften der Frames<br />
• Verweise im Frameset<br />
• Schachteln von Frames<br />
• Gefahren bei Frames<br />
Was ist ein Frame ?<br />
Frames (engl. Rahmen) stellen eine Möglichkeit der Gestaltung<br />
dar. Im Browser werden durch Frames mehrere HTML-Seiten<br />
gleichzeitig angezeigt. Die Frames müssen nicht sichtbar sein! In<br />
dem Beispielbild sehen Sie 3 HTML-Seiten. Zur besseren<br />
Übersicht ist kein Inhalt, sondern nur die Namen der<br />
entsprechenden HTML-Seite angegeben.<br />
Der Aufbau und die Lage werden in einer weiteren Datei definiert<br />
- dem Frameset. Im Unterschied zu Tabellen scrollen bei Frames die Inhalte von einem<br />
Bereich (Frame) nicht mit, wenn in einem anderen Frame gescrollt wird. Die Framesetdatei ist<br />
auch eine HTML-Datei, die normalerweise nicht sichtbar ist.<br />
Definieren von Frames<br />
Die erste und wichtigste Datei ist die mit der Definition des Framesets. Hier wird festgelegt,<br />
wie die Bildschirmaufteilung ist und welche HTML-Seiten dann in den entsprechenden Seiten<br />
geladen werden sollen.<br />
Diese Datei wird zwar als URL aufgerufen, wird aber nicht angezeigt! Angezeigt werden<br />
diejenigen HTML-Dateien, die in dieser Frameset-Definitions-HTML-Datei (nett langes<br />
Wort) aufgeführt sind.<br />
Der Aufbau der Frameset-Datei weicht vom bisher bekannten Aufbau einer HTML-Datei ab.<br />
Es wird zwischen Kopf-Bereich und Inhalts-Bereich, also zwischen und <br />
definiert. Im normalen Bereich kann ganz normal gearbeitet werden - dieser wird aber nur<br />
angezeigt, wenn der Browser nicht mit Frames umgehen kann (alte Browser).<br />
Grundlegender Aufbau<br />
... ... Als<br />
Beispiel mit Reihen: <br />
Kapitel: Frames - aus dem Rahmen fallen<br />
2<br />
1<br />
5
Entweder rows (engl. Reihen), wenn die Frames übereinander, oder cols (engl. columns =<br />
Spalten) wenn die Frames nebeneinander liegen sollen.<br />
Anstatt den Sternen kann entweder<br />
• ein fixer Wert angegeben werden oder<br />
• ein relativer Wert, also mit Prozenten, oder<br />
• ein Stern belassen werden, damit die optimale Breite (bzw. Höhe) vom Browser selbst<br />
bestimmt wird.<br />
Es kann aber auch gemischt werden, also der erste Frame ist fix 200 und der zweite soll<br />
optimal dargestellt werden, also mit * (Stern) versehen, wie im obigen Beispiel 2.<br />
<br />
Nach der Lage wird nun der Inhalt zugewiesen. Im src-TAG steht die html-Seite, die in den<br />
Frame geladen werden soll. Die zweite Angabe, der Framename, dient später dazu, die Seiten<br />
zu verlinken (später mehr dazu). Unbedingt bei dem Framenamen auf Groß- und<br />
Kleinschreibung achten, da diese hier wichtig sind!<br />
Wenn man 2 Frames hat, benötigt man auch 2 dieser Angaben!<br />
<br />
Und zu guter Letzt, der End-TAG.<br />
So, das war es mit der Definition. Wenn jetzt im Browser die HTML-Datei, die die Definition<br />
des Framesets enthält, geladen wird, werden die definierten Dateien angezeigt.<br />
Wenn diese nicht angezeigt werden, sollten diese vielleicht erst erstellt werden.<br />
Aufgabe 1:<br />
Erstellen Sie eine Seite mit Frames, auf der rechts die<br />
Steuerleiste ist, die ca. 30% des Bildschirms einnimmt.<br />
Der dargestellte Inhalt eines Frames sollte größer sein als<br />
auf dem Bildschirm darstellbar (viel Text schreiben :-)).<br />
Spielen Sie mit der Scrollfunktion und beobachten Sie den<br />
anderen Frame.<br />
Eigenschaften von Frames<br />
Folgende Attribute (Möglichkeiten) können noch angegeben werden. Dabei werden manche<br />
Befehle anscheinend doppelt benötigt. Das kommt daher, dass Netscape und Microsoft<br />
unterschiedlich reagieren und daher Befehle "doppelt" bzw. "zweisprachig" benötigen.<br />
Kapitel: Frames - aus dem Rahmen fallen<br />
2<br />
1<br />
6
Befehle im <br />
border=[0...x] frameborder=[0...x]<br />
Hier kann die Rahmenstärke angegeben werden. Wird eine Rahmenstärke von 0 angegeben,<br />
ist kein Rahmen sichtbar. Somit kann man auf den ersten Blick nicht zwischen einer<br />
Blindtabelle und einem Frameaufbau unterscheiden.<br />
Befehle im Frame-TAG <br />
scrolling=[yes/no/auto] • yes = ist der Standard; so kommt immer<br />
eine Scroll-Leiste, auch wenn diese nicht<br />
nötig wäre<br />
• auto = optimiert das yes - es kommt nur<br />
noch eine Scroll-Leiste, wenn diese auch<br />
sinnvoll ist.<br />
• no = niemals eine Scroll-Leiste - ist<br />
extrem gefährlich, da besonders dann bei<br />
kleineren Bildschirmauflösungen der<br />
Surfer nicht mehr alles sieht und auch<br />
nicht zum Unsichtbaren scrollen kann!<br />
noresize (engl. no resize = keine Größenänderung)<br />
Dadurch kann der Surfer die im frameset<br />
definierten Größen nicht mehr verändern.<br />
marginwidth= (engl. margin = Rand) Der linke und rechte<br />
Abstand vom Frame-Inhalt zum Frame-Rand<br />
werden hier festgelegt. Angabe ist sowohl fix<br />
als auch relativ, also prozentual, möglich.<br />
marginheight= (engl. height = Höhe) Der obere und untere<br />
Abstand vom Frame-Inhalt zum Frame-Rand<br />
werden hier festgelegt. Angabe ist sowohl fix<br />
als auch relativ, also prozentual, möglich.<br />
Beliebter Schreibfehler bei ght!!<br />
Verweise im Frameset<br />
Um in den Frames navigieren zu können, werden unsere bekannten Links benötigt. Der<br />
HTML-TAG wird nun erweitert durch .<br />
Jetzt kommen die Verweisnamen, die wir im Frameset vergeben haben, zum Zuge. Besonders<br />
wichtig ist es hier, auf Groß- und Kleinschreibung zu achten, sonst funktioniert es nicht.<br />
Als plastisches Bespiel:<br />
Kapitel: Frames - aus dem Rahmen fallen<br />
2<br />
1<br />
7
Unser linker Frame heißt "steuerframe" und enthält die Steuerleiste (wer hätte das auch<br />
vermutet :-)). In unserem rechten Frame soll immer der Inhalt angezeigt werden, und dieser<br />
hat den wundervollen Verweisnamen im Frameset erhalten, der da lauten soll "inhaltsframe".<br />
Im Steuerframe habe ich einen Link in Form von < a href="mehr.htm">. Klicke ich nun auf<br />
diesen Link, wird im Bereich des Steuerframes die Seite mehr.htm geladen.<br />
So wollten wir das aber nicht. Daher benötigt der Link nun noch das Ziel (engl. target = Ziel),<br />
also < a href="mehr.htm" target="inhaltsframe">. Klicken wir nun auf diesen Link mit Target<br />
in dem Frame Steuerleiste, wird nach dem Klick in dem Inhaltsframe die HTML-Datei<br />
"mehr.htm" geladen.<br />
Dadurch ist es sehr einfach, eine Steuerleiste zu erstellen, die einfach zu aktualisieren ist, da<br />
sie nur einmal vorhanden ist. Doch die Nachteile sprechen gegen dieses Vorgehen, und dieser<br />
Komfort kann auch anders hergestellt werden.<br />
Aufgabe 2:<br />
Erstellen Sie eine Seite mit Frames, auf der rechts die<br />
Steuerleiste ist, die zwei interne Links und einen externen<br />
Link enthält, die alle dann im linken Fenster dargestellt<br />
werden sollen.<br />
Bei dem Setzen von Links möchte man nicht immer, dass diese dann im eigenen Frameset<br />
angezeigt werden, was auch rechtlich problematisch sein kann. Daher gibt es hier noch ein<br />
paar weitere Attribute, die im target="" angegeben werden.<br />
Wenn das Frameset beim Anklicken eines Links beendet werden soll, muss das target mit<br />
target="_parent" angegeben werden. Sind mehrere Framesets ineinander verschachtelt, muss<br />
stattdessen target="_top" angegeben werden.<br />
Aufgabe 3:<br />
Erweiteren Sie das letzte Beispiel, so dass beim Anklicken<br />
des externen Links dieser nicht im Frameset angezeigt wird,<br />
sondern wieder das ganze Browerfenster nutzt.<br />
Schachteln von Frames<br />
Frames können auch geschachtelt werden. Dadurch können dann<br />
wie in den Bildern gezeigte Aufteilungen entstehen. Gefahr ist, dass<br />
alles irgendwann zu klein wird. Der Code kann dann wie folgt<br />
aussehen:<br />
Kapitel: Frames - aus dem Rahmen fallen<br />
2<br />
1<br />
8
Ihr Browser kann leider keine eingebetteten Frames anzeigen:<br />
Sie können die eingebettete Seite über den folgenden<br />
Verweis aufrufen:<br />
http://www.sprichwort-des-tages.de/zitat.htm<br />
<br />
<br />
Attribute zu iFrame<br />
Es stehen folgende Attribute zur Verfügung: die Breite (width) und die Höhe (height), die<br />
sowohl relativ über Prozente auch absolut in Pixel eingegeben werden können.<br />
Für die Bildlaufleiste:<br />
• scrolling="yes" - Bildlaufleisten erzwingen,<br />
• scrolling="no" - Bildlaufleisten unterdrücken<br />
• scrolling="auto" - automatisch, je nach Platzbedarf (ist Voreinstellung)<br />
Rahmenbreite<br />
• frameborder="0" - Rahmen nicht sichtbar<br />
• frameborder="1" - Rahmen sichtbar<br />
Im obigen Beispiel ändert sich nun nicht viel zum Testen, da nur einmal pro Tag der Spruch<br />
sich ändert. Testen Sie anhand der folgenden Aufgabe die Vorteile von iFrames. Es können<br />
über iFrames auch Webapplikationen einbinden.<br />
Aufgabe: interaktiven Terminkalender einbinden<br />
Binden Sie den kostenlosen Terminkalender von www.termine-verwalten.com ein. Wenn Sie<br />
sich nicht anmelden möchten, nutzen Sie einfach den Demo-Zugang ( http://www.termineverwalten.com/kalender.php?benutzername=Demo<br />
)<br />
Kapitel: iFrames<br />
2<br />
2<br />
0
von mir bevorzugte Software<br />
Hier finden Sie die von mir bevorzugte Software. Natürlich ist so etwas immer<br />
Geschmackssache, und bekanntlich kann man über Geschmack ja gut streiten - aber als<br />
Wegweiser und Anregung, welche Software einem helfen kann ...<br />
F=Freeware; S=Shareware; P=Payware<br />
Name Beschreibung & Link Status<br />
HTML Editor<br />
Phase 5 von Ulli<br />
Meybohm<br />
Xenu's Link<br />
Sleuth<br />
Der HTML-Editor schlechthin - Meine Wertung:<br />
nonplusultragut<br />
Jede Menge Informationen und der Download sind im<br />
HTML-Editor Portal zu finden.<br />
http://www.qhaut.de/<br />
Ideal, um komplette Websites auf gebrochene Links<br />
zu überprüfen. Sie erhalten auf Wunsch einen Bericht<br />
in HTML. Zusätzlich kann die Software einem sehr<br />
behilflich sein beim Erstellen von Sitemaps!<br />
System: Win9x/NT<br />
Eine deutsche Anleitung ist unter<br />
http://www.aspheute.com/artikel/20010518.htm zu<br />
finden.<br />
http://home.snafu.de/tilman/xenulink.html<br />
Sizer Webseiten für verschiedene Auflösungen optimieren<br />
ist mit diesem Tool einfach. Ein Klick mit der rechten<br />
Maustaste auf den rechten unteren Rand und es kann<br />
die Größe gewählt werden. (640 x 480 / 800 x 600 /<br />
1024 x 768 oder beliebig einstellbar)<br />
http://www.jugglesaver.co.uk/sizer.html<br />
FTP-Uploader Programm zum ftp-Upload auf Server. In Deutsch<br />
und mit Anleitung auf der Seite<br />
http://www.ftp-uploader.de<br />
OpTool Damit kann schnell die erstellte Seite in mehreren<br />
Browsern kontrolliert werden. So entfällt das lästige<br />
"URL kopieren - anderen Browser starten - URL<br />
einfügen" - Spiel. Zusätzlich kann die Größe des<br />
Fensters gewählt werden. (640 x 480 / 800 x 600 /<br />
1024 x 768 oder beliebig einstellbar)<br />
F/S<br />
F<br />
F<br />
F/S<br />
F<br />
Kapitel: von mir bevorzugte Software<br />
2<br />
2<br />
1
FileZilla (FTP-<br />
Programm)<br />
JavaScript<br />
http://www.kreacom.dk/tools/optool/<br />
sehr gutes FTP-Programm zum Datei-Upload auf<br />
Server. In Deutsch und bietet Möglichkeiten für<br />
verschlüsselten Upload (sFTP).<br />
sourceforge.net/projects/filezilla<br />
Da ich es durch die zahlreichen Browser-Inkompatibiltäten als müßig empfinde, JavaScript<br />
im Tiefgang zu vermitteln, und vor allem da dafür wohl mehrere Tage Zeit zu veranschlagen<br />
sind, gibt es hier die Basics, um bereits fertige JavaScripte in die eigenen HTML-Seiten zu<br />
integrieren.<br />
Bei JavaScript handelt es sich um eine Programmiersprache, die von Netscape eingeführt<br />
wurde. Daher kann der Netscape Browser in diesem Bereich auch meist ein wenig mehr als<br />
der von Microsoft. Und auch hier liegt schon die große Gefahr. Es gibt kleine aber feine<br />
Unterschiede, ansonsten funktioniert das eingebaute JavaScript-Programm nur bei einigen<br />
Surfern.<br />
Aber vor den Nachteilen schauen wir uns jetzt erstmal Aufbau, Implementierung und<br />
Möglichkeiten an.<br />
JavaScript ist wie HTML im Klartext lesbar. Es kann entweder direkt in die HTML-Seite mit<br />
aufgenommen oder als eigene Datei ausgelagert werden. Zum Auslagern kommen wir später<br />
noch.<br />
Oft (nicht immer) wird das JavaScript im Kopfbereich aufgenommen. Dadurch soll<br />
sichergestellt werden, dass es bereits vor dem ersten Aufruf geladen wurde.<br />
z. B.<br />
<br />
Seite mit JavaScript<br />
<br />
<br />
<br />
F<br />
Kapitel: JavaScript<br />
2<br />
2<br />
2
<br />
<br />
<br />
Hier anklicken, dann wird dieses JavaScript-Beispiel ausgeführt.<br />
Der Programmteil wird immer auskommentiert, also zwischen gesetzt. Somit ist<br />
er für Browser, die kein JavaScript können, unsichtbar.<br />
Natürlich soll nicht jedes JavaScript sofort bei Aufruf der Seite gestartet werden. Daher gibt<br />
es die Möglichkeit, Funktionen zu definieren. Diese Funktionen können dann durch Aktionen<br />
auf der Seite aufgerufen werden. Im nächsten Beispiel wird erst nach Drücken einer<br />
Schaltfläche (Button) das JavaScript ausgeführt.<br />
<br />
<br />
JavaScript-Programmausführung aufgrund Button<br />
<br />
<br />
alert("Datum & Uhrzeit: " + Date() + " - carpe diem ");<br />
<br />
<br />
<br />
<br />
<br />
<br />
Kapitel: JavaScript<br />
2<br />
2<br />
3
<br />
Hier anklicken, dann wird dieses JavaScript-Beispiel 2 ausgeführt.<br />
Als nächstes basteln wir uns einen rudimentären Passwortschutz. Integriert dazu folgendes<br />
Script. Die Funktionsweise wird nach dem Script erklärt.<br />
<br />
<br />
Passwortschutz<br />
<br />
<br />
<br />
<br />
<br />
<br />
Kennwort:<br />
<br />
<br />
<br />
Kapitel: JavaScript<br />
2<br />
2<br />
4
<br />
<br />
Schauen wir uns den Passwortschutz von hinten an. Wir haben im HTML-Code ein Formular,<br />
das den Namen "Formularname" hat. In dem Formular gibt es ein Feld mit dem Namen<br />
"dateiname". Sobald nun der Button angeklickt wird, wird die oben definierte Funktion<br />
"passwort()" aufgerufen.<br />
In der Funktion "passwort()" wird nun eine neue Seite (URL) aufgerufen mit den<br />
eingegebenen Daten aus dem Formular. Die Funktion baut aus der Eingabe eine URL<br />
zusammen und versucht nun, diese URL zu laden. Ist das richtige "Passwort" (eigentlich die<br />
URL der so geschützen Seite) eingegeben, wird durch die Funktion die richtige URL erzeugt<br />
und diese Seite angezeigt. Wenn eine falsche Eingabe erfolgt, erhält man nur eine<br />
Fehlermeldung in Form von "404 - Seite existiert nicht"!<br />
Dies ist nur ein sehr rudimentärer Schutz und hat so seine Tücken. Aber für ein paar Zeilen<br />
Code ist er nicht schlecht und demonstriert den Gebrauch von Variablen.<br />
Aufgabe Passwortschutz:<br />
Erstellen Sie 2 Seiten. Die zweite "geschützte" Seite soll<br />
durch die erste Seite aufgerufen werden, wenn das richtige<br />
Passwort eingegeben wird. Auf der ersten Seite wird die<br />
Passwortabfrage integriert.<br />
Es gibt noch weitere Möglichkeiten, die Scripte starten zu lassen. Der Weg über den Button<br />
ist nur eine Möglichkeit.<br />
• bei Abbruch - onAbort<br />
• beim Verlassen - onBlur<br />
• bei erfolgter Änderung - onChange<br />
• beim Anklicken - onClick<br />
• bei doppeltem Anklicken - onDblClick<br />
• im Fehlerfall - onError<br />
• beim Aktivieren - onFocus<br />
• bei gedrückter Taste - onKeydown<br />
• bei erfolgtem Tastendruck - onKeypress<br />
• bei losgelassener Taste - onKeyup<br />
• beim Laden einer Seite - onLoad<br />
• bei gedrückter Maustaste - onMousedown<br />
Kapitel: JavaScript<br />
2<br />
2<br />
5
• bei weiterbewegter Maus - onMousemove<br />
• beim Verlassen des Elements mit der Maus - onMouseout<br />
• beim Überfahren des Elements mit der Maus - onMouseover<br />
• bei losgelassener Maustaste - onMouseUp<br />
• beim Zurücksetzen des Formulars - onReset<br />
• beim Selektieren von Text - onSelect<br />
• beim Absenden des Formulars - onSubmit<br />
• beim Verlassen der Datei - onUnload<br />
• bei Verweisen - javascript:<br />
Näheres zu diesen Aufrufmöglichkeiten finden Sie unter<br />
http://de.selfhtml.org/javascript/sprache/eventhandler.htm<br />
Da wenig Leute Zeit haben, sich in JavaScript tief hineinzuknien, besteht der wichtigste Part<br />
darin zu verstehen, wie die Aufrufe möglich sind, wie Parameter (Zusatzangaben) übergeben<br />
werden können und woher man dann bereits fertige Scripte bekommt.<br />
Eine sehr schöne Sammlung an brauchbaren Scripten ist unter folgendem Link zu finden:<br />
http://www.24fun.com<br />
Beachten Sie dabei aber immer, dass auch auf JavaScripten ein Copyright liegen kann. Also<br />
sollten Sie vor Einsatz eines Scriptes den Autor kurz um Erlaubnis bitten, wenn diese nicht<br />
bereits im Script ausdrücklich gegeben wurde!<br />
Auslagern von Scripten<br />
Bei umfangreichen Scripten oder bei Scripten, die auf mehreren Seiten benutzt werden,<br />
sollten diese ausgelagert werden! Dadurch wird der HTML-Code wieder schlanker und<br />
redundanter Code (doppelt und dreifach) wird vermieden.<br />
Dazu wird der Code des JavaScripts in eine extra Datei ausgelagert, z.B. berechnung.js<br />
In der HTML-Seite erfolgt anstatt dem JavaScript im Kopfbereich dann folgende Eintragung:<br />
<br />
<br />
Tipps & Tricks<br />
Kapitel: JavaScript<br />
2<br />
2<br />
6
Wenn man unbedingt mit Frames arbeiten will bzw. muss, kann mit folgendem JavaScript<br />
eine Abfrage gefahren werden, ob die Seite in einem Frameset angezeigt wird oder alleine.<br />
Wird sie alleine angezeigt (z.B. Aufruf aus Suchmaschine heraus), stellt das Script fest, dass<br />
der top.frame = 0 ist (also nicht da ist) und lädt dann die Seite frameaufbau.htm.<br />
<br />
<br />
<br />
Das Script sollte also möglichst weit oben in der Seite stehen.<br />
Tipps & Tricks - Hinweis, wenn JavaScript beim Surfer<br />
deaktiviert ist<br />
Sollte JavaScript auf Ihrer Website nötig sein, sollten Sie die Besucher darauf hinweisen, die<br />
es deaktiviert haben!<br />
Dazu gibt es die HTML-Tags und <br />
Als Beispiel<br />
<br />
JavaScript-deaktiviert<br />
Um den vollen Funktionsumfang dieser Website nutzen zu können,<br />
müssen Sie JavaScript in Ihrem Browser aktivieren ...<br />
<br />
Tipps & Tricks - Ausdruck<br />
Kapitel: JavaScript<br />
2<br />
2<br />
7
Soll eine Seite direkt nach Seitenaufruf ausgedruckt werden (Druckversion einer Seite), kann<br />
dies mit folgendem Code erreicht werden<br />
Der Code muß im body-Tag stehen!<br />
Als Beispiel<br />
<br />
Soll ein Link für den Druck angeboten werden (was nur klappt, wenn JavaScript aktiviert ist),<br />
dann hilft dieser Code<br />
Seite drucken<br />
Weiterführende Links<br />
gute Sache - SelfHTML unter: http://selfhtml.teamone.de/javascript/index.htm<br />
kurz & gut:<br />
Metatags unterstützen Suchmaschinen beim Kategorisieren und geben den<br />
Lesezeichen/Favoriten Ihre Beschreibung.<br />
Metatags<br />
Metatags dienen den Suchmaschinen zum Katalogisieren und Einordnen der Seite. Hier sollte<br />
man sich besonders Mühe geben, da ein guter Platz in den Suchmaschinen (genannt Ranking)<br />
für eine größere Besucherzahl sorgt.<br />
Hier können Sie die Wirkung der Metatags bei einer Suchmaschinen begutachten.<br />
Die wichtigsten Metatags:<br />
<br />
<br />
<br />
<br />
<br />
Kapitel: Metatags<br />
2<br />
2<br />
8
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Kurze Erklärung zu den einzelnen Metatags:<br />
Titel<br />
Beinhaltet Titel oder Name der Homepage. Wird gerne vergessen! Unbedingtes Muss,<br />
ansonsten outen Sie sich als blutiger Laie.<br />
Content-Type und Language<br />
Über diese Angabe wird der europäische Zeichensatz definiert. Durch die Angabe kommen<br />
die Browser und Suchmaschinen auch mit Umlauten zurecht.<br />
author, publisher, copyright<br />
Was soll man dazu noch sagen?<br />
keywords:<br />
Alle Begriffe und Wortkombinationen, unter denen die Homepage gefunden werden soll,<br />
sollten hier auftauchen. Die Begriffe werden mit Komma oder Semikola getrennt und kein<br />
Begriff sollte öfters als 3 mal vorkommen.<br />
Es empfiehlt sich, bei den Schlüsselwörtern sowohl die Schreibweise mit äöüß als auch mit<br />
ae, oe, ue, ss zu nehmen.<br />
description:<br />
Eine kurze Beschreibung Ihrer Homepage, die nicht länger als 200 Zeichen sein sollte.<br />
Längere Beschreibungen werden von vielen Suchmaschinen nicht akzeptiert.<br />
index:<br />
Kapitel: Metatags<br />
2<br />
2<br />
9
Hier geben Sie der Suchmaschine Anweisung, ob sie auch Ihre weiteren Seiten aufnehmen<br />
soll, also nicht nur die Startseite. Dabei gibt es 4 Varianten, die teilweise noch gemischt<br />
werden können.<br />
index - die betroffene Seite soll aufgenommen werden<br />
noindex – Seite nicht aufnehmen<br />
follow - alle Links auf der Homepage weiterverfolgen und diese auch aufnehmen<br />
nofollow – die Links unberücksichtigt lassen.<br />
Und natürlich kann gemischt werden. Beispiel: "index, follow" oder "index, nofollow"<br />
revisit<br />
hier kann eine Tagesangabe gemacht werden, nach der die Suchmaschine wieder<br />
vorbeischauen kann, um neue Inhalte aufzunehmen. Beispiel "after 30 days"<br />
Die Metatags haben ihren Platz im HTML-Code zwischen und .<br />
Was bewirken die Metatag-Einträge bei<br />
Suchmaschinen?<br />
folgende Metatags beeinflussen normalerweise die Einträge in den Suchmaschinen:<br />
Abt. Erwachsenenbildung/Weiterbildung der Universität<br />
Tübingen<br />
<br />
Dies bewirkt folgendes Aussehen in Suchmaschinen:<br />
Kapitel: Was bewirken die Metatag-Einträge bei Suchmaschinen?<br />
2<br />
3<br />
0
Der - Tag erscheint in der obersten Zeile der Browser und wird auch bei setzen<br />
eines Bookmarks bzw. Favoriten in der Bookmarkliste als Beschreibung verwendet<br />
Oberste Zeile des Browser<br />
Bookmarks / Favoriten<br />
Kapitel: Was bewirken die Metatag-Einträge bei Suchmaschinen?<br />
2<br />
3<br />
1
Daher ist es besonders "schlimm", wenn kein Titel oder nur nichtssagende Titel verwendet<br />
werden!<br />
Anmerkung: Suchmaschinen durchsuchen mit Vorliebe die Titel um das Rating zu vergeben,<br />
d.h. auf welcher Position diese Seite in der Suchmaschine auftaucht.<br />
Und weil es so schön ist und man sich ohne - Tag in bester Gesellschaft befindet<br />
(2.377.939 mal am 5.12.1999) ein Negativ-Beispiel. Zur Abrundung ist natürlich wichtig,<br />
dass man keine weiteren Metatags gesetzt hat und der Anfangstext auf der Webseite nicht<br />
sonderlich aussagekräftig ist :-)<br />
bei Suchmaschinen anmelden<br />
Bevor Sie eine Site bei Suchmaschinen anmelden, achten Sie unbedingt darauf, dass alle Ihre<br />
-Tags mit sinnvollem Inhalt versehen sind und Sie die Metatags sinnvoll auf allen<br />
eingetragen haben.<br />
Die optimale Anmeldung bei Suchmaschinen erfolgt per Handarbeit. Dazu geht man in die<br />
gewünschte Suchmaschine, und dann suchen Sie nach etwas, das sich wie "URL anmelden",<br />
"Ihr URL-Eintrag (altavista.de)" oder "So schlagen Sie Ihre Website vor (yahoo.de)" oder<br />
"Homepage anmelden (web.de)" oder "Seite anmelden (lycos.de)" aussieht.<br />
Ab dann werden Sie Schritt für Schritt durchgeleitet. Je nach Suchmaschine ist eine solche<br />
Anmeldung innerhalb von 3 Minuten geschehen oder benötigt 30 Minuten.<br />
Kapitel: bei Suchmaschinen anmelden<br />
2<br />
3<br />
2
Der einfachere Weg ist, über irgendeinen Internetservice die Seiten anmelden zu lassen.<br />
Dabei wird allerdings Ihre Homepage i.d.R. nicht optimal angemeldet und Sie sind bei den<br />
Suchmaschinen eher auf den hinteren Plätzen.<br />
Bis Sie dann nach dem Anmelden Ihre Seiten in den Suchmaschinen finden, kann auch<br />
geraume Zeit ins Land gehen. Je nach Suchmaschine sind Sie bereits am nächsten Tag<br />
auffindbar (altavista.de) oder erst nach Wochen (yahoo.de).<br />
Tipp 1: Das Anmelden sollte von Zeit zu Zeit von Neuem erfolgen.<br />
Tipp 2: Richten Sie sich eine E-Mail-Adresse ein, auf die alle<br />
Anmeldebestätigungen und sonstige Nebenerscheinungen auflaufen<br />
können. Trennen Sie unbedingt diese E-Mails von Ihren normalen E-<br />
Mails. Ansonsten werden Sie sich über unzählige Junkmails wundern /<br />
ärgern.<br />
robots.txt - was es mit dieser ominösen<br />
Datei auf sich hat<br />
Suchmaschinen schicken kleine Programme im Netz umher, um neue Internetseiten zu finden.<br />
Diese Suchprogramme sind unter verschiedenen Namen geläufig: crawler, spiders, robots.<br />
Diese Programme schauen, ob eine Datei mit dem Namen robots.txt für sie bereitgehalten<br />
wird, die ihnen die Vorgehensweise vorschlägt. Darin wird meistens den Spidern erklärt,<br />
welche Dateien und Verzeichnisse nicht aufgenommen werden sollen.<br />
Warum also sollte man solche Datei anlegen, wenn alles von den Suchmaschinen gefunden<br />
werden soll? Ganz einfach: Gibt es diese Datei nicht, wird jedes Mal, wenn ein Spider anfragt<br />
eine 404 Fehlermeldung im Log produziert.<br />
Daher ist es praktisch, eine Basis-robots.txt im Hauptverzeichnis abzulegen mit folgendem<br />
Inhalt<br />
# robots.txt for http://www.ihre-domainname.de/<br />
# Zugriff auf alle Dateien erlauben<br />
User-agent: *<br />
Disallow:<br />
Bedeutung:<br />
die ersten 2 Zeilen mit dem # als Anfang sind nur Erklärungen ohne Wirkung.<br />
durch den * beim User-agent ist der Zugriff durch alle Spider erwünscht.<br />
durch keine Angaben bei Disallow ist nichts gesperrt.<br />
Kapitel: robots.txt - was es mit dieser ominösen Datei auf sich hat<br />
2<br />
3<br />
3
zu beachten<br />
Für die vorgesehene Funktion sind folgende Punkte zu beachten:<br />
• die Schreibung der Datei muss exakt so sein - also alles klein: "robots.txt".<br />
• die robots.txt muss im Hauptverzeichnis abgelegt werden.<br />
• beim Erstellen sollten Sie einen reinen Texteditor verwenden, damit nicht<br />
irgendwelche Sonderzeichen reinrutschen. Geeignete Editoren sind unter Windows<br />
das notepad.exe, unter DOS der edit.com und vi unter Linux.<br />
• beim Übertragen auf den Webserver muss die Datei im ASCII Modus übertragen<br />
werden.<br />
Domainnamen<br />
Ein Domainnamen ist z.B. www.axelino.de oder auch www.ard.de. Die Endung, hier z.B. .de,<br />
ist das Länderkürzel. Im Normalfall steht die Endung für das Land. Hierbei gibt es 4 wichtige<br />
Ausnahmen, die auch in der folgenden Tabelle aufgelistet sind. Folgend also die wichtigsten<br />
Endungen.<br />
wichtige deutschsprachige Länderkürzel<br />
.de Deutschland<br />
.at Austria - Österreich<br />
.ch Confoederatio Helvetica - Schweiz<br />
wichtige allgemeine Endungen<br />
.com Comercial<br />
.edu Education<br />
.net Network<br />
.org Organisation<br />
.gov Gouverment<br />
Immer mehr deutsche Domain-Namen sind vergeben. Ende 1999 waren es ca. 1. Mio<br />
Domains, aktuell sind schon über 10 Mio. registriert.<br />
Schöne grafische Übersichten über die Anzahl der registrierten Namen ist bei dem Deutschen-<br />
Nic unter http://www.denic.de/de/domains/statistiken/ zu finden.<br />
Als Domain-Namen bezeichnet man also das erste URL-Stück - wie z.B. "www.ard.de" oder<br />
"www.tagesschau.de" usw. Wenn Sie jetzt einen eigenen Namen möchten und nicht mehr Ihre<br />
Internetsite unter z.B. "http://homepages.uni-tuebingen.de/student/vorname.nachname/" haben<br />
wollen, sondern z.B. unter "www.ihr-nachname.de", müssen Sie eine eigene Domain<br />
anmelden bzw. reservieren.<br />
Kapitel: Domainnamen<br />
2<br />
3<br />
4
Domain-Namen reservieren<br />
Wenn Sie sich einen eigenen Domain-Namen sichern möchten, gibt es einige Dinge zu<br />
beachten. Beachten Sie, dass auf verschiedene Namen ein Markenrecht existiert ("www.einmarkenname.de"<br />
– Garant für einen Gerichtsprozess) und bei anderen Domainnamen gegen<br />
den guten Geschmack verstoßen oder religiös schwieriges Gebiet betreten wird, wo es dann<br />
schnell zu einer Abmahnung kommen kann.<br />
Um zu überprüfen, ob eine Domain noch frei ist, können Sie über den deutschen DE-NIC<br />
gehen.<br />
DE-NIC finden Sie im Internet unter "http://www.nic.de/". Mit dem Punkt Whois-Abfrage<br />
können Sie überprüfen, ob der gewünschte Namen noch frei ist. Gehen Sie am besten immer<br />
über DE-NIC. Es sind schon Fälle bekannt geworden, dass Anbieter, die Namen auf die<br />
Registrierbarkeit überprüfen, zusätzlich die Eingaben abgefangen und interessante Namen<br />
dann für sich selber gesichert haben (es gibt immer schwarze Schafe, nicht jeder Anbieter<br />
macht das!). Während der Anmeldung sollten Sie den Namen solange für sich behalten, bis er<br />
eingetragen ist. Auch das können Sie über DE-NIC überprüfen.<br />
Domains mit den Endungen .de / .com / .info / .biz / .co.uk / .ag / .net / .org / .li und mehr<br />
können Sie überprüfen unter dem Punkt Wunschdomain noch frei.<br />
Wenn Sie sich jetzt für eine Domain entschieden haben und alle rechtlichen Dinge abgeklärt<br />
haben, z.B. ob Sie bei Verwendung eines markenrechtlich geschützten Begriffs in dem<br />
gewünschten Domainnamen (auch nur in Teilen) eine Lizenz benötigen oder wer der Inhaber<br />
dieser Marke ist, kann zur Registrierung geschritten werden. Darüber finden Sie mehr bei<br />
Domains registrieren und Webplatz<br />
Auswahl von Provider zum Kaufen einer<br />
Kapitel: Auswahl von Provider zum Kaufen einer<br />
2<br />
3<br />
5
Domain und Webspace<br />
Diese Liste ist nicht vollständig und stellt keine Empfehlung dar!<br />
Die Kosten dieser Seite sollen (schauen wir mal, ob das klappt) über die eventuellen<br />
Vermittlungsprovisionen gedeckt werden. Wenn Sie also eine Domain bestellen und über die<br />
bei den Providern angegebenen Links gehen, erhalten wir Provision und unsere laufenden<br />
Kosten werden vielleicht gedeckt.<br />
Name Internet-Adresse<br />
1 & 1 www.1und1.de<br />
Strato AG www.strato.de<br />
goneo www.goneo.de<br />
Lycos webhosting.lycos.de<br />
Loomes www.loomes.net<br />
united-domains AG www.united-domains.de<br />
Wenn Sie sich also an den laufenden Kosten dieser Site über eine indirekte Spende beteiligen<br />
wollen und eh gerade für sich eine Domain reservieren, können Sie das, indem Sie die<br />
Reservierung über die obigen Links vornehmen.<br />
Aktuelle Informationen und Angebote gibt es unter:<br />
http://www.html-seminar.de/provider.htm<br />
Für eine professionelle Seite ist die richtige Providerwahl sehr wichtig. Dies kann nicht mehr<br />
über eine Auflistung geschehen. Es muss dabei berücksichtigt werden, ob vielleicht zukünftig<br />
ein Online-Shop eröffnet werden soll und inwieweit die Zugriffe der Besucher zur<br />
Verbesserung ausgewertet werden sollen. Aber für tiefer gehende Informationen stehe ich für<br />
einen Obolus gerne bereit :-)<br />
kostenloser Webspace und seine Kosten<br />
Da im Forum immer wieder in verschiedenen Bereichen das Thema auf kostenlosen<br />
Webspace und Freespace-Anbieter kommt, hier nun mein eigener persönlicher Test zu<br />
verschiedenen Anbietern (welche natürlich nicht vollständig ist!).<br />
Ich habe versucht, keine Anbieter zu nehmen, die nur Baukästen anbieten. D.h. wo man<br />
eigentlich keine komplette HTML-Seite selber hinterlegen kann und was somit im Rahmen<br />
von HTML lernen nichts verloren hat.<br />
Kriterien waren:<br />
• ftp sollte angeboten sein (und zwar kostenfrei im Paket)<br />
• PHP wäre schön, falls man mal programmieren möchte<br />
• die Menge der Werbung<br />
Kapitel: Domain und Webspace<br />
2<br />
3<br />
6
• die Unversehrtheit des Quellcodes bzw. zumindestens dass das Design dadurch nicht<br />
geändert wird<br />
Werbefrei gibt es nicht (zumindest habe ich keinen gefunden). Bei allen Anbietern müssen<br />
Werbeeinblendungen in Kauf genommen werden müssen. Die Anbieter müssen ja auch von<br />
was leben (was ja OK ist). Allerdings verbinden sich damit verschiedene Probleme – siehe am<br />
Ende des Textes.<br />
Ein Problem von diesen Werbeeinblendungen ist, dass diese dadurch gelöst werden, dass der<br />
eigene hochgeladen HTML-Code verändert wird. Dass kann dann soweit gehen, dass die<br />
Seite nicht mehr so aussieht, weil die Änderungen zu hart in den Code eingreifen und dadurch<br />
das Design verändern!<br />
Testkandidaten<br />
1. Yahoo! GeoCities<br />
2. beepworld<br />
3. Lycos Tripod!<br />
4. funpic<br />
Direkt zum Fazit<br />
kostenfreier Webspace Anbieter: Yahoo! GeoCities<br />
http://de.geocities.yahoo.com/<br />
Beim Anmelden wird man nach den Anzeigenthemen auf der Website gefragt. Das ist dazu<br />
gut, dass die Werbung später dann besser passt, damit der Anbieter Changen hat, etwas zu<br />
verdienen.<br />
Wenn man bereits ein Yahoo-E-Mail-Konto hat geht’s schneller beim anmelden. Man erhält<br />
nach der Anmeldung (wie bei allen Anbietern, deshalb wird es jetzt nur einmal erwähnt) eine<br />
Bestätigungsmail, in der man per Link seine E-Mail-Adresse verifiziert. Dann geht’s zum<br />
einloggen und man kann seine Website per FTP hochladen.<br />
Dass ganze Prozedere lief problemlos ab. Die hochgeladene Website dann mit<br />
Werbeeinblendung:<br />
Kapitel: kostenloser Webspace und seine Kosten<br />
2<br />
3<br />
7
Allerdings kann man die Werbung zusammenfalten und diese gehört nicht zu den größten<br />
(vielleicht ja Zufall und es wird nach Tagesform unterschiedliche Werbegrößen verwendet).<br />
Zusammengefaltet ist die Werbung sehr klein am oberen rechten Rand. Allerdings entspricht<br />
die Website nicht mehr dem Original.<br />
Kapitel: kostenloser Webspace und seine Kosten<br />
2<br />
3<br />
8
In Quellcode wird automatisch eingegriffen. Beim ersten Aufruf der Seite, ist noch kein<br />
weißer Rand oben, beim zweiten Mal dann schon (es wurde JavaScript vom Freespace-<br />
Anbieter für die Werbung integriert).<br />
Weiterhin hat die fehlerfreie Seite nach dem Hochladen Fehler, da anscheinend das JavaScript<br />
nicht ganz auf dem Laufenden ist – Browser hier IE7. Immerhin kann man das überdeckende<br />
Fenster klein machen.<br />
Eine Möglichkeit, die eigenen HTML- und Bilddateien per Webformular hochzuladen, ist<br />
möglich (aber nicht sinnvoll).<br />
Kapitel: kostenloser Webspace und seine Kosten<br />
2<br />
3<br />
9
Test PHP: PHP ist nicht vorhanden - Dateien mit .php werden nicht angezeigt<br />
kostenfreier Webspace Anbieter: Beepworld<br />
Ist bei mir schlicht und ergreifend mit den anfangs genannten Kriterien durchgefallen. Die<br />
fehlenden Informationen haben mich zum Anmelden verleitet. Während der Anmeldung die<br />
erste Verwunderung bei mir: es gibt ein Punk mit web-surance Domainschutz und das<br />
Kästchen ist bereits als Vorgabe angekreuzt (ist angeblich kostenlos – aber eigentlich wollte<br />
ich Webspace und nicht irgendeine Versicherung).<br />
Nach dem Einloggen dann eine weitere Ernüchterung, außer einem Homepagebaukasten (also<br />
nicht zu unterstützen von HTML lernen) gibt es nicht einmal kostenlos FTP. FTP nur mit<br />
Aufpreis, was dann Rundum-Sorglos-Paket genannt wird und als günstig angepriesen wird.<br />
Allerdings sind über 3 Euro NICHT günstig. Da kann ich gleich zu einem normalen Provider<br />
gehen und bekomme es um 1,25 Euro - das ist günstig!<br />
FAZIT: nichts zum HTML lernen, kein FTP, mangelnde Beschreibung am Anfang (sonst<br />
hätte ich mich nicht einmal angemeldet und somit muss B. mit dieser meine Kritik leben und<br />
bekommt nicht einmal einen Link hier!<br />
kostenfreier Webspace Anbieter: Tripod<br />
www.tripod.lycos.de<br />
Kapitel: kostenloser Webspace und seine Kosten<br />
2<br />
4<br />
0
Geworben wird mit: Erstellen Sie Ihre eigene Websites mit wenigen Klicks. Komplett<br />
kostenlos! Neu jetzt mit 1024MB Speicher und PHP5. Tripod Features: PHP, MySQL, FTP,<br />
WebFTP, Gästebuch, Formulare, Counter, Statistiken, Umfragen<br />
Soweit so gut – das lasst einen gespannt sein, inwieweit die Werbung sich mit der Realität<br />
deckt.<br />
Nach dem Anmelden und dem hochladen der Website per FTP (was beides problemlos war)<br />
dann die größere Werbefront. Hier sagt ein Bild mehr als tausend Worte:<br />
Man kann die untere Werbung verkleinern:<br />
Kapitel: kostenloser Webspace und seine Kosten<br />
2<br />
4<br />
1
Oben bleiben die Einblendungen von in meinem Fall (lusterweise) der Google Anzeigen.<br />
Lycos Tripod versucht also seine Kosten mit Werbeeinnahmen von Google zu decken:). Ein<br />
bisschen wenig Werbung hätte es auch getan.<br />
Kapitel: kostenloser Webspace und seine Kosten<br />
2<br />
4<br />
2
Der PHP-Test war problemlos. Inwieweit alle PHP Möglichkeiten vorhanden sind müsste<br />
man ausprobieren (bei jedem Anbieter wurden nur die Grundfunktion getestet).<br />
Der PHP-Befehl "echo" und phpinfo(); wurde ausgeführt. So ist auch die PHP-Version am<br />
schnellsten zu sehen.<br />
kostenfreier Webspace Anbieter: Funpic<br />
http://www.funpic.de/<br />
Bei Funpic gibt es noch mehr Speicherplatz 2500 MB, Traffic inklusiv, PHP, FTP und<br />
MySQL. Hört sich vielversprechend an. Anmeldprozedur ähnlich wie bei den anderen mit E-<br />
Mail und Link. Nach dem Einloggen war ich vom Design der Oberflache ganz angetan. Da<br />
hat jemand mit Liebe design und auch die Hilfen waren beim überlfiegen in Ordnung. Der<br />
FTP-Zugang muss erst von einem selber freigeschaltet werden (dabei vergibt man gleich das<br />
Kennwort).<br />
So, Daten hochladen ohne Problem und Website ansehen.<br />
Was bisher überzeugt war, hatte nun prompt die größte Werbung vorschaltet. Ob es Zufall<br />
war, oder nicht, bleibt mal dahingestellt. Aber die Jungs müssen auch Ihr Geld verdiene. Das<br />
im Hintergrund ist die Website.<br />
Kapitel: kostenloser Webspace und seine Kosten<br />
2<br />
4<br />
3
Nach Wegklicken der Werbung dann die eigene Website in voller Pracht. Und was mir<br />
aufgefallen ist – kein JavaScript Fehler (wie bei manchen anderen, der dann im unteren linken<br />
Eck angezeigt werden würde).<br />
Der PHP-Test lief auch sauber und zur Zeit das aktuelle PHP 5.<br />
Kapitel: kostenloser Webspace und seine Kosten<br />
2<br />
4<br />
4
Insgesamt soweit in Ordnung.<br />
Fazit zur Testaktion von Anbieter kostenfreiem Webspace<br />
(Freespace)<br />
Es gibt im Leben nicht für Umsonst. Zwar kostet hier der Webspace kein Geld, allerdings<br />
"erkauft" man das sich mit fremder Werbung. Durch die Werbung kann es notwendig werden,<br />
dass man ein Impressum auf der Website hinterlegt, da man jetzt nach deutschem Rechts<br />
bereits in einen geschäftsmäßigen Bereich reinrutschen kann! Flapsig gesagt: es ist keine<br />
Hobbies-Seite mehr, da ja Werbung darauf ist. Juristen mögen mir die flapsige Umschreibung<br />
verzeihen.<br />
Das Werbung Geld bringen kann, ist abhängig vom Inhalt der Seite. Wenn man nun wirklich<br />
Inhalt auf seiner Seite hat, verdienen der kostenfreien Webspace Anbieter. Natürlich haben<br />
diese auch Kosten für den Traffic der Seite.<br />
Läuft also was mit der Seite, ist es naheliegend, selber das Geld für die Werbeeinnahmen<br />
einzustreichen (siehe http://www.geld-verdienen-durch-internet.de) und selber z.B. AdSense<br />
aufzuschalten. Es bleibt also hier jedem selber überlassen, sich zu überlegen, ob aus seiner<br />
Website mehr wird und eine Leserschaft sich für die Inhalte findet (z.B. dür die Hobbies oder<br />
was immer auf der Website auftaucht) oder man zum herumtesten mit HTML einen<br />
Webspace benötigt. Überlegen sollte man es sich fast im Vorfeld, denn ein Domain mit<br />
eigenen Domainnamen (sofern er gut ist) und gut besucht wird, nimmt im Lauf der Zeit an<br />
Wert zu. Das hat man natürlich bei den Freehostern nicht, da man ja nur eine Subdomain hat.<br />
Kapitel: kostenloser Webspace und seine Kosten<br />
2<br />
4<br />
5
Sobald man bei den Freespace-Anbieter hochstuft (und Geld ausgibt), kann ein normaler<br />
Provider billiger sein (siehe Goneo).<br />
Soviel dazu – somit kann ich nun immer vom Forum auf diesen Beitrag verweisen.<br />
Recht kann das Gegenteil von Links sein!<br />
Beim Erstellen von Internetseiten muss immer der rechtliche Aspekt bedacht werden. Dazu<br />
gehören nicht nur das Copyright und das Recht an Bild, Wort und Ton, sondern neuerdings<br />
auch Links.<br />
Inhalte<br />
Wer Inhalte von einer Website 1 zu 1 ohne Einwilligung oder Erlaubnis (am besten<br />
schriftlich) übernimmt, darf sich nicht wundern, wenn er Stress bekommt. Nette Dienste im<br />
Internet wie z.B. http://www.copyscape.com finden schnell Plagiate. (Hallo<br />
http://web.tiscali.it/aaaxvoqb/ und http://fxpisaniceidea.tripod.com/ ;-)<br />
Bilder<br />
Bilder, auch wenn es nur Ausschnitte sind, unterliegen ebenfalls dem Urheberrecht des<br />
Photografen. Also Finger weg davon<br />
Domainnamen & Recht<br />
Hier bringt Florian Huber, Wirtschaftsjurist (Univ. Bayreuth) Wissenswertes zu<br />
Domainnamen und 7 goldenen Regeln für die Registrierung. Er hat auch einen sehr<br />
informativen Newsletter.<br />
http://www.domain-recht.de<br />
Bücher zum Thema<br />
• Die rechtssichere Homepage. Was Sie beachten müssen, bevor Sie Ihre Homepage<br />
online stellen - von Christina Klein<br />
• Ihr rechtssicherer Internetauftritt. Von der Infoseite bis zum Online-Shop - ohne<br />
Rechtsstreit! von Georg F. Schröder<br />
Mehr Informationen zu den Büchern erhalten Sie durch Anklicken derselben.<br />
Kapitel: Recht kann das Gegenteil von Links sein!<br />
2<br />
4<br />
6
Geld verdienen mit der eigenen Homepage<br />
Anmerkung: Eine weitere Seite von uns, die sich tiefergehend mit dieser Thematik<br />
beschäftigt, finden Sie unter: http://www.geld-verdienen-durch-internet.de/<br />
Der Traum eines jeden - einmaliger Einsatz und dann nebenher ohne weiteren Aufwand Geld<br />
verdienen. Dies ist in begrenztem Umfang möglich. Dazu werden Werbelinks eingebaut, die<br />
auf Buchläden, T-Shirt-Druckereien, Webspace-Verkäufer oder Reisebüros verweisen.<br />
Natürlich sollte sich jeder bewusst sein, dass im Normalfall der Website-Besucher nur auf für<br />
ihn interessante Links klicken wird. So macht auf einer Seite über Karibikurlaub durchaus ein<br />
Link auf ein Reisebüro Sinn. Hat der Werbepartner keinen Zusammenhang zum Inhalt der<br />
Seite, ist es unwahrscheinlich, dass irgend jemand auf den Werbelink klickt, höchstens aus<br />
Verzweiflung, weil er nichts brauchbares auf der Homepage findet und schnell weg will.<br />
Partnerprogramme (engl. Affiliate Programs)<br />
Um Anbieter von Produkten bzw. Werbung mit Anbietern von Internetseiten (also mit Ihnen)<br />
zusammenzubringen, gibt es Partnerprogramme. Bei den Partnerprogrammen haben Sie als<br />
Internetseitenbetreiber eine große Auswahl an Firmen, bei denen Sie für Werbung bzw.<br />
Empfehlung, platziert auf Ihrer Internetseite, Geld verdienen.<br />
Vorteile der Partnerprogramme:<br />
• Die Partnerprogramme bieten Ihnen verschiedenste Werbepartner an.<br />
• Die Partnerprogramme managen die Verwaltung der Einkünfte (auch bei<br />
verschiedenen Werbepartern).<br />
• Es werden umfangreiche Statistiken bereitgestellt<br />
• und das wichtigste, die Partnerprogramme zahlen das verdiente Geld dann<br />
gesammelt an Sie aus.<br />
Als Beispiel finden Sie bei Zanox über 1100 Partnerprogramme. Die Anmeldung kostet Sie<br />
als Seitenbetreiber normalerweise nichts - melden Sie sich einfach mal direkt bei den<br />
folgenden Partnerprogrammen an. So können Sie schnell sehen, ob ein passender Partner für<br />
Sie und Ihre Website existiert (normalerweise sind immer interessante dabei) und unter<br />
Umständen können Sie schon in 1 Stunde mit Ihrer Website Geld verdienen. Wichtig ist, dass<br />
Sie bei der Anmeldung den Internet Explorer verwenden, da beide Seiten ein<br />
Darstellungsproblem mit dem Firefox zur Zeit haben.<br />
Folgende Partnerprogramme kann ich empfehlen:<br />
• Zanox (über 1100 Partnerprogramme)<br />
• ADbutler<br />
Kapitel: Geld verdienen mit der eigenen Homepage<br />
2<br />
4<br />
7
Kostenlos anmelden und testen! Der erwirtschaftete Betrag wird erst ab einer bestimmten<br />
Höhe ausgezahlt (z.B. 25 €), aber bekanntlich macht Kleinvieh auch Mist.<br />
Bei anderen Partnerprogrammen sollte man immer darauf achten, ob die Teilnahme ohne<br />
Kosten für den Teilnehmer (also für einen selber) ist und bei ausländischen<br />
Partnerprogrammen, ob die Auszahlungsmodalitäten gut geregelt sind und nicht das Einlösen<br />
des Schecks mehr Gebühren verursacht als der Gegenwert des Schecks ist.<br />
Bei obigen Partnerprogrammen werden umfangreiche Online-Statistiken angeboten, die Sie<br />
jederzeit abrufen können. So können Sie Ihre Seite/Werbung nachoptimieren.<br />
Für einen Einblick in den Affili-Markt ist der kostenlose Newsletter `Geld verdienen im<br />
Internet` von 100partnerprogramme interessant.<br />
Konditionsmodelle - verschiedene Aktionen, um durch<br />
Ihren Besucher Geld zu verdienen<br />
Pay per Klick<br />
Hierbei wird Geld verdient, wenn ein Klick auf das Werbemittel (Banner, Textlink) erfolgt.<br />
Pay per Lead<br />
Hierbei wird davon ausgegangen, dass der Besucher irgendeine Aktion macht. Also bei einem<br />
Preisrätsel mitmacht, Kontakt aufnimmt oder Informationen anfordert. Im Klartext: Dabei<br />
werden gerne Adressen gesammelt; ob man das mag, bleibt jedem selber überlassen, vor<br />
allem den Besuchern, die ja freiwillig ihre Daten hergeben (oder auch nicht :-)<br />
Wenn Sie sich beispielsweise über folgenden Link bei Google Adsense anmelden, ist das der<br />
Lead:<br />
Ähnlich dazu ist das "Pay per SignUp", wenn also die Bestellung z. B. eines Newsletters<br />
erfolgt.<br />
Pay per Sale<br />
Wenn durch den Besuch auch etwas verkauft wird. Das beste Beispiel hierzu ist Amazon.<br />
Dabei berechnen sich die Einnahmen in Abhängigkeit vom Verkaufspreis - es erfolgt eine<br />
prozentuale Beteiligung zwischen 5 und 15 Prozent.<br />
Beispielweise, wenn Sie eine Handycarte bei SIMply bestellen: Einfach-Mobilfunk.de simply<br />
the best!<br />
(klasse Anbieter ohne Grundgebühr)<br />
Kapitel: Geld verdienen mit der eigenen Homepage<br />
2<br />
4<br />
8
Beispiele dafür finden Sie auf der Seite unter der Bücherseite buecher.htm<br />
bzw. kann über ein Suchfeld zu Amazon gelangt werden<br />
Schnellsuche<br />
Alles<br />
Suchbegriff<br />
HTML<br />
Geld eintreiben - eigenen Content verkaufen<br />
Für Kleinbeträge (unter € 10) kommt die Möglichkeit eines Einzuges per 0900 Nummer, die<br />
über eine andere Firma läuft, in Frage.<br />
Auf der eigenen Webseite wird der Besucher aufgefordert, eine 0900-Telefonnummer (in<br />
anderen Ländern andere Nummern) anzurufen. Dort erhalten diese dann ein Passwort. Mit<br />
jedem Anruf wird ein neues Passwort generiert.<br />
Dieses Passwort gibt der Besucher dann wieder auf der Homepage ein. TeleWord prüft dieses<br />
Passwort, wobei dieser Vorgang für den Besucher nicht sichtbar ist.<br />
Ist das Passwort korrekt (hat der Besucher also wirklich angerufen), so erhöht sich der eigene<br />
Kontostand bei TeleWord. Einmal im Monat (wenn der Betrag hoch genug ist) wird das Geld<br />
ausgezahlt.<br />
Der Besucher, sofern das Passwort richtig war, erhält dann die versprochene Serviceleistung<br />
oder den Content.<br />
Und zusätzlich steckt hinter dem Teleword-Logo noch ein Partnerprogramm - für jeden<br />
geworbenen Partner wird man an dessen Umsätzen beteiligt. Also wenn Sie Teleword zum<br />
Geldverdienen nutzen möchten, dann bitte erst über das Banner oder diesen Link und ich<br />
freue mich :-).<br />
Tipps zum Geld verdienen mit der eigenen Homepage<br />
Kreativität hilft. Die Werbelinks können Sie auch in Ihre versendeten E-Mails aufnehmen.<br />
Richten Sie einen Textlink in Ihrem E-Mail-Programm als Signatur entsprechend ein.<br />
Kapitel: Geld verdienen mit der eigenen Homepage<br />
2<br />
4<br />
9
Einmal Aufwand und automatisch unter jeder E-Mail. Zusätzlich haben Sie so den Effekt,<br />
dass die angeschriebenen Empfänger Sie im Normalfall kennen und so die Empfehlung noch<br />
mehr Gewicht hat.<br />
Achten Sie darauf, dass Sie Ihre Seite nicht mit Werbung überladen, als wären die<br />
Webseiten nur zum Geld verdienen da.<br />
Halte Sie Ihre Webseiten ruhig. Blinkende Werbebanner haben laut einer Untersuchung<br />
weniger Effekt (und somit wird weniger Geld verdient) als gezielt eingesetzte Links. Wählen<br />
Sie die Werbemittel mit Bedacht aus - die Anbieter stellen meistens verschiedene Formen zur<br />
Verfügung (sowohl Werbebanner wie nur Textlinks).<br />
Kapitel: Geld verdienen mit der eigenen Homepage<br />
2<br />
5<br />
0
Tipps & Tricks<br />
Größenüberprüfung durch IE ganz einfach realisierbar<br />
Zum Überprüfen der Wirkung von Internetseiten muss die fertige Seite überprüft werden, wie<br />
diese mit verschiedenen Auflösungen (640 x 480; 800 x 600; 1024 x 768) aussieht.<br />
Entwickeln sollten Sie auf einem Monitor, auf dem mindestens die Auflösung 1024 auf 768<br />
läuft!<br />
1. Eintrag in die URL von javascript:window.resizeTo(640,480)<br />
2. Nun kann davon ein Favorit (Bookmark) gemacht werden; noch besser ist es, den Link<br />
in die Linkliste zu ziehen!<br />
3. In der Linkleiste kann über die rechte Maustaste dem Ganzen ein sinnvoller Name<br />
gegeben werden!<br />
4. Das gleiche sollte nun noch mit den restlichen wichtigen Auflösungen gemacht<br />
werden.<br />
o javascript:window.resizeTo(800,600)<br />
o javascript:window.resizeTo(1024,768)<br />
Das Ganze sieht dann fertig so aus:<br />
Bilder ausschalten - Design überprüfen (IE)<br />
Einige Surfer haben die Bilder ausgeschaltet. Damit Ihr Design nicht zusammenbricht und<br />
Ihre Steuerung im Nirwana verschwindet, müssen Sie Ihre Entwicklung darauf überprüfen,<br />
was passiert, wenn die Bilder ausgeschaltet sind.<br />
Der einfachste Weg dazu ist, wenn zusätzlich zum IE-Explorer noch das vom selben<br />
Hersteller angebotene Toolkit mit dem schönen Namen "Power Toys für den IE" eingesetzt<br />
wird.<br />
Nach der Installation haben Sie den ImageToggler in der Linkzeile als Button und können<br />
bequem Bilder ein- und ausschalten (und auch das Laden von Bildern aus dem Internet<br />
abstellen).<br />
Kapitel: Tipps & Tricks<br />
2<br />
5<br />
1
Wird nach dem Abschalten der Bilder kein Text als Ersatz angezeigt, sollten Sie dringend die<br />
ALT-Tags bei den Bildern eintragen!<br />
Weitere nützliche Tools in diesem Paket<br />
• Open Frame: Öffnet Frames in einem neuen Browser-Fenster<br />
• Quick Search: Hiermit kann man für die einzelnen Suchdienste Abkürzungen<br />
benutzen. Man braucht dann nur noch die Abkürzung gefolgt vom Suchbegriff in die<br />
Adressleiste eingeben.<br />
• Zoom In/Zoom Out: Mit einem Mausklick kann man jede Grafik vergrößern bzw.<br />
verkleinern.<br />
• Text Highlighter: Der Textmarker fürs Internet.<br />
• Web Search: Startet eine Anfrage bei Suchmaschinen nach dem markierten Wort.<br />
• Links List: Erstellt eine Liste mit allen Links der Webseite.<br />
Design bis an den Rand<br />
Bei Browsern wird erst die ganze Fläche genutzt, wenn im Body-Tag folgende Sequenz<br />
auftaucht:<br />
<br />
Im Vollbildmodus Präsentieren<br />
Kapitel: Tipps & Tricks<br />
2<br />
5<br />
2
Bei den meisten Browser kann mit der F11-Taste in den Vollbildmodus gewechselt werden,<br />
bzw. wieder durch F11 der Vollbildmodus verlassen werden. Im Vollbildmodus entfällt der<br />
Browserrahmen und es wird nur noch der Inhalt angezeigt. Ideal z.B. im Schaufenster,<br />
Messen oder bei Vorträgen und Präsentationen.<br />
Offline Präsentieren mit IE<br />
HTML-Seiten offline automatisch als Vollbild (Kioskmodus) präsentieren kann der IE mit<br />
dem Eintrag<br />
iexplore -k [site]<br />
Beenden der Präsentation mit [ALT] + [F4]<br />
Vor- und Nachteil - je nach dem: aus dem Kioskmodus kann nicht in den Normal-Modus<br />
gewechselt werden. Mit [STRG]+ [N] kann ein neues Fenster im Normal-Modus geöffnet<br />
werden.<br />
Typografie im Internet<br />
Für alle, die aus dem klassischen Druckbereich kommen - Internet ist etwas komplett anderes,<br />
und wenn der "klassische Drucker" sich nicht von seiner Welt lösen kann, ist er als<br />
Webdesigner völlig fehl am Platz!<br />
Anbei ein paar Hinweise, die auf Webseiten weder üblich und oft nicht gangbar sind.<br />
exaktes Layout<br />
vergessen (und zwar sofort) - allein durch die unterschiedlichen Browser und<br />
Plattformen (Windows, Mac, Unix) gibt es immer Unterschiede. Zum Beispiel werden<br />
auf dem Mac i. d. R. die Schriften kleiner dargestellt.<br />
Unterschneidungen<br />
haben durchaus ihren Sinn, sind allerdings nicht in der aktuellen Browsergeneration<br />
integriert - also vergessen.<br />
erzwungene Satzumbrüche zwecks Design<br />
macht wegen der Relativität der Darstellung eigentlich keinen Sinn und wird von<br />
manchen Webdesignern meistens nur gemacht, damit der Kunde nicht weiter nervt.<br />
Wir sprechen hier nicht von Absätzen, die den Text gliedern!<br />
Kapitel: /Typografie im Internet<br />
2<br />
5<br />
3
Trennstrich, Gedankenstrich, Geviertstrich<br />
Trennstrich -<br />
Trennstriche (Divis, Bindestriche) werden nur zwischen Kuppelwörtern verwendet. Auf<br />
keinen Fall, um ein Wort für einen Umbruch auf die nächste Zeile zu trennen. Das ist eine<br />
Todsünde!<br />
Der Trennstich muss nicht speziell eingegeben werden - es wird das Minuszeichen verwendet.<br />
Gedankenstrich –<br />
Auf den meisten Internetseiten nicht besonders üblich, da die meisten Menschen keinen<br />
Unterschied sehen und durch die Gewohnheit meiner Meinung nach dieser Unterschied auch<br />
mehr und mehr verschwinden wird.<br />
Ein Gedankenstrich ist korrekt ein Halbgeviertelstrich - er hat genau die halbe Breite eines<br />
Gevierts. Vor und nach diesem ist ein Leerzeichen üblich. Am besten ein geschütztes<br />
Leerzeichen (wird nicht getrennt - als HMTL-Tag )<br />
Als HTML-Tag muss er gesondert ausgezeichnet werden mit dem HTML-TAG – und<br />
mit den geschützten Leerzeichen sieht das dann so aus: – (viel Spaß<br />
dabei :)<br />
Geviertstrich —<br />
Noch unüblicher im Netz - hat die Breite eines vollen Gevierts. Wird als Auslassungszeichen<br />
für Centbeträge direkt nach dem Komma gesetzt, also € 12,—<br />
Korrekte Gänsefüßchen (An- und Abführungszeichen)<br />
Auch wer hier nach typo korrekte Zeichen haben will, darf mehr arbeiten. Dabei gilt immer zu<br />
bedenken, dass je nach Land die Anführungszeichen anders gehandhabt werden :)<br />
Anführungszeichen nach Land:<br />
„in Deutschland“<br />
‚in Deutschland‘<br />
und mehr davon - andere Länder andere Sitten<br />
«Frankreich, Italien, Schweiz»<br />
»Schwedisch«<br />
und sollten Sie noch motiviert sein, dies umzusetzen, die entsprechenden HTML-Tags dazu:<br />
Kapitel:<br />
2<br />
5<br />
4
„ „ doppeltes Anführungszeichen<br />
“ “ doppeltes Abführungszeichen<br />
‚ ‚ einfaches Anführungszeichen<br />
‘ ‘ einfaches Abführungszeichen<br />
« « angewinkelte Anführungszeichen links<br />
» » angewinkelte Anführungszeichen rechts<br />
Zahlen richtig gesetzt<br />
Als Vereinfachung empfiehlt sich, zwischen den Zahlen ein geschütztes Leerzeichen zu<br />
setzen, also als HTML-Tag <br />
Telefon- und Faxnummern:<br />
werden jeweils von rechts ausgehend in Zweiergruppen aufgeteilt:<br />
Bsp: Telefon (0 70 73) 9 10 16 10<br />
Bankleitzahlen:<br />
werden von links nach rechts in 3er Gruppen aufgeteilt (also 3 3 2)<br />
Bsp: BLZ 300 902 22<br />
Kontonummern:<br />
von rechts nach links in 3er Gruppen<br />
Bsp: Konto 8 412 564 324<br />
größere Zahlen<br />
können zwecks Übersichtlichkeit in 3er Gruppen von rechts gruppiert werden.<br />
Bsp:<br />
8 300 000 Pageviews<br />
340 000 Stammkunden<br />
1 500 Neuanmeldungen<br />
Bookmarklet, Favelet<br />
Kleines Programm (eigentlich i. d. R. nur der Aufruf eines Service von einer anderen<br />
Website), dass in den Bookmarks abgespeichert wird und so im Browser direkt aufgerufen<br />
werden kann.<br />
Dadurch werden z. B. Übersetzungen realisiert (zu übersetzendes Wort markieren und das<br />
Bookmarklet aufrufen), hier auf der Website Fehler gemeldet und vieles mehr.<br />
Das Installieren der Bookmarklets ist sehr einfach - ziehen Sie einfach den Link auf ihre<br />
Lesezeichen, bzw. Leiste mit den direkten Lesezeichen. Ab jetzt können Sie per Klick das<br />
Kapitel:<br />
2<br />
5<br />
5
Programm aufrufen. Wichtig ist, das JavaScript im Browser zugelassen ist (was der Standard<br />
ist)<br />
Folgende Bookmarklets sind für Website-Ersteller<br />
interessant<br />
• Gitter im Hintergrund<br />
http://www.andybudd.com/archives/2006/07/layout_grid_bookmarklet/index.php<br />
zauber ein Gitter in den Hintergrund - damit können Maße abgeschätzt werden.<br />
Forum<br />
Fragen und Hilfe? - ab ins Forum<br />
Dort sind Sie gut aufgehoben - nicht zögern, Fragen zu stellen und auch die der anderen<br />
Teilnehmer zu beantworten. Dabei lernt man eine Menge und kommt vielleicht auf noch<br />
bessere Ideen.<br />
Lassen Sie z.B. ihre Homepage von anderen begutachten und holen Sie sich ein Paar Tipps<br />
und Ratschläge.<br />
ins Forum.<br />
Diverses<br />
Hier finden Sie Informationen rund ums Thema, wie Software, Bücher, Linklisten usw.<br />
Wenn Sie Anregungen haben, lassen Sie uns diese Zukommen.<br />
Inhalt Einheit "Netscape Composer"<br />
• Programm starten<br />
• Abspeichern der Homepage<br />
• HTML-Code ansehen<br />
• Texteingabe<br />
• Schriftformatierung<br />
o Exkurs: Relativität der Darstellung<br />
o Überschriften - Absatzgestaltung<br />
o Textausrichtung<br />
• Bilder einbauen<br />
• Hintergrundbild (Textur) einbauen<br />
• E-Mail-Adresse einbauen<br />
• Links hinzufügen<br />
• Navigationsleiste<br />
Kapitel: Forum<br />
2<br />
5<br />
6
HTML-WYSIWYG-Werkzeug<br />
Netscape Composer<br />
Programm starten<br />
Der Netscape Composer ist Bestandteil vom Netscape Browser. Zum Aufrufen gehen Sie<br />
entweder über den Menu-Eintrag "Start->Programme->Netscape Communicator-<br />
>Composer" oder über das Symbol, das sich in der unteren Leiste installiert hat.<br />
Es erscheint jetzt folgendes Fenster, in dem der Großteil leer ist - hier wird unser Inhalt Platz<br />
haben.<br />
Kapitel: /HTML-WYSIWYG-Werkzeug Netscape Composer<br />
2<br />
5<br />
7
Abspeichern der Homepage<br />
Um Computerabstürze weniger ärgerlich zu machen, sollte von Zeit zu Zeit die bereits<br />
geleistete Arbeit gesichert werden. Zum Sichern gehen Sie entweder auf der Button-Leiste auf<br />
Speichern<br />
oder über<br />
"Datei -> Speichern"<br />
Prinzipiell sollte man für seine Dateien ein Verzeichnis anlegen, in dem alle Dateien<br />
gespeichert werden. Der Dateiname für die Startseite muss index.htm lauten! Warum und<br />
wieso und weitere Tipps zu Dateinamen später im Kurs.<br />
Wenn jetzt gespeichert wird und noch kein Homepage-Titel angegeben wurde, werden Sie<br />
jetzt danach gefragt.<br />
Kapitel: /HTML-WYSIWYG-Werkzeug Netscape Composer<br />
2<br />
5<br />
8
Geben Sie dem Ganzen einen sinnvollen Namen! Dieser Namen kann später in<br />
Suchmaschinen auftauchen, ohne dass Sie darauf Einfluss haben. Dieser Titel dient also der<br />
Orientierung für den Surfer und für die Suchmaschinen. Detaillierte Informationen später im<br />
Kurs.<br />
HTML-Code ansehen<br />
Um den HTML-Code anzusehen, gehen wir in das Menü<br />
"Ansicht -> Seitenquelltext"<br />
Obwohl bisher kein Inhalt vorhanden ist, gibt es HTML-Code. Dieser HTML-Code ist das<br />
Gerüst, das jede Internetseite benötigt.<br />
Hier ist das Grundgerüst, das bei jeder HTML-Seite zu finden ist. Diese zunächst verwirrende<br />
Auflistung soll erstmal nicht stören. Wichtig zu wissen ist nur, dass später unser angezeigter<br />
Inhalt sich zwischen den TAGs<br />
<br />
Ihr sichtbarer Inhalt<br />
Kapitel: /HTML-WYSIWYG-Werkzeug Netscape Composer<br />
2<br />
5<br />
9
befindet. TAGs nennen sich die HTML Befehle. Der Aufbau ist immer der selbe. Ein TAG<br />
sitzt zwischen einem < > Es gibt einen Start-TAG < .. > und einen End-TAG . Der<br />
End-TAG ist immer derselbe Befehl wie der Start-TAG, allerdings mit einem / vorneweg.<br />
Anstatt den 2 Punkten sollte dort der HTML-Befehl eingegeben werden.<br />
Zum Beenden dieser Ansicht klicken Sie einfach auf das x des Fensters. Nicht das x des<br />
Composers!<br />
Texteingabe<br />
Wie in einer normalen Textverarbeitung kann jetzt das Inhaltliche geschrieben werden.<br />
Begrüßen Sie z. B. den Besucher Ihrer Homepage.<br />
Und weil wir neugierig sind, wie das jetzt in HTML aussieht, gehen wir in das Menü<br />
"Ansicht -> Seitenquelltext".<br />
Kapitel: /HTML-WYSIWYG-Werkzeug Netscape Composer<br />
2<br />
6<br />
0
Unser Text taucht jetzt zwischen den - TAGs auf. Bei genauerem Hinsehen fallen ein<br />
und diverse Hieroglyphen auf.<br />
Hier haben wir einen der wichtigen HTML-Befehle<br />
fügt einen Absatz ein. Dabei kann das an beliebigem Ort stehen. Alle HTML-Befehle<br />
lassen sich aus ihrer englischen Herkunft ableiten. Das vereinfacht es, sie sich zu merken. Das<br />
p steht für "paragraph" (Absatz).<br />
Das kann, braucht nicht, aber sollte einen End-TAG haben, also ein <br />
Die Hieroglyphen ü<br />
Dabei handelt es sich um die Sonderzeichen der deutschen Sprache. Da das Internet weltweit<br />
verfügbar ist, was von deutschen Sonderzeichen nicht zu sagen ist, werden diese besonders<br />
beschrieben. Dazu hier die wichtigsten.<br />
• für ä die Zeichenfolge ä<br />
• für Ä die Zeichenfolge Ä<br />
• für ö die Zeichenfolge ö<br />
• für Ö die Zeichenfolge Ö<br />
• für ü die Zeichenfolge ü<br />
• für Ü die Zeichenfolge Ü<br />
• für ß die Zeichenfolge ß<br />
Zurück zu unserem Inhalt und der Gestaltung.<br />
Schriftformatierung<br />
Wie bei einer Textverarbeitung kann mit verschiedenen Schriftgrößen, Farben und Arten<br />
variiert werden.<br />
Kapitel: /HTML-WYSIWYG-Werkzeug Netscape Composer<br />
2<br />
6<br />
1
Um den Textbereich nach den eigenen Vorstellungen zu gestalten, wird er erst markiert.<br />
Sobald der betreffende Bereich blau unterlegt ist, wird im Menüpunkt Format die gewünschte<br />
Änderung an Schriftgröße, Schriftfarbe, Schnitt und Schriftart vorgenommen.<br />
Zu beachten gilt: Im Internet ist vieles relativ - so auch die Schriftgröße.<br />
Exkurs: Relativität der Darstellung<br />
Überschriften - Absatzgestaltung<br />
Besser als eine direkte Eingabe der Schriftgröße ist die Zuweisung von Formaten! Denn<br />
dadurch wird am besten der Relativität des Internets Rechnung getragen. Es gibt dafür 6<br />
verschiedene Überschriftgrößen, Absatzformate, Listenformate und die Ausrichtungen.<br />
Für die Auswirkungen sehen Sie bitte folgende Beispiele:<br />
Kapitel: /HTML-WYSIWYG-Werkzeug Netscape Composer<br />
2<br />
6<br />
2
Der dazugehörige HTML-TAG ist bis , wobei das H für "Headline" steht und die<br />
Nummer für die Größenabstufung. Nachdem die Überschrift vorbei ist, muss der TAG wieder<br />
geschlossen werden mit bzw. der entsprechenden Größe.<br />
Textausrichtung<br />
Kapitel: /HTML-WYSIWYG-Werkzeug Netscape Composer<br />
2<br />
6<br />
3
Der entsprechende HTML-Code ist für:<br />
linksbündig: keiner, da eh standardmäßig<br />
rechtsbündig: und als End-TAG <br />
zentriert: und als End-TAG <br />
Bilder einbauen<br />
Und nun zu dem Thema, welches das Internet so schön bunt macht. Vielleicht wäre das Wort<br />
grell öfters auch richtig. Bauen wir jetzt auf unserer Homepage Bilder ein.<br />
Der einfachste Weg, wenn bereits ein Bild vorliegt:<br />
Im Composer in das Menü Einfügen -> Grafik<br />
Hier dann die entsprechende Datei auswählen über Datei wählen<br />
Kapitel: /HTML-WYSIWYG-Werkzeug Netscape Composer<br />
2<br />
6<br />
4
Und dann erscheint die Grafik auf der Homepage.<br />
In HTML erscheint nun der Befehl:<br />
<br />
Tipp: Die Ausrichtung der Grafik erfolgt genau so wie die Ausrichtung von Text!<br />
Kapitel: /HTML-WYSIWYG-Werkzeug Netscape Composer<br />
2<br />
6<br />
5
Die Höhen- und Breitenangaben sollten gemacht werden, da dadurch der<br />
spätere Seitenaufbau beim Browser beschleunigt wird. Wenn die Bildgröße<br />
bekannt ist, sieht das so aus:<br />
.<br />
Hintergrundbild (Textur) einbauen<br />
Und zu guter Letzt kann noch ein Hintergrundbild eingefügt werden, das flächendeckend sein<br />
kann.<br />
Dazu wird bei der Auswahl der Grafik nur das Auswahlkästchen "Als Hintergrundgrafik<br />
verwenden" angewählt.<br />
Als Ergebnis gibt es eine Homepage, die unter Umständen schlechter lesbar ist und auf jeden<br />
Fall längere Übertragungszeiten benötigt.<br />
Im HTML-Code sieht das Ganze dann wie folgt aus, und zwar immer zusätzlich im body-<br />
TAG, der fast am Anfang der Seite zu finden ist.<br />
<br />
Tipp: Achten Sie auf die Dateigröße, ansonsten dauert die Übertragung zu<br />
Kapitel: /HTML-WYSIWYG-Werkzeug Netscape Composer<br />
2<br />
6<br />
6
lange.<br />
E-Mail-Adresse einbauen<br />
Damit die Besucher der Homepage mit Ihnen in Kontakt treten können, sollten Sie Ihre E-<br />
Mail-Adresse eingeben. Dazu gehen Sie in das Menü "Einfügen->Verknüpfung".<br />
Unter Text tragen Sie Ihre E-Mail-Adresse ein. Dadurch kann der Surfer die E-Mail-Adresse<br />
beliebig weiterverarbeiten. Unter Verknüpfung tragen Sie vor Ihrer E-Mail-Adresse ein<br />
mailto: gefolgt von Ihrer E-Mail-Adresse ohne Leerzeichen!<br />
Angezeigt bekommen Sie dann die E-Mail-Adresse als Link. Wird dieser Link angeklickt,<br />
öffnet sich beim Surfer automatisch (sollte wenigstens) sein E-Mail-Programm, und Ihre E-<br />
Mail-Adresse ist als Empfänger bereits eingetragen.<br />
Kapitel: /HTML-WYSIWYG-Werkzeug Netscape Composer<br />
2<br />
6<br />
7
Der entsprechende HTML-Code:<br />
max@mustermann.de <br />
Links hinzufügen<br />
Sollen nun mehrere Seiten miteinander verknüpft werden, geschieht das über Links. Es gibt<br />
interne und externe Links. Zu den externen Links später mehr.<br />
Erstmal die internen Links. Durch diese werden mehrere Seiten Ihrer Internetsite miteinander<br />
verbunden und können durch einen Klick auf den Link aufgerufen werden.<br />
Um einen Link einzufügen, gehen Sie wieder auf das Menü "Einfügen->Verknüpfung".<br />
Hier geben Sie unter Verknüpfungsquelle den auf der Homepage sichtbaren Text ein, unter<br />
Verknüpfung die html-Seite, die aufgerufen werden soll.<br />
Kapitel: /HTML-WYSIWYG-Werkzeug Netscape Composer<br />
2<br />
6<br />
8
Fertig sieht der Link wie folgt aus: in der Fußzeile erscheint der Pfad. Die Links müssen<br />
unbedingt später nach dem Publizieren im Internet überprüft werden!<br />
In HTML sehen Links wie folgt aus:<br />
zu meiner Kontaktseite<br />
Navigationsleiste erstellen<br />
Kapitel: /HTML-WYSIWYG-Werkzeug Netscape Composer<br />
2<br />
6<br />
9
Alle Links können zu einer Navigationsleiste vereint werden. Dadurch hat der Nutzer eine<br />
einfachere Zugangsweise und die Steuerung der Site ist sofort einsichtig. Dazu werden gerne<br />
Tabellen oder Frames hergenommen. Dazu später mehr.<br />
Software<br />
Die aufgeführten "Empfehlungen" sind nach meinem Erfahrungsschatz Software und Links,<br />
die ich persönlich bevorzuge und gut finde. Aber Geschmäcker sind verschieden!<br />
Internet-Browser<br />
Firefox - ideal zum Entwickeln. Enthält viele Bonbons für Entwickler. Z.B. wird von einem<br />
Internetseite nur von dem markieren Bereich der Quellcode angezeigt. - Vorgehensweise:<br />
Bereich markieren, rechte Maustaste auf diesem Bereich, "Auswahl-Quelltext anzeigen"<br />
anklicken<br />
Opera - auch ein schöner Browser<br />
http://www.opera.com/lang/de/<br />
MS Internet-Explorer - die aktuelle 7-Version<br />
http://www.microsoft.com/germany/windows/ie/worldwide/default.mspx<br />
FTP-Programme<br />
Um die erstellten Dateien im Internet komfortabel zu publizieren, werden FTP-Programme<br />
verwendet. Diese sind oft wie der Windows- oder NT-Explorer aufgebaut.<br />
Dazu kann ich FileZilla empfehlen - zusätzlich zu FTP noch sichere<br />
übertragungsmöglichkeiten mit S-FTP (Open Source - GPL) sowohl deutsch und englisch und<br />
viele andere Sprachen mehr<br />
http://sourceforge.net/projects/filezilla/<br />
oder WinSCP mit S-FTP-Funktionalität (Open Source) empfehlen - sowohl deutsch und<br />
englisch und viele andere Sprachen mehr<br />
http://winscp.sourceforge.net<br />
oder Total Commander Version 6 (Shareware)<br />
http://www.ghisler.com/<br />
oder über das Kontextmenü als "Senden an" die Freeware SendTo FTP<br />
http://www.pclightning.com/<br />
Kapitel: Software<br />
2<br />
7<br />
0
HTML-Editoren<br />
Editor Scriptly von Webocton<br />
Editor mit viel Komfort und Freeware<br />
http://www.scriptly.de/<br />
HTML Editor Phase 5<br />
Ulli Meybohms HTML Editor Phase 5 (kostenlose Nutzung für Privatpersonen und Schulen<br />
erlaubt - Lizenzen siehe Website qhaut.de)<br />
Jede Menge Informationen und der Download sind im HTML-Editor Portal zu finden:<br />
http://www.qhaut.de/<br />
Zum Bilder bearbeiten:<br />
Paint Shop Pro (Shareware)<br />
http://www.jasc.de/<br />
Fixfoto<br />
http://www.j-k-s.com/<br />
Vermessen und Abstände:<br />
ScreenRuler<br />
Schönes Programm zu vermessen - ein durchsichtiges Lineal kann an beliebiger Position in<br />
verschiedenen Größen gezogen werden.<br />
Beispiel:<br />
Freeware Freeware ScreenRuler - auf der Website der Link mit "Download ScreenRULER<br />
executable (~ 200 KB)".<br />
Kapitel: Software<br />
2<br />
7<br />
1
Farben:<br />
Anry Color Picker<br />
Mit Anry Color Picker können Farbwerte aus Bildern und<br />
Websiten ermittelt werden. Die Freeware ist unter<br />
http://www.anryhome.com/software/colorpicker/ downloadbar.<br />
(Freeware /Mehrsprachig mit deutsch)<br />
ColorPic<br />
Weitere Farben-Pipette - http://www.iconico.com/colorpic/ - ColorPic (Freeware)<br />
Kleine WYSIWYG-Editoren<br />
FrontPage Express (ist bei Installation von Internet-Explorer von Microsoft dabei)<br />
Netscape Composer (ist bei Installation von Netscape dabei)<br />
Nvu - HTML-Editor -eine Stand-Alone-Weiterentwicklung der Mozilla-Suite-Komponente<br />
Composer, basierend auf der Gecko-Engine von Mozilla. - mit integriertem ftp-Client<br />
(Freeware, sowohl Windows, Linux wie Mac).<br />
http://www.nvu-composer.de/<br />
Professionielle WYSIWYG-Editoren<br />
Dreamweaver<br />
Frontpage (von Microsoft)<br />
Backup der Website<br />
Zur Sicherheit können Sie von Ihre Website (natürlich auch Ihren Computer/oder Laptop) ein<br />
Backup erstellen - gute und für alle Möglichkeiten gerüstete Software ist SyncFolder<br />
Die Software kann über ftp die Daten von der Website downloaden (oder auch uploaden - je<br />
nach Wunsch) und das ganze auch automatisiert mit Zeitplaner.<br />
Kapitel: Software<br />
2<br />
7<br />
2
Vorteile Firefox für Webentwickler<br />
Ein besonderer Vorteil ist die selektive Anzeige von Quellcode, der hinter Teilen von<br />
Websiten liegt. Dazu selektiert man den gewünschten Bereich mit der Maus (wie im<br />
folgenden Beispiel der Startseite des HTML-Seminars).<br />
Nach der Selektion dann rechte Maustaste (auf dem blauen Bereich) klicken und im Menü<br />
den Punkt: "Auswahl Quelltext anzeigen" auswählen.<br />
Bild zum vergrößern anklicken<br />
Diese Funktion ist sehr geschickt, um andere Webseiten zu analysieren und dadurch zu lernen<br />
oder bei der eigenen Fehler zu entdecken :)<br />
Kapitel: Vorteile Firefox für Webentwickler<br />
2<br />
7<br />
3
Add-ons - Firefox tiefer gelegt und aufgebohrt<br />
Für den Browser gibt es zahlreiche Zusatztools, die einfach eingebunden werden können und<br />
die Erstellung von Websites wesentlich komfortabler machen.<br />
Eine kleine Auswahl von Links:<br />
• http://www.erweiterungen.de/ - Auflistung vieler Erweiterungen (in deutsch)<br />
• Html Validator - Anzeige von HTML-Fehlern von Marc<br />
Gueury<br />
• http://adblockplus.org/de/ - Werbeblocker<br />
• http://livehttpheaders.mozdev.org - die Daten sichtbar machen, die der Server liefert<br />
(wichtig für Weiterleitungen)<br />
• http://www.erweiterungen.de/detail/Measure_It/ -Elemente ausmessen und Größen<br />
bestimmen<br />
• http://www.fortysomething.ca/mt/etc/archives/006375.php Bildschirmcaptures<br />
erstellen<br />
IE Developer Toolbar<br />
Der Internet Explorer Developer Toolbar frisch erschienen am 12.1.2007 als Beta 3 hat einige<br />
Funktionen, die das Entwickeln von Websites vereinfacht.<br />
Microsoft Download<br />
Nach dem Download installieren. Das Anzeigen der Toolbar geschieht über den das Menü<br />
(versteckt sich gerne recht - Punkt IE Developer Toolbar) oder über Menü Extras -><br />
Symbolleiste -> Explorer Leiste -> IE DOM Explorer.<br />
Kapitel: IE Developer Toolbar<br />
2<br />
7<br />
4
Verschiedene praktische Unterstützungen beim Entwickeln und Gestalten von Websites<br />
unterstützen einen.<br />
Einblenden der DIV-Elemente<br />
Dadurch ist sichtbar, wie eine Website aufgebaut ist.<br />
Kapitel: IE Developer Toolbar<br />
2<br />
7<br />
5
Ändern der Fenstergröße<br />
Zur Kontrolle, wie das Design in verschiedenen Bildschirmauflösungen wirkt, kann schnell<br />
die Browsergröße umgestellt werden (man sollte allerdings einen großen Bildschirm<br />
besitzen...)<br />
Vermessen von Elementen<br />
Mehrere Lineale (in verschiedenen Farben) können eingezeichnet werden. Fährt man mit der<br />
Maus über das Lineal, erhält man die Größe und die Lage. Viel Spaß beim zeichnen (geht<br />
auch quer).<br />
Kapitel: IE Developer Toolbar<br />
2<br />
7<br />
6
Kontrolle der Website auf Fehler<br />
Über Validate und HTML bzw. <strong>CSS</strong> kann getestet werden wo welche Fehler sitzen<br />
Kapitel: IE Developer Toolbar<br />
2<br />
7<br />
7
Rund ums Internet<br />
Software, die immer wieder benötigt werden und für den Internet-Alltag Pflicht ist.<br />
PDF-Software<br />
http://www.foxitsoftware.com/<br />
PDF-Anzeiger Foxit Reader 2.0 von Foxit Software, der sehr klein und schnell ist.<br />
Bücher<br />
• eBook HTML-Seminar<br />
• billig an Bücher über eBay<br />
• Empfehlung HTML-Handbuch<br />
• Neu über Amazon<br />
eBook HTML-Seminar.de<br />
Die komplette Website gibt es auch als E-Book im PDF-Format mit Inhaltsverzeichnis und<br />
219 Seiten. Alles, was Sie hier auf den Seiten lesen, können Sie auch in aller Ruhe offline<br />
lesen, bzw. bequem über das PDF-File ausdrucken (mit Ausnahme des Forums). eBook html-<br />
Seminar.de<br />
Billig an Bücher zum Thema<br />
Um billig an Bücher zum Thema zu kommen, einfach in eBay stöbern. Teilweise gibt es da<br />
bereits ab einem Euro Bücher zu HTML, JavaScript und Programmierung.<br />
Beispiele für Angebote zu HTML - klicken und Sie kommen bei eBay Ihres Landes raus im<br />
Bereich für HTML<br />
Buchtips:<br />
Kapitel: Rund ums Internet<br />
2<br />
7<br />
8
D as v erk n ü p fte B ild k an n n ic h t<br />
an g ezeig t w erd en . M ö g lic h erw eise<br />
w u rd e d ie D atei v ersc h o b en ,<br />
u mb en an n t o d er g elö sc h t. S tellen<br />
S ie sic h er, d ass d ie Verk n ü p fu n g<br />
au f d ie k o rrek te D atei u n d d en<br />
k o rrek ten S p eic h ero rt zeig t.<br />
Ein Muß für den HTML-Programmierer<br />
Das Buch ist für Anfänger und Profis gleichermaßen geeignet. Der<br />
Anfang wird Schritt für Schritt in die Geheimnisse von HTML eingeführt.<br />
Die Elementrefenz eignet sich sehr gut zum Nachschlagen.<br />
Dieses Buch kann über folgendes Formular direkt beim Verlag<br />
Versandkostenfrei bestellt werden. (Wenn Sie dieses Formular nutzen,<br />
unterstützen Sie unsere Seite)<br />
Bestellmöglichkeit<br />
Hiermit bestelle ich den Titel: 'HTML Handbuch' zum Preis von 30 EUR.<br />
Bei einem Bestellwert von unter 20 Euro fallen zusätzlich 3 Euro<br />
Versandkosten an. Die Lieferung erfolgt gegen Rechnung an die<br />
angegebene Anschrift.<br />
Anrede:<br />
Vorname:<br />
Name:<br />
Strasse:<br />
Hausnr.:<br />
PLZ:<br />
Ort:<br />
Land:<br />
eMail:<br />
Herr<br />
Deutschland<br />
Die AGB der Franzis' Verlag GmbH<br />
habe ich zur Kenntnis genommen und bin<br />
mit ihnen einverstanden.<br />
Bestellvorgang starten<br />
Im folgenden Schritt können Sie die Bestellung noch abbrechen. Erst durch Ihre endgültige Bestätigung im nächsten<br />
Schritt wird der bestellte Titel zum Gegenstand des Kaufvertrages.<br />
Kapitel: /Bücher<br />
2<br />
7<br />
9
Suche nach Büchern z.B. zum Thema HTML:<br />
Schnellsuche<br />
Alles<br />
Suchbegriff<br />
HTML<br />
Kapitel: /Bücher<br />
2<br />
8<br />
0
Interessante Linksammlung zum Thema<br />
Die aufgeführten "Empfehlungen" sind die ich persönlich bevorzuge und gut finde. Aber<br />
Geschmäcker sind verschieden!<br />
Klasse Seite mit guten Tipps<br />
und Newsletter, die kostenfrei abonniert werden kann (wer tiefer einsteigen möchte)<br />
http://drweb.de/<br />
HTML-Onlinebuch: SELFHTML:<br />
Autor: Stefan Münz<br />
http://de.selfhtml.org/<br />
Und wer lieber SELFHTML von Stefan Münz als Buch lesen möchte, kann über diesen Link<br />
beim Verlag ordern.<br />
Guter Artikel von der Zeitschrift ct<br />
"Der steinige Weg zu gutem WWW-Design"<br />
Kann man jedem nur ans Herz legen!<br />
http://www.heise.de/ct/00/05/246/<br />
Kapitel: Interessante Linksammlung zum Thema<br />
2<br />
8<br />
1
Referenz Sonderzeichen<br />
maskierte Zeichen<br />
folgende Sonderzeichen können entweder über den Namen oder über die Angabe der<br />
Nummer sauber in HTML-Code integriert werden. Man spricht bei den Sonderzeichen von<br />
maskierten Zeichen.<br />
maskierte Zeichen<br />
Aussehen Name Nummer Beschreibung englisch<br />
‘ ‘<br />
’ ’<br />
‚ ‚<br />
einfaches<br />
Anführungzeichen<br />
einfaches<br />
Anführungzeichen<br />
einfaches unteres<br />
Anführungszeichen<br />
left single quote<br />
right single quote<br />
single low-9 quote<br />
“ “ Anführungszeichen left double quote<br />
” ” Anführungszeichen right double quote<br />
„ „ Anführungszeichen unten<br />
double low-9<br />
quote<br />
† † dagger<br />
‡ ‡ double dagger<br />
‰ ‰ Promil per mill sign<br />
‹ ‹<br />
› ›<br />
single left-pointing<br />
angle quote<br />
single rightpointing<br />
angle<br />
quote<br />
� ♠ Spielkarte Blatt black spade suit<br />
� ♣ Spielkarten Kreuz black club suit<br />
� ♥ Spielkarte Herz black heart suit<br />
� ♦ Spielkarte Karo black diamond suit<br />
�� ‾ obere Linie<br />
overline = spacing<br />
overscore<br />
� ← Pfeil links leftward arrow<br />
� → Pfeil rechts rightward arrow<br />
� ↑ Pfeil aufwärts upward arrow<br />
� ↓ Pfeil abwärts downward arrow<br />
™ Trademark Zeichen trademark sign<br />
	 horizontaler Tabulator horizontal tab<br />
Kapitel: Referenz Sonderzeichen<br />
2<br />
8<br />
2
line feed line feed<br />
  Leerzeichen space<br />
! ! Ausrufungszeichen exclamation mark<br />
" " "<br />
# #<br />
doppelte<br />
Anführungszeichen<br />
double quotation<br />
mark<br />
$ $ Dollarzeichen dollar sign<br />
% % Prozentzeichen percent sign<br />
& & &<br />
kaufmänisches Und-<br />
Zeichen<br />
ampersand<br />
' ' Apostroph apostrophe<br />
( ( Klammer auf left parenthesis<br />
) ) Klammer zu right parenthesis<br />
* * Stern (Asterisk) asterisk<br />
+ * Plus-Zeichen plus sign<br />
, , Komma comma<br />
- - Bindestrich hyphen<br />
. . Periodenzeichen period<br />
�� ⁄ / Slash slash<br />
0 0 Zahlen 0 bis digits 0-<br />
9 9 9 digit 9<br />
: : Doppelpunkt colon<br />
; ; Strich-Punkt semicolon<br />
< < < Kleiner als Zeichen less-than sign<br />
= = Gleichzeichen equals sign<br />
> < > Größer-als-Zeichen greater-than sign<br />
? ? Fragezeichen question mark<br />
@ @ Klammeraffee at sign<br />
A bis A Großbuchstaben A bis<br />
Z Z Z<br />
uppercase letters<br />
A-<br />
uppercase letters<br />
Z<br />
[ [ eckige Klammer links left square bracket<br />
\ \ Backslash backslash<br />
] ] eckige Klammer rechts<br />
^ ^ Dach caret<br />
_ _ unterstrichen<br />
right square<br />
bracket<br />
horizontal bar<br />
(underscore)<br />
` ` Accent grave grave accent<br />
a bis a Kleinbuchstaben a bis<br />
lowercase letters<br />
a-<br />
Kapitel: maskierte Zeichen<br />
2<br />
8<br />
3
z z Kleinbuchstaben bis z<br />
lowercase letters -<br />
z<br />
{ { geschweifte Klammer auf left curly brace<br />
| | Vertikaler Strich vertical bar<br />
} } geschweifte Klammer zu right curly brace<br />
~ ~ Tilde tilde<br />
– – – kurzer Bindestrich en dash<br />
— — — Gedankenstrich em dash<br />
¡ ¡ ¡ umgekehrtes<br />
Ausrufungszeichen<br />
inverted<br />
exclamation<br />
¢ ¢ ¢ Cent cent sign<br />
£ £ £ engl. Pfund pound sterling<br />
¤ ¤ ¤ generelles<br />
Währungszeichen<br />
general currency<br />
sign<br />
¥ ¥ ¥ Währung Yen yen sign<br />
¦<br />
¦<br />
oder<br />
&brkbar;<br />
¦<br />
unterbrochene vertikale<br />
Linie<br />
broken vertical bar<br />
§ § § Paragraphenzeichen section sign<br />
¨<br />
¨ oder<br />
¨<br />
¨ Umlaut-Zeichen umlaut<br />
© © © Copyright copyright<br />
ª ª ª feminine ordinal<br />
« « « left angle quote<br />
¬ ¬ ¬ Zeichen für Nicht not sign<br />
­ ­ weiches Trennzeichen soft hyphen<br />
® ® ® eingetragenes<br />
Wahrenzeichen<br />
¯<br />
¯ oder<br />
&hibar;<br />
registered<br />
trademark<br />
¯ macron accent<br />
° ° ° Grad-Zeichen degree sign<br />
± ± ± Plus-Minus Zeichen plus or minus<br />
² ² ² 2 hochgestellt superscript two<br />
³ ³ ³ 3 hochgestellt superscript three<br />
´ ´ ´ acute accent<br />
µ µ µ Mycro-Zeichen micro sign<br />
¶ ¶ ¶ Paragrafen-Zeichen paragraph sign<br />
· · · Punkt mittig middle dot<br />
¸ ¸ ¸ cedilla<br />
¹ ¹ ¹ hochgestellte eins superscript one<br />
º º º masculine ordinal<br />
» » » right angle quote<br />
Kapitel: maskierte Zeichen<br />
2<br />
8<br />
4
¼ ¼ ¼ einviertel one-fourth<br />
½ ½ ½ einhalb one-half<br />
¾ ¾ ¾ dreiviertel three-fourths<br />
¿ ¿ &#; Fragezeichen auf Kopf<br />
Ä Ä Ä Umlaut Ä<br />
Ö Ö Ö Umlaut Ö<br />
inverted question<br />
mark<br />
uppercase A,<br />
umlaut<br />
uppercase O,<br />
umlaut<br />
× × &#; Multiplikationszeichen multiplication sign<br />
Ø Ø Ø uppercase O, slash<br />
Ü Ü Ü Umlaut Ü<br />
ß ß ß Sz<br />
ä ä ä Umlaut ä<br />
ö ö ö Umlaut ö<br />
uppercase U,<br />
umlaut<br />
lowercase sharps,<br />
German<br />
lowercase a,<br />
umlaut<br />
lowercase o,<br />
umlaut<br />
÷ ÷ ÷ Geteilt Zeichen division sign<br />
ø ø ø Durchschnittzeichen klein lowercase o, slash<br />
ü ü ü Umlaut ü<br />
Maßeinheiten<br />
lowercase u,<br />
umlaut<br />
Im Webdesign kann mit relativen oder absoluten Maßeinheiten gearbeitet werden.<br />
absolute Maßeinheiten<br />
pt - Punkt: 1 Punkt entspricht 1/72 Inches<br />
pc - Pica: 1 Pica entspricht 12 Punkt<br />
in - Inch: 1 Inch entspricht 2.54 cm<br />
cm - cm: hinreichend bekannt :)<br />
mm - mm: 10mm entspricht 1cm<br />
absolute/relative Maßeinheiten<br />
px - pixels<br />
Beim Pixel haben wie die Mischform von absolut und relativ. Die größe eines Pixels ist je<br />
nach Ausgabegerät größer oder kleiner (wenn man es in mm nachmißt - siehe Bild auf<br />
Kapitel: Maßeinheiten<br />
2<br />
8<br />
5
Monitor und Beamer). Die größe ist also relativ je nach Ausgabegerät. Bezogen auf ein und<br />
dasselbe Ausgabegerät ist ein Pixel absolut.<br />
relative Maßeinheiten<br />
em<br />
em (engl. equal M) bestimmt die Zeilenbreite in Relation zur Schriftgröße anhand der Breite<br />
des des Großbuchstabens M (im Schriftsatz). Beim Webdesign fließt nicht nur die Breite<br />
sondern auch die Höhe mit ein.<br />
Anwendung von em beim Schriftsatz<br />
Ein Kriterium für eine gute Lesbarkeit ist die Breite einer Spalte. Ist die Zeile zu lange, wird<br />
für das Auge das finden der nächsten Zeile erschwert. Ist die Zeile zu kurz, entstehen größere<br />
Leerräume am Zeilenenden.<br />
Anwendung von em bei Webdesign<br />
Die die Maßeinheit em (und dadurch die vorhandene Breite) lässt sich eine Breite definieren,<br />
die ein angenehmes Schriftbild (Zeilen weder zu lang noch zu kurz) erzeugt. Durch die<br />
realtive Definition passt sich bei der Größenänderung der Schrift dann automatisch die<br />
Zeilenbreite an.<br />
andere relative Maßeinheiten: % und ex<br />
ex steht für die Höhe des Kleinbuchstaben x.<br />
Kapitel: Maßeinheiten<br />
2<br />
8<br />
6
Abk.; Computerchinesisch; Erklärungen<br />
Applet<br />
Applets sind in Java (nicht JavaScript!) geschriebene kleine Programme, die für Ihre<br />
Ausführung meistens einen javafähigen Browser benötigen. Die Applets werden über das<br />
Internet übertragen und Ihr Aufruf sind in Webseiten über spezielle HTML-Tags eingebettet.<br />
Browser<br />
Softwareprogramm, das auf WWW-Server zugreift und durch die Seitenbeschreibungssprache<br />
HTML spezifizierte Dokumente darstellt. Im Browser gibt man die URL (siehe nächster<br />
Begriff) ein, um die gewünschten Seiten zu sehen.<br />
<strong>CSS</strong><br />
Cascading Style Sheets - aufeinander aufbauende (muß nicht, kann aber) Design-<br />
Definitionen.<br />
DOCTYPE<br />
Am Anfang eines HTML-Dokuments wird dem Browser über den Doctype mitgeteilt, was er<br />
nun erwarten kann. Bei xHTML muß die richtige Doctype-Definition sofort in der ersten<br />
Zeile. Sollte versehentlich eine Leerzeile vor dem Doctype reinrutschen, verfällt der Browser<br />
in einen Kompatibilitätsmodus (Quirks genannt) und die Reaktion auf diverse <strong>CSS</strong><br />
Auszeichnungen sind nicht wie gewohnt.<br />
Bei xHTML gibt es folgende 3 Definitionen:<br />
<br />
<br />
<br />
FAQ<br />
englische Abkürzung für Frequently Asked Questions - was übersetzt bedeutet "häufig<br />
gestellte Fragen". Wären unter dem Punkt nur die Fragen zu finden, würde das den Nutzer<br />
nicht weiterbringen, daher sind in der Regel zu den Fragen auch die Antworten zu finden.<br />
ftp<br />
Kapitel: Abk.; Computerchinesisch; Erklärungen<br />
2<br />
8<br />
7
Das File Transfer Protocol dient dem Dateitransfer zwischen Rechnern. Durch dieses<br />
Protokoll und entsprechende Programme werden unsere hergestellten Seiten auf den<br />
Homepage-Server transferiert.<br />
Homepage<br />
(Startseite) Die Seite, die der WWW-Benutzer beim Start eines Browsers zu sehen bekommt.<br />
KK-Antrag<br />
Konnektivitäts-Koordinations-Antrag: Wenn Sie von einem Provider zu einem anderen<br />
Provider mit Ihrer Domain wechseln, wird solch ein Antrag gestellt werden (siehe hierzu auch<br />
c´t 8/2000). Diesen KK-Antrag erhalten Sie meistens automatisch von Ihrem neuen Provider<br />
zum unterschreiben und zurückfaxen. Beispiele finden Sie unter http://www.providerwechsel.de/<br />
am Ende der Seite - diese gelten i. d. R. auch für andere Provider - wie immer<br />
auch diese Aussage ohne Gewähr!<br />
Link<br />
Ein Verweis von einem Webdokument auf ein Anderes. Dieses kann sowohl innerhalb der<br />
eigenen Website als auch auf eine beliebige andere Website zeigen.<br />
Lorem Ipsum<br />
Ein beliebter Platzhalter (sogenannter Blindtext), um das Design einer Website zu testen,<br />
wenn noch keine Textinhalte vorliegen. Wird teilweise kontrovers diskutiert, da nur<br />
Kleinbuchstaben und die Wortlängen nicht typisch deutsch sind. Wurde bereits im 16.<br />
Jahrhundert eingesetzt. Für "eine Portion Lorem Ipsum" finden Sie hier einen Lorem-Ipsum-<br />
Generator<br />
IP-Adresse<br />
Jeder Teilnehmer im Internet hat eine IP-Adresse - egal ob Website oder Surfer. Wenn Sie<br />
Ihre aktuelle IP-Adresse jetzt gerade beim surfen herausbekommen möchten, nutzen Sie<br />
http://www.ihre-ip-adresse.de<br />
Auch jede Homepage hat eine IP-Adresse (teilweise muss eine Homepage die IP-Adresse mit<br />
anderen Website teilen, was Shared Hosting bedeutet). Um die IP-Adresse einer Homepage<br />
herauszubekommen, nutzen Sie in Windows die command-Shell (Start-Button -> Ausführen -<br />
> cmd (eingeben) -> OK klicken) und dann im DOS-Fenster eingeben: PING www.htmlseminar.de<br />
Danach erscheint in der nächsten Zeile Ping www.html-seminar.de [xxx.xxx.xxx.xxx] mit ... -<br />
Voila die IP-Adresse.<br />
PHP<br />
Kapitel: Abk.; Computerchinesisch; Erklärungen<br />
2<br />
8<br />
8
Programmiersprache, die bei vielen Internetseiten im Hintergrund läuft (für Gästebücher,<br />
Kontaktformulare, Diskussionsforen) und sehr einfach zu erlernen ist - gute Seite zum PHP<br />
lernen ist http://www.PHP-Kurs.com<br />
Pfadangabe<br />
Eigentlich nichts anderes als die URL. Man kann aber bei der Homepage-Erstellung auch den<br />
Teil der URL darunter verstehen, der ab dem home-Verzeichnis beginnt.<br />
Relaunch<br />
Was im Haushalt unter Frühjahrsputz fällt - ein alter Auftritt wird durch einen neuen ersetzt,<br />
wobei durch Relaunch in der Regel das Design und die Usability optimiert werden.<br />
Site<br />
Ohne (e) bezeichnet keine einzelne Seite, sondern die komplette Anzahl aller einzelnen<br />
Seiten.<br />
Tutorial<br />
Das englische Wort Tutorial ist i.d.R. eine Schritt für Schritt Anleitung. Häufig wird Tutorials<br />
die Vorgehensweise sehr detailliert und ausführlich dargestellt. Tutorials stellen eine gute<br />
Starthilfe für Anfänger dar. Diesen Kurs können Sie auch als HTML-Lern-Tutorial<br />
bezeichnen :)<br />
URL<br />
URL=Universal/Uniform Resource Locator (Internet) Eine Namenskonvention, die den<br />
Standort eines Computers, eines Verzeichnisses oder einer Datei im Internet eindeutig<br />
kennzeichnet. Darüber hinaus gibt die URL-Adresse das geeignete Internet-Protokoll an, z.B.<br />
HTTP oder FTP. Ein Beispiel für einen URL ist http://www.unituebingen.de/zdv/faq/faq.html<br />
WebDAV<br />
Abkürzung für Web-based Distributed Authoring and Versioning. Dadurch können Dateien<br />
im Internet bereitgestellt werden. Praktisch gestaltet es sich so, als würde man auf der eigenen<br />
Festplatte arbeiten und alle gewohnten Dateibrowser können genutzt werden (Online-<br />
Festplatte). WebDAV kann auch als Ersatz für ein FTP-Programm verwendet werden.<br />
Kapitel: Abk.; Computerchinesisch; Erklärungen<br />
2<br />
8<br />
9
Allerdings zickt Windows Vista beim einrichten erst einmal herum. Vorgehensweise ist (kurz<br />
Beschrieben): regedit.exe aufrufen -> den Wert von "BasicAuthLevel" unter<br />
"HKEY_LOCAL_MACHINESYSTEMCurrentControlSetServicesWebClientParameters" auf<br />
2 setzen -> Computer frisch booten -> dann unter Computer auf "Netzlaufwerk zuordnen"<br />
gehen -> "Verbindung mit einer Website herstellen ..." -> Weiter -> URL eingeben<br />
"http://ihre-gewuenschte-domain.de:81" -> Benutzername und Kennwort eingeben -> Namen<br />
zum wiederfinden verpassen -> benutzen<br />
xHTML<br />
extensible HyperText Markup Language - Seitenbeschreibungssprache zur Darstellung von<br />
Internetseiten. XHTML stellt eine Weiterentwicklung und Adaption zu HTML dar und führt<br />
HTML mit XML zusammen.<br />
headerinformationen-404-401-301<br />
Jede Internetseite liefert Headerinformationen. Im Normalfall steht bei einer erfolgreich<br />
übertragenen Seite als OK die 404<br />
Diese Informationen können bequem über das Firefox-Plugin LiveHTTPHeaders<br />
(http://livehttpheaders.mozdev.org/index.html) angezeigt werden.<br />
Kapitel: headerinformationen-404-401-301<br />
2<br />
9<br />
0
Exisitert nun eine Domain nicht mehr, bzw. soll auf die Hauptdomain weitergeleitet werden,<br />
wird über die Datei ".htaccess" die Weiterleitungsinformationen weitergegeben:<br />
RewriteEngine On<br />
RewriteRule ^(.*)$ http://www.html-seminar.de/$1 [R=301,L]<br />
RewriteRule .+ http://www.html-seminar.de/ [R=301,L]<br />
Funktioniert, wenn Sie als Server eine Apache einsetzen, bzw. der Provider diesen Server<br />
einsetzt.<br />
Kapitel: headerinformationen-404-401-301<br />
2<br />
9<br />
1
Probleme bei merkwürdigen/falschen Zeichen meistens im<br />
Firefox<br />
Ein Problem im Firefox ist, dass auf verschiedenen Seiten statt der Umlaute und<br />
Sonderzeichen merkwürdige Zeichen kommen. Das hat den Grund, dass der Fuchs erst mal<br />
nach dem Zeichensatz schaut, was vom Webserver kommt. Und nachdem er dort nichts<br />
findet, kann es vorkommen, das er ratet (daher ist es nicht immer, das Spitzohr) und leider<br />
nicht immer richtig rät. Um auf diesen Einfluß zu nehmen (geht nur bei Apache!), folgende<br />
Zeile in die .htaccess<br />
AddDefaultCharset iso-8859-1<br />
Und dann noch im Head-Bereich der HTML-Datei:<br />
<br />
Und wenn Sie fremde Seite ansehen, können Sie beim Firefox die verwendeten Zeichensatz<br />
von Hand einstellen: Ansicht -> Zeichenkodierung -> Westlich (ISO 8859-1)<br />
Favicons - Icon für Lesezeichenverwaltung<br />
und Website<br />
Favicon ist ein Kunstwort und entstand durch die Zusammenziehung der der Worte Favorit<br />
und Icon = Favicon. Diese Favicons erscheinen auf vielen Webseiten neben der URL als<br />
kleine Grafik. Dieses Icon wird auch in den Lesezeichen angezeigt, wenn man die Website<br />
bookmarkt.<br />
Beispiel der Website fehlerlos.de - links neben der URL erscheint ein roter Haken, der eine<br />
16x16 Pixel große Grafik ist.<br />
favicons erstellen<br />
Kapitel: Favicons - Icon für Lesezeichenverwaltung und Website<br />
2<br />
9<br />
2
Die Icons sind relativ einfach erstellbar. Man nehme eine Grafik - konvertiere diese auf eine<br />
Größe von 16 auf 16 Pixel und speichere diese Grafik unter dem Namen favicon.ico<br />
Wichtig ist als Dateiformat .ico - dieses lässt sich mit Irfanview erstellen. Grafik laden (egal<br />
ob jpg der gif) und speichern unter ico. Mehr zum bearbeiten mit Irfanview im Bereich Bilder<br />
bearbeiten<br />
Die Grafikdatei wird nun in das Hauptverzeichnis (dort liegt die index.htm) der Website<br />
hochgeladen.<br />
Auf allen html-Seiten wird dann noch folgender Code im Head-Bereich eingebunden:<br />
<br />
<br />
<br />
<br />
<br />
Fehler in Logfile vermeiden<br />
Aus einem weiteren Grund ist es geschickt, so ein Icon für seine Website zu erstellen - es<br />
wird automatisch vom Browser abgefragt und wenn es nicht existiert, wird jedes mal eine<br />
Fehler im Logfile geschrieben.<br />
Websites mit Unterverzeichnissen<br />
Ist die Struktur der Website mit Unterverzeichnissen aufgebaut, wird die .ico Datei nur im<br />
Hauptverzeichnis abgelegt und als href dann dort die Angabe href="/favicon.ico"<br />
Kapitel: Favicons - Icon für Lesezeichenverwaltung und Website<br />
2<br />
9<br />
3
Entweder Sie haben das HTML-Tutorial ...<br />
... komplett durchgearbeitet, oder Sie haben unten zu lesen angefangen :). Auf jeden Fall sind<br />
Sie auf dieser Seite gelandet und das deutet darauf hin, dass der Kurs Ihnen gefallen hat und<br />
nützlich ist.<br />
Daher können Sie (wenn Sie wollen) mithelfen.<br />
Helfen Sie mit ... - Ihre Empfehlung freut uns besonders<br />
Um das HTML-Tutorial bekannter zu machen, setzen Sie einen Link auf Ihrer Homepage.<br />
Am besten ein Textlink in der Art:<br />
www.html-seminar.de - html lernen einfach gemacht<br />
Den Text des Links können Sie natürlich nach Belieben ändern.<br />
Social-Bookmark<br />
Natürlich freuen wir uns auch über jeden (Social)-Bookmark ...<br />
• del.icio.us<br />
• www.mister-wong.de<br />
Sie möchten Geld spenden ...<br />
dann ist die einfachste Möglichkeit über PayPal. Die Höhe können Sie natürlich frei<br />
bestimmen. Dabei sind auch kleine Beträge OK - Sie zeigen uns, dass unser Einsatz Ihnen<br />
weiterhilft.<br />
Sie helfen durch aktive Teilnahme im Forum<br />
Geben Sie Ihre Erfahrungen weiter und nehmen Sie aktiv an unserem Forum teil. So helfen<br />
Nutzer andern Nutzern.<br />
Kapitel: Entweder Sie haben das HTML-Tutorial ...<br />
2<br />
9<br />
4
Impressum<br />
Impressum gemäß §6 Teledienstegesetz (TDG)<br />
Verantwortlicher Redakteur und Webmaster für die Planung, Realisierung und Betreuung der<br />
Internetinhalte sowie für die Administration der Domains www.html-seminar.de und<br />
www.htmlseminar.de (Admin-c) ist<br />
Institut für webbasierte Kommunikation und E-Learning (iwke.com)<br />
Axel Pratzner<br />
Kingersheimer Str. 39/1<br />
72070 Tübingen<br />
Germany<br />
Tel. 07071 - 77 044 71<br />
http://www.html-seminar.de<br />
Das Projekt verfolgt keine kommerziellen Interessen sondern dient der Forschung. Falls Sie<br />
Fragen, Kritik oder Anregungen zu diesem Internetprojekt haben, dann senden Sie einfach<br />
eine E-Mail.<br />
Bildquellen<br />
Verwendete Bilder sind entweder aus dem eigenen Fundus bzw. von PhotoCase. Vielen Dank<br />
an PhotoCase.com und die Fotografen.<br />
Kapitel: Impressum<br />
2<br />
9<br />
5
Change language