Dieser html-kurs soll die Informatik-SchülerInnen meines Info-Kurses auf den Info-Quali vorbereiten. Das Werkzeug html soll einen in die Lage versetzten, die Programmierung von Web-Seiten zu verstehen und durchzuführen. Start: Öffne den Editor, schreibe und speichere die Datei ab. Wähle als Dateityp Alle Dateien und nenne deine Datei zum Beispiel: name.html (Abb. 1!) Hinter dem Punkt steht: html Grundsätze: Bei html arbeiten wir mit Tags. Tags schließen stehen zu Beginn unserer Befehle und Abb. 1 meistens auch wieder an deren Ende (Tag = engl.: Etikett). Ein Absatz wird z. B. wie folgt eingeschlossen: <p> Hier steht ein ganzer Absatz. Die Version mit Schrägstrich stellt immer das Ende einer Eingabe (hier des Absatzes) dar. <body> Hier ensteht eine Seite über Bäume. Los geht s: Schreibe immer gleich den Beginn und das Ende deiner Eingaben und fülle dann den Raum dazwischen auf. So unterlaufen dir weniger Fehler. Schreibe die Tags am Zeilenanfang, dann hast Du mehr Überblick über die Struktur. Zuerst tippe und darunter, damit schließt sich auch schon die gesamte Datei. Ab jetzt arbeite zwischen diesen beiden Tags. Der Kopf der Datei wird eingerahmt von und und darin taucht der Titel der Seite zwischen den Tags und auf. Dieser Titel erscheint im Farbstreifen des Browsers, nicht im eigentlichen Textfeld der Seite. (Abb, 2) Die zwischen den Tags liegenden Teile wurden hier und sollten auch beim Nacharbeiten wegen der Übersichtlichkeit eingerückt werden. Abb. 2 Im Gegensatz zum Kopf wird der Körper der Datei von <body> und eingerahmt. Dieser Teil stellt die eigentliche Seite dar. Der Text Hier entsteht eine Seite über Bäume wird später im Browser als Text sichtbar, Tags erscheinen dort nicht, sie dienen nur der Eingabe von Befehlen. (Abb. 2) Die als name.html abgespeicherte Datei müsste sich nun bei Doppelklick im Browser öffnen. Die Seite müsste so wie in Abb. 2 aussehen, allerdings natürlich ohne die beiden gelben Pfeile. Der erscheinende Text ist noch nicht als ein zusammengehörender Absatz definiert, der Zeilenumbruch im Editor erscheint im Browser nicht, da er nicht per Tag befohlen wurde.
Formatierung der Schrift und des Absatzes: <p> Hier beginnt nun ein Absatz, in dem einiges <em> kursiv geschrieben wird, </em> einiges erscheint in fetter Schrift, manches wurde unterstrichen <font face = Arial > und die Schriftart wechselt, </font > <font size = 5 color= red > Schriftgröße und Farbe auch. </font > Im Folgenden sind die wichtigsten Formatierungszeichen für die Schrift aufgeführt: Der Text im Editor (Kasten links) ergibt im Browser eine einzige Textzeile (Abb. 3). Jeder der eingesetzten Befehle wurde eingeschaltet <xyz> und später wieder ausgeschaltet </xyz>. Da <p> den ganzen Absatz definiert, umschließt es mit auch den ganzen Absatz, während die anderen Tags innerhalb des Textes zum Einsatz kommen. Zeilenumbrüche, die im Editor per Enter-Taste eingefügt werden, erleichtern evtl. die Lesbarkeit des Textes im Editor, sie kommen jedoch bei der mit dem Browser betrachteten Version nicht zur Geltung. (Abb. 3) Natürlich können einzelne Tags auch kombiniert werden, um ein Wort kursiv, fett und unterstrichen darzustellen: <em> kursiv unterstrichen </em>. Die Schrift kann z. B. auch wie folgt definiert sein: <font face= Arial size= 5 color= red > Dann werden Schriftart, Größe und die Farbe gleichzeitig definiert. Abb. 3 <p> Im Folgenden werden Absätze <br> - rechtsbündig, <br> - zentriert und <br> - linksbündig dargestellt. <p align = left > linksbündiger Text linksbündiger Text <p align = center > zentrierter Text zentrierter Text <p align = right > rechtsbündiger Text rechtsbündiger Text Die folgenden Tags (Kasten links) kümmern sich um die Ausrichtung der Absätze, deshalb taucht dabei immer das <p> mit auf. Insgesamt handelt es sich in dem Kasten um vier Absätze. Der Befehl <br> definiert einen Zeilenumbruch, er braucht nicht ausgeschaltet zu werden (Abb. 4). Er wurde bei der Aufzählung gleich am Anfang benutz, weil ansonsten im Browser erst am Rand des Bildschirmes ein Zeilenumbruch erscheinen würde. Abb. 4
Farbe, Überschriften, Bilder, Tabellen: <body bgcolor="lightgreen"> <font face="arial Narrow" size="6" color="green"> Die Editor-Seite stellt bis auf die Farbgebung eine Wiederholung des bereits Gelernten dar. Die Seite zeigt sehr schön, wie sich die Tags immer wieder um die durch sie definierten Text-Teile gruppieren. Dabei werden bestimmte Formatierungen jeweils ein und wieder ausgeschaltet. Die Farbe hellgrün erhält die Seite durch den erweiterten body-tag: <body bgcolor= lightgreen Farben können in html über den Hexadezimal-Code definiert werden. Dazu gibt es Hilfestellung im Internet. Die Programmierung versteht aber auch die englischen Namen vieler Farben wie z. B. red, blue, green, lightgreen, Im linken Beispiel wurde der Text zunächst zentriert, dann die Unterstreichung, der Fettdruck, die Schriftart, die Größe und die Farbe definiert. Danach wird wieder alles ausgeschaltet (Abb. 5). Abb. 5 <img src="baeume2.jpg" width="200" height="300"> Unterhalb der Überschrift soll nun ein Bild eingefügt werden. Wichtig ist dabei, dass das Bild im selben Ordner abgespeichert wird, in dem auch die Editor- Datei liegt. Das jpg-bild heißt Baeume2, die Größe des Bildes wird über die Weite (width= 200 ) und über die Höhe (height= 300 ) definiert (Abb. 6). Das Bild könnte auf folgende Art auch ins Zentrum der Seite gerückt werden: <p align= center > <img src="baeume2.jpg" width="200" height= "300"> Die gelben Pfeile, die im Editor natürlich nicht erscheinen, zeigen die später sichtbare Überschrift und das Bild im 2. Beispiel. Abb. 6
Tabellen: <table align="center" width="60%" border=2 bgcolor="green"> <tr> <font face="arial" size="4" color="blue"> Bäume auf der linken Seite <font face="arial" size="4" color="blue"> Bäume auf der rechten Seite </tr> <tr> Die gelben Pfeile erscheinen natürlich im Editor nicht, sie zeigen hier die eigentlichen Zelleninhalte der Tabelle. <img src="baeume1.jpg" width="200" height="300"> <p align="center" > <img src="baeume2.jpg" width="200" height="300"> </tr> </table> Der Kasten links zeigt nun die Editor-Version der in Abb. 7 gezeigten Tabelle. Zunächst wurde sie zentriert, width= 60% gibt an, welche Breite in Relation zur Gesamtbreite der Seite die Tabelle haben soll, border= 2 gibt den Tabellen-Rahmen ihre Dicke, bgcolor gibt der Tabelle die grüne Hintergrundfarbe. Der Tag <tr> definiert eine Tabellenzeile, davon tauchen zwei auf, <td> definiert jeweils eine Zelle, deren Breite jeweils 50% der Gesamttabelle betragen soll. Die und <body> Tags am Anfang und am Ende wurden in der Editor-Ansicht links weggelassen, ebenso wie die auf Seite 3 schon gezeigte Formatierung der Überschrift. Die Wellen-Struktur soll im Editor die Übersicht über die einzelnen Teile der Tabelle verbessern. Man könnte alles hintereinander tippen. Abb. 7
Trennlinien: Die gelben Pfeile bezeichnen nach der Reihe den Titel in der blauen Browserleiste die Überschrift einen Zeilenumbruch <br> und eine Trennlinie <hr> mit Angabe der Breite, Lage, Dicke und Farbe <body bgcolor="lightgreen"> <font face="arial Narrow" size="6" color="green"> <p align="left"> <font face="arial Narrow" size="4" color="black"> Auf der ganzen Welt gibt es Bäume. Sie kommen in den trockenen Savannen genauso vor wie in den tropischen Regenwäldern. Auf die unterschiedlichen Bedingungen der Lebensräume haben sie sich bestens angepasst. <br> Diese Seite soll einen Überblick über die verschiedenen Bäume aus aller Welt liefern. <hr width="70%" align="center" size="2" color="blue"> Bäume sind zum einen Pflanzen, die uns mit Sauerstoff versorgen, zum anderen fühlen wir uns im Umfeld von Bäumen einfach wohl. Der Kasten links zeigt nun die Editor-Version des unten (Abb. 8) gezeigten Textes. Zunächst erscheint der Titel (), der in der Abb. in der blauen Leiste des Browsers zu sehen ist, dann wird der Body definiert. Hier ist wieder die Farbe lightgreen angegeben. Danach wird der nächste Absatz als linkszentriert definiert, was nicht sein müsste, weil er ohne genauere Angaben auch nach links ausgerichtet würde. Dann wird die Schriftart, die Größe und die Farbe (black) angegeben. Der Textfluss wird einmal durch einen gewollten Zeilenumbruch <br> unterbrochen und einmal durch eine blaue Trennlinie. Diese wird durch <hr> definiert. Das Beispiel zeigt, dass hier wieder die Begriffe width, align, size, und color zum Einsatz kommen. Sie definieren die Breite der Linie in Relation zur Gesamtbreite der Seite, die Ausrichtung (hier zentriert), die Dicke und die Farbe der Linie (hier blau). Nur ein <hr> ohne weitere Angaben würde eine dünne schwarze Linie von ganz links nach ganz rechts generieren. Die Anführungszeichen können bei manchen der Angaben (z. B. size=2) weggelassen werden, ich empfehle sie jedoch immer zu setzen, weil sie dann nie vergessen werden. Abb. 8
Links zu Webseiten, email-adressen oder Bildern: <body bgcolor="lightgreen"> <font face="arial Narrow" size="6" color="green"> <p align="left"> <font face="arial Narrow" size="4" color="black"> Die gelben Pfeile bezeichnen die beiden Links. Der erste führt zu einer Internetseite, der zweite führt zu eine email-adresse. Diese Seite soll die Lust wecken, sich auch weiter mit den <a href="http://www.baumschule.de">bäumen dieser Welt</a>, allen voran den Laubbäumen, zu beschäftigen. Zur Klärung weiterer Fragen bitte ich euch einfach eine email an <a href="mailto:baumschule@baum.de">kontakt Baumschule</a> zu schicken. Der Kasten links zeigt nun die Editor- Version des unten (Abb. 9) gezeigten Textes mit den beiden in blau und unterstrichen dargestellten Links. Ich möchte auch hier noch einmal auf die übersichtliche Art der Darstellung hinweisen. Aufgrund der verschiedenen Einrückungen, die hernach im Browser nicht mehr erscheinen, wird die Editor-Ausgabe übersichtlicher. Abb. 9 Link zu einer Web-Seite und einer email-adresse : Die beiden Links werden jeweils mit <a href= Name der Adresse.de > geöffnet. Dann folgt der Text oder auch das Bild etc. der im Browser erscheinen soll. Die Links werden dann wieder durch </a> geschlossen <a href="http://www.baumschule.de">bäumen dieser Welt</a> Öffnung Name der Adresse.de erscheindender Text Schließung <a href="mailto:baumschule@baum.de">kontakt Baumschule</a>