Grundlagen der WWW-Nutzung und WWW-Programmierung. Alfred Wassermann

Grundlagen der WWW-Nutzung und WWW-Programmierung Alfred Wassermann

Inhaltsverzeichnis 5 Vorlesung 2 5.1 Weitere Tags............................. 2 5.1.1 Textausrichtungen und Absatzgestaltung......... 3 5.1.2 Weitere Möglichkeiten zur Ausrichtung........... 3 5.1.3 Trennlinien.......................... 4 5.2 Aufzählungslisten........................... 4 5.2.1 Geordnete Listen....................... 4 5.2.2 Ungeordnete Listen...................... 5 5.2.3 Definitionslisten, etc...................... 5 5.3 Kommentare in HTML........................ 5 5.4 Vorformatierter Text......................... 6 5.5 Farben in HTML........................... 7 5.5.1 Das RGB-Farbmodell.................... 7 5.6 Einbinden von Bildern........................ 8 1

Kapitel 5 Vorlesung Übungsblatt 04: 5.1 Weitere Tags Nachdem wir in der letzten Vorlesung die ersten Tags kennengelernt haben, wiederholen und ergänzen wir diese Befehle etwas systematischer. Zuerst die komplette Liste an logischen Textauszeichnungen: <em>: betonter Text <strong>: stark betonter Text <code>: wird als Quellcode interpretiert <cite>: Zitat <address>: Formatierung von email-adressen (etwas veraltet) <samp>: Beispiel <kbd>: Tastatureingabe <var>: Variable Und hier die komplette Liste an physischen Textauszeichnungen: <b>: fettgedruckt <i>: kursiv <u>: unterstrichen <tt>: nichtproportional Schreibmaschinenschrift <blink>: Raten Sie selbst. 2

<strike>: durchgestrichenener Text <big>: größerer Text <small>: kleinerer Text <sup>: hochgestellter Text <sub>: tiefgestellter Text 5.1.1 Textausrichtungen und Absatzgestaltung <h1>...</h1>, <h2>...</h2>,..., <h6>...</h6>: Überschriften <p>: Absatz, soll, muß aber nicht beendet werden. <blockquote>: Zitat in eigenem Abschnitt <br>: Neue Zeile erzwingen (besitzt kein End-Tag) <nobr>... </nobr>: Zeilenumbruch in diesem Bereich verhindern. (kein offizielles HTML-Kommando) <wbr>: Zeilenumbruch in Wörtern erlauben. (kein offizielles HTML- Kommando) : Nonbreaking space, ein explizit gesetztes Leerzeichen, bei dem nicht umgebrochen werden darf. Der Absatz-Befehl und die Überschriften können Attribute zur Textausrichtung enthalten: align=left: Linksbündig (Standard) align=right: Rechtsbündig align=center: zentriert align=justify: Blocksatz (links- und rechtsbündig zugleich) 5.1.2 Weitere Möglichkeiten zur Ausrichtung Oftmals ist es erwünscht mehrere Bereiche (Absätze und Überschriften) zugleich auszurichten, also etwa zu zentrieren. Dazu gibt es den Befehl <center>... </center>. Alles was darin eingeschlossen ist, wird zentriert dargestellt. Dieser Befehl gilt allerdings als veraltet. Moderner und allgemeiner ist der Befehl <div>... </div> (div steht für Division). Der durch diesen Befehl eingeschlossene Bereich wird gleichartig ausgerichtet. Der Befehl <div> kann mit den bereits bekannten Attributen <div align=...> zur Textausrichtung versehen werden. Wir werden später noch weitere Attribute kennenlernen. 3

5.1.3 Trennlinien Nochmals die bereits vertraute Trennlinie: <hr>. Dieser Befehl besitzt kein End- Tag! Standardmäßig wird bei Netscape und Internet Explorer diese Trennlinie 3-dimensional dargestellt, d.h. sie erscheint als ob sie in das Fenster eingraviert wäre. Als Attribute sind möglich: <hr noshade>: 2-dimensionales Aussehen <hr width=...>: Breite der Trennlinie festlegen. Möglich sind absolute Werte in Pixel: z.b. <hr width=200>, aber auch relative Werte in Bezug auf die Fensterbreite wie z.b. <hr width=70%>. <hr size=...>: Höhe (Dicke) der Linie in Pixel. Der Standardwert ist 2 Punkte. <hr align=...>: Der übliche Ausrichtungsbefehl. Dieser ist aber nur sinnvoll in Verbindung mit width=..., da die Linie sich ansonsten immer über die gesamte Bildschirmbreite erstreckt. Die Standardeinstellung ist zentriert. 5.2 Aufzählungslisten Es gibt 3 verschiedene Typen von Aufzählungslisten: 1. geordnete Listen, die mit 1., 2.,... durchnumeriert sind. 2. ungeordnete Listen, die alle nur einen Markierungspunkt oder dergleichen enthalten. 3. Definitionslisten, wie etwa Wörterbücher oder Lexika. 5.2.1 Geordnete Listen Geordnete Listen werden durch das Kommando <ol>... </ol> (ordered list) erzeugt. Jeder Listeneintrag (engl. list item) wird durch das Kommando <li> erzeugt. Das End-Tag </li> ist nicht zwingend erforderlich, aber sauberer. Verschachtelung von Listen (sowohl ungeordneter als auch geordneter) ist zwar möglich. Es gibt aber keine Gesamtnumerierung in HTML, wie etwa 1, 1.1, 1.1.1. Mit Hilfe des Attribute type kann bestimmt werden, mit welchen Symbolen durchnumeriert wird. Es gibt: <ol type=a>: Alphabetisch, groß. <ol type=a>: Alphabetisch, klein. <ol type=i>: Römisch, groß. <ol type=i>: Römisch, klein. 4

