HTML Programmierung Dr. Leander Brandl BRG Keplerstraße - A-8020 Graz Universität Graz - Institut für Experimentalphysik Fachdidaktik der Physik http://w4.brgkepler.asn-graz.ac.at
1. Die erste Web-Seite 2. Eine Web-Seite mit Seitentitel 3. Web-Seite mit META-Tags 4. Web-Seite mit Farbeinstellungen 5. Automatischer Zeilenumbruch bei der Ausgabe von Text 6. Beabsichtigte Ausgabe von Text in mehreren Zeilen 7. Ausgabe von zentriertem Text 8. Überschriften auf einer Web-Seite 9. Ausgabe von Sonderzeichen 10. Ausgabe von Text mit Textattributen 11. Ausgabe von Text unterschiedlicher Größe und Farbe 12. Ausgabe von ausgerichtetem Text in Absätzen 13. Ausgabe von nummerierten und nicht nummerierten Aufzählungen 14. Die Verwendung von <blockquote> 15. Die erste Ausgabe einer Grafik 16. Rahmen um eine Grafik 17. Horizontale Ausrichtung einer Grafik 18. Vertikale Ausrichtung einer Grafik am Text 19. Verschiedene Trennlinien 20. Absolute Links 21. Relative Links 22. Anzeigen von Links in neuen Browserfenstern 23. Verwendung einer Grafik als Link 24. Links innerhalb einer Seite 25. Die erste Tabelle 26. Tabellen mit unterschiedlichen Rändern 27. Tabelle mit Farbeinstellungen 28. Ausgerichtete Tabellen unterschiedlicher Breite 29. Eine bunte Tabelle mit unterschiedlicher Ausrichtung in den Zellen 30. Verbinden von Zellen 31. Formatierung mit dem <div>-tag 32. Erstes Frameset 33. Frameset ohne Rahmen 34. Frameset mit Rahmen und fester Breite 35. Die Funktion von Links in Framesets 36. Verschachteltes Frameset 1 37. Verschachteltes Frameset 2 38. Verschachteltes Frameset 3 Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001
Aufgabe 1: Die erste Web-Seite Schreiben Sie den Code für die abgebildete Web-Seite im Windows - Editor und speichern Sie diesen laut der unten angegebenen Pfadangabe ab! Speichern unter: x:\htmlkurs\bsp01\bsp01.html Aufgabe 2: Eine Web-Seite mit Seitentitel Schreiben Sie den Code für die abgebildete Web-Seite im Windows - Editor und speichern Sie diesen laut der unten angegebenen Pfadangabe ab! Diese Seite soll weiters den in der Abbildung zu sehenden Seitentitel HTML-Kurs Beispiel 2 erhalten Speichern unter: x:\htmlkurs\bsp02\bsp02.html Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001
Aufgabe 3: Web-Seite mit META-Tags Erstellen Sie eine Web-Seite (Seitentitel: HTML-Kurs Beispiel 3 ) bei der zusätzlich zur Ausgabe der Textzeile ( Erste Web-Seite mit Einträgen für Suchmaschinen ) die folgenden Angaben in META-Tags abgelegt sind: 1. Autor: eigener Name 2.Veröffentlicher: HTML-Kurs 3. Schlüsselwörter: HTML, HTML-Kurs, HTML-Anleitung 4. Beschreibung: Informationen, Beispiele, Übungen, Lösungen, Speichern unter: x:\htmlkurs\bsp03\bsp03.html Aufgabe 4: Web-Seite mit Farbeinstellungen Erstellen Sie eine Web-Seite (Seitentitel: HTML-Kurs Beispiel 4 ) deren Hintergrund blau und die Standardtextfarbe gelb ist. In der ersten Zeile dieser Seite soll stehen: Hallo HTML-Kurs-Teilnehmer - nun wird es bunter! Speichern unter: x:\htmlkurs\bsp04\bsp04.html Aufgabe 5: Automatischer Zeilenumbruch bei der Ausgabe von Text Geben Sie den folgenden HTML-Code ein und öffnen Sie die Seite in einem Browser. Beobachten Sie dann genau, was passiert, wenn man die Fenstergröße des Browsers verändert. <html> <head> <title>html-kurs Beispiel 5</title> </head> <body> Hallo HTML-Kurs-Teilnehmer! Hier befindet sich das erste Mal etwas mehr Text. Was bei der Ausgabe dieses Textes beim Betrachten mit einem Browser passiert, erkennt man, wenn man die Größe des Browserfensters ändert. Man sollte erkennen, dass die Ausgabe dieses Textes völlig anders aussieht, als er hier im Code geschrieben steht. </body> </html> Speichern unter: x:\htmlkurs\bsp05\bsp05.html Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001
Aufgabe 6: Beabsichtigte Ausgabe von Text in mehreren Zeilen Versuchen Sie den HTML-Code für die folgende Seite zu schreiben (Seitentitel: HTML-Kurs Beispiel 6): Speichern unter: x:\htmlkurs\bsp06\bsp06.html Aufgabe 7: Ausgabe von zentriertem Text in mehreren Zeilen Versuchen Sie den HTML-Code für die folgende Seite zu schreiben (Seitentitel: HTML-Kurs Beispiel 7): Speichern unter: x:\htmlkurs\bsp07\bsp07.html Aufgabe 8: Überschriften auf einer Web-Seite Versuchen Sie den HTML-Code für die folgende Seite zu schreiben: (Seitentitel: HTML-Kurs Beispiel 8, Hintergrundfarbe: blau, Textfarbe: gelb, 1.Überschrift: Größe 1, 2. Überschrift: Größe 2) Speichern unter: x:\htmlkurs\bsp08\bsp08.html Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001
Aufgabe 9: Ausgabe von Sonderzeichen Versuchen Sie, den HTML-Code für die folgende Seite zu schreiben (Seitentitel: HTML-Kurs Beispiel 9)! Achten Sie dabei darauf, dass die Zeilenumbrüche genau so geschehen wie in der Abbildung. Speichern unter: x:\htmlkurs\bsp09\bsp09.html Aufgabe 10: Ausgabe von Text mit Textattributen Versuchen Sie den HTML-Code für die folgende Seite zu schreiben (Seitentitel: HTML-Kurs Beispiel 10)! Achten Sie dabei darauf, dass die Zeilenumbrüche genau so geschehen wie in der Abbildung! Speichern unter: x:\htmlkurs\bsp10\bsp10.html Aufgabe 11: Ausgabe von Text unterschiedlicher Größe und Farbe Versuchen Sie den HTML-Code für die abgebildete Ausgabe der Buchstaben A bis G zu schreiben (Seitentitel: HTML-Kurs Beispiel 11). Zusätzlich zu der ersichtlichen unterschiedlichen Schriftgröße soll jeder Buchstabe eine andere Farbe haben! Speichern unter: x:\htmlkurs\bsp11\bsp11.html Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001
Aufgabe 12: Ausgabe von ausgerichtetem Text in Absätzen Schreiben Sie den HTML-Code für die abgebildete formatierte Ausgabe (Seitentitel: HTML-Kurs Beispiel 12)! Speichern unter: x:\htmlkurs\bsp12\bsp12.html Aufgabe 13: Ausgabe von nummerierten und nicht nummerierten Aufzählungen Schreiben Sie den HTML-Code für die abgebildete Web-Seite! Die erste Aufzählung soll zu Zeilenbeginn jeweils einen kleinen Kreis erhalten, bei der zweiten Aufzählung soll automatisch eine durchgehende Nummerierung erzeugt werden. (Seitentitel: HTML-Kurs Beispiel 13). Speichern unter: x:\htmlkurs\bsp13\bsp13.html Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001
Aufgabe 14: Die Verwendung von <blockquote> In diesem Beispiel ist eine recht komplizierte Textformatierung zu erzeugen. Achten Sie darauf, dass es sich dabei um relative Positionierungen handelt. Überprüfen Sie ihr Ergebnis indem Sie die Seite in verschieden großen Browser-Fenstern betrachten! (Seitentitel: HTML-Kurs Beispiel 14). Speichern unter: x:\htmlkurs\bsp14\bsp14.html Aufgabe 15: Die erste Ausgabe einer Grafik Erstellen Sie die abgebildete Web-Seite, in der Sie die Grafik pen.gif einbinden! Sie finden diese im Ordner x:\htmlkurs\grafiken bzw. unter http://w4.brgkepler.asn-graz.ac.at/htmlmaterial (Seitentitel: HTML-Kurs Beispiel 15). Speichern unter: x:\htmlkurs\bsp15\bsp15.html Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001
Aufgabe 16: Rahmen um eine Grafik Schreiben Sie den Code für die abgebildete Web-Seite - achten Sie dabei speziell darauf, was um die Grafiken herum passiert! Die beiden Grafikdateien tools.gif und luefter.gif finden sie im Ordner x:\htmlkurs\grafiken bzw. unter http://w4.brgkepler.asn-graz.ac.at/htmlmaterial (Seitentitel: HTML-Kurs Beispiel 16). Speichern unter: x:\htmlkurs\bsp15\bsp15.html Aufgabe 17: Horizontale Ausrichtung einer Grafik Erstellen sie die abgebildete Web-Seite, in der Sie die Grafik mailbox.gif einbinden! Sie finden diese im Ordner x:\htmlkurs\grafiken bzw. unter http://w4.brgkepler.asn-graz.ac.at/htmlmaterial (Seitentitel: HTML-Kurs Beispiel 17). Speichern unter: x:\htmlkurs\bsp17\bsp17.html Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001
Aufgabe 18: Vertikale Ausrichtung einer Grafik am Text Erstellen Sie die abgebildete Web-Seite, in der sie die Grafik luefter.gif einbinden! Sie finden diese im Ordner x:\htmlkurs\grafiken bzw. unter http://w4.brgkepler.asn-graz.ac.at/htmlmaterial (Seitentitel: HTML-Kurs Beispiel 18). Speichern unter: x:\htmlkurs\bsp18\bsp18.html Aufgabe 19: Verschiedene Trennlinien Schreiben Sie den HTML-Code für die abgebildete Seite! Die Angaben über die darzustellenden Linien entnehmen Sie der Abbildung! (Seitentitel: HTML-Kurs Beispiel 19) Speichern unter: x:\htmlkurs\bsp19\bsp19.html Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001
Aufgabe 20: Absolute Links Schreiben Sie den HTML-Code für die abgebildete Seite! Der erste Link soll zur Hompage der Firma Sony http://www.sony.com verweisen, der zweite Link stellt einen e-mail-link zu lbrandl@sime.com dar (Seitentitel: HTML-Kurs Beispiel 20). Speichern unter: x:\htmlkurs\bsp20\mainpage.html Aufgabe 21: Relative Links Hier sind nun zwei Seiten zu erstellen, die sich im gleichen Verzeichnis befinden und sich gegenseitig durch Links aufrufen sollen! (Seitentitel der beiden Seiten: HTML-Kurs Beispiel 21). Speichern unter: x:\htmlkurs\bsp21\mainpage.html Speichern unter: x:\htmlkurs\bsp21\linkpage.html Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001
Aufgabe 22: Anzeigen von Seiten in neuen Browserfenstern Auf dieser Seite befinden sich zwei absolute Links zu http://www.sony.com und http://www.aon.at. Diese Seiten sollen nach Anklicken des Links in neuen Browserfenstern dargestellt werden. (Seitentitel der Seite: HTML-Kurs Beispiel 22). Speichern unter: x:\htmlkurs\bsp22\mainpage.html Aufgabe 23: Verwendung einer Grafik als Link Schreiben Sie den HTML-Code für die folgende Seite, auf der die Grafik als Link zu http://www.mcdonalds.com fungieren soll! Sie finden die Grafik im Ordner x:\htmlkurs\grafiken bzw. unter http:// w4.brgkepler.asn-graz.ac.at/htmlmaterial (Seitentitel der Seite: HTML-Kurs Beispiel 23). Speichern unter: x:\htmlkurs\bsp23\mainpage.html Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001
Aufgabe 24: Links innerhalb einer Seite Schreiben Sie den HTML-Code für die folgende Seite! Zwischen den fett gedruckten Überschriften sollen sich jeweils 14 Zeilen mit dem Wort Text am Anfang befinden. Von den unterstrichenen Wörtern am Anfang der Seite soll die Seite automatisch zu den jeweiligen Überschriften springen. (Seitentitel der Seite: HTML-Kurs Beispiel 24). Speichern unter: x:\htmlkurs\bsp24\bsp24.html Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001
Aufgabe 25: Die erste Tabelle Schreiben Sie den HTML-Code, der die dargestellte Tabelle auf einer Web-Seite ausgibt (Seitentitel der Seite: HTML-Kurs Beispiel 25)! Speichern unter: x:\htmlkurs\bsp25\bsp25.html Aufgabe 26: Tabellen mit unterschiedlichen Rändern Auf dieser Web-Seite befinden sich 3 Tabellen. Diese haben jeweils unterschiedliche Breiten der Ränder und der Gitternetzlinien - die Breiten entnehmen Sie der Abbildung (Seitentitel der Seite: HTML-Kurs Beispiel 26)! Speichern unter: x:\htmlkurs\bsp26\bsp26.html Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001
Aufgabe 27: Tabelle mit Farbeinstellungen Die Tabelle auf dieser Seite hat eine breiten blauen Rand und einen gelben Hintergrund. Schreiben Sie den HTML-Code für diese Seite (Seitentitel der Seite: HTML-Kurs Beispiel 27)! Speichern unter: x:\htmlkurs\bsp27\bsp27.html Aufgabe 28: Ausgerichtete Tabellen unterschiedlicher Breite Schreiben Sie den HTML-Code für die abgebildete Seite! Die erste Tabelle hat eine Breite von 75%, die zweite hat eine Breite von 50% (Seitentitel der Seite: HTML-Kurs Beispiel 28). Speichern unter: x:\htmlkurs\bsp28\bsp28.html Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001
Aufgabe 29: Eine bunte Tabelle mit unterschiedlicher Ausrichtung in den Zellen Schreiben Sie den HTML-Code für die abgebildete Seite! Alle Zellen der Tabelle sollen unterschiedliche Farben haben. Achten Sie besonders auf die geforderte Ausrichtung in den einzelnen Zellen (Seitentitel der Seite: HTML-Kurs Beispiel 29)! Speichern unter: x:\htmlkurs\bsp29\bsp29.html Aufgabe 30: Verbinden von Zellen Schreiben Sie den HTML-Code für die abgebildete Web-Seite! Die Zellen erstrecken sich dabei über unterschiedlichen Spalten und Zeilen. Achten sie weiters auf die geforderte Ausrichtung in den einzelnen Zellen! (Seitentitel der Seite: HTML-Kurs Beispiel 30) Speichern unter: x:\htmlkurs\bsp30\bsp30.html Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001
Aufgabe 31: Formatierung mit dem <div> - Tag Verwenden Sie bei der Ausrichtung der Elemente auf dieser Seite ausschließlich den <div> - Tag. Die Grafik luefter.gif finden sie im Ordner x:\htmlkurs\grafiken bzw. unter http://w4.brgkepler.asngraz.ac.at/htmlmaterial (Seitentitel der Seite: HTML-Kurs Beispiel 31)! Speichern unter: x:\htmlkurs\bsp31\bsp31.html Aufgabe 32: Erstes Frameset Schreiben Sie den HTML-Code für die drei benötigten HTML-Dateien, um diese Ausgabe in zwei Frames zu erreichen. Der linke Frame hat eine Breite von 25% (Seitentitel der Seiten: HTML-Kurs Beispiel 32). Speichern unter: Steuerdatei: x:\htmlkurs\bsp32\index.html linke Seite: x:\htmlkurs\bsp32\leftpage.html rechte Seite: x:\htmlkurs\bsp32\mainpage.html Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001
Aufgabe 33: Frameset ohne Rahmen In dieser Aufgabe erfolgt eine Aufteilung in drei Frames. Der obere, wie auch der untere Frame soll eine Höhe von 120 Pixel haben. Weiters sollen die Frames nicht duch einen Rahmen getrennt sein. Die Hintergrundfarbe der Seite im oberen Frame ist gelb, die der Seite im unteren Frame grau (Seitentitel der Seiten: HTML-Kurs Beispiel 33). Speichern unter: Steuerdatei: x:\htmlkurs\bsp33\index.html obere Seite: x:\htmlkurs\bsp33\leftpage.html mittlere Seite: x:\htmlkurs\bsp33\mainpage.html untere Seite: x:\htmlkurs\bsp33\downpage.html Aufgabe 34: Frameset mit Rahmen und fester Breite Die Aufgabe 34 entspricht genau der Aufgabe 33. NUR mit dem Unterschied, dass zwischen den Frames Rahmen angezeigt werden sollen, diese aber vom Besucher der Seite nicht verschoben werden können (Seitentitel der Seiten: HTML-Kurs Beispiel 34). Speichern unter: Steuerdatei: x:\htmlkurs\bsp34\index.html obere Seite: x:\htmlkurs\bsp34\leftpage.html mittlere Seite: x:\htmlkurs\bsp34\mainpage.html untere Seite: x:\htmlkurs\bsp34\downpage.html Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001
Aufgabe 35: Die Funktion von Links in Framesets In dieser Aufgabe sind insgesamt 6 HTML-Dateien zu erstellen. Beim Aufrufen der Seite index.html soll im Browser das Folgende angezeigt werden (Seitentitel der Seiten: HTML-Kurs Beispiel 35): Nun sollen durch die 3 Links die drei folgenden Seiten (mit unterschiedlicher Hintergrundfarbe) im rechten Frame angezeigt werden: Speichern unter: Steuerdatei: linke Seite: rechte Seite: Seite 1: Seite 2: Seite 3: x:\htmlkurs\bsp35\index.html x:\htmlkurs\bsp35\leftpage.html x:\htmlkurs\bsp35\mainpage.html x:\htmlkurs\bsp35\seite1.html x:\htmlkurs\bsp35\seite2.html x:\htmlkurs\bsp35\seite3.html Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001
Aufgabe 36: Verschachteltes Frameset 1 Schreiben Sie den HTML-Code für folgendes verschachteltes Frameset und die darin angezeigten Seiten (Seitentitel der Seiten: HTML-Kurs Beispiel 36): Speichern unter: Steuerdatei: x:\htmlkurs\bsp36\index.html linke Seite: x:\htmlkurs\bsp36\leftpage.html Hauptseite: x:\htmlkurs\bsp36\mainpage.html obere Seite: x:\htmlkurs\bsp36\toppage.html Aufgabe 37: Verschachteltes Frameset 2 Schreiben Sie den HTML-Code für folgendes verschachteltes Frameset! Sie benötigen keine HTML-Seiten, die in den Frames angezeigt werden - lassen Sie dazu im <frame> - Tag die Eigenschaft src einfach weg! (Seitentitel der Seiten: HTML-Kurs Beispiel 37). Speichern unter: Steuerdatei: x:\htmlkurs\bsp37\index.html Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001
Aufgabe 38: Verschachteltes Frameset 3 Schreiben Sie den HTML-Code für folgendes verschachteltes Frameset! Sie benötigen keine HTML-Seiten, die in den Frames angezeigt werden - lassen Sie dazu im <frame> - Tag die Eigenschaft src einfach weg! (Seitentitel der Seiten: HTML-Kurs Beispiel 38). Speichern unter: Steuerdatei: x:\htmlkurs\bsp38\index.html Dr. L. Brandl - HTML-Programmierung - - BRG Keplerstraße - 8020 Graz Jänner 2001