WEBSEITEN GESTALTEN. Grundlagen HTML5 und CSS, Formulare und Urheberrecht. Lehrerband

Transkript

1 Frank Braun, Christoph Rauber 2. Auflage, 2017 ISBN WEBSEITEN GESTALTEN Grundlagen HTML5 und CSS, Formulare und Urheberrecht Bluefish, CSS, CMSimple Lehrerband RS-WEB-HTML5_LMP

2 Impressum ISBN Bestellcode: RS-WEB-HTML5_LMP Autoren: Frank Braun Christoph Rauber Diplom-Informatiker Dozent am Landesinstitut für Pädagogik und Medien Landesfachberater für Informatik Druck: Produziert im HERDT-Digitaldruck 2. Auflage, 2017 HERDT-Verlag für Bildungsmedien GmbH Am Kümmerling Bodenheim Internet: für Bildungsmedien GmbH, Bodenheim Alle Rechte vorbehalten. Kein Teil des Werkes darf in irgendeiner Form (Druck, Fotokopie, Mikrofilm oder einem anderen Verfahren) ohne schriftliche Genehmigung des Verlags reproduziert oder unter Verwendung elektronischer Systeme verarbeitet, vervielfältigt oder verbreitet werden. Dieses Buch wurde mit großer Sorgfalt erstellt und geprüft. Trotzdem können Fehler nicht vollkommen ausgeschlossen werden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen. Wenn nicht explizit an anderer Stelle des Werkes aufgeführt, liegen die Copyrights an allen Screenshots beim HERDT- Verlag. Sollte es trotz intensiver Recherche nicht gelungen sein, alle weiteren Rechteinhaber der verwendeten Quellen und Abbildungen zu finden, bitten wir um kurze Nachricht an die Redaktion. Die in diesem Buch und in den abgebildeten bzw. zum Download angebotenen Dateien genannten Personen und Organisationen, Adress- und Telekommunikationsangaben, Bankverbindungen etc. sind frei erfunden. Eventuelle Übereinstimmungen oder Ähnlichkeiten sind unbeabsichtigt und rein zufällig. Die Bildungsmedien des HERDT-Verlags enthalten Verweise auf Webseiten Dritter. Diese Webseiten unterliegen der Haftung der jeweiligen Betreiber, wir haben keinerlei Einfluss auf die Gestaltung und die Inhalte dieser Webseiten. Bei der Bucherstellung haben wir die fremden Inhalte daraufhin überprüft, ob etwaige Rechtsverstöße bestehen. Zu diesem Zeitpunkt waren keine Rechtsverstöße ersichtlich. Wir werden bei Kenntnis von Rechtsverstößen jedoch umgehend die entsprechenden Internet adressen aus dem Buch entfernen. Die in den Bildungsmedien des HERDT-Verlags vorhandenen Internetadressen, Screenshots, Bezeichnungen bzw. Beschreibungen und Funktionen waren zum Zeitpunkt der Erstellung der jeweiligen Produkte aktuell und gültig. Sollten Sie die Webseiten nicht mehr unter den angegebenen Adressen finden, sind diese eventuell inzwischen komplett aus dem Internet genommen worden oder unter einer neuen Adresse zu finden. Sollten im vorliegenden Produkt vorhandene Screenshots, Bezeichnungen bzw. Beschreibungen und Funktionen nicht mehr der beschriebenen Software entsprechen, hat der Hersteller der jeweiligen Software nach Drucklegung Änderungen vorgenommen oder vorhandene Funktionen geändert oder entfernt.

3 Lehrerband 4 Allgemeine Hinweise Strukturierung der BuchPlus-Dateien bluefish cmsimple ftp-client-winscp Batch-Datei: bluefish.bat BuchPlus IrfanViewPortable loesungen provider Batch-Dateien: 1_start_ftpserver.bat vorlagen stop.bat Die Batch-Datei bluefish.bat startet den Webeditor im Ordner bluefish ohne Installation und ohne Admin-Rechte. Im Ordner cmsimple befindet sich das Content-Management-System CMSimple mit verschiedenen Templates. Die portable Version des FTP-Clients WinSCP befindet sich im gleichnamigen Ordner. Im Ordner loesungen befinden sich fortlaufende Lösungsstände der Buchprojekte. Das im Buch eingesetzte Bildbearbeitungstool liegt im Ordner IrfanViewPortable. Im Ordner provider befinden sich zwei Batch-Dateien zum Starten des FTP- und des Webservers sowie eine Batch-Datei zum Beenden eines oder beider Server. Im Ordner vorlagen befinden sich alle Übungsdateien bzw. Vorlagen. Installationshinweise Den Schülerinnen und Schülern sollte der gesamte Inhalt der CD ohne den Ordner loesungen zur Verfügung gestellt werden. Um Probleme mit Schreibberechtigungen zu vermeiden, sollten die Dateien auf einem beschreibbaren Datenträger liegen. Empfehlenswert ist das Arbeiten auf einem USB-Stick, da die Schüler so auch zu Hause an den Projekten arbeiten können.

