Einführung in HTML. Erstellen einfacher Webseiten mit Text, Bildern und mehr... Version

Transkript

1 Erstellen einfacher Webseiten mit Text, Bildern und mehr... Version Universität Osnabrück - Rechenzentrum - Dipl.-Math Frank Elsner Albrechtstrasse 28 (AVZ) Osnabrück Frank.Elsner@rz.uni-osnabrueck.de Internet:

2 Inhaltsverzeichnis 1 Einleitung Voraussetzungen Selbststudium oder Teilnahme am Kurs Überblick über die behandelten Themen Software Download Weiterführende Literatur Aufbau eines HTML Dokuments Gerüst Beispiele für Elemente Funktion eines WWW Browsers Text und Markierung (Markup) Erfassen von HTML Quelltext Auswahl eines HTML Editors Grundlegende Bedienung von Phase Übungen Lösungen Formatieren von Text Überblick Beispiele: Textformatierungen Übungen Lösungen Formatieren von Absätzen Beispiele Absatzformatierung Beispiele Überschriften und Linien Beispiele Einrückung und vorformatierter Text Übungen Lösungen Einfügen von Listen und Glossaren Beispiele Listen Übungen Lösungen Einfügen von Hyperlinks und Ankern Beispiele: Springen innerhalb eines Dokuments Beispiele: Aktives Inhaltsverzeichnis Beispiele: Verweis auf eine Internet Seite... 37

3 7.4 Übungen Lösungen Einfügen von Tabellen Bezeichnungen Aufbau einer Tabelle Elemente einer Tabelle Beispiele: einfache Tabellen mit Überschriften Beispiele: komplexe Tabelle Übungen Lösungen Einfügen von Bildern Elemente Formate JPEG Beispiele: Icons Beispiele: Navigation in einem Dokument Quellen fürbilder Übungen Lösungen Einfügen von sensitive Bildern (image maps) Vorgehensweise Elemente Erstellen einer sensitiven Karte mit GeoHTML Übungen Lösungen Verwenden von Rahmen (Frames) Beispiele: Einteilung des Fensters in 3 Rahmendicke Beispiele: Aktives Inhaltsverzeichnis Übungen Lösungen Gestalten der Seite Überblick Beispiel: Farbiger Hintergrund Beispiel: Hintergrund-Bild Übungen Lösungen Einbinden von Formularen... 65

4 13.1 Überblick Beispiel: Versenden eines Formulars per Übungen Hinzufügen von Meta-Informationen Überblick Verarbeiten von Formularen mit CGI Skripten Gestalten mit Cascading Style Sheets (CSS) Ausblick Anhang 1: Farben... 74

5 Einleitung 1 Einleitung In diesem Skript lernen Sie, einfache Webseiten mit Text, Bildern und weiteren Elementen wie z.b. Listen oder Tabellen zu erstellen. Zur Bearbeitung umfangreicherer Web-Projekte steht im Rechenzentrum weiterführende Literatur zur Verfügung. 1.1 Voraussetzungen In diesem Skript werden grundlegende Kenntnisse in Windows (Dateisystem, Starten und Beenden von Programmen, Maus, Tastatur,...) sowie gute Kenntnisse beim "Surfen" (Starten und Bedienen von Internet Explorer, Netscape Communicator oder ähnlicher Browser) vorausgesetzt. 1.2 Selbststudium oder Teilnahme am Kurs Sie können dieses Skript im Selbststudium durcharbeiten und dabei insbesondere die Übungen bearbeiten. Wir empfehlen Ihnen zum besseren Verständnis, an einem Kurs des Rechenzentrums zu diesem Thema teilzunehmen. 1.3 Überblick über die behandelten Themen In diesem Skript werden folgende Themen einführend behandelt: 1. Aufbau einer Webseite (Gerüst) 2. Textformatierung 3. Absatzformatierung 4. Listen und Glossare 5. Verweise (Hyperlinks) und Anker 6. Bilder und sensitive Bilder (Image Maps) 7. Tabellen 8. Rahmen 5

6 Einleitung Aufgrund des einführenden Charakters dieses Kurses können nicht alle (HTML-) Syntaxelemente vollständig behandelt werden. Sie können sich in der weiterführenden Literatur informieren, welche weiteren Möglichkeiten bestehen. 1.4 Software Zum Bearbeiten der Übungen benötigen Sie für jede der 4 wesentlichen Kategorien ein geeignetes Programm: 1. Erstellen von Webseiten: HTML Editor [z.b. Phase 5, Macromedia Dreamweaver, StarOffice] 2. Bearbeiten von Bildern: Bildbearbeitungsprogramm [z.b. Paintshop Pro, Adobe Photoshop] 3. Erstellen sensitiver Bilder: Image Map Editor [z.b. GeoHTML] 4. Anzeigen von Webseiten: Web Browser [z.b. Netscape Communicator, Mozilla, Internet Explorer, Opera] Empfehlenswert als Ergänzung für fortgeschrittene Web Designer, aber NICHT zwingend erforderlich für das Verständnis und die Bearbeitung dieses Kurses, sind folgende Kategorien von Programmen: 1. Verwenden eines eigenen Web Servers WWW Server [z.b. Apache Web Server für Windows] 2. Einfügen von Perl Skripten Perl Interpreter [z.b. ActiveState Perl für Windows] 3. Einfügen von PHP Skripten PHP Interpreter [z.b. PHP Triad mit einem Kombi-Paket aus Apache, MySQL und PHP für Windows] 4. Aufbauen eines Medien-Archivs Bildbetrachungsprogramm [z.b. XnView, ACDSee, ThumbsPlus, imatch] 5. Überprüfen der Verzeigerung (tote Links,...) Link Checker [z.b. Xenu Link Checker] 6

7 Einleitung Linux und Mac Benutzern stehen im Funktionsumfang ähnliche Programme zur Verfügung, die z.t. zum Lieferumfang der Distributionen (Debian, SuSE Linux, Red Hat Linux, Mac X) gehören. 1.5 Download Im Hochschulnetz steht auf dem Softdist FTP Server ein Webdesign Pack mit einer kleinen, aber feinen Auswahl der genannten Programme zur Verfügung. Die dort befindlichen Programme werden NICHT auf dem neuesten Stand gehalten, die neuesten Versionen befinden sich jeweils auf den Heimatseiten der Hersteller im Bereich Download. WebdesignPack Download (nur im im Hochschulnetz): (Stand: März 2004) ftp://softdist.rz.uni-osnabrueck.de/webdesignpack 1.6 Weiterführende Literatur 1. SelfHTML Hier finden Sie das Standardwerk im Internet für HTML; oft kopiert, aber in der Qualität nicht erreicht. 2. World Wide Web Konsortium Hier werden alle das Web betreffenden Aktivitäten koordiniert und verbindliche Regeln vereinbart. 3. SelfHTML HTML Kurzreferenz HTML Kurzreferenz 7

8 Aufbau eines HTML Dokuments 2 Aufbau eines HTML Dokuments 2.1 Gerüst Jede Webseite oder Internet Seite (im folgenden als HTML Dokument bezeichnet) besitzt einen HTML Quelltext. HTML Quelltext besitzt folgenden prinzipiellen Aufbau aus Kommentar (kursiv), Text und HTML Markierungen (fett): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  <html>  <head>  <title>meine Heimatseite</title>  </head>  <body> Hier steht der eigentliche Text für meine Heimatseite...  </body>  </html> Kommentare helfen dem Autor bei der Gliederung seines HTML Dokumentes, werden aber nicht im WWW Browser dargestellt. HTML Quelltext kann beliebig formatiert werden. Die Einrückung soll die Struktur verdeutlichen: <html> <head> <title>meine Heimatseite</title> </head> <body> Hier steht der eigentliche Text für meine Heimatseite... </body> </html> 8

9 Aufbau eines HTML Dokuments Obwohl ein "vollständiges" HTML Dokument alle genannten Bereiche enthalten sollte, zeigen die meisten WWW Browser auch ein HTML Dokument an, dessen HTML Quelltext nur den Text-Bereich enthält. Hier steht der eigentliche Text für meine Heimatseite... Innerhalb des Text-Bereiches können Sie Elemente wie Überschriften, Bilder, Tabellen, Listen usw. eingefügen. 2.2 Beispiele für Elemente HTML steht für Hypertext Markup Language (in etwa: Hypertext-Auszeichnungssprache oder Hypertext Markierungssprache). Eine wesentliche Eigenschaft von HTML besteht darin, daß sie die generelle Struktur des Inhalts innerhalb eines Dokuments beschrieben wird, nicht jedoch die endgültige Darstellungsweise des Inhalts auf der (gedruckten) Seite oder auf dem Bildschirm. HTML ist eine Sprache, welche die Struktur eines Dokuments beschreibt und nicht seine tatsächliche Gestaltung. Die Theorie dahinter ist, daß die meisten Dokumente gemeinsame Elemente besitzen wie zum Beispiel Titel, Absätze oder Listen, die konsequent in einheitlicher Form dargestellt werden sollten. Das folgende Beispiel zeigt ein HTML Dokument mit einigen Elementen: 1. Überschrift der Ebene 1 (h1 wie heading 1) 2. Textauszeichnung für fette Schrift (b wie bold) 3. Textauszeichnung für kursive Schrift (i wie italic) 4. Absatzformatierungen für Absätze mit oder ohne Leerzeile (p wie paragraph und br wie break) Der HTML Quelltext enthält folgenden Text-Bereich: <h1>einleitung</h1> <p> <b>html</b> ist die wesentliche Sprache im <b>world Wide Web</b>. Ein HTML Syntax Element (<i>html tag</i>)... </p> Dieses HTML Dokument wird folgendermaßen in einem WWW Browser (hier als Beispiel der integrierte WWW Browser von Dreamweaver) angezeigt: 9

