Bitte aktivieren Sie JavaScript in Ihren Browsereinstellungen, damit die Seiten korrekt dargestellt werden können.

Lektion 02: Deine Webseite einrichten

Das Gerüst Deiner Webseite steht also. Nun kannst Du einrichten. Du fügst ein Bild dazu, einen längeren Text und lernst etwas über HTML-Tags, über Attribute und Werte. Am Schluss dieser Lektion hast Du eine Webseite index.html, die sich bereits sehen lässt.

Du wirst jetzt an Deinem Dokument index.html weiterarbeiten und es in einem einfachen Texteditor oder in Word öffnen. Damit Word oder ein anderes Textbearbeitungsprogramm das Dokument nicht als HTML-Datei sondern als reine Textdatei öffnet, musst Du die Endung html von index.html wieder in txt ändern. Das Dokument heisst also wieder index.txt. Nach getaner Arbeit wirst Du es dann wieder in index.html zurückändern, damit Dein Webbrowser weiss, dass er dieses Dokument als HTML-Seite darstellen muss.

Ein Webbrowser verhält sich also anders als ein Textverarbeitungsprogramm. Sieh Dir noch einmal den Code auf Deiner Seite an:

<!DOCTYPE html>
<html>
    <head>
       
    </head>
    <body>
       
        Hallo Welt!
    </body>
</html>

Es sieht so aus, als hätte der Webbrowser hier einiges überlesen. Schliesslich zeigte er Dir in Lektion 01 lediglich die Worte Hallo Welt!. Und der andere Text auf Deiner Seite wie <html> oder <body>? Diese Tags, so nennt man diese Markierungen, hat der Webbrowser sehr wohl zur Kenntnis genommen. Denn das sind Anweisungen, die er gut versteht. Der Webbrowser kann HTML! Für ihn sind alle Zeichen in spitzen Klammern Befehle, die er befolgt.

Du lernst jetzt, dem Webbrowser Befehle zu erteilen.

Bestimmt ist Dir aufgefallen, dass jeder Tag (das Wort kommt aus dem Englischen und bedeutet hier "Auszeichner" oder "Ettikett") mit Ausnahme von <!DOCTYPE> zweimal vorkommt. <head> kommt einmal so vor und dann nochmals so: </head>. Tags umschliessen also einen Bereich. Das siehst Du beim <body>-Tag. <body> ist der öffnende Tag, dann kommt der Text Hallo Welt! und dann der schliessende Tag mit dem Slash </body>. Slash ist ein Schrägstrich. Und das \ ist ebenfalls ein Schrägstrich, jedoch ein Back-Slash (wenn wir schon dabei sind). Wenn Du alles auf eine einzige Zeile schreibst, wird noch deutlicher, wie die zwei body-Tags den Text umschliessen:

<body>Hallo Welt!</body>.

Mach den Versuch: Schreibe in der Datei index.txt alles auf eine Zeile. Speichere die Datei als index.html und schaue sie Dir mit einem Doppelklick im Webbrowser an:

<!DOCTYPE html><html><head></head><body>Hallo Welt!</body></html>

Nimm Dir die Mühe, genau zu verstehen, warum <html> und </html> in diesem Bandwurm weit auseinanderliegen, <head> und </head> jedoch aufeinander folgen, und Du hast etwas ganz Wesentliches von HTML begriffen!

Wenn Du keine Tippfehler gemacht hast, zeigt der Browser ohne zu meckern wiederum das Hallo Welt! und nichts sonst. Die Leerräume in Deinem Dokument und die Einzüge, die ganze Gliederung sind also nicht für den Webbrowser sondern für Dich. Damit Du bei allen Tags und Texten, die in Deinem HTML-Dokument stehen, nicht die Übersicht verlierst. Und damit Du vergessene oder überzählige < oder /> und alle andere Tippfehler rascher entdeckst.

Ein Bild einfügen

Versetze Dein index.txt-Dokument jetzt wieder in den Anfangszustand mit allen Tags und dem Ausgabetext "Hallo Welt!" sauber gegliedert wie es am Anfang dieser Lektion ausgeschaut hat.

Du wirst jetzt den Text Hallo Welt! ändern in: Ich mache mit beim JPO weil... Dann erteilst Du dem Webbrowser den Befehl, direkt vor diesem Text ein Bild anzuzeigen.

