14
Unterrichtsmaterialien in digitaler und in gedruckter Form Auszug aus: Das komplette Material finden Sie hier: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung von Internetseiten School-Scout.de

HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung … in digitaler und in gedruckter Form Auszug aus: Das komplette Material finden Sie hier: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung

  • Upload
    hanhi

  • View
    238

  • Download
    1

Embed Size (px)

Citation preview

Page 1: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung … in digitaler und in gedruckter Form Auszug aus: Das komplette Material finden Sie hier: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung

Unterrichtsmaterialien in digitaler und in gedruckter Form

Auszug aus:

Das komplette Material finden Sie hier:

HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung vonInternetseiten

School-Scout.de

Page 2: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung … in digitaler und in gedruckter Form Auszug aus: Das komplette Material finden Sie hier: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung

Gestaltung von Internetseiten mit HTML5 und CSS3

Autoren: Petra Entzian ([email protected]) Dr. Alexander Entzian ([email protected])

Page 3: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung … in digitaler und in gedruckter Form Auszug aus: Das komplette Material finden Sie hier: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung

Hinweise

2

© P

etra

un

d A

lexa

nd

er E

ntz

ian

Art Unterrichtseinheit zu HTML5 und CSS3 für Anfänger

Inhalt Kopiervorlagen

Übungen, Tests und Lösungen

zusätzlicher Inhalt zum Herunterladen Typ: Schülerarbeitsheft und Lehrerkopiervorlage Umfang: 51 Seiten Verlag: School-Scout Autoren: Petra Entzian, Dr. Alexander Entzian Auflage: 2015 Fach: Informatik Klassen: 9 – 12 Schultyp: Realschule, Gymnasium Inhaltliche Voraussetzungen: keine Dauer: mehrere Wochen - Monate Alle verwendeten Grafiken wurden selbst erstellt. Dieses Arbeitsheft besteht aus 11 Kapiteln und stellt eine umfassende Aufgabensammlung zur Erstellung von Internetseiten mit HTML5 und CSS3 dar. In Einzelschritten werden die theoretischen sowie praktischen Grundlagen für die am Ende erfolgende komplexe Übung geschaffen. Die Arbeitsblätter sind nach steigendem Schwierigkeitsgrad sortiert. In verschiedenen Abständen erfolgen Tests zur Selbstkontrolle des Lernfortschritts. Diese können ebenso als Leistungskontrolle eingesetzt werden. Beim vorliegenden Material handelt es sich um ein Schülerarbeitsheft, welches durch die Vorgabe der Quelltexte sowie von einfachen Erklärungstexten für die Tags und CSS3-Befehle den Schülern ein eigenständiges Arbeiten gestattet und so jedem Schüler sein individuelles Lerntempo ermöglicht. Dies gewährleistet Binnendifferenzierung ohne gesonderte Aufgabenstellung. Die Ergebnisse sind in einer Browseransicht als Erwartungsbild vergleichbar. Diese mehrjährigen praxiserprobten Kopiervorlagen können umgehend im Unterricht eingesetzt werden.

Legende

Fettgeschriebener Quellcode entspricht neueingeführten Elementen, Tags, Attributen, …

Dateinamen, welche in der Fußzeile zu finden sind, entsprechen bei Übungen dem zu verwendenden Dateinamen der aktuellen Übung. Bei Tests und Hilfen sind es die Dateinamen, unter welchen die Tests bzw. Hilfen als extra Dateien in den mitgelieferten Materialien zu finden sind.

Leere Anführungszeichen ("") dienen als Platzhalter für Zahlen oder Text, wobei die Anführungszeichen den Inhalt weiterhin einschließen müssen.

Page 4: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung … in digitaler und in gedruckter Form Auszug aus: Das komplette Material finden Sie hier: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung

Inhalt

3

© P

etra

un

d A

lexa

nd

er E

ntz

ian

Kapitel 1 Hallo Welt Übung HTML ....................................................................................................................... 5

Kapitel 2 Erweiterte Welt Test Aufgabe ................................................................................................................... 6 Lösung ..................................................................................................................... 7 Übung HTML ....................................................................................................................... 8 CSS ........................................................................................................................... 9

Kapitel 3 Adresse Übung HTML .....................................................................................................................10 CSS .........................................................................................................................11

Kapitel 4 Schnecke Test Aufgabe .................................................................................................................12 Lösung ...................................................................................................................13 Übung Aufgabe .................................................................................................................14 Hilfe 1 ....................................................................................................................15 Hilfe 2 ....................................................................................................................16 Hilfe 3 ....................................................................................................................17 Zusatz Aufgabe .................................................................................................................19 Lösung ...................................................................................................................20