10 Aufbau eines HTML Dokuments Erkennbar ist folgende allgemeine Struktur:  <h1>einleitung</h1> <b>html</b> <i>html tag</i> <p>absatztrennung mit Leerzeile</p> <br>absatztrennung ohne Leerzeile Abhängig von der verwendeten Markierung (tag) wird der Inhalt im Beispiel als Überschrift der Ebene 1, fett oder kursiv dargestellt. Absätze werden mit oder ohne Leerzeile voneinander getrennt. Die HTML Markierung <br> besitzt übrigens weder Inhalt noch Ende- Markierung. Eine Markierung kann durch Attribute erweitert werden, die die Darstellung eines Elementes genauer festlegen. Im folgenden Beispiel wird ein Absatz durch das Attribut align mittig ausgerichtet.  <p align= center >Absatztrennung mit Leerzeile</p> 2.3 Funktion eines WWW Browsers WWW Browser dienen zum einen zur Abwicklung der Netzwerkfunktionen wie dem Laden von Dokumenten aus dem Netz, und zum anderen formatieren sie das HTML-Dokument am Bildschirm. Wenn Sie ein HTML-Dokument mit einem WWW Browser (wie z.b. Internet Explorer oder Netscape Communicator) laden, zergliedert der WWW Browser die HTML Elemente und stellt den Text und die Abbildungen auf dem Bildschirm formatiert dar. Der WWW Browser erstellt aus den Namen der Elemente die tatsächlichen Formate auf dem Bildschirm; 10

11 Aufbau eines HTML Dokuments Überschriften könnten dann z.b. in einer größeren Schrift als der restliche Text auf der Seite erscheinen. Verschiedene WWW Browser, die auf verschiedenen Plattformen operieren, können für dieselben Elemente unterschiedliche Formatkonvertierungen benutzen. Einige WWW Browser verwenden vielleicht andere Schriftarten als die übrigen. So könnte ein WWW Browser z.b. Kursivschrift auch kursiv darstellen, während ein anderer sie als invertierten oder unterstrichenen Text auf Systemen darstellt, die keine kursive Darstellung unterstützen. Oder er könnte eine Überschrift mit Großbuchstaben darstellen, anstatt eine größere Schrift einzusetzen. Für Sie als Webseiten-Designer bedeutet das, daß die Seiten, die Sie mit HTML gestalten, auf unterschiedlichen Systemen und mit unterschiedlichen WWW Browsern ganz anders aussehen können. Die tatsächlichen Informationen und Verknüpfungen innerhalb der Seiten werden noch vorhanden sein, aber ihre Darstellung auf dem Bildschirm wird sich ändern. Sie können eine Webseite so entwerfen, daß sie auf Ihrem Computersystem perfekt aussieht, wenn man sie jedoch auf einem anderem System betrachtet, kann sie vollkommen anders aussehen (vielleicht sogar unlesbar sein). 2.4 Text und Markierung (Markup) HTML ist eine Markierungs- oder Auszeichnungs-Sprache (»markup language«). In einer Markierungssprache zu schreiben bedeutet, daß Sie mit dem Text Ihrer Seite anfangen und dann spezielle Markierungen um Worte bzw. Absätze setzen. Wenn Sie bereits mit anderen Markierungssprache wie LaTeX gearbeitet haben, bei denen Sie spezielle Codes für solche Befehle wie»fettdruck«einsetzen mußten, dann wird Ihnen dies nicht fremd vorkommen. Die Markierungen bestimmen die verschiedenen Teile der Seite und führen zu unterschiedlichen Effekten im WWW Browser. HTML arbeitet mit einem festen Vorrat an Markierungen (tags), die Sie benutzen können. Sie können allerdings KEINE EIGENEN Markierungen (tags) erfinden, um neue Darstellungsweisen oder Merkmale zu erschaffen. Sie können sich allerdings mit XML beschäftigen, um dieses Problem anzugehen ;:). 11

12 Erfassen von HTML Quelltext 3 Erfassen von HTML Quelltext 3.1 Auswahl eines HTML Editors In diesem Kurs wollen wir den vollständigen HTML Quelltext selbst erfassen. Sie denken vielleicht, daß das Eintippen der HTML Markierungen und des Inhalts recht aufwändig ist. Zugegeben, aber: Nur wenn Sie die Bedeutung und den richtigen Einsatz der Markierungen (Tags) beurteilen können, werden Sie in der Lage sein, "guten" und "effektiven" HTML Quelltext zu produzieren bzw. bestehenden HTML Quelltext zu analysieren, für eigenen Projekte zu modifizieren und ggf. auch zu verbessern. Es gibt eine Menge Freeware- und Shareware-Programme zum Editieren von HTML Dokumenten. Die meisten dieser Programme sind im wesentlichen Texteditoren mit zusätzlichen Menü-Einträgen oder Auswahl-Buttons, welche die gewünschten HTML Markierungen in Ihren Text einfügen. Im professionellen Bereich werden häufig HTML Editoren verwendet, die sowohl eine Quelltext-Ansicht (code) wie auch eine Darstellungs-Ansicht (layout) präsentieren, die wichtigsten Beispiele sind Macromedia Dreamweaver, Adobe GoLive und Microsoft Frontpage. In diesem Kurs werden wir den freien HTML Editor Phase 5 verwenden. 3.2 Grundlegende Bedienung von Phase 5 Starten Sie Phase 5: 12

13 Erfassen von HTML Quelltext Erstellen Sie über Datei > Neues HTML Dokument ein leeres HTML Dokument und tragen Sie passende Werte ein (hier den Titel Textmarkierung ): Klicken Sie dann auf Erstellen, um das leere Dokument zu laden. Phase 5 erstellt ein HTML Gerüst mit sämtlichen erforderlichen Markierungen (tags) und Inhalten: 13

14 Erfassen von HTML Quelltext Fügen Sie im Textbereich folgenden Text ein: Verwenden Sie ggf. die Werkzeugleiste, um Markierungen in den den HTML Quellcode einzufügen. Markieren Sie hierzu den Inhalt und klicken Sie dann auf die gewünschte Markierung (wie z.b. H1 für Überschrift der Ebene 1). 14

15 Erfassen von HTML Quelltext Speichern Sie das Dokument über Datei > Speichern unter dem Dateinamen textmarkierungen.htm. Klicken Sie nun auf das Browser Symbol, um den integrierten WWW Browser zu starten (Darstellungs-Modus): Das Dokument wird nun im Darstellungs-Modus angezeigt: Klicken Sie auf das Editor Symbol, um wieder in den Quelltext-Modus zu wechseln: Beenden Sie Ihre Sitzung über Datei > Programm beenden. 3.3 Übungen 1. Schreiben Sie ein HTML Dokument mit Titel Die Erde und Quelltext Text1. 2. Speichern Sie das Dokument unter dem Dateinamen erde.htm ab. 3. Laden Sie diese Datei erde.htm in einen WWW Browser. 4. Ergänzen Sie im HTML Dokument den Text Text2 mit geeigneten Absatzformatierungen. Verwenden Sie Cut&Paste, um den Text zu markieren und in Ihr HTML Dokument einzufügen. Text1: Überschrift Ebene 1 (h1): Erde: Der Wasserplanet 15

16 Erfassen von HTML Quelltext Text zu dieser Überschrift: 70% der Erdoberfläche besteht aus Wasser. Die restlichen 30% sind Gebirge, Vulkane, Wüsten, Ebenen, und Täler. Text2: Die Erde ist der drittnächste Planet zur Sonne. Sie hat hat eine Atmosphäre, die aus vielen verschiedenen Gasen besteht. Aber der Hauptteil sind Stickstoff und Sauerstoff. Die Atmosphäre gibt uns Luft zum Atmen. Wir leben auf dem Planeten Erde. Die Erde umkreist die Sonne. Sie braucht ein Jahr für einen kompletten Umlauf. Außerdem dreht sich die Erde um ihre Achse. Eine Umdrehung dauert einen Tag. Die Erdachse steht nicht gerade, sondern ist ein weinig geneigt. Durch diese Neigung entstehen die Jahreszeiten. Ohne diese Neigung hätten wir das ganze Jahr hindurch ungefähr die gleichen Temperaturen. 3.4 Lösungen zu 1: <html> <head> <title>erde</title> <meta name="author" content="administrator"> <meta name="generator" content="ulli Meybohms HTML EDITOR"> </head> <body text="#000000" bgcolor="#ffffff" link="#ff0000" alink="#ff0000" vlink="#ff0000"> <h1>erde: Der Wasserplanet</h1> 70% der Erdoberfläche besteht aus Wasser. Die restlichen 30% sind Gebirge, Vulkane, Wüsten, Ebenen, und Täler. </body> </html> 16

17 Formatieren von Text 4 Formatieren von Text 4.1 Überblick In diesem Kapitel werden folgende Markierungen (Tags) zur Formatierung von Text sowie Möglichkeiten zur Darstellung von Sonderzeichen behandelt: Umlaute u. scharfes S Platzhalter HTML-Sonderzeichen und deren Maskierung Umlaute u. scharfes S ä = ä Ä = Ä ö = ö Ö = Ö ü = ü Ü = Ü ß = ß Leerzeichen von der Beite n = Leerzeichen von der Beite m = Bindestrich von der Beite n = &endash; Bindestrich von der Beite m = &emdash; Leerzeichen ohne Umbruchmöglichkeit dahinter = Zeichen < = < Zeichen > = > Zeichen & = & Zeichen " = " ä = ä Ä = Ä ö = ö Ö = Ö ü = ü Ü = Ü ß = ß 17

