Unterrichtssequenzen HTML SJ 12_13

Unterricht 25.2.2013

1. Die unformatierten Sätze werden mit den Regeln zwischen den Gruppen getauscht.
2. die Gruppen, deren Sätze korrekt formatiert wurden, treten als Gewinner gegeneinander an. Gewinner ist am Ende die Gruppe, deren Regeln am allgemein gültigsten sind. Wenn sich die Regeln z.B. auf beliebige andere Inhalte anwenden lassen, ist das eine hervorragende Lösung!
3. Vergleich der Schüler-Gewinnergruppe!
4. Diskussion, warum wir das mit dem Formatierungsspiel gemacht haben – welche neuen Erkenntnisse in Bezug auf das Schreiben von Texten lassen sich daraus ableiten?

Ergebnisse der Stunde

Es wurden tolle Systeme entwickelt und 22 Schüler haben es geschafft, den Satz der anderen Gruppe zu lösen bzw. den Satz so aufzustellen mit Formatierungsregeln, dass er richtig gelöst werden konnte – echt klasse!

Das System, welches wir aus verschiedenen gemaeinsam als „bestes“ zusammengestellt haben, sah folgendermaßen aus:

Regeln:

1. Schriftart
2. Schriftgröße
3. Schriftfarbe
4. f(ett), u(nterstrichen), k(ursiv)
5. u.s.w.

Ein Satz wir dann so formatiert, dass alle anzuwendenen Regeln vor dem ersten Wort in Klammern eingefügt werden und erst wenn eine Regel nicht mehr gelten soll, wird nach dem Wort eine Ende-Regel (Ende Nr. der Regel) eingefügt. Wird mitten im Satz eine neue Regel eingefügt, so einfach vor dem ersten Buchstaben, für den sie gelten soll, die Nummer und die entsprechende Eigenschaft einfügen.

Bsp: (1-Arial,2-12,3-rot)Hallo wie geht (Ende 3) es (3-schwarz,4-f) dir.

____________________________________________________________________________________

Unterricht 18.3.2013

1. Diskussion, wie genau das System aussah, welches wir zusammen in der letzten Stunde entwickelt hatten.
2. Vergleich mit dem „offiziellen System“ HTML
3. Unterschiede/Ähnlichkeiten zwischen den Systemen

Hier zum Vergleich etwas HTML-Code:

Stück für Stück sollt ihr nun selbst so eine Art „HTML Regelwerk“ zusammenstellen. Dazu gebe ich euch eine einfache Seite und ihr schreibt alle HTML-Tags (so heißen die Dinger in den <> Klammern) raus und dazu die Bedeutung.

Da ich hier keine „.html“ Seiten hochladen kann, stelle ich sie als „.doc“ Datei zur Verfügung und ihr benennt sie in dem Programm „Notepad“ – mit dem ihr sie anschauen sollt, dann einfach einmal um:

index_einfach -> in index_einfach.html umbenennen. Rechtsklick darauf und in dem Programm „notepad“ öffnen.

Wichtig zu beachten: das Programm „Notepad“ zeigt euch den Inhalt mit allen dazugehörigen Formatierungsregeln an – damit ihr darin auch Dinge ändern könnt. Um das Endergebnis anzuschauen – ohne die ganzen störenden Formatierungsregeln – so wie ihr es aus Word gewohnt seid – müsst ihr die Seite mit der Endung „.html“ im Browser öffnen. Einfach Doppelklick auf die Datei und sie wird im Browser angezeigt!

Spielt einfach mal ein wenig rum mit der gegebenen Seite, verändert etwas und schaut jeweils im Browser, welche Auswirungen das in der Darstellung hat.

Ergebnisse der Stunde

Wir haben das alte System, welches wir vor den Ferien besprochen haben erneut angeschaut und mit dem offiziellen System – HTML VERGLEICHEN UND VIELE Ähnlichkeiten festgestellt.

