HTML lernen: ein Einführungskurs

Transkript

1 HTML - die Sprache des World Wide Web Zusammen mit dem HTTP-Protokoll bildet HTML die Grundlage des World Wide Web. Die Abkürzung steht für "Hyper Text Markup Language". Es handelt sich dabei um die Beschreibungssprache für Dokumente im World Wide Web. Mit ihrer Hilfe werden die logischen Strukturen eines Dokuments beschrieben. Dazu gehören z.b. Kapitel, Unterkapitel, Absätze, eingesetzte Bilder und Querverweise zu anderen Dateien. HTML wird ständig weiterentwickelt. Bestandteil der aktuellen HTML-Version 4.1 (zum Teil auch noch in HTML 3.2 und 2.0 verfügbar) sind Befehle, die die Formatierung von Textelementen, ähnlich wie in einem Textverarbeitungsprogramm, beeinflussen. Doch grundsätzlich ist HTML nicht vergleichbar mit einem Textverarbeitungsprogramm, auch wenn manchmal der Eindruck entsteht, wenn man eine HTML-Datei mit einem sogenannten WYSIWYG-Editor (What you see is what you get) bearbeitet. Der Browser (z.b. Internet Explorer oder Mozilla Firefox) interpretiert die HTML-Befehle. Es ist aber oft so, dass verschiedene Browser oder verschiedene Versionen eines Browsers die Befehle unterschiedlich umsetzen. Manche sehr neue oder sehr alte Befehle werden sogar gar nicht oder falsch verstanden. So ist es beispielsweise in der derzeitigen HTML-Version möglich, mit dem Befehl eine bestimmte Schriftart einzustellen. Dieses HTML Element wurde als 'deprecated' eingestuft, d. h. es soll in Zukunft aus dem HTML- Standard entfernt und durch die CSS Entsprechungen ersetzt werden. Erstellung von HTML-Dokumenten Da HTML-Dateien aus reinem ASCII-Text bestehen (engl. American Standard Code for Information Interchange; dt. Amerikanischer Standard-Code für Informationsaustausch), können sie mit jedem Text-Editor erstellt werden. HTML-Editoren bieten dafür aber mehr Komfort, wie z.b. farbig hervorgehobene Syntax, Unterstreichung von Fehlern und Vorschau mit einem Tastendruck. Ihre ersten HTML-Dokumente sollten Sie jedoch auf jeden Fall mit einem einfachen Editor (z.b. "Notepad" für Windows, "SimpleText" für Mac oder "vi" für Unix) schreiben, auch wenn das mit relativ viel Tipparbeit verbunden ist. So werden Sie sich am schnellsten an HTML gewöhnen. Bei Ihrer späteren Arbeit mit einem HTML-Editor werden Sie in der Lage sein, Fehler zu finden und zu korrigieren, weil Sie die Bedeutung der einzelnen HTML-Tags besser kennen. 1

2 Tags Neben dem darzustellenden Text enthält ein Dokument die entsprechenden HTML- Befehle. Diese werden als "Tags" (dt. Etiketten) bezeichnet und durch spitze Klammern am Anfang und Ende markiert. Fast alle HTML-Befehle bestehen aus einem einleitenden <...> und einem abschließenden Tag </...>; beide werden auch Start- und End-Tag genannt. Der Text zwischen ihnen ist der Gültigkeitsbereich für den HTML-Befehl. Sie können die Namen der Tags groß oder klein schreiben. Wegen der Übersichtlichkeit bietet es sich aber an, alle Tags einheitlich zu schreiben. Im Hinblick auf XHTML, einen zukünftigen Standard, der an XML angelehnt ist, sollte man alle Tags klein schreiben. Dazu ein kleines Beispiel: Beispiel: hallo Welt! In Ihrem Browser wird der Beispieltext etwa so erscheinen: Hallo Welt! Durch das einleitende Tag wird der folgende Text solange fett angezeigt, bis das abschließende Tag folgt. Struktur einer HTML-Seite Das folgende Beispiel stellt die Struktur einer einfachen HTML-Datei dar. Beispiel: <html> <head>autor: Max Mustermann, last update: <title>titel des Dokuments</title> </head> <body> Zwischen den Body-Tags wird alles eingegeben, was im Browser später zu sehen sein soll </body> </html> 2

3 html Das Tag <html>... </html> umschließt den Head und Body der HTML-Datei. head Zwischen <head>... </head> werden allgemeine Angaben über das Dokument notiert (beispielsweise das Erstellungsdatum und der Autor), dazu werden sogenannte META-Tags verwendet. Zudem umschließt das <head>... </head>-tag das <title>... </title>-tag. title Jede HTML-Datei sollte einen aussagekräftigen Titel erhalten. Ihn zeigt der Browser in der Titelleiste. Weiterhin ist der Titel der Eintrag, den Browser beim Anlegen eines Lesezeichens (engl. Bookmark) wählen bzw. vorschlagen. Auch viele Suchmaschinen im World Wide Web bauen ihre Datenbanken auf den Titeln von HTML-Dokumenten auf, diese erscheinen dann als Überschriften der Ergebnisse. body Im einleitenden <body>-tag können Anweisungen für Farben und Hintergrundbilder stehen (dazu später mehr). Im Body selbst werden die Informationen eingegeben, die auf dem Bildschirm des Benutzers dargestellt werden sollen, z.b. Textelemente, Hyperlinks, Bilder und Töne. Tipp: Template/Vorlage erstellen Um nicht bei jedem HTML-Dokument die Grundstruktur neu erstellen zu müssen, sollten Sie eine Datei anlegen, die die immer benutzten Tags enthält. Speichern Sie sie z.b. unter dem Namen template.htm, so können Sie immer wieder auf das vorgefertigte Muster zurückgreifen. Gute HTML-Editoren verfügen meistens über ein entsprechendes Symbol oder einen Befehl, um das Gerüst einer HTML-Datei zu erzeugen - zu tippen gibt es ja noch genug. Sie müssen den HTML-Code auch nicht im Windows-Editor erstellen. Es gibt eine Menge frei verfügbarer HTML-Editoren, die es durch farbliche Kennzeichnungen einfacher machen, HTML-Code zu schreiben. Ein Beispiel hierfür ist "Phase5": 3

4 HTML-Grundlagen: Dateinamen und -größe Vergabe von Dateinamen Weil lange Zeit auf Personal-Computern unter DOS und Windows Einschränkungen bei der Vergabe von Dateinamen (max. 8 Zeichen) und -endungen (max. 3 Zeichen) galten, ist die Endung.htm, neben html, für HTML-Dokumente ebenfalls zulässig. Verwenden Sie außer dem Unterstrich "_" und dem Bindestrich "-" keine Sonderzeichen. Leerzeichen sollten auch nicht verwendet werden. Die erste Seite der Web-Site, also die Startseite oder Homepage, sollte einen besonderen Namen haben, damit diese Seite leichter aufgerufen werden kann. Je nachdem, welche Einstellungen auf dem Server des Providers getroffen wurden, muss die Startseite, laut Standard, index.html, default.html oder welcome.html heissen, wobei die Datei-Endung auch.htm lauten kann. Groß- und Kleinschreibung Die meisten Web-Server laufen unter den Betriebssystemen Unix oder Windows NT. Unix unterscheidet strikt zwischen Groß- und Kleinschreibung. Es kann dort also durchaus vorkommen, dass sich in einem Verzeichnis die Dateien kultur.html und Kultur.html befinden. Um Verwechslungen und Irrtümer auszuschließen, sollten Sie jedoch Dateinamen vermeiden, die sich so stark ähneln. Tipp: Alles klein schreiben Wenn Sie alle Dateinamen klein schreiben, vermeiden Sie eine mögliche Fehlerquelle. Dateigröße und Textaufteilung Umfangreiche Texte sollten unbedingt auf mehrere Dateien verteilt werden. Dadurch bleibt die Seite übersichtlich. Wenn Sie später Grafiken oder andere multimediale Objekte einbinden, sollten Sie diese nicht zu groß wählen und gezielt einsetzen. Selbst ein noch so schönes Bild wird die wenigsten Surfer davon abhalten, einen langwierigen Ladevorgang abzubrechen. Zur Orientierung: Eine Datei von 50 KBytes braucht für die Übertragung über eine Analog- Modem-Leitung mit bit/s ungefähr 9 Sekunden. Eine HTML-Datei sollte die Größe von 100 KBytes inklusive der Bilder nicht überschreiten, idealerweise ist sie weit kleiner. 4

