Quelle: http://dev.opera.com/articles/view/29-text-styling-with-css/
von (Author:) Ben Henick
Schriften im CSS (Eigenschaften)
Ein Designer hat im Internet eine geringere Kontrolle über die Typographie einer Webseite als beim traditionellen Printdesign. Doch auch hier ist es wichtig, auf die verschiedenen Eigenschaften von Schriften einzugehen, besonders um eine gute Leserlichkeit bereitzustellen. Es gibt im CSS verschiedene Möglichkeiten, um die Typografie einer Seite zu verändern.
Font-Size:
Am häufigsten wird in einem Text die Schriftgröße geraucht. Im CSS wird diese mithilfe von der Eigenschaft „font-size“ definiert.
Beispiel:
body {font-size: 14px;}
Die Standard Schriftgröße eines Browsers beträgt 16 pixel. Die am häufigsten genutzten Einheiten der Schrfitgröße sind: pixels (px), ems (em), Prozent (%) und Punkt (pt). Der unterschied der verschiedenen Einheiten ist, dass es relatvie und absolute Schrifteinheiten sind.
Absolute Größen (px, pt) werden in Layouts verwendet, in denen die Relation zur Dokumentenfläche nicht ändert - auch fixe, statische oder „Ice“ Layouts.
Relative Größen (em, %) sollten in nicht statischen Layouts verwendet werden.
Üblicherweise entspricht em der Höhe eines großen „M“ in der angegeben Schrift. Im CSS entspricht jedoch em der Höhe einer Zeile, also einem Element in der Schriftgröße von 14px:
1em = 100% = 14px = 10.5pt
Will man nun die Schriftgröße vergrößern oder verkleinern, multipliziert man einfach den Wert dazu: 1.143em = 114.3% ≈ 16px = 12pt
Schlagwörter:
Es können auch Schlagwörter von xx-small bis zu xx-large verwendet werden, um die Größe zu definieren.
Font-Family:
Nach der Größenwahl kann nun die Schriftart definiert werden, dabei sollten gewisse Regeln beachtet werden:
Schriftarten müssen genauso benannt sein wie in der Schriftenbibliothek.
Alle Schriftarten müssen durch ein Komma getrennt werden
Besteht eine Schriftart aus mehr Wörtern, muss diese von Anführungszeichen umschlossen sein.
Bei mehreren Schriftarten sollte der Favorit immer als erster genannt werden.
Details bearbeiten:
font-style: die Schrift wird italic, ohne das „i“ Element zu verwenden; Werte: italic, oblique und normal.
font-variant: der Text wird in Kapitälchen dargestellt; Werte: small-caps und normal
font-weight: kann die Stärke bzw. Dicke einer Schrift definiert werden
Schriften Kürzel
Die Text Eigenschaften können auch mit einem einzigen Kürzel im CSS definiert werden:
h1 { font: italic normal bold x-large/1.167em Helvetica,Arial,sans-serif; }
Es sollte jedoch immer eine bestimmte Reihenfolge eingehalten werden: font-style, font-variant, font-weight, font-size und font-family
Weitere CSS Definitionen
• text-align: die Laufrichtung eines Textes wird definiert: links, rechts, mittig und bündig.
• etter-spacing und word-spacing: der Weißraum zwischen Buchstaben und Wörtern kann verändert werden
• text-indent: Einzug von Paragraphen; die Werte werden gleich wie bei der Schriftgröße angegeben.
• text-transform: hier kann die Groß- bzw. Kleinschreibung definiert werden
• text-decoration: erzeugt einen Strich über, unter oder durch den Text
• line-height: der Weißraum zwischen den Zeilen kann verändert werden - Zeilenabstand
Zusammengefasst von Philipp Fauser
Montag, 31. Januar 2011
Montag, 13. Dezember 2010
The CSS layout model - boxes, borders, margins, padding
The CSS layout model - boxes, borders, margins, padding
Quelle: http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/
von (Author:) Ben Henick
margin:
Margin steht für eine Vergrößerung der Umrandung eines Kastens. Der Kasten an sich bleibt normal, lediglich wird eine äußere Hülle angebracht.
Meist werden diese Angaben in px oder in em angegeben. Auch Prozentangaben sind möglich, wobei man beachten muss, dass diese sich auf das
Elternelement beziehen. Mit auto stellt man die Internetseite beispielsweise in die Mitte, mit minus - Angaben hat man z.B die Möglichkeit 2 verschiedene
Kasten überlappen zu lassen.
padding:
Padding ist das genaue Gegenteil zu margin. Padding bietet die Möglichkeit dem Kasten eine innere Hülle zu verpassen.
Jedoch sind Werte wie auto und minus nicht möglich. Inline-Elemente können padding haben.
border:
Für den Rand des Kastens steht border. Man kann die Ränder individuell gestalten (border-left, border-right, border-top, border-bottom) oder insgesamt.
Das Styling der Ränder sollte jedoch wohl überlegt sein. Auch die Farbe, Strichstärke, Strichart und Abstände können angegeben werden.
width & height:
Mit Width und height kann man keine inline Elemente (span, em, strong) beeinflussen.
Bilder hingegen kann man, trotz dass diese ein inline-Element sind, ein width und height verpassen.
Dennoch bieten width und height eine große Möglichkeit die Homepage zu verändern.
Mit width, height, min-width, max-width, min-height und max-height kann man jeweils Größenangaben machen.
Durch max- und min-width/height hat man damit sehr starken Einfluss auf das Layout.
Verändert man die Breite mit max-width zum Beispiel auf 100px, dann besteht die Möglichkeit, dass bei viel Text die Homepage eine viel größere Höhe bekommt.
Zusätzlich ist wichtig zu wissen, dass man man auch auf den Inhalt Einfluss nehmen kann, wenn dieser mehr Platz braucht als überhaupt vorhanden ist.
Bei dem sogenannten "overflow" kann man mit 4 verschiedenen Eigenschaften den Inhalt anpassen:
visible - der Inhalt kann überlaufen, somit stößt er auf andere Elemente.
hidden - Inhalt der überlappt verschwindet.
auto - funktioniert wie bei hidden, lediglich wird eine Scrollbar hinzugefügt, damit der restliche Inhalt erkennbar ist.
scroll - es werden horizontale und vertikale Scrollbars verwendet, jedoch ist das nicht von nöten.
float:
Mit float kann man Eigenschaften einstellen wie sich nachfolgende Inhalte um ein Element sich anordnen.
Dabei sind folgende Werte wichtig, float: left/right/none.
Neben float gibt es noch das display Element. Hier sind inline und block Elemente gefragt. Erhält ein Element den display tag dann werden sich die inline Elemente wie ein block Element verhalten bzw umgekehrt.
Mit clean hat man die Möglichkeit Eigenschaften einzustellen, wie ein Element um die anliegenden Elemente sich verhalten soll.
Zusammengefasst von Philipp Fauser
Quelle: http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/
von (Author:) Ben Henick
margin:
Margin steht für eine Vergrößerung der Umrandung eines Kastens. Der Kasten an sich bleibt normal, lediglich wird eine äußere Hülle angebracht.
Meist werden diese Angaben in px oder in em angegeben. Auch Prozentangaben sind möglich, wobei man beachten muss, dass diese sich auf das
Elternelement beziehen. Mit auto stellt man die Internetseite beispielsweise in die Mitte, mit minus - Angaben hat man z.B die Möglichkeit 2 verschiedene
Kasten überlappen zu lassen.
padding:
Padding ist das genaue Gegenteil zu margin. Padding bietet die Möglichkeit dem Kasten eine innere Hülle zu verpassen.
Jedoch sind Werte wie auto und minus nicht möglich. Inline-Elemente können padding haben.
border:
Für den Rand des Kastens steht border. Man kann die Ränder individuell gestalten (border-left, border-right, border-top, border-bottom) oder insgesamt.
Das Styling der Ränder sollte jedoch wohl überlegt sein. Auch die Farbe, Strichstärke, Strichart und Abstände können angegeben werden.
width & height:
Mit Width und height kann man keine inline Elemente (span, em, strong) beeinflussen.
Bilder hingegen kann man, trotz dass diese ein inline-Element sind, ein width und height verpassen.
Dennoch bieten width und height eine große Möglichkeit die Homepage zu verändern.
Mit width, height, min-width, max-width, min-height und max-height kann man jeweils Größenangaben machen.
Durch max- und min-width/height hat man damit sehr starken Einfluss auf das Layout.
Verändert man die Breite mit max-width zum Beispiel auf 100px, dann besteht die Möglichkeit, dass bei viel Text die Homepage eine viel größere Höhe bekommt.
Zusätzlich ist wichtig zu wissen, dass man man auch auf den Inhalt Einfluss nehmen kann, wenn dieser mehr Platz braucht als überhaupt vorhanden ist.
Bei dem sogenannten "overflow" kann man mit 4 verschiedenen Eigenschaften den Inhalt anpassen:
visible - der Inhalt kann überlaufen, somit stößt er auf andere Elemente.
hidden - Inhalt der überlappt verschwindet.
auto - funktioniert wie bei hidden, lediglich wird eine Scrollbar hinzugefügt, damit der restliche Inhalt erkennbar ist.
scroll - es werden horizontale und vertikale Scrollbars verwendet, jedoch ist das nicht von nöten.
float:
Mit float kann man Eigenschaften einstellen wie sich nachfolgende Inhalte um ein Element sich anordnen.
Dabei sind folgende Werte wichtig, float: left/right/none.
Neben float gibt es noch das display Element. Hier sind inline und block Elemente gefragt. Erhält ein Element den display tag dann werden sich die inline Elemente wie ein block Element verhalten bzw umgekehrt.
Mit clean hat man die Möglichkeit Eigenschaften einzustellen, wie ein Element um die anliegenden Elemente sich verhalten soll.
Zusammengefasst von Philipp Fauser
Inheritance and Cascade
Inheritance and Cascade
Quelle: http://dev.opera.com/articles/view/28-inheritance-and-cascade/
von (Author:) Tommy Olsson
Vererbung:
Bei der Vererbung von CSS spricht man von Elementen die von ihren Eltern an ihre Kinder weitergegeben werden.
Nicht alle Eigenschaften können jedoch vererben - wie z.B. margin.
Sinnvoll ist dennoch die Vererbung von CSS Eigenschaften.
Gäbe es keine Vererbung müsste man bei jedem einzelnen Element die Eigenschaften hinzufügen.
Man kann für html oder im body also Eigenschaften definieren, die wiederum von allen Elementen übernommen werden.
Will man jedoch spezifisch auf einzelne Elemente eingehen und nicht die gleiche Hintergrundfarbe wie im html benutzen,
schreibt man die gleiche Eigenschaft mit der anderen Farbe in das gewünschte Element.
Das einzelne Element überschreibt dann für seinen Bereich die Angabe aus dem html.
inherit:
Mit inherit kann man Veerbungen erzwingen.
Schreibt man bei einem Element inherit dazu, so übernimmt er alle Eigenschaften die schon vorgegeben sind.
Man sollte jedoch wissen, dass der Microsoft Internet Explorer diese Eigenschaften nicht aufnehmen kann.
CSS:
Es gibt eine bestimmte Reihenfolge bei CSS, nach der man gehen sollte, wenn man Ordnung an den Tag legen will. So treten letztendlich keine widersprüchlichen Erklärungen im CSS auf. Die Reihenfolge für die Ordnung wäre:
- Wichtigkeit
- Spezifikation
- Quellenordnung
Wichtigkeit:
Die Wichtigkeit wird in CSS bei gleichen Angaben nach der Reihenfolge entschieden.
Die nachfolgenden Einstellungen überschreiben die späteren.
1. User Agent Style Sheets - Vom Browser vorgegebenes/vordefiniertes Stylesheet
2. User Style Sehest - Vom Benutzer festgelegt - Menschen mit Behinderung können die Schrift auf ihre eigene Vorstellung anpassen.
3. Author Style Sehet - Vom Programmierer der Website geschrieben.
4. Normal Declaration - Gegenteil dazu ist das Important Declaration welches mit dem "!important" - Attribut gekennzeichnet wird.
Gewichtung:
Sollten mehrere Eigenschaften von einem Element nicht die selbe Bedeutung beinhalten, jedoch alle die gleiche Gewichtung haben, so wird die Eigenschaft benutzt, welche die korrekteste bzw. spezifischste Zuweisung hat.
Grundordnung:
Trifft ein Objekt zwei gleiche Einstellungen + gleicher Gewichtung, so entscheidet die Reihenfolge der Situation im CSS.
Auch hier überschreiben spätere Einstellungen die obigen.
Zusammengefasst von Philipp Fauser
Quelle: http://dev.opera.com/articles/view/28-inheritance-and-cascade/
von (Author:) Tommy Olsson
Vererbung:
Bei der Vererbung von CSS spricht man von Elementen die von ihren Eltern an ihre Kinder weitergegeben werden.
Nicht alle Eigenschaften können jedoch vererben - wie z.B. margin.
Sinnvoll ist dennoch die Vererbung von CSS Eigenschaften.
Gäbe es keine Vererbung müsste man bei jedem einzelnen Element die Eigenschaften hinzufügen.
Man kann für html oder im body also Eigenschaften definieren, die wiederum von allen Elementen übernommen werden.
Will man jedoch spezifisch auf einzelne Elemente eingehen und nicht die gleiche Hintergrundfarbe wie im html benutzen,
schreibt man die gleiche Eigenschaft mit der anderen Farbe in das gewünschte Element.
Das einzelne Element überschreibt dann für seinen Bereich die Angabe aus dem html.
inherit:
Mit inherit kann man Veerbungen erzwingen.
Schreibt man bei einem Element inherit dazu, so übernimmt er alle Eigenschaften die schon vorgegeben sind.
Man sollte jedoch wissen, dass der Microsoft Internet Explorer diese Eigenschaften nicht aufnehmen kann.
CSS:
Es gibt eine bestimmte Reihenfolge bei CSS, nach der man gehen sollte, wenn man Ordnung an den Tag legen will. So treten letztendlich keine widersprüchlichen Erklärungen im CSS auf. Die Reihenfolge für die Ordnung wäre:
- Wichtigkeit
- Spezifikation
- Quellenordnung
Wichtigkeit:
Die Wichtigkeit wird in CSS bei gleichen Angaben nach der Reihenfolge entschieden.
Die nachfolgenden Einstellungen überschreiben die späteren.
1. User Agent Style Sheets - Vom Browser vorgegebenes/vordefiniertes Stylesheet
2. User Style Sehest - Vom Benutzer festgelegt - Menschen mit Behinderung können die Schrift auf ihre eigene Vorstellung anpassen.
3. Author Style Sehet - Vom Programmierer der Website geschrieben.
4. Normal Declaration - Gegenteil dazu ist das Important Declaration welches mit dem "!important" - Attribut gekennzeichnet wird.
Gewichtung:
Sollten mehrere Eigenschaften von einem Element nicht die selbe Bedeutung beinhalten, jedoch alle die gleiche Gewichtung haben, so wird die Eigenschaft benutzt, welche die korrekteste bzw. spezifischste Zuweisung hat.
Grundordnung:
Trifft ein Objekt zwei gleiche Einstellungen + gleicher Gewichtung, so entscheidet die Reihenfolge der Situation im CSS.
Auch hier überschreiben spätere Einstellungen die obigen.
Zusammengefasst von Philipp Fauser
HTML forms - the basics
HTML forms - the basics
Quelle: http://dev.opera.com/articles/view/20-html-forms-the-basics/
von (Author:) Jenifer Hanen
Einführung:
Jeder kennt sie, jeder hat sie schon einmal benutzt, aber wer hat schon mal ein Formular programmiert ?
Ein Formular ist ein Textfeld in dem man einen Text oder eine Nummer eintragen kann. Es gibt auch Checkboxes, Radio Buttons oder Drop-Down-Menüs als Formular.
Basic Code:
Ein Formular besteht aus dem form Attribut. Diese können nicht ineinander geschachtelt werden. Damit der Verwender eines Formulars sein Feedback abgeben kann benutzt man input Felder. Die Eingabefelder müssen jeweils mit dem type-Attribut definiert werden. Hier unterscheidet man zwischen text, button, checkbox, file, hidden, image, password, radio, reset oder submit.
- Das input tag sollte nun mit einem Namen versehen werden, welcher vom Programmierer ausgedacht sein sollte. Bestenfalls sollte der Name gleichzeitig auch die Funktion des Feldes beinhalten. In einer Datenbank (mySQL/php) kann man dies dann abspeichern. Vordefinierte values wie reset oder submit sind Ausnahmen.
- Ebenfalls sollte das input tag mit einem value-Attribut ausgestattet sein. Sollte das value Attribut leergelassen sein, gibt das dem Besucher die Erlaubnis in das Textfeld hineinzuschreiben. Bei der type-Eigenschaft kann man beim Valse eingeben, was das Formular als erstes angekreuzt/ausgewählt haben soll. ein Submit-Button erzeugt man mit dem "submit" Wert.
- das textarea-Attribut kann bei einem Formular mehrzeilige Texteingabefelder erzeugen. (Mit cols und rows kann man die Zeilen/Spalten bearbeiten)
Hinzufügen von Struktur und Verhalten:
Damit die Daten korrekt versendet werden können gibt's es verschiedene Varianten.
- Methode: definiert wo die Daten an das Script versendet werden soll. Man unterscheidet hier zwischen GET & POST. Wobei GET nicht zu empfehlen ist, diese Variante zu verwenden, da jeder Informationen sehen kann. Mit POST schickt man die Dateien an eine E-Mail Adresse des Verwalters der Homepage. Für 100% Sicherheit, damit Daten nicht an die Öffentlichkeit kommen sollte man ein https Protokoll verwenden.
- Mit "Action" definiert man den Weg zu welchem script file die Daten aus dem Formular transportiert werden sollen.
Style, Semantik und Struktur
Es gibt folgende Stylingmöglichkeiten:
- fieldset ermöglicht ein semantisch korrektes Formular aufzubereiten. Für mehrere Textfelder ist dies sehr praktisch.
- legend gibt dem fieldset einen Namen
Zusammengefasst von Philipp Fauser
Quelle: http://dev.opera.com/articles/view/20-html-forms-the-basics/
von (Author:) Jenifer Hanen
Einführung:
Jeder kennt sie, jeder hat sie schon einmal benutzt, aber wer hat schon mal ein Formular programmiert ?
Ein Formular ist ein Textfeld in dem man einen Text oder eine Nummer eintragen kann. Es gibt auch Checkboxes, Radio Buttons oder Drop-Down-Menüs als Formular.
Basic Code:
Ein Formular besteht aus dem form Attribut. Diese können nicht ineinander geschachtelt werden. Damit der Verwender eines Formulars sein Feedback abgeben kann benutzt man input Felder. Die Eingabefelder müssen jeweils mit dem type-Attribut definiert werden. Hier unterscheidet man zwischen text, button, checkbox, file, hidden, image, password, radio, reset oder submit.
- Das input tag sollte nun mit einem Namen versehen werden, welcher vom Programmierer ausgedacht sein sollte. Bestenfalls sollte der Name gleichzeitig auch die Funktion des Feldes beinhalten. In einer Datenbank (mySQL/php) kann man dies dann abspeichern. Vordefinierte values wie reset oder submit sind Ausnahmen.
- Ebenfalls sollte das input tag mit einem value-Attribut ausgestattet sein. Sollte das value Attribut leergelassen sein, gibt das dem Besucher die Erlaubnis in das Textfeld hineinzuschreiben. Bei der type-Eigenschaft kann man beim Valse eingeben, was das Formular als erstes angekreuzt/ausgewählt haben soll. ein Submit-Button erzeugt man mit dem "submit" Wert.
- das textarea-Attribut kann bei einem Formular mehrzeilige Texteingabefelder erzeugen. (Mit cols und rows kann man die Zeilen/Spalten bearbeiten)
Hinzufügen von Struktur und Verhalten:
Damit die Daten korrekt versendet werden können gibt's es verschiedene Varianten.
- Methode: definiert wo die Daten an das Script versendet werden soll. Man unterscheidet hier zwischen GET & POST. Wobei GET nicht zu empfehlen ist, diese Variante zu verwenden, da jeder Informationen sehen kann. Mit POST schickt man die Dateien an eine E-Mail Adresse des Verwalters der Homepage. Für 100% Sicherheit, damit Daten nicht an die Öffentlichkeit kommen sollte man ein https Protokoll verwenden.
- Mit "Action" definiert man den Weg zu welchem script file die Daten aus dem Formular transportiert werden sollen.
Style, Semantik und Struktur
Es gibt folgende Stylingmöglichkeiten:
- fieldset ermöglicht ein semantisch korrektes Formular aufzubereiten. Für mehrere Textfelder ist dies sehr praktisch.
- legend gibt dem fieldset einen Namen
Zusammengefasst von Philipp Fauser
Freitag, 26. November 2010
HTML tables
HTML Tabellen
http://dev.opera.com/articles/view/19-html-tables/
von (Author:) Jenifer Hanen
Einführung
Als es damals noch kein CSS gab, wurden Tabellen dazu benutzt Designs zu erstellen.
Dabei wurden sie teilweise irrsinnig groß und Änderungen auf der Internetseite stellten sich als äußerst schwierig dar.
Die typische Tabelle
Die Tabelle ist wie folgt gegliedert:
- Das table tag gibt dem Browser an, dass der Inhalt als Tabelle angezeigt werden soll.
- tr tags (table-rows) sagen dem Browser, dass der Inhalt horizontal angeordnet werden soll.
- td tags steht für den Inhalt. Zellen sollten nur so viele angegeben werden, wie notwendig.
- Wichtig ist darauf zu achten, dass leere Zellen nicht einfach durch td /td dargestellt wird…
Zusätzliches hinzufügen von Eigenschaften:
- caption tag bietet der Tabelle eine Überschrift an, die den Inhalt beschreibt. Wichtig ist die Formatierung in CSS, sonst wird der Inhalt mittig und in gleicher Breite wie die Tabelle dargestellt.
- th tag sollte man als Inhaltsübersicht einstellen, da es produktiv für die Semantik des HTML Dokumentes ist, somit können Screenreader und Suchmaschinen sich besser zu recht finden. Auch Vorteilhaft ist die bessere Darstellung des Browsers.
Unterstützung der Struktur
Um bessere Strukturen im Dokument zu schaffen gibt es zusätzlich noch folgende tags:
- thead, tbody und tfoot definieren von der Tabelle den Kopf, "Körper"/Inhalt und den Boden. Würde man diese tags bei kürzeren Tabellen verwenden wäre dies der "Overkill". Für komplexere Tabellen ist dies jedoch durchaus sinnvoll, genauere Strukturen zu definieren.
- Das colspan und rowspan-Attribut für erlauben Zellen mehr Platz einzunehmen. Zum Beispiel eine Schlusszeile am Ende der Tabelle mit colspan, die alle vier Spalten in Anspruch nimmt. Mit rowspan kann man dies umkehren und mehrere Zeilen zusammenfügen.
- Das summary Attribut wird verwendet um den Inhalt der Tabelle so zu definieren, dass Screenreader dem Blinden eine Gesamtübersicht zu liefern. Ob man dieses Attribut benutzt werden soll oder nicht steht in den Sternen. Es ist nicht festgelegt ob es zum neueren Web-Standart dazugehört, jedoch macht es nichts kaputt und ist sehr produktiv für Screenreader.
- Das scope Attribut teilt den Screenreadern mit, dass es sich einerseits um eine Zeile (row) und anderseits um eine Spalte (column) handelt. Ohne diese Angaben wäre es sonst für Blinde unmöglich zu verstehen welche Eigenschaften mit welchen Punkten verbunden sind, da sie sich nicht auf visuelle Einflüsse verlassen können.
Tabelle in CSS verschönern
Um die Tabellen zu verschönern gibt es folgende Tipps:
- Der Tabelle eine Breite mit Prozenten angeben, damit sich die Seite bei einer Skalierung des Browsers anpasst.
- Farbabstufungen bzw. verschiedene Farben sorgen für optisch leichtere Verständnis des Inhalts.
- Ohne CSS würde "caption" über der Tabelle zu sehen sein. Setzt man einen Hintergrund und ein border drüber ergibt sich aus dem CSS, was HTML schon verspricht, eine korrekte semantische Verbundenheit.
Zusammengefasst von Philipp Fauser
http://dev.opera.com/articles/view/19-html-tables/
von (Author:) Jenifer Hanen
Einführung
Als es damals noch kein CSS gab, wurden Tabellen dazu benutzt Designs zu erstellen.
Dabei wurden sie teilweise irrsinnig groß und Änderungen auf der Internetseite stellten sich als äußerst schwierig dar.
Die typische Tabelle
Die Tabelle ist wie folgt gegliedert:
- Das table tag gibt dem Browser an, dass der Inhalt als Tabelle angezeigt werden soll.
- tr tags (table-rows) sagen dem Browser, dass der Inhalt horizontal angeordnet werden soll.
- td tags steht für den Inhalt. Zellen sollten nur so viele angegeben werden, wie notwendig.
- Wichtig ist darauf zu achten, dass leere Zellen nicht einfach durch td /td dargestellt wird…
Zusätzliches hinzufügen von Eigenschaften:
- caption tag bietet der Tabelle eine Überschrift an, die den Inhalt beschreibt. Wichtig ist die Formatierung in CSS, sonst wird der Inhalt mittig und in gleicher Breite wie die Tabelle dargestellt.
- th tag sollte man als Inhaltsübersicht einstellen, da es produktiv für die Semantik des HTML Dokumentes ist, somit können Screenreader und Suchmaschinen sich besser zu recht finden. Auch Vorteilhaft ist die bessere Darstellung des Browsers.
Unterstützung der Struktur
Um bessere Strukturen im Dokument zu schaffen gibt es zusätzlich noch folgende tags:
- thead, tbody und tfoot definieren von der Tabelle den Kopf, "Körper"/Inhalt und den Boden. Würde man diese tags bei kürzeren Tabellen verwenden wäre dies der "Overkill". Für komplexere Tabellen ist dies jedoch durchaus sinnvoll, genauere Strukturen zu definieren.
- Das colspan und rowspan-Attribut für
- Das summary Attribut wird verwendet um den Inhalt der Tabelle so zu definieren, dass Screenreader dem Blinden eine Gesamtübersicht zu liefern. Ob man dieses Attribut benutzt werden soll oder nicht steht in den Sternen. Es ist nicht festgelegt ob es zum neueren Web-Standart dazugehört, jedoch macht es nichts kaputt und ist sehr produktiv für Screenreader.
- Das scope Attribut teilt den Screenreadern mit, dass es sich einerseits um eine Zeile (row) und anderseits um eine Spalte (column) handelt. Ohne diese Angaben wäre es sonst für Blinde unmöglich zu verstehen welche Eigenschaften mit welchen Punkten verbunden sind, da sie sich nicht auf visuelle Einflüsse verlassen können.
Tabelle in CSS verschönern
Um die Tabellen zu verschönern gibt es folgende Tipps:
- Der Tabelle eine Breite mit Prozenten angeben, damit sich die Seite bei einer Skalierung des Browsers anpasst.
- Farbabstufungen bzw. verschiedene Farben sorgen für optisch leichtere Verständnis des Inhalts.
- Ohne CSS würde "caption" über der Tabelle zu sehen sein. Setzt man einen Hintergrund und ein border drüber ergibt sich aus dem CSS, was HTML schon verspricht, eine korrekte semantische Verbundenheit.
Zusammengefasst von Philipp Fauser
Images in HTML
Bilder in HTML
Quelle: http://dev.opera.com/articles/view/17-images-in-html/
von (Author:) Christian Heilmann
Ein Bild sagt mehr als tausend Wörter - sicher ?
Es ist sehr verlockend viele Bilder auf einer Internetseite zu verwenden.
Bilder sind ein toller Weg die Laune des Besuchers anzuheben und Illustrationen sind ein schöner Weg komplexe Informationen in einem einfachen Weg dem Betrachter beizubringen.
Der Nachteil an Bildern ist, nicht jeder der im Internet surft, kann sie sehen.
Früher haben Besucher teilweise die Bilder nicht anzeigen lassen um an Traffic zu sparen und schneller die Inhalte der Website zu sehen, da das Internet früher wesentlich teurer war und man für jede Minute im Internet zahlen musste.
Nur weil dies nicht mehr alltäglich heutzutage ist - sind wir noch lange nicht über den Berg - reine Spekulation:
- Handys wo Benutzer Bilder abstellen, wegen der kleinen Bildschirme und der großen Kosten
- Blinde - die eh keine Bilder sehen können
- Kulturen die eigene Icons eh nicht verstehen können
- Suchmaschinen sind nur im Stande Inhalte der Texte wiederzugeben, nicht der der Bilder
Unterschiedliche Arten von Bildern im Internet - Inhalt und Hintergrundbilder
Es gibt zwei Grundwege um Bilder im Dokument einzubauen: Es gibt das img-tag für inhaltliche Bilder und mit Hilfe von CSS kann man Hintergrundbilder einbauen. Was man tun will ist abhängig von:
1. Wenn das Bild wichtiger Bestandteil des Inhalts der Website ist, zum Beispiel ein Foto des Autors oder ein Diagramm, sollte ein img-tag eingefügt werden, mit inhaltlicher Kennzeichnung.
2. Wenn das Bild aus "Stylegründen" benutzt wird, sollte man es in CSS als Hintergrundbild eintragen. (In CSS hat man mehr Möglichkeiten mit Bildern zu arbeiten als in HTML)
Das img-tag und seine Attribute
Es ist sehr einfach Bilder, mit dem img-tag, in HTML Dokumente einzubinden.
Als Beispiel: img src="meinbild.jpg"
Ein Text mit dem alt-tag unterstützen
Wenn ein Bild nicht angezeigt werden kann - benutzt man das alt Attribut um dem Bild Text zuzuweisen. Somit können Screenreaders (Programme für Blinde) auch lesen was im alt-tag steht. Wichtig ist dabei zu achten, dass das was man kurz gefasst sagen möchte, auch im alt-tag steht.
Beispiel: img src="bild.jpg" alt="Beschreibung des Bildes"
Möchte man weiteren Inhalt hinzufügen, sollte man das title Attribut verwenden.
Wichtige zusätzliche Informationen über das title Attribut
Wenn man in den meisten Browsern über das Bild fährt, wird das title Attribut als Tooltip angezeigt. Dies hilft Besuchern mehr über die Bilder zu lernen, jedoch kann man nicht von jedem Besucher verlangen, dass er eine Maus besitzt. Das title Attribut kann sehr nutzvoll sein, aber es ist kein sicherer Weg wichtige Information zu vermitteln. Man sollte jedoch keine wichtigen Informationen vorenthalten.
Beispiel: img src="Bild.jpg" alt="Wichtige Beschreibung des Bildes" title="Kommentar zum Bild"
Alternative um komplexe Bilder zu unterstützen mithilfe von longdesc
Benutzt man zum Beispiel die Grafik einer Statistik, kann man mit dem longdesc-tag auf eine anderes Dokument verlinken, wo die gleiche Grafik jedoch als Text aufgelistet wird.
Beispiel: img src="Grafik.jpg" alt=" Beschreibung des Bildes" longdesc="Statistik.html"
Schnellere Darstellung des Bildes durch Definition der Größe
Wenn der Browser weiß, dass ein Bild geladen werden muss, fängt er dennoch erst an den Rest der Seite an zu laden, bevor er die genaue Größe des Bildes kennt. Dies verwirrt jedoch den Browser so, dass er beim Laden des Bildes die Texte anfängt rum zu schieben, damit das Bild platz findet.
Somit ist es sehr praktisch, dem Bild eine Größe zuzuweisen.
Beispiel: img src="Bild.jpg" alt="Beschreibung des Bildes" width="400" height="150"
Mit diesem Beispiel erkennt der Browser eine Fläche und stellt diesen beim Laden erst als Platzhalter dar, dann als Bild.
Hintergrundbilder in CSS
Es ist ziemlich einfach zu sagen, dass Webdesign durch CSS viel mehr Spaß macht. Anstatt in HTML mit Tabellen usw. rumzuhantieren kann man nun mit padding, margin und vielen weiteren Einstellungen das HTML übersichtlich schreiben und in CSS das richtige gestalten anfangen.
Anlegen von Hintergrundbildern in CSS
Mit background-image: Bild.jpg gibt man das Hintergrundbild an (jpg/gif/usw.).
Es ist dennoch zu empfehlen eine Hintergrundfarbe background-color:#eee anzugeben, sollte das Hintergrundbild nicht geladen werden können, ist im Notfall dennoch etwas zu sehen)
Der Hintergrund wird standartgemäß vertikal und horizontal fortlaufend eingefügt.
Um dies zu verhindern benutzt man folgende tags:
Keine Wiederholung des Bildes: background-repeat:no-repeat;
Keine horizontal Wiederholung: background-repeat:repeat-x;
Keine vertikale Wiederholung: background-repeat:repeat-y;
background-position:"siehe unten";
- "top", "center", "bottom" fur vertikale Ausrichtung
- "left", "center", "right" fur horizontale Ausrichtung
Wichtig zu Wissen ist auch, dass man bei horizontalen und vertikalen Ausrichtungen Eigenschaften hinzufügen kann, Beispiel: background-position:center-right; )
Zusammengefasst von Philipp Fauser
Quelle: http://dev.opera.com/articles/view/17-images-in-html/
von (Author:) Christian Heilmann
Ein Bild sagt mehr als tausend Wörter - sicher ?
Es ist sehr verlockend viele Bilder auf einer Internetseite zu verwenden.
Bilder sind ein toller Weg die Laune des Besuchers anzuheben und Illustrationen sind ein schöner Weg komplexe Informationen in einem einfachen Weg dem Betrachter beizubringen.
Der Nachteil an Bildern ist, nicht jeder der im Internet surft, kann sie sehen.
Früher haben Besucher teilweise die Bilder nicht anzeigen lassen um an Traffic zu sparen und schneller die Inhalte der Website zu sehen, da das Internet früher wesentlich teurer war und man für jede Minute im Internet zahlen musste.
Nur weil dies nicht mehr alltäglich heutzutage ist - sind wir noch lange nicht über den Berg - reine Spekulation:
- Handys wo Benutzer Bilder abstellen, wegen der kleinen Bildschirme und der großen Kosten
- Blinde - die eh keine Bilder sehen können
- Kulturen die eigene Icons eh nicht verstehen können
- Suchmaschinen sind nur im Stande Inhalte der Texte wiederzugeben, nicht der der Bilder
Unterschiedliche Arten von Bildern im Internet - Inhalt und Hintergrundbilder
Es gibt zwei Grundwege um Bilder im Dokument einzubauen: Es gibt das img-tag für inhaltliche Bilder und mit Hilfe von CSS kann man Hintergrundbilder einbauen. Was man tun will ist abhängig von:
1. Wenn das Bild wichtiger Bestandteil des Inhalts der Website ist, zum Beispiel ein Foto des Autors oder ein Diagramm, sollte ein img-tag eingefügt werden, mit inhaltlicher Kennzeichnung.
2. Wenn das Bild aus "Stylegründen" benutzt wird, sollte man es in CSS als Hintergrundbild eintragen. (In CSS hat man mehr Möglichkeiten mit Bildern zu arbeiten als in HTML)
Das img-tag und seine Attribute
Es ist sehr einfach Bilder, mit dem img-tag, in HTML Dokumente einzubinden.
Als Beispiel: img src="meinbild.jpg"
Ein Text mit dem alt-tag unterstützen
Wenn ein Bild nicht angezeigt werden kann - benutzt man das alt Attribut um dem Bild Text zuzuweisen. Somit können Screenreaders (Programme für Blinde) auch lesen was im alt-tag steht. Wichtig ist dabei zu achten, dass das was man kurz gefasst sagen möchte, auch im alt-tag steht.
Beispiel: img src="bild.jpg" alt="Beschreibung des Bildes"
Möchte man weiteren Inhalt hinzufügen, sollte man das title Attribut verwenden.
Wichtige zusätzliche Informationen über das title Attribut
Wenn man in den meisten Browsern über das Bild fährt, wird das title Attribut als Tooltip angezeigt. Dies hilft Besuchern mehr über die Bilder zu lernen, jedoch kann man nicht von jedem Besucher verlangen, dass er eine Maus besitzt. Das title Attribut kann sehr nutzvoll sein, aber es ist kein sicherer Weg wichtige Information zu vermitteln. Man sollte jedoch keine wichtigen Informationen vorenthalten.
Beispiel: img src="Bild.jpg" alt="Wichtige Beschreibung des Bildes" title="Kommentar zum Bild"
Alternative um komplexe Bilder zu unterstützen mithilfe von longdesc
Benutzt man zum Beispiel die Grafik einer Statistik, kann man mit dem longdesc-tag auf eine anderes Dokument verlinken, wo die gleiche Grafik jedoch als Text aufgelistet wird.
Beispiel: img src="Grafik.jpg" alt=" Beschreibung des Bildes" longdesc="Statistik.html"
Schnellere Darstellung des Bildes durch Definition der Größe
Wenn der Browser weiß, dass ein Bild geladen werden muss, fängt er dennoch erst an den Rest der Seite an zu laden, bevor er die genaue Größe des Bildes kennt. Dies verwirrt jedoch den Browser so, dass er beim Laden des Bildes die Texte anfängt rum zu schieben, damit das Bild platz findet.
Somit ist es sehr praktisch, dem Bild eine Größe zuzuweisen.
Beispiel: img src="Bild.jpg" alt="Beschreibung des Bildes" width="400" height="150"
Mit diesem Beispiel erkennt der Browser eine Fläche und stellt diesen beim Laden erst als Platzhalter dar, dann als Bild.
Hintergrundbilder in CSS
Es ist ziemlich einfach zu sagen, dass Webdesign durch CSS viel mehr Spaß macht. Anstatt in HTML mit Tabellen usw. rumzuhantieren kann man nun mit padding, margin und vielen weiteren Einstellungen das HTML übersichtlich schreiben und in CSS das richtige gestalten anfangen.
Anlegen von Hintergrundbildern in CSS
Mit background-image: Bild.jpg gibt man das Hintergrundbild an (jpg/gif/usw.).
Es ist dennoch zu empfehlen eine Hintergrundfarbe background-color:#eee anzugeben, sollte das Hintergrundbild nicht geladen werden können, ist im Notfall dennoch etwas zu sehen)
Der Hintergrund wird standartgemäß vertikal und horizontal fortlaufend eingefügt.
Um dies zu verhindern benutzt man folgende tags:
Keine Wiederholung des Bildes: background-repeat:no-repeat;
Keine horizontal Wiederholung: background-repeat:repeat-x;
Keine vertikale Wiederholung: background-repeat:repeat-y;
background-position:"siehe unten";
- "top", "center", "bottom" fur vertikale Ausrichtung
- "left", "center", "right" fur horizontale Ausrichtung
Wichtig zu Wissen ist auch, dass man bei horizontalen und vertikalen Ausrichtungen Eigenschaften hinzufügen kann, Beispiel: background-position:center-right; )
Zusammengefasst von Philipp Fauser
HTML Lists
HTML Listen
Quelle: http://dev.opera.com/articles/view/16-html-lists/
von (Author:) Ben Buchanan
Einführung
Um Inhalte zu gruppieren benutzt man sogenannte Listen im HTML. Sie bieten nicht nur eine gute Struktur sondern werden auch für die Navigation verwendet. Sehr praktisch daran ist das Styling der einzelnen Attribute via CSS.
Die 3 verschiedenen Listen:
Ungeordnete Listen (unordered list):
Bei den ungeordneten Listen ist die Reihenfolge der einzelnen Punkte egal. Beim Einkaufen wäre die Reihenfolge des Einkaufs auch uninteressant.
Beispiel:
ul
li Brot /li
li Milch /li
li usw. /li
/ul
Geordnete Listen (ordered list):
Bei geordneten Listen ist die Reihenfolge wichtig und darf somit nicht vertauscht werden, da diese nummeriert werden.
Eine andere Reihenfolge beim Kochen könnte sich dadurch verheerend äußern.
Sie funktionieren wie die ungeordnete Listen, lediglich der tag besteht aus "ol" und nicht aus "ul".
Eine weitere Eigenschaft der geordneten Liste ist, dass man später starten kann, zum Beispiel bei 4. Dies schreibt man so: ol start="4"
Definitionsliste (definition list):
Die Definitionsliste stellt Namen/Werte, wie Wörter mit einer Beschreibung oder Zeiten und Daten von Events, dar.
Zum Beispiel kann man mehrere Definitionslisten ("dt") zu einer Beschreibung ("dd") hinzufügen, jedoch muss man beachten, dass je ein Element pro Definition vorhanden ist - damit kein Wert alleine steht.
dl
dt Beispiel /dt
dd Beispiel /dd
….
Welche Liste ?
Um sich bei der Entscheidung der verschiedenen Listen zu helfen, kann man sich einfach die zwei folgenden Fragen stellen:
1. Habe ich eine Definition ?, wenn ja > definition list
2. Brauche ich eine Reihenfolge ?, wenn ja > ordered list
Sollte man keines der beiden benutzen gibt es die unordered list
Der Unterschied zwischen HTML Listen und Text
Der Vorteil einer geordneten Liste ist, dass sie die Nummerierung der einzelnen Punkte automatisch macht. Diese kann man auch in CSS stylen und wird auch semantisch strukturiert. Letztendendes sieht sie dadurch nicht nur gut aus, sondern hilft auch den Such- und Blindenlesemaschinen.
Listen einnisten
Innerhalb einer Liste kann man auch sehr einfach andere Listen verschachteln, diese Art von Liste wird dann als nesting list beschrieben.
Sie wird oft bei Inhaltsangaben und Internetseiten-Navigationen verwendet, da sie die Seite besser strukturiert.
Beispiel:
ul
li Beispiel
ul
li Beispiel /li
/ul
/li
Zusammengefasst von Philipp Fauser
Quelle: http://dev.opera.com/articles/view/16-html-lists/
von (Author:) Ben Buchanan
Einführung
Um Inhalte zu gruppieren benutzt man sogenannte Listen im HTML. Sie bieten nicht nur eine gute Struktur sondern werden auch für die Navigation verwendet. Sehr praktisch daran ist das Styling der einzelnen Attribute via CSS.
Die 3 verschiedenen Listen:
Ungeordnete Listen (unordered list):
Bei den ungeordneten Listen ist die Reihenfolge der einzelnen Punkte egal. Beim Einkaufen wäre die Reihenfolge des Einkaufs auch uninteressant.
Beispiel:
ul
li Brot /li
li Milch /li
li usw. /li
/ul
Geordnete Listen (ordered list):
Bei geordneten Listen ist die Reihenfolge wichtig und darf somit nicht vertauscht werden, da diese nummeriert werden.
Eine andere Reihenfolge beim Kochen könnte sich dadurch verheerend äußern.
Sie funktionieren wie die ungeordnete Listen, lediglich der tag besteht aus "ol" und nicht aus "ul".
Eine weitere Eigenschaft der geordneten Liste ist, dass man später starten kann, zum Beispiel bei 4. Dies schreibt man so: ol start="4"
Definitionsliste (definition list):
Die Definitionsliste stellt Namen/Werte, wie Wörter mit einer Beschreibung oder Zeiten und Daten von Events, dar.
Zum Beispiel kann man mehrere Definitionslisten ("dt") zu einer Beschreibung ("dd") hinzufügen, jedoch muss man beachten, dass je ein Element pro Definition vorhanden ist - damit kein Wert alleine steht.
dl
dt Beispiel /dt
dd Beispiel /dd
….
Welche Liste ?
Um sich bei der Entscheidung der verschiedenen Listen zu helfen, kann man sich einfach die zwei folgenden Fragen stellen:
1. Habe ich eine Definition ?, wenn ja > definition list
2. Brauche ich eine Reihenfolge ?, wenn ja > ordered list
Sollte man keines der beiden benutzen gibt es die unordered list
Der Unterschied zwischen HTML Listen und Text
Der Vorteil einer geordneten Liste ist, dass sie die Nummerierung der einzelnen Punkte automatisch macht. Diese kann man auch in CSS stylen und wird auch semantisch strukturiert. Letztendendes sieht sie dadurch nicht nur gut aus, sondern hilft auch den Such- und Blindenlesemaschinen.
Listen einnisten
Innerhalb einer Liste kann man auch sehr einfach andere Listen verschachteln, diese Art von Liste wird dann als nesting list beschrieben.
Sie wird oft bei Inhaltsangaben und Internetseiten-Navigationen verwendet, da sie die Seite besser strukturiert.
Beispiel:
ul
li Beispiel
ul
li Beispiel /li
/ul
/li
Zusammengefasst von Philipp Fauser
Abonnieren
Posts (Atom)