29: Text styling with CSS


Zusammengefasst nach dem Artikel von Ben Henick

Quelle: http://dev.opera.com/articles/view/29-text-styling-with-css/
29: Text styling with CSS



Schriften Eigenschaften im CSS

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

30: The CSS layout model - boxes, borders, margins, padding


Zusammengefasst nach dem Artikel von Ben Henick

Quelle: http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/
30: The CSS layout model - boxes, borders, margins, padding

Weißraum um ein Objekt setzen: margin

Margin:
Margin kann für oben, rechts, unten und links entweder jeweils einzeln oder für alle zusammen eingestellt werden. Die Werte dazu werden meistens in px oder em angegeben. Bei Prozentangaben muss beachtet werden, dass sich der Wert auf das Elternelement bezieht und nicht auf die Breite des gesamten Dokumentes.
Das auto margin kann dazu verwendet werden, dass definierte Element automatisch in der Mitte des Dokumentes zu zentrieren.
Es können auch negative margins vergeben werden. Wenn einem Element dann ein hoher negativ margin gegeben wird, kann es auch schon mal zu einer Überlappung von zwei Elementen kommen.
Bei angrenzenden Block - Elementen mit einem margin von größer als null, wird nur der größere der zwei margins angewandt. Listen und Überschriften sind keine Block - Elemente und somit wird der kleinere margin nicht in den anderen verschwinden.

Ränder:
Es gibt auch bei Ränder einen Kürzel, bei dem dann alle relevanten Einstellungen vorgenommen werden können. Dabei können bis zu 4 verschiedenen Einstellungen vorgenommen werden. Dies ist aber nur sinnvoll, wenn um das Objekt ein konsistenter Rahmen gezogen werden will. Mit den Ränder Einstellungen kann die dicke, die Strichart, Farbe und die Abstände definiert werden. Natürlich kann auch für jede einzelne Seite der Rand individuell gestaltet werden (border-bottom, border-top, border-right, border-left).

padding:
Das padding erzeugt einen Abstand zwischen dem margin oder Umrandung eines Elements und dessen Inhalt.


Arbeiten mit den Elementen „width“ und „height“
 
Um in einem CSS file die Ausmaße eines Elementes zu beeinflussen, werden width, height, min-widht, max-width, min-height und max-height verwendet. Jedoch gibt es ein paar Dinge zu beachten:
width und height können nicht bei inline Elementen (span, strong, em) angewandt werden.
bei Bildern kann jedoch eine width oder height angegeben werden, auch wenn es ein inline Element ist
widht und height sind nur zwei Möglichkeiten um die Ausmaße eines Elementes zu beeinflussen

Manchmal ist es auch wichtig, die Ausmaße eines Elementes einzuschränken, um damit zum Beispiel die Leserlichkeit einer Textspalte zu gewährleisten. Hierfür werden bei width oder height die min- und max- Werte davor gehängt.

Wenn nun widht und height festgelegt worden sind, ist es auch manchmal nötig zu überlegen, was mit einem Inhalt passiert, der mehr Platz braucht als vorhanden. Mit der overflow Eigenschaft mit seinen vier Werten - visible, hidden, auto und scroll hand, wird das gehandhabt.
visible: beeinflusst der zu lange Inhalt nicht den Fluss oder margin der angrenzenden Elemente.
hidden: alle Inhalte oberhalb des Elementes werden verborgen.
atuo: der Überfluss des Elements wird wie beim hidden gehandhabt, nur dass ein Scrollbar erzeugt wird.
scroll: vertikale wie auch horizontale Scrollbars werden hinzugefügt, auch wenn sie nicht gebraucht werden.
Wenn nun die width und height Werte verändert werden, muss man beachten, dass der Inhalt des Elementes, plus seinem margin, padding und Umrandung, noch immer in die definierte Breite hineinpasst.


Arbeiten mit dem Dokumenten flow
 
Bei einer Gestaltung einer mehrspaltigen Webseite sind die Begriffe: display, float und clear sehr wichtig. Bei der display Eigenschaft spielen vor allem inline und block Elemente eine wichtige Rolle. Wenn ein Element nun die display Eigenschaft erhält, werden sich inline Elemente wie block Elemente verhalten oder umgekehrt.
Die float Eigenschaft definiert, wie anschließende Inhalte eines Elementes um diesen herumfließen soll. Dabei können die Werte float: left, float: right oder float: none eingestellt werden.
Wie auch beim float werden bei der clear Eigenschaft die Werte left, right oder none hinzugefügt. Diese Eigenschaft definiert jedoch, wie ein Element um all seine Nachbarn fließen soll. 

28: Inheritance and Cascade

Zusammengefasst nach dem Artikel von Tommy Olsson
http://dev.opera.com/articles/view/28-inheritance-and-cascade/
28: Inheritance and Cascade


Vererbung
 
Mit Vererbung im CSS wird gemeint, dass bestimmte Eigenschaften von einem Eltern Element an sein Kinder weitervererbt wird. Jedoch sind nicht alle CSS Eigenschaften vererbbar, da es bei diesen keinen Sinn machen würde, wie zum Beispiel beim margin.


Warum Vererbung sinnvoll ist
 
Die Vererbung ist sehr hilfreich beim stylen eines HTML Dokumentes mithilfe des CSS. Würde es diese Funktion nämlich nicht geben, müssten Eigenschaften wie font-family, font-size und Textfarbe für jedes einzelne Element definiert werden.
Mit der Vererbung ist es dann möglich, zum Beispiel für html oder body die Text Eigenschaften zu definieren und diese Definitionen werden dann von allen anderen Elementen übernommen. Dies kann dann auch bei bestimmten Containern angewandt werden, welche dann ihre Eigenschaften auf alle Elemente innerhalb dieses Containers übertragen.


Wie Vererbung funktioniert
 
