Webseiten gestalten. Formulare und Urheberrecht. Arbeitsheft. Frank Braun, Christoph Rauber 1. Auflage, 2013 ISBN:

Größe: px

Ab Seite anzeigen:

Download "Webseiten gestalten. Formulare und Urheberrecht. Arbeitsheft. Frank Braun, Christoph Rauber 1. Auflage, 2013 ISBN: 978-3-86249-237-4"

Gerrit Grosser
vor 8 Jahren
Abrufe

1 Frank Braun, Christoph Rauber 1. Auflage, 2013 ISBN: Webseiten gestalten Grundlagen HTML5 und CSS, Formulare und Urheberrecht Bluefish, CSS, CMSimple Arbeitsheft RS-WEB-HTML5

2 1.2 grundstruktur einer HtMl-seite Titel der Webseite Dokumententyp-Deklaration <html>-bereich <head>-bereich <body>-bereich Quellcode eines HtMl-Dokuments inhalte und tags Der Quellcode von HTML-Dokumenten besteht aus reinem Text. Dieser Text setzt sich aus Inhalten und Anweisungen, sogenannten Tags, zusammen. Browser werten diese Tags aus, um Webseiten darzustellen. Start-Tag Inhalt End-Tag End-Tags erkennt man an dem Slash / vor dem Elementnamen. Eine Besonderheit stellen leere Tags dar, die aus einem einzigen Tag-Bestandteil bestehen, z. B. das Tag zum Zeilenumbruch <br />. > > Öffne in Bluefish die Startseite index.html im Ordner schulweb. > > Gib der Startseite index.html den Titel Friedrich-Schiller-Schule Koblenz. > > Rücke die HTML-Elemente im <head>-bereich ein, indem du sie markierst und anschließend die Schaltfläche Einrücken betätigst. > > Erfasse die Texte im <body>-bereich wie abgebildet. Speichere vor der Browservorschau, denn der Browser stellt die letzte gespeicherte Version dar. > > Speichere die Webseite, damit sie in der Browservorschau angezeigt werden kann. > > Zeige die Seite in der Browservorschau an. 8 HERDT-Verlag

3 HTML-Grundlagen 1 / Begründe, weshalb die Texte in einer Zeile stehen. > > Schließe die Browservorschau und ändere den HTML-Code im <body>-bereich so ab, dass die Zeilenumbrüche im Browser dargestellt werden. Speichere und kontrolliere in der Browservorschau. > > Markiere die beiden Zeilen Internet-AG und Friedrich- Schiller-Schule und wähle in der Symbolleiste die Schaltfläche zur Zeichenformatierung fett (engl. bold). > > Markiere die Zeichenkette Friedrich-Schiller-Schule und formatiere sie kursiv (engl. italic). fett kursiv > > Damit der HTML-Code übersichtlicher ist, setze das <b>-tag wie auf der vorigen Seite im Beispiel gezeigt mit Zeilenschaltungen ab und rücke den Inhalt des Tags ein. > > Speichere und kontrolliere die Darstellung in der Browservorschau, beende Bluefish. Übungsaufgaben 1 Gib den Text auf der Startseite des Pizzaservice ein und formatiere ihn wie abgebildet. 2 Erstelle ein neues Web für ein Autohaus. Ordner: autoweb Erstelle die abgebildete Startseite. 3 Wie kann der abgebildete HTML-Code vereinfacht werden? HERDT-Verlag 9

