Einführung
Weiterhin wird geglaubt, dass eine teuere und umfangreiche Software benötigt wird. Aber auch dieses ist falsch. Richtig ist, dass es die verschiedensten Programme gibt, wobei jedes für sich beansprucht, DIE Webseite für Sie erstellen zu können. Dem einen Programm gelingt das mehr, dem anderen weniger. Aber wenn Sie es richtig machen möchten, dann sollten Sie die Seite selbst machen. Glücklicherweise ist es einfach, vollkommen kostenlos und Sie besitzen schon alle Software, die Sie dafür brauchen.
Das Ziel dieses Tutorials ist es, Ihnen eine einfache, aber dennoch gründliche und korrekte Einführung in das Erstellen von Webseiten zu geben. Das Tutorial beginnt bei den Grundlagen und benötigt keinerlei Programmierkenntnisse.
Sicherlich kann ein Tutorial nicht alles zeigen. Also ist ein wenig Engagement und ein gewisser Experimentierwille von Vorteil. Aber keine Angst – zu lernen eine Webseite zu erstellen, macht viel Spaß und es gibt einem Genugtuung, wenn man es richtig und vor allem selbst gemacht hat.
Wie Sie mit dem Tutorial arbeiten ist Ihnen überlassen. Wir empfehlen, nur zwei oder drei Lektionen am Tag zu lesen und dann mit den neu gelernten Sachen ein wenig zu experimentieren.
OK, genug geredet. Lassen Sie uns beginnen!
Lektion 1: Fangen wir an!
In dieser ersten Lektion möchten wir Ihnen einen kurzen Überblick über die Werkzeuge geben, welche zum Erstellen Ihrer Homepage nötig sind.
Was braucht man?
Höchstwahrscheinlich haben Sie schon, was Sie brauchen.
Sie haben einen Browser. Ein Browser ist das Programm, mit dem man Internetseiten öffnen und ansehen kann. Gerade jetzt schauen Sie sich diese Seite in Ihrem Browser an.
Es ist nicht wichtig, welchen Browser sie benutzen. Der derzeit bekannteste ist sicherlich der Internet Explorer. Aber es gibt auch andere, wie z.B. Opera oder Mozilla Firefox und alle sind gleichermaßen für unsere Zwecke geeignet.
Sicherlich haben Sie schon einmal von Programmen wie Microsoft FrontPage, Macromedia Dreamweaver oder auch Microsoft Word gehört, bzw. auch schon damit gearbeitet. Diese Programme können Webseiten für Sie erstellen oder behaupten dies zumindest. Bitte vergessen Sie diese Programme für eine Weile. Sie sind überhaupt nicht hilfreich, wenn es darum geht, den Quelltext von Webseiten selbst zu erstellen.
Stattdessen brauchen Sie nur einen einfachen Texteditor. Wenn Sie Windows nutzen, arbeiten Sie einfach mit dem “Notepad”, welches im Startmenü unter Programme → Zubehör zu finden ist. In neueren deutschen Windows-Versionen heißt Notepad einfach nur Editor.
Wenn Sie kein Windowsnutzer sind, können Sie einen vergleichbaren Texteditor benutzen, z.B. Pico unter Linux oder TextEdit auf dem Mac.
Notepad ist zwar ein sehr einfacher Texteditor, aber toll um HTML zu erlernen, da er “die Finger vom Geschriebenen läßt”. Sie haben die volle Kontrolle über Ihren Quellcode.
Das Problem vieler Programme zum Erstellen von Webseiten ist, dass man nur aus mehreren Standardfunktionen wählen kann. Dies ist ein Nachteil, da alles in diese Vorgaben passen muss. Deswegen können diese Programme auch oft nicht die Seiten nach Ihren Wünschen erstellen. Oder – was meist noch ärgerlicher ist – sie nehmen Änderungen am von Ihnen handgeschriebenen Quelltext vor. Mit Notepad oder anderen Texteditoren, müssen Sie nur sich selbst für Erfolge oder Mißerfolge danken.
Ein Browser und Notepad (oder ein vergleichbarer Texteditor) sind alles was Sie benötigen um mit diesem Tutorial Ihre eigene Homepage zu erstellen.
Muss ich dafür online sein?
Sie müssen nicht mit dem Internet verbunden sein – weder beim lesen des Tutorials, noch beim Erstellen Ihrer Webseiten.
Wenn Sie beim lesen nicht online sein möchten, können Sie sich entweder die Seiten ausdrucken oder die Verbindung beim Lesen trennen. Ihre Webseite können Sie auf der Festplatte Ihres Computers entwickeln und diese nach Fertigstellung ins Internet hochladen.
Was kommt als nächstes?
In der nächsten Lektion können Sie zuerst noch einiges über HTML lesen, bevor es in Lektion 3 dann richtig losgeht.
Lektion 2: Was ist HTML?
Diese Lektion stellt Ihnen kurz Ihren neuen Freund vor, HTML.
Wer oder was ist HTML eigentlich?
HTML ist die “Muttersprache” Ihres Browsers.
Die Geschichte kurz und knapp: HTML wurde im Jahr 1990 von dem Wissenschaftler Tim Berners-Lee erfunden. Sinn und Zweck war eigentlich, dass Wissenschaftler verschiedener Universitäten so einfacher auf die Forschungsergebnisse anderer zugreifen können sollten. Das Projekt wurde ein größerer Erfolg, als Tim Berners-Lee je gedacht hatte. Mit der Erfindung von HTML legte er den Grundstein für das Internet, wie wir es heute kennen.
HTML ist eine Sprache, die es ermöglicht, Informationen (so z.B. wissenschaftliche Forschungen) im Internet zu präsentieren. Das, was Sie im Internet sehen, ist die Interpretation des Quellcodes durch den Browser. Um den HTML-Code einer Seite anzuschauen, wählen Sie im Menü des Browsers “Ansicht” und hier den Punkt “Quelltext”. Je nach verwendetem Browser, kann die Bezeichnung etwas abweichen.
Für ein untrainiertes Auge sieht der HTML-Code etwas komplitziert aus. Aber dieses Tutorial wird Ihnen gleich den Sinn des Ganzen nahebringen.
Wofür kann ich HTML verwenden?
Wenn Sie Webseiten erstellen wollen, geht kein Weg an HTML vorbei. Auch wenn Sie ein Programm wie z.B. Dreamweaver nutzen um die Webseiten zu erstellen, kann ein Grundwissen von HTML das Leben viel leichter und das Ergebnis viel besser machen. Die gute Nachricht ist, dass HTML einfach zu erlernen und anzuwenden ist. Nach den nächsten zwei Lektionen werden Sie gelernt haben, Ihre erste Internetseite zu erstellen.
HTML braucht man, um Webseiten zu erstellen. So einfach ist das!
Gut, aber wofür steht eigentlich H-T-M-L?
HTML ist die Abkürzung für “HyperText Mark-up Language” – aber das ist schon fast mehr, als Sie an dieser Stelle wissen müssen. Wie auch immer, der Ordnung halber erklären wir es kurz genauer.
- Hyper ist das Gegenteil von linear. In den Anfangszeiten des Computers – als eine Maus noch etwas war, dem die Katze nachjagte – liefen die Computerprogramme linear ab: wenn ein Programm eine Anweisung ausgeführt hatte, ging es zur nächsten Codezeile. Nach dieser zur nächsten usw. Aber HTML ist anders – Sie können wann immer Sie wollen, welche Seite auch immer besuchen. Z.B. ist es nicht nötig, vor dem Besuch von HTML.net das Internetangebot der deutschen Bundesregierung zu besuchen.
- Text, nun ja – erklärt sich von selbst.
- Mark-up ist das, was man mit dem Text macht. Man formatiert den Text – etwa in der gleichen Weise wie in einem Textverarbeitungsprogramm. Man verwendet Überschriften, Aufzählungen, fett geschriebenen Text usw.
- Language bedeutet “Sprache”. HTML ist auch fast eine solche, man benutzt viele englische Wörter – aber HTML ist KEINE Programmiersprache.
In diesem Tutorial werden Sie so genanntes XHTML (Extensible HyperText Mark-up Language) erlernen. Dieses ist, um es kurz zu machen, eine neue besser strukturierte Art HTML zu verfassen.
Jetzt da Sie wissen, wofür HTML (und XHTML) steht, lassen Sie uns mit dem beginnen, worum es geht: Webseiten erstellen.
Lektion 4: Ihre erste Webseite
Mit dem, was Sie in den vorhergehenden Lektionen gelernt haben, sind Sie nur noch ein paar Minuten vom Erstellen Ihrer ersten Webseite entfernt.
Wie?
In Lektion 1 haben wir gesehen, was man benötigt, um eine Webseite zu erstellen: ein Browser und Notepad (oder einen vergleichbaren Texteditor). Da Sie dieses lesen, haben Sie Ihren Browser geöffnet. Das einzige was Sie jetzt noch brauchen ist ein weiteres Browserfenster (starten Sie Ihren Browser einfach noch einmal), um das Tutorial weiter lesen und gleichzeitig Ihre entstehende Webseite anschauen zu können.
Öffnen Sie bitte auch Notepad (im Startmenü, unter Programme → Zubehör)
Jetzt sind wir bereit!
Was soll ich machen?
Lassen Sie uns mit etwas einfachem beginnen. Wie wäre es mit einer Seite, auf der “Das ist meine erste Homepage!” zu lesen ist? Lesen Sie weiter und Sie werden herausfinden, wie einfach es ist.
HTML arbeitet einfach und logisch. Der Browser liest HTML genau wie Sie selber: von links nach rechts und von oben nach unten. Deswegen beginnt ein HTML-Dokument mit dem, was zuerst auf der Seite dargestellt werden soll und endet mit dem, was zuletzt kommen soll.
Zu allererst muss man dem Browser mitteilen, dass man mit ihm in der Sprache HTML kommunizieren möchte. Dies geschieht mit dem Tag <html> (nicht überraschend oder?). Also bevor Sie irgendetwas anderes machen, schreiben Sie <html> in die erste Zeile Ihres Dokumentes im Notepad.
Wie Sie schon aus den vorhergehenden Lektionen wissen, ist <html> ein Start-Tag, der mit einem End-Tag geschlossen werden muss, wenn das HTML-Dokument beendet ist. Um sicherzustellen, dass der End-Tag nicht vergessen wird, schreiben Sie jetzt nach ein paar Leerzeilen “</html>”. Der Rest des HTML-Dokumentes wird nun zwischen <html> und </html> geschrieben.
Das nächste, was Ihr HTML-Dokument braucht, ist ein Kopf (engl. head) und einen Körper (engl. body). Der Kopf enthält Informationen über Ihr Dokument und im Körper steht der Inhalt des Dokuments.
Logischerweise steht der Kopf (<head> und </head>) über dem Körper (<body> und </body>).
Ihr Dokument im Notepad sollte mittlerweile wie folgt aussehen:
<html>
<head>
</head>
<body>
</body>
</html>
Haben Sie bemerkt, dass wir das Dokument strukturiert haben? Wir haben neue Zeilen benutzt (ENTER-Taste) und Tags eingerückt (Tabulator-Taste). Eigentlich spielt es keine Rolle, wie man das Dokument strukturiert. Aber um Ihnen und anderen zu helfen, Ihren Quellcode zu lesen und den Überblick zu behalten, empfehlen wir Ihnen, Ihre Dokumente mit Zeilenumbrüchen und Einrückungen, wie eben gesehen, zu strukturieren.
Wenn Ihr Dokument wie das obige Beispiel aussieht, haben Sie gerade Ihre erste Webseite erstellt – gut, sie ist etwas langweilig und vielleicht nicht das, woran Sie dachten, als Sie dieses Tutorial angefangen haben. Aber eben eine Webseite. Was Sie gerade erstellt haben, wird der Ausgangspunkt für Ihre zukünftigen HTML-Dokumente werden.
Soweit, so gut – aber wie bringe ich Inhalte in meine Webseite?
Wie Sie gerade schon erfahren haben, hat Ihr HTML-Dokument zwei Teile: den Kopf und den Körper. In den Kopfteil schreiben Sie Informationen über Ihre Seite, während im Körper die Inhalte zu stehen kommen, die dann im Browser angezeigt werden.
Wenn Sie Ihrer Seite z.B. einen Titel geben möchten, der am oberen Rand des Browsers stehen soll, muss dies im Kopfteil geschehen. Das Element, welches Sie hierfür verwenden müssen ist “title”. Den Titel Ihrer Seite schreiben Sie zwischen den Start-Tag <title> und den End-Tag </title>:
<title>Meine erste Webseite</title>
Bitte beachten Sie, dass dieser Titel nicht auf der Seite selbst zu sehen sein wird. Alles was auf der Seite zu sehen sein soll sind Inhalte, die zwischen den “body”-Tags stehen müssen.
Wie versprochen, soll ja auf der Seite “Das ist meine erste Homepage!” stehen. Dies ist der Inhalt der Seite und gehört deshalb in den “body” des Dokuments. Schreiben Sie nun die folgende Zeile zwischen die “body”-Tags:
<p>Das ist meine erste Homepage!</p>
Das p in <p> steht für das englische Wort ‘paragraph’ was soviel wie Absatz bedeutet. Und genau dieses ist es auch. Ein Text-Absatz.
Ihr HTML-Dokument sollte mittlerweile wie folgt aussehen:
<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body>
<p>Das ist meine erste Homepage!</p>
</body>
</html>
Geschafft! Jetzt haben Sie Ihre erste wirkliche Webseite fertig gestellt.
Alles, was Sie jetzt noch tun müssen, ist, dass Sie die Seite auf Ihrer Festplatte speichern und sie dann im Browser zu öffnen:
- Zum Speichern wählen Sie im Notepad im Menü “Datei” den Punkt “Speichern unter”.
- Wählen Sie “Alle Dateien” im Auswahlfeld “Dateityp”. Dies ist sehr wichtig. Denn sonst speichern Sie Ihre Datei als normale Textdatei und nicht als HTML-Dokument.
- Jetzt speichern Sie Ihr Dokument unter dem Namen “page1.htm” (Die Endung ”.htm” zeigt an, dass es sich um ein HTML-Dokument handelt. ”.html” bewirkt genau das gleiche. Ich persönlich benutze ”.htm”, Sie können sich natürlich auch für die andere Variante entscheiden. Dies ist ganz Ihnen überlassen.) Es spielt keine Rolle, wo auf Ihrer Festplatte Sie die Datei ablegen, solange Sie sich erinnern, wo es war und Ihre Seite später wiederfinden.
Nun wechseln Sie zu Ihrem Browser:
- Wählen Sie im Menü “Datei” den Punkt “Öffnen” (CTRL+O).
- Klicken Sie auf “Durchsuchen” in dem Fenster, das sich öffnet.
- Suchen Sie jetzt nach Ihrem HTML-Dokument, markieren dieses und klicken anschließend auf “Öffnen”.
In Ihrem Browser sollte nun “Das ist meine erste Homepage!” zu lesen sein. Herzlichen Glückwunsch!
Wenn Sie der Welt Ihr Meisterwerk unbedingt schon jetzt zeigen wollen, dann blättern Sie vor zu Lektion 13. Dort wird Ihnen gezeigt, wie man Seiten ins Internet lädt. Ansonsten, bleiben Sie geduldig und lesen weiter. Der Spaß hat erst begonnen.
Lesson 5: Was Sie bisher gelernt haben!
Beginnen Sie immer mit der Vorlage, die wir in der letzten Lektion erstellt haben:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Im Kopf (head) Ihrer Seite schreiben Sie immer einen Titel: <title>Titel Ihrer Seite</title>. Dieser Titel wird im oberen Balken des Browsers angezeigt:
Dieser Titel ist besonders wichtig, da dieser von Suchmaschinen (wie z.B. Google) u.a. genutzt wird, um Ihre Seite in den Suchindex aufzunehmen. Außerdem wird der Seitentitel in den Suchergebnissen angezeigt.
In den Körper (body) gehört der eigentliche Inhalt der Seite. Sie kennen schon einige der wichtigsten Elemente:
<p>Wird für Absätze benutzt.</p>
<b>Schreibt den Text in Fettschrift.</b>
<h1>Überschrift</h1>
<h2>Sub-Überschrift</h2>
<h3>Sub-Sub-Überschrift</h3>
Bitte denken Sie daran: Der einzige Weg HTML zu erlernen, ist durch ausprobieren. Im Englischen gibt es hierfür den Ausdruck “Trial and Error” – “Probieren und Fehler”. Aber keine Angst, Sie können weder Ihren Computer, noch das Internet durch irgendwelche Fehler im HTML-Quelltext zerstören. Also experimentieren Sie – das ist der beste Weg, um Erfahrungen zu sammeln.
Was bedeutet das jetzt?
Niemand wird toller Webseiten erstellen, bloß weil er die Beispiele in diesem Tutorial auswendig lernt. Dieses Tutorial soll lediglich eine Basis für das Verständnis der Elemente bieten – um besser zu werden, müssen Sie die Elemente in immer neuer und kreativer Art und Weise anordnen.
Also, probieren Sie einfach ein wenig mit dem, was Sie gelernt haben.
Was kommt als nächstes?
Probieren Sie einfach, ein paar eigene Seiten zu erstellen. Z.B. eine Seite mit einem Titel, einer Überschrift, ein wenig Text, einer Sub-Überschrift und noch ein wenig mehr Text. Es ist vollkommen in Ordnung im Tutorial nachzuschauen, während Sie Ihre ersten Seiten erstellen. Aber später können Sie ja probieren, eine Seite zu bauen, ohne nachzuschauen.
Lektion 9: Bilder
Wäre es nicht toll, wenn Sie ein Bild von der Schauspiel- und Musiklegende David Hasselhoff auf Ihrer Seite hätten?
Das klingt nach ein bißchen Herausforderung …
Vielleicht, aber eigentlich ist es auch ganz einfach. Alles was Sie wieder brauchen, ist ein Element:
Beispiel 1:
<img src="david.jpg" alt="David" />
sieht im Browser wie folgt aus:
Sie müssen dem browser zuerst mitteilen, dass Sie ein Bild (img, kurz für image) einfügen möchten. Dann müssen Sie ihm noch die Quelle (src, kurz für source) nennen. Logisch oder?
Bitte beachten Sie, dass das img- Element, wie das bereits bekannte <br />, Start- und End- Tag in einem ist. Wie br ist img nicht an Text gebunden.
“david.jpg” ist der Name der Bilddatei, die Sie auf der Seite einfügen möchten. “.jpg” ist der Dateityp des Bildes. Wie die Endung “.htm” anzeigt, dass die Datei ein HTML-Dokument ist, zeigt “.jpg” dem Browser, dass es sich bei der Datei um ein Bild handelt.
Es gibt drei verschiedene Arten von Bildtypen, die man in eine Internetseite einbinden kann:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
GIF-Bilder sind normalerweise am besten für Grafiken und Zeichnungen geeignet, während JPEG-Bilder eher für Fotografien geeignet sind. Dies hat zwei Gründe: Erstens, GIFs bestehen nur aus max. 256 Farben, während JPEGs Millionen von Farben enthalten können. Zweitens ist das GIF-Format bei der Komprimierung einfacherer Bilder besser als das JPEG-Format, welches wiederum eher für komplexe Bilder optimiert ist. Je besser die Komprimierung, um so kleiner ist die Dateigröße der Bilddatei und desto schneller wird das Bild in Ihrer Seite geladen. Wie Sie vielleicht aus Ihrer eigenen Erfahrung wissen, können unnötig ‘überladene’ Seiten für den Nutzer sehr ärgerlich sein.
In der Vergangenheit waren GIF und JPEG die beiden dominierenden Bildtypen. Aber seit kurzem wird das PNG-Format immer populärer (meist auf Kosten des GIFs). Das PNG enthält in den meisten Fällen das Beste der beiden anderen Formate: Millionen von Farben und effektive Komprimierung.
Woher bekomme ich die Bilder?
Um Ihre eigenen Bilder zu erstellen, benötigen Sie ein Bildbearbeitungsprogramm. Ein Bildbearbeitungsprogramm ist eines der wichtigsten Werkzeuge um schöne Webseiten zu erstellen.
Leider ist weder im Lieferumfang von Windows, noch bei anderen Betriebssystemen, ein annehmbares Bildbearbeitungsprogramm inklusive. Deswegen sollten Sie sich überlegen, in Bildbearbeitungssoftware zu investieren. Paint Shop Pro, PhotoShop oder Macromedia Fireworks sind drei der besten derzeit auf dem Markt befindlichen Programme.
Wie auch immer, wir hatten ja gesagt, es braucht keine teuren Programme um das Tutorial zu beenden. Für unsere Zwecke genügt es, wenn Sie sich Irfan View, ein exzellentes Bildbearbeitungsprogramm herunterladen. Irfan View ist sogenannte Freeware und kostet aus diesem Grunde nichts.
Oder Sie borgen sich Bilder von anderen Seiten, indem Sie diese downloaden. Aber bitte seien Sie vorsichtig, dass Sie mit dem Download und einer späteren Verwendung auf Ihren Seiten keinerlei Copyrights verletzen. Trotz alle dem ist es sicherlich nützlich zu wissen, wie man Bilder aus dem Internet herunterlädt. So wird’s gemacht:
- Klick mit der rechten Maustaste auf das Bild (irgendein Bild im Internet)
- Wählen Sie “Bild speichern als …” in dem Menü, welches erscheint.
- Suchen Sie einen Ordner, in den Sie das Bild speichern möchten und klicken Sie auf “Speichern”.
Probieren Sie dies mit dem nachfolgenden Bild aus. Speichern Sie es auf Ihren Rechner, ins gleiche Verzeichnis, wo sich auch Ihre Webdokumente befinden. (Bitte beachten Sie, dass das Logo eine PNG-Datei ist: mylogo.jpg):
Nun können Sie das Bild in eine Ihrer eigenen Seiten einfügen. Probieren Sie es selbst.
Ist das alles, was ich über Bilder wissen muss?
Es gibt noch ein paar Sachen mehr, die Sie über Bilder wissen sollten.
Erstens: Sie können ganz einfach Bilder einbinden, die in anderen Ordnern oder sogar auf anderen Webseiten gespeichert sind:
Beispiel 2:
<img src="images/mylogo.jpg" />
Beispiel 3:
<img src="http://www.html.net/mylogo.jpg" />
Zweitens: Bilder können auch Links sein:
Beispiel 4:
<a href="http://www.html.net"><img src="mylogo.jpg" /></a>
sieht im Browser wie folgt aus (probieren Sie, auf das Bild zu klicken):
Gibt es noch irgendwelche Attribute, von denen ich wissen sollte?
Das Attribut src muss immer benutzt werden, da es dem Browser die Quelle des Bildes vorgibt. Außer diesem gibt es noch einige Attribute, die sehr nützlich sein können, wenn Bilder eingebunden werden.
Das alt-Attribut gibt eine alternative Beschreibung des Bildes an. Diese Beschreibung wird angezeigt, wenn – aus welchen Gründen auch immer – das Bild nicht angezeigt wird. Besonders wichtig ist alt z.B. für sehbehinderte oder blinde Internetnutzer. Wenn Bilder sehr langsam geladen werden, gibt die Alternativbeschreibung normal sehenden Nutzern einen ersten Eindruck, was auf der Seite zu sehen sein soll. Aus diesen Gründen nutzen Sie bitte immer das alt-Attribut.
Beispiel 5:
<img src="logo.gif" alt="Grafik: HTML.net-Logo" />
Einige der älteren Browser lassen den Inhalt des alt-Attributes in einem kleinen sog. Tooltip (ein kleines Fenster neben dem Mauszeiger) erscheinen, wenn man den Mauszeiger über das Bild bewegt. Bitte beachten Sie, dass eine Beschreibung des Inhaltes die Aufgabe dieses Attributes ist und nicht Informationen zum Bild zu geben, da sehbehinderte Menschen diesen Text hören, ohne zu wissen, dass es sich um ein Bild handelt.
Das title-Attribut hingegen kann dazu benutzt werden, Informationen zum Bild zu geben:
Beispiel 6:
<img src="logo.gif" title="Lernen Sie HTML mit HTML.net" />
sieht im Browser wie folgt aus:
Wenn Sie jetzt – ohne zu klicken – den Mauszeiger über das Bild halten, werden Sie diesen kleinen sog. Tooltip sehen. In diesem steht “Lernen Sie HTML mit HTML.net”.
Zwei weitere wichtige Attribute sind width und height:
Beispiel 7:
<img src="mylogo.jpg" width="141" height="32" />
sieht im Browser wie folgt aus:
Die Attribute width und height werden benutzt, um die Breite (engl. width) und Höhe (engl. height) eines Bildes anzugeben. Die Höhe und Breite wird in Pixeln angegeben. Pixel sind die Einheit, mit der man die Auflösung von Bildschirmen angibt. Man könnte es auch mit “Bildpunkte” übersetzen. (Die gebräuchlichsten Bildschirmauflösungen sind 800×600 und 1024×768 Pixel.) Im Gegensatz z.B. zu Zentimetern sind Pixel eine relative Maßgröße, die von der Bildschirmauflösung des verwendeten Monitors abhängt. So kann es sein, dass 25 Pixel bei einem Nutzer einer hohen Auflösung etwa einem Zentimeter entspricht, während es bei einer niedrigen Auflösung etwa anderthalb Zentimetern auf dem Bildschirm entspricht.
Wenn Sie width und height nicht einsetzen, wird das Bild in seiner Originalgröße eingefügt. Mit width und height kann man die Anzeigegröße verändern:
Beispiel 8:
<img src="logo.gif" width="32" height="32" />
sieht im Browser wie folgt aus:
Wie auch immer, bitte merken Sie sich, dass die wirkliche Dateigröße des Bildes erhalten bleibt. Eine solche Verkleinerung hat somit keinen Einfluß auf die Ladegeschwindigkeit Ihrer Webseite, auch wenn das Bild kleiner aussieht. Deswegen sollten Sie nie versuchen, die Größe Ihres Bildes mit width und height zu verkleinern. Dies sollte eher mit einem Bildbearbeitungsprogramm geschehen. Dann wird auch Ihre Seite schneller geladen werden.
Trotzdem ist es wichtig, dass Sie die Attribute width und height anwenden, weil der Browser so bemerkt, wieviel Platz das Bild benötigt, um auf der Seite dargestellt zu werden. Dies sorgt dafür, dass die Seite schneller geladen werden kann.
So, für den Moment genug von David Hasselhoff und Bildern.
Lektion 13: Seiten ins Netz laden
Bis jetzt konnten ja nur Sie selber Ihre Seiten anschauen. Jetzt ist die Zeit gekommen, dass auch der Rest der Welt Ihre Meisterwerke betrachten kann.
Ist die Welt dafür vorbereitet?
Ja, die Welt ist es – und Sie werden es auch bald sein. Um Ihre Webseite ins Internet zu bekommen, benötigen Sie Serverspeicherplatz (sog. Webspace) und ein kostenloses FTP-Programm.
Es ist durchaus möglich, dass Ihnen Ihr Internetanbieter (Provider) etwas an Webspace zur Verfügung stellt. Die Adresse könnte dann etwa in dieser Art und Weise lauten: http://home.anbieter.de/~benutzername. Evtl. müssen Sie diesen auch erst noch aktivieren. Ob dieses auf Sie zutrifft, erfahren Sie in den Unterlagen, die Sie von Ihrem Anbieter erhalten haben oder auf dessen Hilfeseiten im Internet.
Eine andere Möglichkeit wäre, sich im Internet bei Anbietern von kostenlosem Webspace anzumelden. In der gleichen Art und Weise, wie Sie sich für eine kostenlose eMail-Adresse bei WEB.de oder GMX anmelden, können Sie dies auch für kostenlosen Webspeicherplatz tun. Einige Unternehmen bieten solch einen Service an – so z.B. Angelfire (melden Sie sich an und wählen kostenlose Mitgliedschaft) – es dauert nur ein paar Minuten, sich anzumelden.
Um FTP-Zugang zu einem Server zu erhalten, müssen Sie dessen Namen (Hostname) wissen (z.B. ftp.angelfire.com) und Ihren Loginnamen und Passwort bereit halten.
Ist das alles, was ich brauche?
Um auf den Server zuzugreifen und Ihre Seiten hochzuladen, benötigen Sie ein FTP-Programm. Möglicherweise haben Sie noch keines, aber zum Glück gibt es auch hier kostenlose Software zum herunterladen.
Es gibt viele verschiedene FTP-Programme. Eines der besseren ist FileZilla, welches komplett kostenlos ist. Sie können Sie FileZilla unter filezilla.sourceforge.net herunterladen.
Und wie lade ich die Seiten ins Netz?
Nachfolgend beschrieben finden Sie, wie Sie mit Hilfe von FileZilla Ihre Seiten auf den kostenlosen Webspace bei Angelfire laden. Das Vorgehen ist aber bei anderen Providern und FTP-Programmen, mehr oder weniger, das gleiche.
Starten Sie das FTP-Programm, während sie mit dem Internet verbunden sind. Geben Sie bei “Address” den Servernamen (ftp.angelfire.com) ein, bei “User” Ihren Benutzernamen und bei “Password” Ihr Passwort. Dann klicken Sie auf “Connect” (engl. für “verbinden”). Nun sollten Sie eine Verbindung zum Server hergestellt haben. Auf der einen Seite des FTP-Programmes sehen Sie den Inhalt der Festplatte Ihres Computers (“Local Site”). Auf der anderen sehen Sie die Inhalte auf dem Server (“Remote Site”):
Suchen Sie nun Ihre HTML- und Bild-Dateien auf Ihrem Computer (“Local Site”) und übertragen Sie diese mit Doppelklick auf den Server (“Remote Site”). Jetzt kann die ganze Welt Ihre Arbeit anschauen! (z.B. unter der Adresse http://www.angelfire.com/folk/htmlnet/page1.htm).
Wenn Sie eine Ihrer Seiten in “index.htm” (oder “index.html”) umbenennen, wird diese automatisch die Startseite. Wenn man z.B. nur http://www.angelfire.com/folk/htmlnet (ohne Dateinamen) eingibt, wird in Wirklichkeit die Seite http://www.angelfire.com/folk/htmlnet/index.htm geöffnet.
Auf längere Sicht könnte es vielleicht eine gute Idee sein, wenn Sie sich Ihren eigenen Domainnamen zulegen (z.B. www.ihr-name.de oder www.mein-hobby.de) und somit lange und komplizierte Adressen vermeiden, die von Ihrem Internetanbieter oder dem Anbieter des kostenlosen Speicherplatzes vorgegeben werden. Ob Ihre Wunschdomain noch frei ist, können Sie z.B. bei DENIC, der zentralen Registrierungsstelle für .de-Domainnamen, nachschauen. Eine Bestellung des gewünschten Domainnamens können Sie dann bei einem Webhoster Ihrer Wahl vornehmen.
Lektion 15: Abschließende Hinweise
Herzlichen Glückwunsch! Sie haben die letzte Lektion erreicht.
Also weiß ich jetzt alles?
Sie haben viel gelernt und sind nun in der Lage, Ihre eigenen Webseiten zu erstellen. Aber sie haben nur die Grundlagen erlernt und es gibt noch einiges mehr, was gemeistert werden kann. Sie haben jetzt eine gute Grundlage, auf der Sie aufbauen können.
In dieser letzten Lektion, geben wir Ihnen noch ein paar abschließende Hinweise:
- Zu allererst, es ist eine gute Idee, die Ordnung und Struktur in Ihren HTML-Dokumenten beizubehalten. Übersichtlich erstellte Dokumente zeigen nicht nur anderen Ihre Kenntnisse in HTML, sondern erleichtern auch Ihnen nicht den Überblick zu verlieren.
- Halten Sie sich an die Standards und überprüfen Sie Ihre Seiten. Darauf kann man nicht oft genug hinweisen: Schreiben Sie sauberen XHTML-Code, benutzen sie eine DTD und validieren Sie Ihre Seiten unter validator.w3c.org.
- Füllen Sie Ihre Seite mit Inhalten. Denken Sie daran, dass HTML ein Werkzeug ist, welches Ihnen hilft, Informationen im Internet zu präsentieren. Sie müssen also dafür sorgen, dass Inhalte zum präsentieren vorhanden sind. Hübsche Seiten sehen gut aus, aber die meisten Menschen nutzen das Internet, um Informationen zu finden.
- Vermeiden Sie es, Ihre Seiten mit großen Bilddateien oder anderen Sachen, die Sie vielleicht im Internet gefunden haben, zu überladen. Es verlängert die Ladezeit der Seite und kann für Besucher sehr störend sein. Seiten, die mehr als 20 Sekunden zum laden brauchen, verlieren bis zu 50% ihrer Besucher.
- Melden Sie Ihre Seite bei Suchmaschinen und Webkatalogen an, sodass auch andere Leute und nicht nur der engste Familienkreis, Ihr Werk finden und genießen können. Auf den Startseiten der meisten Suchmaschinen finden Sie einen Link, um neue Seiten anzumelden. Die derzeit wichtigste ist wohl Google, aber es gibt auch noch andere, wie z.B. DMOZ, Yahoo, AltaVista, AlltheWeb und Lycos.
- In diesem Tutorial haben Sie gelernt, Notepad zu benutzen. Dieses ist ein einfacher und leicht zu bedienender Editor. Aber vielleicht finden Sie es hilfreich, einen fortgeschritteneren Editor zu nutzen, der Ihnen einen besseren Überblick und mehr Möglichkeiten bietet. Eine Zusammenfassung und Beschreibung verschiedener Editoren finden Sie bei Download.com (engl.).
Wie kann ich mehr lernen?
Zuerst einmal ist es wichtig, dass Sie weiterhin mit den im Tutorial gelernten Sachen arbeiten und experimentieren. Studieren Sie andere Webseiten und wenn Sie etwas finden was Ihnen gefällt, dann schauen Sie im Quellcode der Seite nach, wie es gemacht wurde. Einfach im Menü “Ansicht” des Browsers auf “Quellcode” klicken.
Suchen Sie im Internet nach Beispielen und Artikeln über HTML. Es gibt viele Webseiten mit guten Informationen darüber.
Lesen und fragen Sie in den Foren. Dort finden Sie wirkliche Experten, von denen Sie eine Menge lernen können.
Dann sollten Sie – wann immer Sie sich bereit dafür fühlen – beginnen, CSS mit unserem CSS-Tutorial zu lernen.
Alles was uns jetzt noch bleibt, ist Ihnen Spaß mit Ihrem neuen Freund HTML zu wünschen.
Auf Wiedersehen im Internet! :-)