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

• p

• div

• span

• ul

• ol

• li

• dl, dt & dd

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

• ...

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="http://www.youtube.com/v/OPo3KLZ4SpM&hl=de_DE&fs=1&hd=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/OPo3KLZ4SpM&hl=de_DE&fs=1&hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>

HTML5

• sectionBeschreibt einen Bereich. Statt <div id=“content“></div> dann <section id=“content“></section>

• asideBeschreibt einen untergeordneten Bereich. Auf Webseiten häufig Sidebars

• headerBeschreibt den Kopfbereich einer Seite / eines Bereichs

• footer Beschreibt den Fußbereich einer Seite / eines Bereichs

• navNavigationsbereich

Nachtrag von letzter Woche: colspan / rowspan

• W3C: colspan und rowspan sind zugelassene Attributehttp://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<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" media="screen"> @import(css.css);</style>

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" media="screen"> @import(css.css);</style>

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 / SchriftartSchriftfamilie: z.B. serif or sans-serifSchriftart: Muss auf dem Rechner des Besuchers (!) installiert sein. Mehrere Angaben möglich (s.u.)

• font-size:Schriftgrößez.B. px, em, %,....

• font-style: Schriftstilitalic, oblique, normal

• font-variant: Kapitälchen small-caps, normal

Schriftbild

• font-weight: Schriftgewichtnormal, bold, bolder, lighter, 100 - 900

• fontfont-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 AngabenAbkü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 relativbezogen auf die Schriftgröße des Elements. Ausnahme: Bei font-size bezieht sie sich auf

die Schriftgröße des Elternelements.

ex relativBezieht 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 12pxbody{ font-size:75%;}

• Kleiner IE-Hackhtml>body{ font-size:12px;}

• Zeilenhöhe auf 1,5fache Schriftgröße setzenp{ line-height: 1.5em;}

Schriftgröße & Zeilenhöhe

• Schriftgröße 12pxbody{ font-size:75%;}

• Kleiner IE-Hackhtml>body{ font-size:12px;}

• Zeilenhöhe auf 1,5fache Schriftgröße setzenp{ line-height: 1.5em;}

Standardschriftgröße in allen Browsern: 16px

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.

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

• Alternativ:h2{ font-size:1.1667em; line-height: 1.286em; margin: 1.929em 0 0.643em;}

Welche Schriftgröße ist das?

Fragen?

Innen- und Außenabstand

• Innenabstand: padding

padding-top, padding-right, padding-bottom, padding-left

padding: Xpx // Innenabstand von Xpx zu jeder Seitepadding: 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-colorRahmenfarbe

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

• border-widthRahmenbreite thin, medium, thick,...

• border-bottomRahmen unten

• border-bottom-color Rahmenfarbe unten

• border-bottom-styleRahmenart unten

• border-bottom-widthRahmenbreite unten

• border-left, border-top und border-right analog

border

• borderborder-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-attachmentHintergrund fixieren: fixed, scroll

• background-imageHintergrundbild: url(‘PFAD/ZUM/BILD‘), none

• background-positionHintergrundbild positionieren: left, right, center, top, bottom, center1. Wert: horizontale Position | 2. Wert: vertikale Position

• background-repeatHintergrund 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

• absoluteAbsolute 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.

• relativeRelative 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.

• staticPositionierung im Textfluss. Die Angaben left, top, right, bottom sind unwirksam.

Fragen?

best practice: Programmierkino

Fragen?

Vielen Dank für Eure Aufmerksamkeit!