Home > Schule > HTML > Aufgaben

Laufende Aufgaben

Inhalt der Seite

01.02.2007

Wiederholung

Die ersten Stunden dienen der Einführung und Wiederholung - so manche/r hatte ja schon mit HTML zu tun ...

Die Arbeit an den HTML-Seiten wird mit Hilfe des HTML-Editors erfolgen. Leider müssen Sie bei jedem Programmstart die Verknüpfung zur HTML-Hilfe erneuern. Wählen Sie dazu die Datei selfhtml.chm unter C:\SProgrmme\Info\phase5\Hilfe aus. Der Dateifilter sollte dabei auf alle Dateitypen gestellt sein.

In dieser Hilfe finden Sie auch Links auf externe Seiten im Internet.

Experimentieren Sie ein bisschen mit dem HTML-Editor und gewöhnen Sie sich an die Benutzung. Sie können ihn auch im Internet downloaden und zu Hause installieren.

Seiten, die Sie unter "Was ist das?" gelesen haben sollten:

  1. Hypertext
  2. Hyperlinks
  3. HTML und Tags
  4. <head> und <body>

Aufgaben

  1. Legen Sie in Ihrem Netzverzeichnis den Ordner web an.
  2. Legen Sie mit Hilfe des HTML-Editors (Programme/Info/phase5) eine Datei mit dem Namen index.html an. Diese Datei wird die Startdatei Ihrer Webseite.
  3. Experimentieren Sie mit Eigenschaften des Hintergrundes und der Überschriften.
  4. Legen Sie als Test eine beliebige zweite HTML-Datei an, die Sie per Hyperlink von der Seite index.html aufrufen können.

08.02.2007

Tabellen

Wir wiederholen und/oder führen ein: <table> mit den Tags <tr> und <td> mit einem Ausblick auf CSS.

Seiten, die Sie unter "Was ist das?" gelesen haben sollten:

  1. Tabellen (mit allen verfügbaren Unterseiten)

Aufgaben

  1. Legen Sie eine Datei mit dem Namen tabelle.html an.
  2. Fügen Sie mit Hilfe der Registerkarte Tabelle eine Tabelle in den <body> ein!
  3. Experimentieren Sie zunächst ausführlich mit den Attributen width, border, color, font für die Elemente der Tabelle.
  4. Als Vorübung für CSS lagern Sie die Formatierung der Tabelle in einen <style>-Abschnitt im <head> aus. Das könnte so aussehen:
    <style type="text/css">

    table {
    margin:20px;
    border:3px double white;
    border-collapse:collapse;
    }

    th {
    font-weight:normal;
    border-bottom:1px solid red;
    background:#222;
    text-align:left;
    padding:8px;
    }

    td {
    border:1px solid #666;
    background:#333;
    font:12px sans-serif;
    padding:5px;
    }

    </style>

    Bitte bachten Sie:

    • Innerhalb des <style>-Elements schreibt man die Namen der einzelnen Elemente ohne spitze Klammern.
    • Alle Attribute eines Element mit den definierten Werten werden von geschweiften Klammern umgeben.
    • Zwischen Attribut und Wert steht ein Doppelpunkt.
    • Die Werte werden nicht mit Anführungszeichen geschrieben.
    • Nach jedem Attribut mit den dazugehörigen Werten steht ein Semikolon (=;).

    Beachten Sie diese Hinweise, denn die Festlegung der Eigenschaften im <style>-Abschnitt bzw. mit Hilfe von CSS unterscheidet sich in der Schreibweise etwas von der Schreibweise direkt im <body>!

  5. Legen Sie eine zweispaltige Tabelle mit mindestens fünf interessanten Hyperlinks auf Seiten im www an. In der linken Spalte soll die Adresse als Hyperlink stehen und in der rechten Spalte eine kurze Beschreibung der Seite.

15.02.2007

CSS - Cascading Style Sheets - Formatierungen in externe Dateien auslagern

Wir wollen von Anfang an die Formatierung der Webseite mit CSS realisieren. Dadurch erreichen wir eine Trennung von Inhalt und Formatierung, wodurch der HTML-Code schlanker und leichter lesbar wird. Gleichzeitig vereinfacht sich die Designpflege der Webseite.

Seiten, die Sie unter "Was ist das?" gelesen haben sollten:

  1. CSS
  2. <style>

