HTML & CSS. Beispiele aus der Praxis

Transkript

1 HTML & CSS Beispiele aus der Praxis

2 Übungsblatt 2

3

4 Fragen?

5 Wiederholung

6

7 Beispiele von.../~ugotit/test/index.htm zu.../~ugotit/test2/html/index.htm Absoluter Pfad relativ zur Basis /test2/html/index.htm Relativer Pfad../test2/html/index.htm

8 Nützliche HTML-Elemente h1 - h6 li p dl, dt & dd div span table, caption, thead, tfoot, tbody, tr, th, td... ul ol

9 object SVG in eigene Seite einbetten: <object> <object data="mein.svg" type="image/svg+xml" width="280" height="280">sie benötigen einen SVG-Viewer</object> YouTube (Flash) Video (gibt es bei vielen Videos unter <Einbetten> ) <object width="560" height="340"><param name="movie" value=" param><param name="allowfullscreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src=" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>

10 HTML5 section Beschreibt einen Bereich. Statt <div id= content ></div> dann <section id= content ></section> aside Beschreibt einen untergeordneten Bereich. Auf Webseiten häufig Sidebars header Beschreibt den Kopfbereich einer Seite / eines Bereichs footer Beschreibt den Fußbereich einer Seite / eines Bereichs nav Navigationsbereich

11 Nachtrag von letzter Woche: colspan / rowspan W3C: colspan und rowspan sind zugelassene Attribute Bei mir wurde eine Beispielseite auch fehlerfrei validiert ( ).

12 Einbindung von Stylesheets Einbindung direkt im HTML <p style= color:red; >...</p> Einbindung über <link>-element <link rel="stylesheet" href="css.css" type="text/css" media="screen" /> Einbindung innerhalb einer HTML Datei <style type="text/css" media="screen"> /* Anweisungen*/ </style> Einbindung innerhalb einer HTML Datei und import einer externen CSS Datei <style type="text/css" </style>

13 Einbindung von Stylesheets Einbindung direkt im HTML <p style= color:red; >...</p> Einbindung über <link>-element <link rel="stylesheet" href="css.css" type="text/css" media="screen" /> Einbindung innerhalb einer HTML Datei <style type="text/css" media="screen"> /* Anweisungen*/ </style> Einbindung innerhalb einer HTML Datei und import einer externen CSS Datei <style type="text/css" </style>

14 Selektor weist einem HTML-Element Layoutanweisungen zu selektor{ eigenschaft:wert; eigenschaft: wert wert; } /* Kommentar */

15 Fragen?

16 Themen heute CSS Praxis Basisstylesheet Praxisbeispiele

17 CSS

18 best practice Jeder Browser nutzt einen Browserstylesheet um HTML zu formatieren. Problem: Wir müssen einige Formatierungen überschreiben. Diese sind in jedem Browser anders Lösung: CSS Reset Diesen Stylesheet vor dem eigenen Stylesheet einbinden.

19 Schriftbild font-family: Schriftfamilie / Schriftart Schriftfamilie: z.b. serif or sans-serif Schriftart: Muss auf dem Rechner des Besuchers (!) installiert sein. Mehrere Angaben möglich (s.u.) font-size:schriftgröße z.b. px, em, %,... font-style: Schriftstil italic, oblique, normal font-variant: Kapitälchen small-caps, normal

20 Schriftbild font-weight: Schriftgewicht normal, bold, bolder, lighter, font font-style, font-variant, font-weight, font-size/line-height, font-family p.test{ font: normal normal lighter 12px/14px Verdana, Arial, sans-serif }

21 Schriften (Web Core Fonts) 1996 bis 2002: Core fonts for the Web (Microsoft) Zehn Schriften die kostenlos verfügbar und auf jedem Windows- und Mac-System installiert sind.

22 Schriften (Windows XP)

23 Schriften (Vista)

24

25 Schriften (Open Source)

26 Schriftgröße - Schlüsselwerte xx-small = winzig x-small = sehr klein small = klein medium = mittel large = groß x-large = sehr groß xx-large = riesig

27 Schriftgröße - Schlüsselwerte xx-small = winzig x-small = sehr klein small = klein medium = mittel Ist die Verwendung sinnvoll? large = groß x-large = sehr groß xx-large = riesig

28 Maßeinheiten - Numerische Angaben Abkürzung Angabetyp Bedeutung pt absolut Punkt: 1 Punkt = 1/72 Inches pc absolut Pica (-Punkt): 1 Pica = 12 Punkt in absolut Inch: 1 Inch = 2.54cm mm absolut Millimeter cm absolut Zentimeter px absolut / relativ Pixel em ex relativ relativ bezogen auf die Schriftgröße des Elements. Ausnahme: Bei font-size bezieht sie sich auf die Schriftgröße des Elternelements. Bezieht sich, analog zu em, auf die Größe des Kleinbuchstaben x % relativ Prozent: Bezieht sich auf Element

29 Fragen?

30 best practice: Compose to a Vertical Rhythm

