|
Daher gedenke ich diese Anleitung nicht so zu halten, wie es viele andere "ernsthafte" Skripte tun, sondern so, wie ich es am Anfang selbst gerne gehabt hätte. HTML ... was ist das ??? HTML ist der Stoff, aus dem die Homepages sind ;-) HTML ist keine Programmiersprache, es gibt keine Schleifen, keine Bedingungen, keine Sprünge. HTML ist im Prinzip einfacher Text. Einfacher Text, dem bestimmte Attribute mitgegeben werden können (aber nicht müssen !) um Fettdruck, Unterstreichungen, verschiedene Farben und Zeichensätze oder sog. Hyperlinks darstellen zu können. Der Text wird in einem File gespeichert und auf einem Webserver gespeichert (zum Probieren reicht auch die eigene Festplatte). Der Anfang ist ganz leicht. Daher schnappen Sie sich jetzt bitte einen beliebigen Editor (z.B. vi für Unix, edit für Dos, Notepad für Windows, NICHT Word für Windows) und schreiben folgende magische Zeile: Ich bin der Allerbeste !Speichern Sie den Text bitte jetzt als Textfile, geben Sie aber unbedingt als Extension (das sind die Zeichen hinter dem Punkt) html ein. Wenn Sie es gleich index.html nennen, dann ist das schon ein sehr guter Anfang.Jetzt starten Sie bitte Ihren Browser (Netscape Navigator bzw. Communicator oder Microsoft Internet Explorer oder Opera oder ...) und laden das eben gespeicherte File (dafür gibt es einen eigenen Menüpunkt). Und ... traraaaa !!! Wenn Sie nicht allzu viel falsch gemacht haben, dann steht Ihr Text jetzt am Bildschirm. Das war es im Wesentlichen, sehr viel mehr steckt nicht dahinter. Wenn Sie jetzt auf den Geschmack gekommen sind, dann machen Sie doch gleich weiter! Sollten Sie, unwahrscheinlich, aber um so lobenswerter, weiblichen Geschlechts sein, können Sie ja gleich die erste Änderung durchführen und den getippten Text geschlechtsspezifisch anpassen (so z.B.: " Ich bin die Allerbeste !").Zeigt Ihr Browser noch immer den alten Text an, dann müssen Sie ihm mitteilen, daß er noch immer ein altes File anzeigt und drücken den Reload-Button (Neu laden, Aktualisieren, ...). Egal was Sie schreiben, der Browser zeigt es an. Natürlich gibt es Ausnahmen, so sollten sie alle Sonderzeichen durch spezielle Zeichenfolgen, den sog. Entiäten, ersetzten, aber für den Anfang geht das auch so. Soweit, so einfach. Natürlich stimmt das nicht ganz. Sie werden feststellen, daß Sie keine Zeilenumbrüche einfügen können, daß es sehr schwierig ist einzurücken und daß Sie das alles ja schon vieeeel bunter gesehen haben. Um den Text, den Sie schreiben, zu verändern, sind Attribute notwendig, sogenannte TAGs. So ein TAG bestimmt, ob der nachfolgende Text irgendwie besonders dargestellt werden soll, wo Grafiken oder Links zu anderen Dokumenten eingebettet werden sollen. Alle TAGs beginnen mit < und enden mit >.Dazwischen steht was geschehen soll. Geben Sie vor Ihrem Text einmal Folgendes ein: <h1> (egal ob mit oder ohne Abstand zum Text, gleiche Zeile oder zehn vorher).Speichern. Starten. Überraschung. Das <h1> (Headline 1) TAG veranlaßt Ihren Browser alle nachfolgenden Zeichen sehr groß erscheinen zu lassen. Das geht von <h1> bis <h6>, wobei <h3> der normal Schriftgröße entspricht und <h6> schon recht klein ist.Üblicherweise gelten "eingeschaltete" TAGs so lange, bis sie wieder "ausgeschaltet" werden. Das Ausschalten geht ganz einfach, indem man das TAG noch einmal verwendet, aber einen " /" voranstellt. Wenn Sie zwei Zeilen schreiben wollen, nur die Erste aber groß (eben weil es die Überschrift ist), dann setzten Sie vor die erste Zeile <h1> und dahinter ein </h1>. Ganz einfach, odrr? Der Browser versucht die angegebenen TAGs so gut wie möglich zu interpretieren. Natürlich können Sie ein <h1> mit einem <h3> abschalten, wundern Sie sich dann aber nicht, wenn es auf einem anderen System plötzlich ganz anders aussieht.Eine ganz tolle Erfindung ist das <br> TAG. Es erzwingt nämlich einen Zeilenumbruch (Zeilenumbrüche [Enter], die im Text gemacht werden, ignoriert der Browser).Logischerweise gibt es dazu kein End-TAG. Wenn ich Ihnen jetzt auch noch verrate, daß Sie mit dem <center> TAG den nachfolgenden Text mittenzentrieren können, sollte den ersten HTML-Orgien nichts mehr im Weg stehen. Wie Sie vielleicht bereits erahnen, schalten Sie mit </center> wieder auf "normal" um (d.h. linkszentriert).Um den Faden noch ein klein wenig weiter zu spinnen, möchte ich Ihnen noch kurz beibringen, daß TAGs auch Attribute haben können. Wenn Sie dem TAG <div> das Attribut align beifügen, so können Sie Ihr Textlayout noch ein klein wenig besser gestalten. <div align=left> schiebt Ihren Text nach links (Standardeinstellung), <div align=center> in die Mitte und <div align=right> nach rechts. Bitte schalten Sie diese TAGs auch wieder aus (</div> reicht, weil Sie ja das TAG ausschalten und nicht etwa das Attribut)!Ein ganz besonderes TAG möchte ich noch kurz streifen: das <a> TAG.Es ermöglicht einen sog. Link einzubauen um zu weiteren Seiten (aber auch anderen Inhalten wie Mails, Bilder, usw.) zu verzweigen. Ich wage zu behaupten, daß dieses TAG eines der wichtigsten Elemente des Webs ist. Ohne <a> keine Links, ohne Links kein Web.Verwendet wird es z.B. so: <a href=zweite_seite.html> Meine zweite Seite </a>Der Browser zeig dann den Text "Meine zweite Seite" in einer anderen Farbe (üblicherweise blau) und unterstrichen an. Das ist dann ein Link. Wenn ein Surfer draufklickt, wird das File zweite_seite.html geladen und angezeigt.Zum <a> TAG gibts einen ganzen Haufen Attribute, bitte Dokumentation lesen.Um das Chaos, das ich jetzt angerichtet habe, etwas zu begrenzen, reißen Sie sich für einen Moment von Ihrem Hackbrett los und besorgen sich etwas anständige Lektüre. Es gibt einige gute HTML-Anleitungen im Internet, die aber allesamt den Nachteil haben, daß man sie nicht mit ins Bett mitnehmen kann (es sei denn Sie wollen einige hundert Seiten ausdrucken). DIE Referenz ist wohl: SELFHTML von Stefan Münz. Spitze. Erstklassig. Alles drinnen, alles drann. Ebenfalls sehr empfehlenswert sind die: Schulungsunterlagen von DI Hubert Partl. Da gibts auch noch viel mehr, als das "gute, alte" HTML ... Ich selbst habe mir drei Bücher gekauft. HTML 4 in 14 Tagen von Laura Lemay im Verlag SAMS. Ein ausgezeichnetes Buch. Gut und verständlich geschieben. Feine Sache. HTML 3.2 Schnellübersicht von Richard Eisenberger im Verlag Markt&Technik. Ich bin damit ganz zufrieden, wenngleich mich der Autor mit seinen Referenzen zu anderen Kapiteln manchmal in die Wüste geschickt hat. Klein, fein, übersichtlich. Aus diesem Buch habe ich zwei recht ernüchternde Erkenntnisse gewonnen. Erstens ist HTML nicht gleich HTML. Sie werden sehr schnell auf TAGs und Attribute stoßen, die nur von einem bestimmten Browser verstanden werden (das align=right Attribut für das <div> TAG, das wir vorhin gelernt haben, funktioniert angeblich nur bei Netscape-Browsern).Zweitens gehen viele Dinge nicht, oder nur mit erstaunlichen Verrenkungen. Versuchen Sie einmal Tabulatoren einzufügen. Hier werden Sie sehr schnell in die Trickkiste greifen und eine kleine Tabelle hervorzaubern müssen. HTML für DUMMIES zweite, erweiterte Auflage von Ed Tittel und Steve James im Verlag Thomson Publishing. Die Autoren beginnen recht gründlich mit dem "um was geht es eigentlich" und SGML usw.. Ist ja gut und schön, ich lerne aber am meisten durch leraning by doing. Mag sein, daß ich die einzig glücklichmachende Essenz des Buches noch nicht gefunden habe, gebraucht habe ich sie aber auch noch nicht (lt. Freud kann es den glücklichen Menschen gar nicht geben, daher verwende ich den Schmöker auch nicht). Staubfänger ! DIE QUELLE schlechthin ist ... die rechte Maustaste. Kein Witz, klicken Sie mal mit der rechten Maustaste auf eine angezeigt Seite. Es wird ein Dialog aufgehen, in dem so irgendwas wie view soure zu finden ist. Durch die Arbeit anderer kann man selbst SEHR viel lernen. Natürlich ist nicht OK fremden Code einfach so zu klauen, aber ich glaube nicht, daß es einen einzigen Webseitenselbstbauer gibt, der sich nicht schon von anderen Seiten inspirieren ließ. Abschließend (es ist ja nur eine Kurzeinführung) möchte ich noch anmerken, daß es schön langsam an der Zeit ist, sich über die Struktur eines HTML-Files Gedanken zu machen. Da gibt es nämlich sehr wohl ein Vorne und ein Hinten ! Wenngleich es lächerlich klingt, Sie sollten dem Browser sagen was eigentlich los ist. Dazu verwenden Sie das TAG <html> z.B. wie folgt: <html version= "-//W3C//DTD HTML 3.2//EN">. Schreiben Sie diese Zeile bitte ganz oben hin damit sich ihr Browser glücklich fühlt. Ja, völlig richtig gedacht. Die letzte Zeile (gaaaanz, gaaaanz unten) muß daher </html> lauten.Ein HTML-File hat einen Kopf (von <head> bis </head>) und einen Rumpf (von <body> bis </body>). Diese Bereiche sind strikt zu trennen, Ihr Kopf ist ja auch nicht ein Teil Ihres Rumpfes, sondern durch den Hals getrennt. HTML-Files haben leider keinen Hals, ich habe mir schon öfters gewünscht sie würgen zu können!!Im head legen Sie globale Dinge fest. So steht dort die Schriftgröße, der Titel eines Dokumentes (erscheint in der Titelzeile des Browsers), wie verschiedene Dokumente mit einander verbunden sind, wie das Basisverzeichnis heißt und ähnliches. Wird nichts angegeben, so verwendet der Browser seine eigenen Standardeinstellungen. Und die sind für jeden Browser anders. Daher lieber etwas mehr, als zu wenig definieren. Im body steht dann der eigentliche Code, aber auch die Festlegung des verwendeten Hintergrundes und Textfarben. Jetzt folgt noch eine kleine Auflistung einiger TAGs, die man so zum Leben braucht. Unvollständig, aber fürs erste sollte es reichen ;-) <br> ... Zeilenumbruch <center> ... Mittenzentrieren <u> ... Unterstreichen <i> ... Kursiv <b> ... Fett <code> ... Wie auf einer Schreibmaschine<big> ... Schrift um eine Stufe größer <small> ... Schrift um eine Stufe kleiner <font color=red> ... Farbwechsel <hr> ... macht eine Trennlinie <hr width=75%> ... macht eine Trennlinie über 75% der Seitenbreite Natürlich lassen sich TAGs kombinieren: <u><big><font color=red><b>H</b>ello </font>Wo</big><small>rld</small></u> Bitte machen Sie immer alles TAGs wieder "zu", manche Brouwser reagieren sehr empfindlich. Schriftattribute sind aber mit Bedacht einzusetzen. Sonst sieht es bald recht grauslich aus. Manchmal kann es fürchterlich frustrierend sein, mit HTML zu arbeiten. Oft wollen Tabellen nicht wirklich, und Frames sehen sowieso immer anders aus, als man sich das vorstellt. Es ist dann manchmal recht hilfreich den Rahmen einzuschalten, um zu sehen, wie die Tabelle wiklich aussieht (Hint: Netscape Browser weigern sich standhaft Tabellen anzuzeigen, die nicht ordentlich geschlossen wurden). Und, und das ist wahrscheinlich das Grauslichste an der Webstrickerei, es ist schwer, es jedem Browser recht zu machen. Die Entscheidung, ob man User ohne grafikfähigen Browser (jaja, sowas gibts) im Regen stehen läßt, bleibt Ihnen überlassen. Hüten sollten sie sich jedoch davor, jedes mögliche und unmögliche Plug-In zu verwenden. Bringt wenig bis nichts, nur User, die Ihre Seite nie wieder besuchen werden. So long ... viel Spaß ! -- Tron |
|