Kapitel 5 Grundwissen Test Aufgabe .................................................................................................................23 Lösung ...................................................................................................................25

Kapitel 6 Webseitenbereiche Übung HTML .....................................................................................................................28 CSS .........................................................................................................................29

Kapitel 7 Grafik Übung HTML .....................................................................................................................30 CSS .........................................................................................................................31

Page 5: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung … in digitaler und in gedruckter Form Auszug aus: Das komplette Material finden Sie hier: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung

Inhalt

4

© P

etra

un

d A

lexa

nd

er E

ntz

ian

Kapitel 8 Einfügen von mehreren Grafiken Schnecke mit Bild Übung HTML .....................................................................................................................32 CSS .........................................................................................................................33 Test Aufgabe .................................................................................................................35 Lösung ...................................................................................................................36

Kapitel 9 Verlinkung Übung HTML .....................................................................................................................38 CSS .........................................................................................................................39

Kapitel 10 Verlinkung Maus Übung HTML .....................................................................................................................41 CSS .........................................................................................................................42 Hilfe .......................................................................................................................43

Kapitel 11 Komplexe Übung Test Aufgabe .................................................................................................................44 Lösung ...................................................................................................................46

Page 6: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung … in digitaler und in gedruckter Form Auszug aus: Das komplette Material finden Sie hier: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung

01 - Übung - HTML5 - Hallo Welt

Dateiname: 01_ue_html5_grundgeruest.html 5

© P

etra

un

d A

lexa

nd

er E

ntz

ian

Die Browseransicht zeigt die erste einfache Übung. Lege in deinem HTML-Editor eine .html-Datei an. Den zu verwendenden Dateinamen findest du in der Fußzeile. Zur Betrachtung benötigst du einen Browser. Hier wurde Firefox verwendet. Beachte!

Lege zur besseren Übersicht einen Ordner mit dem Namen „Übung_01“ an. Fett formatierte Wörter sind neu in einer Übung und werden im Textfeld erklärt. Dies gilt auch für die nachfolgenden Arbeitsblätter. In HTML werden Befehle „Tags“ genannt. Die meisten Tags besitzen einen öffnenden (bspw. <html>) und einen schließenden (bspw. </html>) Tag. Bei ihnen steht im End-Tag der „/“ (slash) nach der öffnenden eckigen Klammer. Einige Tags kommen ohne End-Tag aus. Dort wird der slash nach dem Befehlswort und einem Leerzeichen bzw. vor die schließende eckige Klammer geschrieben (bspw. <br />).

<!DOCTYPE html> 1 <html> 2 <head> 3 <title>Erster Schritt</title> 4 </head> 5 <body> 6 Hallo Welt! 7 </body> 8 </html>9

Element, Attribute, Attributwerte und ihre Bedeutung

<!Doctype html> zeigt die HTML-Version an, HTML5 <html></html> Wurzelelement des Dokuments <head></head> enthält die Kopfdaten des Elements <title></title> Dokumentenname <body></body> enthält den Inhalt des eigentlichen Dokumentes <!-- ... --> HTML Kommentaranfang ... HTML Kommentarende (wird nicht im Browser angezeigt)

Hallo Welt!

Page 7: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung … in digitaler und in gedruckter Form Auszug aus: Das komplette Material finden Sie hier: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung

02 - Übung - HTML5 - Erweiterte Welt

Dateiname: 02_ue_html5_grundgeruest_erweitert.html 8

© P

etra

un

d A

lexa

nd

er E

ntz

ian

Mit dieser Übung wird es bereits schwieriger, denn für die Umsetzung dieser Aufgabe brauchst du eine Html- und eine CSS-Datei. Setze diese Aufgabe praktisch am Computer um. Beachte!

Lege zur besseren Übersicht einen Ordner mit dem Namen „Übung_02“ an. Nutze zum Erstellen der Quelldateien einen HTML-Editor, wie beispielsweise Notepad++. Zur Betrachtung benötigst du einen Browser. Hier wurde Firefox verwendet.

<!DOCTYPE html> 1 <html> 2 <head> 3

<meta charset = "UTF-8" /> 4 <title>Zweiter Schritt</title> 5

<link rel = "stylesheet" href = "02_ue_css3_grundgeruest_erweitert.css" 6 type = "text/css" /> 7

</head> 8 <body> 9 <span class = "fett">Hallo</span> 10