5 Tipp: Was mache ich mit großen Bildern? Erstellen Sie einfach zwei unterschiedliche Versionen eines Bildes: eine kleine Version mit maximal 15 KByte und maximal 200 Pixeln in Breite und Höhe und eine große Version, die das Bild möglichst detailreich darstellt. Die kleine Version fügen Sie in den Text ein und setzen einen Link auf die große Version des Bildes. So können sich interessierte Besucher dieses Bild auch in der großen Version ansehen, andere Besucher können sich aber diese zusätzliche Download-Zeit sparen. HTML-Grundlagen: Testen unter verschiedenen Bedingungen Da Internet-Nutzer über ganz unterschiedliche Hard- und Software verfügen, ist es sinnvoll, dass Sie Ihre Seiten unter verschiedenen Bedingungen testen, bevor Sie die Dateien ins Netz stellen. Nur so können auch Sie sehen, was Ihre Besucher wirklich zu Gesicht bekommen. Bildschirmauflösungen Sie wissen nicht, welche Bildschirmauflösung die Besucher Ihrer Web-Seiten benutzen. Deshalb sollten Sie diesen Aspekt bei der Gestaltung immer beachten und Ihre Seiten mit unterschiedlichen Bildschirmeinstellungen testen. Prinzipiell gilt, dass eine Seite bei allen Bildschirmauflösungen gut zu sehen bzw. zu lesen sein sollte. Abhängig von der Grafikkarte des Rechners und der Größe des Monitors sind die häufigsten Bildschirmeinstellungen , und 1280 x 1024 Pixel. Die meisten Nutzer haben zurzeit Pixel eingestellt, wie neuere Umfragen und Analysen zeigen. Verschiedene Browser Da es bei der Darstellung von HTML-Dateien zwischen den Browsern teilweise recht große Unterschiede gibt, sollten Sie Ihre Seiten mit den gängigsten Browsern (Mozilla Firefox, Internet Explorer) testen. Nicht alle HTML-Befehle und Optionen werden von allen Browsern unterstützt. Außerdem sind die Interpretationen der Browser unterschiedlich. Besonders bei den Größenangaben in Tabellen oder für Ränder stellen verschiedene Browser oft unterschiedliche Ergebnisse dar. Versuchen Sie auch, nicht nur die aktuellsten Browser zu testen, sondern gehen Sie auch mindestens eine Stufe in den Versionen zurück. Auch in den etwas älteren Browsern sollte man Ihre Seite noch betrachten können. 5

6 Verschiedene Betriebssysteme Vorteilhaft ist es natürlich auch, wenn Sie die Möglichkeit haben, Ihre Web-Seiten unter verschiedenen Betriebssystemen zu betrachten (z.b. Windows 2000/NT/XP/Vista, Mac oder Linux). Hier gibt es besonders bei der Darstellung der Farben relativ große Unterschiede zwischen den verschiedenen Systemen. Auch werden bestimmte HTML-Elemente unterschiedlich dargestellt. Auch die meisten Schriftarten sind nicht auf allen 3 Systemen vorhanden. HTML-Grundlagen: Zusammenfassung (I) 1. HTML & Co. Zusammen mit dem HTTP-Protokoll bildet HTML die Grundlage des World Wide Web. Die Abkürzung steht für "Hyper Text Markup Language". Es handelt sich dabei um die Beschreibungssprache für Dokumente im World Wide Web. Mit ihrer Hilfe werden die logischen Strukturen eines Dokuments beschrieben. 2. Erstellung von HTML-Dokumenten Fast alle HTML-Befehle bestehen aus einem einleitenden <...> und einem abschließenden Tag </...>; beide werden auch Start- und End-Tag genannt. Der Text zwischen ihnen ist sozusagen der Gültigkeitsbereich für den HTML-Befehl. 3. Dateinamen und -größe Die erste Seite der Web-Site, also die Startseite oder Homepage, sollte einen besonderen Namen haben, damit diese Seite leichter aufgerufen werden kann. Je nachdem welche Einstellungen auf dem Server des Providers getroffen wurden, muss die Startseite index.html, default.html oder welcome.html heißen, wobei die Datei- Endung auch.htm lauten kann. 4. Testen unter verschiedenen Bedingungen Da Internet-Nutzer über ganz unterschiedliche Hard- und Software verfügen, ist es sinnvoll, dass Sie Ihre Seiten unter verschiedenen Bedingungen testen, bevor Sie die Dateien ins Netz stellen. Nur so können auch Sie sehen, was Ihre Besucher wirklich zu Gesicht bekommen. 6

7 Textauszeichnungen (Zeichenformate) Grundsätzlich muss in HTML zwischen physischen und logischen Textauszeichnungen unterschieden werden. Physische Auszeichnungen legen die Art der Wiedergabe genau fest (kursiv, fett, etc.). Logische Auszeichnungen beschreiben die Bedeutung des Texts (Code, Hervorhebung, etc.) und überlassen es dem Browser, wie er diese Auszeichnungen darstellt. Oftmals werden beide Verfahren zum gleichen Ergebnis führen. Unterschiede werden sich aber in text-orientierten Umgebungen bemerkbar machen, da diese keine physischen Formate erkennen. Mit den physischen Textauszeichnungen lässt sich ein HTML-Dokument im Browser besser kontrollieren. Zudem werden Ihnen mehr gestalterische Möglichkeiten geboten. Je nach dem Publikum, für das Sie Ihre Web-Site gestalten, sollten Sie die Vor- und Nachteile der unterschiedlichen Formatierungsbefehle gegeneinander abwägen. Die wichtigsten physischen Textauszeichnungen: ... = der Text wird kursiv gestellt ... = der Text erscheint fett ... = der Text wird unterstrichen <blink>... </blink> = der Text blinkt <strike>... </strike> = der Text wird durchgestrichen ... = der Text wird hochgestellt ... = der Text wird tiefgestellt Beispiele für diese Auszeichnungen sehen Sie hier. Beispiel: Physische Textauszeichnungen <html> <head> <title>textauszeichnungen</title> </head> <body> ein sonniger Tag gefolgt von einer sternenklaren Nacht, was einen kühlen Morgen nach sich zieht. Das tief kommt hinten nicht mehr hoch. </body> </html> 7

8 Das sieht im Browser so aus: Achtung: Das <blink>-tag Das <blink>-tag für blinkenden Text funktioniert nur bei Mozilla Firefox und Opera. Daher sollte auf dessen Verwendung verzichtet werden. Logische Textauszeichnungen haben den Vorteil, dass sie auch in text-orientierten Umgebungen angezeigt werden. Wenn Sie einen wissenschaftlichen Text oder einen reinen Informationstext verfassen, sollten Sie die HTML-Befehle für die logischen Textauszeichnungen verwenden. Die wichtigsten logischen Textauszeichnungen: ... = der Text wird hervorgehoben, meist fett ... = der Text wird hervorgehoben, meist kursiv <tt>... </tt> = für dicktengleiche Schrift (nicht Proportionalschrift) <cite>... </cite> = für Zitate geeignet, meist durch kursive Darstellung 8

9 HTML-Grundlagen: Schriftgestaltung Schriftart Sie können die Schriftart über den -tag festlegen. Dazu geben Sie im face-attribut die gewünschte Schriftart an: Beachten Sie dabei besonders, ob die Schriftart auch auf allen Computern Ihrer Besucher vorhanden ist. Um sicher zu gehen, dass auch der gewünschte Effekt erzielt wird, kann man auch mehrere Schriftarten angeben. Dann versucht der Browser zuerst die 1. angegebene Schrift darzustellen, dann die nachfolgenden, bis er auf dem Rechner eine installierte Schriftart gefunden hat. Für Windows kann man von dem Vorhandensein von Arial, Times und ab Internet Explorer 5 auch von Verdana ausgeben. Auf dem Mac ist Helvetica verfügbar. text in der gewünschten Schriftart Schriftgröße Mit dem HTML-Befehl ... kann die Schriftgröße verändert werden. Diese Anweisung wird von Mozilla Firefox und dem Internet Explorer ab Version 2.0 ausgewertet. Die Abstufungen von 1 bis 7 sind relative Werte zur im Browser eingestellten Schriftgröße. Der Wert 3 entspricht ihr genau, die Abstufungen 1 und 2 sind kleiner, die Werte 4 bis 7 vergrößern die Schrift. Tipp: Der hier beschriebene Font-Tag ist als deprecated eingestuft, das heißt, er soll in Zukunft aus dem HTML-Standard entfernt werden. Hier will ich ihn aber doch erwähnen und für unsere Zwecke ist das auch völlig ausreichend. HTML-Profils würden an dieser Stelle CSS verwenden...aber das führt uns hier zu weit. 9

