Erstellen von Web-Seiten Grundlagen html: Zum Erstellen von html-seiten benötigen wir nur einen Text-Editor. Der Inhalt von HTML-Dateien steht in HTML-Elementen. HTML-Elemente werden durch so genannte Tags markiert. Fast alle HTML-Elemente werden durch ein einleitendes und ein abschließendes Tag markiert. Der Inhalt dazwischen ist der "Gültigkeitsbereich" des entsprechenden Elements. Tags werden in spitzen Klammern notiert. <html> <head> <meta name="author" content="hans Muster"> <title>text des Titels</title> </head> <body> </body> </html> Hallo Welt <h1>hallo Welt</h1> <h1><i>hallo</i> Welt</h1> In Anschluss soll ein manueller <br>zeilenumbruch eingefügt werden Im <b>anschluss</b>soll ein manueller... <h1 align="center">html - die Sprache des Web</h1> <h[1-6]> (h=heading=überschrift) leitet eine Überschrift ein. Das i-element steht für italic (=kursiver Text). <br> signalisiert einen manuellen Zeilenumbruch <b> = fett (bright) align= center Zentrierter Text Frontpage 2000 Wir starten Frontpage 2000 durch einen Klick auf obiges Icon. Der Bildschirm ist uns von den anderen Microsoft Produkten her bekannt. Die Funktionen des Programms sind microsofttypisch aufgebaut. Wir erstellen ein Erdkunde Quiz; die Fragen wurden im Erdkundeunterricht vorbereitet. Wichtig: Die Organisation der Präsentation muss bereits abgeschlossen sein! H. Beede It 8. Jahrgansstufe html Seite 1 von 7
Neues Web anlegen Klicken Sie im Menü Datei auf den Befehl Neu und wählen Sie die Option Web und anschließend Standardweb. Belassen Sie den vorgegebenen Pfad und wählen als Dateinamen quiz.htm. Durch einen Klick auf den Button Ordner in der Spalte Ansichten (ganz links) erkennen wir, dass FP (Frontpage) die Datei index.htm angelegt hat. Löschen oder ändern Sie diesen Namen nicht, da Neue Seite in der Navigationsansicht festlegen Wir wechseln in die Ansicht Navigation. Von der nun zu erstellenden Navigationsstruktur sehen bis bisweilen nur die Hauptseite. Durch einen Rechtsklick auf die Hauptseite wird das Kontextmenü eingeblendet. Wir wählen Neue Seite. Wir ändern den Namen dieser neuen Seite auf Frage1. Auf diese Art und Weise erstellen wir die von uns vorher entworfene Navitationsstruktur. Frontpage bietet drei verschiedene Ansichten. In der Normalansicht können wir den Text eingeben und bearbeiten In der HTML-Ansicht können wir den Quelltext (html-code) ansehen und bearbeiten. Die Vorschau zeigt uns die Seite so, wie sie im Browser dargestellt wird. H. Beede It 8. Jahrgansstufe html Seite 2 von 7
Wir öffnen die Seite Frage1.htm Text eingeben Schriftart: Arial,Helvetica Schriftgröße: Standard = 12 Optisch ansprechend = 10 Formatierungsmöglichkeiten:... ähnlich WORD Die Gestaltung von Web-Seiten wird zu einem großen Teil mit Hilfe von Tabellen durchgeführt. In vielen Fällen wird eine blinde Tabelle angelegt, d. h. die Rahmenlinien werden ausgeblendet. Das Einfügen einer Tabelle funktioniert in genau so, wie wir es von WORD, EXCEL usw. gewohnt sind. Für unsere Aufgabe bietet sich auch die Tabelle an. Wir erzeugen eine Tabelle mit 3 Zeilen und 2 Spalten. Zur weiteren Bearbeitung klicken wir mit der rechten Maustaste in die Tabelle und wählen im Kontextmenü die Option Tabelleneigenschaften. Es öffnet sich folgendes Fenster Ausrichtung: horizontale Position der Tabelle Stärke: Breite angeben: wir wählen die Option in Prozent und lassen den Wert auf 100. Höhe angeben: wir entfernen das Häkchen. Rahmen Stärke: wird der Wert 0 gewählt, so sind die Rahmenlinien ausgeblendet. Farbe: hiermit wird die Rahmenfarbe gewählt. Hintergrund: dem Tabellenhintergrund kann eine Farbe zugewiesen werden. Aktivieren wir das Kästchen Hintergrundbild verwenden, so kann der Pfad zu einer Grafik (jpg oder gif) zugewiesen werden. Mit OK schließen wir das Fenster. H. Beede It 8. Jahrgansstufe html Seite 3 von 7
Im Anschluss verbinden wir die oberen drei Zellen. Dazu markieren wir die drei Zellen und wählen im Menu den Punkt Tabelle Zellen verbinden. Wir geben die erste Frage in die obere Zeile ein: Um wie viel Grad ist die Erdachse geneigt? In die vier noch freien Zellen tragen wir die Antworten zur 1. Frage ein. Um wie viel Grad ist die Erdachse geneigt? 1 um 23 2 um 22,5 3 um 23,5 4 um 24 Nun fehlen noch die Antwortmöglichkeiten: Die Antwort ist leider falsch! Versuche es noch einmal. Die Antwort ist richtig! Auf zur nächsten Frage. Wir öffnen dazu die Seiten falsch1.htm und richtig1.htm, schreiben den gewünschten Text in die jeweilige Seite und speichern die Änderungen ab. Webseiten verlinken Links (kurz für Hyperlinks) sind sensible Verknüpfungen auf Webseiten. Über Links können Sie von einem Element auf Ihrer Seite (einem Wort, Symbol oder Bild) zu anderen Elementen auf der gleichen Webside (Sprungziel), zu einer anderen Seite der Website (internes Dokument), zu einer anderen Website irgendwo im WWW (externes Dokument) gelangen. Der Benutzer aktiviert die Verknüpfung per Mausklick auf den Link; dieser ist i.d.r. optisch gekennzeichnet. Es gibt Text-Links und grafische Links. Bei Text-Links muss der unterstrichene Text angeklickt werden, bei grafischen Links die entsprechende Grafik bzw. ein bestimmter Ausschnitt (Hotspot) einer Grafik (Imagemap). Da Text-Links automatisch unterstrichen und in der Regel blau dargestellt werden, soll diese Formatierung nach Möglichkeit nicht verwendet werden, um den Besucher nicht zu irritieren. Wir öffnen nun die Seite Frage1.htm. H. Beede It 8. Jahrgansstufe html Seite 4 von 7
Hyperlink zu einer anderen html-datei im eigenen Web. Wir markieren den gewünschten Text und klicken mit der rechten Maustaste darauf. Nun erscheint folgendes Kontextmenü: Zum einfügen des Links klicken wir auf den Punkt Hyperlink... Es öffnet sich ein neues Fenster: Aus den angebotenen Dateien wählen wir die gewünschte aus. Diese Datei wird von Frontpage automatisch im Feld URL eingetragen. Der Befehl wird mit OK abgeschlossen. Nach den Wahl des Vorschau-Fensters können wir den Link ausprobieren. Der Klick auf die Grafik führt uns direkt zur vorher gewählten Seite. Klicken wir im Fenster Ansicht auf den Button Hyperlinks, so können wir unserer Verlinkungen graphisch nachvollziehen. Übungsaufgabe: Die vier Jahreszeiten Wir öffnen ein neues Web Datei Neu Web - Standardweb und geben den Pfad bzw. den Ordner an, in dem das Web gespeichert werden soll. Im neuen Web wird eine Datei mit dem Namen index.htm angelegt. Diese Datei ist unsere Ausgangsseite. In der Navigationsansicht legen wir den Navigationsbaum fest. Die einzelnen Seiten nennen wir Frühling, Sommer, Herbst und Winter. H. Beede It 8. Jahrgansstufe html Seite 5 von 7
Wir öffnen nun die index.htm durch einen Doppelklick auf das Bild Homepage. In dieser Datei legen wir nun eine Tabelle mit 3 Zeilen und einer Spalte an. Diese soll 700 Pixel breit sein. Für die Ausrichtung wählen wir zentriert und die Rahmenstärke wird auf 0 eingestellt. In die erste und dritte Zeile schreiben wir den Text gemäß der Vorlage und formatieren diesen. In die mittlere Zeile wird eine Grafik eingefügt. Vorher verändern wir die Zeilenhöhe auf 100 Pixel. Dazu klicken wir mit der rechten Maustaste auf die mittlere Zeile und wählen den Befehl Zelleneigenschaften. Wir stellen den Wert Höhe angeben auf 100 Pixel und klicken in das davor stehende Kästchen. (Häkchen) Wir wählen den Befehl Einfügen Bild aus Datei um eine Grafik einzufügen. In dem sich nun öffnenden Fenster wählen wir die gewünschte Datei aus. Eventuell muss noch auf nebenstehendes Icon geklickt werden um die Suche zu ermöglichen. Die gewünschte Datei heißt jz-tafel.gif. Als nächstes wollen wir die Hintergrundfarbe verändern. Durch einen Klick mit der rechten Maustaste auf die geöffnete Seite erscheint das Kontextmenü, wir wählen die Option Seiteneigenschaften. Im nun erscheinenden Fester stellen wir die Farben für Hintergrund, Text und Hyperlink ein. (Hyperlink wird in der Regel so belassen) Über die Option mehr Farben wird die Auswahl der zur Verfügung stehenden Farben erweitert. Seiten der Jahreszeiten erstellen Wir beginnen mit dem Frühling. Durch einen klick auf das Bild Frühling in der Navigationsansicht öffnet sich das zugehörige Dokument (im Bedarfsfall kann der Dateiname geändert werden) in unserem Web. Bei der Vergabe von Dateinamen im Internet soll (muss nicht) kein Dateiname länger als 8 Zeichen sein. (8+3) Umlaute dürfen nicht verwendet werden. Begründet ist dies in der Menge der vorhandenen Browser, von denen einige mit längeren Dateinamen nicht klar kommen. H. Beede It 8. Jahrgansstufe html Seite 6 von 7
Da wir auf zur Navigation auf dieser Seite den Inhalt unserer Index-Seite brauchen, kopieren wir diesen (nebenstehendes Bild) natürlich in unsere aktuelle Seite. Wir stellen die Tabellenbreite auf 300 Pixel, die Schriftgröße und den Text passen wir an. Die fehlende 4. Zeile fügen wir mit der Tab- Taste ein. Der Cursor muss dafür in der 3. Zeile blinken. (letzte Zeile der Tabelle) Am Ende der Tabelle schalten wir einmal. Für den zweiten Teil der Seite erstellen wir wieder eine Tabelle. (Drei Zeilen und zwei Spalten) Die neue Tabelle wird mit den gleichen Attributen wie die vorherigen formatiert. Zunächst verbinden wir die Zellen in Zeile 2. Wir markieren beide Zellen der Zeile 2, öffnen das Menü Tabelle und klicken auf Zellen verbinden. Nun Fügen wir die horizontale Linie ein. Der Cursor befindet sich in Zeile 2, die Markierung wurde aufgehoben. Über den Befehl Einfügen Horizontale Linie wird die Aufgabe ausgeführt. Störende Leerzeilen können entfernt werden. Die Zellen in Zeile 3 werden ebenfalls verbunden. Im Anschluss fügen wir die Grafik zurück.gif ein und formatieren diese rechtsbündig. Die nun erstellte Seite benötige wir für alle Jahreszeiten. Deshalb kopieren wir den Inhalt in die Seiten Sommer, Herbst und Winter. Abschließend kopieren wir die zugehörigen Bilder und Gedichte in die freien Zellen unserer Tabelle in den verschiedenen Dateien. Als letzten Schritt müssen die Hyperlinks eingefügt werden. Wir gehen so vor, wie wir es bereits bei der Übungsaufgabe Quiz getan haben. Grafik als Hyperlink Wir klicken mit der Maus auf die gewünschte Grafik Nun öffnen wir das zugehörige Kontextmenü und wähle die Option Hyperlink. Das weiter Vorgehen ist bekannt. Hotspot In Grafiken können bestimmte stellen Hotspots versehen werden. Von diesen Bereichen aus kann ein Hyperlink eingefügt werden. Dazu markieren wir die Grafik und anschließend klicken wir auf eines dieser Icons Nun wird im gewünschte Bereich ein Rahmen aufgezogen. Das Fenster zum Einfügen eines Hyperlinks öffnet sich. H. Beede It 8. Jahrgansstufe html Seite 7 von 7