<span class = "rot">Welt!</span> 11 </body> 12 </html>13 Element, Attribute, Attributwerte und ihre Bedeutung

<meta charset = "UTF-8" /> Buchstabencodierung <link /> verknüpft das Dokument mit zusätzlichen

Informationen (Gestaltungsvorlagen -> .css; Javascript -> .js); besitzt keinen schließenden Tag

rel = "stylesheet" stellt eine logische Beziehung zur Gestaltungsvorlage her href = "Dateiname.css" verweist auf den Dateipfad der Datei, die geladen werden soll type = "text/css" gibt das Dateiformat an <span></span> Container-Inline-Element, fließender Text; wird verwendet, um

einzelne Wörter in einem Text zu formatieren class jedes Element kann dieses Attribut enthalten; verweist auf eine

bzw. mehrere (getrennt durch ein Leerzeichen) definierte Formatierungen in der .css-Datei und wendet diese an; wird in der CSS-Datei mit einem Punkt (".") markiert; Klassen können im Dokument beliebig häufig verwendet werden

Hallo Welt!

Page 8: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung … in digitaler und in gedruckter Form Auszug aus: Das komplette Material finden Sie hier: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung

04 - Übung - Hilfe - 2 Schnecke

Dateinamen: 04_ue_html5_schnecke_hilfe2.pdf 16

© P

etra

un

d A

lexa

nd

er E

ntz

ian

Nun wird das Dokument für die CSS-Datei vorbereitet. Fügt dafür zuerst die zwei „div“-Elemente ein. Sie werden durch das id-Attribut eindeutig identifizierbar. Das Container-Blockelement „div“ bewirkt gleichzeitig einen Zeilenumbruch zwischen der Überschrift und dem Autor. Innerhalb des Textes könnt ihr das Element „span“ mit dem Klassen-Attribut verwenden.

<body> 1 <div id = "ueberschrift"> 2 Die Schnecke 3 </div> 4 <div id = "autor"> 5 Paul Keller 6 </div> 7 <hr /> <br /> 8 <p> 9 Eine Schnecke, die an einem Bahndamm wohnte, ärgerte sich alle Tage über 10 einen Schnellzug, der vorbeisauste und sie durch sein ungeschlachtes Benehmen 11 in ihrem behaglichen Geschäft störte. 12 </p> 13 <p> 14 <span class = "kursiv">"Das will ich ihm austreiben"</span>, sagte die Schnecke 15 zu sich selbst, stellte sich zwischen den Gleisen auf und streckte drohend die 16 Fühler aus, als sie den Zug in der Ferne auftauchen sah. "Niederstoßen werd' ich 17 ihn!", sagte sie voll grimmigen Mutes. 18 </p> 19 …20

Betrachtet das Zwischenergebnis im Browser. Korrigiere auftretende Fehler. Da es noch keine .css-Datei gibt, sieht der Quelltext im Browser weiterhin unformatiert aus.

Die Schnecke

Paul Keller

Eine Schnecke, die an einem Bahndamm wohnte, ärgerte sich alle Tage über einen Schnellzug, der

vorbeisauste und sie durch sein ungeschlachtes Benehmen in ihrem behaglichen Geschäft störte.

"Das will ich ihm austreiben", sagte die Schnecke zu sich selbst, stellte sich zwischen den Gleisen auf

und streckte drohend die Fühler aus, als sie den Zug in der Ferne auftauchen sah. "Niederstoßen

werd' ich ihn!", sagte sie voll grimmigen Mutes.

Page 9: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung … in digitaler und in gedruckter Form Auszug aus: Das komplette Material finden Sie hier: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung

05 - Test - Aufgabe - Grundwissen

Dateiname: 05_t_html5_grundwissen.pdf 24

© P

etra

un

d A

lexa

nd

er E

ntz

ian

3. Setze die richtigen Code-Bausteine in die CSS-Datei ein, damit die dargestellte Browseransicht stimmt. 4. Welche Erklärung passt zu welchem Tag. Ordne richtig zu. 5. Wozu benötigt man in HTML 5 eine .css Datei? 6. Ordne die Schritte für das Erstellen einer Seite der Reihenfolge nach. Text schreiben und im Browser betrachten, HTML5-Grundgerüst erstellen, nun schrittweise Formatierungen vornehmen, Quelltextprogramm Notepad++ öffnen und HTML5-Datei speichern, Ordner anlegen, CSS-Datei anlegen und speichern, wiederholend im Browser mit der Taste F5 den Programmierfortschritt aktualisieren

Erst überlegen -

dann

entscheiden!