Wir haben besprochen, was ein Tag ist, wie ein Ende Tag aussieht und was Attribute sind – und das ein Tag nach dem Age mehrere Attribute stehen haben kann, die einfach durch Leerzeichen getrennt sind.

Bsp: <font size=4 color=“red“>,  font ist der Name des Tags, size und color sind zwei Attribute, die mit Leerzeichen getrennt danach stehen.

Was die Worte Tag, Ende-Tag und Attribut in diesem Zusammenhang bedeuten, müsst ihr in eurem Blog genau festhalten.

Video zur Erklärung unseres Systems, HTML, Attribut, Tag http://youtu.be/Yk6ZF4BB04U

______________________________________________________________________________

Unterricht 25.3.2013

Heute Klausur mit Schwerpunkt auf unserem eigenen Formatierungssystem und HTML – was wir in der letzten Stunde dazu gemacht haben.

______________________________________________________________________________

Unterricht 8.4.2013

1. Klausur zurück und besprechen kurz bzgl. der Formatierungsaufgaben
2. • Warum sollt ihr programmieren lernen?
   • Video: kurz:http://www.youtube.com/watch?v=qYZF6oIZtfc   lang:http://www.youtube.com/watch?v=nKIu9yen5nc
3. Wdh. letzte Stunde
4. Vergleich unser System mit HTML: Ihr bekommt nochmal die einfache Seite von vorletzter Stunde und vergleicht das dort angegebene System HTML mit unserem test_einfach. Ihr könnt dazu auch das folgende Video ansehen:http://youtu.be/Yk6ZF4BB04U
5. Ergebnisse – was ist gleich/ähnlich, was ist anders???
6. HTMl Tag-Übersicht anlegen
7. HTML vertiefen: analysiert folgende Seite index_einfach, spielt ein wenig damit rum, verschönert sie. Welche Grenzen stellen sich bisher, was könnt ihr bisher mit HTML nicht so hinbekommen, wie z.B mit Word oder Powerpoint, wenn ihr eine schöne Seite gestalten wollt???

Ergebnisse der Stunde

Leider gab es ein paar Probleme – technischer Art, so dass nicht alle von euch richtig arbeiten konntet.

Wir haben daher auch noch keine Ergebnisse verglichen – das holen wir in der nächsten Stunde nach.

_______________________________________________________________

Unterricht 15.4.2013

Vergleich der Ergebnisse – was macht welcher Tag?

1. <html>
2. <body>
3. <font face=“VERDANA“ size = 4></font>
4. <i>
5. <s>
6. <u>
7. <h5>
8. <br>
9. <a href=“Lebenslauf_de.html“ >
10. <p>

Wie beendet man eine Formatierungsregel? – /und den Namen des Tags (ohne Attribute)

Habt ihr noch weitere Tags gefunden? Z.B. zum Einbinden von Bildern?

Eine gute Seite zum Nachschauen im Netz: http://wiki.selfhtml.org/wiki/HTML

Website-Projekt:

Macht euch entweder selbst eine ganz neue Seite oder baut die, die ich euch gegeben habe so aus, das es eine schöne Seite wird. Wählt euch also ein Thema, welches euch interessiert und gestaltet dazu ein kleines Website-Projekt. Wenn ihr neue Tags braucht und klärt, schreibt sie mit einer eigenen Erklärung in eure Tagsammlung (die dürfte ihr  zusammen mit eurem Blog im abschließenden Test dann auch verwenden). Wenn ihr bei der Gestaltung des Projektes nicht weiterkommt, dann fragt, wie man es umsetzen könnte.

Achtung: ein schönes Projekt kann eine schlechte Klausurnote ersetzen – aber ihr müsst euren Quellcode vollständig erklären können.

Sagt bescheid, wenn ihr ein Video als Erklärung braucht!!

Ergebnisse der Stunde

Es gab leider immer noch technische Probleme mit den MAC Rechnern…

Wir haben nun angefangen eine Linksammlung anzulegen.

