Die Zeile, in das Foto angegeben wird, heißt dann z. B. <a href="grafik/fotos/foto1.jpg"><img src="grafik/fotos/foto1_kl.

Transkript

1 7.1 Vorschaugrafiken verwenden Der Aufbau einer Seite geht schneller vonstatten, wenn man zunächst kleinere Vorschaugrafiken verwendet, die erst bei Bedarf auf die richtige Größe gebracht werden. Der Befehl dazu lautet: <a href="bild.jpg"><img src="minibild.gif"></a> Dabei wäre die Datei "bild.jpg die große Datei und "minibild.jpg" die verkleinerte Variante. Dazu ist es allerdings erforderlich, über ein Grafikprogramm zu verfügen, mit dem Grafiken proportional verkleinert werden können. Mit Microsoft Photo Editor geht dies mit dem Befehl: Bild Größe ändern (Änderung auf 50 % der Größe = 50 % Speicherplatz) Aufgabe: Es soll ein HTML-Dokument mit Vorschaugrafiken entstehen, die erst durch Anklicken auf 100 % Größe gebracht werden. Erstellen Sie die folgende Datei. Verwenden Sie dafür die jpg-dateien Foto1.jpg, Foto1.jpg, Foto2.jpg, Foto4.jpg, Foto4.jpg. Die Fotos sind auf 20 % der ursprünglichen Größe verkleinert. Die Zeile, in das Foto angegeben wird, heißt dann z. B. <a href="grafik/fotos/foto1.jpg"><img src="grafik/fotos/foto1_kl.jpg"></a><br/> Sie sehen übrigens hier die Angabe des Pfades wie in MS-DOS, nur dass hier in HTML der "normale" Schrägstrich und nicht der Backslash verwendet wird. Dies ist eine relative Pfadangabe, der Ordner Grafik und der Ordner Fotos zweigen von Hauptordner, in das das HTML- Dokument abgelegt ist, ab. Ihre Aufgabe ist dabei, zunächst jeweils das Foto mit dem MS-Photo-Editor zu öffnen und auf 20 % der Größe zu bringen, mit dem Befehl Speichern unter unter verändertem Namen abzuspeichern (z.b. als Foto1_kl.jpg) und dann die HTML-Datei zu erstellen. Sehen Sie hier, wie viel Speicherplatz man spart, wenn jpg-dateien auf 20% verkleinert werden. (Die um 80% reduzierte Datei heißt jeweils z. B. Foto1_kl.jpg) ' Für die Anzeige auf dem Monitor bzw. die Übertragung über Internet kommen nur noch die wenigen Byte für das HTML- Dokument selbst dazu. Die Größe der links gezeigten Datei beträgt also zunächst nur ca. 10 KB, erst beim Öffnen der größeren Bilder werden die Datenmengen der größeren Bilder übertragen

2 7.2 JPG-Fotos komprimieren Ebenfalls mit dem (kostenlosen) Windows-Zubehör-Programm Photo Editor ist es möglich, JPG-Fotos zu komprimieren. Es kommt darauf an, auf wie viel % der ursprünglichen Speichermenge Bilder gebracht werden können, ohne sichtbare Qualitätseinbußen zu erleiden. Ein Fehler vieler Hobby-Seiten ist es darüber hinaus, viel zu viele Grafiken auf ein HTML- Dokument zu bringen. Sehen Sie sich dazu folgendes Beispiel an: (oder offline im ForAll_Ordner als gespeicherte Datei Die Güllepumpe.htm (mit dem Grafik- Ordner: Die Güllepumpe-Dateien). Darin sehen Sie, dass die Werner-Comic-Seiten über ein MB Platz brauchen: Offline kein Problem, aber mit einem Modem die Dateien aus dem Internet zu laden, dauert viel zu lange. Denken Sie immer daran, dass Surfer ungeduldige Menschen sind, wenn man länger als 5 bis 10 Sekunden warten muss, wird oft schon entnervt weggeklickt. Besser ist folgendes Verfahren: a) die Dateien im Speicherplatzbedarf zu verringern, indem Sie als JPG-Dateien mit reduzierter Menge gespeichert werden b) nicht alle 4 Dateien auf ein Dokument zu speichern, sondern so, dass man jeweils mit einem Link weiter zum nächsten Bild kommt. Aufgabe: Öffnen Sie nacheinander die gif- Grafikdateien mit dem Photo Editor. Speichern Sie sie im JPG-Format ab. Wenn man im Speichern-unter- Dialogfeld auf die Schaltfläche Weitere klickt, dann kann man den Qualitätsfaktor einstellen, Testen Sie verschiedene Werte, um zu sehen, wann sich ein Qualitätsverlust bemerkbar macht. Die nebenstehenden Werte ergeben sich, wenn die Grafikdateien auf 20% komprimiert werden. Aufgabe: Erstellen Sie ein HTML-Dokument, in dem zunächst nur die erste der Werner- Comic-Dateien zu sehen ist. Auf ihr soll der Link auf die nächste erfolgen. Außerdem sollen jeweils Links auf die Startseite zu sehen sein

