Protokoll vom 21.05.2014

Heute haben wir uns damit beschäftigt, wie man dem HTML beibringt, auf Inhalte zu verlinken. Danach haben wir uns das Styling angeschaut, das man über Links drüber legen kann.

Ein Königreich für einen Link
Unser Freund beim Verlinken auf Websites, Bilder, MP3s, PDFs und quasi alles andere ist das <a>-Tag. Es wird zum Beispiel beim Verlinken nach folgendem Schema eingesetzt.

Beispiel für Verlinkung einer externen Website
<a href=“kompletter Link zu einer Website“ target=“_blank“ title=“Die Website des Sozialvernetzers“>Hier geht’s zum Sozialvernetzer</a>

In der freien Wildbahn sieht dieser Link dann so aus: Hier geht’s zum Sozialvernetzer

Wichtig: Bitte bei Links auf externe Websites immer die komplette Zieladresse inkl. http:// angeben. target=“_blank“ erzwingt, dass sich der Link beim Anklicken in einem neuen Fenster öffnet. title ist der Linktitel, der angezeigt wird, wenn man mit der Maus über den Link fährt. Der Text vor dem schließenden <a>-Tag ist der Text, der später alt Link fungiert. Wird hier nichts eingetragen, ist der Link auf der Seite nicht sichtbar.

Auf dieselbe Weise lassen sich auch Dokumente verlinken, indem man statt einer Website-Adresse dort den Link zum Dokument einträgt. Bitte an die korrekte Endung der Datei denken, sonst klappt das nicht!

Styling von Links
In der CSS stehen uns ein paar Möglichkeiten zur Verfügung, Einfluss auf Verhalten und Gestaltung von Links zu nehmen.

a:link – bestimmt die Gestaltung eines Links, der noch nicht geklickt wurde. Hier ist es zum Beispiel möglich mittels link-decoration: none die Unterstreichung des Links zu entfernen, die der Browser sonst standardmäßig vornimmt.

a:visited – bestimmt die Gestaltung eines bereits geklickten Links, so dass dieser z.B. dann lila dargestellt wird, wie das bei Google der Fall ist

a:hover – bestimmt die Gestaltung eines Links, wenn mit der Maus darüber gefahren wird. Hier könnte eine Farbänderung hervorgerufen werden oder eine Unterstreichung.

a:focus – genau wie hover, aber wenn der Link per Shift+Tab, also per Tastatur angewählt wird

a:active – bestimmt die Gestaltung eines Links in genau dem Moment, in dem er angeklickt wird. Hier könnte z.B. die Hintergrundfarbe geändert werden, damit man den Klick quasi auch „sehen“ kann.

Wichtig: Die Parameter müssen in der Reihenfolge wie oben aufgeführt werden. Nur bei hover und focus ist es egal, welches davon zuerst kommt.

Einbinden von Bildern
Statt auf Bilder zu verlinken, siehe oben, kann man diese auch direkt als Bild einbinden, so dass das Bild direkt auf der Seite angezeigt wird.

Dafür benutzt man das <img>-Tag nach folgender Logik:

<img src=“kompletter Link zu einem Bild plus Dateiendung“ alt=“Instagram Screenshot“ width=“350px“ height=“250px“>

Das würde dazu führen, dass ein Bild (siehe unten) mit dem Alternativtext „Instagram Screenshot“ (der wird dann angezeigt, wenn das Bild nicht geladen werden kann) und den Maßen 350px x 250px angezeigt wird.

Und so sähe zum das Beispiel aus.

Instagram Screenshot

Über die CSS lässt sich der <img>-Tag analog zu allen anderen Stylen, mit Klassen versehen usw. Das schauen wir uns noch aus der Nähe an.

Advertisements

Kommentar hinterlassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s