1 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
![eBook-Project by AboutWebDesign.de [LOGO]](logo.jpg){kind=logo}
|
|||
4.2 HTML-Tutorial |
|||
|
|||
4.2.1 VoraussetzungenFür dieses Tutorial benötigt werden:
|
|||
|
|||
4.2.2 ZielsetzungUnsere Zielsetzung ist es, Sie in kurzer Zeit mit HTML/XHTML vertraut zu machen. Für tiefer gehendes Wissen empfehlen wir SelfHTML.Dabei werden wir nicht auf diverse WYSIWYG-Editoren wie Frontpage oder Dreamweaver eingehen - wir beschäftigen uns nur mit HTML an sich. Worauf es beim Einsatz von XHTML besonders ankommt, erläutern wir getrennt im vorletzten Abschnitt. |
|||
|
|||
4.2.3 Nötiges VorwissenHTML ist eine Seiten-Beschreibungssprache, keine Programmiersprache. Daher ist es streng genommen falsch, vom "Programmieren" einer Internet-Seite zu reden.Seine Daten legt HTML im Text-Format ab. Kommen Sie daher nicht auf die Idee, HTML mit Microsoft Word schreiben zu wollen (außer, Sie stellen den richtigen Dateityp beim Speichern ein, aber das ist unnötig kompliziert). Sie brauchen also einen Text-Editor. Wenn Sie hier kein spezielles Programm besitzen, können Sie auch einfach das Windows-Standard-Programm Notepad nutzen. Daten bzw. Format-Anweisungen werden in HTML durch sogenannte "Tags" kodiert. Alles, was von Größer- und. Kleiner-Zeichen eingeschlossen wird, ist ein Tag: z.B. <TABLE>, <A HREF=".."> oder <HTML>. Wenn Sie einen vernünftigen Editor, wie z.B. das o.g. HomeSite, verwenden, dann werden diese Tags farblich hervorgehoben dargestellt.Es gibt Tags, die haben für sich allein stehend eine Bedeutung: z.B. das Tag für einen Zeilenumbruch, in HTML <br>. Andere Tags brauchen ein zusätzliches schließendes Tag. Sie beziehen sich dann auf das, was zwischen dem einleitenden Tag und dem schließenden Tag steht. Ein Beispiel dafür ist das Tag für Fettschrift: <B>Dieser Text ist fett</B>
|
|||
|
|||
4.2.4 Erste SchritteÖffnen Sie nun den Editor Ihrer Wahl und fügen Sie folgenden Code in eine leere Datei ein:Speichern Sie die Datei nun ab und öffnen Sie sie in Ihrem Browser. Geben Sie der Datei die Endung ".html". Wenn Sie wirklich Notepad verwenden sollten, achten Sie darauf, dass die Datei wirklich diese Endung bekommt: Erreichen können Sie das, indem Sie den Dateinamen mit Anführungszeichen umschließen. Was sehen Sie? Eigentlich sollte Sie nun ein fröhliches "Hallo Welt" begrüßen - wenn nicht, haben Sie irgendwo einen Fehler gemacht. Was lernen wir aus dem Beispiel? Zunächst einmal kennen wir nun das Grundgerüst jeder HTML-Datei. U.a. enthalten sind darin <head>...</head> und <body>...</body>.Das body-Tag enthält die darzustellenden Inhalte. Das head-Tag dagegen enthält allgemeine Informationen zur Datei, so z.B. den Titel, der später in der Titelleiste Ihres Browsers angezeigt wird.
|
|||
|
|||
4.2.5 TextauszeichnungenFahren wir direkt fort. Verwenden Sie nun folgenden Code:Speichern Sie die Datei und öffnen Sie sie in Ihrem Browser. Sie sollten nun fünf Textzeilen sehen, alle etwas anders formatiert. Neu sind die b- und i-Tags. Diese stellen den Text, den sie enthalten, fett bzw. kursiv dar. <br> bewirkt, dass Sie fünf Zeilen sehen. Würde das br-Tag nicht verwendet, dann würden die fünf Sätze in einer Zeile stehen.Recht interessant sind sicher auch die font-Tags, mit deren Hilfe Sie im Beispiel Textfarbe und Schriftart festgelegt haben. Das W3C empfiehlt übrigens den Einsatz von CSS an Stelle von font-Tag noch so häufig eingesetzt, dass Sie es einfach kennen müssen.Zudem ist das font-Tag ein guter Einstieg in die Welt der Attribute: Wie Sie sehen, gibt es nicht nur einfache Tags. Das color="red" innerhalb des font-Tags ist etwas, das als Attribut bezeichnet wird. Andere Farbnamen sind übrigens blue, yellow und silver, eine vollständigere Liste finden Sie bei SelfHTML.Welchen Sinn machen Attribute? Sie erlauben es, ein Tag wie |
|||
|
|||
4.2.6 Links und BilderDas nächste Thema bezieht sich auf Links und Bilder - wichtige Teilbereiche. Als Nebeneffekt werden Sie hier mit der Verwendung weiterer Attribute vertraut gemacht.Das Tag <a ...> ... </a> dient zum Setzen von Links. Der Text, der zwischen Anfangs- und End-Tags steht, wird als Link-Bezeichner verwendet, im Endeffekt also angezeigt. Das Attribut href gibt die URL an, zu der der Link führt.Das <img>-Tag bindet ein Bild ein. Das src-Attribut spezifiziert dabei den Pfad zum Bild, das eingebunden werden soll.Fällt Ihnen in der drittletzten Zeile des Beispiels etwas auf? Hier sind zwei Tags geschachtelt: das img-Tag steht innerhalb des Links. Wer also auf das Bild klickt, kommt zu AboutWebDesign.de. Schachtelungen sind innerhalb von HTML erlaubt und oft sogar notwendig, wie Sie im Abschnitt "Tabellen" noch sehen werden.Zunächst aber sollten wir uns einem anderen Problem zuwenden: Den URLs zu anderen Seiten bzw. den Bildern. Wo müssen die Bilder eigentlich genau liegen, damit sie angezeigt werden können? Der folgende Abschnitt gibt Antworten. |
|||
|
|||
4.2.7 Absolute und relative AdressierungWer etwas linken oder einbinden will, muss üblicherweise einen Pfad zu dem entsprechenden Objekt verwenden. Der Pfad sagt dem Browser genau, wo er suchen muss. Dabei gibt es zwei Methoden, Pfade zu formulieren: die relative und die absolute Adressierung.4.2.7.1 Absolute AdressierungAbsolute Adressierung liegt dann vor, wenn die Interpretation des Pfades nicht von der aktuellen Position abhängt. Umgekehrt formuliert: Wenn die Wirkungsweise, die Auswertung eines Pfades davon abhängt, auf welcher Unterseite einer Site der Surfer gerade ist, kann nicht von absoluter Formulierung gesprochen werden.Absolute Adressierungen werden entweder durch ein http:// oder durch einen Slash (/) am Anfang des Pfades eingeleitet. Beginnt der Pfad mit http://, so sucht der Browser sich die URL ganz so, wie er es tun würde, wenn ein Anwender den Pfad per Hand eingegeben hätte. Beginnt ein Pfad mit einem Slash, setzt der Browser die zu ladende URL aus aktuellen Domain- und Server-Namen und dem Pfad zusammen. Dazu ein Beispiel: der Anwender ist auf http://www.xyz.de/abd/index.html. Der zu ladende Link enthält /info/index.html als Pfad. Zunächst werden nun also Domain- und Server-Name aus der aktuellen Seite extrahiert: http://www.xyz.de. Angefügt wird der Pfad, heraus kommt http://www.xyz.de/info/index.html.4.2.7.2 Relative AdressierungRelative Adressierungen decken alle anderen Möglichkeiten ab. Also: solange weder einhttp:// noch ein Slash am Anfang des Pfades steht, gilt der Pfad als relativ formuliert.Interpretiert wird er, indem die Verzeichnisinformationen des Pfades zur aktuellen Seite mit dem neuen Pfad verbunden werden. Die zwei Punkte ( ..) haben dabei eine Sonderbedeutung: Sie stehen für das nächsthöhere Verzeichnis.Das wollen wir an zwei Beispielen verdeutlichen. Ausgangslage ist beide Male, dass der Surfer sich gerade auf http://www.xyz.de/abd/index.html befindet.In Beispiel 1 klickt der Surfer einen Link an, der moreinfo/more.html als Pfad enthält. Zunächst werden die Verzeichnisinformationen des aktuellen Pfades extrahiert: http://www.xyz.de/abd/. Daran angehangen wird der neue Pfad. Heraus kommt http://www.xyz.de/abd/moreinfo/more.html.In Beispiel 2 geht es um ein Bild aus dem Verzeichnis http://www.xyz.de/pictures/. Der Webmaster hat als Pfad für das Bild ../pictures/bild1.jpg angegeben. Wie setzt der Browser also die passende URL zusammen? Zunächst werden wieder die Verzeichnisinformationen des aktuellen Pfades extrahiert: http://www.xyz.de/abd/. Angehangen wird der neue Pfad, es entsteht die URL http://www.xyz.de/abd/../pictures/bild1.jpg. Die Erklärung ist simpel: Erinnern Sie sich, dass .. für das nächsthöhere Verzeichnis steht? Zunächst springt der Browser also ein Verzeichnis zurück, von http://www.xyz.de/abd/ nach http://www.xyz.de/. Von dort an geht es dann wie gewohnt weiter. Übrigens lässt sich dieser Mechanismus auch mehrfach und in absoluten Pfaden anwenden: http://www.xyz.de/abd/eins/../../bilder.html ist das gleiche wie http://www.xyz.de/bilder.html
|
|||
|
|||
4.2.8 TabellenAm Ende unserer HTML-Einführung wenden wir uns schließlich noch den Tabellen zu. Betrachen Sie sich einmal folgende Datei:Das Beispiel ist schon fast selbsterklärend: <table> ... </table> umschließt eine Tabelle, <td>Irgendein Text</td> mit Informationen gefüllt. Beachten Sie bitte, dass die Zahl der Zellen in jeder Zeile zunächst einmal gleich sein muss.Das <table>-Tag unterstützt div. Attribute: Erklärung:
|
|||
|
|||
4.2.9 Unterschiede HTML/XHTMLXHTML ist eine auf dem Standard XML aufbauende "Neuformulierung" von HTML. Wichtigste Unterschiede:
Es gibt weitere Unterschiede - begnügen Sie sich jetzt am Anfang jedoch mit dieser Liste. Später, wenn Sie tiefer in die Materie einsteigen wollen, finden Sie im Internet sehr viele Listen mit Unterschieden. Zum Schluss noch ein Beispiel für ein XHTML-Dokument: |
|||
|
|||
4.2.10 FazitNun sollten Sie HTML in Ansätzen beherrschen und vom Prinzip her verstehen. Wie bereits mehrfach erwähnt, ausführlichere Einführungen finden sich im Internet. Behalten Sie vor allem das Prinzip der Anfangs- und End-Tags und die Unterschiede zwischen relativen und absoluten Pfaden im Gedächtnis. Gerade letztere werden Sie, auch, wenn Sie einen grafischen Editor verwenden, noch oft brauchen. |
|||
|