3 HTML-Code nächste Seite <HTML> <HEAD> <TITLE>Werner</TITLE> <META content="text/html; charset=windows-1252" http-equiv=content-type> </HEAD> <BODY alink=#0000ff bgcolor=#fffff> <b>werner, 1. Seite</b> <BR> <p align="right"> <a href="werner2.htm">hier geht s zur nächsten Comic-Seite</a></p> <IMG src="grafik/werner-1.jpg"> <BR><BR> <a href="werner2.htm"> Hier geht s zur nächsten Comic-Seite</a> <BR> </BODY></HTML> das ist die letzte Seite der 4 Werner-Comic-Seiten: 8 Tabellen Tabellen sind ein wichtiges Formatierungsmittel in HTML-Dokumenten. Sie werden gebraucht, um a) natürlich tatsächliche Tabellen darzustellen und b) um unsichtbare Einteilungen in rechte und linke Spalte zu erzeugen, vergleichbar mit Gitternetztabellen in Word, die ohne Rahmenlinien dargestellt werden. Text in Tabellen wird standardmäßig zunächst linksbündig ausgerichtet, und die Größe der Tabellenspalten richtet sich nach dem enthaltenen Text, wenn nichts anderes angegeben wird. Die Tags, mit denen Tabellen beschrieben werden, sind zunächst folgende:

4 <table>... </table>....</tr> tr = table row = Tabellenzeile öffnendes und schließendes Tag zur Begrenzung von Tabellen <td>....</td> td=table data = Inhalt der Zellen Beispiel: Angenommen, der Gebrauchtwagenhändler aus den vorigen Aufgaben will eine Übersicht über derzeit angebotene Modelle wiedergeben. Sie soll so aussehen: Modell Preis in Euro BMW 320 TDI 11900,00 Trabant S ,00 HTML-Code <table> <td> Modell</td> <td>preis in Euro </td> <td> BMW 320 TDI </td> <td> 11900,00</td> <td> Trabant S 601</td> <td> 589,00</td> </table> Darstellung im Browser So erkennt am allerdings im Internet Explorer den Tabellencharakter nicht mehr richtig. Besser wäre es für das Beispiel, wenn Gitternetzlinien angezeigt würden. 8.1 Gitternetzlinien Ändern Sie nur die erste Zeile so um: <table border=1> <table border=5> So wird die Dicke des Rahmens eingestellt 8.2 Erste Zeile als Kopf der Tabelle Um die erste Zeile als Titel darzustellen, wird für alle Einträge der ersten Zeile mit dem tag <th> =table head = Tabellenkopf eingeleitet. Die Darstellung ist dann fett und zentriert:... <th> Modell</th> <th>preis in Euro </th> Ausrichtung von Tabellen Standardmäßig werden Tabelleninhalte wie normaler Text linksbündig ausgerichtet, Kopfzellen sind zentriert ausgerichtet, wenn man nichts anderes vorsieht. Wenn davon abgewichen werden soll, dann muss sie mit der Angabe align im einleitenden tag der jeweiligen Zelle oder der Tabellenzeile ausgerichtet werden. HTML-Code Tabelle

