Themen

Projekte

Links

Software

Themen

Erste Schritte mit CSS

Theoretische Informatik

Aufgabe 1:

Sie haben sich bereit erklärt, den Ausbau der Sternback-Webseite weiter voranzutreiben. Der Geschäftsführer von Sternback freut sich über Ihr Engagement, kritzelt etwas auf eine Serviette und gibt sie Ihnen...

Erstellen Sie eine HTML-Datei mit dem Windows-Editor, die den auf der Serviette hingekritzelten Inhalt strukturiert darstellt. Speichern Sie die Datei unter dem Namen index.html. Beachten Sie, dass jede HTML-Seite die Tags <html>, <head>, <title> und <body> benötigt!

text.txt

Aufgabe 2:

Tobis Erlebnisbericht soll in Form einer Webseite veröffentlicht werden. Sie haben sich bereit erklärt, diese Aufgabe zu übernehmen. Nutzen Sie nur die bisher im Unterricht verwendeten Tags und denken Sie daran: HTML ist dazu da, den Seiteninhalt strukturiert darzustellen. Versuchen Sie also die Tagebuchstruktur bestmöglich in HTML nachzubilden. Verpassen Sie der Seite danach mit Hilfe der Ihnen bekannten CSS-Stildefinitionen ein ansprechendes Äußeres. Die Bilder gibt es hier:

segway1.jpg | segway2.jpg | segway.txt

Die HTML-Datei bitte per Email an mich, die Bilder brauchen nicht mitgeschickt zu werden.

Aufgabe 3:

Aufgabe 4:

Formulieren Sie jeweils relative Pfadangaben:

Startdatei (Datei die die Pfadangabe enthält)	Zieldatei (Datei auf die verwiesen - mit der verlinkt - wird)
top100.html	genres.html
top100.html	logo.gif
genres.html	logo.gif
top100.html	pinkfloyd.html
coldplay.html	chris.gif

Aufgabe 5:

In HTML gibt es einen weiteren Listentyp, die Definitionslisten:

Aufgabe 6:

http://de.selfhtml.org/html/referenz/zeichen.htm

Aufgabe 7:

Erstelle eine Webseite, in der eine Liste von Links zu deinen auf dem Webserver der Ursulaschule gespeicherten Projekten gespeichert werden soll. Die Webseite könnte so aussehen.

Wichtig, damit alles so wie geplant klappt:

Die Webseite mit dem "Inhaltsverzeichnis" ist in der Datei index.html gespeichert, die im Hauptverzeichnis des Webservers liegt (ganz oben, nicht in einen Unterordner verpackt).
Für jedes Projekt wird auf dem Webserver ein Unterordner erzeugt, in dem alle Projektdateien und -ordner gespeichert werden.
Beispiel:
Für Tobis Tagebuch wird auf dem Webserver zunächst ein Ordner 'tagebuch' erstellt. In diesen Ordner kommen dann die Projektdatei tagebuch.html sowie der Projektordner 'bilder', in dem die beiden Fotos gespeichert sind.
Die Links auf der Webseite mit dem "Inhaltsverzeichnis" verweisen jeweils auf die Startseiten der verschiedenen Projekte.
Beispiel:
Der Link 'Tobis Tagebuch (final version)' enthält die relative Pfadangabe 'tagebuch/tagebuch.html'. Man muss von index.html aus erst in den 'tagebuch'-Ordner wechseln, um dort die Datei 'tagebuch.html' aufrufen zu können.

Aufgabe ist es, die Webseite mit dem Inhaltsverzeichnis zu erstellen und per FTP auf den Webserver hochzuladen. Außerdem soll das Tagebuch-Projekt in seiner finalen Version (mit Zitaten, Listen und Zeichen-Entitäten für Sonderzeichen) in einen Ordner 'tagebuch' verpackt und ebenfalls hochgeladen werden. Die Webseite mit dem Inhaltsverzeichnis sollte einen funktionierenden Link zur Startseite des Tagebuch-Projektes enthalten. Der oben abgebildete Link zur Projektseite des Kurses kann zunächst vernachlässigt werden. Wer möchte kann auch seine Webseite zur Lösung von Aufgabe 3 in einen Projektordner verpacken, hochladen und den entsprechenden Link im Inhaltsverzeichnis setzen.