10 Beispiel: Schriftgrößen <html> <head> <title>textauszeichnungen</title> </head> <body> klein aber fein a little bit more entspricht der Einstellung im Browser es geht bergauf und noch eine Stufe ein Ende ist abzusehen the King Size </body> </html> Das Ergebnis sieht so aus: 10

11 Schriftfarbe Mit Hilfe des Attributs color im -tag können Sie beliebigen Textpassagen eine eigene Farbe zuweisen. Diese Anweisung ist unabhängig von der Einstellung der Schriftfarbe, die im body-tag mit dem Attribut text festgelegt werden kann (Dazu kommen wir etwas später). Beispiel: Schriftfarben <html> <head> <title>textauszeichnungen</title> </head> <body bgcolor="#ffffff" text="0033ff"> ein dezentes Rot ein hoffnungsvolles Grün ein himmlisches Blau ... usw. </body> </html> 11

12 HTML-Grundlagen: Sonderzeichen in HTML Sonderzeichen in HTML Um sicherzugehen, dass so genannte Sonderzeichen (z.b. deutsche Umlaute) richtig erscheinen, werden sie durch Kombinationen aus dem 7-Bit ASCII-Zeichensatz wiedergegeben, z.b. schreibt man "ü" für "ü". Heute ist dieses Verfahren nicht mehr unbedingt zwingend, da man auch die Zeichensätze nach den ISO-Normen verwenden kann, für Mitteleuropa z.b. ISO Ein weiteres Problem besteht bei den Zeichen "<" und ">", diese kennzeichnen, wie in der ersten Lektion beschrieben, die so genannten Tags. Sollen sie als normale Zeichen im Text erscheinen, müssen sie dazu maskiert werden. Für "<" schreiben Sie "<", für ">" benutzen Sie ">". Umlaute und ß Die deutschen Umlaute und das "ß" werden Sie heute nicht mehr ersetzen müssen. Die folgende Liste führt diese Zeichen und ihre HTML-Entsprechungen nur der Vollständigkeit halber auf. Ä = Ä bzw. Ä ä = ä bzw. ä Ö = Ö bzw. Ö ö = ö bzw. ö Ü = Ü bzw. Ü ü = ü bzw. ü ß = ß geschütztes Leerzeichen = Beispiel: "Ähnlichkeit" wird durch die Maskierung so dargestellt: Ähnlichkeit "Möglichkeit" wird durch die Maskierung so dargestellt: Möglichkeit Eine Liste der Sonderzeichen und ihrer Maskierungen finden Sie hier: 12

13 HTML-Grundlagen: Zusammenfassung (II) 1. Textauszeichnungen Grundsätzlich muss in HTML zwischen physischen und logischen Textauszeichnungen unterschieden werden. Physische Auszeichnungen legen die Art der Wiedergabe genau fest (kursiv, fett, etc.). Logische Auszeichnungen beschreiben die Bedeutung des Texts (Code, Hervorhebung, etc.) und überlassen es dem Browser, wie er diese Auszeichnungen darstellt. 2. Schriftgestaltung Sie können die Schriftart über den -tag festlegen. Dazu geben Sie im face- Attribut die gewünschte Schriftart an: 3. Sonderzeichen in HTML Um sicherzugehen, dass sogenannte Sonderzeichen (z.b. deutsche Umlaute) richtig erscheinen, werden sie durch Kombinationen aus dem 7-Bit ASCII-Zeichensatz wiedergegeben. 13

14 HTML-Grundlagen: Überschriften Überschriften (engl. Headings) Damit Sie Überschriften unterschiedlicher Größe in Ihrem Dokument verwenden können, bietet HTML sechs Überschriftenebenen von <h1>... </h1> bis <h6>... </h6>. Mit ihrer Hilfe können Sie Ihr Dokument übersichtlich aufbauen und gliedern. Aufgabe: Öffnen Sie einen beliebigen Texteditor und erstellen Sie das Grundgerüst der Datei. Geben Sie als Titel "6. Schlagerfestival in Berlin" ein. Geben Sie als nächstes folgenden Text ein: Die Neuentdeckung auf dem 6. Schlagerfestival in Berlin waren das Gesangsduo "Ray und Dietrich". Schon nach dem ersten Lied "Ein Tag aus unserem Leben" war klar abzusehen, dass sie den Wettbewerb gewinnen werden. Achtung: Denken Sie daran, die Sonderzeichen zu maskieren! Speichern Sie die Datei unter dem Namen schlager1.html. Jetzt fehlt nur noch eine Überschrift für den Text. Wie erwähnt, gibt es in HTML sechs Überschriftenebenen. Eine Überschrift oberster Hierarchie lässt sich durch <h1>überschrift</h1> im Dokument einsetzen. Probieren Sie es einfach aus. In Ihrem Texteditor sieht der HTML-Code dann wie in der Abbildung aus. Beispiel: <html> <head> <title>6. Schlagerfestival in Berlin</title> </head> <body bgcolor="#ffffff"> <h1>6. Schlagerfestival</h1> die Neuentdeckung auf dem 6. Schlagerfestival in Berlin waren das Gesangsduo "Ray und Dietrich". Schon nach dem ersten Lied "Ein Tag aus unserem Leben" war klar abzusehen, dass sie den Wettbewerb eindeutig gewinnen werden. </body> </html> 14

15 Im Browser ist die zugewiesene Überschrift deutlich zu erkennen. Setzen Sie eine zweite Überschrift unter der ersten ein, und zwar so: <h2>schlagerduo</h2> Im Browser ist der Unterschied zwischen den beiden Überschriften <h1>6. Schlagerfestival </h1> und <h2>schlagerduo</h2> gut zu sehen: Hier noch einmal alle Überschriften zusammen: 15

16 Überschriften ausrichten Ähnlich wie in einem Textverarbeitungsprogramm können Sie in HTML die Ausrichtung von Texten - also auch die Ausrichtung von Überschriften - ändern. Dazu muss das Tag für die Überschrift erweitert werden. Mit den Attributen align="left", align="center" oder align="right" wird die Ausrichtung festgelegt. Fehlt "align", wird die Überschrift linksbündig ausgerichtet. Beispiel: Zum Zentrieren einer Überschrift der höchsten Ebene dient dieser HTML-Code: <h1 align="center">die goldene Mitte</h1> Um eine Überschrift der höchsten Ebene rechtsbündig auszurichten, benutzen Sie: <h1 align="right">on the right side</h1> Soll eine Überschrift der höchsten Ebene jedoch linksbündig ausgerichtet sein, ändert sich der Code in: <h1 align="left">standardausrichtung</h1> 16

17 HTML-Grundlagen: Absätze und Zeilenumbrüche Ein Absatz wird durch das Tag eingeleitet und mit beendet. Mit dem Attribut "align" im -tag kann man einem Absatz auch die gewünschte Ausrichtung geben. ... = zentrierter Absatz ... = rechtsbündiger Absatz ... = linksbündiger Absatz Probieren Sie es einfach einmal aus: Aufgabe: Übung zum Ausrichten von Absätzen Legen Sie im Texteditor eine neue Datei an. Als erstes geben Sie wieder die notwendigen Befehle für das Grundgerüst der HTML-Datei ein. Anschließend soll der unten abgebildete Text in den Body der Datei eingegeben werden. Maskieren Sie bitte auch hier wieder alle Sonderzeichen. Damit der Text gut leserlich bleibt, sind die Sonderzeichen in der Abbildung nicht maskiert dargestellt. Speichern Sie die Datei unter dem Namen schlager2.html. Beispiel: <html> <head> <title>die neuen Stars am Himmel des deutschen Schlagers</title> </head> <body bgcolor="#ffffff"> <h2 align="right">der deutsche Schlager</h2> der deutsche Schlager erfreut sich wieder größerer Beliebtheit. Das war deutlich auf dem 6. Schlagerfestival in Berlin zu merken. die Veranstaltung war schon Wochen vorher ausverkauft. Leider war es den Veranstaltern jedoch nicht möglich, ein Zusatzkonzert zu organisieren. Doch ein kleiner Trost: Die Gewinner "Ray und Dietrich" gehen im Sommer auf große Tournee und stellen ihr neues Album "Mein Leben mit dir" vor. Voraussichtlich werden sie am 26. Juni wieder in Berlin zu Gast sein. </body> </html> 17

