3. Briefing zur Übung IT-Systeme

Größe: px

Ab Seite anzeigen:

Download "3. Briefing zur Übung IT-Systeme"

Adam Langenberg
vor 7 Jahren
Abrufe

1 3. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, , PC Pool

2 Stand und Ausblick Einführung: , Uhr (c.t.), HS 4/PC Pool Fragestunde: , Uhr, PC Pool Fragestunde: , Uhr, PC Pool Fragestunde: , Uhr, PC Pool Fragestunde: , Uhr, PC Pool Klausurvorbereitung: , Uhr, PC Pool

3 WBT 06: Erste Schritte mit CSS Lessons learned: CSS-Stylesheet: Mit Hilfe von externen Stylesheets werden Formatvorlagen (Styles) für die Gestaltung der Web Site eingebunden. CSS-Regeln: Selektor { Deklaration} Selektor { Eigenschaft : Wert; } Selektoren können Tags, Klassen oder IDs sein Beispiel Selektor Klasse:.klasse { color: blue; background-color: orange ; } 3

4 WBT 06: Erste Schritte mit CSS Lessons learned: CSS-Selektoren gruppieren: Haben mehrere Selektoren die gleichen Deklarationen, so können sie gruppiert werden: p, h1, #id1 { color: blue; } CSS-Selektoren kombinieren: Beispiel: Sollen nur die <p>- Tags innerhalb der Klasse absatz1 mit einem Style versehen werden, so kann man diese spezifisch ansprechen:.absatz1 p { color: blue; } 4

5 WBT 06: Übung Geben Sie die CSS-Regeln an, die jede Strophe in die passende Farbe, die Überschrift in Orange und die Quelle in grau färben. Die Strophen sollen alle in der Schriftgröße 25px und der Beruf Jäger unterstrichen sein. <DOCTYPE html> <html> <head> <link href="liederstyles.css" rel="stylesheet" /> <title> Ein Volkslied </title> </head> <body> <h1> Grün sind alle meine Kleider </h1> <p id="jaeger"> Grün, grün, grün sind alle meine Kleider Weil mein Schatz ein <span class="beruf"> Jäger </span> ist. </p> </body> </html> <p id="seemann"> Blau, blau, blau sind alle meine Kleider Weil mein Schatz ein <span class="beruf"> Seemann </span> ist. </p> <p id="schornsteinfeger"> Schwarz, schwarz, schwarz sind alle meine Kleider Weil mein Schatz ein <span class="beruf"> Schornsteinfeger </span> ist. </p> <p class="quellenangabe"> Volkslied aus Pommern, 19. Jh. </p> 5

6 WBT 07: Umgang mit CSS Lessonslearned: Integration von CSS Es gibt drei Möglichkeiten, CSS-Regeln mit HTML zu verknüpfen: Inline Styles - CSS-Regeln werden direkt im öffnenden Tag eines HTML-Elements definiert. Styles im Head - CSS-Regeln werden im Kopf der HTML- Datei definiert. Externe Stylesheets - CSS-Regeln werden in einer externen CSS- Datei definiert. Einbindung eines externen Stylesheets in HTML <link href="liederstyles.css" rel="stylesheet" /> Vorrang von Styles: Das innerste Style hat Vorrang und überschreibt die äußeren! Von außen nach innen: externes Stylesheet, Styles im Head, Inline Styles 7

7 WBT 07: Umgang mit CSS Lessons learned: CSS-Prinzipien Vererbung in CSS: Styles werden vom Elternelement an die untergeordneten Elemente (Kinder) weitervererbt. Beispiel: wird dem Body in CSS die Textfarbe blau zugewiesen, so haben alle Kinderelemente des Bodys die Textfarbe blau Kaskade und Rangfolge: Bei mehreren Styles muss der Web-Browser entscheiden, welche CSS-Regeln verwendet werden Wird eine Eigenschaft mehrfach deklariert, so gilt immer die zuletzt angegebene (also die unterste) Eigenschaft im Stylesheet Wird ein Element durch mehrere Selektoren angesprochen, gilt immer die Eigenschaft des spezifischsten Selektors. Von spezifisch nach weniger spezifisch sortiert: ID-Selektor, Klassen-Selektor, Tag-Selektor 8

8 WBT 07: Übung Welcher Selektor gewinnt? Eintraege.html <DOCTYPE html> <html> <head> <link href="styles.css" rel="stylesheet" /> </head> <body> <p id="eintrag-eins"> Hallo Welt! </p> <p id="eintrag-zwei" class="erinnerung"> Mein zweiter Eintrag </p> <p id="eintrag-drei" class="erinnerung"> Mein dritter Eintrag </p> <p id="eintrag-vier" class="wichtig erinnerung"> Mein vierter Eintrag </p> <p id="eintrag-fuenf" style="color: yellow"> Mein fünfter Eintrag </p> <p id="eintrag-sechs" class="erinnerung wichtig"> Mein sechster Eintrag </p> </body> </html> Styles.css #eintrag-eins, #eintrag-drei { color: red; background-color: grey; }.erinnerung { background-color: grey; }.wichtig { background-color: red; } #eintrag-drei { background-color: lightblue; } p { color: green; } #eintrag-fuenf { color: blue; } 9

9 WBT 08: Gestaltung des Seitenlayouts I Lessons learned: Block- und Inline-Elemente: Block-Elemente z. B. <p>, <li> oder <div> umfassen einen bestimmten Bereich der Web Seite und erzeugen vor und nach sich einen Zeilenumbruch. Block-Elemente sind rechteckige Boxen deren Höhe, Breite, Rahmen und Abstand festgelegt werden kann. Inline-Elemente - z. B. <span> erzeugen keinen Zeilenumbruch und können nicht bzgl. ihrer Größe, Abstands o. ä. formatiert werden. 10