Benutzt zum Hochladen per FTP fileZilla. Das ist deutlich komfortabler als über die Webseite www2ftp.de. Beachtet die Kurzanleitung zu fileZilla und das was unter 'Online gehen' steht.

Aufgabe 8:

Sie haben die Aufgabe folgende Seite möglichst genau nachzubauen:

Gehen Sie dabei fogendermaßen vor:

Besorgen Sie sich das Bildmaterial hier, und das Textmaterial hier.
Legen Sie einen Projektordner an und in diesem eine zunächst leere HTML-Datei index.html sowie einen Unterordner für die Bilder.
Bringen Sie die Bilder auf die passende Größe (so wie in der Vorlage) und speichern sie in den Bilderordner.
Öffnen Sie index.html und schreiben Sie erst mal das HTML-Grundgerüst.
Zur Darstellung der Informationen zu einzelnen Familienmitgliedern soll eine Definition List zum Einsatz kommen (vergl. Aufgabe 5), in der auf ein dt-Element (für den Namen) zwei dd-Elemente folgen (für das Bild und die Beschreibung).
Überprüfen Sie Ihren Quelltext auf Sonderzeichen (durch Zeichenentitäten ersetzen!) und kennzeichnen Sie Zitat im Text mit dem q-Element.
Legen Sie einen CSS-Bereich mit Hilfe des style-Elementes im Dokumentkopf an und spielen Sie ein wenig mit den Außen- und Innenabständen und den Rahmeneinstellungen herum. Auch Schriftart und Schriftgröße können schon eingestellt werden. Wir wissen noch nicht, wie man den Text um das Bild fließen lassen kann!
Ein Klick auf das kleine Bild eines Familienmitglieds soll eine Seite mit einer größeren Bilddarstellung öffnen:

Legen Sie für jedes Familienmitglied eine eigene HTML-Seite an, die eine vergrößerte Darstellung des Bilds enthält und verlinken Sie die kleineren Bilder auf der Startseite mit den zugehörigen Unterseiten. Alle Unterseiten speichern Sie im Ordner html. Alle großen Bilder kommen in den Bilderordner (ggf. noch Unterordner anlegen).

ACHTUNG: Den in der Schule installierten HTML-Editor CSE HTML Validator findet ihr hier. Ist ca. 7 MB groß, sollte zur Not auch per Modem gehen...

Aufgabe 8:

Bearbeiten Sie diese Seite über Würfelspiele und sorgen Sie dafür, dass die Seite den (strengen) HTML 4.01 Strict Standard erfüllt. Überprüfen Sie ihre Lösung mit Hilfe des W3C Validators. Beachten Sie die Hinweise ganz unten auf der Seite "Seriöses HTML".

Aufgabe 9:

Die KopfüBar wird komplett renoviert! Die Jungs von der Bar haben eine Menge neuen Text geliefert, der die Bar und ihr Angebot beschreibt. Es gibt außerdem eine neue Abbildung für den Kopf der Seite. Bleibt nur noch das Design der Seite aufzubessern. Zum Glück gibt es eine gute Vorlage.

Ihre Aufgabe ist es, die Seite mit Hilfe einer externen CSS-Datei so zu stylen, dass sie der Vorlage möglichst nah kommt. Dazu einige Tipps:

Zur Angabe der Schriftgröße folgen Sie dem Vorschlag aus der letzten Stunde und legen für das body-Element eine Stilregel an, die die Schriftgröße auf den Wert "small" setzt. Alle weiteren Größenangaben machen Sie relativ (in % oder em). Die Farbe für die Überschriften ist #007e7e.
Die Zeilenhöhe legt man mit Hilfe der Eigenschaft line-height fest.
Formatieren Sie den Abschnitt "Garantie" mit Hilfe einer Klasse. Fügen Sie also dem p-Element das Attribut class="garantie" hinzu und selektieren Sie Elemente dieser Klasse in CSS durch Angabe von .garantie. Neben den Rahmeneigenschaften müssen vor allem padding, margin und border angepasst werden. Die Hintergrundfarbe ist #a7cece, die Schriftfarbe #444444. Schließlich muss eine Hintergrundgrafik mit Hilfe der Eigenschaft background-image eingefügt werden. Diese findet sich im Ordner bilder und heisst hintergrund.gif. Die Eigenschaften background-repeat und background-position müssen ebenfalls auf die richtigen Werte gesetzt werden.

» drucken: pdf | html