18 Im Internetbrowser sollte Ihr Ergebnis so aussehen: HTML-Grundlagen: Zusammenfassung (III) 1. Überschriften Damit Sie Überschriften unterschiedlicher Größe in Ihrem Dokument verwenden können, bietet HTML sechs Überschriftenebenen. Mit ihrer Hilfe können Sie Ihr Dokument übersichtlich aufbauen und gliedern. 2. Absätze und Zeilenumbrüche Mit Absätzen können Sie Texte ausrichten und organisieren und mit Hilfe von festen Zeilenumbrüchen können Sie bestimmen wann der Text umgebrochen werden soll. 18

19 HTML-Grundlagen: Nummerierte Listen Eine nummerierte Liste wird mit dem <ol>-tag (engl. Ordered List, dt. sortierte Liste) eingeleitet. Den einzelnen Elementen einer Liste müssen Sie immer ein <li>-tag (engl. Listitem, dt. Listeneintrag) voranstellen, die Elemente sollten mit dem </li>-tag beendet werden. Das ist nicht zwingend erforderlich, gehört aber zum guten HTML-Stil. Die Liste wird mit dem </ol>-tag abgeschlossen. Beispiel: <ol> <li> Listeneintrag 1</li> <li> Listeneintrag 2</li> </ol> Mit dem Attribut type im <ol>-tag lässt sich die Art der vorangestellten Nummerierung bestimmen: <ol type="a"> = nummerierte Liste A, B, C <ol type="a"> = nummerierte Liste a, b, c <ol type="i"> = nummerierte Liste I, II, III <ol type="i"> = nummerierte Liste i, ii, iii <ol start="(zahl)"> = nummerierte Liste mit Anfangswert Anmerkung: Diese HTML-Attribute sind mittlerweile als 'deprecated' gekennzeichnet und sollen künftig aus dem HTML-Standard entfallen. Es empfiehlt sich daher, Listen mit CSS zu formatieren. Ein Beispiel für den HTML-Code einer nummerierten Liste entnehmen Sie bitte der folgenden Abbildung: 19

20 Beispiel: Nummerierte Liste <html> <head> <title>schlagerparade</title> </head> <body bgcolor="#ffffff"> folgende Singles sind erhältlich <ol> <li>im letzten Sommer (Dance-Mix)</li> <li>ein weiter Weg (Dance- und Acapella-Version)</li> <li>mein Leben mit Dir (Dance- und Dub-Mix)</li> </ol> </body> </html> HTML-Grundlagen: Aufzählungslisten Eine Aufzählungsliste wird durch die Tags <ul> (engl. Unordered List, dt. unsortierte Liste) und </ul> definiert. Die einzelnen Listeneinträge kennzeichnet das Tag <li>, sie enden mit </li>. Mit dem type-attribut im <ul>-tag kann die Art des vorangestellten Aufzählungszeichens bestimmt werden. <ul type="square"> = Aufzählungsliste mit Quadraten als Aufzählungszeichen <ul type="circle"> = Aufzählungsliste mit Kreisringen als Aufzählungszeichen <ul type="disc"> = Aufzählungsliste mit Kreisen als Aufzählungszeichen Die Darstellung sieht so aus: HTML-Grundlagen: Definitionslisten Eine Definitionsliste wird von den Tags <dl> und </dl> eingeschlossen. Der zu definierende Ausdruck steht zwischen <dt>und </dt>. Der Definitionstext wird durch die Tags <dd> und </dd> begrenzt. In der Regel werden Definitionslisten für Glossare benutzt. 20

21 Beispiel: <dl> <dt>das neue Album "Mein Weg mit Dir" </dt> <dd>das neue Album ist ein geschlossenes Werk. Jeder der insgesamt 10 Songs ist musikalisch sehr gut durchdacht und auch die deutschen Texte sind nicht nur, wie normalerweise bei Schlagern ja üblich, aus "Schüttelreimen" zusammengesetzt.</dd> <dt>der Interpret Peter Wegzoll</dt> <dd>peter Wegzoll hat sich auch diesmal selbst übertoffen. Mit Spannung warten wir auf seinen nächsten Liveauftritt.</dd> </dl> HTML-Grundlagen: Zusammenfassung (IV) 1. Nummerierte Listen Eine nummerierte Liste wird mit dem <ol>-tag eingeleitet. Den einzelnen Elementen einer Liste müssen Sie immer ein <li>-tag voranstellen, die Elemente sollten mit dem </li>-tag beendet werden. Das ist nicht zwingend erforderlich, aber sicher ist sicher. Die Liste wird mit dem </ol>-tag abgeschlossen. 2. Aufzählungslisten Eine Aufzählungsliste wird durch die Tags <ul> und </ul> definiert. Die einzelnen Listeneinträge kennzeichnet das Tag <li>, sie enden mit </li>. 3. Definitionslisten Eine Definitionsliste wird von den Tags <dl> und </dl> eingeschlossen. Der zu definierende Ausdruck steht zwischen <dt>und </dt>. Der Definitionstext wird durch die Tags <dd> und </dd> begrenzt. 21

22 HTML-Grundlagen: Bilder einfügen In HTML lassen sich sehr einfach Grafiken einbinden. Zwei Grafikformate, die von allen gängigen Browsern unterstützt werden, sind das GIF- und JPEG-Format. (Mehr dazu im Modul "Aufbau einer Web-Site") Setzen Sie Grafiken jedoch immer gezielt ein, denn "weniger ist manchmal mehr". Je mehr Grafiken eine Seite enthält, desto länger dauert der Ladevorgang. Eine Grafik sollte nicht größer sein als 30 KBytes, idealerweise ist sie höchstens 5 KBytes groß. Grafik einbinden: Grafiken können in ein HTML-Dokument über die Anweisung <img src="dateiname"> direkt eingebunden werden. Aufgabe: Das etwas weiter unten abgebildete Bild (engl. image) 'delphin.gif' soll in die HTML-Datei 'delphin.htm' eingesetzt werden. Als erstes legen Sie die HTML-Datei delphin.htm an. Geben Sie folgenden HTML-Code als Grundgerüst ein: Beispiel: <html> <head> <title>alles über Delphine </title> </head> <body bgcolor="#ffffff"> </body> </html> Jetzt soll das Bild delphin.gif in die Datei eingebunden werden. Dazu müssen Sie das Bild der beiden springenden Delphine auf Ihrer Festplatte im gleichen Verzeichnis wie die HTML-Datei speichern. Das funktioniert bei Windows-Rechnern folgendermaßen: Klicken Sie mit der rechten Maustaste auf das Bild. Wählen Sie den Befehl "Grafik speichern" (engl. Save Image). Geben Sie das Verzeichnis an, in das Sie das Bild speichern möchten. (das gleiche, in dem die Datei delphin.htm liegt.) Für die Mac-Anwender: Klicken Sie auf das Bild und halten Sie die Maustaste gedrückt. Wählen Sie den Befehl "Grafik speichern" (engl. Save Image). Geben Sie den Ordner an, in dem Sie das Bild speichern möchten. Das ist derselbe Ordner, in dem die Datei delphin.htm liegt. 22