Man kann auch die Startwerte festlegen, oder Werte mitten in der Aufzählung beeinflussen: <ol start=100>: Start mit Wert 100. <li value=10>: dieser Eintrag wird mit 10 numeriert, der darauffolgende mit 11,... 5.2.2 Ungeordnete Listen Ungeordnete Listen werden durch das Kommando <ul>... </ul> (unordered list) erzeugt. Es sind drei verschiedene Aufzählungszeichen möglich: <ul type=disc>: gefüllter Punkt (Standard). <ul type=circle>: nichtgefüllter Punkt, Kreis. <ul type=square>: Quadrat. 5.2.3 Definitionslisten, etc. Es gibt zwei alte Befehle, die beinahe in Vergessenheit gerieten, aber evtl. wieder aktuell werden könnten. <menu><li>...</menu>: Menüliste, <dir><li>...</dir>: Verzeichnisliste. Zu beachten ist dabei, daß Menülisten keine absatzerzeugenden Befehle enthalten dürfen. Definitionslisten sind für Glossare gedacht. Netscape verwendet sie z.b. bei der internen Bookmark-Verwaltung. Der Aufbau ist folgendermaßen: <dl> <dt>begriff</dt> <dd>beschreibung des Begriffs</dd> <dt>weiterer Begriff</dt> <dd>beschreibung</dd> </dl> 5.3 Kommentare in HTML Kommentare sind in jeder Programmiersprache wichtig: Der Autor fügt Bemerkungen ein, die nur für ihn wichtig sind, die jedoch nicht im Browser sichtbar werden. Dies wird auch verwendet, um zeitweise gewisse Passagen abzuklemmen, unsichtbar zu machen, auszukommentieren. Die Browser überlesen alles, was auf die Zeichenfolge <!-- folgt, bis zu -->. Die Konvention ist, bei mehrzeiligen Kommentaren, den Kommentar mit //--> zu beenden. Beispiel 5

Laufender Text... <!-- Ab hier ist nichts mehr im Browser sichtbar... //--> Hier wird der Text wieder eingeschaltet. 5.4 Vorformatierter Text Häufig kommt es vor, daß Text bereits vorformatiert vorliegt, zumindest was die Zeilenumbrüche betrifft, und diese Formatierung soll übernommen werden. Dies tritt meist auf, wenn Programmtext oder dergleichen angezeigt werden soll. Dazu gibt es den Befehl <pre>... </pre>. Beispiel: <pre> void design_scale(coeff **b, int s, int z, int KMz, long c0, long c1) { int i,j; for (i=0;i<s;i++) { for (j=1;j<=kmz;j++) b[i][j].c *= c0; if (inequalities==1) { if (i==0) { for (j=kmz+1;j<z-1;j++) b[i][j].c *= c1; } else { for (j=kmz+1;j<z-1-slackvar;j++) b[i][j].c *= c1; } } else { for (j=kmz+1;j<z-1;j++) b[i][j].c *= c1; } b[i][z].c *= c1; } return; } </pre> Achtung: HTML-Befehle werden in <pre>... </pre> interpretiert. Deshalb muß bei < und > ein Trick angewandt werden: alle < müssen durch die Zeichenfolge < (lower than) ersetzt werden. alle > müssen durch die Zeichenfolge > (greater than) ersetzt werden. Es gibt noch drei alte Befehle, die mehr oder weniger das gleiche bewirken: <xmp>... </xmp>, <listing>... </listing> und <plaintext>... </plaintext>. Diese Befehle werden aber aus der offiziellen HTML-Sprachdefinition verschwinden. 6