4 Lehrerband 5 HTML-Varianten Die HTML-Standards werden vom World Wide Web Consortium beschlossen und ständig aktualisiert. Bestimmte veraltete HTML-Elemente werden aus Gründen der Kompatibilität geduldet, aber als Auslaufmodelle eingestuft. HTML-Code, der diese veralteten Elemente beinhaltet, wird als transitional (Übergangslösung) bezeichnet. HTML-Code, der sich strikt an den neuesten Standard hält, wird als strict bezeichnet. Im vorliegenden Buch wird die strikte HTML-Variante angestrebt, vereinzelt werden aus methodischdidaktischen Gründen transitionale Elemente verwandt. Im Web-Portal SELFHTML finden Sie in der HTML-Referenz zu jedem Element und zu jedem Attribut die Variante (transitional oder strikt), zu der es gehört. SELFHTML ist im deutschsprachigen Raum die Standard- Plattform zum vertieften Einarbeiten in HTML und CSS. Vorschlag zur zeitlichen Planung Kapitel HTML- Grundlagen Webseiten gestalten mit CSS Einen Webauftritt strukturieren Projekte mit HTML und CSS Formulare Bilder fürs Web aufbereiten Aspekte des Urheberrechts Webseiten veröffentlichen Webseiten mit CMS erstellen UStd Empfehlung zu Lernzielkontrollen Das Buch hat zum Ziel, den Schülerinnen und Schülern einen Überblick über grundlegende Techniken der Websitegestaltung zu vermitteln. Bei Lernzielkontrollen sollte es den Schülerinnen und Schülern erlaubt sein, das Buch oder andere Hilfen zu benutzen. Das Auswendiglernen von HTML-Tags oder CSS-Attributen macht nach Meinung der Autoren aus pädagogischer Sicht wenig Sinn. Hinweis Wenn in den folgenden Texten lediglich die männliche Form verwendet wird, so geschieht dies einzig und allein aus Gründen der sprachlichen Vereinfachung und besseren Lesbarkeit.

5 Lehrerband 6 1 HTML-Grundlagen 1.1 Website anlegen Methodisch-didaktische Hinweise Klären Sie verbindlich mit Ihren Schülern, wo sie Vorlagedateien finden und wo sie ihre Lösungen abspeichern sollen. Wir empfehlen das Arbeiten auf einem USB-Stick, da die Schüler dann auch zu Hause an den Projekten arbeiten können. Wichtig ist, dass die Schüler sicher mit Ordner- und Dateistrukturen umgehen können. Eine kurze Demonstration der Ordneranlage im Datei-Explorer bietet sich an. Halten Sie die Schüler dazu an, jede HTML-Seite in Bluefish über Menü Neu aus Template HTML 5 zu erstellen. Dies erspart Schreibarbeit und erzeugt ein korrektes HTML5-Gerüst. Beim Speichern muss die Dateinamenerweiterung.html eingegeben werden, auch wenn unter Windows die Anzeige der Dateinamenerweiterungen ausgeschaltet ist. Falls ein Schüler nach der Codezeile <meta charset="utf-8" /> fragt, können Sie ihm erläutern, dass durch die Angabe dieses weltweit gültigen Zeichensatzes alle länderspezifischen Zeichen (ä, ü, ß, é, ê) ohne zusätzliche Formatierungen (ö= ö) angezeigt werden. Übungsaufgaben Ordner: loesungen\kapitel1_html\11_pizzaweb 1. Erläutere den Begriff Hyperlink. Ein Hyperlink verweist auf einen bestimmten Inhalt im World Wide Web, der durch Anklicken aktiviert wird. 2. Wie nennt man Software zum Anzeigen von HTML-Seiten? Browser (Beispiele: Firefox, Internet Explorer, Google Chrome, Opera, Safari) 3. Erstelle für die Website eines Online-Pizzaservice den Ordner pizzaweb und lege darin mit Bluefish die Startseite index.html auf Basis von HTML 5 an.