Jedes Element innerhalb eines HTML Dokumentes bekommt die Eigenschaften des Eltern Elements vererbt, ausgenommen vom html, da es kein Eltern Element hat.
Jedoch muss beachtet werden, dass vererbte Eigenschaften überschrieben werden können. Wenn zum Beispiel im html font-size: 16px; angegeben ist aber im body nur 14px; wird das letztere das vorherige überschrieben. Daraus kann man sich merken, dass das untere Element alle gleichen Eigenschaften vom oberen überschreibt. Es zählt immer das, was als letztes angegeben wurde.


Vererbung erzwingen
 
Vererbung kann auch erzwungen werden, wenn bei einer Eigenschaft „inherit“ dazugestellt wird:
Beispiel:
p {
  background: inherit;
}
Bei diesem Beispiel werden alle Paragraphen die Hintergrund Eigenschaften vom Eltern Element übernehmen.

Das erzwingen einer Vererbung sollte aber mit bedacht verwendet werden, da Microsoft Internet Explorer diese Eigenschaft nicht unterstützt.


Der Wasserfall
 
Schon aus dem Namen CSS - Cascading Style Sheet kommt heraus, dass der Wasserfall ein wichtiges Konzept ist. Damit wird der Mechanismus gemeint, welcher das Endergebnis kontrolliert, wenn mehrere, widersprüchliche CSS Erklärungen für dasselbe Element verwendet werden. Es gibt drei Konzepte, welche die Ordnung von CSS Erklärungen kontrollieren:

• Wichtigkeit
• Spezifität
• Grundordnung
• Wichtigkeit

Wichtigkeit:Die Wichtigkeit einer CSS Erklärung hängt davon ab, wo sie festgelegt wurde. Die widersprüchlichen Erklärungen werden in dieser Ordnung angewandt:

• User agent style sheets
• Normal declarations in user style sheets
• Normal declarations in author style sheets
• Important declarations in author style sheets
• Important declarations in user style sheets

User agent style sheet: ist der bereits existierende style sheet des Browsers. Jeder Browser hat automatisch Definitionen, wie verschiedene HTML Elemente angezeigt werden sollen, wenn keine anderen Eigenschaften vom Benutzer oder Designer angegeben werden.

User style sheet: ist der vom Benutzer definierte style sheet. Nicht alle Browser unterstützen user style sheets, aber sie können vor allem für Personen mit bestimmten Einschränkungen von Vorteil sein.

Author style sheet: ist der vom Autor der Seite erstellte style sheet, oder des Webdesigners.

Normal declarations: sind genau das, was der Begriff sagt, normale Erklärungen. Der Gegensatz dazu sind important declarations, welche Erklärungen sind, die von einem !important Anweisung gefolgt sind. Important declarations übertrumpfen alle anderen style sheets.

Grundsätzlich ist aber zu sagen, dass ein Designer nicht zu viel über die Wichtigkeit von Style Sheets nachdenken sollte. Es ist nicht möglich zu wissen, ob ein Benutzer ein user style sheet definiert hat, welches das CSS vom Designer überschreibt.

Spezifität:
Wenn mehrere Eigenschaften eines Elementes nicht übereinstimmen, und jede hat die gleiche Wichtigkeit, dann wird die Eigenschaft gewinnen, welche die beste spezifische Zuweisung hat. Eine Zuweisung mit geringer Spezifität trifft auf mehrere Elemente zu, wie *, eine hohe nur auf ein Element der Seite, wie id oder nav.

Grundordnung:
Wenn nun zwei Erklärungen auf ein Element zutreffen und beide die gleiche Wichtigkeit und Spezifität hat, dann entscheidet die Grundordnung. Die Erklärung, welche später im style sheet aufkommt, gewinnt.
Wenn nur mit einem externen style sheet gearbeitet wird, dann wird bei einem Konflikt die untere Erklärung die obere überschreiben. Wenn ein Konflikt bei mehreren style sheets entsteht, entscheidet die Ordnung, wie diese mit dem html verlinkt wurde. Auch hier wird wieder der untere style sheet den oberen überschreiben.

20: HTML forms - the basics

Zusammengefasst nach dem Artikel von Jenifer Hanen
Quelle: http://dev.opera.com/articles/view/20-html-forms-the-basics/
20: HTML forms - the basics


Mit einem Formular im Internet ist ein Feld gemeint, in der man Informationen auf einer Webseite hineinschreiben kann. Entweder gibt man in ein Textfeld einen Text oder Nummern ein, markiert eine Checkbox, füllt einen Radio Button oder wählt etwas von einem Drop - Down Menü aus. Das ausgefüllte Formular wird dann mithilfe des Absenden - Buttons an die Webseite verschickt.


Der elementare Code

Das Formular fängt immer mit dem <form> Tag an, hört mit dem </form> Tag auf und dazwischen sind die restlichen Formularfelder. Die grundlegendsten Felder eines Formulars sind welche, in dem der User sein Feedback geben kann. Dazu braucht man einfach nur zwei <input> felder für die Daten des Users (Name, E-Mail) und eine <textarea> für das Kommentar.

Beispiel:
<form>
Name: <input type=“text“ name=“name“ id=“name“ value=““ />
Email: <input type=“text“ name=“email“ id=“email“ value=““ />
Comments: <textarea name=“comments“ id=“comments“ cols=“25“ rows=“3“></textarea>
<input type=“submit“ value=“submit“ />
</form>

Mit <input> definiert man einfach das Feld, in dem die Informationen hineingeschrieben werden können. Jeder <input> Tag muss eine „type“ Eigenschaft besitzen, um festzulegen, was hier erhalten wird: text, button,  checkbox, file, hidden, image, password, radio, reset or submit. Des weiteren muss braucht jeder <input> Tag einen Namen, der vom Programmierer entschieden wird. Am besten sollte es immer nach der Funktion des Feldes benannt werden, bsp.: name=“name“ or name=“email“. Des weiteren braucht jedes <input> Tag ein „value“ Eigenschaft. Wenn value auf blank gestellt wird - value=“„ - wird dem bearbeiteten Script gesagr, alles einzufügen, was der Besucher in das Feld hineinschreibt. Bei den anderen „type“ Eigenschaften kann beim value das eingegeben werden, was beim Formular als erstes angekreuzt, ausgewählt ect. sein soll.