5.5 Farben in HTML Farben können in HTML auf zwei Arten angegeben werden: 1. durch Angabe eines (englischen) Farbnamens. Hier gibt es 16 Grundfarben, die bei Netscape und Internet Explorer übereinstimmen. Daneben gibt es spezielle Farbnamen, die ebenfalls beide Browser interpretieren, siehe dazu die Tabelle in Farbtabelle 2. durch Angabe jeweils eines Zahlenwerts für die Grundfarben Rot, Grün und Blau, d.h. ein sogenannter RGB-Wert. Mehr dazu später. Im body-tag können Attribute gesetzt werden, die die Farbgestaltung des gesamten Dokumentes beeinflussen. Folgende Attribute (auch in Kombination) sind möglich: <body bgcolor=...>: Hintergrundfarbe (background color) <body text=...>: Standardtext-Farbe <body link=...>: Farbe von Verweisen <body vlink=...>: Farbe von bereits besuchten Verweisen (visited link). <body alink=...>: Farbe von Verweisen während des Anklickens (activated link). 5.5.1 Das RGB-Farbmodell HTML verwendet das sogenannte RGB-Farbmodell. Jede Farbe läßt sich aus den drei Grundfarben Rot (R), Grün (G) und Blau (B) zusammensetzen. (Glücklicherweise sind die Anfangsbuchstaben der englischen Bezeichnung für diese 3 Farben (red, green, blue) die gleichen). In HTML sind für jede dieser 3 Grundfarben 256 Abstufungen vorgesehen, d.h. insgesamt gibt es 256 256 256 = 2 8 2 8 2 8 = 2 24 16.7 Mill. verschiedene Farben. Wir sagen auch die Farbtiefe ist 24 Bit. Jede einzelne der drei Grundfarben wird als Zahl von 0 bis 255 im Hexadezimalsystem dargestellt. Hexadezimalsystem (16er-System) klingt anfangs etwas abschreckend, ist aber nicht schwer zu durchschauen: Statt 10 Ziffern (0, 1,..., 9) wie im üblichen Dezimalsystem gibt es im Hexadezimalsystem 16 Ziffern: 0, 1,..., 9, A, B, C, D, E, F. Die fehlenden Zahlen werden einfach durch Buchstaben aufgefüllt. Während man mit zwei Ziffern im Dezimalsystem 10 10 = 100 Zahlen darstellen kann, ist es im Hexadezimalsystem möglich mit 2 Ziffern 16 16 = 256 Zahlen darzustellen. Also genau das, was wir für RGB brauchen. 7

D H D H 0 0 16 10 1 1 17 11 2 2 18 12 3 3 19 13 4 4.. 5 5 30 1E 6 6 31 1F 7 7 32 20 8 8.. 9 9 160 A0 10 A 161 A1 11 B.. 12 C 254 FE 13 D 255 FF 14 E 15 F Hexadezimalzahlen werden in HTML durch ein vorangestelltes #-Zeichen gekennzeichnet. Also: <body bgcolor=#000000> für einen schwarzen Hintergrund oder <body bgcolor=#ff0000> für einen roten Hintergrund. Hinweise zur Umrechnung: Will man von Hexadezimal nach Dezimal umrechnen, so nimmt multipliziert man die linke Ziffer und addiert die rechte Ziffer: #5E 5 16 + 14 = 94 #CA 12 16 + 10 = 202 Will man die Zahlen von 0 bis 255 von Dezimal nach Hexadezimal umrechnen, so teilt man einfach die Zahl durch 16 mit Rest. Das Ergebnis ist die linke Ziffer, der Rest ergibt die zweite Ziffer. 94/16 = 5 Rest 14 #5E 231/16 = 14 Rest 7 #E7 5.6 Einbinden von Bildern Bilder können in HTML auf 2 Arten eingebunden werden. Neuere Browser können üblicherweise 3 Bildformate in den Text einbinden: GIF JPEG PNG. 8

