Modul III Webgestaltung mit HTML - Think Big
Modul III Webgestaltung mit HTML - Think Big
Modul III Webgestaltung mit HTML - Think Big
Erfolgreiche ePaper selbst erstellen
Machen Sie aus Ihren PDF Publikationen ein blätterbares Flipbook mit unserer einzigartigen Google optimierten e-Paper Software.
<strong>Modul</strong> lll: <strong>Webgestaltung</strong> <strong>mit</strong> <strong>HTML</strong><strong>Modul</strong> <strong>III</strong><strong>Webgestaltung</strong> <strong>mit</strong> <strong>HTML</strong>Das <strong>Modul</strong> bringt den Schülern <strong>HTML</strong>-Grundlagen bei und befähigt sie, eine erste Webseiteselbst zu gestalten. Dazu wird das Webmaker-Tool Thimble von Mozilla eingeführt. Indiesem Tool bearbeiten die Schüler selbstständig Arbeitsanweisungen und passen einenvorhandenen <strong>HTML</strong>-Code an.Zur unterrichtlichen Gestaltung von einer Doppelstunde geeignet.Hinweis: Für die Bearbeitung der Arbeitsblätter benötigen die Schüler einen Computer.
<strong>Modul</strong> <strong>III</strong>: <strong>Webgestaltung</strong> <strong>mit</strong> <strong>HTML</strong>LehrerinformationBegib dich auf <strong>HTML</strong>-TourArbeitsblattBegib dich auf <strong>HTML</strong>-TourWorum geht’s?Um <strong>HTML</strong>-Programmierung <strong>mit</strong> dem Webmaker-Tool Mozilla Thimble.Mit Mozilla Thimble kannst du richtige Webseiten programmieren. Links steht der Code – also die <strong>HTML</strong>-Programmierung – und rechts kannst du das Ergebnis sehen – also die Webseite.#LernzieleDie Schüler können <strong>mit</strong> Hilfe des Webmaker-Tool Mozilla Thimble einen <strong>HTML</strong>-Code eigenständiggestalten.Frage 1: LösungenHier ist der <strong>HTML</strong>-CodeUnd das ist die Webseite1. Der Titel steht zwischen den „title“-Tags bzw. auf der Webseite oben in blauer Schrift.2. Die „strong“-Tags rahmen „<strong>HTML</strong>“ ein und bewirken, dass es fett geschrieben erscheint.3. Die „p“-Tags machen einen Zeilenumbruch.4. Die „u“-Tags rahmen den Satz ein und bewirken, dass er unterstrichen ist.1. Schau dir die Webseite und ihren Code einmal ganz genau an. Kannst du folgende Fragenbeantworten?Frage 2: Hinweis1. Wo steht der Titel der Webseite?2. Warum ist „<strong>HTML</strong>“ fett geschrieben?34 35Bei der <strong>HTML</strong>-Tour sind im Code Kommentare eingefügt (). SolcheKommentare, die von den entsprechenden Tags eingefasst sind, werden vom Browser ignoriert underscheinen daher nicht auf der Webseite. So kann man den eigenen Code übersichtlicher gestaltenoder Hinweise für andere Programmierer platzieren. Bei der <strong>HTML</strong>-Tour enthalten die Kommentarefür die Schüler konkrete Arbeitsaufträge, wie sie den Code anpassen sollen. Die <strong>HTML</strong>-Tour ist sogestaltet, dass die Schüler sie selbstständig bearbeiten können.4. Warum ist der untere Satz unterstrichen?Im Anschluss an die Bearbeitung der Arbeitsaufträge der <strong>HTML</strong>-Tour können die Schüler auchweitere <strong>HTML</strong>-Tags ausprobieren und die Webseite so beliebig umgestalten.3. Warum stehen die beiden Sätze nicht in einerZeile?2. Jetzt bist du reif für die Tour. Genauer: für die <strong>HTML</strong>-Tour. Öffne dazu einen Browser, und gibfolgende Internetadresse ein: https://thimble.webmaker.org/p/l5c4/editWillkommen bei Mozilla Thimble!Lies dir einfach durch, was im Code (linke Seite) in fetter Schrift geschrieben steht. Das sind kleineArbeitsanweisungen für dich. Sie sagen dir, was du am Code ändern musst, um die Webseite zuverbessern. Los geht’s!Auf der linken Seite im Browserfenster siehst du den <strong>HTML</strong>-Code, auf der rechten Seite die Webseite. Wenndu im Code etwas veränderst, veränderst du sofort auch die Webseite. Und genau darum geht’s jetzt.TippSolltest du aus Versehen etwas Falsches geändert haben, kannst du <strong>mit</strong> dem „Undo“-Button (Pfeil oben)letzte Änderungen wieder rückgängig machen.
Change language