[Download des Kurses zum Offline-Betrieb]
c;-) webmichis HTML-Kurs

Arbeitsaufträge

Auftrag 1

  • Öffne den Windows-Editor (NotepadHilfe).
     
  • Erzeuge ein HTML-Grundgerüst und speichere die DateiHilfe als html_gg_leer.txt in dein Homeverzeichnis.
Diese Datei kannst du in Zukunft als Anfang für deine neuen HTML-Dateien verwenden!

[zum Inhalt]
[Lösung]

Auftrag 2

  • Öffne html_gg_leer.txt im Windows-Editor (Notepad).
     
  • Speichere die DateiHilfe als arbauf002.htm in dein Homeverzeichnis.
     
  • Wähle eine Hintergrundfarbe und eine dazu passende Textfarbe und trage die entsprechenden Befehle in deiner Datei ein.
     
  • Begrüße den Besucher deiner Seite mit einem geeigneten Text.
     
  • Erzeuge einen Link zur Suchmaschine "google".
     
  • Gib dem Betrachter deiner Seite die Möglichkeit, dir eine email schicken zu können.
     
  • schlauer FuchsSpeichere ein geeignetes Webbild in dein Homeverzeichnis und versuche es in deine Seite einzubinden.

     
  • Ermittle im Quellcode einer entsprechenden Seite, wie ein Anker "gesetzt" wird. Ermögliche nun dem Betrachter deiner Seite vom Ende der Seite an ihren Anfang zu springen.
     
  • Speichere dein gesamtes Werk ab und betrachte es anschließend in einem Internet-Browser.

[zum Inhalt]
[Lösung]

Auftrag 3

  • Erzeuge ein Tabellen-Grundgerüst und speichere die Datei als tab_gg_leer.txt in dein Homeverzeichnis.
     
  • Öffne html_gg_leer.txt im Windows-Editor (Notepad), füge das Tabellengrundgerüst in den Bodybereich ein.
     
  • Speichere die Datei als arbauf003.htm in dein Homeverzeichnis.
     
  • Erzeuge eine blinde Tabelle mit einer sinnvollen Hintergrundfarbe zur Eingabe von dreispaltigem Text.
     
  • Erzeuge anschließend eine sichtbare Tabelle mit vier Zeilen und zwei Spalten.
     
  • In der zweiten Tabelle soll eine Zelle ein Bild enthalten, eine weitere Zelle einen Link. Der Link soll immer mit der Farbe crimson Hilfe angezeigt werden. Eine dritte Zelle soll eine 3x3-Tabelle beinhalten, deren Zellen je eine der Ziffern 1 bis 9 enthalten sollen.
     
  • Speichere dein gesamtes Werk ab und betrachte es anschließend in einem Internet-Browser.
     
  • Betrachte nun die angebotene Lösung im HTML-Code. In der ersten Tabelle befinden sich zwei bisher nicht behandelte Attribute (im table-Tag), verändere ihre Werte und beobachte die Wirkung, daraus kannst du die Bedeutung dieser Attribute erschließen.

[zum Inhalt]
[Lösung]

Auftrag 4

  • Betrachte diese Seite mit Tabelle.
     
  • Analysiere die Darstellung, mache dir die Zusammenhänge klar.
     
  • Du kannst auch noch weitere Veränderungen vornehmen! Spiel damit!

[zum Inhalt]
[Lösung]

Auftrag 5

  • In Zukunft sollen die Arbeitsaufträge als HTML-Datei erstellt werden, die jeweils so beginnt.

     
  • Erstelle eine HTML Seite, die so beginnt, und speichere sie unter auftrag_leer.htm in dein Homeverzeichnis.

[zum Inhalt]
[Lösung]

Auftrag 6

  • Öffne aus deinem Homeverzeichnis die Datei auftrag_leer.htm und speichere sie mit "Speichern unter" als auftrag_6.htm zurück in dein Homeverzeichnis.

     
  • Nun öffnest du den Quelltext deiner neuen htm-Datei und erledigst die folgenden Aufgaben.
     
  • Erstelle auf der Seite ein Formular, in das der Besucher deiner Seite folgende Eingaben machen kann:
    • Name
    • Vorname
    • E-mail-Adresse
    • Auswahl zwischen männlich/weiblich
    • Auswahl von einem oder mehreren Hobbies aus einer Liste mit fünfen

     
  • Das Formular soll an deine E-mail-Adresse verschickt werden, der Besucher soll allerdings auch die Möglichkeit haben, das Formular zu verwerfen.

[zum Inhalt]
[Lösung]

Auftrag 7

schlauer FuchsErstelle ein Inhaltsverzeichnis für diesen HTML-Kurs als "Drop-Down-Liste".

[zum Inhalt]
[Lösung]

Auftrag 8

Erstelle für eine Homepage der Klasse 9Gb eine Seite, auf der du dich vorstellst.

[zum Inhalt]
[Lösung]

  c;-) webmichis HTML-Kurs  [zum Inhalt]

Letzte Änderung:   webmaster