Info von KnowWare zum Einstieg in Homepage

KnowWare
Nr. 161
HomePages Einst.
,
4
€
So gehst Du vor - Schritt für Schritt
4. aktualisierte Ausgabe
HomePages
für Einsteiger
abe
sg
te Au
r
e
i
s
tuali
ten!
4. ak 72 Sei
www.KnowWare.de
Johann-Christian Hanke
Deutschland: 4,- EUR Österreich: 4,60 EUR
Schweiz: 8 SFR Luxemburg: 4,70 EUR Italien: 5,50 EUR
4*qlrpfl#b-v- v* ÊÀËÒËÁËÆËÑ
KnowWare
2
Homepages für Einsteiger
Johann-Christian Hanke, [email protected]
Korrektorat: Wolfgang und Maria-Brigitte Hanke
ISBN 87-90785-60-6, 4. Ausgabe, 1. Auflage, 2002-04
© Copyright 2000, Autor und KnowWare
Michael Maardt, [email protected]
Printed in Denmark by OTM, Published by KnowWare
Bestellung für Endverbraucher und
Vertrieb für den Buchhandel
Bonner Presse Vertrieb, Möserstr. 2-3
D-49074 Osnabrück
Tel.: +49 (0)541 33145-20
Fax: +49 (0)541 33145-33
[email protected]
Bestellformular gibt es auf www.knowware.de
www.knowware.de
Vertrieb für den Zeitschriftenhandel:
IPV Inland Presse Vertrieb, Postfach 10 32 46,
D-20022 Hamburg
Tel.: +49 (0) 40 23711-0
Fax: +49 (0)40 23711-215
www.ipv-online.de
• Geplante Hefte
Worum es geht
Hinter KnowWare steht der Gedanke, Wissen
leichtverständlich und preisgünstig zu vermitteln.
Das Projekt startete im April 1993 mit der
Herausgabe des ersten Computerheftes in
Dänemark. Seitdem sind in vielen Ländern
zahlreiche weitere Hefte mit Themen rund um
den Computer erschienen.
Wo und wann sind die Hefte erhältlich?
Die Hefte sind im allgemeinen zwei Monate im
Handel, und zwar bei Kiosken, im Bahnhofsbuchhandel und im Buchhandel – bei vielen
Verkaufsstellen sowie im Buchhandel auch
länger. Alle beim Verlag vorrätigen Titel sind
jederzeit nachbestellbar.
• Beschreibungen und Bilder aller Hefte.
• Mehr als 100 kostenlose PDF-Dateien - bei
jedem Heft gibt es eine kostenlose PDF-Datei
von den ersten 15-20 Seiten
• Ausverkaufte Hefte: das ganze Heft als PDF
ist kostenlos
• Online-Bestellung
• Anmeldung: kostenloser Newsletter. Viele
Vorteile für dich.
• 100 Tipps & Tricks zu Windows, Word,
Excel, und Internet
• Informationen für neue Autoren
• Serviceseiten zu den Heften
• Lesermeinung zu den Heften
• 800 Händleradressen in 4 Ländern.
• KnowWare Hefte in anderen sprachen
www.knowware.de
Bestellung
• bei deinem KnowWarehändler - Bestellformular am Ende des Heftes ausfüllen!
• beim Bonner Presse Vertrieb, siehe oben
© Johann-Christian Hanke: Homepages für Einsteiger - 26-03-02 - 19:22
Willkommen
3
Über den Autor
Hallo...
da bist Du ja! Herzlich willkommen zu „Homepages für Einsteiger“.
Du möchtest also Deine elektronische Visitenkarte
ins World Wide Web stellen? Die eigene Homepage soll es sein? Nur zu! Es macht Spaß und ist
gar nicht so schwer.
Zuerst erzähle ich Dir etwas über das World Wide
Web und teile Dir mit, welcher Anbieter für Deine
Zwecke empfehlenswert ist. Auch über Angebote
und ungefähre Preise werden wir reden.
Dann erfährst Du ganz genau, wie Du eine Homepage erstellst und welche Zusatzprogramme Du
benötigst. Ich zeige Dir, wie Du Bilder und Querverweise (sogenannte Hyperlinks) in Deine Dokumente einbindest. Du lernst, wie man Seiten miteinander verbindet und durch interne Anker bequem Navigationsmöglichkeiten erzeugt. Natürlich
habe ich noch den einen oder anderen Trick für
Dich auf Lager.
Am wichtigsten ist die Frage: Wie veröffentliche
ich die Seiten? Ist das schwer? Nun, gerade einfach ist es nicht. Aber keine Angst, ich habe in den
letzten Jahren gut recherchiert und mich für Dich
bei allen möglichen Dienstleistern angemeldet.
Ich führe Dir alles ganz in Ruhe vor. Gemeinsam
laden wir die Publikation auf den Server, wie es so
schön heißt!
Du hast momentan gerade nicht so viel Geld
übrig? Auch hier kann ich Dir eine Freude
machen. In diesem Heftchen verrate ich Dir auch
alles über kostenlose Internetzugänge und
kostenlose Programme. Und ich zeige Dir, wo Du
selbst Deine Homepage einrichten kannst, ohne
einen Pfennig zu bezahlen!
Keine Angst...
auch wenn Du noch nicht die ganz große PCErfahrung besitzt! Hier wird Deutsch geredet und
nicht Fachchinesisch. (Beziehungsweise zuerst
Deutsch, dann kommt doch ein klein wenig
Fachchinesisch.)
Allerdings solltest Du schon solide Grundkenntnisse in Windows mitbringen. Falls Du hier noch
Lücken hast, empfehle ich Dir eins der KnowWare-Hefte zu Windows (z.B. Nr. 139 für Windows 95 oder Nr. 158 für Windows 98) oder gleich
mein „Windows Me/98 für Einsteiger“ (Heft 167)!
Johann-Christian Hanke arbeitet als freiberuflicher
Autor, schreibt Fachbücher und Zeitschriftenartikel. Dabei ist er jedoch kein Informatiker,
sondern Magister für englische und deutsche Literatur und Sprache.
Besonders gerne schreibt er für Michael Maardts
sympathischen Verlag aus Dänemark, hier hat er
inzwischen 15 Titel veröffentlicht.
Das vorliegende Heft ist die erheblich erweiterte
und erneut aktualisierte Neuauflage von „HomePages für Einsteiger“ (1999) und damit eigentlich
der Vorgänger des im Januar 2002 nachaufgelegten
Bestsellers „HomePages für Fortgeschrittene“
(PLUS 12). Das vorliegende Heft folgt deshalb
noch der alten Rechtschreibung. Im „Nachfolger“
erfährst Du mehr zu JavaScript, XHTML, XML
und dynamischen Effekten. Dort gibt es außerdem
eine Referenz mit ausführlicher Tag-Übersicht.
Um daraus eine „Trilogie“ zu „erschaffen“, hat
Hanke Anfang 2002 mit „Homepages mit HTML
und CSS“ (Heft 168) ein reines HTML/CSSLehrheft vorgelegt, welches wir Dir ebenfalls
warm ans Herz legen. Dort bekommst Du eine
didaktisch-fundierte Einführung in die Gestaltungssprache CSS und unzählige Tipps für
schickes Layout.
Zur Zeit arbeite Hanke an einem XML- und PHPTitel. Geplant ist auch „Homepages für Profis“.
Deine Meinung zählt,
denn Autoren sitzen oft völlig betriebsblind vor ihren Rechnern und können nicht mehr nach rechts
oder links schauen.
Unter www.jchanke.de/homepage findest Du
aktuelle Ergänzungen und Aktualisierungen zu
diesem und vielen anderen meiner KnowWareHefte mit Feedback-Möglichkeit. Über die von
dort erreichbare Serviceseite kannst Du einige der
im Heft erwähnten Programme und Links abrufen!
Und nun viel Spaß mit „Homepages für Einsteiger“ und viel Erfolg beim Einrichten der eigenen
Publikation im World Wide Web!
Dein Johann-Christian Hanke!
Berlin, 1998/99, Dezember 2000, Juni 2001 und
März 2002
© Johann-Christian Hanke: Homepages für Einsteiger - 26-03-02 - 19:22
Inhaltsverzeichnis
4
Inhaltsverzeichnis
Hallo...
Inhaltsverzeichnis
Internet und World Wide Web
– ein kurzer Überblick
Aufbau und Grundbestandteile
des World Wide Webs
HTML, die Sprache des World
Wide Webs
Wozu HTML lernen?
3
4
5
6
7
7
Wie gelange ich ins Netz – Eine
Übersicht
Attraktive Web-Adressen mit
eigener Domäne
Vorsicht bei der Namenswahl:
Domain-Namen und Recht
Bitte kostenlos
11
8
10
Erweiterte Möglichkeiten zur
Schriftgestaltung
31
Ein neues HTML-Dokument
erzeugen
14
Der Einstieg – Ein HTMLDokument erzeugen und
gestalten
15
Überschriften
Fett, kursiv und unterstrichen
Absätze und Absatzausrichtung
Eine neue Zeile erzeugen
Aufzählungen und Listen
Linien einfügen
Der Trick mit den Leerräumen
15
16
17
17
17
17
17
18
19
19
19
20
20
21
21
So bindest Du Grafiken als
Hintergrund ein
22
Die Grafik wird gekachelt!
Texturen als Hintergrundmuster
22
23
Hyperlinks – interne und
externe Anker und Verweise
24
Verweise auf die eigenen Seiten
Verweise auf Seiten in
Unterordnern
Externe Hyperlinks
Neues Fenster öffnen
Verweise innerhalb der Seite
Image Maps, die
berührungsempfindlichen
Grafiken
29
So wird das Leben bunt –
Farben für Links und Schrift 30
9
So entsteht die erste Datei –
Wir arbeiten mit dem Editor! 13
GIF, JPEG oder PNG
Welches Grafikprogramm?
Grafik ins HTML-Dokument
einbinden
Breite und Höhe
Alternativ-Text angeben
Small is beautiful
28
30
30
12
12
Die wichtigsten HTML-Befehle
in der Übersicht
So fügst Du Grafiken in Deine
HTML-Dokumente ein
26
26
27
27
28
Hexadezimale Farben mischen
Die Attribute im Body-Tag
Alles Homepage oder was? Eine
kurze Begriffsverwirrung
12
Zuerst der Plan
Der Projektordner
Der E-Mail-Link
Grafik als Hyperlink
Link auf Dateien setzen
Links auf Newsgruppen
Gelbe Kurzinfo für Hyperlinks
Die wichtigsten HTML-Befehle für
Anker
24
24
25
25
25
Erweiterte Zeichenformatierung
durch das FONT-Tag
Das PRE-Tag für feste
Formatierung
Erweiterte Auflistungen
Lauftext (marquee)
Blinkender Text
Linien
31
32
32
33
33
33
Tabellen als wichtige
Werkzeuge bei der
Seitengestaltung
34
Einfache Tabellen
Gitternetzlinien einblenden
Tabellen ausrichten
Polsterung mit cellpadding
Dicke der Wand: cellspacing
Zellen teilen
Farben für Tabellen
34
34
35
35
36
36
36
Attraktive Sites erstellen:
Tabellen für exaktes Layout
37
Exakt ausrichten: align und valign 38
Trick 17: Tabelle klappt zusammen 39
Formulare für Rückmeldungen
erstellen und auswerten
40
Texteingabefelder
Radio-Knöpfe und
Kontrollkästchen
Abschicken und Zurücksetzen
Daten per E-Mail empfangen
41
42
43
43
Style Sheets – die cleveren
Formatvorlagen für HTML
44
Zur Syntax von Style Sheets
Weitere Attribute für Style Sheets
Klassen bilden mit class
Verweise auf externe Style Sheets
Das „Kaskaden-Prinzip“
Inline-Style
Freie Zeichen- und Absatzformate
44
45
45
46
46
46
46
Frames, verschiebbare
Fensterteile auf Web-Seiten
47
Planung der Frames per Skizze
Aufteilung festlegen per Frameset
47
48
Tips und Tricks zu Frames
Verweise aus dem Frameset heraus
49
49
Homepages erstellen mit Word
und StarWriter
50
Vorhandene Dokumente
umwandeln
HTML-Datei von vornherein
erzeugen
Quelltext in Word und StarWriter
Externe Hyperlinks erstellen
Anker und Verweise innerhalb der
Seite
Hintergrundfarben und -muster
Grafiken einfügen
Nicht vergessen – Alternativ-Texte
Exaktes Layout durch Tabellen
Hintergrundfarben und mehr
Image Maps in StarOffice
50
50
51
51
52
52
53
53
53
54
54
Effekte, Pep und Dynamic für
Deine Homepage
55
Gästebuch, Chat und
Besucherzähler
Links wechseln die Farbe
Dynamische Schaltfächen
Skript für einen Ticker
Ein Pull-Down-Menü
55
55
55
56
56
Geht auch: Sounds, Multimedia
und Animationen
57
So meldest Du Deine Seite bei
Suchmaschinen an
58
So kommst Du zu Yahoo und
Web.de
So gelangst Du zu Fireball und Co.
Google ist demokratisch
Automatische Eintragung?
58
59
59
59
META-Tags als Hilfe für die
Suchmaschinen
60
Homepage veröffentlichen bei
T-Online, Strato und PureTec 61
Strato und Puretec
So arbeitest Du mit WS_FTP
61
62
Weitere Tips und Tricks zu
Grafiken
63
Der Trick mit der Zwischenablage
Grafikhintergrund transparent
setzen
Grafik baut sich langsam auf
Weitere empfehlenswerte Tools
und Web-Ressourcen
Technischer Kram: Das DFÜNetzwerk von Windows
Anhang: Schneller Einstieg in
Homesite
Stichwortverzeichnis
© Johann-Christian Hanke: Homepages für Einsteiger - 26-03-02 - 19:22
63
63
63
64
65
66
67
Internet und World Wide Web im Überblick
5
Internet und World Wide Web – ein kurzer Überblick
Wer hätte das gedacht. Das Internet ist eigentlich
ein alter Hut. Zumindest die Vorläufer reichen bis
in die 60er Jahre unseres Jahrhunderts zurück.
Unsinn, das Internet ist kein Hut, sondern in Wirklichkeit ein Kind. Es ist ein Kind des kalten Krieges. Das Internet entstand auf Betreiben des amerikanischen Militärs. Hier wurde ab Mitte der 60er
Jahre an einem Datennetz gebastelt, welches auch
einem Atomschlag standhalten sollte. Im Klartext
– wenn die meisten Leitungen unterbrochen sind,
muß die Information trotzdem unbeschadet zum
Empfänger gelangen.
So entwickelten Wissenschaftler ein Übertragungsverfahren, das Computerdaten in kleine
Päckchen zerlegt, die selbsttätig auf die Reise gehen und sich am Ankunftsort wieder zusammensetzen! Na so etwas, wir wünschen Gute Reise!
das sogenannte Word Wide Web ist nicht identisch
mit dem Internet, es ist nur ein Teil des Internets.
Zugegeben, ein relativ neuer Teil und der beliebteste Teil dazu.
Das World Wide Web (WWW oder 3W) wurde erst
1989/90 von Kernphysikern gegründet, federführend war der Informatiker Tim Berners-Lee.
Die Wissenschaftler wollten ihre Forschungsdaten
weltweit schneller untereinander austauschen, auf
grafische Art, mit Bildern und Klängen. Denn das
ermöglichte das Internet bisher noch nicht!
Bisher mußte man kryptische Befehle tippen und
konnte sich über das bloße Versenden nüchterner
Textmitteilungen freuen.
Doch ab 1990/91 kamen endlich die bunten, anklickbaren Seiten, landläufig als Homepage bezeichnet. Das World Wide Web war geboren. In
den letzten Jahren hat das WWW eine rasante
Entwicklung hinter sich. Es gibt inzwischen
mehrere Milliarden Seiten zu bewundern, täglich
werden es mehr.
Zusammenfassend eine kurze Übersicht über ausgewählte Entwicklungsstufen des Netzes. Auf den
nächsten Seiten schauen wir uns das WWW dann
etwas genauer an.
1969, Gründung des
ARPANET (Advanced
Research Projects AgencyNET)
4 Universitäten schlossen Ihre riesigen Computersysteme auf Betreiben
des US-Verteidigungsministeriums
zusammen
Bild 1: Rechner im Internet, schematisch
1971
erste Versuche mit E-Mail-Übertragung (elektronische Post)
Dein elektronischer Brief – um ein Beispiel zu
nennen – wird in Schnipsel aufgeteilt. Diese gelangen oft auf unterschiedlichen Wegen zum Empfänger. Ein Schnipsel „wandert“ via Satellit oder spezielle Erdkabel über Hamburg, Amerika bis Spanien, der andere Schnipsel umkreist erst dreimal
den Erdball, um dann unbeschadet ebenfalls am
Zielort anzukommen. Je nachdem, welche Leitungen gerade frei sind. Dieses höchst raffinierte
Übertragungsverfahren nennt sich TCP/IP.
1973
die ersten europäischen Großrechner
kamen ans Netz
1985
2.000 Computer weltweit sind zusammengeschlossen
BITNET, NSFNET entstanden
wuchsen mit ARPANET zusammen
zum INTERNET
1990/91
Tim Berners-Lee erfindet das World
Wide Web an einem Schweizer
Kernforschungszentrum in CERN.
1992
1 Million Rechner sind zusammengeschlossen, vorrangig an Universitäten
1994
Das Internet wird kommerziell, die
Welle bricht los. Immer mehr Menschen installieren ihre Homepage.
1998/99
Dank Discountern wie Strato und
PureTec wird die eigene Homepage
mit attraktiver Adresse preiswert
Das Internet ist also ein riesiges, weltumspannendes, dezentrales Netzwerk. Viel flexibler, schneller
und billiger als beispielsweise das Telefonnetz. Es
gehört niemandem und arbeitet ohne zentrale Verwaltung.
Jetzt kommt’s aber: Viele verwechseln Internet und
World Wide Web. Du ab heute nicht mehr! Denn
© Johann-Christian Hanke: Homepages für Einsteiger - 26-03-02 - 19:22
Aufbau des World Wide Webs
6
Aufbau und Grundbestandteile des World Wide Webs
Fassen wir zusammen: Das Internet ist kein Hut,
sondern ein riesiges Netzwerk miteinander verbundener Rechner. Das World Wide Web ist nur
ein Teilgebiet davon. Das WWW wurde in Genf
maßgeblich von Tim Berners-Lee entwickelt. Fein.
Wir sollten nun zuerst das sogenannte Domain
Name System erwähnen.
Jeder Rechner, der dauerhaft an das Internet
angeschlossen ist, hat eine weltweit eindeutige
Adresse. Es handelt sich um die sogenannte IPAdresse, sie sieht beispielsweise so aus:
127.147.5.49
Diese Adressen werden nun durch eine zentrale
Stelle in Kalifornien verwaltet. Prima. Doch da
sich kein Mensch diese merkwürdigen Zahlen
merken kann, hat man in den 80er Jahren das Domain Name System erfunden. Sprich, den Rechnern werden symbolische Namen zugewiesen, beispielsweise
HTTP steht für HyperText Transfer Protocol,
Verfahren zum „Übertragen von Übertext“. Was
bedeutet Übertext bzw. Hypertext? Damit wird
ausgedrückt, daß die Web-Seiten durch diese sogenannten Querverweise verbunden sein können, die
Hyperlinks oder Links. Links sind meist unterstrichene Textstellen oder Grafiken.
Hyperlinks? Klar! So gibt es auf meiner Web-Seite
Sprungmarken zu meinen Auftraggebern. Klickst
Du darauf, springst Du blitzschnell beispielsweise
zur Homepage von KnowWare oder von DATA
BECKER. Auch wenn sich diese Dokumente nicht
in Karlsruhe, wie meine Homepage, sondern in
Dänemark oder Düsseldorf befinden!
http://www.knowware.de
Zu HTTP gleich mehr, WWW steht für World
Wide Web, knowware ist der Name des Computers, dk ist die Länderkennung für Dänemark. De
wäre die Länderkennung für Deutschland, eine auf
com endende Seite verrät Ihren kommerziellen
Charakter, edu steht für Bildungseinrichtung usw.
Spezielle Computer im Internet, die sogenannten
Domain Name Server, sorgen nun dafür, daß dieser
symbolische Name in eine dieser kryptischen
Adressen umgesetzt wird. Ganz automatisch!
Doch zurück zu den Rechnern, die direkt an das
Web angeschlossen sind. So ein Computer wird
nun als Web-Server bezeichnet. Es ist der Diener
im Netz, wenn Du so willst. Auf diesem Computer
liegen nun die Web-Seiten. Du selbst sitzt vor Deinem eigenen Rechner und greifst auf diese Seiten
zu. Dein eigener Rechner nennt sich in diesem
Falle Web-Client, es ist derjenige, dem der WebServer dient.
Auf Deinem Rechner (Client) wiederum ist ein
Programm installiert, mit dem Du die Web-Seiten
betrachten kannst. Es ist der sogenannte Browser.
Das Wort kommt von to browse, blättern, schmökern. Bekannte Browser sind beispielsweise
Opera, der Netscape Navigator oder der Internet
Explorer. Fehlt noch der Bote, der die Seiten vom
Server zum Client überträgt, der Sam. Dieser Bote
nennt sich HTTP.
Bild 2 Grundbestandteile des World Wide Webs
Du sitzt also an Deinem Rechner (Web-Client),
surfst von einem Computer zum anderen und
merkst nicht, wie Du zu verschiedenen Stellen in
der Welt hüpfst! Ziemlich genial, dieses World
Wide Web! Hier noch einmal die Details:
Web-Server
Rechner, auf denen die Web-Seiten
(Homepages) liegen
Web-Client
Computer mit Client-Software (Web-Browser),
im Prinzip Dein Computer, mit dem Du „surfst“
Browser
Programm zum Anzeigen der Web-Seiten
HTTP
Protokoll, Bote zum Übertragen der Seiten
Halt – wir haben noch etwas ganz Wichtiges vergessen, die Muttersprache des World Wide Webs!
Sie heißt HTML und wird uns im gesamten Heft
näher beschäftigen!
© Johann-Christian Hanke: Homepages für Einsteiger - 26-03-02 - 19:22
HTML, die Sprache des World Wide Webs
7
HTML, die Sprache des World Wide Webs
HTML ist untrennbar verbunden mit der Entwicklung des World Wide Webs. Die meisten Dokumente, die Du im WWW bewundern kannst, basieren auf HTML. Es handelt sich hierbei um einen
Code zur logischen Beschreibung von Dokumenten. Mit HTML wird weniger das Layout eines
(Text)Dokumentes dargestellt, vielmehr seine
Struktur. Zum Beispiel: Hier ist eine Hauptüberschrift, dort eine Unterüberschrift, dort fettgedruckter Text, da wiederum eine Aufzählung, eine
Linie usw.
Ursprünglich war HTML für die weltweite Darstellung wissenschaftlicher Texte gedacht. Klar,
schließlich haben Wissenschaftler das Ganze
zuerst einmal erfunden. Inzwischen wurden auch
zahlreiche „Spielereien“ in neue HTML-Versionen
eingebaut. Wie Du diese Elemente im einzelnen
siehst, hängt von Deinem Browser ab. Dieser
interpretiert den HTML-Code und zeigt das
Dokument dementsprechend an.
Die wichtigsten Browser heißen Opera, Netscape
und Microsoft Internet Explorer. Letzterer ist in
Windows 98/Me enthalten. Bis vor kurzem
glaubten viele, daß Microsoft das Wettrennen im
sogenannten „Browser-Krieg“ gewonnen hätte.
Der Marktanteil des Internet Explorers war bzw.
ist viel höher als der von Netscape. Das kann sich
mit dem neuen Netscape-Navigator 6 wieder
ändern!
HTML beruht auf ASCII, American Standard Code
for Information Interchange. Zu deutsch: Amerikanischer Standardcode zum Informationsaustausch.
Das ist ein Zeichensatz, der die einfache Darstellung von Text ermöglicht. Aufwendigere Formatierungen wie Fettdruck, Unterstreichung,
Zentrierung etc. können durch ASCII nicht dargestellt werden. Doch schließlich gibt es HTML.
Die sogenannten HTML-Befehle, Tags genannt,
schreiben die Struktur des Textes vor. Diese Befehle werden in spitze Klammern gesetzt. Es gibt
stets einen Befehl zum Einschalten einer Eigenschaft, wiederum einen zum Ausschalten.
So steht vor einem Wort oder einer Wortgruppe,
die fettgedruckt werden soll, folgendes Zeichen:
<b>, danach dieses Zeichen: </b>. B steht für
bold, zu deutsch fett. Der Ausschaltbefehl ähnelt
dem Befehl zum Einschalten, wurde jedoch um
einen Schrägstrich (Slash) / ergänzt. Insgesamt
schreibt man das Beispiel für fett auf HTML
folgendermaßen:
<b>fette Wortgruppe</b>
Der Browser macht daraus eine fette Wortgruppe.
Übrigens – Tags (und deren Attribute) sollten
neuerdings nur noch klein geschrieben werden!
HTML-Dateien sind einfache Textdateien mit der
Endung htm bzw. html!
Wozu HTML lernen?
Zuerst die gute Nachricht: Wenn Dir dieser ganze
HTML-Kram zu kompliziert ist, verwende einfach
einen HTML-Generator (HTML-Editor). Das ist
nichts weiter als ein Programm, welches Du (fast)
wie eine Textverarbeitung benutzen kannst. Der
HTML-Befehlscode entsteht ganz automatisch im
Hintergrund, während Du den Text schreibst, spätestens beim Speichern. Die zweite gute Nachricht:
Viele dieser Programme sind sogar kostenlos.
Einige erwähne ich u.a. auf den Seiten 50 und 66.
Wozu jetzt noch HTML lernen? Hier einige Argumente:
♦ Nicht jeder HTML-Editor beherrscht alles, was
man darstellen möchte.
♦ Vielfach läßt sich – gerade bei einfachen Programmen – einiges nicht rückgängig machen.
♦ Mit einem Editor erstellte Seiten lassen sich per
Hand nachbearbeiten und verfeinern.
♦ Die Kenntnis der Befehle sichert das Verständnis für den Aufbau der Seiten und für die
Struktur des Webs.
♦ Außerdem lassen sich so Fehler im Quelltext
schneller finden!
♦ Bei handgeschriebenen HTML-Seiten ist die
Gefahr geringer, daß unbekannte Spezialbefehle zur Anwendung kommen, die von einigen
Browsern nicht dargestellt werden können.
Ich empfehle, sowohl mit Editoren als auch mit
dem nackten Quellcode zu arbeiten. Schließlich
erlauben auch viele HTML-Editoren, daß man den
HTML-Code „von Hand“ nachbearbeiten kann.
Nicht ohne guten Grund.
HTML wird und wurde erweitert. In diesem Heft
lernst Du „modernes“, an XHTML angenähertes
HTML 4. Die Unterschiede zwischen HTML, dem
neuen XHTML und XML erläutere ich Dir ausführlich im Fortgeschrittenen-Heft (PLUS 12).
Und jetzt klären wir, wie Du überhaupt ins Internet
gelangst!
© Johann-Christian Hanke: Homepages für Einsteiger - 26-03-02 - 19:22
Wie gelange ich ins Netz
8
Wie gelange ich ins Netz – Eine Übersicht
Als ich 1998 meine ersten Homepage-Kurse an der
Volkshochschule Berlin-Friedrichshain gab, war
die Überraschung groß. Die meisten Teilnehmer
hatten weder Ahnung vom Internet noch waren sie
an das Netz angeschlossen. Inzwischen sieht das
Bild allerdings ganz anders aus.
Provider oder Online-Dienst?
Sicher weißt auch Du längst, wie man sich mit
dem Netz verbindet. Du mußt einen Dienstleister
bemühen, einen sogenannten Provider oder
Online-Dienst.
Glaubt man den Werbungen in der Presse und in
den Computerzeitschriften, gibt es nur drei Möglichkeiten: AOL, T-Online und vielleicht noch
CompuServe. Dabei handelt es sich um sogenannte
Online-Dienste, die ein eigenes Angebot führen.
Dieses hat bzw. hatte mit dem Internet zuerst
einmal nichts zu tun.
So ging T-Online aus dem schon seit den 80er Jahren bekannten BTX (Bildschirmtext) hervor. Der
Telekomableger bietet seit 1995 den Internetzugang an. Außerdem hatte er bis vor kurzem in Sachen Homebanking die Nase vorn. T-Online ermöglicht Dir zum Glück den schnellen Zugang ins
Netz ohne nervige Zusatzsoftware.
AOL und CompuServe führen ebenfalls ein eigenes Online-Angebot, wobei sich AOL vor allem an
Familien und Freizeitnutzer wendet und CompuServe eher auf den Profi-Kunden zielt. Für AOL ist
leider eine zusätzliche Software nötig.
Vielnutzer greifen gerne auf die Flatrate-Angebote
zurück. Bei T-DSL mit der T-Online- bzw. AOLFlatrate kannst Du für attraktive Pauschalpreise so
lange surfen, wie du möchtest.
Günstig: Internet-by-Call
Die günstigste Alternative für Wenigsurfer sind
jedoch die Internet-by-Call-Anbieter. Ohne Grundgebühr, Mindestvertragslaufzeit oder Mindestnutzungsdauer lassen Dich mehr und mehr Anbieter ins Netz. Die Preise schwanken um die 1 bis
3 Cent/Minute inklusive Telefonkosten.
Wie man solch einen Zugang unter Windows bequem einrichtet, zeige ich Dir ab Seite 65 am
Beispiel von MSN EasySurfer!
Eine detaillierte Angebots- und Preisübersicht gibt
es bei: www.billiger-surfen.de!
Die technischen Details
Auch über die technischen Voraussetzungen muß
ich Dich sicher nicht groß aufklären: Hast Du noch
einen „klassischen“ analogen Telefonanschluß?
Dann brauchst Du ein Modem. Falls Du schon einen digitalen Telefonanschluß besitzt, kaufst Du
eine ISDN-Karte (intern) oder einen ISDNTerminaladapter (extern).
Wenn Du zu den Glücklichen mit entsprechenden
kabeltechnischen Voraussetzungen zählst, kannst
Du auch z.B. den von der Telekom als T-DSL
vermarkteten ADSL-Anschluss nutzen. Dann mußt
Du Dich mit Splitter, ADSL-Modem und
Netzwerkkarte herumärgern und surfst im Endeffekt mit zwölffacher ISDN-Geschwindigkeit.
Was macht nun das Modem, ADSL-Modem bzw.
ISDN-Gerät? Vom Prinzip her ist das nichts weiter
als eine Box mit Elektronik. Dieses Gerät überbrückt den Weg über das Telefonnetz. Es verbindet
Dich via Telefonnetz mit dem Provider bzw. Online-Dienst. Denn eigentlich verständigen sich
Dein Computer und die Computer im Internet digital, also durch den Austausch von Einsen und
Nullen.
Du hast ein „klassisches Modem“? Das „klassische
Telefonnetz“ arbeitet – von ISDN abgesehen – im
Prinzip analog. So sitzen jeweils an den Enden
Modems: Bei Dir daheim und beim Provider bzw.
Online-Dienst. So ein Modem (Modulator/Demodulator) wandelt (moduliert) also die digitalen Daten in analoge und umgekehrt.
Produktempfehlungen
Besorge Dir am besten ein modernes Modem eines
Markenherstellers. Ein 56k-Modem kostet weniger
als 150 DM. Es sollte dem Standard V.90 entsprechen. Dieses Modem erlaubt theoretisch eine Verbindung von bis zu 56 kBit/Sekunde. Das ist fast
so schnell wie ISDN (64 kBit/s.) und für heutige
Zwecke immer noch ausreichend.
Bei ISDN- bzw. ADSL-Geräten rate ich Dir zu
Produkten der Firma AVM. Das hat nichts mit Lokalpatriotismus zu tun (AVM ist eine Berliner
Firma), sondern damit, daß AVM-Geräte hardwareund softwaretechnisch gutes Gelingen garantieren.
So ist die beliebte Fritz!-Card wahrscheinlich der
am häufigsten eingesetzte ISDN-Adapter in ganz
Europa.
© Johann-Christian Hanke: Homepages für Einsteiger - 26-03-02 - 19:22
Web-Adressen und eigene Domäne
9
Attraktive Web-Adressen mit eigener Domäne
Jeder, der bei einem der großen Online-Dienste
Mitglied ist, darf eine eigene Publikation ins Internet stellen. Das ist im Preis inbegriffen! Wunderbar. Doch bei CompuServe bekommst Du eine Adresse, die fängt so an:
http://ourworld.compuserve.com/homepages/...
Bei AOL und T-Online ist das Ganze etwas kürzer,
Deine AOL-Adresse sieht im Endeffekt so aus:
http://members.aol.com/Nutzername
Immerhin, für private Homepages genügt das.
Schließlich kommt es nicht auf die Länge der Adresse, sondern auf den Inhalt der Seite an.
Domäne und mehrere MB Speicherplatz. StarterAngebote sind noch günstiger. Ähnlich attraktiv
sind www.puretec.de und www.loomes.de.
Ausschließlich um die Gunst von Firmen werben
Anbieter wie Schlund & Partner, zu finden unter
www.schlund.de.
Erstrebenswert: Eigene Domäne
Geschäftsleute und immer mehr „normale Computerfreunde“ mieten in der Regel jedoch ihren
Platz auf dem Server eines sogenannten WebspaceProviders. Sie beantragen eine eigene Domäne.
Das heißt, der Name der Firma/Organisation steht
gleich am Beginn der Web-Adresse. Das ist gleichzeitig der sogenannte Domänen-Name. Dahinter
folgt das Kürzel für den Domänen-Typ, die Endung bzw. Top-Level-Domain. In der Regel handelt es sich um die schon besprochene Endung de.
Wenn Du eine kleine oder große Firma vertrittst,
kommst Du um eine eigene Domäne nicht herum.
Domänen-Namen müssen beantragt und bezahlt
werden. Der größte Wermutstropfen bei der Geschichte: Die kürzesten und besten DE-Domänen
haben Dir andere oft schon weggeschnappt! Aber
www.lieschen-mueller.de
ist möglicherweise noch frei. Außerdem werden
von Zeit zu Zeit neue Domänen-Endungen
„vermarktet“, so daß die Situation bald wieder
besser aussieht.
Zurück zu den Kosten: Eine Alternative zur eigenen Domäne ist die sogenannte Domänen-Umleitung. Du erhältst von einem Dienstleister eine DEoder COM-Domäne, Deine eigentliche Homepage
liegt aber noch unter der alten AOL- oder CompuServe-Adresse. Der Surfer tippt die attraktive Adresse in seinen Browser ein und landet nachher
trotzdem auf Deiner Seite mit der Bandwurmadresse.
Längst gibt es Anbieter, die Dir sowohl eine eigene
Domäne als auch Webspace zum Hammerpreis
anbieten. So ein Preisbrecher ist beispielsweise die
Firma Strato, zu finden unter www.strato.de!
Schon für 5-10 EUR/Monat gibt es eine eigene
Bild 3 Puretec bietet günstige Starterangebote
Ich bin seit 1998 bei Strato und seit 1999 bei Puretec angemeldet und sammle mit beiden Dienstleistern (inzwischen wieder) gute Erfahrungen.
Der Marktführer Strato hat seine große Krise und
die technischen Probleme offensichtlich
überwunden.
Das beste Preis-Leistungsverhältnis bietet Puretec
(alias 1&1 New Webhosting). Schon ab 9,99
EUR/Monat bietet man dir mit PHP, Frontpage
2002-Unterstützung und SSI (Server Side Includes) Features, die selbst „Profis“ begeistern.
Mit PHP kannst du eigene Skripte für Zähler,
Gästebuch, Formularauswertung usw. programmieren. Server Side Includes erlauben dir,
Websites in „Modulbauweise“ zu erstellen.
(Einzelheiten in meinen demnächst erscheinenden
Titeln zu PHP und „Homepages für Profis“.)
Egal bei welchem Dienstleister Du Deine Seite
hosten läßt: Für jeden Geldbeutel gibt es das passende, „maßgeschneiderte“ Angebot.
Bei den meisten Paketen kannst Du Dich über sehr
attraktive Softwarebeigaben freuen. Wer sich bei
Strato anmeldet, erhält zur Zeit beispielsweise
Adobe GoLive in der Version 5 und das Grafikprogramm PhotoShop Elements! Bei Puretec gibt
es Netobjects Fusion, Picture Publisher und
StarOffice. Statistik- und FTP-Programme sind
auch inklusive. Informiere Dich einfach.
© Johann-Christian Hanke: Homepages für Einsteiger - 26-03-02 - 19:22
10
Domain-Namen und Recht
Vorsicht bei der Namenswahl: Domain-Namen und Recht
Wo Licht ist, gibt es auch Schatten! Die o.g. Anbieter machen es einem auch zu leicht! Du hast einen tollen Domänennamen gefunden, der noch
nicht vergeben ist? In einem Anfall von Aktionismus meldest Du Dich ohne weitere „Vorsichtsmaßnahmen“ an? Das kann teuer werden!
Was ich meine? Nun, lies einfach die folgende
Story.
Bei den nun folgenden Ausführungen wurden Namen und Webadresse aller Beteiligten geändert.
Das Ganze beruht jedoch auf einer wahren Begebenheit!
Unser „Held“ hat sich gerade über einen dieser
Billiganbieter eine Homepage eingerichtet.
Nennen wir ihn einfach Franz. Franz liebt Indianer.
Als Namen für seinen Internet-Auftritt wählte
Franz – getreu dem Motto seines Vereins zum
Studium der Kultur dieser nordamerikanischen
Ureinwohner – seinen Spitznamen Schnelle Feder.
Was lag nun näher als den Internetauftritt nun
unter www.schnellefeder.de und www.schnellefeder.de vorzubereiten.
Alles klappte perfekt, die Anmeldung hat
funktioniert. Wunderbar. Hier will unser Held in
den nächsten Wochen Links zu weiteren Indianergruppen ablegen.
Doch dazu kommt es gar nicht erst. Die Postbotin
bringt einen Brief von einem Herrn Rechtsanwalt
sowieso, ein Einschreiben mit Rückschein. Hier
die traurige Botschaft:
... hat mein Mandant festgestellt, daß Sie unter der
URL www.schnellefeder.de und www.schnellefeder.de eine Internetpräsenz Ihres Schreibbüros
vorbereiten. Durch die von Ihnen getätigte Reservierung hat mein Mandant zudem von der Bezeichnung Ihres Büros Schnelle Feder erfahren.
Die Kennzeichenfolge „die schnelle Feder“ ist eine
nach § 4 Markengesetz geschützte Marke. Indem
Sie die Marke als Geschäftsbezeichnung verwenden, verstoßen Sie gegen § 14 Markengesetz ...
Streitwert EUR 50.000,- ... bei fristgemäßer Abgabe einer Unterlassungerklärung wären von Ihnen
zu tragen: Anwaltskosten in Höhe von EUR 500,-.
Domain-Namen und Recht
Ist Franz wirklich zur Löschung seiner Domains
verpflichtet? Leider, er ist es! Mehr noch, wenn er
es nicht tut, kann er sich großen Ärger ins Haus
holen.
Jeder, der bei der DE-NIC eine Domain anmeldet
(oder sie über einen Dienstleister anmelden läßt),
ist verpflichtet zu prüfen, ob Rechte Dritter
verletzt werden können.
Wenn es beispielsweise schon eine gleich oder
ähnlich klingende Zeichenfolge als Markennamen
gibt, darf diese nicht für den eigentlichen
(geschäftlichen) Web-Auftritt genutzt werden.
Dazu sind verschiedenste Recherchen nötig, die
etwas Mühe, aber nicht viel Geld kosten!
Was und wo sollte recherchiert werden?
Markenrecherche
Zuerst mußt Du herausfinden, ob es schon einen
gleichnamigen Markennamen gibt.
Bild 4 Neu: Die kostenlose Suche bei DPINFO
Eine gute Adresse ist das Deutsche Patent- und
Markenamt mit seinem neuen kostenlosen Markensuch-Service. Surfe zu https://dpinfo.dpma.de
und melde dich an. Dir steht der Bestand der
nationalen Marken zur Verfügung.
Eine Alternative ist die Datenbank DEMAS®
(Deutsches Marken Suchsystem), zu finden unter
www.genios.de/demas. Hier ist die Suche allerdings kostenpflichtig, die Fundstelle kostet ab
EUR 2,40.
Weitere Informationen zum Markenrecht gibt es
auch unter www.gravenreuth.de, hier vor allem
unter dem Link Markenschutz und FAQs.
© Johann-Christian Hanke: Homepages für Einsteiger - 26-03-02 - 19:22
Domain-Namen und Recht
11
Gelbe Seiten
Nun empfiehlt sich ein Blick in die Gelben Seiten.
Schaue einfach unter www.gelbe-seiten.de, ob es
die Firma schon gibt!
Handelsregister
Ist der zukünftige Name als Firmenname im Handelsregister eingetragen? Auch das kannst Du zum
Glück kostenlos unter www.handelsregister.de herausfinden.
Suchmaschinen
Als Zusatzmaßnahme empfiehlt sich nun ein Blick
in die einschlägigen Suchmaschinen, beispielsweise in:
♦ www.yahoo.de / www.web.de
♦ www.fireball.de
♦ www.altavista.de
♦ www.google.de
Eine Übersicht über die wichtigsten Suchmaschinen findest Du unter www.suchfibel.de!
Die unverfängliche Adresse
Wer weniger Stress wünscht, ist momentan noch
gut beraten, wenn er gleich einen „unverfänglichen“ Namen wie Traude-online oder BerndSchulze-Meyer wählt. Auch unattraktive Zeichenfolgen wie xz874s oder 90cuzzzer eignen sich gut
als Domäne, mit der man (vorerst) keinen Ärger
bekommt.
Vorsicht! Auch sprechende Namen wie fahrrad,
bahn oder wohnungssuche können neuerdings Ärger schaffen. Auch das ist ein Verstoß gegen das
Wettbewerbsrecht!
Bild 5 Grundstücke kostenlos auf heim.at
(Der noch in der vorigen Ausgabe an dieser Stelle
erwähnte Dienst Freepage.de nimmt keine neuen
Kunden mehr an.)
Du möchtest wissen, wo es weitere kostenlose
Plätze für Deine Homepage gibt? Ehe ich Dir alle
Seiten aufzähle, surfe lieber zur Suchmaschine für
freien Webspace, zu FreeWebspace!
Du findest diese bemerkenswerte Seite unter
www.freewebspace.net! Unter der Adresse
www.freewebspace.net/search/advanced.shtml gibt
es ein erweitertes Suchformular. Grenze Deine Suche nach verschiedenen Kriterien ein.
Bitte kostenlos
Zufällig gerade kein Geld übrig? Du bist nicht
scharf auf eine eigene Domäne und den damit verbundenen „Rechercheaufwand“? Homepage ja,
aber kosten darf es nichts? Dann habe ich ein paar
Tips für Dich:
Der Anbieter www.fortunecity.de bietet dir
100 MB Speicherplatz auf dem Server. Und das
alles, ohne einen einzigen EURO zu bezahlen.
Dafür musst du jedoch die Einblendung von
Werbebannern in Kauf nehmen. Werbung gibt es
auch auf den bis zu 20 MB großen Grundstücken
auf www.heim.at.
Bild 6 Freewebspace findet selbst Server mit CGIund FrontPage-Untertützung
Suche beispielsweise nach Dienstleistern, die Dir
sogar kostenlos CGI, E-Mail-Konto, Server Side
Includes (eine „Modultechnik“ für einfacheren
Seitenaufbau) oder Subdomains anbieten!
© Johann-Christian Hanke: Homepages für Einsteiger - 26-03-02 - 19:22
Vom Entwurf zur Ausführung
12
Alles Homepage oder was? Eine kurze Begriffsverwirrung
Kurz etwas zur Erklärung des Begriffs Homepage,
denn das ist schon überfällig. Bisher wirbeln wir
diese Bezeichungen in diesem Heft durcheinander,
daß es seine Art hat. Homepage, Web-Seite, Dokument usw.
Kannst Du die Wahrheit vertragen? Im eigentlichen strengen Sinne ist die Homepage nur die
Startseite Deiner Publikation. Nicht mehr und
nicht weniger. Vergleichbar vielleicht mit dem
Deckblatt oder Inhaltsverzeichnis eines Magazins.
Fachleute sagen Web-Site und meinen damit die
gesamte Publikation. Site ist Englisch und
bedeutet nicht etwa Seite. Nein, das Wort heißt
übersetzt Platz oder Stelle, die Web-Site ist
demnach Dein Platz im World Wide Web. Klar?
Homepage oder Home bezieht sich in diesem Fall
nur auf diese Startseite. Natürlich darfst Du im
landläufigen Sinne auch weiterhin Homepage sagen, wenn Du das Ganze meinst. Und das tue ich
in diesem Heft dann auch.
Zuerst der Plan
So, so, Du willst also eine richtige Internet-Broschüre veröffentlichen, eine Web-Site. Prima.
Doch halt, nicht ganz so stürmisch. Bitte plane das
Ganze zuerst, beispielsweise auf einem Blatt Papier! Richtig, mache Dir einfach eine Skizze,
damit Du einen Überblick bekommst. Hier ein
einfaches Beispiel, welches aus 3 miteinander
verknüpften Seiten besteht.
zuerst eine Startseite, eben diese Homepage. Dafür
solltest Du immer den Dateinamen index.html
vorsehen. Warum? Startseiten heißen eben nun mal
so. Punkt.
Tip: Die Dateiendung für HTML-Dokumente kann
sowohl htm als auch html lauten. Häufig muß jedoch die Startseite (index.html) die vierstellige
Endung html besitzen, weil der Server in diesem
Falle häufig keine dreistellige Endung akzeptiert.
Von der Startseite, der Homepage, verweist Du
dann mit diesen Links, den Querverweisen, auf die
anderen Seiten. Und natürlich wieder zurück. Die
anderen Seiten bekommen im Beispiel die Dateinamen hobby.html und links.html.
Gelegentlich werde ich auf dieses Beispiel zurückkommen. Grafiken und Links kommen später zum
Zuge.
Der Projektordner
Noch etwas: Richte Dir außerdem für Dein Projekt
einen eigenen Ordner ein. Hier speicherst Du alle
Dateien (auch die Grafiken!) ab. Grund: bei einigen Internet-Providern darfst Du keine Unterordner anlegen!
Wir nennen unseren Projektordner homepage.
Falls Du vergessen hast, wie man das macht, hier
die Schritte:
1. Gehe in den Windows-Explorer, beispielsweise
durch Start/Programme/Windows Explorer.
2. Markiere auf der linken Seite den Ordner, unter
dem Du den Projektordner erstellen willst, klicke
beispielsweise auf Eigene Dateien.
3. Wähle nun Datei/Neu/Ordner! Ein Ordner mit
der Platzhalterbezeichnung Neuer Ordner erscheint.
4. Tippe Deinen Ordner-Namen ein, im Beispiel
homepage, drücke nun auf Enter!
Halte Dich bei der Namensgebung am besten
generell an Kleinschreibung, verzichte außerdem
auf Umlaute und Leerzeichen!
Bild 7 So könnte die Skizze aussehen
Die Abbildung verdeutlicht gut den Zusammenhang zwischen den Dokumenten. Beachte: Es gibt
© Johann-Christian Hanke: Homepages für Einsteiger - 26-03-02 - 19:22
Arbeit mit dem Editor
13
So entsteht die erste Datei – Wir arbeiten mit dem Editor!
Was benötigst Du? Natürlich einen Browser, also
beispielsweise den Microsoft Internet Explorer
oder den Netscape-Browser. Wir nehmen den Internet Explorer, da er bei Windows stets mitgeliefert wird (und besser geeignet ist).
Zweitens benötigst Du einen einfachen Text-Editor, eine Mini-Textverarbeitung ohne Schnörkel.
Auch das liefert Windows gleich mit.
Du kannst als Text-Editor auch jedes beliebige
Textverarbeitungsprogramm benutzen, mußt den
Code jedoch als reinen Text speichern (nur Text
etc.). Als Endung fügst Du beim Speichern an die
Datei .html nicht etwa .txt für Text.
Noch etwas, es empfahl sich bis vor kurzem, bestimmte Sonderzeichen wie die Umlaute ä, ö, ü,
das ß usw. zu kodieren, damit sie auch in anderen
Ländern richtig vom Browser dargestellt werden.
Das ü wird dabei z.B. so geschrieben: &uuml;. Die
folgende Tabelle enthält eine Kurzübersicht zur
Umlautmaskierung:
Sonderzeichen
ä
Kodierung
&auml;
Ä
&Auml;
ö
&ouml;
Ö
&Ouml;
ü
&uuml;
Ü
&Uuml;
ß
&szlig;
Statt diese Zeichen sofort ins Dokument zu schreiben, kannst Du sie ganz einfach am Schluß durch
Suchen/Ersetzen austauschen.
Gänsefüßchen werden mit &quot; umschrieben!
Du mußt die Sonderzeichen übrigens nicht umschreiben. Du kannst auch ein so genanntes MetaTag verwenden und stellst hier den entsprechenden
Zeichensatz ein. Mehr zu Meta-Tags verrate ich
Dir ab Seite 60. Hier schon einmal die entsprechende Angabe vorweg:
Wichtig: Dateiendungen einblenden
Ich gehe für die nächsten Schritte davon aus, daß
Du Dir die Dateiendungen eingeblendet hast!
Dummerweise werden Dir diese in allen WindowsVersionen ab Windows 95 standardmäßig weggeblendet. Vergleiche mit der Grafik, so muß es
aussehen, wenn die Endungen sichtbar sind.
Und wie machst Du
diese nun sichtbar?
Gehe in den WindowsExplorer, beispielsweise
durch Auswahl von
Start/Programme/(Zubehör)/Windows Explorer.
Du willst den Windows-Explorer noch schneller
starten? Halte die „Fenster-Taste“ gedrückt, es ist
die zweite Taste in der linken unteren Reihe
Deiner Tastatur. Tippe ein „e“ wie Explorer. Dieser
Trick klappt in allen Windows-Versionen ab 95.
Einzige Voraussetzung: Du hast eine Tastatur mit
„Fenster-Taste“.
Unter Windows 98 wählst du Start/Einstellungen/
Ordneroptionen. In Windows Me und 2000 lautet
die Schrittfolge dagegen Start/Einstellungen/
Systemsteuerung, Symbol Ordneroptionen. In
Windows XP musst du dagegen Start/(Alle)
Programme/Systemsteuerung wählen und dann auf
Ordneroptionen doppelt klicken.
Geschafft? Dann gehst
du dort ins Register
Ansicht!
Suche nun nach einer Option, die je nach
Windows-Version folgendermaßen heißt:
Dateinamenerweiterungen bzw. Erweiterung bei
bekannten Dateitypen ausblenden.
<meta http-equiv="content-type" content=
"text/html; charset=iso-8859-1" />
Bild 8 Kleines Häkchen – großer Unterschied!
In vielen Web-Seiten für deutsches Publikum werden diese Sonderzeichen nicht mehr maskiert.
Wundere Dich jedoch nicht, wenn Du in meinen
Quelltextbeispielen die umschriebenen Sonderzeichen findest. Gelernt ist gelernt!
Nimm das Häkchen weg! OK nicht vergessen!
Wenn Du willst, kannst Du gleich im WindowsExplorer bleiben. Hier erstellen wir die erste
Datei!
© Johann-Christian Hanke: Homepages für Einsteiger - 26-03-02 - 19:22
14
Arbeit mit dem Editor
Ein neues HTML-Dokument erzeugen
So geht’s im Netscape-Browser
Genug der Vorrede! Wir erzeugen jetzt gemeinsam
die Homepage, die Startseite Deiner Publikation.
Bei der ersten Schrittfolge gehe ich davon aus, daß
Du unter Windows arbeitest und daß der Internet
Explorer Dein Standard-Browser ist.
1. Du steckst im Windows-Explorer? Prima! Achte
darauf, daß Du Dich in Deinem Projektordner befindest. Du mußt also auf der rechten Seite Deinen
Ordner geöffnet haben.
2. Klicke nun mit der rechten Maustaste in einen
leeren Bereich in diesem Ordner! Jawohl, mit
rechts!
Es hat mit der eben gezeigten, sogenannten objektorientierten Methode aus welchem Grund auch
immer nicht geklappt? Vielleicht, weil Netscape
Dein Standard ist?
Dann zeige ich Dir hier die herkömmliche Vorgehensweise. Ich gehe jedoch wieder davon aus
(Windows-Grundkenntnisse!), daß Du weißt, wie
Du ein Dokument in einem bestimmten Ordner
speicherst. Nun denn:
1. Starte den Editor von Windows auf die „normale
Art“ über Start/Programme/Zubehör/Editor.
2. Wähle Datei/Speichern.
3. Stelle unter Dateityp Alle Dateien (*.*) ein.
4. Lösche jetzt im darüberliegenden Feld den
Platzhalternamen Unbenannt.txt. Tippe statt dessen
index.html!
3. Wähle im sogenannten Kontextmenü den Befehl
Neu/Textdatei!
4. Überschreibe den Platzhalternamen. Tippe statt
dessen index.html. Drücke nun die Enter-Taste.
Eine Warnung in Bezug auf den geänderten Dateinamen beantwortest Du ganz cool mit Ja!
5. Wenn alles geklappt hat, müßte bei Dir ein Dokument erscheinen, welches das blaue Symbol des
Internet Explorers trägt. Ich beziehe mich im folgenden auf den Internet Explorer (blaues e), der
macht keinen Ärger.
6. Doppelklicke nun auf
das Dokument. Es öffnet
sich im Browser, ist aber
noch leer. Kunststück,
schließlich hast Du in die
Datei noch nichts hineingeschrieben!
7. Wähle nun den Befehl
Ansicht/Quelltext anzeigen. Jetzt öffnet sich der
Editor von Windows!
In diesem Fall hast Du den Dateinamen von Anfang an festgelegt, gespeichert ist auch schon. Bei
Bild 9 in der Nachbarspalte geht es weiter!
5. Suche oben bei Speichern in Deinen Projektordner heraus!
6. Klicke nun auf die Schaltfläche Speichern.
Wie dem auch sei: Hier müßtest Du nun gelandet
sein, der Editor wartet auf Deine Eingaben:
Bild 9 Hier geht es gleich los!
Lasse den Browser im Hintergrund noch geöffnet,
damit Du schnell zurück kannst! Gegebenenfalls
mußt Du ihn durch Doppelklick auf die HTMLDatei (wieder) öffnen.
Wenn das nicht klappt, ziehst Du das Dokument
bei gedrückter linker Maustaste aus dem
Windows-Explorer-Fenster in das offene
Browserfenster!
© Johann-Christian Hanke: Homepages für Einsteiger - 26-03-02 - 19:22
HTML-Dokument erzeugen und gestalten
15
Der Einstieg – Ein HTML-Dokument erzeugen und gestalten
Nun denn, der Text-Editor ist geöffnet, wir beginnen mit dem Erstellen des Dokuments! Der Kopf
(head) eines HTML-Dokuments sieht wie folgt
aus, halte Dich bei den Tags an Kleinschreibung:
<html>
<head>
<title>Hier steht der Titel</title>
</head>
Das war's eigentlich schon, mehr wird nicht benötigt. Zwischen den <title>-Tags solltest Du
einen Titel eintragen. Dieser wird später in der
Titelleiste des Browsers abzulesen sein.
Tippe nun beispielsweise Willkommen zwischen
die <title>-Tags! Speichere Dein Dokument im
Editor über Datei/Speichern. Wechsle mit der
Taskleiste zum Browser zurück. Falls Du schon
fortgeschrittener bist, kannst Du auch die Tastenkombination Alt + Tab verwenden.
Bild 10 Bequemes Wechseln über die Task-Leiste
Drücke im Browser nun auf die Schaltfläche Aktualisieren bzw. tippe die Funktionstaste F5!
Schaue nun in die blaue Titelzeile des Browsers!
Hier steht Dein Begrüßungstext!
Bild 11 Ein Gruß in der Titelzeile!
Die meisten HTML-Editoren schreiben zusätzliche
Bemerkungen in den Kopf, vor allem „verewigen“
sie sich in der Regel mit ihrem eigenen Namen,
damit auch ja jeder weiß, mit welchem Programm
diese Seite erstellt wurde. Dazu werden
sogenannte Meta-Tags verwendet. Sie stehen im
<head> vor oder nach <title></title> und
sehen so aus: <meta .../>. Oft folgen weitere
„Meta-Zeilen“. So ist es möglich, herauszufinden,
welcher Homepage-Besitzer welches Programm
verwendet. Big Brother is watching you!
Vorrangig dienen diese Informationen jedoch
einigen Suchmaschinen zur Orientierung. Diese
Meta-Tags und ihre weiteren Möglichkeiten werden auf Seite 60 besprochen. Man kann sie problemlos weglassen bzw. löschen.
Neben dem Kopf benötigt das HTML-Dokument
auch einen Rumpf, den Körper bzw. body. Hier
beginnt nun der eigentliche Text, nun wird's spannend. Der body wird durch das Body-Tag eingeleitet. Ganz am Schluß der Seite steht das BodyAusschalt-Tag. Und das allerletzte Tag ist das
HTML-Ausschalt-Tag. Hier also das Beispiel für
den Textkörper:
<body>
Hier steht jetzt Dein Text, hier
kannst Du einfach losschreiben!
</body>
</html>
Wichtige Bemerkungen
Der Text kann geschrieben werden. Und zwar in
den body, siehe oben. Doch zuvor einige wichtige
Bemerkungen: Der Umbruch wird immer vom
Browser vorgenommen, nicht vom Text-Editor.
Die Tags sollten klein geschrieben werden.
Damit der Windows-Editor einen automatischen
Zeilenumbruch erzeugt, wähle bitte Bearbeiten/Zeilenumbruch. Hier muß nun ein Häkchen
stehen. Ansonsten rutscht der Text immer weiter
nach links, und Du wunderst Dich!
Nur die Tags zählen. Es gilt:
♦ Ein Druck auf die Enter-Taste hat keine Auswirkung. Man muß dafür den Code <p> für paragraph (Absatz) schreiben (Nicht am Ende das
Ausschalt-Pendant </p> vergessen!)
♦ Mehr als ein Leerzeichen wird ignoriert.
♦ Der Umbruch wird nachher von der Größe des
Browser-Fensters bestimmt. (Wer also einen
kleinen Monitor besitzt, sieht mehr Zeilen als
Besitzer eines großen Schirms.)
Alle Browser zeigen die Dokumente mit der Standardschrift Times oder Times New Roman an – sofern man keine andere Schriftart definiert.
Überschriften
Genug der Vorrede, das HTML-Dokument erhält
eine Überschrift. Da es eine Hauptüberschrift werden soll, nehmen wir das <h1>-Tag, den Code für
die größtmögliche Überschrift, genannt Heading 1
(Überschrift 1). Auch eine Überschrift zweiter
Ordnung (<h2>) wäre nicht schlecht. Hier ein Beispiel, es dient nur als Anregung:
© Johann-Christian Hanke: Homepages für Einsteiger - 26-03-02 - 19:22
16
HTML-Dokument erzeugen und gestalten
<h1>Igors buntes Hundemagazin</h1>
Der Browser zeigt den Text dann fett und ziemlich
groß an. Insgesamt gibt es übrigens 6 verschiedene
Überschriftsgrößen, von <h1> bis <h6>.
Man merkt, daß HTML von Wissenschaftlern entwickelt wurde, schließlich benötigen wissenschaftliche Dokumente ebenfalls etliche Überschriftsebenen für eine sinnvolle Gliederung.
Folgen wir diesem Beispiel und schauen wir uns
einmal den möglichen Quelltext für „Igors buntes
Hundemagazin“ an. Die Textabsätze habe ich jeweils zusätzlich in das Tag-Paar <p></p>
(paragraph bzw. Absatz) eingehüllt. Das empfiehlt
sich, obwohl es nicht zwingend vorgeschrieben ist:
<html>
<head>
<title>Willkommen</title>
</head>
<body>
<h1>Igors buntes Hundemagazin</h1>
<p>Willkommen bei Igor, dem OnlineMagazin f&uuml;r jeden Geschmack. Sie
finden hier Informationen &quot;rund
um den Hund&quot;.
Und falls Sie noch nicht auf den Hund
gekommen sind, dann lesen Sie
doch einmal weiter!</p>
<h2>Flitz - der Freund der ganzen
Familie</h2>
<p>Dieser Abschnitt berichtet
&uuml;ber Flitz, einen
lieben kleinen Mischlingshund. Petra
Scholz staunte nicht schlecht,
als sie die Wohnungst&uuml;r
&ouml;ffnete. Stand doch da ein
Hund vor der T&uuml;r, mit einem Korb
im Maul. In diesem Korb...</p>
<h2>Ein dunkles Kapitel Kampfhunde</h2>
<p>Dies ist eine wahre Begebenheit.
Eine Frau ging friedlich mit
ihrem Scho&szlig;hund auf der Straße
spazieren. Pl&ouml;tzlich...</p>
</body>
</html>
Wie Du mit dem <font>-Tag erweiterte Zeicheneigenschaften wie Schriftart und -größe festlegen
kannst, erfährst Du ab Seite 31. Einfache Gestaltungsmöglichkeiten lernst Du auf den nächsten
Seiten kennen.
Bild 12 So sieht das Dokument im Browser aus
Ich vermute natürlich, daß Du hier Dein eigenes
Beispiel erzeugst. Deine Startseite „Willkommen
auf meiner Homepage“ harrt noch ihrer Entstehung. Beginne also mit dem head, wie im vorigen
Beispiel. Schreibe dann beispielsweise:
<h1>Willkommen auf meiner Homepage</h1>
Füge ruhig schon etwas Text ein. Um die Links
und Grafiken kümmern wir uns später!
Fett, kursiv und unterstrichen
Damit der Text nett aussieht, verwendet man zusätzlich die unterschiedlichsten Tags. Selbstverständlich gibt es Tags für fett, kursiv, unterstrichen
etc., allerdings alles auf Englisch. Also <b> für
bold (fett), <i> für italic (kursiv), <u> für underlined (unterstrichen).
Achtung, das Tag zum Unterstreichen wurde nicht
mehr in den Standard HTML 4 übernommen! Verwende es nach Möglichkeit nicht, es kann mit
Links verwechselt werden.
Natürlich ist auch die Kombination mehrerer Tags
zulässig. Soll ein Text fett und kursiv sein, sieht
das im Quelltext so aus:
<b><i>Dieser Text ist fett und
kursiv</i></b>, der nun folgende
jedoch nicht mehr.
Vergiß nicht, die Tags wieder auszuschalten. Und
zwar in der jeweils umgekehrten Reihenfolge.
© Johann-Christian Hanke: Homepages für Einsteiger - 26-03-02 - 19:22
HTML-Dokument erzeugen und gestalten
Absätze und Absatzausrichtung
Absätze kann man durch entsprechende Tags definieren. Zu Beginn eines Absatzes steht <p>, am
Ende </p>. P steht, wie schon erwähnt, für
paragraph, zu deutsch Absatz. Jeder neue Absatz
beginnt mit einer neuen Zeile.
Absätze besitzen einen größeren Abstand zueinander. Auch ist es möglich, diese Absätze auszurichten, dazu benötigst Du das Attribut align mit
dem Wert right. Ein rechtsbündiger Absatz wird
so eingeleitet:
<p align="right">.
Weitere Werte sind center, justify und
left. Letzterer Wert (left=linksbündig) ist aber
nicht notwendig, da der Text standardmäßig linksbündig steht. Und justify (Blocksatz) wird von
älteren Browsern nicht richtig interpretiert.
Beachte: Attributwerte werden stets in Anführungszeichen gesetzt!
Ein rechtsbündiger Absatz sieht beispielsweise so
aus - natürlich im Quelltext:
<p align="right">Dieser Absatz wird
rechts ausgerichtet.</p>
Eine neue Zeile erzeugen
Du möchtest lediglich eine neue Zeile erzeugen,
ohne gleich einen Absatz zu beginnen? Dann verwende für diesen Zweck das Tag
<br />
Dadurch ändert sich auch der Abstand zwischen
den Zeilen nicht. Da das Tag kein End-Tag
braucht, wird es intern abgeschaltet. Du schreibst
ein Leerzeichen und dann den Slash (/).
Aufzählungen und Listen
Kennst Du Bullets, die sogenannten Aufzählungspunkte? Um solch eine „ungeordnete“ Aufzählung
mit Bullets zu erstellen, benötigst Du ein spezielles
Start-Tag <ul>, die Listen-Tags <li></li> und
ein End-Tag </ul>, welches die ganze Liste wieder ausschaltet. Ein Beispiel gefällig?
<ul>
<li>Das ist Punkt 1</li>
<li>Das ist Punkt 2</li>
<li>Das ist der letzte Punkt</li>
</ul>
17
Für eine automatisch durchnumerierte Liste ersetzt
man nur das Tag <ul> durch <ol>, End-Tag am
Schluß der Aufzählung nicht vergessen.
Hier ein Beispiel für eine durchnumerierte ungeordnete Aufzählung (unordered list), danach die
geordnete Variante:
Bild 13 Bullets und Ziffern, einfach erzeugt
Vergiß nicht, Dein Projekt regelmäßig nachzuspeichern. Wähle dazu Datei/Speichern. Sollte etwas
nicht richtig dargestellt werden, hast Du Dich sicher nur verschrieben! Kontrolliere Deinen Quelltext noch einmal ganz genau!
Linien einfügen
Du möchtest eine schicke Linie in Dein Dokument
einfügen? Nichts leichter als das. Tippe lediglich
das Tag
<hr />
Das Ergebnis kann sich sehen lassen. <hr />
wird, wie Du siehst, auch intern abgeschaltet.
Der Trick mit den Leerräumen
Für Leerzeilen gibt es einen Trick. Denn mehr als
ein <p> wird nicht interpretiert, auch wenn Du 763
<p> hintereinander schreibst, hat das keinen Sinn.
Also setzt man zum Erzeugen von 3 Leerzeilen
noch ein Leerzeichen hinter die <p>-Tags. Ein geschütztes Leerzeichen, wenn’s recht ist.
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
Das Zeichen &nbsp; ist übrigens nichts weiter als
der unsichtbare Code für ein geschütztes Leerzeichen, ein non breaking space. Normalerweise
bewirkt es, daß Wörter nicht durch einen Zeilenumbruch auseinandergerissen werden.
© Johann-Christian Hanke: Homepages für Einsteiger - 26-03-02 - 19:22