Wie erstelle ich aus den Templates und den zusätzlichen
Bildern aus diesem Guide eine eigene Page?
Die Bilder können hier aus diesem Guide mit einem Rechtsklick lokal
gespeichert werden. Bitte die Bilder immer auf Euren eigenen Webspace laden,
statt sie von meinem aus zu nutzen, danke.
*
Falls man sich für die Nutzung eines Templates entscheidet, sollte eine
Arbeitskopie davon angefertigt werden, damit man auf das unveränderte
Original bei Gelegenheit zurückgreifen kann.
Anschliessend kann man die Arbeitskopie in einem geeigneten Homepage-Editor wie z.B. Nvu oder Amaya öffnen. Nvu und Amaya sind sog. 
WYSIWYG-Editoren, man kann die Webseiten grafisch erstellen, ohne sich um den HTML-Code dahinter kümmern zu müssen. Beide sind für die Betriebssysteme Windows, Linux und MacOS erhältlich.
Wie positioniere ich Bilder und Text exakt?
Dazu benutzt man Tabellen, da die Sprache HTML keine echten Leerzeichen und
Tabulatoren kennt.
Den Abstand zwischen den einzelnen Zellen kann man verändern, ebenso
die Rahmenbreite. Will man das ganze nicht als "Auflistung" sondern wirklich
nur zur Positionierung verwenden, setzt man nach kompletter Bearbeitung den
Tabellenrahmen auf 0.
Ohne Tabelle würde das ganze wie folgt aussehen, egal, wieviel Tabulatoren
und Leerzeichen Du im Text einfügst:
Wie bekomme ich meine fertige Homepage ins Netz?
Dazu benötigt man ein sogenanntes FTP-Programm. Sehr gut ist das Windows-Programm WS-FTP LE von Ipswitch (Version 5.08 scheint die letzte Freeware-Version zu sein). Es funktioniert ähnlich wie der
Windows-Explorer, auf der einen Fensterhälfte werden die eigenen lokalen Dateien angezeigt,
auf der anderen Hälfte die Dateien auf dem Server des Providers. Für Linux gibt es ein 1:1 Pendant, AxyFTP, das aber leider nicht weitergepflegt wird. Ähnlich ist gFTP oder auch kasablanca; wer die grafische Oberfläche KDE benutzt, kann auch schlicht den Dateimanager Konqueror für FTP-Transfers verwenden.
Nun loggt man sich über seinen Internet-Zugang mit diesem FTP-Programm
auf dem FTP-Server des Homepage-Providers ein (die nötigen Angaben
dafür erhält man auf Anfrage bei seinem Provider), markiert die zu übertragenden lokalen Dateien
und stellt sie per Knopfdruck in sein Verzeichnis auf den Homepage-Server ("uploaden"). Anschliessend kann man das Ergebnis in seinem Browser überprüfen, indem
man die vom Homepage-Provider genannte http-Adresse anwählt :).
Was mache ich, wenn mein Internet-Provider mir keinen
Platz für eine Homepage zur Verfügung stellt?
Der Homepage-Provider muß nicht zwangsläufig mit dem
Internet-Provider
übereinstimmen, manche Internet-Provider stellen
keinen Platz für Homepages zur Verfügung. Es gibt aber Firmen im
Netz, die einem den entsprechenden Platz kostenlos zur Verfügung stellen,
wenn man im Gegenzug ein wenig Werbung auf der eigenen Page mit einbindet. Einer
der bekanntesten Anbieter dürfte wohl Tripod sein (Stand 05/2007: 50 MB Webspace, PHP, MySQL-Datenbank).
Alternativ kann man sich relativ preisgünstig auch eine eigene Domain
mit entsprechendem WebSpace mieten).
Allgemeine Hinweise und Anmerkungen:
Das Euro-Zeichen (und andere Sonderzeichen)...
|
€
|
Euro-Zeichen-Test Deines Rechners
Siehst Du links dieses Textes ein Eurozeichen ?
|
Ja ...
Nein ...
|
Dein Betriebssystem und Dein Internetbrowser sind auf dem neuesten Stand
Dein Betriebssystem und/oder Internetbrowser sollte anders eingestellt werden |
Die sicherste Methode, das Euro-Zeichen korrekt darzustellen, ist die Verwendung des Unicode-Symbols
€ (damit habe ich obiges Euro-Zeichen dargestellt). Man kann auch € verwenden (€), das sollte mit allen Browsern funktionieren, die den HTML 4.0 Standard unterstützen.
Gibst Du das Euro-Zeichen direkt in den HTML-Code ein, so wird es vom Großteil der Besucher nur als Kästchen
gesehen werden. Um das zu vermeiden, musst Du in dem Fall im Kopf der HTML-Seite folgende Zeile einfügen:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"> - und der Browser des Betrachters muss ISO-8859-15 darstellen können (auch bekannt als ISO Latin 9 Zeichensatz).
Auch dieses Zeichen ´ (Hochkomma) wird gerne direkt in den HTML-Code
geschrieben, was für
Benutzer anderer Betriebssysteme dann z.B. als Z dargestellt wird.
Wesentlich angenehmer
lesen sich Webseiten, wenn statt dessen der Code ´ verwendet
wird.
Weitere wichtige Codes:
ä ist ä - ü ist ü - ö ist
ö - ß ist ß - & ist &
Bitte gib im Kopf
Deiner Webseiten immer den von Dir verwendeten Zeichensatz an, damit die Browser
der Seiten-Besucher alle Zeichen richtig darstellen können. Gibst Du keinen
Zeichensatz an, so nimmt der Browser einen Standard-Zeichensatz (i.d.R
iso-8859-1) an - und das kann mitunter ganz schön in die Hose gehen. Daher sollten im HEAD vor dem TITLE
zumindest immer diese beiden Meta-Tags angegeben werden (iso-8859-15 für westeuropäisch mit Euro-Zeichen oder utf-8 für das universelle Unicode, das alle Zeichen sämtlicher Sprachen darstellen kann):
<META name="language" content="Deutsch, German, de">
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
bzw. alternativ
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
Vergiß
nicht, jeder Deiner Seiten einen aussagekräftigen Titel zu geben. Es sieht immer
ziemlich bescheuert aus, wenn in der Browser-Titelzeile und, im Falle einer
gebookmarkten Seite, in den Lesezeichen/Favoriten etwas steht wie "Homepage", "1. Seite" oder
ähnliches. Auch "Willkommen auf der Seite von xyz" ist weniger geeignet, da das in den Bookmarks a) ggf. unter W einsortiert wird und b) oftmals nur verkürzt als "Willkommen auf ...z" zu sehen ist. Wenig aussagekräftig, oder? Besser ist der Name Deiner Homepage (oder die Domain), kombiniert mit einer überschriftgleichen Kurzbeschreibung.
Je weniger
Bilder man in seine Seiten einbindet und je kleiner die Bilder sind, desto
mehr Seiten kann man logischerweise in dem zur Verfügung gestellten
Platz unterbringen. Dieser Guide beansprucht übrigens insgesamt 2 MB
(ohne die Download-Files) - und das bei z.Zt. 40 Seiten und 342 Bildern -
es kann also eine ganze Menge in 2 MB hineinpassen.
Ladezeit: Webgrafiken
sollten nicht zu groß sein, da sonst das Laden zu lange dauert (das gilt auch in Zeiten von DSL noch, wenngleich der Anteil der ISDN- und Modem-Nutzer langsam weiter abnimmt).
Die hier verwendete "Schlange" ist z.B. 1,5 KB "groß", wird also sehr schnell
geladen. Sehr wichtig ist das auch bei dem Seitenhintergrund: große
Bilder sollte man vermeiden, auch wenn ein einziges browserfüllendes Bild sehr reizvoll erscheinen mag; besser sind kleine Bilder, die gekachelt werden (ganz abgesehen davon, dass das sorgsam ausgewählte ganzseitige Bild auf dem Rechner des nächsten Betrachters vielleicht doch unschön gekachelt wird, da er statt der eingeplanten
1024x768 vielleicht 1920x1200 als Bildschirmauflösung verwendet ;).
Die meisten
Homepage-Server laufen unter einem unixoiden Betriebssystem. Im Gegensatz zu Windows
werden hier Dateinamen case-sensitive behandelt. D.h. unter Unix sind z.B. "Bild.gif" und "bild.gif"
zwei komplett verschiedene Dateien, während es für Windows ein
und dasselbe ist. Die Schwierigkeit, die sich daraus ergibt: alle in
HTML-Dokumenten erwähnten Dateien (Bilder oder Seiten) müssen vom
Homepage-Ersteller exakt so aufgerufen/eingebunden werden, wie der Dateiname
lautet! Leider stellt Windows die Dateinamen bzgl. Groß-/Kleinschreibung nicht immer korrekt dar, daher ist es für Windows-Benutzer am sichersten, wenn man sich angewöhnt, alle Web-Grafiken und HTML-Seiten unter kleinem namen zu speichern.
Die Dateinamen
der verwendeten Bilder und der HTML-Seiten sowie Verzeichnisnamen sollten weder Leerzeichen noch Umlaute enthalten,
da die meisten Browser diese Seiten und Bilder ansonsten nicht finden können.
Im Web sollte
man nicht zu große Tabellen verwenden, da immer erst die komplette
Tabelle geladen wird, bevor ihr Inhalt angezeigt wird.
Bei wichtigen
oder größeren Bildern mit längerer Ladezeit sollte immer
ein Alternativ-Text (alt=) angegeben werden, der angezeigt wird, wenn das Bild
(noch) nicht geladen ist. Manche schalten die Anzeige von Bildern in ihrem
Browser auch ab, um schneller zu surfen oder benutzen einen Text-only Browser wie Lynx, Links, Elinks, w3m - oder lassen sich die Webseiten und ihre Navigation vorlesen, Stichwort: Barrierefreiheit.
! Besonders wichtig ist der Alternativ-Text bei Buttons, die der Navigation dienen !
Webgrafiken
haben entweder das Format GIF, JPG oder PNG. GIF bietet sich an bei Grafiken mit
klar getrennten Farben (z.B. Buttons) und Bildern, die nicht mehr als 256 Farben benötigen und evtl. transparente Bereiche enthalten sollen, JPG ist besser für Grafiken mit Farbverläufen (Hintergründe, Fotos), PNG kann für beides verwendet werden.
JPGs können sehr stark komprimiert werden (geringe Ladezeit), sind aber immer verlustbehaftet: je stärker die Kompression, desto ausgeprägter die Artefakt-Bildung.
PNGs können wie GIFs Bildbereiche transparent darstellen (und das sogar in echter Alphatransparenz, heisst, Bereiche können sogar semi-transparent dargestellt werden), sind aber aufgrund der höheren möglichen Farbanzahl qualitativ besser bei in etwa gleicher Größe.
Leider ist der MSIE auch in der Version 7 als einziger Browser immer noch nicht in der Lage, PNGs korrekt transparent darzustellen...
Waagerechte
Scroll-Balken sollten vermieden werden, da es für den Betrachter schlicht
nervig ist, wenn er sowohl vertikal als auch horizontal scrollen muß,
um die Page ganz zu sehen. Also lieber mit der Page in die Länge als
in die Breite gehen, da senkrechtes scrollen meist als angenehmer empfunden
wird...
Das HTML-Nachschlagewerk schlechthin gibt es hier:
<Startpage>
<Basics>
<Links>
<Hintergründe>
<sonstige
Elemente>
<Button-Sets>
<Buchstaben-Sets>