4 2.2 inline-styles und <span>-tag Idealerweise sollten alle HTML-Seiten einer Website über eine externe CSS-Datei formatiert sein. In Ausnahmefällen kann es jedoch notwendig sein, einzelne Elemente einer HTML- Seite besonders zu formatieren. Dabei empfehlen Webseitenentwickler den Einsatz von Inline-Styles. Inline-Styles sind stärker als externe Regeln, sie überlagern externe Styles. > > Erstelle in deinem Arbeitsverzeichnis einen Ordner globalisierung. > > Erzeuge die abgebildeten Dateien index.html und styles.css. Inline-Styles werden im Tag mit dem Attribut style angegeben. Im Folgenden wird bei der Überschrift Hauptthese die Schriftart des <h2>-tags von arial auf monospace geändert. > > Rufe über das Kontextmenü den Dialog zum Bearbeiten des <h2>-tags bei Hauptthese auf. > > Rufe den CSS-Baukasten durch Klicken auf Stil auf. Monospace bedeutet, dass alle Schriftzeichen gleich breit sind, man spricht von einer nicht proportionalen Schrift, z. B. Courier. > > Wähle im CSS-Baukasten den Selektor font-familiy und gib als Wert monospace ein. Klicke auf Hinzufügen. In der Browservorschau siehst du, dass Hauptthese mit dem Inline-Style formatiert wird. 26 <h2 style="font-family: monospace; ">Hauptthese</h2> HERDT-Verlag

5 Webseiten gestalten mit CSS 2 In Texten formatieren Der Einsatz des <span>-tags ermöglicht das Formatieren von Textstellen innerhalb eines Absatzes. Der Inline-Style im <span>-tag überlagert die externen CSS-Regeln. / Formatiere die in der Abbildung hervorgehobene Textstelle mit gelbem Hintergrund und in der Schriftgröße large. Den <span> zu einer markierten Textstelle fügst du über eine Schaltfläche im Register CSS ein. Im anschließenden Dialog kannst du im CSS-Baukasten die Eigenschaften des Inline-Styles setzen. Der Wert "large" muss manuell eingegeben werden. Du kannst ihn nicht aus der Liste auswählen. Übungsaufgaben 1 Formatiere in autoweb auf der Seite impressum.html die Überschrift <h2> von Kontakt mit weißem Rahmen. 2 Formatiere in schulweb auf der Seite treffen_projekte.html Kunst-AG mit rot gepunktetem Rahmen (dotted). 3 Formatiere im pizzaweb auf der Seite zeiten_bedingungen.html die Textstelle Lieferung frei Haus in Grün und blinkend. 4 Erkläre den Hauptvorteil externer Stylesheets beim Ändern des Aussehens eines Internetauftritts. 5 Begründe, weshalb man Inline-Styles sparsam einsetzen sollte. HERDT-Verlag 27

3.4 Webseiten in die Webstruktur einbinden In die erstellte Webstruktur sollen nun die vorbereiteten Webseiten eingebunden werden. index.html kopfinhalt.html menueinhalt.html indexinhalt.

Verwendet wird es zum Integrieren von Objekten wie Audio-, Video- oder Musikdateien sowie PDF-Dokumenten oder HTML-Dateien.

6 3.4 Webseiten in die Webstruktur einbinden In die erstellte Webstruktur sollen nun die vorbereiteten Webseiten eingebunden werden. index.html kopfinhalt.html menueinhalt.html indexinhalt.html fussinhalt.html Bereiche mit dem <object>-tag befüllen Das <object>-tag definiert ein eingebettetes Objekt innerhalb eines HTML-Dokumentes. Verwendet wird es zum Integrieren von Objekten wie Audio-, Video- oder Musikdateien sowie PDF-Dokumenten oder HTML-Dateien. Wir verwenden das <object>-tag zum Integrieren von HTML-Seiten in die DIV-Bereiche. Im Beispiel wird die HTML-Seite kopfinhalt.html in die DIV kopf eingebettet. <div id="kopf"> <object data="kopfinhalt.html" type="text/html"></object> </div> > > Öffne in Bluefish über das Menü Datei Erweitertes Öffnen alle fünf HTML-Seiten von schulsite sowie die CSS-Datei stilvorlage.css. > > Ergänze die <object>-tags in der Datei index.html zum Einbetten der Seiten in die entsprechenden DIVs. > > Kontrolliere im Browser. Die Inhalte der eingebetteten Seiten werden nicht 100%ig dargestellt, sondern abgeschnitten. Die Seitenhintergründe der eingebetteten Seiten überlagern den gelben Hintergrund der DIVs. 38 HERDT-Verlag

