Die Struktur des Arbeitsbuches ist folgender Tabelle zu entnehmen: Symbol Bezeichnung Funktion Situationsbeschreibung Problematisierung und praxisnahe Hinführung Aufgabe, die am PC ausgeführt wird Programmschulung Ergebnissicherung schriftliche Aufgabe Verständnisfragen zur Ergebnissicherung Info-Text Arbeitsschritte Arbeitsbuch Modul AKTUELLE ENTWICKLUNG ANGEWANDTER INFORMATIK Themengebiet: Webseitenerstellung mit HTML und CSS Vorgabe von Informationen, die zur Bewältigung von Aufgaben heranzuziehen sind Kurzhandbuch zur Nachbearbeitung schrittweises Erarbeiten von Lerninhalten Nachvollziehen des Lösungsweges Das Übungsmaterial für Schülerinnen und Schüler steht zum Download bereit auf der Webseite: Juni 2009 Frank Braun Dirk Bremer Helge Deuber Alexander Prim Christoph Rauber
Inhaltsverzeichnis Inhaltsverzeichnis 1 Grundbegriffe rund ums World Wide Web...4 1.1 Internet und Intranet...4 1.2 Webserver und Webbrowser...4 1.3 Webhosting...5 1.4 Webseite und Website...5 2 HTML-Dateien und TAGs...6 3 Websites erstellen mit MS Visual Web Developer VWD...9 3.1 Eine neue Website und eine Webseite anlegen...10 3.2 Aufbau einer standardkonformen XHTML-Datei...11 3.3 Aufbau einer XHTML-Datei mit Stylesheet...13 3.4 Positionen von Stylesheets...15 3.5 Inline- und eingebettete Stilvorlagen erstellen und zuweisen...16 3.6 Stilvorlagen benennen...18 3.7 Stilvorlagen ändern...18 3.8 Webseite hinzufügen, titel und Zeichensatz zuweisen...19 3.9 Überschriften...21 3.10 Inline- und Blockelemente...21 3.11 Inline-Elementen eine neue Stilvorlage zuweisen...23 3.12 Inline-Elementen eine bestehende Stilvorlage zuweisen...23 3.13 Grafiken einfügen...23 3.14 Hyperlinks...25 3.15 Grafiken ausrichten und einrahmen...26 3.16 Kommentare in HTML einfügen...29 3.17 Tabellen einfügen...30 3.18 Tabellenbeschriftung und Überschriftenzeile...31 3.19 Tabellenzeile einfügen und Zellen verbinden...32 3.20 Klassen- und Elementselektoren - Begriffe...32 3.21 Regeln mit Elementselektoren erstellen...33 3.22 Regeln für Schrift und Hintergrund eines Dokuments...34 3.23 Tabellen formatieren über Elementselektoren...35 3.24 Übungen zu Elementselektoren und Tabellen...38 3.25 Externe Stylesheets...39 3.26 Kopfbereich mittels allgemeinem Blockelement <div>...41 3.27 Text im allgemeinen Blockelement...42 3.28 Grafik im allgemeinen Blockelement...43 3.29 Allgemeines Blockelement positionieren...44 3.30 Verweis auf E-Mail-Adresse...46 3.31 Navigations- und Contentbereich...46 3.32 Aufzählungen/Listen...50 Seite 2 von 51 Braun Bremer Deuber Rauber
Webseitenerstellung mit HTML und CSS Webseitenerstellung mit HTML und CSS Download des kostenlosen Programms: http://www.microsoft.com/germany/express/product/visualwebdeveloperexpress.aspx Braun Bremer Deuber Rauber Seite 3 von 51
Webseitenerstellung mit HTML und CSS 1 Grundbegriffe rund ums World Wide Web 1.1 Internet und Intranet Intranet- Internet- Aufgabe 1 Erklären Sie den Unterschied zwischen dem Intranetnetauftritt und dem Internetauftritt eines Unternehmens. Die des Internetauftritts sind auch von der Öffentlichkeit erreichbar, die des Intranetauftritts nur für Mitarbeiter des Unternehmens. Aufgabe 2 Nennen Sie zwei Ziele eines Internet- und zwei eines Intranetauftritts? Internetauftritt: Werbekanal, Kommunikationskanal für Kundenanfragen Unternehmenspräsentation, Vorstellung von Produkten, Dienstleistungen Intranetauftritt: Kommunikationskanal für Mitarbeiter, Geschäftsprozessoptimierung 1.2 Webserver und Webbrowser Web- Web-Server (Host) Zugriffskontrolle Clients Aufgabe 3 Beschreiben Sie kurz die Aufgabe von Webbrowsern und die von Webserver-Software. Webbrowser dienen dem Abrufen von Webseiten. Webserver-Software dient dem Bereitstellen (Hosting) von Webseiten. Zugriffskontrolle Unternehmen Öffentlichkeit Die gemeinsame Sprache (das Protokoll) zwischen Webserver und Webbrowser ist http bzw. https. Einige Software-Produkte Webserver-Software Apache (kostenlos) Internet Information Server (Microsoft) Webbrowser-Software Mozilla Firefox (kostenlos) Seite 4 von 51 Braun Bremer Deuber Rauber
1.3 Webhosting Webseitenerstellung mit HTML und CSS Als (1) Host Aufgabe 4 Füllen Sie die Lücken im nachstehenden Text mit folgenden Begriffen: Host, Internet, Webhosting, Server-Software, Browser, Webspace. (engl. Wirt, Gastgeber ) wird ein Computer bezeichnet, auf dem eine (2) Server-Software läuft. Deshalb werden Hosts umgangssprachlich häufig auch als Server bezeichnet. Das Bereitstellen von Webseiten auf einem Host wird als (3) Webhosting bezeichnet. Dabei werden Webseiten-Dateien auf den Webserver hochgeladen. Von dort können Sie von einem (4) Browser Bereitstellen von Speicherplatz (5)Webspace schnellen und dauerhaften Anbindung (Standleitung) an das (6) zur Ansicht heruntergeladen werden. Als Webhosting wird das auf einem Webserver mit einer sehr Internet bezeichnet. Aufgabe 5 Nennen Sie drei Unternehmen, die Webspace auf Webservern bereitstellen. 1&1, Strato, Lycos 1.4 Webseite und Website. Web- Host (Web-Server) Aufgabe 6 Beschreiben Sie an Hand obiger Abbildung den Zusammenhang zwischen Webseite und Website. Eine Website besteht aus vielen Webseiten. Web-Seite (veröffentlichte HTML-Datei) URL (Web-Adresse einer Datei): http://www.unternehmen.de/produkte/produkt1.html Protokoll Web-Site Unterordner Domain-Adresse Dateiname (Host-Adresse) ohne Angabe eines Dateinamens sucht der Webserver nach i. d. R. index.htm bzw. index.html Internetauftritt eines Unternehmens, einer Organisation oder Privatperson. Die URL aller Webseiten, die zu einer bestimmten Website gehören, besitzen i. d. R. die gleiche Domain-Adresse. Braun Bremer Deuber Rauber Seite 5 von 51