Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03102.jsonl.gz/2273

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