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.