Leseprobe - HERDT
Werbung
Webseiten gestalten Frank Braun, Christoph Rauber 1. Auflage, 2013 Grundlagen HTML5 und CSS, Formulare und Urheberrecht Bluefish, CSS, CMSimple ISBN: 978-3-86249-237-4 Arbeitsheft RS-WEB-HTML5 1.2 grundstruktur einer HtMl-seite Titel der Webseite Dokumententyp-Deklaration <head>-Bereich <html>-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. 8 >> Speichere die Webseite, damit sie in der Browservorschau angezeigt werden kann. Zeige die Seite in der Browservorschau an. © HERDT-Verlag 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 FriedrichSchiller-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). >> 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. >> fett kursiv 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 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 HTMLSeite besonders zu formatieren. Dabei empfehlen Webseitenentwickler den Einsatz von Inline-Styles. Inline-StylessindstärkeralsexterneRegeln,sieüberlagernexterneStyles. >> Erstelle in deinem Arbeitsverzeichnis einen Ordner globalisierung. >> Erzeuge die abgebildeten Dateien index.html und styles.css. Inline-StyleswerdenimTagmitdemAttributstyleangegeben.ImFolgendenwird beiderÜberschriftHauptthesedieSchriftartdes<h2>-Tagsvonarialaufmonospace geändert. >> >> „Monospace“ bedeutet, dass alle Schriftzeichen gleich breit sind, man spricht von einer nicht proportionalen Schrift, z. B. Courier. 26 >> Rufe über das Kontextmenü den Dialog zum Bearbeiten des <h2>-Tags bei Hauptthese auf. Rufe den CSS-Baukasten durch Klicken auf Stil auf. 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. <h2 style="font-family: monospace; ">Hauptthese</h2> © HERDT-Verlag 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.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 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 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 Aspekte des Urheberrechts 7 1 2 3 Übungsaufgabe Trage in nachstehender Grafik ein, wer welche Rechte am Foto besitzt. KuG steht für Kunsturheberrechtsgesetz, UrhG steht für das Urheberrechtsgesetz. Wer besitzt welche Rechte an diesem Foto? KuG © HERDT-Verlag UrhG 65
