RS-WEB-HTML5 LMP Info · 3 Erstelle für die Website eines Online-Pizzaservice den Ordner pizzaweb...

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

Transcript of RS-WEB-HTML5 LMP Info · 3 Erstelle für die Website eines Online-Pizzaservice den Ordner pizzaweb...

Page 1: RS-WEB-HTML5 LMP Info · 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. HEDT-Verlg

Frank Braun, Christoph Rauber

2. Auflage, 2017

ISBN 978-3-86249-744-7

WEBSEITEN GESTALTENGrundlagen HTML5 und CSS, Formulare und Urheberrecht

Bluefish, CSS, CMSimple

Lehrerband

RS-WEB-HTML5_LMP

Page 2: RS-WEB-HTML5 LMP Info · 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. HEDT-Verlg

Impressum

ISBN 978-3-86249-744-7

Bestellcode: RS-WEB-HTML5_LMP

Autoren:

Frank Braun Diplom-Informatiker Dozent am Landesinstitut für Pädagogik und Medien

Christoph Rauber Landesfachberater für Informatik

Druck: Produziert im HERDT-Digitaldruck

2. Auflage, 2017

HERDT-Verlag für Bildungsmedien GmbH

Am Kümmerling 21-25

55294 Bodenheim

Internet: www.herdt.com

E-Mail: [email protected]

© HERDT-Verlag 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 aus- geschlossen 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 beschriebe-nen Software entsprechen, hat der Hersteller der jeweiligen Software nach Drucklegung Änderungen vorgenommen oder vorhandene Funktionen geändert oder entfernt.

Page 3: RS-WEB-HTML5 LMP Info · 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. HEDT-Verlg

© HERDT-Verlag 3

1

Inhalt

1 HTML-Grundlagen 61.1 Website anlegen _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 61.2 Grundstruktur einer HTML-Seite _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 71.3 Absätze und Tag-Attribute _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 81.4 Grafiken auf Webseiten _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 101.5 Überschriften und Aufzählungen _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 121.6 Tabellen _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 141.7 Hyperlinks (Verweise) _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 161.8 Impressum _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 18

2 Webseiten gestalten mit CSS 202.1 Einheitliches Websitelayout mit CSS _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 202.2 Inline-Styles und <span>-Tag _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 222.3 Logisches Formatieren _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 242.4 Formatieren mit eigenen Stilklassen _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 26

3 Einen Webauftritt strukturieren 283.1 Vorgehensweise _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 283.2 Inhaltsbereiche erstellen und formatieren _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 293.3 Aufbau der Webseitenstruktur _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 303.4 Webseiten in die Webstruktur einbinden _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 313.5 Strukturierte Webseiten verlinken _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 32

4 Projekte mit HTML und CSS 364.1 Projekt „Pizzasite” _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 364.2 Projekt „Autosite” _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 37

5 Formulare 405.1 Formulare erstellen _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 405.2 Formularelemente _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 40

6 Bilder fürs Web aufbereiten 426.1 Bildformate und Bildqualität _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 426.2 Bildgröße ändern _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 436.3 Zuschneiden auf Größe _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 43

7 Aspekte des Urheberrechts 467.1 Veröffentlichung geschützter Werke _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 467.2 Veröffentlichung von Fotos _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 477.3 „Freie Fotos” _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 48

8 Webseiten veröffentlichen 508.1 Websites hochladen _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 508.2 Webserver und FTP-Server _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 50

9 Webseiten mit einem CMS erstellen 52

Allgemeine Hinweise 6

Page 4: RS-WEB-HTML5 LMP Info · 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. HEDT-Verlg

© HERDT-Verlag4

Allgemeine HinweiseStrukturierung der BuchPlus-Dateien

� 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

Um auf die BuchPlus-Medien für dieses Buch zuzugreifen, verwenden Sie den Webcode, der sich rechts oben auf der Titelseite des Buches befindet.

> Rufen Sie im Browser die Internetadresse www.herdt.com auf.

Hier den Code RS-WEB-HTML5_LMP eingeben und mit Ü bestätigen

1.Auf der nun geöffneten Seite

Schaltfläche anklicken

2.

> Stellen Sie den Schülerinnen und Schülern die BuchPlus-Dateien zur Verfügung – ohne den Ordner loesungen.

� 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.

Batch-Datei:bluefish.bat

Batch-Dateien:1_start_ftpserver.bat2_start_ftpserver.batstop.bat

Page 5: RS-WEB-HTML5 LMP Info · 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. HEDT-Verlg

© HERDT-Verlag 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 methodisch-didaktischen 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 deutsch-sprachigen Raum die Standard- Plattform zum vertieften Erarbeiten in HTML und CSS.

Vorschlag zur zeitlichen Planung

Kapitel 1 2 3 4 5 6 7 8 9

HTM

L-Gr

undl

agen

Web

seite

n

gest

alte

n m

it CS

S

Eine

n W

ebau

ftritt

st

rukt

urie

ren

Proj

ekte

mit

HTM

L un

d CS

S

Form

ular

e

Bild

er fü

rs W

eb

aufb

erei

ten

Askp

ekte

des

U

rheb

erre

chts

Web

seite

n ve

röffe

ntlic

hen

Web

siete

n m

it CM

S er

stel

len

UStd. 6 6 6 6 2 4 2 2 6

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.

HinweisWenn 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.

Page 6: RS-WEB-HTML5 LMP Info · 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. HEDT-Verlg

© HERDT-Verlag6

HTML-Grundlagen1

1.1 Webseiten 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änder-spezifischen Zeichen (ä, ü, ß, é, ê) ohne zusätzliche Formatierungen (ö= &ouml;) 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.

2Wie 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.

Page 7: RS-WEB-HTML5 LMP Info · 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. HEDT-Verlg

© HERDT-Verlag 7

1HTML-Grundlagen

1.2 Grundstruktur einer HTML-SeiteMethodisch-didaktische Hinweise

Erläutern Sie den Schülern, dass HTML keine Programmiersprache ist, sondern eine Sprache (Language), um vernetzte Seiten mit Text, Bild, Ton usw. zu beschreiben (markup = auszeich-nen). Die Beschreibung erfolgt mit Tags (Etiketten) im Hypertext.

Das Formatieren in Fettdruck bzw. in Kursivdruck kann sowohl mit <b> bzw. <i> als auch mit <strong> bzw. <em> erfolgen. Bei <strong> und <em> handelt es sich um logische Textauszeichnungen: betont bzw. empathisch. <b> und <i> sind physische Auszeichnungen für Fettdruck bzw. Kursivdruck. In Bluefish findet man die physische Auszeichnung im Register Standard, die logische im Register Schriftarten.

Thematisieren Sie mit den Schülern den Aspekt „übersichtlicher Quellcode“. Zeigen Sie, dass Einrückungen die Lesbarkeit des Codes erhöhen.

Achtung: Vor der Browservorschau muss gespeichert werden. Schüler vergessen dies oft.

Vorlagen

Ordner: loesungen\kapitel1_html\11_pizzaweb, 11_schulweb

Lernaufgabe

/Begründe, weshalb die Texte in einer Zeile stehen.

Es fehlt jeweils das Tag <br />, d. h. die Anweisung, einen Zeilenumbruch vorzunehmen.

Übungsaufgaben

Ordner: loesungen\kapitel1_html\12_autoweb, 12_pizzaweb, 12_schulweb

1Gib den Text auf der Startseite des Pizzaservice ein und formatiere ihn wie abgebildet.