18 Formatieren von Text Logische Textformatierung Physische Textformatierung Schriftart, Schriftgröße und Schriftfarbe <strong>... </strong> = wichtig <em>... </em> = emphatisch <tt>... </tt> = dicktengleich <cite>... </cite> = Zitat <code>... </code> = Quellcode <kbd>... </kbd> = Terminal <var>... </var> = Variable <samp>... </samp> = Beispiel <dfn>... </dfn> = Definition <b>... </b> = fett <i>... </i> = kursiv <u>... </u> = unterstrichen <s>... </s> = durchgestrichen <big>... </big> = große Schrift <small>... </small> = kleine Schrift <sub>... </sub> = tiefgestellt <sup>... </sup> = hochgestellt <basefont size= n >... </basefont> = Default-Schriftgröße (1: sehr klein bis 7: sehr groß) <font size= n >... </font> = Schriftgröße <font color= #rgb >... </font> = Schriftfarbe (r = Rotwert, hexadezimal 00 bis FF g = Grünwert, hexadezimal 00 bis FF b = Blauwert, hexadezimal 00 bis FF) <font color= color_name >... </font> = Schriftfarbe (color_name: red, green, blue,...) <font face= font_name >... </font> = Schriftart (font_name: Arial, Courier,...) 4.2 Beispiele: Textformatierungen Die folgenden Beispiele zeigen einige Textformatierungen im HTML Quelltext (violett) und anschließend die Darstellung in einem Browser: 18

19 Formatieren von Text ä ä Ä ö Ö ü Ü ß ä Ä ö Ö ü Ü ß Dieser Satzdarf nicht getrennt werden, egal wie&n bsp;lang er ist. Dieser Satzdarf nicht getrennt werden, egal wie lang er ist. <br>& <br>> <br>< <br>" & > < " 19

20 Formatieren von Text <strong>wichtig</strong> <br><em>emphatisch</em> <br><tt>dicktengleich</tt> <br><cite>zitat</cite> <br><code>quellcode</code> <br><kbd>terminal</kbd> <br><samp>beispiel</samp> <br><dfn>definition</dfn></td> <b>fett</b> <br><i>kursiv</i> <br><u>unterstrichen</u> <br><blink>blinkend</blink> <br><s>durchgestrichen</s> <br><big>große Schrift</big> <br><small>kleine Schrift</small> <br>normal<sub>tiefgestellt</sub> <br>normal<sup>hochgestellt</sup> wichtig emphatisch dicktengleich Zitat Quellcode Terminal Beispiel Definition fett kursiv unterstrichen blinkend durchgestrichen große Schrift kleine Schrift normal tiefgestellt normal hochgestellt 20

21 Formatieren von Text <br><font face="" size="1">schriftgröße absolut 1</font> <br><font face="" size="2">schriftgröße absolut 2</font> <br><font face="" size="3">schriftgröße absolut 3</font> <br><font face="" size="4">schriftgröße absolut 4</font> <br><font face="" size="5">schriftgröße absolut 5</font> <br><font face="" size="6">schriftgröße absolut 6</font> <br><font face="" size="7">schriftgröße absolut 7</font> <p> Standard-Schrift ab hier neu definieren (Courier, blau, 3): <p> <basefont face="courier" size="3" color="blue"> Schrift <p> <font size="+1">schriftgröße relativ +1</font> <br> <font size="-2">schriftgröße relativ -2</font> <p> <font color="red">schriftfarbe rot</font> <p> <font face="times">schriftart Times</font> Schriftgröße absolut 1 Schriftgröße absolut 2 Schriftgröße absolut 3 Schriftgröße absolut 4 Schriftgröße absolut 5 Schriftgröße absolut 6 Schriftgröße absolut 7 Standard-Schrift ab hier neu definieren (Courier, blau, 3): Schrift Schriftgröße relativ +1 Schriftgröße relativ -2 Schriftfarbe rot Schriftart Times 4.3 Übungen 1. Formatieren Sie die Datei erde-2.htm so, daß Sie wie vorgegeben aussieht. Vergessen Sie nicht, die Datei abzuspeichern. Erde: Der Wasserplanet 21

22 Formatieren von Text 70% der Erdoberfläche besteht aus Wasser (b). Die restlichen 30% sind Gebirge (sup), Vulkane (i), Wüsten (u), Ebenen (big), und Täler (sub). Die Erde (size=+2, color=blue) ist der drittnächste Planet zur Sonne (size=+4, color=yellow). Sie hat hat eine Atmosphäre, die aus vielen verschiedenen Gasen besteht. Aber der Hauptteil sind Stickstoff und Sauerstoff. 4.4 Lösungen zu 1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>erde</title> </head> <body > <h1>erde: Der Wasserplanet </h1> 70% der Erdoberfläche besteht aus <b>wasser</b>. Die restlichen 30% sind <sup>gebirge</sup>, <i>vulkane</i>, <u>wüsten</u>, <big>ebenen</big>, und <sub>täler</sub>. <p> Die <font face="arial" size="+2" color="blue">erde</font> ist der drittnächste Planet zur <font face="arial" size="+4" color="yellow">sonne</font>. Sie hat hat eine Atmosphäre, die aus vielen verschiedenen Gasen besteht. Aber der Hauptteil sind Stickstoff und Sauerstoff. </body> </html> 22

23 Formatieren von Absätzen 5 Formatieren von Absätzen In diesem Kapitel werden folgende Markierungen (Tags) zur Formatierung von Absätzen behandelt: Absatzschaltung und Absatzausrichtung <p>...<p> = neuer Absatz mit Leerzeile dahinter <p align= left > = folgender Absatz linksbündig <p align= center > = folgender Absatz zentriert <p align= right > = folgender Absatz rechtsbündig Mehrere Elemente zentriert ausrichten: <div align= center >... beliebige Elemente... </div> Mehrere Elemente rechtsbündig ausrichten: <div align= right >... beliebige Elemente... </div> <br> = Zeilenumbruch an dieser Stelle Überschriften Andere Absatztypen Linie <nobr>... </nobr> = kein Zeilenumbruch im Bereich <wbr>... </wbr> = Zeilenumbruch NOBR-Bereich <h1>... </h1> = Überschrift 1. Ordnung <h2>... </h2> = Überschrift 2. Ordnung <h3>... </h3> = Überschrift 3. Ordnung <h4>... </h4> = Überschrift 4. Ordnung <h5>... </h5> = Überschrift 5. Ordnung <h6>... </h6> = Überschrift 6. Ordnung <h# align= left >... </h#> = Überschrift links <h# align= center >... </h#> = Überschrift zentriert <h# align= right >... </h#> = Überschrift rechts (# = 1-6) <pre>... </pre> = Bereits formatierter Text <address>... </address> = Internet-Adresse <blockquote>... </blockquote> = Zitat <hr...> = (Trenn-) Linie 5.1 Beispiele Absatzformatierung Die folgenden Beispiele demonstrieren die links-bündige, mittige und rechts-bündige Ausrichtung von Text: 23

24 Formatieren von Absätzen <b><i>merkur:</i></b> <p>wegen seiner großen Sonnennähe ist Merkur nur in der Abend- oder Morgendämmerung beobachtbar.... </p> Merkur: Wegen seiner großen Sonnennähe ist Merkur nur in der Abend- oder Morgendämmerung beobachtbar. Sein Abstand von der Erde schwankt zwischen 80 und 220 Millionen Kilometern. Seine Rotationsperiode beträgt 58,65 Tage, seine sider. Umlaufzeit beträgt 87,97 Tage. Da der Planet keine nennenswerte Atmosphäre besitzt, herrschen große Temperaturgegensätze zwischen Tag- und Nachtseite, etwa 585K (rund 310 C) und 150K (-120 C). Die Oberfläche des Merkur besitzt erdmondähnliche Formationen. <p align="center"><b><i>venus:</i></b> <p align="center">bezüglich Masse, Dichte und Radius sind ich Venus und Erde sehr ähnlich.... </p> Venus: Bezüglich Masse, Dichte und Radius sind ich Venus und Erde sehr ähnlich. In den anderen physikalischen Parametern treten jedoch kaum Gemeinsamkeiten auf. Eine Besonderheit gegenüber allen anderen Planeten ist die langsame Venusrotation von 243 Erdtagen, die entgegengesetzt (retrograd) zur Bahnbewegung um die Sonne gerichtet ist. Die Länge eines Sonnentages auf der Venus entspricht 117 Erdtagen. <p align="right"><b><i>jupiter:</i></b> <p align="right">der Planet Jupiter ist der größte und massereichste Planet des Sonnensystems; er gehört zu den hellsten Objekten des Himmels....</p> Jupiter Der Planet Jupiter ist der größte und massereichste Planet des Sonnensystems; er gehört zu den hellsten Objekten des Himmels. Je nach der Stellung von Jupiter und Erde ändert sich der Abstand des Planeten von der Erde zwischen 588 Mill. und 967 Mill. km. Schon bei Betrachtung des Jupiters mit kleinen Fernrohren fällt seine starke Abplattung auf, die er infolge seiner schnellen Rotation besitzt. Jupiter rotiert in weniger als 10h um seine Achse, die fast senkrecht auf seiner Bahnebene steht 5.2 Beispiele Überschriften und Linien Die folgenden Beispiele demonstrieren verschiedene Typen von Überschriften, mittige Ausrichtung und horizontale Linien. <h1>die Körper des Sonnensystems</h1> <h2>die Körper des Sonnensystems</h2> <h3>die Körper des Sonnensystems</h3> <h4>die Körper des Sonnensystems</h4> <h5>die Körper des Sonnensystems</h5> <h6>die Körper des Sonnensystems</h6> 24

25 Formatieren von Absätzen <h1 align="center">die Körper des Sonnensystems</h1> <h1 align="right">die Körper des Sonnensystems</h1> <hr align="left" size="1" width="100%" noshade> <hr align="left" size="1" width="50%" noshade> <hr align="left" size="1" width="100" noshade> <hr align="right" size="5" width="100" noshade> <hr align="right" size="1" width="50%" noshade> <hr size="10" width="100%" color="red"> 25

26 Formatieren von Absätzen 5.3 Beispiele Einrückung und vorformatierter Text Die folgenden Beispiele demonstrieren die Übernahme von bereits formatiertem Text und Einrückung: <pre> a b c d e f </pre> a b c d e f <blockquote> a b c d e f </blockquote> a b c d e f <listing> int main(void) {... } </listing> int main(void) {... } 5.4 Übungen 1. Formatieren Sie die Datei erde-3.htm so wie im folgenden vorgegeben. 2. Trennen Sie die Absätze in der Datei erde-3.htm mit einer Linie der Dicke 1 ohne Schatten, der Länge 75% (relativ zum Fenster) mit zentrierter Ausrichtung (hr align="center" size="1" width="75%" noshade). Speichern Sie als Datei erde- 4.htm. 26