23 Nachdem Sie das Bild auf Ihrer Festplatte gespeichert haben, können Sie es in die HTML- Datei delphin.htm einbinden. Der Befehl, den Sie dazu im Body eingeben müssen, lautet folgendermaßen: <img src="delphin.gif"> Schauen wir uns das Ergebnis im Browser an: Im <img src=-...>-tag können die Attribute alt, align und border optional verwendet werden. alt="[text]" Gibt den Text an, wenn die Bildanzeige im Browser deaktiviert wurde und erscheint kurzzeitig beim Laden der Grafik, wenn die Bildanzeige im Browser eingeschaltet ist. Dieses Attribut sollten Sie immer angeben. Dieser Alt-Tag wird nämlich auch verwendet, um in Text-basierten Browsern die Bilder zu ersetzen. align="[position]" Bestimmt die horizontale und vertikale Ausrichtung. Dies spielt bei Bildern, die innerhalb eines Textes eingebunden sind, eine Rolle. Damit kontrollieren Sie den Textfluß um das Bild. border="[stärke in Pixel]" Umrahmt die Grafik. Fehlt diese Angabe, erhält die Grafik keinen Rahmen. Wenn Sie die Grafik verlinken, dann erhält dieser Rahmen entweder die Farbe, die Sie für Links definiert haben, oder standardmäßig blau. Wenn Sie diesen Rahmen nicht anzeigen möchten, sollten Sie border="0" setzen. width="[breite in Pixeln]" Bestimmt die Breite der Grafik. Geben Sie hier die richtige Breite der Grafik in Pixeln an, da ansonsten das Bild verzerrt wird. height="[höhe in Pixeln]" Bestimmt die Höhe der Grafik. Hier sollten Sie auch die richtige Breite der Grafik in Pixeln angeben, sonst wird das Bild verzerrt. Anmerkung: Breite und Höhe von Grafiken sollten immer angegeben werden. 23

24 HTML-Grundlagen: Relative Pfade Grafik aus einem anderen Ordner einbinden (mit relativen Pfadnamen) Um andere Elemente in Ihre HTML-Dateien einzubinden, müssen Sie angeben, wo sie sich befinden. Diese Angabe nennt man Pfad, man unterscheidet zwischen relativen und absoluten Pfaden. Liegen die HTML-Dateien und die Elemente, die Sie einsetzen möchten, auf demselben Server, so benutzen Sie relative Pfadnamen. Sie führen von Ihrem HTML-Dokument zum gewünschten Element. Eine Web-Site besteht aus HTML-Dateien, Bildern, eventuell Animationen, Klangdateien usw. Für die Bilder (engl. images) existiert in der Regel ein eigenes Verzeichnis, das meist den Namen "images" trägt. Werden Bilder in die HTML- Dateien eingebunden, muss das Tag <img src=...> auf den Ordner verweisen, in dem das gewünschte Bild liegt. Dies geschieht mit Hilfe von relativen Pfadnamen. Diese sind immer relativ zu der HTML-Datei, in der sie genannt werden. Die Schaubilder sollen Ihnen verdeutlichen, wie relative Pfadnamen funktionieren. Man liest von unten nach oben. An den Bildern wird Ihnen sicherlich auffallen, dass in den Pfadangaben zwischen den Angaben der einzelnen Ordner der Schrägstrich (Slash) " / " und nicht, wie unter DOS/Windows üblich der Rückstrich (Backslash) " \ ", eingesetzt wird. Hier sieht man die Unix-Welt, die Verzeichnisse durch einen Schrägstrich " / " trennt. <img src="delphin.gif"> Das Bild delphin.gif liegt im gleichen Ordner projekt, wie die HTML-Datei index.htm. <img src="images/delphin.gif"> Das Bild delphin.gif liegt im Ordner images. Dieser Ordner befindet sich eine Ebene unter projekt. <img src="../delphin.gif"> Das Bild delphin.gif im Ordner images liegt eine Ebene höher als die HTML-Datei archiv.htm aus dem Ordner archiv. Das drückt der relative Pfadname../ aus. <img src="../../delphin.gif"> Das Bild delphin.gif im Ordner delphine liegt 2 Ebenen höher als die HTML-Datei index.htm. Das wird durch../../ ausgedrückt. 24