font-size: 3.5em; font-size: 0.4em; font-style: italic; font-weight: bold; text-decoration: underline; color: #0000ff; color: #00ff00; color: #ff0000; background-color: #ffffff; text-align: center; font-family: calibri;

Schriftgröße

Container-Blockelement

kursiv

text-align

unterstrichen italic

Hintergrundfarbe des Dokumentes

underline

Textausrichtung

font-size

<div></div> background-color

body { } div { } .Zeile1 { } .Zeile2 { } .Zeile3 { }

Page 10: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung … in digitaler und in gedruckter Form Auszug aus: Das komplette Material finden Sie hier: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung

05 - Test - Lösungen - Grundgerüst

Dateiname: 05_l_html5_grundwissen.pdf 25

© P

etra

un

d A

lexa

nd

er E

ntz

ian

1. Finde die Fehler in diesem Quellcode. Erkläre, wie sie korrigiert werden müssen. <!FILETYPE html><!Doctype html> 1 <html> 2 <head> 3 <meta charset = "UTF-8" /> 4 <title>Fehlertext<title></title> 5 <link rel = "stylesheet" href = "css" type = "text/css" />Dateiname.css 6 </head> 7 </body>Tag entfällt an dieser Stelle. 8 <body> 9 <html> Tag entfällt an dieser Stelle. 10 <div id = "Aufgabe"> 11 <p>Finde die Fehler in diesem Quellcode. Erkläre, wie sie 12 korrigiert werden müssen.<\p></p> 13 <p>Das ist ein Textbaustein.<div></p> 14 </div> 15 </html> Tag entfällt an dieser Stelle. 16 </body> 17 </html> 18 2. Welche Browseransicht gehört zum Quelltext? Begründe deine Entscheidung.

HTML5-Quellcode <!DOCTYPE html> <html> <head> <meta charset = "UTF-8" /> <title>Anschrift</title> <link rel = "stylesheet" href = "Aufgabe_2.css" type = "text/css" /> </head> <body> <div> Musterschule Musterweg 1 01234 Musterstadt <hr /> (0 12 34) 56 78 90) </div> </body> </html>