27 Formatieren von Absätzen Ab hier: Überschrift der Ebene 1 (h1), rechtsbündig: Erde: Der Wasserplanet Ab hier mit <pre> formatiert: 70% der Erdoberfläche besteht aus Wasser. Die restlichen 30% sind Gebirge, Vulkane, Wüsten, Ebenen, und Täler. Ab hier mit <p align="center"> formatiert: Die Erde ist der drittnächste Planet zur Sonne. Sie hat hat eine Atmosphäre, die aus vielen verschiedenen Gasen besteht. Aber der Hauptteil sind Stickstoff und Sauerstoff. Die Atmosphäre gibt uns Luft zum Atmen. Wir leben auf dem Planeten Erde. Ab hier mit <p align="right"> formatiert: Die Erde umkreist die Sonne. Sie braucht ein Jahr für einen kompletten Umlauf. Außerdem dreht sich die Erde um ihre Achse. Eine Umdrehung dauert einen Tag. Die Erdachse steht nicht gerade, sondern ist ein weinig geneigt. Durch diese Neigung entstehen die Jahreszeiten. Ohne diese Neigung hätten wir das ganze Jahr hindurch ungefähr die gleichen Temperaturen. 5.5 Lösungen zu 1 und 2: 27

28 Formatieren von Absätzen <h1 align= right >Erde: Der Wasserplanet </h1> <pre>70% der Erdoberfläche besteht aus Wasser. Die restlichen 30% sind Gebirge, Vulkane, Wüsten, Ebenen, und Täler. </pre> <hr align="middle" size="1" width="75%" noshade> <p align="center"> Die Erde ist der drittnächste Planet zur Sonne. Sie hat hat eine Atmosphäre, die aus vielen verschiedenen Gasen besteht. Aber der Hauptteil sind Stickstoff und Sauerstoff. Die Atmosphäre gibt uns Luft zum Atmen. Wir leben auf dem Planeten Erde. </p> <hr align="middle" size="1" width="75%" noshade> <p align="right"> Die Erde umkreist die Sonne. Sie braucht ein Jahr für einen kompletten Umlauf. Außerdem dreht sich die Erde um ihre Achse. Eine Umdrehung dauert einen Tag. Die Erdachse steht nicht gerade, sondern ist ein weinig geneigt. Durch diese Neigung entstehen die Jahreszeiten. Ohne diese Neigung hätten wir das ganze Jahr hindurch ungefähr die gleichen Temperaturen. </p> 28

29 Einfügen von Listen und Glossaren 6 Einfügen von Listen und Glossaren In diesem Kapitel werden folgende Markierungen (Tags) zur Formatierung von Listen und Glossaren behandelt: Listen <ul> = ungeordnete Liste (bullet list) <li> = Listeneintrag </ul> = Ende der Bullet-Liste <ul type=square> = Bullet-Liste mit eckigen Bullets <ul type=circle> = Bullet-Liste mit runden Bullets <ul type=disc> = Bullet-Liste mit Datei-Bullets <ol> = numerierte Liste <li> = Listeneintrag </ol> = Ende der numerierten Liste> <ol type=a> = numerierte Liste A,B,C... <ol type=a> = numerierte Liste a,b,c... <ol type=i> = numerierte Liste I,II,III... <ol type=i> = numerierte Liste i,ii,iii <ol start=(zahl)> = numerierte Liste mit Startwert Glossare <dir> = Verzeichnis-Liste <li> = Listeneintrag </dir> = Ende der Verzeichnis-Liste <dl> = Glossar-Anfang <dt>... </dl> = zu definierender Ausdruck <dd>... </dd> = Definition </dl> = Glossar-Ende 29

30 Einfügen von Listen und Glossaren 6.1 Beispiele Listen Unsortierte Listen <ul> <li>merkur <li>erde <li>venus <li>mars </ul> Merkur Erde Venus Mars <ul type="square"> <li>merkur <li>erde <li>venus <li>mars </ul> Merkur Erde Venus Mars <ul type="circle"> <li>merkur <li>erde <li>venus <li>mars </ul> Merkur Erde Venus Mars 30

31 Einfügen von Listen und Glossaren Sortierte Listen <ol> <li>merkur <li>erde <li>venus <li>mars </ol> 1. Merkur 2. Erde 3. Venus 4. Mars <ol type="a"> <li>merkur <li>erde <li>venus <li>mars </ol> a. Merkur b. Erde c. Venus d. Mars <ol type="i"> <li>merkur <li>erde <li>venus <li>mars </ol> I. Merkur I. Erde II.Venus III.Mars 31

32 Einfügen von Listen und Glossaren Verschachtelte Listen <ol type=i> <li>innere Planeten <ol type=i> <li>merkur <li>... </ol> <li>äußere Planeten <ol type=i start=5> <li >Jupiter <li>... </ol> </ol> I. Innere Planeten i. Merkur ii... II.Äußere Planeten v. Jupiter vi Übungen 1. Formatieren Sie die Datei planeten-1.htm so wie im folgenden vorgegeben. Überschrift der Ebene 1 (h1), mittig: Die Planeten Neun Planeten hat man in unserem Sonnensystem entdeckt: I. Innere Planeten i. Merkur ii. Venus iii. Erde iv. Mars II. Äußere Planeten v. Jupiter vi. Saturn vii.uranus viii.neptun ix. Pluto 6.3 Lösungen zu 1: 32

33 Einfügen von Listen und Glossaren <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> </head> <title>die Planeten</title> <body> <h1 align= center >Die Planeten</h1> Neun Planeten hat man in unserem Sonnensystem entdeckt: <p> <ol type="i"> <li>innere Planeten <ol type="i"> <li>merkur <li>venus <li>erde <li>mars </ol> <li>äußere Planeten <ol type="i" start=5> <li> Jupiter <li>saturn <li>uranus <li>neptun <li>pluto </ol></ol> </body> </html> 33

34 Einfügen von Hyperlinks und Ankern 7 Einfügen von Hyperlinks und Ankern In diesem Kapitel werden Markierungen (Tags) zur Definition von Ankern (Sprungziele) und Verweisen (häufig auch als Hyperlinks oder kurz Links bezeichnet) behandelt. Die Markierung <a...> (A steht hierbei für Anker oder Anchor) definiert Hyperlinks also die Essenz von HTML als Hypertext-Anwendung. Die Markierung <a> besitzt zwei wesentliche Attribute, nämlich das NAME- und das HREF-Attribut. Hyperlink: <a href="ziel">text</a> Anker: <a name="bezeichner">text</a> Das folgende Beispiel zeigt einen typischen Verweis auf eine Heimatseite: Sie finden viele Informationen auf der <a href=" des Rechenzentrums</a>. Das HREF Attribut (für Hypertext REFerence) definiert einen Verweis auf ein anderes HTML Dokument, das entweder "irgendwo" auf einem WWW Server liegen kann, oder auf dem selben WWW Server in einer anderen Datei oder einen Verweis auf eine bestimmte Position (Anker) im selben HTML Dokument. Wenn ein Hyperlink von einem Leser ausgewählt (angeklickt) wird, wird er zu einem anderen Dokument oder zu einer anderen Stelle im aktuellen Dokument bewegt, dessen Netzwerkadresse durch den Wert des HREF-Attributs definiert wird. Typischerweise werden Hyperlinks, die durch dieses Tag festgelegt wurden, durch unterstrichenen blauen Text dargestellt Der Wert des NAME Attributs ist ein Identifizierung für eine Position im Dokument, die als (Sprung-) Ziel für einen Verweis verwendet werden kann. 34

35 Einfügen von Hyperlinks und Ankern Lokale Verweise (innerhalb eines WWW Servers oder auf einer Festplatte) Innerhalb einer Datei: Vorher: Anker in Datei setzen: <a name="bezeichner"> Text </a> Dann: Verweis zu diesem Anker definieren: <a href="#bezeichner">verweistext</a> Zwischen Dateien: Weltweite Verweise Weitere URL-Typen Verweis zu Datei im gleichen Verzeichnis: <a href="datei.htm">verweistext</a> Verweis zu Datei in anderem Verzeichnis (relativ): <a href="../[pfad]/datei.htm">verweistext</a> Verweis zu Anker innerhalb einer anderen Datei: <a href="datei.htm#bezeichner">verweistext</a> Schema: <a href=" Häufig benutzt: mailto: = Adressierung von -Adressen ftp:// = Adressierung von Dateien auf FTP-Servern Selten benutzt: telnet:// = Adressierung von Telnet-Servern news: = Adressierung von Newsgroups im Usenet Die sich hieraus ergebenden Möglichkeiten sollen an den folgenden Beispielen illustriert werden. 7.1 Beispiele: Springen innerhalb eines Dokuments Im folgenden HTML Dokument werden 2 Anker ( oben und unten) und 2 Hyperlinks Gehe nach oben und Gehe nach unten ) definiert, um jeweils innerhalb des Dokuments von oben nach unten bzw. zurück zu springen. Zur allgemeinen Verwirrung trägt meiner Erfahrung nach bei, daß der Name eines Ankers kein # enthalten darf, während der Name als Ziel eines Hyperlinks im selben Dokument zusätzlich mit # gekennzeichnet werden muß! 35