25 <img src="../images/ delphin.gif"> delphin.gif liegt eine Ebene höher und von dort aus im Ordner images, von archiv.htm aus gesehen. <img src="../../../ images/delphine/delphin.gif"> Drei Ebenen nach oben, dann abbiegen in den Ordner images und zu guter Letzt wechseln in den Ordner delphine, wo das Bild delphin.gif liegt Die Vorteile relativer Pfadnamen Sicherlich werden Sie sich fragen, warum man relative Pfadnamen benutzt. Ein wesentlicher Vorteil ist, dass Sie so die gesamte Web-Site auf Ihrem lokalen Rechner erstellen können und im Browser anschauen können. Beim Übertragen auf den Web-Server (per FTP) kann der gesamte Verzeichnisbaum komplett übernommen werden, ohne dass dadurch die internen Verweisstrukturen verloren gehen. HTML-Grundlagen: Absolute Pfade Wie sieht ein absoluter Pfadname aus? Ein absoluter Pfadname beginnt immer mit dem verwendeten Protokoll (z.b. dann wird der Rechner genannt (z.b. danach folgt der Pfad (z.b. images/delphine) und zum Schluss der Dateiname (z.b. delphin.gif). Soll das Bild delphin.gif in die Datei band1.htm eingebunden werden, sieht der absolute Pfadname folgendermaßen aus: <img src=" 25

26 Wann werden absolute Pfadnamen verwendet? Absolute Pfadnamen werden immer dann benutzt, wenn die Dateien, auf die Sie verweisen möchten, nicht auf Ihrem eigenen Server liegen (externe Verweise). Wenn Sie beispielsweise auf Ihrer Homepage einen Verweis zur Adresse der Internet-Akademie setzen möchten, müssen Sie einen absoluten Pfadnamen verwenden: HTML-Grundlagen: Zusammenfassung (V) 1. Bilder einfügen In HTML lassen sich sehr einfach Grafiken einbinden. Zwei Grafikformate, die von allen gängigen Browsern unterstützt werden, sind das GIF- und JPEG-Format. Setzen Sie Grafiken jedoch immer gezielt ein, denn "weniger ist manchmal mehr". Je mehr Grafiken eine Seite enthält, desto länger dauert der Ladevorgang. Eine Grafik sollte nicht größer sein als 30 KBytes, idealerweise ist sie höchstens 5 KBytes groß. 2. relative Pfade Liegen die HTML-Dateien und die Elemente, die Sie einsetzen möchten, auf demselben Server, so benutzen Sie relative Pfadnamen. Sie führen von Ihrem HTML-Dokument zum gewünschten Element. Eine Web-Site besteht aus HTML-Dateien, Bildern, eventuell Animationen, Klangdateien usw. Werden Bilder in die HTML-Dateien eingebunden, muß das Tag <img src=...> auf den Ordner verweisen, in dem das gewünschte Bild liegt. Dies geschieht mit Hilfe von relativen Pfadnamen. 3. absolute Pfade Ein absoluter Pfadname beginnt immer mit dem verwendeten Protokoll (z.b. dann wird der Rechner genannt (z.b. danach folgt der Pfad (z.b. images/delphine) und zum Schluß der Dateiname (z.b. delphin.gif). 26

27 HTML-Grundlagen: Interne Links Lokale Links Bei lokalen Links befinden sich die Dateien auf demselben Rechner (Server). Diese Links werden mit Hilfe von relativen Pfadnamen hergestellt. Aufbau eines Links <a href="information.htm"> Informationen </a> Start-Tag, Link auf HTML-Datei Beschreibungstext für den Link End-Tag des Linkes Ein Link besteht aus zwei Komponenten: Anker <a href="information.htm"> Im Start-Tag wird das Ziel angegeben, zu dem gesprungen werden soll. </a> Mit dem End-Tag </a> wird der HTML-Befehl für einen Link beendet. Beschreibung index.html Hier wird der Text eingegeben, den der Anwender als Hyperlink (Linktext) im Browser sieht. Die meisten Browser stellen den Linktext unterstrichen und in einer anderen Farbe dar, meist Blau. Links zu Dateien im selben Ordner In der Datei "index.htm" wird ein Link zu "delphin.htm" gesetzt... <a href="delphin.htm">delphinbilder</a> Den HTML-Code für die Datei können Sie der Abbildung entnehmen Beispiel: <html> <head> <title>alles über Delphine</title> </head> <body bgcolor="#ffffff"> <A HREF="delphin.htm">Delphinbilder</a> </body> </html> 27

28 Im Browser sieht das Ergebnis etwa so aus: Wenn Sie auf den Link klicken, sollte die Datei delphin.htm (diese haben Sie in der letzten Lektion erstellt) geöffnet werden. Erscheint statt dessen eine Fehlermeldung, kontrollieren Sie als erstes, ob die Datei delphin.htm tatsächlich im gleichen Ordner vorhanden ist. Links zu Dateien in verschiedenen Ordnern In der Datei index.htm wird ein Link auf delphin.htm gesetzt... <a href="delphine/delphin.htm">delphinbilder</a> In der Datei delphin.htm wird ein Link auf tiere.htm gesetzt... <a href="../../tiere.htm">übersicht</a> In der Datei delphine.htm existiert ein Verweis zu pflanzen.htm... <a href="../../pflanzen/pflanzen.htm">ein paar Bilder</a> 28

29 Anker erstellen (Links innerhalb einer Seite) Ein Klick auf die Links, die Sie bis jetzt kennengelernt haben, öffnet eine andere Datei, und der Browser springt automatisch zu deren Anfang. Sie haben jedoch auch die Möglichkeit, zu einer bestimmten Stelle im selben oder in einem anderen Dokument zu springen. Das geschieht mit Hilfe von Ankern. Gerade wenn eine HTML-Datei sehr lang ist, sollten Sie den Lesern die Möglichkeit geben, zu bestimmten Stellen im Dokument zu springen, z.b. zu den unterschiedlichen Themen des Textes oder zu den Überschriften. Die Funktion setzt sich aus zwei Komponenten zusammen: Aus dem Anker selbst: <a name="bezeichner">... </a> und dem Link zum Anker: <a href="#bezeichner>verweistext</a> In diesem Beispiel lernen Sie den HTML-Befehl kennen, um zu einer bestimmten Textstelle in derselben Datei zu springen. Geben Sie dazu folgenden HTML-Code ein: Beispiel: <html> <head> <body bgcolor="#ffffff"> themen <a href="#htm">html-grundlagen</a> <A HREF="#ers">Erstellung von HTML-Dokumenten</a> <a href="#auf">aufbau von HTML-Dokumenten</a> <a name="htm">html-grundlagen</a> HTML ist die Sprache des World Wide Web. Zusammen mit dem HTTP-Protokoll bildet HTML die Grundlage des WWW. HTML steht für Hyper Text Markup Language. Es handelt sich dabei um die Beschreibungssprache für Dokumente im World Wide Web. Mit Hilfe von HTML werden die logischen Strukturen eines Dokuments beschrieben. Dazu gehören Kapitel, Unterkapitel, Absätze, eingesetzte Bilder, Querverweise zu anderen Dokumenten usw. hier folgt der Rest des Textes mit 2 weiteren "Ankernamen" zu denen gesprungen werden kann... 29

30 ... </body> </html> Geben Sie die Zeilenumbrüche ( ) bitte mit ein (Sie müssen sie nicht mitzählen). Sie verhindern in diesem Beispiel, dass der ganze Text im Browser zu sehen ist und sorgen so dafür, dass man die neue Funktion (mit Hilfe von Textmarken zu einer bestimmten Position zu springen) besser testen kann. Im Browser sieht es dann so aus: Wenn Sie auf den Link "HTML-Grundlagen" klicken, springen Sie zur Überschrift "HTML- Grundlagen". Probieren Sie es am Link "HTML-Grundlagen" einfach aus. Ein Blick in den Browser: Möchten Sie zu einer bestimmten Textstelle in einem anderen Dokument wechseln, brauchen Sie das Tag nur durch die Angabe des relativen Pfadnamens zu erweitern. Das könnte so aussehen. <a href="../info/mappe1.htm#aus">weitere Informationen</a> In der Datei mappe1.htm wird der Ankername festgelegt: <a name="aus">ausbildung </a>zum Webmaster 30

31 HTML-Grundlagen: Weltweite Links Aufbau eines Links Sie können jederzeit auf HTML-Dateien, die auf anderen Servern liegen, verweisen. Dazu brauchen Sie die Adresse des Servernamens (Hostname) und den Pfad auf dem Rechner zu der Datei, auf die Sie verweisen möchten. Möchten Sie einen solchen Link erstellen, gehen Sie im Prinzip so vor, als wollten Sie einen Verweis zu einer Datei auf Ihrem Server erstellen. Der einzige Unterschied liegt darin, dass dieser Link mit einem absoluten Pfadnamen definiert wird. <a href=" Informationen </a> Start-Tag, Verweis auf die Internet-Adresse Beschreibungstext für den Link End-Tag Beispiel: Let's go to <a href=" Setzt einen Link auf die Startseite der Suchmaschine "Altavista". Let's go to Altavista 5 Wenn Sie auf den Link klicken, öffnet sich die Startseite der Suchmaschine "AltaVista". <a href=" aus Berlin</a> Dieser Eintrag definiert einen Link im Verzeichnis aktuelles, auf dem Server berlinonline.de. Aktuelles aus Berlin 6 HTML-Grundlagen: Andere Links Link zu einem FTP-Server Sie können auch auf andere Internet-Dienste verweisen. So können Sie z.b. auf einen FTP-Server einen Link setzen, um ein Dokument zum Herunterladen bereitzustellen. <a href="ftp://ftp.uni-koeln.de">ftp-server</a> der Universität Köln Wenn Sie auf den Link klicken, landen Sie auf dem FTP-Server der Universität Köln. -Link Sie können auch auf Ihre -Adresse verweisen, so dass die Besucher Ihnen eine E- Mail senden können. Ihr Lob geht an den <a href="mailto:info@nettrip.de">webmaster</a> 31

32 Beim Klicken auf den "mailto"-link öffnet sich standardmäßig das Mail-Fenster des Browsers. Automatisch wird die -Adresse im Feld "Mail To:" eingetragen. Wenn der Verweis Ihr Lob geht an den <a Webmaster</a> lautet, wird darüber hinaus im Feld "Betreff" (engl. Subject) das Anliegen der ("Danke") eingetragen. Ihr Lob geht an den <a Webmaster</a> HTML-Grundlagen: Zusammenfassung (VI) 1. Interne Links Bei lokalen Links befinden sich die Dateien auf demselben Rechner (Server). Diese Links werden mit Hilfe von relativen Pfadnamen hergestellt. 2. Weltweite Links Sie können jederzeit auf HTML-Dateien, die auf anderen Servern liegen, verweisen. Dazu brauchen Sie die Adresse des Servernamens (Hostname) und den Pfad auf dem Rechner zu der Datei, auf die Sie verweisen möchten. Dieser Link wird mit einem absoluten Pfadnamen definiert. 3. Andere Links Sie können auch auf andere Internet-Dienste verweisen. So können Sie z.b. auf einen FTP-Server einen Link setzen, um ein Dokument zum Herunterladen bereitzustellen. 32

33 HTML-Grundlagen: Einstellungen Der Body-Tag Diese Lektion behandelt ausführlich das <body>-tag und die zulässigen Attribute. Grundsätzlich gilt: Alle Anweisungen im einleitenden <body>-tag beziehen sich immer auf das gesamte Dokument. Das ist vergleichbar mit den Seiteneinstellungen im Textverarbeitungsprogramm. Denken Sie daran: HTML ist keine Formatierungssprache, sondern es beschreibt die gesamte Struktur eines Dokuments, was Möglichkeiten zur Formatierung beinhaltet. Im <body>-tag können mit den Attributen folgende Einstellungen geändert werden: die Textfarbe die Hintergrundfarbe die Farbe der Links (Verweise) ein Hintergrundbild die Seitenränder Die Attribute für die Farben haben natürlich auch Farben als Werte. Farben in HTML Eine Farbe setzt sich aus Rot-, Grün- und Blau-Anteilen zusammen, die man häufig "RGB- Werte" nennt. Diese Werte müssen in hexadezimaler Schreibweise angegeben werden. Zusätzlich werden diese Farben interpretiert. Jede hexadezimale Farbdefinition ist 6-stellig und entspricht dem Schema #xxxxxx. Je zwei Stellen bestimmen den Rot-, Grün- und Blau-Anteil. Zum Beispiel: #ff0000 = Rot #00ff00 = Grün #0000ff = Blau Hexadezimale Ziffern sind: dezimal 0 = hex 0 dezimal 6 = hex 6 dezimal 12 = hex c dezimal 1 = hex 1 dezimal 7 = hex 7 dezimal 13 = hex d dezimal 2 = hex 2 dezimal 8 = hex 8 dezimal 14 = hex e dezimal 3 = hex 3 dezimal 9 = hex 9 dezimal 15 = hex f dezimal 4 = hex 4 dezimal 10 = hex a dezimal 5 = hex 5 dezimal 11 = hex b Um die unterschiedlichen Attribute einmal anzuwenden, legen Sie bitte eine neue Datei an und geben Sie folgenden Text ein: 33

34 Beispiel: <html> <head> <title>body-anweisungen</title> </head> <body> es wird Zeit, ein paar Einstellungen im Body zu ändern. </body> </html> Speichern Sie die Datei in einem beliebigen Verzeichnis. Im Browser sieht das Dokument etwa so aus: Hintergrundfarbe definieren Die Hintergrundfarbe wird mit dem Attribut bgcolor im <body>-tag definiert. Öffnen Sie dazu wieder Ihr HTML-Dokument im Texteditor. Als Hintergrundfarbe soll ein Blauton eingestellt werden. Aufgabe: Erweitern Sie das einleitende <body>-tag folgendermaßen: <body bgcolor="#cece00"> Speichern Sie die Datei und laden Sie sie anschließend in Ihren Browser (bzw. klicken Sie auf "Reload", falls er noch geöffnet ist). Im Browser wird jetzt etwa folgendes Bild zu sehen sein: 34

35 Textfarbe definieren Auch die Textfarbe lässt sich über ein Attribut im <body>-tag einstellen. Um sie auf weiß zu setzen, führen Sie die folgenden Schritte aus: Erweitern Sie das einleitende <body>-tag um text="#ffffff" so, dass es insgesamt so lautet: <body bgcolor="#cece00f" text="#ffffff"> Speichern nicht vergessen! Laden Sie die Datei anschließend in Ihren Browser (bzw. Reload) Im Browser wird jetzt etwa folgendes Bild zu sehen sein: Farbe der Links definieren Um die Farbe der Verweise festzulegen, stehen drei Attribute zur Verfügung, die ebenfalls im einleitenden <body>-tag eingesetzt werden können. link="#xxxxxx" = Farbe noch nicht besuchter Links alink="#xxxxxx" = Farbe eines Links, der gerade aktiviert wird (engl. active link) vlink="#xxxxxx" = Farbe eines Links, der schon besucht wurde (engl. visited link) Aufgabe: Ändern Sie die Farbe der Links Erweitern Sie das einleitende <body>-tag folgendermaßen: link="#00ff00" alink="#660000" vlink="#00ff00" Insgesamt sieht es jetzt so aus: <body bgcolor="#cece00" text="#ffffff" link="#000080" alink="#0000ff" vlink="#666666"> Um die neuen Einstellungen zu testen, müssen Sie noch einen Link im Dokument eintragen. In diesem Beispiel wird das Wort "Einstellungen" zur Homepage von Netscape gelinkt. Ändern Sie dazu die Datei so, dass der Text zwischen <body> und </body> so aussieht: Es wird Zeit, ein paar <A HREF=" im Body zu ändern Speichern nicht vergessen! Und das erwartet Sie im Browser bei nicht-aktivem und noch nicht besuchtem Link: 35

36 HTML-Grundlagen: Hintergrundbilder einsetzen Dieses Bild soll als Hintergrundbild verwendet werden. Dazu müssen Sie es zunächst auf Ihrer Festplatte im selben Verzeichnis wie die HTML-Datei speichern. Nennen Sie es ziegel.gif. Das funktioniert bei Windows-Rechnern folgendermaßen: 1. Klicken Sie mit der rechten Maustaste auf das Bild (engl. Image). 2. Wählen Sie den Befehl "Grafik speichern" (engl. Save Image). 3. Geben Sie das Verzeichnis an, in dem das Bild gespeichert werden soll (das, in dem die HTML-Datei liegt). Mac-Anwender gehen so vor: 1. Klicken Sie auf das Bild und halten Sie die Maustaste gedrückt. 2. Wählen Sie den Befehl "Grafik speichern" (engl. Save Image) 3. Geben Sie den Ordner an, in dem das Bild gespeichert werden soll (der, in dem die HTML-Datei liegt) Ein Hintergrundbild kann mit dem Attribut background in ein HTML-Dokument eingebunden werden. 1. Löschen Sie aus dem <body>-tag die Anweisung bgcolor="#0099ff". 2. Setzen Sie die Textfarbe auf Schwarz: text="#000000" und die Linkfarbe auf Rot: link="#ff0000". 3. Geben Sie den Befehl für das Hintergrundbild ein: background="ziegel.gif" 4. Insgesamt sieht das Tag jetzt so aus: <body background="ziegel.gif" text="#000000" link="#ff0000" alink="#660000" vlink="#00ff00"> 36

37 Im Browser sollte es so aussehen: Tipp: Zumindest der Internet Explorer kann noch etwas anderes mit einem Hintergrundbild machen: bgproperties=fixed Dieses Attribut wird nur vom Internet Explorer interpretiert und sorgt dafür, dass sich das Hintergundbild beim Scrollen nicht mit bewegt. Dabei entsteht eine Art Wasserzeichen-Effekt. HTML-Grundlagen: Seitenränder Angaben für den Internet Explorer: leftmargin=0 rightmargin=0 topmargin=0 bottommargin=0 Angaben für Netscape Navigator: marginwidth=0 marginheight=0 Die Werte sind jeweils die Ränder in Pixeln: leftmargin = Rand an der linken Seite rightmargin = Rand an der rechten Seite topmargin = Rand am Anfang der Seite bottommargin = Rand am Ende der Seite marginwidth = Rand jeweils links und rechts marginheight = Rand jeweils oben und unten Achtung: Die beiden Browser interpretieren nicht die gleichen Attribute, deswegen müssen Sie beide Varianten in Ihre Seiten einbauen, wenn Sie die Seitenränder verändern wollen. Eine bessere Möglichkeit die Seitenränder zu beeinflussen ist mit CSS möglich. 37

38 HTML-Grundlagen: Zusammenfassung (VII) 1. Einstellungen Alle Anweisungen im einleitenden <body>-tag beziehen sich immer auf das gesamte Dokument. Das ist vergleichbar mit den Seiteneinstellungen im Textverarbeitungsprogramm. 2. Farben Eine Farbe setzt sich aus Rot-, Grün- und Blau-Anteilen zusammen, die man häufig "RGB-Werte" nennt. Diese Werte müssen in hexadezimaler Schreibweise angegeben werden. 3. Hintergrundbild Ein Hintergrundbild kann mit dem Attribut background in ein HTML-Dokument eingebunden werden: z.b.: <body background="ziegel.gif"> 4. Seitenränder Die Werte sind jeweils die Ränder in Pixeln. Frames - Warum Sie keine Frames einsetzen sollten Ein umstrittenes Kapitel in HTML - die Frames. Frames-Definition Wörtl. Rahmen - rechteckiger Bereich eines Browserfensters. Die Anordnung aller Einzelframes nennt man Frameset. In WWW-Browsern kann das Anzeigefenster so in Frames aufgeteilt werden, dass mehrere HTML-Seiten gleichzeitig angezeigt werden können. Üblicherweise bleibt ein kleiner Frame konstant und zeigt Navigationselemente für eine Seite an, und ein großer Frame zeigt die Inhalte der einzelnen Seiten. Frames können tückisch sein, wenn der Webdesigner es unterlässt, beim Verlinken fremder Sites das Frameset wieder zu entfernen. Deutsche Gerichte vertreten hier gelegentlich die Meinung, man mache sich damit die Inhalte der fremden Seiten zu Eigen. Noch ungeklärt ist die Frage, ob nur direkte Links strafbar sind oder auch Links "um drei Ecken". Frames haben ein semantisches Problem: jede Seite im Internet hat eine URL - bei Frames ist das nicht so. Da hat eine URL mehrer Dateien! Hinter index.html versteckt sich also die ganze Seite. Es ist nicht so einfach möglich direkt auf eine der Unterseiten zu springen. Und wenn man die Unterseiten separat öffnet, ist die Navigation nicht vorhanden. Unterschiedliches Aussehen Verschiedene Browser stellen Frames unterschiedlich dar, was viel weiter reichendere Auswirkungen hat, als die unterschiedliche Darstellung von normalen HTML-Elementen. Bookmarking Frames verhindern Bookmarking! Sie können keine einzelne Seite als Lesezeichen 38

39 speichern. Man kann z.b. auch niemanden den direkten Link geben, sondern muss den Weg beschreiben. So sollte es nicht sein, denn wir benutzen ja nicht umsonst Hyper Text Markup Language (HTML), mit dem man ganz gezielt auf Homepage-Inhalte verlinken kann und nicht nur auf ganze Seiten. History Die Browser History wird verkompliziert. Einige Browser steigen ganz aus, andere können gut damit umgehen, aber dennoch ist es für den User komplizierter zurück zu gehen. Direkter Link Wenn das Frameset umgangen wird, und nur der Inhalt-Frame angezeigt wird, dann hat der User keine Navigation. Als Beispiel besuchen Sie diese Seite: 10 Der User kann sich nicht selber aussuchen was er angezeigt bekommen will. Z.B. klickt er auf 'Link in neuem Fenster öffnen' und schon hat er keine Navigation mehr: 11 Scrolling Wenn man nicht gut aufpasst, ist die Navigation breiter als der frame und der user muss scrollen. Wenn man scrollen verboten hat, schaut der User dumm drein. Das hat nicht unbedingt etwas mit der Unfähigkeit des Webdesigners zu tun (außer, dass er Frames einsetzt :-) ), sondern hängt komplett vom Medium ab, über das der Webdesigner keine Annahme machen kann. Aktiver Frame Die Browser/Benutzer können sich nicht immer sicher sein, welcher Frame das aktive ist. Auf welchem Frame werden die Tastdrücke jetzt angewendet? Wo wird mit meiner Scrollmaus gescrollt? Drucken Frames zu drucken ist eine Qual. Einige Browser beherrschen das nicht ordentlich. Suchmaschinen Framesets können von Suchmaschinen nicht vernünftig ausgelesen werden. Viele Suchmaschinen nutzen nicht nur die Meta Tags. Oft wird dann in den Suchmaschinen auf eine Unterseite verlinkt (was ja auch sinnvoll ist). Bei Frames fehlt hier aber die Navigation. Mehr Aufwand Frames zu warten ist komplizierter als ein CSS-Layout. Man muss ein <noframe> anbieten, oder man verzichtet absichtlich (und unnütz) auf Besucher! Auch wenn jeder PC Browser Frames unterstützt, der Trend geht immer weiter hin zu Handys und Handhelds, die nicht die gewünschte Fenstergröße und Leistungsfähigkeit haben so etwas darzustellen. 39

40 Copyright Bei Frames kann es vorkommen, dass man (aus Versehen) eine andere Seite im eigenen Frame öffnet, das kann eine Copyright Verletzung sein. Blindenschrift - Barrierefreies Internet Werden Frames verwendet ist für einen sehbehinderten Menschen bereits jetzt schon Schluss. Der Hinweis "Diese Seite verwendet Frames. Frames werden von Ihrem Browser nicht unterstützt." ist ihm dabei auch nicht sehr hilfreich. Frames bereiten blinden und sehbehinderten Menschen erhebliche Schwierigkeiten. Zum einen benutzen sie zum Teil noch Spezialbrowser, die Frames nicht unterstützen, zum anderen haben sie Probleme, per Tastatur von einem Frame zum anderen zu gelangen. Gem. dem am in Kraft getretenen Behindertengleichstellungsgesetz sind Ministerien und Behörden sogar dazu verpflichtet, ihre Internetauftritte so zu gestalten, dass sie von behinderten Menschen grundsätzlich uneingeschränkt genutzt werden können ( 11 I 1 BGG). Damit für blinde Menschen eine Website nicht als unübersichtlich erscheint, sollte daher auf Frames am besten ganz verzichtet werden Mit Frames spart man keine Ladezeit Oft wird als Pro-Argument von Frames aufgeführt, dass der eine Teil der Seite doch nicht jedes Mal neu geladen werden muss und das man deshalb Ladezeit vorteile hat. Das ist nicht so. Alle Bilder werden vom Browser sowieso im Cache gespeichert und müssen nicht noch mal gelesen werden. Also muss nur der Text neu geladen werden. Dafür hat man aber den Vorteil, dass man den (X)HTML overhead nicht mehrmals laden muss (wie im Frameset, wo jeder Bereich seinen Doctype, seinen Head usw. braucht). Frames sind sehr unflexibel! Möchte man irgendwas etwas exotischer gestalten, ufert das in unzählig viele Frames aus, was dann schlecht wartbar und auch schlecht zu benutzen ist. Eine Anpassung an die Größe des Anwendungsfenster ist sehr schwierig. Frames gehören nicht zum XHTML Standard Zum Beispiel ist das target Attribut nicht mehr im Standard enthalten (ohne das kann man aber praktisch keine Frames benutzen). Das hat auch einen Grund, denn der Benutzer soll lernen seinen Browser zu bedienen und nicht von der Webseite bevormundet werden. Ich möchte entscheiden, wann eine neue Seite geladen wird und wann nicht. Genauso sind solche Sachen, wie das weglassen des Randes usw. nicht mehr möglich. Frames verleiten dazu JavaScript einzusetzen Auf Seiten, die Frames benutzen kommt man nur selten um JavaScript herum (weshalb JavaScript nicht für elementare Dinge eingesetzt werden soll, ist eine andere Sache. Nur so viel dazu: Nicht jeder hat JavaScript aktiviert und möchte damit belästigt werden - Mozilla für Linux hat es z.b. standardmäßig deaktiviert). Zum Beispiel ist es normalerweise nicht möglich zwei Frames gleichzeitig zu ändern. Und das nachladen von Framesets ist auch nur 40

41 mit JavaScript möglich. Anpassung des Menüs ist kaum möglich! Wo bin ich denn gerade auf der Seite? Das fragt man sich öfter auf Seiten, die Frames zur Navigation einsetzen. Der Grund ist, dass sich das Menü nicht der Seite anpasst. Oft findet man auch die Untermenüpunkte ganz woanders, weil es ohne viel JavaScript eben nicht möglich ist, das Menü zu erweitern. Fazit: Die oben beschriebene Liste beansprucht keine Vollständigkeit. Dennoch sprechen die Argumente eine deutliche Sprache. Fast alle informationsvermittelnden Seiten, die auf Suchmaschinen angewiesen sind, verzichten deshalb auf Frames. Ausgehend von komplexen Sitestrukturen ist die Entwicklung mit einer auf jeder Seite präsenten Navigationsleiste mit modernen Methoden wie CSS oder bei dynamischen Seiten mit serverseitig eingebundenen Navigationen in Summe schneller und daher auch kostengünstiger realisierbar. Deshalb empfehle ich aus oben beschriebenen Gründen, auf Frames ganz zu verzichten. 41

42 HTML-Grundlagen: Webfarben Die Web-Palette Nutzen Das Internet ist ein Medium, das unabhängig von der jeweiligen Computerplattform ist. Somit kann man also nicht voraussetzen, dass der Besucher einer Web-Site über eine bestimmte Hardware-Ausstattung verfügt. Dies bedeutet für den Bereich Farben und Grafik, das man nicht von einer bestimmten Anzahl verfügbarer Farben auf einem Rechner ausgehen kann. Damit die Wiedergabe der Farben einer Web-Site und der dort enthaltenen Grafiken nicht verfälscht wird, sollte bei der Programmierung der Web-Seiten und bei der Bildbearbeitung nach Möglichkeit eine einheitliche Web-Palette benutzen. Anderenfalls könnte es passieren, dass homogene Farbflächen bei Grafiken gerastert oder Farben verfälscht werden. Aufbau Die Web-Palette orientiert sich im Aufbau an dem RGB-Farbmodell, wobei aber von jedem einzelnen Farbkanal (also Rot, Gün oder Blau) nur 6 Farbwerte benutzt werden. Dies bedeutet, dass man bei 3 Farbkanälen und 6 Farbwerten pro Kanal also nur 216 Farben zur Verfügung hat. Die Farbwerte sind nicht willkürlich festgelegt, sondern ergeben sich in 20% Schritten. Prozent: 0% 20% 40% 60% 80% 100% RGB: Hexadecimal: cc ff Verwendung Innerhalb des HTML-Codes werden die Farbwerte der Web-Palette hexadezimal dargestellt. Dem eigentlichen Wert wird das Rautenzeichen "#" vorangestellt, dann folgt der Wert für Rot, Grün und Blau, z.b. Farbanweisungen im Body-Tag dieser HTML-Seite: <body bgcolor="#ffffff" link="#0066cc" vlink="#999999" alink="#999999"> für einzelne Textzeilen: farbe macht das Leben bunt oder für farbige Tabellenhintergründe: <td align="left" bgcolor="#0000ff"> 42

43 43