| |
(Version 5.5)
Vorwort
Hallo und Herzlich Willkommen zum "Weg zur eigenen Homepage".
Diese kostenlose Dokumentation für Anfänger erklärt leicht verständlich wie man eine Homepage macht - von der Idee bis hin zur fertigen Seite im Internet. Es ist wirklich sehr einfach eine Homepage mit dieser Dokumentation professionell selbst zu erstellen, auch für komplette Anfänger.
Trotzdem möchte ich folgende Warnung vorab los werden: Diese Dokumentation behandelt das Thema sehr grundlegend. Je nach eigenem Kenntnisstand muss man mehr oder weniger viel Zeit investieren, bis man seine erste Seite fertig hat. Dazu gehört oft nicht nur viel Zeit, sondern auch Geduld. Vor allem wenn du zu dem Kreis gehörst, der sich selber als "Computerlaien" bezeichnet, wirst du sehr viel Zeit brauchen. Aber es ist trotzdem zu schaffen! Versprochen!
Hast du diese Zeit und Geduld nicht, dann gibt es auch eine Lösung: das sogenannte SiteWeb von Strato.
Es handelt sich hierbei um Homepage-Vorlagen, die man nur noch mit ein paar Klicks anpassen muss. Es ist dadurch möglich auch als Laie in weniger als 10 Minuten eine professionelle Homepage zu erstellen.
Einfach hier klicken und anmelden:
Ich würde mich aber freuen, wenn du nicht so schnell aufgibst und das Erstellen von Homepages selber erlernst.
Eine individuelle Seite ist immer schöner!
Der Weg
1) Speicherplatz
Zuerst braucht man Speicherplatz im Internet, wo man die Seite später hosten (speichern) kann. Es gibt viele Wege an Speicherplatz zu kommen. Ich will hier mehrere Möglichkeiten und deren Vor- und Nachteile nennen:
a) Schon Vorhanden: Viele Leute haben durch ihren Internetprovider (T-Online, 1&1, Freenet, ...) schon Speicherplatz und wissen es vielleicht gar nicht. Bitte informiere dich bei deinem Internetprovider, über den du online gehst, ob dieser dir kostenlos Speicherplatz zur Verfügung stellt bzw. wie viel.
Wenn man Speicherplatz vom Internetprovider nutzt, hat man den Vorteil, dass er meist im Preis inklusive ist. Die Nachteile dadurch sind aber offensichtlich: Man bindet sich auf lange Frist an den Internetprovider, denn Providerwechsel bedeutet dann fast immer eine neue Adresse für die eigene Homepage. Dies bedeutet, dass man aber erst einmal nicht mehr von Suchmaschinen gefunden wird und man verliert regelmäßige Besucher der Homepage. Ein weiterer Nachteil sind die meist unschönen langen und schlecht merkbaren Adressen, wie z.B. bei T-Online "http://home.t-online.de/home/dein_Name/seitenname.htm". Aus diesen Gründen rate ich ab den Speicherplatz vom Internetprovider zu nutzen.
b) Fast Kostenlos: Eine andere kostenlose Möglichkeit an Speicherplatz zu kommen ist sich einen kostenlosen Anbieter im Internet zu suchen. Wenn du das vorhast, dann schau mal bei kostenlos.de vorbei. Da findet man zahlreiche derartige Anbieter.
Das hat aber - wie sollte es anders sein - auch Nachteile. Bei den meisten kostenlosen Anbietern von Speicherplatz muss man Werbung für die Firma oder für Sonstiges auf der Homepage akzeptieren. Außerdem ist die Übertragungsgeschwindigkeit bei diesen Anbietern meist extrem langsam, d.h. die Homepage braucht eine Ewigkeit, bis sie sich auf dem Rechner des Betrachters aufgebaut hat. Dazu kommt noch (wie bei Speicherplatz vom Internetprovider), dass die Homepage meist eine sehr lange Adresse (URL) bekommt. Ein weiterer Nachteil ist, dass viele dieser kostenlosen Anbieter einfach die Homepage löschen (oft ohne Vorwarnung), wenn sie z.B. zu wenig genutzt wird oder wenn der Anbieter das Angebot einstellt (viele Anbieter gehen nach kurzer Zeit Pleite). Aus diesen Gründen würde ich auch von dieser Möglichkeit an Speicherplatz zu kommen abraten.
c) Auf Dauer: Wer eine dauerhafte Möglichkeit sucht seine Homepage zu hosten, der sollte Speicherplatz mieten. Viele Firmen im Internet bieten so etwas an. Man sollte aber mit Vorsicht an die Sache heran gehen, will man nicht für schlechte Leistung viel Geld ausgeben. Am günstigsten ist Speicherplatz meist im Zusammenhang mit einer eigenen Domain (z.B. www.homepage-mixer.de). Ich empfehle bei einem der größeren Webspace Provider (Speicherplatz-Anbieter) den Speicherplatz zu mieten. Bei diesen bekommt man meist das beste Preis-Leistungsverhältnis und die Systeme sind ausfallsicherer.
Einer der größten und auch günstigsten Anbieter für Domains ist Strato. Da meine Homepage seit mehreren Jahren von Strato gehostet wird, habe ich Erfahrung mit Strato und kann Strato als Speicherplatz-Anbieter mit eigener Domain empfehlen.
Für Anfänger, die nicht viel vorhaben, empfehle ich das BasicWeb Paket, da dieses bereits alles bietet, was man am Anfang braucht. Es handelt sich hierbei um das günstigste Produkt mit Speicherplatz und FTP-Zugang.
Für Anfänger, Fortgeschrittene und Profis, die eine mehr oder weniger umfangreiche Seite erstellen wollen, empfehle ich das BasicWeb XL Paket oder das PowerPlus Paket. Bei diesen Paketen sind neben Zugriffsstatistiken, einer CGI-Bibliothek (mit Counter, Gästebuch, Formularen, usw.) und 500 MB bzw. 1200 MB Speicherplatz auch 3 bzw. 4 .de-Domains inklusive. Für Fortgeschrittene besteht außerdem die Möglichkeit PHP oder Perl sowie MySQL einzusetzen. Beim PowerPlus Paket sind zusätzlich noch Cronjobs und SSL enthalten. Das ist aber noch lange nicht alles - das Paket ist wirklich sehr umfangreich.
Die beiden anderen PowerPlus Pakete L und XL bieten gegenüber dem PowerPlus Paket nicht wirklich mehr brauchbare Leistung, mal abgesehen davon, dass zusätzliche Inklusiv-Domains enthalten sind. Der Aufpreis rentiert sich also nur in Ausnahmefällen. Die beiden Pakete kann man als richtigen Luxus bezeichnen und der normale Anfänger zahlt bei diesen Paketen wohl unnötig viel Geld.
Seit geraumer Zeit gibt es noch ein DynamiX Paket mit optionalen Zusatzkomponenten. Vom Preis-Leistungsverhältnis ist dieses Paket wohl nur in seltenen Ausnahmefällen empfehlenswert.
Bei Interesse für eines der Pakete einfach hier klicken, informieren und anmelden:
Wer nicht zu Strato will, kann sich mal bei 1&1 umschauen. Auch 1&1 bietet relativ günstig Webhosting Pakete an. Allerdings habe ich bisher noch nicht all zu viel Erfahrung mit 1&1 WebHosting, höre aber durchweg nur positive Kritik.
2) Inhalt und Gestaltung
Wenn man Webspace (Speicherplatz im Internet) hat, kann man sich zum Inhalt und zur Gestaltung der Homepage Gedanken machen. Man sollte sich hier genau überlegen, was man alles auf der Homepage haben will. Am besten fertigt man sich zuerst eine Liste mit allem, was einem einfällt, an. Dann sollte man dieser Liste eine Struktur verleihen, also mehrere Stichpunkte zu einem Oberpunkt zusammenfassen. Normalerweise erstellt man eine Hauptseite, die ein Menü mit maximal (!) 10 Oberpunkten enthält. Umso weniger Oberpunkte umso besser, da dann alles übersichtlicher bleibt. Man überblickt das Menü am besten, wenn nicht mehr als 6 Oberpunkte vorhanden sind (wichtige Designer-Regel!). Die Homepage sollte insgesamt hierarchisch aufgebaut werden:
Hauptseite
/ | \
Oberpunkt Oberpunkt Oberpunkt
/ / \ \
Unterpunkt Unterpunkt Unterpunkt Unterpunkt
Überlege dir genau den Aufbau deiner Homepage, weil du dir dadurch später sehr viel Zeit sparen kannst. Die Oberpunkte sollten auch so gewählt werden, dass sie ausbaufähig sind. D.h. wenn
man später etwas hinzufügen möchte, sollte dies leicht in einem der Punkte untergebracht werden können,
egal wie verrückt es sein mag.
Nachdem man sich den Inhalt überlegt hat, sollte man sich auch noch ein paar Gedanken zur Gestaltung der Homepage
machen. Zuviel Text ist genauso schlecht wie zu viele Bilder. Man muss ein gutes Mittelmaß finden. Auch die Farbwahl ist wichtig. Hier gibt es z.B. die Möglichkeit
die Homepage in einem Farbschema zu machen (also z.B. alles in Blautönen auf weißem Hintergrund mit schwarzer Schrift). Das hat den Vorteil eines guten Wiedererkennungseffektes. Eine andere
Möglichkeit wäre für jedes Themengebiet ein eigenes Farbschema zu verwenden. Das bewirkt eine sehr große Übersichtlichkeit der Homepage.
Das Wichtigste ist, sich vorab den groben Aufbau der einzelnen Seiten schon mal zu überlegen: Was soll wohin, wo kommt das Logo hin, wo das Menü, wo der Inhalt? Am besten
malt man sich alles auf einem Blatt Papier vor.
Oft ist es bei diesem Schritt hilfreich, wenn man das nötige Material schon zusammen gesucht hat (Texte und Bilder).
3) Bildbearbeitung
HTML steht für HyperText Markup Language und ist das Format, in dem Internetseiten abgespeichert werden. Das Wichtigste: HTML-Dateien enthalten nur TEXT, d.h. nicht irgend welche kryptischen, verschlüsselten oder kompilierten Sachen. Kaum zu glauben, da man ja normal Internet-Seiten mit Bildern gewohnt ist. Die Bilder, die man auf den Seiten sieht, werden mit Hilfe eines Befehls eingefügt. Bilder sind also in extra Dateien gespeichert, die aus der HTML-Datei heraus aufgerufen werden. Zuerst möchte ich jetzt darauf eingehen, wie man Bilder internetgerecht bearbeitet und speichert.
Bilder im Internet werden normal nur in den Formaten JPG und GIF gespeichert. Die Kunst ist es, die Bilder mit hoher Qualität und möglichst wenig Speicherplatz zu speichern. Ein Bild sollte NIE mehr als 60 KB haben, da sonst die Ladezeiten für den Besucher der Homepage sehr lang werden. Deshalb muss man schon beim Speichern das richtige Format wählen.
Hier die Vor- und Nachteile der Formate GIF und JPG:JPG:
JPG Bilder werden immer mit 16 Mio. Farben oder 256 Graustufen gespeichert. Das bedeutet, dass die Bilder sehr hohe Qualität haben. Dabei muss man betonen, dass Bilder in JPG wirklich sehr platzsparend gespeichert werden. D.h. die Bilder kommen trotz hoher Qualität mit sehr wenig Speicherplatz aus. Normal verwendet man JPG um Fotos oder Bilder mit sehr vielen Farben zu speichern.
Hier ein Beispiel:![Blautopf [10 KB] - (c) homepage-mixer.de](blautopf.jpg)
GIF:
GIF Bilder können mit einer unterschiedlichen Anzahl an Farben gespeichert werden. Das heißt, wenn ein Bild zum Beispiel mit 4 oder 16
Farben auskommt, dann sollte man auf jeden Fall GIF als Speicherformat wählen, da das dann Speicherplatz spart.
GIF hat aber noch mehr
Vorzüge: Man kann zum Beispiel eine Farbe wählen, die dann durchsichtig im Browser erscheint, so dass man dann die
Hintergrundfarbe oder das Hintergrundbild der Homepage durchsehen kann.
Auf vielen Homepages sieht man kleine Videos oder bewegte Bilder. Das sind so gut wie immer auch GIF Bilder. Das GIF Format unterstützt nämlich auch Animationen. Es werden mehrere Bilder in einem GIF Bild gespeichert, die dann hintereinander ablaufen.
Hier ein Beispiel:
Weitere Tipps, um den Speicherplatz von Bildern zu verkleinern:
- Bilder sollten ca. 50 - 100 DPI haben (1 DPI entspricht 1 Punkt pro Zoll, wobei 1 Zoll = 2,54 cm).
- Man sollte Bilder nicht größer machen, als sie betrachtet werden sollen. Wenn man das Bild also im Browser alleine (ohne Seite) öffnet, sollte es bereits die richtige Größe haben.
- Die Anzahl der Farben bei GIF Bildern sollten auf ein Minimum reduziert werden. Das geht am besten mit dem Programm SmartSaver (ist bei Photo Impact dabei).
- Die Kompressionsrate sollte bei JPG Bildern so hoch wie möglich gewählt werden. Auch das geht am besten mit dem Programm SmartSaver (ist bei Photo Impact dabei).
- Das wichtigste ist aber, das richtige Speicherformat zu wählen, also GIF oder JPG!
Um Bilder zu bearbeiten empfiehlt es sich, mehrere verschiedene Programme zu verwenden, da jedes Programm bestimmte Dinge besser kann bzw. besondere Vorzüge hat.
Kleine Übersicht über Grafikbearbeitungsprogramme:
| Zum Verändern der Auflösung, der Farbtiefe, der Größe, zum Einscannen und zur Bearbeitung von Bildern und Fotos empfehle ich folgende Programme: |
|---|
| - Photo Impact (mit SmartSaver) [Hersteller] [Kaufen bei Amazon] |
| - Paint Shop Pro [Hersteller] [Kaufen bei Amazon] |
| - Adobe Photoshop [Hersteller] [Kaufen bei Amazon] |
| Für Animierte GIF Bilder empfehle ich folgende Programme: |
| - GIF Construction Set Professional (englisch!) [Hersteller] [Produktseite] |
| - Kai's Supergoo (oder sein Vorgänger: Kai's Power Goo) [Kaufen bei Amazon] |
| - Photo Impact (siehe oben) |
| Zum Erstellen von Logos (auch animiert möglich) empfehle ich: |
| - Cool 3D [Hersteller] [Kaufen bei Amazon] |
| - Xara 3D (englisch!) [Hersteller] [Kaufen bei Amazon] |
| - Photo Impact (siehe oben) |
4) Programmierung
Nun der wohl schwierigste Teil an einer Homepage: Die Programmierung in HTML (HyperText Markup Language). Dazu muss ich aber gleich sagen, dass HTML wirklich die leichteste Programmiersprache ist, die es überhaupt gibt (man verzeihe mir das Wort Programmiersprache). Schon nach 5 Min. kann man Berge versetzen. Jeder ist in der Lage innerhalb kürzester Zeit HTML zu erlernen.
Am einfachsten für den Einstieg ist es, wenn du für die folgenden ersten Versuche das Notepad (Editor) von Windows (Start, Programme, Zubehör, Editor) verwendest und die Datei dann unter dem Namen "index.htm" abspeicherst. Zum Anschauen des Ergebnisses einfach dann die eben gespeicherte Datei mit dem vorhandenen Browser (z.B. Internet Explorer) öffnen.
Eine HTML Seite besteht aus Befehlen und Text.
Grundlagen:
- Befehle werden immer in <spitzen> Klammern geschrieben. (Es ist meist egal, ob der Befehl in Klein- oder Großbuchstaben geschrieben wird.)
- Viele Befehle müssen nachdem sie begonnen wurden auch wieder beendet werden. Das geschieht mittels eines Schrägstrichs vor dem </Befehl>.
- Alles, was nicht in spitzen Klammern steht, erscheint als Text auf der Homepage (Zeilenumbrüche werden grundsätzlich von Browsern nicht beachtet und müssen mit einem Befehl eingefügt werden - dazu noch später; Sind mehrere aufeinander folgende Leerzeichen vorhanden, reduziert der Browser die Leerzeichen auf ein Leerzeichen - sind mehr Leerzeichen erwünscht, müssen sie mittels Sonderzeichen eingefügt werden - dazu aber auch noch später).
- Eine Seite enthält immer einen bestimmten Grundbefehlssatz, der im Folgenden gezeigt wird.
GRUNDAUFBAU:
Jede HTML Seite beginnt mit dem Befehl <html> und endet mit dem Befehl </html>.
| <html> </html> |
Zwischen <html> und </html> gibt es 2 Bereiche:
Diese 2 Bereiche beginnen je mit einem Befehl und werden wieder je mit einem beendet:
<html> <head> </head> <body> </body> </html> |
Soweit so gut. Jetzt gehe ich zuerst auf den Kopf (head) der HTML-Datei ein und danach auf den eigentlichen Teil, den Body.
HEAD
Der Kopf enthält normal nur 2 Sachen. Zum einen steht dort der Titel der Seite, der später bei der Anzeige im Browser in der Titelzeile des Fensters angezeigt wird. Das sollte man auf keinen Fall weglassen.
<head> <title>Das hier ist der Titel der Homepage</title> </head> |
Das Zweite, was im Kopf der HTML-Datei steht, ist der sog. Meta Tag. Der Meta Befehl dient dazu, dass Suchmaschinen (Search Engines) deine Seite im Internet leichter finden. Suchmaschinen können mit Hilfe des Meta Eintrags leichter den Inhalt deiner Seite dem Suchenden zur Verfügung stellen, damit der Suchende auch wirklich schnell das findet, was er auch will. Der Meta Befehl ist sehr wichtig, da sonst niemand die Informationen auf deinen Seiten bzw. deine Seiten überhaupt finden wird. Der Meta Befehl ist der erste Befehl, den ich nun vorstelle, der NICHT mit </meta> wieder beendet wird.
Hier die 3 wichtigsten Meta Befehle:
<meta name="description" content=" "> |
Hier zwischen den " " nach content beschreibt man seine Seite in 1-2 Sätzen.
<meta name="author" content=" "> |
Hier zwischen den " " nach content schreibt man den Namen des Autors.
|
<meta name="keywords" content=" "> |
Hier zwischen den " " nach content schreibt man Stichwörter, die auf der Seite vorkommen und mit dem Inhalt der Seite zu tun haben (mit Komma getrennt). Dabei sollte man nicht irgendwelche unmöglichen Wörter nehmen, sondern Wörter, von denen man erwartet, dass sie der Suchende bei einer Suchmaschine eingibt.
Soweit sind wir jetzt:
<html> < head> <title>Das hier ist der Titel der Homepage</title> <meta name="
description" content="Beschreibung, wie eine Homepage entsteht."> </head> <body> </body> </html> |
BODY
So. Nun haben wir bereits die Hälfte geschafft. Der Kopf ist fertig. Jetzt geht es zum Body. Im Body steht all das, was man auf der eigentlichen Seite sieht.
Zuerst möchte ich 2 Sachen vorwegnehmen. Zum einen sind das die Sonderzeichen, zum anderen die Farben.
Sonderzeichen:
Sonderzeichen wie ä und ö müssen durch spezielle Zeichenfolgen ersetzt werden, da es sonst in anderen Ländern mit anderem Zeichensatz zu Problemen kommen kann. Hier die wichtigsten Sonderzeichen:
ä = ä
Ä = Ä
ö = ö
Ö = Ö
ü = ü
Ü = Ü
ß = ß
" = "
erzwungenes Leerzeichen =
© = ©
Farben:
Man kann in HTML Farben für z.B. den Text oder den Hintergrund definieren. Dafür gibt es 2 Möglichkeiten: Man kann die englischen Farbnamen benutzen oder die Farben Hexadezimal angeben (eine zweistellige Zahl beginnt nicht nach der Zahl 9, sondern nach 9 wird mit Buchstaben von A bis F weitergezählt und erst dann beginnt die zweite Stelle zu zählen und zwar auch wieder bis F - und so weiter; Beispiel: 13 Dezimal ist also D in Hexadezimal und 26 Dezimal ist 1A in Hexadezimal).
Englische Namen für die gängigsten Farben:
black, maroon, green, olive, navy, purple, teal, gray, silver, red, lime, yellow, blue, fuchsia, aqua, white
Die Hexadezimale Angabe funktioniert folgendermaßen:
# XX XX XX
Für die XX werden jeweils 2 Hexadezimale Zahlen angegeben, wobei die ersten XX den Rot Anteil verändern, die zweiten XX den Grün Anteil und die letzten XX den Blau Anteil. Für die X kann man Zahlen von 0 bis 9 und Buchstaben von A bis F einsetzen.
Beispiel: #0080FF ist ein schön zartes Blau.
Ob man Farben mittels der englischen Namen oder der Hexadezimal Variante angibt spielt im Endeffekt keine Rolle. Wichtig ist nur, dass man weiß, falls man etwas wie "#3A6CF9" sieht, es sich um eine Farbe handelt.
Eine Sache habe ich bis jetzt nicht verraten. Bei manchen Befehlen kann man nach dem Befehl einen oder mehrere Parameter angeben
(noch in der spitzen Klammer mit einem Leerzeichen zum Befehl getrennt).
Auch hinter dem Befehl
<body> kann man einige Parameter angeben, welche das Aussehen der Seite beeinflussen.
Folgende Parameter gibt es für den body:
| bgcolor="#CCFFFF" | für die Hintergrundfarbe |
| text="black" | für die Textfarbe |
| link="#FF9966" | für die Farbe von Links (Verknüpfungen zu anderen Seiten) |
| vlink="#FF9966" | für die Farbe von Links zu Seiten, auf denen der Betrachter schon einmal war |
| background="bild.gif" | für
ein Hintergrundbild auf der Seite Das Hintergrundbild muss natürlich existieren, also für bild.gif den richtigen Bildernamen (mit der richtigen Endung - gif oder jpg) angeben. Mit diesem Bild wird dann der Hintergrund der Homepage tapeziert (gekachelt). |
Die Parameter beim Body Befehl müssen NICHT angegeben werden. Wenn man sie nicht angibt, werden die Standardwerte vom jeweiligen Browser übernommen.
Ein kleines Beispiel:
<body bgcolor="#CCFFFF" text="black" link="#FF9966" vlink="#FF9966" background="bild.gif"> </body> |
Die Reihenfolge der Parameter spielt keine Rolle!
Jetzt zum eigentlichen Inhalt des Bodys. Im Body steht der Text, der auf der Homepage erscheinen soll, ganz normal drin.
<body> Das hier ist Text, der dann auf der Homepage lesbar ist. </body> |
Diesen Text kann man mit Befehlen verändern bzw. Bilder, Links und Sonstiges hinzufügen.
Folgende Befehle sind die wichtigsten:
| <i>TEXT</i> | Text kursiv (italic) |
| <u>TEXT</u> | Text unterstrichen |
| <b>TEXT</b> | Text fett (bold) |
| <br> | neue Zeile |
| <p>TEXT</p> | ein Absatz |
| <hr> | Trennlinie zwischen Text |
| <center>TEXT</center> | Text zentrieren |
| <h1>TEXT</h1> | Überschrift Größe 1 (mögliche Größen: 1-6) |
| <li>TEXT</li> | Stichpunkte |
| <font color="#FFFFFF" size="2">TEXT</font> | Der Font Befehl nimmt Einfluss auf die Schriftfarbe und Größe. Man kann wahlweise den Parameter color oder size angeben oder beide zusammen. Size kann die Werte 1 bis 7, -6 bis -1 und +1 bis +6 einnehmen. Die Zahlen mit Plus-/Minuszeichen davor werden zum Standard addiert/subtrahiert. (3 ist Standard) |
| <img src="bild.jpg" alt="Beschreibung" align="right" border="0"> | Mit dem Befehl img kann man Bilder einfügen. Der einzige Parameter, der erforderlich ist, ist der src Parameter, wo angegeben wird, welches Bild angezeigt werden soll. Der Befehl funktioniert übrigens für GIF und JPG Bilder. Der Parameter alt gibt alternativen Text an, der erscheint, wenn man mit der Maus über dem Bild stehen bleibt, bzw. wenn keine Bilder geladen werden. align gibt an, ob das Bild zentriert (center), links (left) oder rechts (right) angezeigt werden soll. Border gibt die Rahmengröße um das Bild außen herum an. Beim Wert 0 erscheint kein Rahmen. Die Angabe erfolgt in Pixel und beschreibt die Rahmendicke. |
| <a href="seite.htm">LINKTEXT
</a> <a href="http://homepage-mixer.de"><img src="bild.jpg"></a> <a href="datei.zip">Download </a> | Dieser Befehl dient dazu, einen Link (Verknüpfung) zu einer anderen Seite zu erstellen oder einen Link auf eine Datei, die man z.B. zum Download anbieten will. Als Parameter muss man href angeben und dahinter die Adresse der Seite / Datei, zu der man den Link setzen will. Solange der Befehl nicht mit </a> beendet wurde, geht der Text, also der Linktext (meist blau und unterstrichen), den man anklicken kann, weiter. Statt Text kann man auch ein Bild einfügen, das dann anklickbar ist. Man kann auch Bild und Text als Link kombinieren. |
| <a href="mailto:mustermann@example.com"> Schick mir ne Mail</a> | Genauso wie man einen Link zu einer anderen Seite macht, funktioniert auch der Link zu einer E-Mail Adresse. Nur gibt man mit href="mailto:mustermann@example.com" eine E-Mail Adresse mit vorangestelltem mailto: statt der Adresse zu einer Seite/Datei an. |
| <!-- Kommentartext --> | In der ganzen HTML-Datei (auch im Head) kann man Kommentare einfügen, die zur besseren Übersicht dienen können. Diese Kommentare erscheinen nicht auf der Homepage. |
Natürlich gibt es noch viel mehr Befehle. Aber mit den bis hierher aufgezeigten Befehlen, kann man schon eine schöne Homepage gestalten.
Jetzt noch ein abschließendes Beispiel:
<html> <head> <title>BEISPIEL HOMEPAGE</title> <meta name="description" content="Beispiel zu: Der Weg zur eigenen Homepage"> </head>
<body bgcolor="#FFFFFF" text="black" link="blue" vlink="red"> <h4><u>Herzlich Willkommen auf der Beispielseite von "Der Weg zur eigenen
Homepage"</u></h4> </body> </html> |
So, jetzt weißt du, wie man eine Homepage programmiert. Einen guten Trick möchte ich hier jetzt noch verraten:
Wenn du auf irgendeiner Seite im Internet etwas ganz tolles siehst, das du gerne genauso auf deiner Homepage haben willst, dann schau dir einfach den Quelltext der Homepage an und schau wie der andere das gelöst hat. Dann geht gleich vieles leichter. Den Quelltext einer Homepage bekommt man bei den meisten Browsern indem man mit der rechten Maustaste auf die Seite klickt. Daraufhin fährt ein Menü heraus, wo es dann so etwas wie "Quelltext anzeigen" oder "View Source" geben sollte. Wenn man das anklickt, bekommt man den Quelltext der Seite. Eine zweite Möglichkeit ist es im Menü "Datei" bzw. "File" den Unterpunkt "Speichern unter" bzw. "Save as" auszuwählen und die Datei auf Festplatte zu speichern und dann mit dem Editor zu öffnen.
Achtung: Das war jetzt KEINE Ermunterung ganze Seiten zu klauen!! Ich möchte ausdrücklich darauf hinweisen, dass es da noch so etwas wie Copyright bzw. Urheberrecht gibt. Das sollte unbedingt beachtet werden.
Es gibt noch viele Tricks und Kniffe. Aber nur Übung macht den Meister. Am schnellsten wird man durch ein praktisches Projekt zum Profi. Wenn du dich nun noch mehr in HTML vertiefen willst (Tabellen, Frames, etc.) oder nicht weiter kommst, weil du Informationen zu einem Befehl brauchst oder so, dann empfehle ich SELFHTML oder eines der Bücher unter Buchtipps. SELFHTML ist das Online-Nachschlagewerk für HTML (wird sogar von Profis verwendet!!).
Programm, das beim Programmieren hilft:
| Homesite | Mit diesem Programm kann man sehr schön Seiten erstellen (es kann, so wie erlernt, am Quelltext gearbeitet werden oder auch direkt an der Seite). Und das Beste: Man kann sich Programmierfehler aufzeigen lassen und diese dann sehr einfach verbessern. Wird von Profis verwendet, ist aber auch für Anfänger geeignet. [Hersteller][Kaufen bei Amazon] |
5) Upload
Der Upload (Hochladen der Seite auf den Speicherplatz im Internet) erfolgt meist per FTP (File Transfer Protocol >> Übertragungsprotokoll
für Dateien). Deswegen werde ich jetzt nur auf FTP näher eingehen. Zum Upload via FTP braucht man ein FTP Programm wie zum Beispiel
FileZilla, welches man kostenlos unter
http://sourceforge.net/projects/filezilla/ herunterladen kann.
Es ist meist ausreichend, wenn man im FTP Programm folgende vier Einstellungen vornimmt:
- Adresse
- Benutzer
- Passwort
- Port
Die Adresse (Hostname) sieht normal folgendermaßen aus: www.provider.end (ohne http:// eingeben, für provider den Namen des Providers oder den eigenen Domainnamen eintragen und für end die Endung [meist .com oder .de]).
Das ist meist die User ID (der Login Name oder Benutzername), mit der man sich auch bei seinem Provider einloggt oder die User ID, die man eben für seinen Speicherplatz bekommen hat (wenn man z.B. ein kostenloses Angebot nutzt).
Mit dem Passwort ist es genauso wie bei der User ID: Erhält man entweder vom Provider oder von dem, der den Speicherplatz zur Verfügung gestellt hat.
Als Portnummer muss man eigentlich immer 21 eintragen, den Standard Port für das FTP Protokoll.
Die Bezeichnungen der vier Einstellungen variieren manchmal ein bisschen, je nachdem welches FTP Programm man einsetzt.
Die richtigen Einstellungen teilt normalerweise der Provider für den Speicherplatz mit.
Wie man dann weiter mit dem FTP
Programm arbeitet ist eigentlich selbsterklärend bzw. kann man sich leicht mit der Hilfedatei verständlich machen und aneignen.
Nachdem die Zugangsdaten (Adresse, Benutzer, Passwort und Port) eingetragen sind, einfach auf Verbinden klicken.
Auf der linken Seite sieht man die Dateien auf dem eigenen Computer. Hier sucht man die Internetseiten und Bilder, die man hochladen möchte, heraus
und zieht sie dann auf den Homepage-Speicherplatz auf der rechten Seite. Daraufhin werden die Dateien hochgeladen.
6) Testen
Nachdem man die fertige Seite ins Internet gestellt hat, sollte man sie auf jeden Fall einmal komplett durchtesten. Es können z.B. Links falsch sein, was man oft erst nach dem Upload merkt. Dieser Punkt sollte NIE vergessen werden!!!
Das Testen sollte folgendermaßen ablaufen:
Man ruft jede Seite im Internet auf und überprüft alle Seiten einzeln jeweils auf folgende 3 Punkte:
Mögliche Fehlerquellen:
Die häufigste Fehlerquelle ist, dass Groß- und Kleinschreibung bei Links oder Bildernamen nicht beachtet wird. Auf der Festplatte daheim unter Windows macht so etwas natürlich keine Probleme, da Windows Groß- und Kleinschreibung nicht beachtet. Bei anderen Betriebsystemen wird aber zwischen Groß- und Kleinschreibung bei Dateinamen unterschieden und wenn der Server (Computer, auf dem deine Homepage gespeichert wird) ein solches Betriebsystem hat (das ist meistens der Fall), kann es dazu kommen, dass Links oder Bilder nicht funktionieren. Z.B. kann eine Seite in Großbuchstaben gespeichert sein, der Link aber auf eine Datei in Kleinbuchstaben verweisen. Diese Fehlerquelle lässt sich aber leicht ausschalten, wenn man Dateinamen, Bildernamen und Links immer komplett in Kleinbuchstaben schreibt.
Was auch häufig falsch gemacht wird ist, dass die Startseite der Homepage nicht index.htm oder index.html heißt. Manchmal sind auch andere Namen als Startseite zugelassen oder erforderlich. Wie man seine Startseite nennen muss, erfährt man bei seinem Speicherplatz-Provider.
Außerdem muss man aufpassen, dass man die Dateien (z.B. die Bilder) auf der Festplatte nicht aus einem anderen Verzeichnis (z.B. einem Unterverzeichnis) heraus aufruft, im Internet aber alles in dasselbe Verzeichnis kopiert. Am besten vermeidet man solche Probleme, indem man von Anfang an alles im gleichen Verzeichnis speichert. Das ist natürlich nur für kleinere Projekte ratsam, denn bei größeren Projekten geht so schnell die Übersicht verloren. Bei größeren Projekten bietet sich ein Unterverzeichnis nur für Bilder an.
Manchmal kann es auch zu Fehlern kommen, die man selbst gar nicht bemerkt. Zum Beispiel, wenn man c:\Homepage\SEITE.htm als Link eingibt, wird das zwar wunderbar von der eigenen Festplatte gelesen, im Internet kann die Seite aber nur vom eigenen Rechnern aus aufgerufen werden, da die anderen Leute die Seite ja nicht auf ihrer Festplatte haben. Deshalb sollte man den nächsten Absatz unbedingt beachten!
Das Testen aller Seiten sollte man unbedingt auf mehreren verschiedenen Rechnern wiederholen (z.B. bei Freunden, Verwanden, Arbeitskollegen, ...). Das ist sehr wichtig, weil Internet-Seiten
auf verschiedenen Computern ganz unterschiedlich dargestellt werden können. Das liegt z.B. an einem anderen Betriebsystem, einem anderen Browser bzw. einer anderen Browserversion, an anderen Einstellungen
oder wie es meist der Fall ist an einer anderen Auflösung. Oft muss man dann noch nachbessern.
Du solltest deine Homepage mindestens einmal unter der Auflösung 1024x768 gesehen haben.
Zum Schluss kann man seine Homepage zusätzlich noch einmal
automatisch durchchecken lassen. Viele Seiten bieten so einen Service an - oft sogar kostenlos. Das Ergebnis dieser Tests ist aber häufig nicht besonders aussagekräftig. Doch
manchmal findet man auch dadurch noch kleinere oder größere Fehler.
Eine aktuelle Liste, wo du überall im Internet deine Seiten kostenlos durchchecken
lassen kannst, findest du bei kostenlos.de.
Specials
Eigene .de Domain
Eine eigene Domain ist das Statussymbol in unserer heutigen Gesellschaft. Viele denken immer noch, dass ein eigener Domainname (z.B. www.homepage-mixer.de) viel kostet. Dies ist aber längst nicht mehr der Fall. Man bekommt eine eigene .de Domain bereits für ein paar Cent pro Monat.
Hier kannst du kostenlos testen, ob dein Wunschname noch frei ist und ihn gleich für dich sichern. Das ist sehr empfehlenswert, da die meisten Wunschnamen schon belegt sind.
|
|
Counter / Gästebuch
Counter und Gästebücher sind das beliebteste Accessoire für jede Art von Homepage. Doch wie macht man so etwas?
Das Problem bei beiden ist, dass etwas auf dem Server gespeichert werden muss, nämlich die Counterzahl und die Gästebucheinträge. Das bedeutet aber ein gewisses Sicherheitsrisiko, deshalb mehr Konfigurationsaufwand für den Provider und ist aus diesem Grund bei "normalem" Speicherplatz für die Homepage meist nicht möglich.
Glücklich können die sein, die auf mich gehört und sich eines der von mir empfohlenen Pakete bei Strato bestellt haben. Da ist nämlich ein Gästebuch und ein Counter im Preis inklusive.
Alle anderen müssen aber deshalb nicht unbedingt darauf verzichten, auch wenn ihr Speicherplatz-Anbieter kein Gästebuch und keinen Counter bereitstellen. Bei kostenlos.de findet man viele Anbieter, die Gästebücher und Counter kostenlos zur Verfügung stellen. Meist muss man aber dafür eine Werbeeinblendung des Anbieters akzeptieren.
Suchmaschinen
Jeder Homepage-Eigentümer will, dass seine Homepage im Internet gefunden wird. Dazu dienen ja bekanntlich Suchmaschinen. Doch wie schafft man es, dass Suchmaschinen die eigene Homepage finden und indizieren (also in ihren Suchkatalog aufnehmen)?
Als erstes sollte man seine Homepage gut vorbereiten, bevor man die Suchmaschinen darauf los lässt.
Das Wichtigste ist, dass die Homepage die sog. Meta Tags enthält. Genaueres zu den Meta Befehlen findet sich oben im Kapitel Programmierung.
Es ist auch sehr wichtig, dass die Homepage Text enthält. Viele Suchmaschinen indizieren nicht nur die Informationen, die in den Meta Tags enthalten sind, sondern auch den Text, der direkt auf der Homepage steht.
Nun ist die Homepage zwar schon gut auf Suchmaschinen vorbereitet, doch die Suchmaschinen müssen jetzt noch auf die Homepage aufmerksam gemacht werden.
Bei den meisten Suchmaschinen kann man seine Homepage direkt eintragen. Das Problem dabei ist nur, dass es sehr viele Suchmaschinen gibt und man dadurch sehr viel Zeit braucht. Dafür gibt es aber eine Lösung: Es gibt Automatismen, die einen gleichzeitig bei vielen Suchmaschinen anmelden.
Manchmal bietet der eigene Provider für Speicherplatz bereits einen solchen Service an. Aber auch wenn ihr Speicherplatz-Anbieter keinen Anmeldeservice für Suchmaschinen anbietet - bei kostenlos.de findet man sehr viele Anbieter, die einen Eintragungsservice kostenlos zur Verfügung stellen. Allerdings muss man dafür teilweise z.B. eine dreimonatige Einbindung eines Banners des Anbieters akzeptieren, oder ähnliches.
Geld verdienen
Geld verdienen mit der eigenen Homepage ist vor allem bei niedrigen Besucherzahlen immer eine schwierige Sache (niedrig = weniger als ein paar tausend pro Monat). Viele Anbieter sind höchst unseriös oder gehen plötzlich Pleite, bevor man einen einzigen Cent, des bereits verdienten Geldes gesehen hat.
Ein sehr vertrauenswürdiger und seriöser Partner ist Zanox, den ich sehr empfehlen kann. Mit Zanox kann man für namenhafte Firmen Werbung machen. Unter anderem kann man über Zanox für O2, amazon.de, Conrad, bonprix, Quelle, opodo, OTTO, Schlecker, Neckermann, Air-Berlin, Esprit, Plus, Tchibo, Expedia.de, Vodafone, myToys, Lycos, Arcor, E-Plus, Simyo, Karstadt, T-Com, T-Mobile, T-Online, Strato und Yello Strom werben. Insgesamt stehen weit über 100 Werbepartner zur Verfügung und man kann sich genau die heraussuchen, für die man werben will bzw. die am besten zur eigenen Homepage passen.
Falls du Interesse bekommen hast, dann melde dich doch gleich hier kostenlos an:
Buchtipps
|
Jetzt lerne ich HTML . Der einfache Einstieg in die eigene Website. von Harald Taglinger Kurzbeschreibung: Lernen Sie jetzt HTML Schritt für Schritt ganz einfach ohne Vorkenntnisse. Bereits nach den ersten Kapiteln können Sie einfache Seiten für das Web erstellen. Aber auch komplexere Themen wie Stylesheets, Formulare oder Projektsteuerung bleiben nicht außen vor. Die beiliegende 6-seitige Farbtabelle schafft schnellen Überblick bei der Farbgestaltung.
| ||
|
HTML & XHTML kurz & gut von Jennifer Niederst Robbins Kurzbeschreibung: Diese kompakte Kurzreferenz liegt nun in der 3. Auflage vor und bietet einen gut organisierten Überblick über alle HTML- und XHTML-Tags sowie ihre Attribute. Für alle Webdesigner, -autoren und -entwickler, die Wert darauf legen, standardkonforme Websites zu erstellen, wird dieses Buch ein unentbehrlicher Begleiter sein. Berücksichtigt werden die Standards HTML 4.01 und XHTML 1.0. Die Kurzreferenz beinhaltet eine alphabetische Übersicht über alle HTML- und XHTML-Elemente, die Ihnen die Suche nach der Funktion und Einsatzweise einzelner Tags so einfach wie möglich macht. Außerdem finden Sie in diesem Buch eine kompakte Liste der Zeichen-Entities für HTML und XHTML sowie nützliche Infos zu den DOCTYPE-Deklarationen.
| ||
|
Pep fürs Web - Das eigene Web-Angebot erfolgreich ausbauen von Achim Beiermann, Volker Hinzen Kurzbeschreibung: Websites gibt es wie Sand am Meer. Wer da noch auffallen will bzw. seinen "Kunden" einen besonderen Service bieten möchte, muss mehr drauf haben als Webseiten von der Stange! Bringen Sie Pep auf Ihre Website - dieses Buch zeigt Ihnen wie! Mit CD-ROM.
| ||
|
HTML. Von der Baustelle bis JavaScript. von Helmut Erlenkötter Kurzbeschreibung: Dieser Grundkurs vermittelt Schritt für Schritt, wie man mit HTML seine Webseiten effektvoll gestaltet. Komplexere Lösungen mit Spezialprogrammen (FrontPage, HotMetal) oder mit der Programmierung in JavaScript bieten auch fortgeschrittenen Anwendern neue Ideen und Anregungen.
|
Weitere Bücher zum Thema suchen:
Doku
Den "Weg zur eigenen Homepage" (Version 5.5) kann man auch ausdrucken. Bitte beachte aber den urheberrechtlichen Hinweis am Ende der Dokumentation.
Verlinken
Ich freue mich, dass du bis hierher gelesen hast. Der "Weg zur eigenen Homepage" hat mich sehr viel Zeit und Arbeit gekostet. Deswegen wäre es sehr nett von dir, wenn du als kleines Dankeschön einen Link auf deine Homepage setzt. <a href="http://homepage-mixer.de" target="_top"> <img src="http://homepage-mixer.de/logo.gif"></a> Und das sieht dann so aus:  |
Copyright
|
Urheberrechtlicher Hinweis: Diese Dokumentation ist urheberrechtlich geschützt. Der Urheber ist Norbert Silberhorn. Das direkte Verlinken dieser Dokumentation ist ausdrücklich erwünscht und erfordert keine extra Genehmigung durch den Urheber. Das Anfertigen einer Kopie ist für private, nicht kommerzielle Zwecke gestattet. Das darüber hinausgehende Vervielfältigen (egal in welcher Art und Weise), das Verbreiten, die öffentliche Zugänglichmachung der Dokumentation auf der eigenen Homepage oder auf anderen Seiten im Internet oder auf andere Art und Weise, ist weder in der Originalfassung noch in bearbeiteter Fassung ohne die schriftliche Genehmigung des Urhebers gestattet. Alle Rechte an der Dokumentation "Der Weg zur eigenen Homepage" und an "homepage-mixer.de" liegen bei Norbert Silberhorn. Verstöße gegen das Urheberrecht oder gegen sonstige Rechte werden verfolgt und Schadensersatzansprüche werden geltend gemacht! Bei Fragen wenden Sie sich bitte an Norbert Silberhorn. Wenn Sie eine unerlaubte Vervielfältigung, Verbreitung oder öffentliche Zugänglichmachung von der Dokumentation "Der Weg zur eigenen Homepage" außerhalb von homepage-mixer.de finden, dann wenden Sie sich bitte (gerne auch im Zweifelsfall) an Norbert Silberhorn. Vielen Dank. |