Suche zunächst auf Deiner Festplatte ein Foto von Dir im .jpg (oder .jpeg)-Format und kopiere dieses Bild in den Ordner ausbildung. Speichere es dort unter dem Namen ich.jpg

Wie Du dem Webbrowser die entsprechenden Befehle erteilst, siehst Du im folgenden Code.:

<!DOCTYPE html>
<html>
    <head>
   
    </head>
    <body>
        <img src="ich.jpg" alt="Das bin ich!"/>
        Ich mache mit beim JPO weil...
    </body>
</html>

Wir haben also zwischen <body> und </body> neuen Code eingefügt. Speichere die Datei als index.html und schau sie Dir im Browser an.

Du hast alles richtig gemacht, eventuell den Code-Text sogar kopiert und das Bild wird trotzdem nicht angezeigt? Dann liegt das Bild nicht im gleichen Ordner wie die Datei index.html. Später wirst Du lernen, wie Du Bilder, die in einem anderen Ordner liegen (oder sogar im Web auf einem anderen Server) anzeigen lassen kannst. Im Moment funktioniert die Bildanzeige jedoch nur, wenn das Bild im gleichen Ordner liegt wie die index-Datei.

Das sieht aber komisch aus...

Wenn ich meine Datei index.html im Webbrowser anschaue, wird sofort klar: Das Bild wird in der Originalgrösse dargestellt und damit viel zu gross. Eventuell ist Dein Bild etwas kleiner. Ich zeige Dir jetzt trotzdem, wie Du die Grösse der Bilddarstellung beeinflussen kannst. Du musst dem Browser einen präzisieren Befehl erteilen und ihm auch noch sagen, wie gross Du das Bild dargestellt haben willst.

Hinweis: Bei Bildern ist es so, dass Du sie verkleinern kannst und sie immer noch gut (oder sogar besser) aussehen. Beim Vergrössern werden sie jedoch sofort pixelig. Du brauchst also für das Internet ein Bild, das im Original mindestens so gross ist, wie es Du dargestellt haben möchtest.

Wie jedoch kannst Du herausfinden, wie gross ein Bild ist? Unter Windows kannst Du das Bild ich.jpg, das jetzt in Deinem Ordner ausbildung liegen sollte, im Explorer anklicken, dann rechte Maustaste und im sogenannten Kontextmenue, das jetzt angezeigt wird, den Kontextmenue-Punkt "Eigenschaften" wählen. Unter "Details" findest Du die Angaben über Breite und Höhe in Pixel.

Beim Mac musst Du dich selber schlau machen. Aber ich vermute, es funktioniert ähnlich. Eine andere Möglichkeit wäre, das Bild in irgend ein Bildbearbeitungsprogramm zu laden und dort die gesuchten Angaben zu finden.

Mein ich.jpg ist 4320 Pixel breit und 3240 Pixel hoch (kann man auch so angeben: 4320x3240). Ich bräuchte jedoch ein Bild von, sagen wir mal, 400 Pixeln in der Breite.

Die Bildgrösse angeben

Du lernst jetzt, dem img-Tag, der für die Anzeige des Bildes zuständig ist, eine weitere Eigenschaft hinzuzufügen. Ich komme gleich dazu, möchte Dir zuerst noch den img-Tag  näher erklären. Ich mache das hier in aller Ausführlichkeit, damit ich später voraussetzen kann, dass Du das Prinzip grundsätzlich verstanden hast und auch auf andere Tags anwenden kannst.

Im HTML-Code ist das Bild so in die Webseite eingebunden:

<img src="ich.jpg" alt="Das bin ich!"/>

Also ein neuer Befehl an den Webbrowser mit einem <img-Tag und einer Anweisung, welches Bild der Webbrowser anzeigen soll: src="ich.jpg". Diesmal findest Du keinen schliessenden Tag wie zum Beispiel </img>. Du findest aber den Slash, wie er sonst in schliessenden Tags vorkommt und die schliessende spitze Klammer: />. Hier hast Du es mit einem selbstschliessenden Tag zu tun. Der Tag schliesst sich also mit dem Slash / und der Klammer > gleich wieder selber.

Ohne jede Eigenschaft sähe der Tag so aus <img />. Dazu kommen jetzt zwei Eigenschaften oder Attribute, denen je ein Wert zugewiesen ist: src="ich.jpg" und alt="Das bin ich". Wobei src die Eigenschaft oder das Attribut ist und ich.jpg ist der Wert, den ich (in Anführungszeichen) zuweise. Für alt="Das bin ich!" gilt das Gleiche.