CSS-Quellcode body { background-color: #777777; color: #ffffff; font-family: calibri, arial, sans-serif; font-size: 1.8em; } div { text-align: center; color: #ff0000; }

Musterschule Musterweg 1

01234 Musterstadt

(0 12 34) 56 78 90

Musterschule Musterweg 1 01234 Musterstadt

(0 12 34) 56 78 90

Musterschule Musterweg 1 01234 Musterstadt

(0 12 34) 56 78 90

X

Page 11: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung … in digitaler und in gedruckter Form Auszug aus: Das komplette Material finden Sie hier: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung

07 - Übung - CSS3 - Grafik

Dateiname: 07_ue_css3_grafik.css 31

© P

etra

un

d A

lexa

nd

er E

ntz

ian

Das Layout für die HTML-Seite wird in der CSS-Datei festgelegt. Für unsere Grafik-Seite findest du den passenden Code hier. Setze diese Aufgabe praktisch am Computer um. Beachte! Diese Datei wird nur vom Browser verwendet, wenn sie im Ordner „Übung_07“ abgespeichert wird.

body { 1 background-color: #000000; 2 color: #ffffff; 3 font-family: calibri, arial, sans-serif; 4 font-size: 1.8em; 5 margin: 5%; 6 padding: 0em; 7 } 8

Element, Attribute, Attributwerte und ihre Bedeutung

body{} Grundformatierung für den Body font-family Schriftarten, mit Komma werden alternative Schriftarten

angeboten, sollte die erste Schriftart nicht angezeigt werden können

margin Außenabstand, ist der erzwungene Abstand des Elements zum Eltern- bzw. Nachbarelement; ein Wert gilt für alle Seiten; bei zwei Werten gilt der erste Wert für oben und unten und der zweite Wert für rechts und links; bei drei Werten steht der Erste für oben, der Zweite für rechts und links und der Dritte für unten; bei vier Werten steht der Erste oben, der Zweite für rechts, der Dritte für unten und der Vierte für links

padding Innenabstand, ist der erzwungene Abstand zwischen dem Inhalt des Elements und seinem eigenen Rand; Bedeutung der einzelnen Werte siehe „margin“

Kongo Rosenkäfer bei der Nahrungsaufnahme

Page 12: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung … in digitaler und in gedruckter Form Auszug aus: Das komplette Material finden Sie hier: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung

10 - Übung - HTML5 - Verlinkung Maus

Dateinamen: 10_ue_html5_verlinkung_maus_1.html, 10_ue_html5_verlinkung_maus_2.html, 10_ue_html5_verlinkung_maus_3.html

© P

etra

un

d A

lexa

nd

er E

ntz

ian

Du hast gelernt, zwischen verschiedenen Seiten zu navigieren. Wende dein Wissen auf dieses Beispiel an. Nutze vorhandene Quelltexte aus Vorübungen. Erstelle die noch fehlenden HTML-Quelltexte für die Seiten 2 und 3. Nutze dafür die unten dargestellten Bilder. Arbeite so rationell wie möglich. Erarbeite dir anschließend schrittweise die passende CSS-Datei.

Beachte! Für dieses Beispiel sollen drei Seiten dargestellt werden. Lege in deinem Verzeichnis einen Ordner „Übung_10“ an. Im mitgelieferten Ordner „Übung_10“ befinden sich die notwendigen Grafiken. Alle Grafiken sollen zentriert angeordnet werden. Übernimm den Quelltext für die erste Seite. Den Dateinamen für die CSS-Datei verrät dir der vorliegende Quelltext.

<!DOCTYPE html> 1 <html> 2 <head> 3 <meta charset = "UTF-8" /> 4 <title>Verlinkung- Maus</title> 5 <link rel = "stylesheet" href = "10_ue_css3_verlinkung_maus.css" type = "text/css" /> 6 </head> 7 <body> 8 <section> 9 <header> 10 <h1>Eine kleine neugierige Maus ...</h1> 11 </header> 12 <p> 13 <figure> 14 <img src = "Maus1.jpg" alt = "" title = "" /> 15 </figure> 16 </p> 17 <p> 18 <nav> 19 <a href = "10_ue_html5_verlinkung_maus_2.html"> 20

... verl&auml;sst ihr Haus!</a> 21 </nav> 22 </p> 23 <footer> 24

Wie k&ouml;nnte es weiter gehen? 25 </footer> 26 </section> 27 </body> 28 </html>29

Eine kleine neugierige Maus …

…verlässt ihr Haus! Wie könnte es weiter gehen? gehen?

Verlässt ihr Haus …

…schaut raus! …huscht wieder rein! Wie könnte es weiter gehen? gehen?

Kommt wieder nach Haus …

…schaut raus! Wo ist die Maus?! Wie könnte es weiter gehen? gehen?

Page 13: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung … in digitaler und in gedruckter Form Auszug aus: Das komplette Material finden Sie hier: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung

11 - Test - Aufgabe - Komplexe Übung

Dateinamen: 11_t_html5_komplexe_uebung_1.pdf, 11_t_html5_komplexe_uebung_2.pdf,

11_t_html5_komplexe_uebung_3.pdf 45

© P

etra

un

d A

lexa

nd

er E

ntz

ian

Seite 3 – Kontakte

Zu verwendende Dateinamen

Seite 1 – Hauptseite: 11_ue_html5_komplexe_uebung_1.html Seite 2 – Angebote: 11_ue_html5_komplexe_uebung_2.html Seite 3 – Kontakt: 11_ue_html5_komplexe_uebung_3.html CSS3: 11_ue_css3_komplexe_uebung.css

Verwendete Farbtöne

Body-Hintergrundfarbe: #ffc Schriftfarbe: #000 Fußteil-Hintergrundfarbe: #eee Grafik-Rahmenfarbe: #000 Link-Farbe: #630 Link-überfahren: #bbb rot: #780000 blau: #0000ff dunkelblau: #000098 orange: #ffa500

Grafikgrößen

Gleitflug: width = "25%" height = "25%" Azoren: width = "25%" height = "25%" Ozean: 100% Sonnenuntergang: 100% Rundblick: 100%

Verwendete Links

Seite 1: Wörter: „Angebote“ und „Kontakt-Seite“ Seite 2: Wörter: 2x „Kontakt-Seite“

Bei allen Seiten sind die Wörter „Hauptseite“, „Angebote“ und „Kontakt“ Links

Reisebüro "Lange Ferien"

Hauptseite Angebote Kontakt

Lange Ferien Musterweg 1

01234 Musterstadt (0 12 34) 56 78 90

Diese Seite wurde von Max Mustermann am Musterdatum erstellt.

Page 14: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung … in digitaler und in gedruckter Form Auszug aus: Das komplette Material finden Sie hier: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung

Unterrichtsmaterialien in digitaler und in gedruckter Form

Auszug aus:

Das komplette Material finden Sie hier:

HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung vonInternetseiten

School-Scout.de