7 Einen Webauftritt strukturieren 3 > > Lösche in stilvorlage.css den Style zur gelben Hintergrundfarbe der Bereiche (Zeilen 47 50). > > Formatiere über den Selektor <object>, dass die Objekte den Platz ihrer DIVs zu 100% ausfüllen. > > Kontrolliere in der Browseransicht. Übungsaufgaben Öffne die Datei stilvorlage.css. 1 Lege über den allgemeinen <body>-selektor, den du an den Anfang des Stylesheets stellst, die folgenden grundsätzlichen Formatierungen fest. a) Hintergrund des gesamten Fensters: lightgray b) Übergreifende Schriftart: Arial, Helvetica, Sans-Serif 2 Nimm folgende weitere Formatierungen vor. a) Lösche den blauen Rahmen um die DIV webseite. b) Setze im <object>-selektor einen Rahmen um alle eingebetteten HTML-Seiten: border-style: solid, border-color: whitesmoke c) Zentriere die Texte in #kopfbody und #fussbody horizontal. d) Setze die Schriftgröße in #kopfbody auf x-large, bold (fett) und in #fussbody auf large. e) Setze die Überschrift in #kopfbody um 10 Pixel nach unten, Hinweis: padding-top. f) Rücke die <h2>-überschriften um 10 Pixel ein, Hinweis: padding-left. HERDT-Verlag 39

8 7.2 Veröffentlichung von Fotos Fotos von Gebäuden Gemäß der Panoramafreiheit (UrhG 59) dürfen Außenaufnahmen von dauerhaft öffentlich zugänglichen Gebäuden veröffentlicht werden, Innenaufnahmen von Bauwerken jedoch nicht. Wenn das Foto nicht selbst erstellt wurde, müssen beim Fotografen Lizenzen eingeholt werden. / Beurteile, bei welcher der folgenden Aufnahmen eine Veröffentlichung rechtlich unproblematisch ist. 1 2 Fotos von Personen (Kunsturhebergesetz) Fotos dürfen nur mit Einwilligung des Abgebildeten veröffentlicht werden. Ohne die Einwilligung dürfen veröffentlicht werden: Bildnisse aus dem Bereich der Zeitgeschichte; Bilder, auf denen die Personen nur als Beiwerk erscheinen, wie z. B. bei Versammlungen oder anderen öffentlichen Veranstaltungen. Falls die Veröffentlichung von Fotos, bei denen die Person als Beiwerk angesehen werden kann, ein berechtigtes Interesse des Abgebildeten verletzt, ist die zustimmungslose Veröffentlichung untersagt. (Beispiel: Die Person bohrt in der Nase.) Der Fotograf gilt als Urheber des Fotos und genießt Urheberschutz. / Begründe, weshalb die Veröffentlichung der abgelichteten Personen auf den folgenden selbst erstellten Aufnahmen rechtlich unproblematisch ist. 64 HERDT-Verlag

9 Aspekte des Urheberrechts Übungsaufgabe Trage in nachstehender Grafik ein, wer welche Rechte am Foto besitzt. KuG steht für Kunsturheberrechtsgesetz, UrhG steht für das Urheberrechtsgesetz. KuG Wer besitzt welche Rechte an diesem Foto? UrhG HERDT-Verlag 65

Ähnliche Dokumente

HTML5. Wie funktioniert HTML5? Tags: Attribute:

HTML5. Wie funktioniert HTML5? Tags: Attribute: HTML5 HTML bedeutet Hypertext Markup Language und liegt aktuell in der fünften Fassung, also HTML5 vor. HTML5 ist eine Auszeichnungssprache mit der Webseiten geschrieben werden. In HTML5 wird festgelegt,