10 WBT 08: Gestaltung des Seitenlayouts I Lessons learned: Box-Modell: 11

11 WBT 08: Gestaltung des Seitenlayouts I Lessons learned: Größenangaben in CSS: Pixel (px): z. B. : margin-top: 50px; Prozent (%): z. B. : padding-bottom: 2%; Em: z. B. : border: 2em; 12

12 WBT 08: einfache Übung Erstellen Sie drei <div>-container mit beliebigen Text befüllt und vergeben Sie die IDs eins, zwei, drei. Geben Sie jedem <div>-container verschiedene Hintergrundfarben. Eins soll die Höhe in Pixel erhalten, zwei eine Höhe und Breite in em und drei eine Breite in Prozent. 13

13 WBT 08: fortgeschrittene Übung Sie wollen einen Blog über die verschiedenen Veranstaltungen, die Sie an der Uni besuchen, schreiben. Dazu wollen Sie auf der Startseite Ihres Blogs eine Navigation zu den Veranstaltungen in Form von Buttons erstellen. Um Buttons zu erstellen, benötigen Sie Ihr Wissen zu dem Box-Modell. IT-Systeme Makro II Marketing Risikomanagement Statistik 14

WBT 08: fortgeschrittene Übung 1. Erstellen Sie fünf <div>-container mit der Hintergrundfarbe Ihrer Wahl und einem Rahmen (border). 2. Jede Box soll 150px breit sein. 3.

14 WBT 08: fortgeschrittene Übung 1. Erstellen Sie fünf <div>-container mit der Hintergrundfarbe Ihrer Wahl und einem Rahmen (border). 2. Jede Box soll 150px breit sein. 3. Füge der Box in der Mitte eine Grafik inkl. Größenangaben (80px x 80px) hinzu. 4. Füge der Box ein Textelement <p> hinzu. 5. Positioniere die Inhalte in der Box möglichst mittig (z. B.: padding: 30px 0px 30px 60px) 6. Der Abstand (margin) zwischen den Boxen soll 40px groß sein. IT-Systeme 15

15 WBT 09: Gestaltung des Seitenlayouts II Lessons learned: Zentrierung: CSS-Deklaration: margin:auto; Positionierung: CSS-Deklaration: float: (z. B. left, right); Diese Eigenschaft bewirkt, dass Block-Elemente nicht mehr den normalen Elementfluss, der durch HTML vorgegeben ist (also untereinander), folgen, sondern nebeneinander positioniert werden können. CSS-Deklaration: clear: (z. B. left, right, both); Hier wird der Elementfluss, der durch float vorgegeben ist beendet. Werden z. B. zwei<div>-container mit der Deklaration: float:left; versehen, stehen diese nebeneinander. Ein dritter <div>-container soll unter den beiden positioniert werden, dort wird dann clear:left; eingesetzt. 16

16 WBT 09: Gestaltung des Seitenlayouts II Lessons learned: Positionierung: CSS-Deklaration: position: (z. B. relative, fixed, absolute); top: 20px; } Relativ: position: relativ; hier werden die Elemente ausgehend von der statischen Position verschoben Absolut: position: absolut; Elemente werden aus dem statischen Elementfluss entfernt und an einer festen Stelle positioniert Fix: position: fixed; Elemente werden zum Browserfenster positioniert, und bleiben fix stehen, auch wenn die Seite gescrollt wird. 17

17 WBT 09: Übung Sie wollen einen Blog über die verschiedenen Veranstaltungen, die Sie an der Uni besuchen, schreiben. Dazu wollen Sie auf der Startseite Ihres Blogs eine Navigation zu den Veranstaltungen in Form von Buttons erstellen. Um die Buttons anzuordnen, benötigen Sie Ihr Wissen zur Positionierung von Elementen. IT-Systeme Makro II Marketing Risikomanagement Statistik 18

18 WBT 09: Übung 1. Zunächst sollen die <div>-container nebeneinander angeordnet werden (float-left). 2. Die Buttons sollen zu den einzelnen Blog-Artikeln zu der jeweiligen Lehrveranstaltung weiterleiten: Dazu kann man einfach um jeden <div> Container einen <a>-tag legen (href=" "). 3. Nun stehen die fünf Elemente nebeneinander. Wir wollen aber, dass die oberen drei nebeneinander und die anderen beiden darunter angeordnet sind. Hier gibt es mehrere Lösungswege. 1. Im HTML-Quelltext werden nach dem dritten Element mehrere Absätze (<br/>) gesetzt. (Oder <br style="clear: both" />) 2. Um alle Buttons wird ein großer Div-Container (ID=breite) gesetzt, mit einer Höhe von 100% und der gewünschten Breite (Breite einer Box: width:150px + padding-left:60px + margin-right: 40px = 250px Breite von drei Boxen: 250px * 3 = 750px) Färben Sie den Div-Container farblich ein, um zu sehen was passiert. 4. Nun zentrieren Sie zuletzt den allumfassenden div-container zum Browser Fenster (margin:auto) 19

19 WBT 09: Übung Optionale Zusatzübung: 1. Die fünf Buttons sollen nun innerhalb des Divs zentriert werden. 1. Das float:left muss entfernt werden. 2. Der Inhalt des Div-Container breite soll zentriert dargestellt werden (Text-align: center) 3. Die einzelnen Boxen sollen als Inline-Elemente behandelt werden (display: inline-block) 4. Der Inhalt der Boxen soll linksbündig stehen (text-align: left;) (optional) 20

Ähnliche Dokumente

3. Briefing zur Übung IT-Systeme

3. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 30.11.2016, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde:, 12.00