Mein Öko-Web-Baukasten LÖSUNGArbeitsblatt zur App „Öko-Web-Baukasten“ (HTML)

Name:

Klasse: Datum:

1HTML – die Sprache der Webseiten App: Kapitel A

a) Ergänze die Merksätze: HTML ist die Sprache , mit der Webseiten gebaut werden.
Ein Tag ist ein Befehl in spitzen Klammern, z. B. <h1> . Der Browser liest den Code und zeigt die Seite an. Wortspeicher:BrowserSpracheTag

b) Beschrifte das Tag-Sandwich. Male den Öffner grün und den Schließer rot an.

Wortspeicher:SchließerInhaltÖffner

c) Schreibe zu jedem Öffner den passenden Schließer.

d) Ergänze den Merksatz: Fast jedes Tag hat einen Öffner und einen Schließer. Der Schließer hat immer einen Schrägstrich / . Wortspeicher:Schrägstrich /

Superkraft Digital · Öko-Web-BaukastenSeite 1 von 4 · Kasten 1

Mein Öko-Web-BaukastenLÖSUNGName:

2Das Grundgerüst einer Webseite App: Kapitel B und C

a) Nummeriere die vier Bausteine des Grundgerüsts von 1 bis 4 – von oben nach unten.

3</body>

1<html>

4</html>

2<body>

b) Beschrifte das Schachtel-Modell: Trage die fehlenden Tags ein.

Wortspeicher:<body></html><html></body>

Wie Schachteln, die ineinander stehen: Die äußere Schachtel ist die ganze Seite, die innere ist das, was man sieht.

c) Ergänze die Merksätze: <html> umschließt die ganze Seite. <body> enthält alles, was man sieht .
<h1> macht eine große Überschrift . <p> macht einen Absatz .
Was zuerst geöffnet wird, wird zuletzt geschlossen. Wortspeicher:AbsatzzuletztsiehtÜberschriftganze

d) Notfall! Bit hat die Schließer gelöscht. Schreibe sie in die Lücken.

<html>
<body>
  <h1>Unsere Öko-Seite</h1>
  <p>Wir schützen die Umwelt.</p>
</body>
</html>

Superkraft Digital · Öko-Web-BaukastenSeite 2 von 4 · Kasten 2

Mein Öko-Web-BaukastenLÖSUNGName:

3Bilder und Listen App: Kapitel D

a) Kreuze an: Welches ist das richtige Bild-Tag?

<img>erde.png</img>
<img src="erde.png">
<bild>erde.png</bild>
<img src="erde">

b) Ergänze die Merksätze: img kommt von image = Bild. src kommt von source = Quelle.
Der Dateiname steht in Anführungszeichen . Das Bild-Tag hat keinen Schließer ! Wortspeicher:SchließerimageAnführungszeichensource

c) Ergänze die Liste mit Umwelt-Tipps: Trage die vier fehlenden Tags ein.

<ul>
  <li>Müll richtig trennen</li>
  <li>Licht ausmachen</li>
  <li>Mit dem Rad fahren</li>
</ul>

Müll richtig trennen
Licht ausmachen
Mit dem Rad fahren

Wortspeicher:</ul><li><ul></li>

d) Ergänze die Merksätze: <ul> … </ul> ist die ganze Liste . <li> … </li> ist ein Punkt in der Liste. Wortspeicher:ein PunktListe

Superkraft Digital · Öko-Web-BaukastenSeite 3 von 4 · Kasten 3

Mein Öko-Web-BaukastenLÖSUNGName:

4Der Bauplan meiner Website App: Kapitel E

a) Beschrifte den Seitenplan: Wie heißt die Hauptseite? Wie lautet der Link?

Wortspeicher:index.html<a href="energie.html">

Jede Seite ist eine eigene Datei. Ein Pfeil bedeutet: Hier geht ein Link von einer Seite zur anderen.

b) Kreuze alle Dateinamen an, die erlaubt sind.

Müll Trennen.html
muell-trennen.html
Müll_trennen.HTML
energie.html

c) Ergänze den Link zur Unterseite energie.html.

<a href="energie.html">Weiter zur Seite: Energie sparen</a>

d) Ergänze die Merksätze: Ein Link verbindet zwei Seiten. a = anchor = Anker . href = hier geht es hin .
Dateinamen: klein schreiben, keine Leerzeichen, keine Umlaute. Wortspeicher:hinAnkerkleinLink

✓Das kann ich jetzt nach dem Meisterstück

sicherfastnoch nicht Ich kenne Öffner und Schließer und das Grundgerüst einer Webseite. Ich kann Überschrift, Absatz, Bild und Liste in HTML schreiben. Ich kann zwei Seiten mit einem Link verbinden.

★Zusatz für Schnellefreiwillig · wenn du fertig bist

★1Welche Webseite benutzt du selbst am häufigsten? z. B. eine Kinder-Suchmaschine ★2Es gibt auch <h2> bis <h6>. Was ist der Unterschied zu <h1>? Die Überschrift wird kleiner. ★4Ein guter Dateiname für eine weitere Unterseite: z. B. wasser-sparen.html

STOPP – zeig das Blatt deiner Lehrkraft!Erst dann gibt es in der App deine Webseiten-Lizenz.

Gesehen am: Kürzel Lehrkraft:

Superkraft Digital · Öko-Web-BaukastenSeite 4 von 4 · Kasten 4, Zusatz und Kontrolle