html5 und css3 - unterrichtsreihe zur gestaltung … in digitaler und in gedruckter form auszug aus:...
TRANSCRIPT
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
Gestaltung von Internetseiten mit HTML5 und CSS3
Autoren: Petra Entzian ([email protected]) Dr. Alexander Entzian ([email protected])
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.
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
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
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!
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!
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.
…
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 { }
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
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
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ässt ihr Haus!</a> 21 </nav> 22 </p> 23 <footer> 24
Wie kö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?
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.
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