HTML & CSS

Beispiele aus der Praxis

Übungsblatt 2

http://www.uni-koblenz.de/~ugotit

Fragen?

Wiederholung

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

Nützliche HTML-Elemente • h1 - h6

• li

•p

• dl, dt & dd

• div

• table, caption, thead, tfoot, tbody, tr, th, td

• span • ... • ul • ol

object • SVG in eigene Seite einbetten:

Sie benötigen einen SVG-Viewer • YouTube (Flash) Video (gibt es bei vielen Videos unter „“)

HTML5 • section Beschreibt einen Bereich. Statt dann • 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

Nachtrag von letzter Woche: colspan / rowspan • W3C: colspan und rowspan sind zugelassene Attribute http://www.w3.org/TR/html5/tabular-data.html#attr-tdth-colspan • Bei mir wurde eine Beispielseite auch fehlerfrei validiert (10.05.2010).

Einbindung von Stylesheets • Einbindung direkt im HTML ... • Einbindung über -Element • Einbindung innerhalb einer HTML Datei /* Anweisungen*/ • Einbindung innerhalb einer HTML Datei und import einer externen CSS Datei @import(css.css);

Einbindung von Stylesheets • Einbindung direkt im HTML ... • Einbindung über -Element • Einbindung innerhalb einer HTML Datei /* Anweisungen*/ • Einbindung innerhalb einer HTML Datei und import einer externen CSS Datei @import(css.css);

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

Fragen?

Themen heute • CSS • Praxis • Basisstylesheet • Praxisbeispiele

CSS

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 • http://meyerweb.com/eric/tools/css/reset/ • http://html5doctor.com/html-5-reset-stylesheet/ • Diesen Stylesheet vor dem eigenen Stylesheet einbinden.

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

Schriftbild • font-weight: Schriftgewicht normal, bold, bolder, lighter, 100 - 900 • 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 }

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.

Schriften (Windows XP)

Schriften (Vista)

Schriften (Open Source)

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

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

Ist die Verwendung sinnvoll?

Maßeinheiten - Numerische Angaben Abkürzung

Angabetyp

Bedeutung

pt pc in mm cm px

absolut absolut absolut absolut absolut absolut / relativ

em

relativ

ex

relativ

Punkt: 1 Punkt = 1/72 Inches Pica (-Punkt): 1 Pica = 12 Punkt Inch: 1 Inch = 2.54cm Millimeter Zentimeter Pixel 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

Fragen?

best practice: Compose to a Vertical Rhythm

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; }

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; }

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 ... und

sichtbar.

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 0 0.643em; }

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 0 0.643em; }

Fragen?

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)

margin

border • border-color Rahmenfarbe

• border-bottom Rahmen unten

• border-style Rahmenart: none, dotted, dashed, solid, double, groove, ridge, inset, outset, Inherit

• border-bottom-color Rahmenfarbe unten

• border-width Rahmenbreite thin, medium, thick,...

• border-bottom-style Rahmenart unten • border-bottom-width Rahmenbreite unten • border-left, border-top und borderright analog

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

Box-Modell (normale Browser)

Box-Modell (Internet Explorer)

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

Fragen?

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

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

Elemente positionieren • float • position • s. auch: http://www.css4you.de/posproperty.html

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

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 () 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

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.

Fragen?

best practice: Programmierkino

Fragen?

Vielen Dank für Eure Aufmerksamkeit!