Am Ende gab es folgende Fragen, die wir nächste Stunde beantworten müssen:

• Wie kann man Bilder/Hintergrundbilder in die Seite einfügen
• Wie kann man Text etc besser strukturieren, dass nicht immer alles linke an der Seite steht

___________________________________________________

Unterricht 22.4.2013

1. Neue Tags gefunden, die für andere auch interessant sein könnten?  (besprechen für alle)
2. Wie bindet man Bilder/Hintergrundbilder ein? Was, wenn das Bild nicht in dem gleichen Ordner liegt, wie die html-Datei?
3. Videos dazu: http://youtu.be/0wrl9Cy3FUI (Hintergrundbilder), http://youtu.be/z60o8R7ya7o (Bilder)
4. Videos zu Tabellen in HTML (um Text und Bilder auf der Website zu strukturieren) – bei Fragen bitte anschließend zu mir kommen: http://youtu.be/Gu5n5cj_Ld0
5. Weiter am Projekt arbeiten.

Ergebnisse der Stunde

Tags

– <div align=“center“>Text….</div> Absätze einfügen und Text horizontal platzieren (rechts, links, Mitte)

– <marquee>Text…. </marquee> Text „fliegt“ über die Seite.

Nächste Stunde gibt’s was zu

– Bilder einfügen – relative Pfade….

– Tabellen – bitte Video dazu ansehen (HA)

– Farbcodes

– Umlaute wie eingeben?

– Hyperlinks einfügen – wie?

_____________________________________________________

Unterricht 29.4.2013

Fragen vom letzten Mal klären

1. Farbcodes – was steckt dahinter (Ben-Alex)
2. Umlaute – warum ist das ein Problem, wie löse ich das? (Ronja)
3. Hyperlinks einfügen – siehe Video http://youtu.be/8VLa8CXd0hY
4. Tabellen -Ergebnisse aus Video besprechen

Bitte den Code für folgende Tabelle angeben:

Was kann man nun damit machen?

Ergebnisse der Stunde

Eine gute Website sollte:

• Navigationsleiste haben – oben oder links
• Kreativ sein
• Ansprechend sein
• Strukturiert sein (Tabellen, CSS)

Website zum Test von Tabellen
<html>
<body >
<table border=1 width=“100%“>
<!– 1.Zeile –>
<tr >
<td rowspan=2><img src=“Bilder/test1.jpg“ ></td>
<td valign=“top“ width=“50%“>
<table border=1>
<tr>
<td>Hallo</td>
<td>du</td>
</tr>
</table>
</td>
</tr>
<!– 2.Zeile –>
<tr>
<td >Herzlich Willkommen auf meiner Website</td>
</tr>
</table>

_______________________________________

Unterricht 13.5.2013

Fragen vom letzten Mal klären

1. Farbcodes – was steckt dahinter (Ben-Alex)
2. Tabellen -Ergebnisse aus Video besprechen

Bitte den Code für folgende Tabelle angeben:

Projektabgabe: voraussichtlich 27.5.2013

Beachtet bitte die Kriterien für eine gute Website aus letzter Stunde.

Ergebnisse der Stunde

Wir haben Farbcodes besprochen und Tabellen – wie man sie aufbaut und wo man sie einsetzen kann.

___________________________________________________

Unterricht 27.5.2013

Heute letzter Abgabetermin der Projekte!!?

Folgende Bewertungskriterien haben wir zusammen festgelegt (nur zur Erinnerung)

Eine gute Website sollte:

• Navigationsleiste haben – oben oder links
• Kreativ sein
• Ansprechend sein
• Strukturiert sein (Tabellen, CSS)

__________________________________________________

Unterricht 3.6.2013

Vorstellen der Themen von nächstem Schuljahr in Informatik – siehe Blog alku01.wordpress.com

Vorschläge/Ideen für den Unterricht, wie er ablaufen soll!

E-Truck vorstellen….

_______________________________________

Werbung