Es gibt auch noch eine spezielle Art von <input> Elementen, nämlich die mit dem value=“submit“ Eigenschaft. Anstelle eines einzeiligen Textfeldes wird hier ein Button generiert. Beim value wird das eingegeben, was den Button definiert, Beispiel: value=“yes“ für yes, value=“submit“ für einen Senden Button, value=“reset“ für einen Rückgängig Button ect.

Nach den zwei <input> Elementen kommt ein <textarea> Element. Dieses Feld ist nicht mehr wie beim <input> Element nur eine Zeile sondern es stellt eine größere Box aus mehreren Zeilen zu verfügen, in der dann der Text hineingeschrieben werden kann. Um zu definieren, wieviele Zeilen bzw. Spalten eine textarea sein soll, braucht man die „cols“ und „rows“ Eigenschaft.


Struktur und Verhalten hinzufügen
 
Wenn jetzt auf den submit Button gedrückt werden würde, würde nichts passieren. Es fehlt nämlich noch die „action“ oder „method“ Eigenschaft. Die „method“ Eigenschaft definiert, wie die Daten an das Script gesendet wird, welche diese verarbeitet. Dafür gibt es zwei Möglichkeiten beim „method“: GET & POST. Die GET method sendet die Daten in die URL der Webseite. Es ist jedoch besser diese Variante nicht zu benützen, da es kein sicherer Weg ist, da jeder die Informationen sehen kann. Bei POST werden die Daten mithilfe des vom Formular benützten Script an eine E-Mail Adresse des Verwalters gesendet oder in einer Datenbank für die spätere Verwendung gespeichert.
Um wirkliche 100% Sicherheit der versendeten Daten zu gewährleisten, wie zum Beispiel bei einer Kreditkartennummer, sollte ein https Protokoll verwendet werden. Das bedeutet die Daten werden über ein https Protokoll und nicht über ein http Protokoll versendet, wo die Übertragen zwar etwas langsamer ist aber diese dafür verschlüsselt werden.
Die „action“ Eigenschaft definiert, zu welchem script file die Formular Daten zur Weiterverarbeitung gesendet werden sollen.

Nach dem absenden eines Formulars ist es auch immer von Vorteil, den User automatisch auf eine neue Seite weiterzusenden, zum Beispiel zu einer „Dankeschön“ Seite oder zurück zur Startseite.

Beispiel:
<input type=“hidden“ name=“redirect“ value=“http://www.opera.com“ />
Diese Zeile definiert im speziellen, dass der User nach dem absenden des Formulars auf die Startseite von Opera zurückgeschickt wird.

Um die Struktur eines Formulars zu verbessern, ist es möglich, diese in eine ungeordnete Liste zu setzen. Damit kann dem Formular übersichtlicher Aufbau gegeben werden und mithilfe des CSS das ganze noch gestylt werden. Natürlich kann die Struktur und das Aussehen auch mithilfe von einer Definition Liste oder gleich mithilfe des CSS die <input> <label> Tags bearbeitet werden. Das bleibt jedem selbst überlassen.
Als letztes sollte einem jedem Formularfeld ein label zugewiesen werden. Diese labels sind mit den  jeweiligen Formular Elementen dadurch verbunden, dass jedem input oder textarea Element eine id zugefügt wurde, mit demselben Wert wie die „for“ Eigenschaft des labels. Das ist besonders hilfreich, da es auch ganz offensichtlich darstellt, worum es bei diesem Formularfeld geht.
Beispiel:
<ul>
        <li>
            <label for=“name“>Name:</label>
            <input type=“text“ name=“name“ id=“name“ value=““ />
        </li>
</ul>


Hinzufügen von Semantik, style und mehr Struktur
 
Das <fieldset> Elements ermöglicht es, das Formular semantisch korrekt aufzubereiten. Es kann zum Beispiel für jeden größeren Abschnitt in einem Formular ein <fieldset> gesetzt werden, wei zum Beispiel für Informationen über die Adresse, Zahlungsarten, Kundenpreferenzen ect.
Das <legend> Element ermöglicht es dem <fieldset> einen Namen zuzuweisen.

<form id=“contact-form“ action=“script.php“ method=“post“>
  <fieldset>
    <legend>Contact Us:</legend>
    <ul>
      <li>
        <label for=“name“>Name:</label>
        <input type=“text“ name=“name“ id=“name“ value=““ />
      </li>
    </ul>
  </fieldset>
</form>

19: HTML Tables


Zusammengefasst nach dem Artikel von Jenifer Hanen

Quelle: http://dev.opera.com/articles/view/19-html-tables/
Semantic HTML and Search Engine Optimization

Im Webdesign Tabellen sind eine gute Möglichkeit, um Daten in einer tabellarischen Form zu organisieren.
Früher wurden Tabellen noch dazu verwendet, um eine Webseite im HTML aufzubauen, dies ist jedoch der falsche Weg.

Grundstruktur
 
<table></table>: Dieser Tag umfasst die gesamte Tabelle und weist den Browser darauf hin, dass der folgende Inhalt in eine tabellarischen Form dargestellt wird.

<tr></tr>: bedeutet „table row“, also die jeweilige Reihe (horizontal) einer Tabelle und kommt direkt nach dem <tabel> Tag.

<td></td>: der td Tag definiert die Tabellen Zelle oder jeden individuellen Inhalt innerhalb der Reihe.

Beispiel:
<table>
    <tr>
        <td>content</td>
        <td>content</td>
        <td>content</td>
    </tr>
</table>

Weitere Elemente
 
<caption></caption>: mit dem caption Element kann ein Titel zu der Tabelle gesetzt werden.

<th></th>: bedeutet „table head“ und definiert somit die jeweilige Spalten Überschrift.