Was meint die alt-Eigenschaft oder das alt-Attribut? Damit wird eine Angabe über einen Alternativtext zum Bild gemacht, der angezeigt wird, wenn das Bild nicht gefunden werden kann. Dieses Attribut ist Pflicht, Du darfst es also nicht weglassen. Blinde lassen sich Webseiten vom Computer vorlesen und diese Alternativtext-Angabe ist für sie besonders wichtig. Wenn Du die sogenannte Barrierefreiheit im Internet ernst nimmst, schreibst Du vielleicht sogar: alt="Dieses Bild zeigt mich inmitten meiner Rindli. Das Limousin-Kalb ist auf der Weide geboren."

Jetzt folgt der Code-Ausschnitt mit den zwei neuen Attributen für die Bildgrösse: width und height (Breite und Höhe).

<img src="ich.jpg" width="432" height="324  alt="Dieses Bild zeigt mich inmitten meiner Rindli. Das Limousin-Kalb ist auf der Weide geboren." />

Hier ist der ganze Code der index-Seite in der Übersicht:

<!DOCTYPE html>
<html>
    <head>
   
    </head>
    <body>
        <img src="ich.jpg" width="432" height="324"
          alt="Dieses Bild zeigt mich inmitten meine Rindli.
          Das Limousin-Kalb ist auf der Weide geboren." />
         
          Ich mache mit beim JPO weil...
    </body>
</html>

Diese Seite im Webbrowser: beispiel02.html (öffnet sich in einem eigenen Fenster).

Wie komme ich auf die Masse width="432" und height="324"? Du erinnerst Dich, die Originalmasse waren 4320 Pixel in der Breite und 3240 Pixel in der Höhe. Ich wollte jedoch ein Bild, das ungefähr 400 Pixel breit ist.

Wenn Du die Originalmasse eines Bildes änderst, bist Du nicht ganz frei dabei. Du musst auf das Verhältnis von Breite und Höhe Rücksicht nehmen, sonst erscheint das Bild verzerrt. Ich habe es mir also ganz einfach gemacht. Ich habe die Breite und die Höhe durch 10 geteilt. Das Bild behält so sein Seitenverhältnis und ist jetzt 10 Mal kleiner. Glück für mich, dass die Originalbreite bei 4320 Pixeln lag. So komme ich nach der Division durch 10 in die Nähe der von mit gewünschten 400 Pixel.

Die Rechnung würde etwas komplizierter, wenn ich genau 400 Pixel in der Breite haben wollte. Ich müsste zuerst herausfinden, wie oft 400 Pixel in 4320 Pixeln enthalten ist (10.8 mal). 10.8 wäre dann der Divisor, durch den ich Breite und Höhe teilen müsste. Das Bild würde dann 10.8 mal kleiner.

Tja, das ist immer noch nicht ganz das, was ich haben möchte...

Das Bild ist jetzt in der gewünschten Grösse. Doch der Text "Ich mache mit beim JPO weil..." sollte eigentlich auf der nächsten Zeile stehen. Und ich habe ihn doch im Code auch auf eine neue Zeile gesetzt.

Du hast es in dieser Lektion bereits einmal gesehen: Der Browser lässt sich von meinen Zeilenumbrüchen im Code nicht beeindrucken. Um ihn dazu zu zwingen, die Zeile tatsächlich zu umbrechen, muss ich es ihm in seiner Sprache sagen: <br />. Das ist der HTML-Tag für einen Zeilenumbruch. Er ist selbstschliessend.

Es folgt jetzt der definitive Code für diese Lektion.

<!DOCTYPE html>
<html>
<head>
    <title>JPO-Mitglieder stellen sich vor</title>
    <!-- Das ist ein Kommentar -->
</head>
    <body>
        <img src="ich.jpg" width="432" height="324"
            alt="Dieses Bild zeigt mich inmitten meine Rindli.
            Das Limousin-Kalb ist auf der Weide geboren." />
        <br />
        <h3>Ich mache mit beim JPO weil...</h3>
        <p style="width: 500px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoqu
            penatibus et magnis
            dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
            pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
            Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
            In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
            felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
            Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
          <p style="width: 500px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
            penatibus et magnis
            dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
            pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
            Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
            In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
            felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
            Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
            <!--<p>-->Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
            penatibus et magnis<!--</p>

            <!-- Das hier am Schluss vorhin ist eine Demonstration, was passiert, wenn Du einen
            Tag auskommentierst. -->