36 Einfügen von Hyperlinks und Ankern Definieren eines Hyperlinks mit Ziel "#unten" (mit #):<br> <a href="#unten">gehe nach unten!</a><br> Definieren eines Ankers mit Bezeichner "oben" (ohne #):<br> <a name="oben">hier ist oben!<br> </a> Text... <br> Definieren eines Ankers mit Bezeichner "unten" (ohne #): <br> <a name="unten">hier ist unten!</a> <br> Definieren eines Hyperlinks mit Ziel "#oben" (mit #): <br> <a href="#oben">gehe nach oben!</a> <br> Dieser HTML Quellcode wird im WWW Browser folgendermaßen dargestellt: 7.2 Beispiele: Aktives Inhaltsverzeichnis Im folgenden HTML Quelltext ist ein aktives Inhaltsverzeichnis eingebaut: <h2>planeten</h2> <p> <a name="oben">inhaltsverzeichnis</a> <ul> <li><a href="#merkur">merkur</a>... </ul> <p> <b><i><a name="merkur">merkur</a>:</i></b> <br> Wegen seiner großen Sonnennähe ist Merkur nur in der Abend- oder Morgendämmerung beobachtbar. Sein Abstand von der Erde schwankt zwischen 80 und 220 Millionen Kilometern.... <p> <a href="#oben">zurück zum Inhaltsverzeichnis</a> 36

37 Einfügen von Hyperlinks und Ankern 7.3 Beispiele: Verweis auf eine Internet Seite Im folgenden HTML Quelltext wird ein Verweis (Link) auf eine andere Internet Seite eingebaut. Sie finden viele Informationen auf der <a href=" des Rechenzentrums</a>. 7.4 Übungen 1. Schreiben Sie ein Inhaltsverzeichnis für die Datei sonne.htm (siehe unten) mit den Einträgen "allgemeine Informationen" und "Sonnenflecken" als Verweis auf die entsprechenden Abschnitte. Definieren Sie hierzu zunächst die beiden Überschriften der Ebene 2 als Anker. Erstellen Sie dann eine ungeordnete Liste mit Verweisen auf diese beiden Anker. Speichern Sie das Ergebnis als Datei sonne-1.htm. 2. Erstellen Sie zwei Dateien a.htm und b.htm, die wechselseitig aufeinander verweisen. 3. Ergänzen Sie in a.htm einen Anker a1 und in b.htm einen Anker b1, auf den von der jeweils anderen Datei verwiesen wird. Die Struktur von a.htm und b.htm finden Sie am Ende der Seite. 4. Zusatzaufgabe: Suchen Sie im Web nach weiteren Informationen zum Thema "Sonne" und fügen Sie entsprechende Hyperlinks als weitere Einträge im Inhaltsverzeichnis ein. Speichern Sie das Ergebnis als Datei sonne-info.htm. 37

38 Einfügen von Hyperlinks und Ankern Hinweis: Ein möglicher Einstiegspunkt ist (dort: Galerien). H1: Die Sonne H2: allgemeine Informationen Die Sonne ist unser nächster Stern. Sie ist ein Mitglied unserer Galaxie, der Milchstraße. Die Sonne ist ein gelber Zwergstern, das heißt ein Stern durchschnittlicher Größe. Vermutlich ist sie mehr als 4 Milliarden Jahre alt. Die Sonne dreht sich langsam um ihre Achse. Außerdem kreist sie um das Zentrum der Milchstraße. Der Kern oder das Zentrum der Sonne ist sehr heiß. Dort findet ein Prozeß statt, den man "Kernfusion" nennt. Die Kernfusion produziert eine Menge Energie. Ein Teil dieser Energie wird als Licht und Wärme in den Weltraum abgestrahlt. Ein kleiner Teil davon erreicht die Erde! Ströme aus Gaspartikel, auch Sonnenwind genannt, verlassen ebenfalls die Sonne. h2: Sonnenflecken Auf der Sonnenoberfläche gibt es Gebiete, die etwa 1500 Grad kälter als ihre Umgebung sind. Wir nennen diese Gebiete "Sonnenflecken", weil sie im Vergleich zur normalen Sonnenoberfläche dunkel aussehen. Die Sonnenflecken werden durch das aus dem Sonneninneren aufsteigende starke Magnetfeld erzeugt. Die Sonne produziert auch große Energieausbrüche, die Flares genannt werden. Diese Flares schießen einen Strom schneller Teilchen von der Sonnenoberfläche in den Weltraum. Treffen diese Teilchen die Erdatmosphäre so erzeugen sie ein Leuchten, das wir Polarlicht nennen. a.htm:... <a name="a1">anker a1</a>... <a href="b.htm">verweis auf b.htm</a> <a href="b.htm#b1">verweis auf Anker b1 in b.htm</a>... b.htm:... <a name="b1">anker b1</a>... <a href="a.htm">verweis auf a.htm</a> <a href="a.htm#a1">verweis auf Anker a1 in a.htm</a An diesen Beispiel-Dateien wird deutlich, daß # als Trenner zwischen dem Verweis auf eine Internet Seite und einem Anker auf dieser Internet Seite dient. 7.5 Lösungen zu 1: 38

39 Einfügen von Hyperlinks und Ankern <ul> <li><a href="#a1">allgemeine Informationen</a> <li><a href="#a2">sonnenflecken</a> </ul> <hr> <p> <a name="a1"><h2>allgemeine Informationen</h2></a> Die Sonne ist unser nächster Stern. Sie ist ein Mitglied unserer Galaxie, der Milchstraße.... <p> <a name="a2"><h2>sonnenflecken</h2></a> Auf der Sonnenoberfläche gibt es Gebiete, die etwa 1500 Grad kälter als ihre Umgebung sind. Wir nennen diese Gebiete "Sonnenflecken", weil sie im Vergleich zur normalen Sonnenoberfläche dunkel aussehen

40 Einfügen von Tabellen 8 Einfügen von Tabellen 8.1 Bezeichnungen Eine Tabelle hat folgenden prinzipiellen Aufbau aus Zeilen und Spalten, hier als Beispiel eine Tabelle mit 3 Spalten und 2 Zeilen: Spalte 1 Spalte 2 Spalte 3 Zeile 1 Zelle (1,1) Zelle (1,2) Zelle (1,3) Zeile 2 Zelle (2,1) Zelle (2,2) Zelle (2,3) Verwenden Sie folgenden HTML Code, um ein Tabelle mit 2 Zeilen und 3 Spalten zu erzeugen: <table border=1> <tr> <td>1,1</td> <td>1,2</td> <td>1,3</td> </tr> <tr> <td>2,1</td> <td>2,2</td> <td>2,3</td> </tr> </table> 1,1 1,2 1,3 2,1 2,2 2,3 8.2 Aufbau einer Tabelle Die Markierung <table> leitet eine Tabelle ein. Wenn die Tabelle sichtbare Gitternetzlinien enthalten soll, muß das Attribut border= n ( n=1,2,3,...) verwendet werden. Das Ende einer Tabelle wird durch </table> markiert. <tr> leitet jeweils eine neue Tabellenzeile ein. Im Anschluß daran werden die Zellen der betreffenden Zeile durch <th> oder <td> definiert. Eine Tabellenzeile wird durch </tr> beendet. 40

41 Einfügen von Tabellen Eine Zeile kann Kopfzellen und gewöhnliche Datenzellen enthalten. Text in Kopfzellen wird hervorgehoben. <th> definiert eine Kopfzelle, <td> eine normale Datenzelle. Der Inhalt der Zelle wird jeweils dahinter notiert. In einer Tabellenzelle können beliebige Elemente stehen, d.h. außer normalem Text z.b. auch Verweise, Bilder oder auch wieder (Sub-) Tabellen. Das Layout einer Tabelle kann vielfältig variiert werden, z.b. durch: Hinzufügen von Rahmen Zusammenfassen von Zellen in horizontaler und vertikaler Richtung Definieren von Hintergrundfarben Definieren von Rändern Tabellen werden z.b. verwendet zur: Positionierung von Bildern und zugehörigem Text Verbesserung des Layouts von Formularen 8.3 Elemente einer Tabelle Tabelle definieren <table> = Tabellen-Anfang <caption>...</caption> = Titel der Tabelle <tr> = neue Tabellenzeile <th>... </th> = Kopfzelle <td>... </td> = Datenzelle </tr> = Ende der Tabellenzeile <tr> = neue Tabellenzeile <th>... </th> = Kopfzelle <td>... </td> = Datenzelle </tr> = Ende der Tabellenzeile... </table> = Tabellen-Ende 41

42 Einfügen von Tabellen Tabellengestaltung (tabellenglobal) Tabellenzellengestaltung, Kopfzelle Tabellenzellengestaltung, Datenzelle <table border> = Gitternetzlinien anzeigen <table border=(zahl)> = Außenrahmendicke in Pixel <table width=(zahl)%> = Gesamtbreite prozentual zum Anzeigefenster <table width=(zahl)> = Gesamtbreite in Pixel <table height=(zahl)%> = Gesamthöhe prozentual zum Anzeigefenster <table height=(zahl)> = Gesamthöhe in Pixel <table cellspacing=(zahl)> = Gitternetzdicke in Pixel <table cellpadding=(zahl)> = Abstand Zelleninhalt von Rand in Pixel <table bgcolor=#rgb> = tabellenweite Hintergrundfarbe <table bordercolor=#rgb> = Rahmen- und Gitternetzfarbe <table bordercolordark=#rgb> = dunkler Teil der Rahmen- und Gitternetzfarbe <table bordercolorlight=#rgb> = heller Teil der Rahmen- und Gitternetzfarbe (r = Rotwert, hexadezimal 00 bis FF g = Grünwert, hexadezimal 00 bis FF b = Blauwert, hexadezimal 00 bis FF) <th align=left> = Kopfzelle links ausrichten <th align=center> = Kopfzelle zentriert ausrichten <th align=right> = Kopfzelle rechts ausrichten <th width=(zahl)%> = Spaltenbreite proz. zum Anzeigefenster <th width=(zahl)> = Spaltenbreite in Pixel <th height=(zahl)%> = Zeilenhöhe proz. zum Anzeigefenster <th height=(zahl)> = Zeilenhöhe in Pixel <th valign=top> = Kopfzelle oben ausrichten <th valign=middle> = Kopfzelle mittig ausrichten <th valign=bottom> = Kopfzelle unten ausrichten <th bgcolor=#rgb> = Hintergrundfarbe der Kopfzelle (r = Rotwert, hexadezimal 00 bis FF g = Grünwert, hexadezimal 00 bis FF b = Blauwert, hexadezimal 00 bis FF) <td align=left> = Datenzelle links ausrichten <td align=center> = Datenzelle zentriert ausrichten <td align=right> = Datenzelle rechts ausrichten <td width=(zahl)%> = Spaltenbreite proz. zum Anzeigefenster <td width=(zahl)> = Spaltenbreite in Pixel <td height=(zahl)%> = Zeilenhöhe proz. zum Anzeigefenster <td height=(zahl)> = Zeilenhöhe in Pixel <td valign=top> = Datenzelle oben ausrichten <td valign=middle> = Datenzelle mittig ausrichten <td valign=bottom> = Datenzelle unten ausrichten <td bgcolor=#rgb> = Hintergrundfarbe der Datenzelle (r = Rotwert, hexadezimal 00 bis FF g = Grünwert, hexadezimal 00 bis FF b = Blauwert, hexadezimal 00 bis FF 42

43 Einfügen von Tabellen Tabellenzellen verbinden Tabellenüberschriften Tabellenunterschriften <th rowspan=(zahl)> = (Zahl) Zeilen zu einer verbinden <th colspan=(zahl)> = (Zahl) Spalten zu einer verbinden <td rowspan=(zahl)> = (Zahl) Zeilen zu einer verbinden <td colspan=(zahl)> = (Zahl) Spalten zu einer verbinden <caption valign=top>tabellenüberschrift</caption> <caption valign=bottom>tabellenunterschrift</caption> <caption valign=top align=center>tabellenüberschrift zentriert</caption> <caption valign=top align=center>tabellenüberschrift rechtsbündig</caption> 8.4 Beispiele: einfache Tabellen mit Überschriften Die folgenden Beispiele demonstrieren Möglichkeiten der Tabellengestaltung. <table align="center" bgcolor="teal" width="100%" cellspacing="2" cellpadding="2" border="1" frame="hsides" rules="rows"> <caption align="center" valign="top">tabelle : Überschrift zentriert, oben, diverse Farben für Zellen</caption> <tr> <th bgcolor="aqua">1</th> <th bgcolor="red">2</th> </tr> <tr> <td bgcolor="lime" bordercolor="aqua">3</td> <td bgcolor="fuchsia">4</td> </tr> </table> In der folgenden Tabelle erstreckt sich Zelle(1,1) über insgesamt 3 untereinanderliegende Zellen (Attribut: rowspan). In den folgenden Zeilen verschiebt sich der Index um einen nach oben, weil die erste Zelle jeweils "fehlt": 43

44 Einfügen von Tabellen <table border="1"> <tr> <td rowspan="3">1-3,1</td> <td>1,2</td> <td>1,3</td> </tr> <tr> <td>2,2</td> <td>2,3</td> </tr> <tr> <td>3,2</td> <td>3,3</td> </tr> </table> 8.5 Beispiele: komplexe Tabelle Die folgenden Beispiele demonstrieren komplexe Möglichkeiten der Tabellengestaltung. <table BORDER=1 > <tr> <th colspan="10" align="center"> <font face="arial" color="teal">planeten</font></th> </tr> <tr> <th> </th> <th>merkur </th> <th>venus </th>... </tr> <tr> <th>mittlerer Abstand von der Sonne in 10<sup>6</sup> km </th> <td>57,9 </td> <td>108,2 </td>... </tr> </table> 44

45 Einfügen von Tabellen 8.6 Übungen 1. Erstellen Sie eine 2x2 Tabelle mit mittiger Überschrift über der Tabelle und speichern Sie in die Datei tabellen-1.htm. 2. Erstellen Sie eine 3x3 Tabelle, bei der sich die 2. Zeile über alle 3 Spalten erstreckt und speichern Sie in die Datei tabellen-2.htm. 3. Erstellen Sie eine (unsichtbare) Tabelle (border=0, cellspacing=5) mit 4 Zeilen und 2 gleichbreiten Spalten. Schreiben Sie die Name des Planeten fett und den zugehörigen Text für die Planeten Venus, Mars, Merkur und Jupiter jeweils alternierend in die linke und die rechte Spalte. Ziehen Sie dabei jeweils die Überschrift an den Text heran und fluchten Sie den Text gegen die Überschrift. Den benötigten Text über die genannten Planeten finden Sie am Ende dieser Seite Speichern Sie die Tabelle in der Datei tabellen-3..htm. Die Ausrichtung soll schematisch gesehen folgendermaßen aussehen: 45

46 Einfügen von Tabellen Mars Text linksbündig Text rechtsbündig Venus Merkur: Wegen seiner großen Sonnennähe ist Merkur nur in der Abend- oder Morgendämmerung beobachtbar. Sein Abstand von der Erde schwankt zwischen 80 und 220 Millionen Kilometern. Seine Rotationsperiode beträgt 58,65 Tage, seine sider. Umlaufzeit beträgt 87,97 Tage. Da der Planet keine nennenswerte Atmosphäre besitzt, herrschen große Temperaturgegensätze zwischen Tag- und Nachtseite, etwa 585K (rund 310 C) und 150K (-120 C). Die Oberfläche des Merkur besitzt erdmondähnliche Formationen. Venus: Bezüglich Masse, Dichte und Radius sind ich Venus und Erde sehr ähnlich. In den anderen physikalischen Parametern treten jedoch kaum Gemeinsamkeiten auf. Eine Besonderheit gegenüber allen anderen Planeten ist die langsame Venusrotation von 243 Erdtagen, die entgegengesetzt (retrograd) zur Bahnbewegung um die Sonne gerichtet ist. Die Länge eines Sonnentages auf der Venus entspricht 117 Erdtagen. Mars: Außer der Erde ist der Mars der einzige Planet, bei dem es möglich ist, durch seine Atmosphäre auf die feste Oberfläche zu blicken. Seine Entfernung zur Erde schwankt je nach Stellung der beiden Planeten auf ihren Bahnen zwischen rund 400 Mill. km und 56 Mill. km. Der Marstag ist nur wenig länger als ein Erdentag (24h 37min). Jupiter: Der Planet Jupiter ist der größte und massereichste Planet des Sonnensystems; er gehört zu den hellsten Objekten des Himmels. Je nach der Stellung von Jupiter und Erde ändert sich der Abstand des Planeten von der Erde zwischen 588 Mill. und 967 Mill. km. Schon bei Betrachtung des Jupiters mit kleinen Fernrohren fällt seine starke Abplattung auf, die er infolge seiner schnellen Rotation besitzt. 8.7 Lösungen zu 1: <table border="1"> <caption align="center" valign="top">tabelle 1: Überschrift zentriert, oben</caption> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> zu 2: 46

47 Einfügen von Tabellen <table border="1"> <tr> <td rowspan="3">1-3,1</td> <td>1,2</td> <td>1,3</td> </tr> <tr> <td>2,2</td> <td>2,3</td> </tr> <tr> <td>3,2</td> <td>3,3</td> </tr> </table> zu 3: <table width="100%" border="0" align="center" valign="top"> <tr> <td width="50%" align="right" valign="top"> <b><i>merkur:</i></b> </td> <td width="50%">wegen seiner großen Sonnennähe ist Merkur... </tr> <tr> <td align="right">bezüglich Masse, Dichte und Radius sind ich Venus und Erde sehr ähnlich....<p></td> <td align="left" valign="top"><b><i>venus:</i></b></td> </tr>... 47

48 Einfügen von Bildern 9 Einfügen von Bildern 9.1 Elemente Ein Bild kann (vergleichbar zu einem Zeichen) an jeder Stelle im HTML Dokument eingefügt werden. Bilder Grafik liegt im gleichen Verzeichnis wie HTML Dokument: <img src="datei.gif"> Grafik liegt in einem anderem Verzeichnis (relativ): <img src="../[pfad]/datei.gif"> Alternativer Text bei Nichtanzeige der Grafik: <img src="datei.gif" alt="anzuzeigender Text"> Rahmen um Grafiken: <img src="datei.gif" border=(zahl)> = Breite in Pixel Grafiken ausrichten (Text fließt um die Grafik): <img src="datei.gif" align=left> = links ausrichten <img src="datei.gif" align=right> = rechts ausrichten Abstand zwischen Grafik und Umgebung: <img src="datei.gif" vspace=(zahl)> = Abstand oben/unten <img src="datei.gif" hspace=(zahl)> = Abstand links/rechts Grafikbeschriftung (ein Textabsatz!) links neben der Grafik: <img src="datei.gif" align=top> = Beschriftung oben <img src="datei.gif" align=middle> = Beschriftung mittig <img src="datei.gif" align=bottom> = Beschriftung unten Grafiken skalieren (nicht empfehlenswert, zeitaufwendig): <img src="datei.gif" width=(zahl oder %)> = in Breite dehnen <img src="datei.gif" height=(zahl oder %)> = in Höhe dehnen 9.2 Formate In einem HTML Dokument können Sie die Bildformate GIF, Animated GIF, JPEG und, bei neueren Browsern, auch PNG verwenden. Bilder sind typischerweise maximal 600x600 Pixel groß; typische Größen sind 640x480, 320x240 und 120x80. 48

49 Einfügen von Bildern GIF und Animated GIF Das GIF Format umfaßt zwei sehr ähnliche Bildformate: GIF87, das Original, und GIF89a, das Erweiterungen für Transparenz und Interlacing sowie für GIF-Bilder mit mehreren Einzelbildern (Annimated GIF) enthält, die für einfache Animationen verwendet werden können. GIF-Dateien eignen sich ausgezeichnet für Logos, Icons, Strichzeichnungen und andere einfache Bilder. Weniger gut sind sie für Bilder mit vielen Details zu gebrauchen, weil das GIF-Format auf 256 Farben begrenzt ist. Fotos im GIF Format sehen grobkörnig und fleckig aus. Transparente GIF-Bilder haben einen unsichtbaren Hintergrund, so daß die Farbe (oder das Muster) des Seitenhintergrundes durchscheinen und dem Bild die Erscheinung geben, auf der Seite zu schweben. Interlacing sorgt dafür, daß das GIF Bild anders abgespeichert wird. Statt die einzelnen Zeilen hintereinander zu speichern, wird eine GIF Datei schrittweise gespeichert, wobei jeweils jede achte Zeile gespeichert wird, beginnend bei der ersten, gefolgt von jeder achten beginnend bei der vierten, gefolgt von jeder vierten, beginnend bei der dritten und dann die restlichen Zeilen. Bei der Anzeige dieser GIF-Datei werden die Zeilen so geladen, wie sie gespeichert wurden: die erste Zeilenmenge, dann die zweite Menge usw. Abhängig vom verwendeten WWW Browser kann das einen»jalousie«-effekt erzeugen. Bildgröße: 152x152 Pixel Bildgröße: 108x52, Animated GIF 9.3 JPEG JPEG wurde für das Speichern von Fotos ausgelegt. Anders als GIF Bilder können JPEG Bilder eine beliebige Anzahl Farben haben, und der Algorithmus für die Komprimierung ist insbesondere für die Muster geeignet, die man häufig auf Fotografien findet. Deshalb ist der Umfang der erzeugten Fotodateien wesentlich geringer als bei GIF. Andererseits ist dieser Komprimierungsalgorithmus nicht besonders gut für Strichzeichnungen oder Bilder mit großen Blöcken gleicher Farbe geeignet. Darüber hinaus wird hier die Komprimierung mit Verlust durchgeführt, das bedeutet, daß Teile des Bildes ignoriert werden, um es insgesamt kleiner zu machen. 49

50 Einfügen von Bildern Das Konzept von progressivem JPEG ähnelt dem von GIF Interlacing. Progressive JPEG Dateien werden auf spezielle Weise gespeichert, so daß sie in fortschreitend detaillierter Weise dargestellt werden, wenn sie geladen werden. Bildgröße: 180x135 Bildgröße: 320x Beispiele: Icons <img src="icons2/movie.gif" width=13 height=11 alt="" border="0"> <img src="icons2/sound.gif" width=10 height=11 alt="" border="0"> Beispiele: Navigation in einem Dokument Das folgende Beispiel demonstriert ein icon-basiertes Navigationssystem innerhalb eines HTML Dokuments, das analog auf verknüpfte Dokumente übertragen werden kann. Mit Hilfe eines Inhaltsverzeichnisses und Navigationsleisten können Sie Verknüpfungen zwischen Informationseinheiten (Kapiteln) eines Dokumentes realisieren. 50

51 Einfügen von Bildern Als Beispiel soll ein Dokument mit Inhaltsverzeichnis, Navigationssystem und Kapiteln 1-2 dienen. Das Inhaltsverzeichnis enthält Verweise auf die Kapitel 1-2, jedes Kapitel ist mit dem vorhergehenden und dem folgenden verzeigert. Das Erstellen derartiger Inhaltsverzeichnisse und Navigationshilfen per Hand ist mühsam und fehleranfällig. Es bleibt zu hoffen, daß HTML Editoren und Filter diese Aufgaben in Zukunft automatisch erledigen. <html> <head> <title>navigation</title> </head> <body> <p> <ol> <li><a href="#kap1">video <img src="icons2/movie.gif" alt="movie" border="0"></a> <li><a href="#kap2">sound <img src="icons2/sound.gif" alt="movie" border="0"></a> </ol> <p> <h2><a name="kap1">video</a></h2> <p>... <p> <a href="#kap2">nächstes Kapitel <img src="icons2/scrolldo.gif" alt="" border="0"></a> <a name="kap2"><h2>sound</h2></a> <p>... <p> <a href="#kap1">vorheriges Kapitel <img src="icons2/scrollup.gif" alt="" border="0"></a> </body> </html> 51

52 Einfügen von Bildern 9.6 Quellen fürbilder In diesem Kapitel werden die Themen "Bildsuche, -erzeugung, -bearbeitung, -konvertierung" nicht behandelt. Typische Fragestellungen in diesem Zusammenhang lauten: 1. Wo finde ich interessante Bilder? 2. Wie erzeuge ich selbst Bilder? 3. Wie verändere ich z.b. die Hintergrundfarbe eines Bildes? 4. Wie erzeuge ich z.b. aus einer Photoshop Datei eine Web-optimierte JPEG Datei? 5. Wie erzeuge ich aus einer Sequenz von Bildern eine Animation (wie z.b. eine Animated GIF Datei)? Auf Wunsch können diese Themen zusätzlich behandelt werden. 9.7 Übungen 1. Speichern Sie zunächst die benötigten Dateien erde.gif und mond.gif durch Anklicken mit der rechten (!) Maustaste und durch Auswählen von "Save As" (Speichern unter) im Kontextmenü. 2. Erstellen Sie ein HTML Dokument mit diesen beiden Bildern. Speichern Sie das HTML Dokument in der Datei bilder-1.htm 3. Verwenden Sie ein Vorschaubild (Thumbnail) sonnensystem-thumb.jpg als Verweis auf das Originalbild sonnensystem.jpg. 9.8 Lösungen zu 1+2: Bilder von Mond und Erde: <p> <img src="erde.gif" alt="erde" border="0"> <img src="mond.gif" alt="mond" border="0"> </p> zu 3: <a href="sonnensystem.jpg"><img src="sonnensystem-thumb.jpg" alt="system"></a> 52

53 Einfügen von sensitive Bildern (image maps) 10 Einfügen von sensitive Bildern (image maps) Das Einbinden von sensitiven Bildern (clickable images, sensitive map) in HTML Dokumenten erhöht die Interaktivität, indem die visuellen Komponente des Dokumentes betont wird. Sie können als Leser bei einem sensitiven Bild auf bestimmte Bereiche (hot spots) klicken, um eine Aktion (Laden einer Datei) anzustoßen - die natürlich mit dem gewählten Bereich in Zusammenhang stehen muß. Eine denkbare Anwendung wäre das Bild eines Skeletts, bei dem einzelne Knochen angeklickt werden können, worauf eine Erklärung zu diesem Knochen eingeblendet wird Vorgehensweise Ein sensitives Bild umfaßt folgende Elemente: 1. Bild-Datei (hier: sonnensystem.jpg) 2. IMG Tag mit USEMAP Attribut 3. MAP Tag mit sensitiven Bereichen (hier: Saturn und Neptun) 4. Ziel-Dateien bzw. Ziel-Anker (hier: Anker #saturn und #neptun im selben Dokument) <img src="sonnensystem.jpg" alt="" border=0 usemap="#sonnensystem"> <MAP NAME="sonnensystem"> <AREA SHAPE=RECT COORDS="135,7,236,218" HREF=#saturn ALT="Saturn"> <AREA SHAPE=RECT COORDS="27,77,80,140" HREF=#neptun ALT="Neptun"> <AREA SHAPE=default HREF=#default> </MAP> 53

54 Einfügen von sensitive Bildern (image maps) 10.2 Elemente Image Maps <map name="map_name"> <area shape="rect" coords="ol,or,ul,ur" href="datei_1.html"> <area shape="circle" coords="x,y,r" href="datei_2.html"> <area shape="polygon" coords="x1,y2,x2,x2,..." href="datei_3.html"> </map> <img src="image.gif" usemap="#map_name" border=0> rect = viereckige verweis-sensitive Fläche cirle = runde verweis-sensitive Fläche polygon = beliebige vieleckige verweis-sensitive Fläche ol = Pixel von links für linke obere Ecke or = Pixel von oben für linke obere Ecke ul = Pixel von links für rechte untere Ecke ur = Pixel von oben für rechte untere Ecke x(1,2).. = Pixel von links y(1,2).. = Pixel von oben r = Radius datei_n.html = Verweisziele Für die Erzeugung von sensitiven Bildern sollten Sie tunlichst auf ein gutes Programm zurückgreifen. Im folgenden wird das Freeware Programm GeoHTML verwendet Erstellen einer sensitiven Karte mit GeoHTML Starten Sie GeoHTML: 54

55 Einfügen von sensitive Bildern (image maps) Erstelen Sie über File > New Map eine neues sensitives Bild. Laden Sie die Bilddatei sonnenystem.jpg als Quelle. Wählen Sie das Polygon-Werkzeug: Zeichnen Sie die Umrisse eines Objektes, hier: Jupiter, möglichst genau mit Polygonzügen nach. Klicken Sie auf HTML Source um sich den HTML Quelltext anzeigen zu lassen, hier: Planet Uranos als sensitiver Bereich:  <HTML> <HEAD> <TITLE>untitled</TITLE> </HEAD> <BODY> <IMG SRC="sonnensystem.jpg" USEMAP="#sonnensystem" WIDTH=575 HEIGHT=221 BORDER="0"> <MAP NAME="sonnensystem"> <AREA SHAPE="POLY" HREF="#" COORDS="322,60, 365,93, 362,138, 329,168, 271,167, 251,122, 261,78, 299,61, 323,61, 323,63, 322,60"> </MAP> </BODY> </HTML> 55

56 Einfügen von sensitive Bildern (image maps) 10.4 Übungen 1. Erstellen Sie ein sensitives Bild auf Grundlage der Bilddatei sonnensystem.jpg. Speichern Sie das HTML Dokument als map-1.htm. Erstellen Sie für mindestens 2 Planeten Dateien planetname.htm, die als Sprungziel für den entsprechenden sensitiven Bereich verwendet werden. 2. Zusatzaufgabe: Erstellen Sie ein sensitives Bild für eine Weltkarte, die z.b. die Erdteile als sensitive Bereiche enthält. (Bilddattei map.gif ) Lösungen zu 1: GeoHTML zu 2: GeoHTML 56

57 Verwenden von Rahmen (Frames) 11 Verwenden von Rahmen (Frames) Mit Hilfe des FRAMESET Tags können Sie den Anzeigebereich des WWW Browsers in verschiedene, frei definierbare und voneinander unabhängige Segmente (frames) aufteilen. Jedes Segment kann eigene Inhalte enthalten. Die einzelnen Anzeigesegmente (also die Frames) können wahlweise einen statischen Inhalt oder einen wechselnden Inhalt haben. Verweise in einem Frame können z.b. Dateien aufrufen, die dann in einem anderen Frame angezeigt werden. Rahmen (Frames) sind kein weiteres Element, um typische Aufgaben der Textverarbeitung zu bewältigen, sondern nutzen konsequent die spezifischen Eigenschaften der Bildschirmanzeige. Frames eröffnen neue Möglichkeiten, um Information hypertextuell (d.h. nicht-linear) aufzubereiten. Beim Definieren von Frame-Sets bestimmen Sie, wie das Anzeigefenster aufgeteilt werden soll. Dabei müssen Sie sich das Anzeigefenster wie den leeren Rahmen einer Tabelle vorstellen. Damit die Tabelle Gestalt annimmt, müssen Sie zunächst Reihen und Spalten definieren. Frame-Sets definieren Nebeneinander (Beispiel): <frameset cols="200,*"> <frame... > <frame... > </frameset> (Angaben in Prozent oder in Pixeln, "*" für Wildcard) Untereinander (Beispiel): <frameset rows="30%,*"> <frame... > <frame... > </frameset> (Angaben in Prozent oder in Pixeln, "*" für Wildcard) Frames definieren Verschachtelt (Beispiel): <frameset cols="200,*"> <frame... > <frameset rows="30%,*"> <frame... > <frame... > </frameset> </frameset> (Angaben in Prozent oder in Pixeln, "*" für Wildcard) <frame src="datei.htm" name="framename"> Reservierte Namen: "_blank" "_self" "_parent" "_top" 57

58 Verwenden von Rahmen (Frames) Eigenschaften von Frames Verweise bei Frames Frame-Fenster mit/ohne Scroll-Leiste <frame src="datei.htm" name="framename" scrolling=yes/no> Abstand Fensterrand zu Fensterinhalt <frame src="datei.htm" name="framename" marginwidth= marginheight=> (marginwidth für Abstand links und rechts, marginheight für Abstand oben und unten) Rahmendicke bzw. keine Rahmen - für gesamtes Frame-Set: <frameset cols="50%,*" frameborder=> (0 für "keine Rahmen", ansonsten Zahl für Breite in Pixeln) - für einzelnes Frame-Fenster: <frame src="datei.htm" name="framename" frameborder=> (0 für "keine Rahmen", ansonsten Zahl für Breite in Pixeln) Farbige Fensterrahmen: <frame src="datei.htm" name="framename" bordercolor=> Dokument in benannten Frame laden: <a href="datei.htm" target="framename"> 11.1 Beispiele: Einteilung des Fensters in 3 Rahmendicke Ein Rahmen-Set (frame set), hier: 3 übereinanderliegende Frames, setzt sich aus folgenden HTML-Dokumenten zusammen: Rahmendefinition (index.htm): <html> <head> <title>rahmen</title> </head> <frameset rows="20%,60%,20%"> <frame name="f1" src="frame1.htm" FRAMEBORDER="No"> <frame name="f2" src="frame2.htm" FRAMEBORDER="No"> <frame name="f3" src="frame3.htm" FRAMEBORDER="No"> </frameset> <body> Dieser Text wird angezeigt, wenn der WWW Browser keine Rahmen darstellen kann. </body> </html> Zusätzlich werden drei HTML Dokumente frame1.htm, frame2.htm und frame3.htm benötigt, die in den jeweiligen Rahmen geladen werden. 58

59 Verwenden von Rahmen (Frames) 11.2 Beispiele: Aktives Inhaltsverzeichnis Die folgenden Dateien definieren ein Rahmen-Set (Frameset) mit 2 nebeneinanderliegenden Rahmen, wobei der linke Rahmen permanent ein Inhaltsverzeichnis anzeigt, während im rechten Rahmen das ausgewählte Kapitel angezeigt wird. Frameset Definition (index.htm) <html> <head> <title>aktives Inhaltsverzeichnis</title> </head> <frameset cols="30%,70%" frameborder="yes" border="yes"> <frame name="ihv" src="ihv.htm" frameborder="yes"> <frame name="view" src="titel.htm" frameborder="yes"> </frameset> <body> Dieser Text wird angezeigt, wenn der Browser keine Frames kennt </body> </html> Start-Dokument für Frame 1 (Dokument: ihv.htm, Ziel-Frame: ihv) <html> <head> <title>frame-beispiel 2</title> </head> <body> Inhaltsverzeichnis <p> <ol> <li><a href="titel.htm" target="view">titel</a> <li><a href="kap1.htm" target="view">kapitel 1</a> <li><a href="kap2.htm" target="view">kapitel 2</a> </ol> </body> </html> Start-Dokument für Frame 2 (Name: titel.htm, Ziel-Frame: <html> <head> <title>titel</title> </head> <body> Titel </body> </html> Weitere Dokumente können durch Anklicken im Inhaltsverzeichnis in Frame 2 geladen werden, hier als Beispiel die Datei kap1.htm. 59

60 Verwenden von Rahmen (Frames) <html> <head> <title>frame-beispiel 2</title> </head> <body> Kapitel 1 </body> </html> Nach dem Laden der Datei index.htm im WWW Browser wird zunächst im rechten Rahmen die Voreinstellung, hier: Datei titel.htm mit Textbereich Titel, angezeigt. Klicken Sie auf den Verweis Kapitel 1, um das 1. Kapitel (Datei kap1.htm) in den rechten Rahmen zu laden: 11.3 Übungen 1. Erstellen Sie ein Rahmen-Set (Frameset) mit 3 nebeneinanderliegenden Frames der relativen Breiten 10%, 80% und 10%. Laden Sie die Dateien links.htm, mitte.htm und rechts.htm in dieser Reihenfolge in den Rahmen-Set (Frameset). 2. Erstellen Sie ein aktives Inhaltsverzeichnis (wie im Beispiel oben) mit mindestens 2 Kapiteln und einer Titelseite. 3. Zusatzaufgabe: (Erweiterung zu sensitiven Bildern) Erstellen Sie ein Frameset mit einem oberen und einem unteren Rahmen. Blenden Sie in den oberen Rahmen das sensitive Bild sonnensystem.jpg ein. Blenden Sie in den unteren Rahmen jeweils die im sensitiven Bild angeklickten Verweise ein. Durch Klicken auf die Erde sollte z.b. die Datei erde.htm in den unteren Rahmen geladen werden. 60

61 Verwenden von Rahmen (Frames) 11.4 Lösungen zu 1: siehe Beispiele zu 2: siehe Beispiele 61

62 Gestalten der Seite 12 Gestalten der Seite 12.1 Überblick Dokumentfarbe, Dokument-Hintergrundgrafiken Dokument mit farbigem Hintergrund: <body bgcolor= color text= color link= color vlink= color alink= color > bgcolor = Bildschirmhintergrund text = Textfarbe link = Farbe von Verweisen vlink = Farbe von Verweisen zu besuchten Zielen alink = Farbe von Verweisen beim Anklicken color: red, green,... Dokument mit farbigem Hintergrund: <body bgcolor=#rgb text=#rgb link=#rgb vlink=#rgb alink=#rgb> wie zuvor, aber mit Hex-Tripeln für RGB-Farbwerte: r = Rotwert, hexadezimal 00 bis FF (entspricht 0-255) g = Grünwert, hexadezimal 00 bis FF b = Blauwert, hexadezimal 00 bis FF Hintergrundmusik Hintergrundgrafik: <body background="datei.gif"> Hintergrundgrafik mit Wasserzeicheneffekt: <body background="datei.gif" bgproperties=fixed> Hintergrundmusik (zwischen <head> und </head>): <bgsound src="datei.mid" loop=infinite> loop= Anzahl Wiederholungen, "infinite" oder Zahl 12.2 Beispiel: Farbiger Hintergrund 62

63 Gestalten der Seite <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>das Sonnensystem</title> </head> <body bgcolor="aqua"> <h1>das Sonnensystem</h1> <h2>definition</h2> Planeten sind kugelähnliche Himmelskörper. Sie umlaufen die Sonne in kreisähnlichen Bahnen (Ellipsen) in fast einer Ebene (Ekliptik) und reflektieren deren Licht. <p> Die Sonne ist das Gravitationszentrum. Man unterscheidet die inneren und äußeren Planeten auf Grund ihrer Distanz zur Sonne. </body> </html> 12.3 Beispiel: Hintergrund-Bild!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>das Sonnensystem</title> </head> <body background="sonnensystem.jpg"> <h1>das Sonnensystem</h1> <h2>definition</h2> Planeten sind kugelähnliche Himmelskörper. Sie umlaufen die Sonne in kreisähnlichen Bahnen (Ellipsen) in fast einer Ebene (Ekliptik) und reflektieren deren Licht. <p> Die Sonne ist das Gravitationszentrum. Man unterscheidet die inneren und äußeren Planeten auf Grund ihrer Distanz zur Sonne. </body> </html> 63

64 Gestalten der Seite 12.4 Übungen 1.Erweitern Sie Ihre Datei erde.htm so, daß Sie eine hellblaue Hintergrundfarbe erhält. Speichern Sie die veränderte Datei unter dem Namen erde-003.htm ab. Hinweis: Verwenden Sie als Farbe z.b. LIGHTSKYBLUE. 2.Kopieren Sie die Datei erde.gif in Ihr Heimatverzeichnis und verwenden Sie diese Datei als Hintergrundbild für die Datei erde.htm. Speichern Sie die veränderte Datei unter dem Namen erde3-004.htm ab. 3.Zusatzaufgabe: Versuchen Sie (mit einem Bildbearbeitungsprogramm Ihrer Wahl), das Bild der Erde "etwas aufzuhellen", damit es besser als Hintergrundbild geeignet ist. (mögliche Programme: Adobe Photoshop, Adobe Photoshop Elements, Paintshop Pro,...) 12.5 Lösungen TODO 64