thead, tbody, tfoot: definiert den Tabellen header, - body und - footer. Bei einer komplexen Tabelle können diese Elemente helfen, um die Daten besser zu strukturieren, nicht nur für den Programmierer, sondern auch für den Browser.

colspan und rowspan: diese Eigenschaften dienen dazu, dass eine Tabellen Zelle bzw. Spalte mehr als nur Zelle/Spalte lang ist. <td rowspan=“3“>.

summary: definiert eine Zusammenfassung des Tabellen Inhaltes. Diese Eigenschaft ist bei Screenreaders sehr hilfreich. Diese Summary erscheint jedoch nicht auf der Webseite.

scope: das scope Element kann im <th> Tag verwendet werden, um Screenreaders zu sagen, dass der <th> Inhalt Titel einer Spalte oder Reihe ist. Dieses Element wird nur im <th> Element verwendet.

Beispiel:
<table summary=“a summary of recent major volcanic eruptions in the Pacific Northwest“>
    <caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
    <thead>
        <tr>
            <th scope=“col“>Volcano Name</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan=“4“>Compiled in 2008 by Ms Jen</td>
        </tr>
    </tfoot> 
    <tbody>
        <tr>
            <th scope=“row“>Mt. Lassen</th>
            <td>California</td>
        </tr>
        <tr>
            <th scope=“row“>Mt. Hood</th>
            <td>Oregon</td>
        </tr>
    </tbody>
</table>

Diese ganzen Tags und Eigenschaften ist alles, um eine gute Tabelle zu programmieren. Um die Tabelle nun noch schön zu gestalten, wird wieder das CSS verwendet.

CSS: styling einer Tabelle
 