Die 1. Möglichkeit ist, ein Bild als Hintergrundbild einzubinden. Dazu wird im body-tag angegeben: <body background="xxx.gif"> Der Bildname sollte in Anführungszeichen gesetzt werden. Dies ist insbesondere wichtig, wenn der Dateiname Leerzeichen enthält. Man sollte auch von Anfang an darauf bedacht sein, daß beim Dateiname Großund Kleinschreibung korrekt sind. Windows-Systeme unterscheiden zwar bei Groß- und Kleinschreibung, beharren aber nicht auf der korrekten Schreibweise. Beim Testen einer Seite auf einem Windows-Rechner wird kann ein Bild deshalb korrekt eingebunden sein. Stellt man die Datei jedoch auf einen Web-Server, so kann es zu bösen Überraschungen führen, da diese meist unter Unix betrieben werden und sehr genau Groß-/Kleinschreibung unterscheiden. Das Einbindungskonzept ist nun viel weitreichender als in dem obigen Beispiel deutlich wird. Man kann eine beliebige Bilddatei aus dem Internet einbinden, indem man einen URL (Uniform-Resource-Locator) angibt. <body background="http://did.mat.uni-bayreuth.de/~alfred/www-programmierung/starfiel.gif" > Der Fensterhintergrund wird dann mit dem angegebenen Bild parkettiert. Die andere Möglichkeit ist, ein Bild als eigenständiges Objekt im laufenden Text anzuzeigen. Auch hier besteht wieder die Möglichkeit einen kompletten URL anzugeben. <img src="robet.jpg"> <img src="http://did.mat.uni-bayreuth.de/einstein.jpg"> Hier gibt es nun eine ganze Reihe von Attributen, mit denen das <img>-tag versehen werden kann. <img src="..." alt="beschreibung des Bildes">: Dieser Text wird angezeigt, falls der Browser keine Bilder einliest, bzw. wenn der Betrachter mit der Mouse über das Bild fährt. <img src="..." border=10>: Ein Rahmen in der angegebenen Dicke (in Pixel) wird um das Bild gezogen. <img src="..." width=300>: Breite des Bildes in Pixel <img src="..." height=300>: Höhe des Bildes in Pixel. Wird nur eines der beiden Attribute height oder width angegeben, so wird das Bild in der anderen Richtung proportional skaliert. Werden beide Attribute angegeben, so wird das Bild evtl. verzerrt. Die Angabe beider Attribute ist bei Seiten, die viele Bild-Verweise enthalten zu empfehlen. Denn der Browser kann dann bevor das Bild tatsächlich empfangen wurde, schon Platz für das Bild reservieren. D.h. die Seite kann schon aufgebaut werden. 9

Achtung: Verkleinert man die Breite oder Höhe eines Bildes, so ändert dies nichts an der Anzahl der Bits, die übertragen werden müssen. Es wird immer zuerst das komplette Bild übertragen. Erst danach bringt der Browser das Bild auf die gewünschte Größe. <img src="..." align=top>, <img src="..." align=middle>, <img src="..." align=bottom>: Diese vertikalen Versionen des align- Attributs beziehen sich auf Bildbeschriftungstext. Ist eine dieser 3 Ausrichtungsoptionen gesetzt, so wird der dem <img>-tag unmittelbar folgende Text als Beschriftungstext interpretiert. Das Attribut align kann auch für die Einbettung des Bildes in den laufenden Text verwendet werden: <img src="..." align=left>: Das Bild ist am linken Fensterrand, der Text fließt rechts um das Bild herum. <img src="..." align=right>: Das Bild ist am rechten Fensterrand, der Text fließt links um das Bild herum. Das Bild zentrieren und beidseitig von Text umfließen lassen ist noch nicht möglich. Will man zwar das Bild von Text umfließen lassen, aber danach bewußt den Textumfluß abbrechen und unter dem Bild in voller Textbreite weiterschreiben, so verwendet man den Befehl <br clear=all> Hat dies nicht den gewünschten Effekt, so kann man auch mit <br clear=left> oder <br clear=right> experimentieren. Den Abstand des Textes von einem Bild kann man einstellen mit <img src="..." hspace=...>: horizontaler Abstand in Pixel, sowohl links als auch rechts vom Bild. <img src="..." vspace=...>: vertikaler Abstand in Pixel, sowohl über als auch unter dem Bild. 10

Literaturverzeichnis [1] Born, Günter: Referenzhandbuch Dateiformate, Addison-Wesley (1996). [2] Bruns, B., Gajewski, P.: Multimediales Lernen im Netz, Springer-Verlag (1999). [3] Bush, Vannevar: As we may think, in The Atlantic Monthly, July 1945, siehe http://www.w3.org/history/1945/vbush/ [4] Haaß, Wolf-Dieter: Handbuch der Kommunikationsnetze, Springer-Verlag (1997). [5] Hauben, Michael: History of ARPANET, siehe http://www.dei.isep.ipp.pt/docs/arpa-contents.html [6] Klau, Peter: Das Internet, Thomson Publishing (1995). [7] Krol, Ed: Die Welt des Internet, O Reilly-Verlag (1995). [8] Levine, John, Young, Margaret: More Internet für Dummies, Thomson Publishing (1996). [9] Stefan Münz: SELFHTML, erhältlich bei http://www.teamone.de/selfhtml [10] Rost, Martin, Schack, Michael (Hrsg.): Der Internet Praktiker (1995), Heise-Verlag. [11] Schulmeister, Rolf: Grundlagen hypermedialer Lernsysteme, Addison- Wesley (1996). 11