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.