Aufgaben

  1. Legen Sie in Ihrem Verzeichnis web eine CSS-Datei mit dem Namen ihr_name.css an. Schreiben Sie bitte alle Dateinamen klein und ohne Sonder- bzw. Leerzeichen.
  2. Treffen Sie Formatfestlegungen für <body>, Überschriften und Absätze.
  3. Damit die Seiten Ihrer Webseite die Informartionen aus der CSS-Datei verwenden, muss man diese im <head> jeder Datei einbinden. Das erfolgt mittels der Zeile:
    <link rel="stylesheet" href="ihr_name.css" type="text/css">
  4. Legen Sie in Ihrem Verzeichnis web vier weitere Seiten an und verknüpfen Sie diese auch mit der CSS-Datei:
    1. uebermich.html - das wird die Seite Über mich mit persönlichen Informationen
    2. hobbys.html - das wird die Seite über Ihre Interessen und Hobbys
    3. fotos.html - das wird eine kleine Bildgalerie mit Fotos Ihrer Wahl
    4. links.html - das wird eine Linksammlung in Tabellenform, zu Seiten bzw. Inhalten im Internet, die Sie besonders interessant finden (hier können Sie auch die bereits gesammelte Information der Seite tabelle.html nutzen.
  5. Legen Sie auf der Seite index.html Hyperlinks auf die vier neuen Seiten und auf jeder der vier Seiten einen Link zurück auf die Startseite.

22. Februar 2007

Seitenaufteilung mit Hilfe von Individualformaten steuern

In HTML gibt es die zwei Elemente <div> und <span>, die als Formatierungscontainer dienen. Der Unterschied zwischen den beiden ist, dass <div> einen neuen Absatz einleitet, während <span> innerhalb einer Zeile positioniert wird.

Dadurch eignet sich das <div>-Element zur Gestaltung des Designs von Webseiten.

In diesem Zusammenhang verwendet man so genannte Individualformate, die man mit dem Attribut id definiert.

Dadurch wird es möglich, bestimmte Bereiche mit einer bestimmten Funktion und Position zu definieren.

Sie werden mit Hilfe von zunächst zwei Individualformaten (Navigation, Inhalt) das Design Ihrer Webseite gestalten.

Seiten, die Sie unter "Was ist das?" gelesen haben sollten:

  1. Die Elemente <div> und <span>
  2. Individualformate mit dem Attribut id festlegen

Aufgaben

  1. Experimentieren Sie zunächst anhand der Beispiele mit dem Design von Individualformaten.
  2. Erabeiten Sie ein vorläufiges Design für Ihre Webseite, wobei Sie die Individualformate in Ihrer CSS-Datei definieren.
  3. Tragen Sie in alle Ihre HTML-Dateien die Individualformate ein!

Beispiele zur Hilfe

  1. Beispiel 1 - zwei <div>-Elemente absolut positioniert
  2. Beispiel 2 - drei <div>-Elemente absolut positioniert
  3. Beispiel 3 - vier <div>-Elemente absolut positioniert
  4. Beispiel 4 - zwei <div>-Elemente relativ positioniert
  5. Beispiel 5 - drei <div>-Elemente fließend positioniert - unterschiedliche Darstellung durch Browser
  6. Beispiel 6 - drei <div>-Elemente fließend positioniert - ähnliche Darstellung durch Browser

1. März 2007

Menügestaltung

Heute realisieren wir eine einfache waagerechte Navigationsleiste. Als Beispiel dient uns Beispiel 4 mit CSS.

Wir sehen uns die Eigenschaften gemeinsam im Detail an.

Seiten, die Sie unter "Was ist das?" gelesen haben sollten:

  1. Menüs und Benutzerführung

Aufgaben

  1. Definieren Sie in Ihrer CSS-Datei einen <div> für eine waagerechte Navigationsleiste. Nennen Sie es div#links! (Orientieren Sie sich zunächst am Beispiel 4 mit CSS.)
  2. Definieren Sie in Ihrer CSS-Datei das Aussehen der Hyperlinks in div#links!
  3. Definieren Sie in Ihrer CSS-Datei das Aussehen der Hyperlinks in div#links beim Hovern, also wenn man mit der Maus drüberfährt. Dabei sollten sich Hintergrundfarbe oder Hintergrundbild oder Textfarbe usw. ändern.
  4. Fügen Sie in Ihre HTML-Datei index.html den <div id="links"> ein. Die Hyperlinks zu den anderen Seiten Ihrer Webpage gehören in diesen <div>.
  5. Wenn Sie mit dem Aussehen der Navigationsleiste zufrieden sind, kopieren Sie sie auch in die anderen vier Dateien.
  6. Legen Sie abschließend das Aussehen für den Hyperlink der aktuellen Seite über das Pseudoformat a#current fest und ergänzen Sie den notwendigen Eintrag auf allen Seiten.

Ihre Webpage sollte auf folgendem Stand sein:

  1. In Ihrem Verzeichnis gibt es einen Ordner web.
  2. Sie haben eine CSS-Datei ihr_name.css und eine Startdatei index.html mit einem Verweis auf die CSS-Datei.
  3. Des Weiteren haben sie die vier Seiten uebermich.html, hobbys.html, fotos.hml und links.html, ebenfalls mit einem Verweis auf die CSS-Datei.
  4. In der CSS-Datei werden die Eigenschaften für den Body bestimmt und es gibt mindestens zwei <div>-Elemente zur Festlegung des Aussehens des Menüs und des Inhalts der Seiten. Nennen Sie diese Elemente bitte div#links und div#content - das erleichtert mir die eventuelle Fehlersuche und die Korrektur.
  5. In der Datei index.html stehen im Menü Hyperlinks zu den Seiten uebermich.html, hobbys.html, fotos.hml und links.html, selbst wenn sie bis jetzt nur eine Dummy-Funktion haben sollten. Das Gleiche gilt für den Bereich mit dem Inhalt - die Grundstruktur Ihrer Seite soll also erkennbar sein.
  6. Falls Sie Graphiken verwenden, speichern Sie diese unter web\images. Falls Sie den Ordner images nicht haben, legen Sie ihn bitte an und verschieben alle Graphiken nach da.
  7. Bitte schreiben Sie alle Ordner- und Dateinamen klein und verwenden Sie keine Sonder- oder Leerzeichen. Manche Programme unterscheiden zwischen Groß- und Kleinschreibung oder akzeptieren keine Sonder- und Leerzeichen - eine einheitliche Schreibweise minimiert also potentielle Fehlerquellen.