31 Schriftgröße & Zeilenhöhe Schriftgröße 12px body{ font-size:75%; } Kleiner IE-Hack html>body{ font-size:12px; } Zeilenhöhe auf 1,5fache Schriftgröße setzen p{ line-height: 1.5em; }

32 Schriftgröße & Zeilenhöhe Schriftgröße 12px body{ font-size:75%; } Standardschriftgröße in allen Browsern: 16px Kleiner IE-Hack html>body{ font-size:12px; } Zeilenhöhe auf 1,5fache Schriftgröße setzen p{ line-height: 1.5em; }

33 Zeilenabstand p{ font-size: 1em; line-height: 1.5em; margin: 1.5em 0; // oben + unten 1.5em } Abstand zwischen Absätzen beträgt genau eine Zeilenhöhe (1,5fache Schriftgröße) Nun ist auch rein optisch der Unterschied zwischen <p>...</p> und <br /><br /> sichtbar.

34 Schriftbild weiter verschönen Beispiel h2: h2{ font-size:1.1667em; line-height: 1.286em; margin: 1.286em 0; } Alternativ: h2{ font-size:1.1667em; line-height: 1.286em; margin: 1.929em em; }

35 Schriftbild weiter verschönen Beispiel h2: h2{ font-size:1.1667em; line-height: 1.286em; margin: 1.286em 0; } Welche Schriftgröße ist das? Alternativ: h2{ font-size:1.1667em; line-height: 1.286em; margin: 1.929em em; }

36 Fragen?

37 Innen- und Außenabstand Innenabstand: padding padding-top, padding-right, padding-bottom, padding-left padding: Xpx // Innenabstand von Xpx zu jeder Seite padding: Xpx Ypx // Innenabstand oben und unten Xpx. Innenabstand links und rechts Ypx padding: Xpx Ypx Zpx // oben: Xpx, links, rechts: Ypx, unten: Zpx padding: Wpx Xpx Ypx Zpx //oben: W, rechts: X, unten: Y, links: Z Außenabstand: margin (margin-top,... analog zu padding)

38 margin

39 border border-color Rahmenfarbe border-bottom Rahmen unten border-style Rahmenart: none, dotted, dashed, solid, double, groove, ridge, inset, outset, Inherit border-width Rahmenbreitethin, medium, thick,... border-bottom-color Rahmenfarbe unten border-bottom-style Rahmenart unten border-bottom-width Rahmenbreite unten border-left, border-top und borderright analog

40 border border border-width border-style border-color div#box{ border:1px solid #000; // 1px solider schwarzer Rahmen }

41 Box-Modell (normale Browser)

42 Box-Modell (Internet Explorer)

43 best practice Mehrere div-container nutzen: Der äußere bekommt die Eigenschaften für width, float und margin Der innere bekommt padding und border Hängt hier immer vom gewünschten Ergebnis an. Trotzdem gilt grundsätzlich: so wenige Elemente nutzen wie möglich

44 Fragen?

45 Hintergrund background-attachment Hintergrund fixieren: fixed, scroll background-image Hintergrundbild: url( PFAD/ZUM/BILD ), none background-position Hintergrundbild positionieren: left, right, center, top, bottom, center 1. Wert: horizontale Position 2. Wert: vertikale Position background-repeat Hintergrund wiederholen: no-repeat, repeat, repeat-x, repeat-y

46 Hintergrund background: background-color, background-image, background-attachment, background-position, background-repeat body{ background:transparent url( bg.gif ) fixed center center no-repeat }

47 Elemente positionieren float position s. auch:

48 float Positioniert ein Element links (left) oder rechts (right) und lässt die folgenden Elemente um das mit float positionierte Element fliessen Dieser Effekt lässt sich mit clear (left, right & both) aufheben

49 position absolute Absolute Positionierung durch die Angaben left, top, right, bottom. Absolut positionierte Elemente sind außerhalb des normalen Textfluß, sie liegen über den anderen Elementen und beeinflussen somit nicht ihr Layout. Die absolute Position wird relativ zu den Rändern des Eltern-Elements berechnet, wenn dieses ebenfalls positioniert ist, oder wenn es der Seiteninhalt (<body>) ist. Da sich der Seiteninhalt scrollen lässt, werden absolut positionierte Elemente mitgescrollt. relative Relative Positionierung vom normalem Fluß. Die normale Position ist wie bei static im normalem Textfluß. Die Positionierungsangaben left, top, right, bottom verschieben das Element aus dieser Position. Die nachfolgenden Elemente verhalten sich so, als wäre das Element nicht verschoben

50 position fixed (kann der IE erst ab Version 7) Wie absolute, jedoch bleibt das Element beim Scrollen stehen und die Positionierung orientiert sich am Viewport (dem sichtbaren Browserfenster) und nicht am übergeordneten Element. static Positionierung im Textfluss. Die Angaben left, top, right, bottom sind unwirksam.

51 Fragen?

52 best practice: Programmierkino

53 Fragen?

54 Vielen Dank für Eure Aufmerksamkeit!