Wahlpflichtkurs Medien » Materialsammlung

Dieses ist eine Chronologie des Medienkurses für den Jahrgang 7 an der MBS. Hier können die Arbeitsblätter heruntergeladen oder einzelne Themen nachbereitet werden.

Ein Navigationsmenü mit Formatvorlagen umsetzen

Hast im Internet eine schöne Website gefunden, kannst du dir einfach den HTML-Code und die Formatvorlage dazu kopieren.

Aufgabe:

Hinter diesem Link ist eine Datei zu finden, in der ein Navigationsmenü zu finden ist. Dieses kannst du einfach kopieren und auf deiner Startseite einfügen.

Klicke auf den Link, sieh dir mit Rechtsklick auf das Browserfenster den Quelltext der Datei an, kopiere den markierten Bereich und füge ihn direkt hinter <body> in deine index.html Datei ein.

Außerdem findest du in der Datei einen Link zu einer CSS-Datei. Klicke in der Quelltextansicht auf den Link und kopiere den Inhalt der angezeigten Datei. Füge die Formatvorlage im <style>-Tag im <head> deiner index.html-Datei ein.

hour of code

Programmiere einen kleinen LEGO® Roboter.

Die Struktur deiner Website

Deine index.html Datei ist deine Startseite. Von dieser Seite sollen alle anderen Dateien von deiner Website aufzurufen sein.

Du hast jetzt schon einige Dateien in deinem public_html Verzeichnis angelegt. Mache sie für alle zugänglich die deine Startseite besuchen indem du dort einen Link zu der Datei erstellst.

Aufgabe:

Räume deine Website auf und mache alle Dateien zugänglich.

Verlinke alle html-Dateien in deinem public_html Verzeichnis von der index.html Datei aus. Für die Dateinamen benutze bitte keine deutschen Sonderzeichen wie Umlaute (äöü), das ß oder Leerzeichen. Statt einem Leerzeichen kannst du gerne den Unterstrich _ benutzen.

Der Tag für einen Link (anchor) sieht so aus:
<a href="Dateiname.html">Linktext</a>

Lege eine neue Datei flaggen.html an, von der Links zu jeder Flaggendatei in deinem public_html Verzeichnis führen.

Eine Flagge in HTML

Der Code für die Polnische Flagge (zip) kann hier heruntergeladen werden.

Polnische Flagge, Seitenverhältnis 5:8

  • Grundgerüst einer HTML Datei – was sind Tags? <html> <head> <body>
  • eine Tabelle, Tabellenspalten und Tabellenzellen: <table> <tbody> <th> <tr> <td>
  • Attribute für Tabellen in HTML: style, bgcolor, align, valign, colspan
  • Kommentare in HTML <!-- dies hier ist ein Kommentar -->
  • Bildpunkte (pixel) als Maßeinheit
  • die Verwendung von Seitenverhältnissen (aspect ratio) als Gestaltungsansatz
  • Hexadezimale Darstellung von Farben aus dem RGB Farbraum (Rot/Grün/Blau)

    #000000 #ff0000 #ffff00 #00ff00 #00ffff #0000ff #ffffff

Unter diesem Link findest du eine nützliche Dokumentation zu HTML: http://de.selfhtml.org/.

Die Bilder für die Flaggen können hier mit Rechtsklick heruntergeladen werden:

weißer Adler Albanien Aserbaidschan Barbados
Brasilien Chile Hamburg Indien
Japan Kanada Lübeck Afghanistan
Saudi Arabien Türkei China (VR) Tunesien

Links zu deinen Inhalten

Hour of Code

Nimm an einer Programmierstunde teil. Wähle zwischen dem Star Wars Game und einer Programmierstunde mit Mine Craft.