5 <table border =3> <th align=left>modell</th> <th align=left>preis in Euro</th> </tr> <td>bmw 320 TDI</td> <td align=right>11900,00</td> <td>trabant S 601 </td> <td align=right>589,00 </td> </tr> </table> Aufgabe: Erstellen Sie die folgende Tabelle mit HTML: 8.4 cellpadding und cellspacing Mit diesen beiden Angaben, die wie die border-angabe in das einleitende table-tag gesetzt werden, kann man die Tabelle noch exakter gestalten. cellpadding cellspacing An den Beispielen erkennen Sie den Unterschied: <table border="2" cellpadding=10>... Randabstand zwischen Zellenrand und Zelleninhalt Abstand zwischen den einzelnen Zellen "Dicke der Wand" <table border="2" cellspacing=10> 8.5 Breite und Höhe bestimmen Im einleitenden Tabellen-Tag können Sie die Breite und die Höhe der Tabelle bestimmen. width= Breite der Tabelle (Angabe in Pixeln oder in %) height= Höhe der Tabelle (auch hier Angabe in Pixeln oder in %) Aufgabe: Führen Sie diese Angaben am Beispiel aus <table border=5 width=300>

6 <table border=5 width=60%> <table border=1 width=200 height=150> Mit Hilfe der Tabellenbefehle ist es auch leichter, Grafiken auf HTML-Dokumenten anzuordnen. Um dies zu üben, soll zunächst eine Startseite mit dem Namen index.htm in folgender Form erstellt werden. Für dies und die weiteren Seiten verwenden Sie bitte die jpg-dateien aus dem Ordner Motorrad Überschrift 2. Ordnung startbild.jpg Hyperlinks zu den Dateien: motorrad1.htm motorrad2.htm motorrad3.htm motorrad4.htm motorrad5.htm motorrad6.htm Zur Erinnerung: Der Link zu den verknüpften Dateien lautet z. B. so: <a href="motorrad1.htm">brough Superior</a> Text, der angezeigt wird hyper ref. zur Datei motorrad1.htm Die Datei motorrad1.htm soll so aussehen: (Erläuterungen nächste Seite)

7 Das HTML-Dokument auf der vorigen Seite hat folgenden Aufbau: Überschrift Brough Superior bleibt leer Bild Dieses Motorrad stellt... Hyperlink: zurück zur Startseite [hier steht der gesamte Text unter dem Bild] HTML-Code ohne Grundgerüst der Datei: Zur besseren Verdeutlichung noch einmal die Tabelle mit den einzelnen Zellen: Tabellenzeile beginnt <td><b>brough Superior</b></td> <td><img src="brough Superior.jpg" border="0"> </td> </tr> Tabellenzeile endet Tabellenzeile beginnt <td> </td> <td> Dieses Motorrad stellt eine Besonderheit dar, es wurde in den Jahren 1936 bis 1939 gebaut und verfügte schon früh über Merkmale, die bei anderen Maschinen

8 erst nach dem Krieg üblich wurden</td> </tr> Tabellenzeile endet Tabellenzeile beginnt <td> </td> <td> <a href="index.htm">zurück zur Startseite</a></td> </tr> Tabellenzeile endet Breite der Tabellenspalte einstellen: Text zu weit nach rechts! Wenn der Text (bei hoher Bildschirmauflösung des Browsers, den der Betrachter verwendet) weit über das Bild hinaus nach rechts läuft, dann ist es am besten, wenn die Breite der Tabellenspalte genauso wie die Breite des Bildes eingestellt wird (jpg-bild z. B. über Photo Editor öffnen und dort über den Befehl Bild Größe ändern nachgucken, wie breit das Bild ist (601 Pixel) kann auch in der Statuszeile abgelesen werden) Dann kann man anschließend im HTML-Code genau diese Breite als Breite der Tabellenspalte einstellen (s. S. 19, Tabellenhöhe und Breiet bestimmen): Aufgabe: Erstellen Sie jetzt die weiteren Dateien, die über Link erreichbar sein sollen. Versuchen Sie dabei, viele Elemente der Dateien zu übernehmen, der Aufbau der Tabellen und die Links sind ja jedes Mal gleich, und es muss tatsächlich nur der kurze Text und der Name der Grafik geändert werden. Zur besseren Übersicht hier die Fotos und die Dateinamen: Motorrad2.htm:

9 motorrad3.htm

10 motorrad4.htm motorrad5.htm motorrad6.htm