</body>
</html>

Du findest hier neue Tags von denen bisher nicht die Rede war: <title></title>, <h3></h3> und <p></p> mit einer ebenfalls neuen Eigenschaft. Finde selber haraus, was diese Befehle bedeuten, wenn sie vom Browser umgesetzt werden. Du kannst das tun, indem Du die Tags entfernst und dir anschaust, wie die Seite ohne diese Tags aussieht. Am Schluss gebe ich Dir auch noch Hinweise, wo im Netz du weitere Informationen zu diesen Tags findest.

Du kannst also experimentieren, indem Du Tags ausser Kraft setzst. Dazu musst Du die Tags nicht löschen. Du kannst sie auskommentieren. Was meint das?

Es ist grundsätzlich sinnvoll, den Code zu kommentieren, damit Du später wieder weisst, warum Du was gemacht hast. Aber auch, damit sich andere, die ebenfalls an diesem Code arbeiten, besser zurechtfinden. Das ist bei unserem Projekt besonders wichtig, weil im Prinzip alle JPO-Mitglieder, die an der Gestaltung der JPO-Website arbeiten, auch auf Deinen Code Zugriff haben und vielleicht später einmal das eine oder andere Detail anpassen müssen.

Diese Kommentare sollten jedoch nicht auf der Webseite im Browser erscheinen. Auch dafür gibt es einen Tag: <!- -  , der so geschlossen wird  - ->. Alle Befehle, die derart eingeschlossen sind, ignoriert der Browser.

<!-- Das ist ein Kommentar -->

Einen Tag auskommentieren heisst also, den öffnenden und den schliessenden Tag um den auszuschliessenden Tag legen, damit er für den Browser unsichtbar wird und er diesen Tag bei der Darstellung der Seite nicht mehr berücksichtigt.

Auch ein blinder Text legt manchmal ein Ei

Zum komischen Text, der vom <p>-Tag eingeschlossen wird: Das ist sogenannter Blindtext. Grafiker greifen zu Blindtext, wenn sie den richtigen Text noch nicht haben und trotzdem sehen möchten, wie sich der Text auf der Seite anordnet. Solchen Blindtext musst Du nicht selber eintippen. Es gibt Internetseiten, die Dich dabei unterstützen. Du kannst dort Blindtext markieren und per Copy und Paste (ausschneiden und einfügen) an der gewünschten Stelle in Deinem Cod integrieren. Eine solche Seite ist zum Beispiel http://www.blindtextgenerator.de/

Auf jeden Fall ist unser Code bereits etwas umfangreicher und die Seite macht bereits einen guten Eindruck, finde ich.

Die Beispielseite: beispiel03.html

Hinweise auf weiterführende Informationen

Hier einige Links zur Seite SELFHTML. Auch bei längerer Beschäftigung mit HTML habe ich nicht alle korrekten Schreibweisen auswendig präsent. Die Seite SELFHTML ist für mich ein sehr hilfreiches Handbuch zu HTML:

zu <img />
zu <title></title>
zu <h3></h3>
zu <p></p>

 

So gehst Du online

Um Deine Seite auf den JPO-Server hochladen zu können, brauchst Du einige Angaben wie einen Servernamen und ein Passwort. Wenn Du mir ein Mail schickst und mich darüber informierst, wie Du heisst, werde ich nach Rücksprache mit dem JPO-Vorstand Dir alle notwendigen Angaben zusenden.

Die Angaben zu unserem Server werden wir selbstverständlich nicht hier auf dem Internet publizieren. Deshalb sind wir in unserem Lehrgang bereits an einem Punkt, wo Du dich entscheiden musst, ob Du weiterhin dabei bleibst oder nicht. Denn die nächste Lektion mit den Instruktionen, wie Du auf den JPO-Server zugreifen und Deine Webseite hochladen kannst, wird nur mit einem Passwort zugänglich sein. Und das bekommst Du, wenn Du mir das Mail schickst, das ich vorhin erwähnt habe.

Dieser Lehrgang wird fortgesetzt, wenn sich mindestens 3 JPO-Mitglieder dazu entscheiden können, weiterzumachen.

© Felix Baumgartner | Graben 111 | 3673 Linden | www.lebensart.me