Mit der Hilf von CSS kann die Tabelle auf jede Art und Weise formatiert werden. Es kann ein Rahmen (border: 1px solid #333) hinzugefügt werden oder auch nur eine Linie (border-bottom: 1px solid #333) darunter. Dem Text oder den einzelnen Zellen kann eine Farbe zugewiesen werden (background:#ffffff).
Die Formatierungsmöglichkeiten sind im Großen und Ganzen die gleichen wie bei einem normalen HTML Inhalt. Am Besten ist es, das ganze einfach auszuprobieren.

17: Images in HTML


Zusammengefasst nach dem Artikel von Christian Heilmann

Quelle: http://dev.opera.com/articles/view/17-images-in-html/
Semantic HTML and Search Engine Optimization

Es ist sehr verlockend viele Bilder für eine Webseite zu verwenden. Man sollte jedoch bedenken, dass nicht jeder diese in seinem Browser angezeigt bekommt:
User von mobilen Geräten haben vielleicht die Bilder ausgeschaltet, um damit nicht den Verbindungsaufbau zu beeinträchtigen
Menschen mit einer Sehschwäche

Daher sollte schon vorher entschieden werden, ob die verwendeten Bilder relevant für die Seite sind. Besonders wichtig ist es, eine alternative für sehschwache oder blinde Menschen anzubieten.

Bildtypen

Es gibt 2 verschiedene Arten ein Bild in ein Dokument einzufügen: mit Hilfe des <img> Tag oder durch das CSS.
Wenn das Bild essenziell für dein Inhalt der Webseite ist, dann wird der <img> Tag verwendet. Dient das Bild jedoch nur als „eye candy“, dann wird am besten mit dem background image im CSS gearbeitet. Der Grund dafür ist, dass solche Bilder keinen alternative Information brauchen, da sie für blinde Menschen nicht relevant sind.

<img> Element und seine eigenschaften

Voraussetzung im HTML für das Einfügen von Bildern mit dem <img> Tag ist, dass das Bild in dem gleichen Ordner liegt wie das HTML file.

Beispiel:
<img src=“balconyview.jpg“>

Was hier noch fehlt ist das „alt“ Attribut. Diese Eigenschaft zeigt einen Text anstatt des Bildes, wenn dieses nicht verfügbar ist. Das macht es auch für blinde Menschen einfacher die Webseite zu verstehen, da sie diesen alternativen Text vorgelesen bekommen.

Beispiel:
<img src=“balconyview.jpg“ alt=“View from my balcony, showing a row of houses, trees and a castle“>

Der alternative Text wird jedoch nicht angezeigt, wenn das Bild erfolgreich geladen werden kann. Es ist also somit kein Tooltip, welcher auftaucht, wenn mit der Maus länger über dem Bild verharrt wird.
Um diese zusätzliche Information zu erhalten, sollte das „title“ Attribut zum <img> Tag hinzugefügt werden. Diese Eigenschaft kann sehr hilfreich sein, es ist jedoch keine geeignete Form, um wirklich wichtige Informationen zu transportieren. Stattdessen ist es ein guter Weg, um vielleicht das Bild im allgemeinen zu erklären.

Beispiel:
<img src=“balconyview.jpg“ alt=“View from my balcony, showing a row of houses, trees and a castle“ title=“What I see when I look out of my window; the castle was one reason to move there.“>

Des Weitern ist es vorteilhaft, einem <img> Tag eine definierte Breite („width“) und Höhe („height“) zuzuweisen. Damit kann verhindert werden, dass das Laden der Bilder bzw. der gesamten Seite nicht zu lange dauert.

Beispiel:
<img src=“balconyview.jpg“ alt=“View from my balcony, showing a row of houses, trees and a castle“ width=“400“ height=“186“>

Hintergrundbilder mit CSS

Mit dem CSS gibt es viele verschiedene Möglichkeiten, ein Bild zu platzieren. Es kann hinter oder rund um einen Text gesetzt werden und auch wiederholt werden.
Eingefügt wird das Bild im CSS mit dem „background-image“ Auswahl und der URL. Im Falle, dass das Bild nicht angezeigt wird, sollte als eine alternative eine Hintergrundfarbe angegeben werden.

Beispiel:
background-image:url (ball.gif);
background-color:#eee;

Als eine weiter Eigenschaft kann angegeben werden, ob sich das Bild wiederholen soll, oder nicht:

• Bild nicht wiederholen: background-repeat: no-repeat;
• Bild nur horizontal wiederholen: background-repeat: repeat-x;
• Bild nur vertikal wiederholen: background-repeat: repeat-y;

Steht beim „background-image“ ansonsten nichts dabei, wird es automatisch horizontal und vertikal wiederholt.
Um das Hintergrundbild dann noch speziell zu platzieren, wird „background-position“ (top, center, bottom, left, right) verwendet.

Mit der Hilfe von CSS können somit erstaunliche Hintergrundbilder entstehen, welche davor nicht möglich waren.

16: HTML lists


Zusammengefasst nach dem Artikel von Ben Buchanan

Quelle:http://dev.opera.com/articles/view/16-html-lists/
Semantic HTML and Search Engine Optimization

Listen werden verwendet dazu verwendet, um zueinander verwandte Informationen klar und deutlich miteinander zu verbinden. Sie helfen, eine gut strukturierte und schnell verständliche Webseite zu generieren. Im modernen Webdesign werden Listen auch für die Navigation verwendet.

3 Varianten
 
Es gibt 3 verschiedene Varianten von Listen im HTML:
ungeordnete Liste (ul)
geordnete Liste (ol)
definition Liste (dt)

Ungeordnete Liste
 
Ungeordnete Listen oder auch Punkte Listen werden verwendet, um eine Gruppe miteinander verwandter Informationen miteinander zu verbinden. Die Reihenfolge dabei ist jedoch egal.
Mit Hilfe von CSS können die Aufzählungspunkte geändert werden.
Ungeordnete Listen verwenden ein Set von <ul></ul> Tags, welche mehrere Sets von <li></li> Tags umschließt.

Beispiel Einkaufsliste:
<ul>
  <li>bread</li>
  <li>coffee beans</li>
  <li>milk</li>
  <li>butter</li>
</ul>

Geordnete Liste
 
Geordnete Listen oder auch nummerierte Liste werden verwendet, um eine Liste von Informationen darzustellen, welche in einer bestimmte Reihenfolge dargestellt werden müssen.
Geordnete Listen können mit Hilfe von mehreren numerischen oder alphabetischen Systemen dargestellt werden (z.B.: A, B, C, ...; 1, 2, 3, ...; i, ii; ...; I, II). Diese können wiederum mit CSS definiert werden.
Geordnete Listen verwenden ein Set von <ol></ol> Tags, welche mehrere Sets von <li></li> Tags umschließt.

Beispiel Kochrezept:
<ol>
  <li>Gather ingredients</li>
  <li>Mix ingredients together</li>
  <li>Place ingredients in a baking dish</li>
  <li>Bake in oven for an hour</li>
  <li>Remove from oven</li>
  <li>Allow to stand for ten minutes</li>
  <li>Serve</li>
</ol>

Es ist auch möglich eine geordnete Liste nicht mit 1 beginnen zu lassen. Dafür muss innerhalb des <ol> Tags die „start“ Eigenschaft verwendet werden. Das ist sehr hilfreich, wenn man innerhalb der Liste eventuelle eine Notiz einfügen will.

Beispiel Kochrezept:
<ol>
  <li>Gather ingredients</li>
  <li>Mix ingredients together</li>
</ol>

<p class=“note“>Before you place the ingredients in the baking dish, preheat the oven to 180 degrees centigrade/350 degrees farenheit in readiness for the next step</p>

<ol start=“4“>
  <li>Bake in oven for an hour</li>
  <li>Serve</li>
</ol>

Definitions Liste
 
Definitions Listen verbinden bestimmte Informationen und deren Erklärung innerhalb der Liste. Jede Erklärung und Information ist eine Definitionsgruppe. Es können eine unbegrenzte Anzahl von Gruppen erzeugt werden, jedoch muss es in jeder Gruppe mindestens eine Information und eine Erklärung geben. Somit können auch mehrere Informationen zu einer Erklärung gehören  oder umgekehrt. Jedoch eines ohne dem anderen ist nicht möglich.
Im HTML werden Definition Listen mit einem Set von <dl></dl> Tags dargestellt, welche eine Gruppe von <dt></dt> und <dd></dd> Tags umschließt. Es muss zumindest ein <dt></dt> Tag mit mindestens ein <dd></dd> gepaart sein, wobei <dt> immer als erstes kommt.

Beispiel:
<dl>
  <dt>Information</dt>
  <dd>Erklärung</dd>
  <dt>Information</dt>
  <dd>Erklärung</dd>
  <dt>Information</dt>
  <dd>Erklärung</dd>
</dl>

Verschachtelte Liste
 
Ein Punkt in einer Liste kann eine komplett neue Liste enthalten.

Beispiel Inhaltsverzeichnis:
<ol>
  <li>Chapter One
    <ol>
      <li>Section One</li>
      <li>Section Two </li>
      <li>Section Three </li>
    </ol>
  </li>
  <li>Chapter Two</li>
  <li>Chapter Three  </li>
</ol>

Es muss darauf geachtet werden, dass die verschachtelte Liste nach dem <li> Tag und dem darin enthaltenen Text beginnt jedoch vor dem </li> Tag aufhört.
Theoretisch können unendlich viele Listen ineinander verschachtelt werden, jedoch in der Praxis kann das jedoch ziemlich verwirrend werden. Bei sehr umfangreichen Listen empfiehlt es sich, sie besser in mehrere Listen aufzuteilen und diese jeweils mit einer Überschrift versehen.
 

Semantic HTML and Search Engine Optimization


Zusammengefasst nach dem Artikel von Joost de Valk

Quelle: http://dev.opera.com/articles/view/semantic-html-and-search-engine-optimiza/
Semantic HTML and Search Engine Optimization

Warum semantisches HTML?

Eine semantisch aufgebaute Webseite macht es zuallererst Menschen mit einer Sehschwäche viel einfacher die Seite zu verstehen, da es dem Screenreader ermöglicht, die Seite auf eine verständliche Art und Weise zu interpretieren.
Des Weiteren, hängen SEO (Search Engine Optimization) und semantisches HTML sehr eng zusammen. Der Sinn und Zweck von SEO ist es Suchmaschinenspinnen zu einem besseren Verständnis zu helfen, worum es bei der Webseite geht und sie dadurch besser kategorisieren zu können. Ein semantisches HTML hilft Ihnen dabei, die Struktur einer Webseite schnell und klar zu erfassen.

Webseitenaufbau

Eine Webseite sollte immer klar strukturiert sein, damit es  für Suchmaschinen leichter ist zu erkennen, welche Seite welches Thema behandelt. Mit einem semantischem HTML kann diese Struktur weiter verbessert werden.

Seitenaufbau

1. Überschriften
Ein Dokument hat Überschriften und Untertiteln, da diese es viel einfacher machen das Thema einer Seite festzustellen. Diese Überschriften gibt es im HTML je nach ihrer Wichtigkeit von h1 bis h6.
Es gibt auch die Möglichkeit mehrere h1 Überschriften auf der Seite zu verwenden. Von einer semantischen Sichtweise macht das zwar keinen all zu großen Sinn, jedoch für das SEO schon.

Um das Thema einer Seite festzustellen, geben Suchmaschinen den verwendeten Wörtern einer Überschrift sehr viel Gewichtung. Daher sollte das Schlüsselwort der Webseite mindestens einmal in einem h1 Tag vorkommen.

2. Bilder
Bilder werden auf verschiedenste Weisen in einem Dokument verwendet und sollten immer mit der richtigen Bedeutung angewendet werden. Die einzig wirklich sinnvolle semantische Variable bei einem <img> Tag ist die alt Eigenschaft. Diese sollte jedoch nur bei Bildern benutzt werden, welche eine zusätzliche Bedeutung zum Text haben und nicht bei Bildern, welche nur einen dekorativen Zweck erfüllen. Ansonsten wird im alt Eigenschaft beschrieben, was das Bild aufzeigt.

3. Abkürzungen und Acronyme
Wenn man Abkürzungen und Acronyme verwendet sollte man sicher gehen, dass das ausgeschriebene Wort mit einem <abbr> oder <acronym> Tag bereitgestellt wird.

4. Tabellen
Tabellen sollten nie für das Design einer Webseite sondern nur zum anzeigen von tabellarischen Daten verwendet werden. Es gibt aber auch noch andere Wege um den semantischen Wert einer Tabelle noch zu steigern und somit die seiten eigene SEO zu verbessern:

verwenden von Tabellen Überschriften (th)
verwenden von thead, tbody und tfoot zur besseren Strukturierung der Tabelle
verwenden eines Titels, welcher beschreibt, um was es bei der Tabelle geht

5. Bedeutung hervorheben
Um einzelnen Wörtern eine größere Bedeutung zuzuweisen, können die <em> und <strong> Tags verwendet werden. Suchmaschinen geben solchen Wörtern mehr Gewichtung.

Interessenkonflikte

All diese Regeln können natürlich etwas gebeugt werden, um zum Beispiel Interessenkonflikte mit dem Kunden zu vermeiden. Eine semantische Struktur sollte jedoch immer die Basis jeder Webseite sein.

HTML links - let's build a web!


Zusammengefasst nach dem Artikel von Christian Heilmann
Quelle: http://dev.opera.com/articles/view/18-html-links-let-s-build-a-web/
18: HTML links - let's build a web


Links sind Teile einer Webseite, welche zu anderen Quellen verweisen (HTML Dokumente, Text Dateien, PDF, etc..). Es gibt Links, zu denen der Browser automatisch verbindet, und es gibt optionale Links, auf die der User selbst klicken muss, um zur Quelle zu kommen.
Durch den <a> Tag kann jedes Element eines Dokumentes in einen Link verwandelt werden. Jedoch gibt es verschiedene Eigenschaften, die man dazufügen kann.

Die Eigenschaften 
 
Die am weit verbreitetste Eigenschaft eines <a> Tag ist "href". Damit wird die Quelle angegeben, wohin der Link führen soll. 

<a href=“http://developer.yahoo.com“>Yahoo Developer Network</a>

Des Weiteren gibt es noch Links, welche als "Anker" bezeichnet werden und mit der "id" Eigenschaft dargestellt werden. Diese Anker verweisen nicht zu anderen Webseiten, sondern ein Anker ist eine Stelle, zu dem ein anderer Link hin verweist. Zum Beispiel: ist eine Seite sehr lang, kann man mithilfe von gesetzten Ankern auf eine bestimmte Stelle innerhalb der Seite springen.

<a href=“#sec1“>Section One</a>    Link, welcher auf das Ziel verweist

<a id=“sec1“>Section #1</a>        Anker, auf den der erste Link verweist

Keine Zweideutigkeit beim verwenden von Links
 
Das wichtigste was bei einem Link beachtet werden muss, ist die Beziehung zum Besucher. Der User vertraut darauf, dass er durch einen klick auf den Link immer auch eine relevante Information erhält. Wenn jedoch dieser Link nicht funktioniert betrügt man damit das Vertrauen der User und verliert somit an Glaubwürdigkeit.

Extra Information
 
Optional zu jedem Link kann man ein "title" Element hinzufügen. Diese werden dann angezeigt, wenn der User mit der Computer-Maus über dem Link verweilt. Dieser Tooltip gibt zum Beispiel Informationen darüber, auf welche Seite der Link verweist.
Für sehbehinderte Menschen, welche die Seite, und somit auch alle extra Informationen, vorgelesen bekommen, ist das eher ein Problem, da sie oftmals mit dem Link nichts anfangen können, wie bei einem PDF-Dokument, Bilder und Videos.

Links zu non-HTML Quellen
 
Es gibt viele Links, bei welchen der Browser dann nicht weiß, wohin er eigentlich verlinken soll. Es ist weit verbreitet, dass Webseiten zu Bildern, PDF Dokumente und Videos verlinken ohne jedoch den Besucher vorher über den Vorgang zu warnen. Besonders beim Öffnen von großen Videodateien sind die Browser schon oft abgestürzt. Daher sollte man den User immer genauestens darauf vorbereiten, was die Folgen bei der Aktivierung eines Links sind.

Vorteile von Outbound und Inbound Links
 
Eine der größten Ängste von Webseiten Besitzer ist es, dass Besucher ihre Seite permanent verlassen. Das ist oft der Grund warum selten Links zu Konkurrenz Seiten angeboten werden.
Es gibt jedoch einige gute Gründe, warum es von Vorteil ist zu Konkurrenz Seiten zu verlinken:

• erzeugt Glaubwürdigkeit in den Augen der Besucher
• Möglichkeit den User mehr Service zu bieten z.B.: durch Verlinkung zu Artikel oder Produkten auf anderen Seiten
• Verlinkung auf ältere Artikel und selbst eine bessere Lösung vorschlagen.

Andersrum ist es sehr von Vorteil, wenn Links auf anderen Webseiten zur eigenen verweisen. Umso öfter User auf solch einen Link klicken, desto höher steigt man im Rang von Suchmaschinen wie Google auf.

Formulierung eines Links
 
Um eine schnelle Navigation zu ermöglichen, sollte der Link Text immer so klar wie möglich formuliert werden. Das heißt, man sollte sich sicher sein, dass der Text einen Sinn ergibt und das nicht mehrere Links mit derselben Formulierung existieren, welche aber zu unterschiedlichen Quellen verlinken.
Aussehen eines Links
Obwohl das Aussehen eigentlich erst mit dem CSS definiert wird, ist es von großem Vorteil die verschiedenen Zustände eines Links zu bedenken.

• link - definiert den Standard Zustand eines Links; unbesuchte Links werden blau dargestellt.
• visited - definiert das Aussehen eines bereits besuchten Links; sie sind violett.
• hover - definiert das Aussehen eines Links, während sich die Maus darüber befindet
• active – definiert das Aussehen eines Links, während er aktiviert ist

Marking up textual content in HTML


Zusammengefasst nach dem Artikel von Mark Norman Francis
Quelle: http://dev.opera.com/articles/view/15-marking-up-textual-content-in-html/
15: Marking up textual content in HTML


Abstand
 
Beim schreiben eines HTML Dokuments verhält sich der Abstand zwischen den Wörtern anders als bei einem normalen Textprogramm. Egal ob man nun mehrere Leerzeichen oder Tabulatoren in den HTML Text setzt, werden solche Vorgänge immer als ein Leerzeichen gewertet.
Das kann bei vielen Anfängern zu Verwirrung führen, welche mit hinzugefügten Abständen das Laufbild des Textes verändern wollen. Solche Veränderungen werden nicht im HTML Code gemacht, sondern mit Style Sheets.

Überschriften
 
Im HTML gibt es sechs verschiedene Stufen von Überschriften: h1, h2, h3, h4, h5 und h6 (gereiht von der höchsten bis zur niedrigsten Wichtigkeit). Das bedeutet, dass h1 die Hauptüberschrift ist, welche die ganze Seite umfasst. h2 wird dann dazu verwendet, die Seite in einzelne Kapitel zu unterteilen, h3 für Unterkapitel usw.
Diese Art von Unterteilung ist besonders wichtig, da es die Seite viel verständlicher und übersichtlicher macht.

Der Absatz
 
Ein Absatz wird im HTML mit dem <p> Tag (=paragraph) dargestellt und erfüllt die gleiche Funktion wie eine Enter - Taste. Ein Absatz beinhaltet meistens einen oder mehrere Sätze, wie man es schon von Büchern und Zeitungen kennt. Wenn jedoch nur einzelne Wörter und nicht ein ganzer Satz verwendet wird, ist es wahrscheinlich am sinnvollsten ihn nicht als Absatz darzustellen.

Darstellung von Quellen 
 
Sehr oft werden in Artikel oder Blogs ganze Paragraphen oder nur Teile von einem anderen Dokument verwendet. Im HTML werden solche Zitate mit dem <b> Tag (=blockquote) dargestellt.
Ein blockquote kann keinen Text enthalten, sondern muss stattdessen ein anderes Block-Level Element enthalten. Dabei sollte man immer denselben Block-Level Element benutzen, welcher auch im Original Dokument verwendet wurde. Das heißt, wenn man einen Absatz Text zitiert, sollte ein Absatz verwendet werden usw.

Kurze Zitate
 
Kurze Zitate werden innerhalb eines Satzes oder Absatzes verwendet und im HTML mit dem <q> Tag (=quotations) dargestellt.
Ein Zitat sollte immer mit den Anführungszeichen gekennzeichnet sein. Im HTML-Dokument sollten diese Zeichen mit dem speziellen Code generiert werden, um sicherzustellen, dass die Anführungszeichen auch auf jedem Browser korrekt dargestellt werden. Im CSS können die normalen Zeichen „“ verwendet werden.

Betonung von Text
 
Im HTML gibt es zwei Methoden um einen Text hervorzuheben. Für die visuelle Darstellung bedeutet das meistens die Verwendung von verschiedenen Farben, fetten oder kursiven Schnitten. Bei Blinden wird  dafür zum Beispiel mit verschiedenen Stimmlagen gearbeitet.
Die erste Möglichkeit einen Text zu betonen ist der <em> Tag. Wenn aber zum Beispiel der gesamte Text betont wird, es jedoch noch einen wichtigeren Teil gibt, dann verwendet man die zweite Möglichkeit, den <strong> Tag.

Die Kursivschrift
 
Obwohl im Internet die weit verbreitete Annahme gilt, dass der <i> Tag nicht verwendet werden soll, hat es sich jedoch bei einigen Darstellungen durchgesetzt. Wie zum Beispiel bei der Darstellung von Schiffsnamen, Titel von Fernsehserien, Filmen und Büchern.

Präsentationselemente, welche man nie verwenden soll
 
Im HTML gibt es ein paar Elemente, welche nur das Aussehen des Textes definieren, aber nicht was er bedeuten soll. Da diese Effekte nun jedoch schon durch einen besseren Weg erreichbar sind (Textgestaltung durch CSS), sollten diese Elemente niemals benutzt werden.

Dazu gehören:

• Font face/size
• i = kursiv (besser: <em>)
• b = bold (besser: <strong>)
• s/strike = durchgestrichen (besser: <del>)
• u = unterstrichen
• tt = teletype (besser: <pre>)
• Groß und Klein

Building up a site wireframe

Zusammengefasst nach dem Artikel von Linda
Quelle: http://dev.opera.com/articles/view/9-building-up-a-site-wireframe/
9: Building up a site wireframe


Bevor man damit beginnt eine Webseite zu erstellen, sollte der Umfang geklärt werden. Was soll mit der Seite erreicht werden, wie sieht das Budget aus und auch mit welchen Mitteln soll das alles erreicht werden?
Falls die Firma auch bereits über eine Corporate Identity verfügt, sollte sich das Design der Webseite daran anpassen. Ansonsten sollte sich das Aussehen an die jeweilige Branche anpassen.
Der wichtigste Faktor ist jedoch die Usability. Die Webseite sollte für alle User so leicht wie möglich zugänglich sein, deswegen ist es von Vorteil, die Gestaltung mit HTML und CSS durchzuführen und Flash möglichst zu vermeiden.

Wichtige Fragen vor dem Beginn:

• Spiegelt der Name der Webseite die Firma bzw. die Tätigkeit der Firma wieder?
• Gibt es eine CI oder muss zuerst eine erstellt werden?
• Ist die gewählte Domain verfügbar?
• Gibt es Konkurrenz Seiten und wie sehen diese aus?
• Welche Struktur ist am Besten für die Seite? (Menüaufbau, welche Elemente werden benötigt, etc..)
• Gibt es bereits einen Inhalt und wie soll er dargestellt werden?
• Welche Web Hosts gibt es und welcher ist am Besten für meine Webseite geeignet?
• Wie sieht der Zeitplan aus, wann soll die Webseite online gehen?

Wenn diese Fragen geklärt sind, kann man sich nun näher mit dem Inhalt und der Optimierung der Seite für Suchmaschinen beschäftigen.
Der nächste Schritt ist nun alle Materialien zusammenzusuchen, welche für die Webseite benötigt werden. Das heißt, Sachen wie das Logo, Bildmaterial etc. müssen bereitgestellt werden.

Das Logo
 
Das Logo repräsentiert ein Unternehmen nach außen hin und ist ein wichtiger Bestandteil jeder Firma. Gibt es von dem bestehenden Logo noch keine digitalisierte Version, muss man dabei einige Dinge beachten. Im Print Bereich wird der CMYK Farbraum verwendet, welcher jedoch nicht mit den Web Farben (RGB) übereinstimmen. Um die Farben so ähnlich wie möglich zu bekommen gibt es zwei Möglichkeiten:
Man setzt sich mit der Druckerei in Verbindung und fragt nach den Farbwerten,
 oder man scannt das Logo in ein CMYK unterstützendes Programm ein und ermittelt mit Photoshop die Farbwerte.

Das Layout

Beim Layout einer Webseite sollte beachtet werden, dass das Wichtigste möglichst am Anfang stehen sollte, damit der User zum weiterscrollen angeregt wird.
Außerdem sollte das Layout durch die gesamte Webseite hindurch konstant bleiben, damit bei dem User keine Verwirrung entsteht.
Der wichtigste Bestandteil jeder Webseite ist der Header. Er befindet sich immer ganz oben und beinhaltet das Logo. Das platzierte Logo sollte immer auf die Startseite der Webseite verlinken.
Gleich darunter befindet sich die Navigation. Diese sollte übersichtlich und leicht zu bedienen sein. Falls Bilder statt Text für die Navigation verwendet  werden, sollte irgendwo trotzdem noch ein Textmenü platziert werden. Dieser Text hilft vor allem blinden Menschen, welche sich mit einer bestimmten Software die Webseite vorlesen lassen können. Daher sollte man generell bei Bildern einen alt Tag einbauen, damit sich auch Blinde darunter etwas vorstellen können.
Natürlich darf auch nicht auf den Footer vergessen werden. Dieser befindet sich, wie auch schon der Name sagt, am Fuße einer Seite. Er beinhaltet wichtige Hintergrundinformationen über die Firma, Kontaktinformationen oder wie auch schon vorher erwähnt, eine Wiederholung der Navigation.

Rücksprache mit dem Kunden
 
Bevor man sich nun an die Umsetzung der Webseite macht, sollte das Wireframe vorher noch mit dem Kunden durchgesprochen und seine Zustimmung eingeholt werden.

Umsetzung

Ist der Kunde einverstanden, kann man sich nun an die Umsetzung der Webseite machen. Bevor man aber online geht, ist es wichtig zu testen, ob die Seite valide ist. (z.B.: mit W3C Markup Validation Service). Außerdem sollte das Layout auf möglichst vielen verschiedenen Browser (auf Mac, Windows und Linux) getestet werden damit man weiß, dass die Webseite von den meisten Usern gesehen werden kann. Wer nicht von jedem Betriebssystem ein Gerät bei der Hand hat, kann einen Service namens „BrowserCam“ in Anspruch nehmen. Man kann diesen Service 24 Stunden lang testen, danach muss für den Dienst gezahlt werden.
Wenn all diese Schritte abgeschlossen sind, kann man nun mit dem Hinzufügen von Texten, Bildern und Farben beginnen.