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.

Lernkarten zu HTML bearbeiten

Bearbeite Lernkarten mit denen du noch einmal die Grundlagen von HTML durchgehst.

Aufgabe:

  1. Bevor du anfängst, fülle bitte einen Fragebogen aus. Vergiss bitte nicht, am Ende des Fragebogens auf Senden zu klicken.
  2. Bearbeite die vier Lernkarten-Sets in dieser Reihenfolge. Klicke bitte auf Sitzung 1 um die Lernkarten als PDF-Datei zu öffnen.
  3. Klicke bitte auf Sitzung 2 um die Lernkarten als PDF-Datei zu öffnen.
  4. Klicke bitte auf Sitzung 3 um die Lernkarten als PDF-Datei zu öffnen.
  5. Wenn du fertig bist, fülle bitte einen Fragebogen aus. Vergiss bitte nicht, am Ende des Fragebogens auf Senden zu klicken.

 


Ein Bild in HTML beschreiben

In deinem public_html Verzeichnis findest du eine Vorlage-Datei mit dem Namen mondrian.html und einen Ordner mit dem Namen css, in dem sich eine Datei mit dem Namen mondrian.css befindet.

Öffne diese beiden Dateien in dem Programm notepad++.

Sieh dir an, was die div-Tags mit den bunten Flächen machen.

Nimm das Arbeitsblatt und bearbeite die Aufgabe.

Speichere die Dateien und überprüfe das Ergebnis in Google Chrome.

Verlinke die Datei mondrian.html von deiner Startseite index.html aus.

Text formatieren

Erstelle bitte eine Kopie der Vorlage-Datei, welche sich in deinem public_html Verzeichnis befindet.

Benenne diese Kopie um in text.html

Öffne die Datei text.html in dem Programm notepad++. Lösche alles, was sich zwischen den beiden Body-Tags <body>…</body> befindet.

Schreibe oder kopiere mindestens drei Absätze Text, füge ein Bild ein und formatiere den Text. Verwende für die Formatierung mindestens die in dieser Liste aufgeführten Tags.

  • Überschrift <h1>…</h1>
  • Absatz <p>…</p>
  • Liste <ul><li>…</li></ul>
  • Nummerierte Liste <ol><li>…</li></ol>
  • Bild <img src="…" />
  • Fetter Text <b>…</b> oder <strong>…</strong>
  • Schräggestellter Text (kursiv) <i>…</i> oder <em>…</em>

Speichere die Datei und überprüfe das Ergebnis in Google Chrome.

Verlinke die Datei text.html von deiner Startseite index.html aus.

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.