Kalendereintrag gestalten

Kalendereintrag und HTML?

Im User-Kalender der fotocommunity können für die Texte und Bilder HTML-Codes verwendet werden.

Stelle im FLUX, Langenbergerstrasse 125, in Velbert ab dem 10. März 2012 für ca. 6 Wochen meine Bilder zum Thema "ISLAND" aus. Ausstellungseroeffnung ist am 10.03.2012 um 19:00h

Textformatierungen

Für die Textgestaltung gibt es sehr viele Möglichkeiten.

Beispiel:

<span style="background: #FFEFD5 none; color: #2F4F4F;
 font-size: x-large; font-weight: bold;">
 Großer und fetter Text in anderen Farben</span>

wird zu

Großer und fetter Text in anderen Farben

Hier werden beim durch das span-Element eingeschlossenen Text für den Hintergrund (background) und den Vordergrund (color) bestimmte Farben eingestellt, die Schriftgröße (font-size) auf besonders groß und das Schriftgewicht (font-weight) auf fett gestellt. Das style-Attribut nutzt dabei die Layout-Definitionen, die auch in den CSS-Dateien verwendet werden.

Die Codes für die Farben kann man meist mit den Bildbearbeitungsprogrammen ermitteln. Die gesamten Möglichkeiten schlägt man am besten in einer Referenz nach.

Weitere Formatierungen

HTML bietet eine Vielzahl von Elementen zur Textgestaltung. Nützlich für Kalendereinträge können einfache Hervorhebungen (<em>...</em>, ungeordnete Listen (<ul>...</ul> mit <li>...</li>, die mit dem Punkt vorneweg) oder gerahmte Kästen (<div style="border: 1px solid green">...</div>) sein. Vielleicht schaust du einfach mal in eine HTML-Anleitung. Diese Sachen sind eigentlich nicht allzu schwer zu beherrschen.

Aktive Links

Http-Links werden im Langtext nicht automatisch in aktive Links (Links, die beim Anklicken auf die entsprechende Webseite führen) umgewandelt. Das lässt sich aber recht leicht selbst bewerkstelligen.

Beispiel:

<a href="http://www.einserver.de/">
Einserver als Anbieter</a>

Die Link-URL muss im href-Attribut angegeben werden. In der zweiten Zeile wird der Text angegeben, der als aktiver Link erscheint.

Kurzanleitung zum Bildeinbinden

Fahre mit dem Mauszeiger auf das Bild, dass Du im Kalender einbinden willst. Klicke auf die rechte Maustaste und wähle im auftauchenden Menü: Linkadresse kopieren/Grafikadresse kopieren/Bildadresse kopieren - je nach Browser. Im Internet Explorer im auftauchenden Menü auf "Eigenschaften" klicken und dann im erscheinenden Eigenschaftenfeld die Adresse (URL) kopieren.

Die Bildadresse eines großen Bildes auf der fotocommunity sieht immer so aus: http://cdn.fotocommunity.com/images/Portraitfotografie/Portraitfotografie-Maenner/Heute-a12345555.jpg - die Zahl ändert sich immer je nach Bild.

Diese komplette Adresse setzt man jetzt zwischen:

<img style="width:50%" src="Jetzt hier die Bildadresse"/>

Dann erscheint das Bild in 50% der orignalen Bildgröße im Kalender. Will man es größer oder kleiner haben, passt man die Prozentangaben entsprechend an. Es klappt nur, wenn man alles genauso übernimmt!

Bilder einbinden

Die Bilddatei muss bereits im Internet hochgeladen und ihre Netzadresse muss bekannt sein.

Beispiel:

Dies ist ein Text, der vor dem Bild erscheint.
<img src="http://www.einserver.de/einverzeichnis/einbild.jpg" />
Und die übrige Textbeschreibung folgt dann hinter dem Bild.

Das ist die einfachste Möglichkeit. Das Bild erscheint damit in der Größe, in der es vorliegt. Zu große Bilder sollte man für den Termintipp natürlich nicht verwenden. Über dieses sogenannte IMG-Tag kann man dann noch bestimmen, wie groß das Bild tatsächlich ausgegeben wird, oder etwa an welcher Stelle es erscheinen soll. Dieses Feintuning lässt sich ebenfalls über das style-Attribut steuern, das bei allen HTML-Tags eingesetzt werden kann.

Beispiel:

<img style="height:100px; width:150px; border: 1px solid red"
     src="http://www.einserver.de/einverzeichnis/einbild.jpg" 
 />

Das Bild erscheint ggf. verkleinert mit den angebenen Maßen in Pixeln. Außerdem wird ein dünner roter durchgezogener Rahmen drumherum gezeichnet. Diese Verkleinerung durch den Browser ist nicht unbedingt zu empfehlen, da dabei auf die Qualität keinen Einfluss genommen werden muss und der Betrachter eine große Bilddatei mit entsprechender Wartezeit laden muss.

Beispiel:

<img style="width:80%"
     src="http://www.einserver.de/einverzeichnis/einbild.jpg"
 />

Das Bild wird der Breite des Browserfensters angepasst.

Die Bildadresse eines Bildes lässt sich mit dem Browser ermitteln, so auch von den Miniaturbildern, die in der fotocommunity genutzt werden.

Beispiel:

<img src="http://db5.fotocommunity.de/37/.thumbs/thumb_1234567.jpg" />

Achtung: auf dem fotocommunity-Server werden die Miniaturen nicht immer gleich endgültig abgelegt. Wenn die Adresse einer Miniatur so aussieht

http://db3.fotocommunity.de/ram/new/thumb_1234567.jpg

kannst du zwar das Bild verlinken, die Adresse wird sich aber früher oder später ändern und muss dann entsprechend nachgezogen werden.

Natürlich muss bei den Bildern auf das Urheberrecht geachtet werden, also Bilder von der eigenen homepage oder dem eigenen fotocommunity sind meist ok, bei anderen sind Absprachen nötig.

Bilder zum Anklicken

So wie oben beschrieben dienen die Bilder einfach nur der Gestaltung. Ein Klick auf das Bild macht nichts besonders, außer vielleicht alleine das Bild im Browser anzuzeigen. Soll das Bild zu einer Web-Adresse, etwa mit einer detaillierteren Terminbeschreibung führen, müssen die beiden vorgenannten Methoden miteinander kombiniert werden.

Beispiel:

<a href="http://www.einserver.de/" 
   title="Einserver als Anbieter für Kurs XYZ">
   <img src="http://www.einserver.de/einverzeichnis/einbild.jpg" />
 </a>

Hier wird also kein Text als Link angegeben, sondern ein Bild. Meist empfiehlt es sich allerdings, zusätzlich zum Bild auch einen Textlink anzugeben, da nicht jeder damit rechnet, dass sich hinter einem Bild ein Link verbirgt.

Beispiele in der fotocommunity

• Kalendereintrag mit mehreren Bildern (http://www.fotocommunity.de/pc/calendar/display/3268), die Bilder sind dabei Miniaturen von Bildern auf dem fotocommunity-Server.

Weblinks

• selfhtml.org (http://de.selfhtml.org/) als Referenz mit vielen Beispielen zum Nachschlagen und Lernen von HTML, inklusive CSS.
• css4you.de (http://www.css4you.de/) als deutsche CSS-Referenz für das style-Attribute
• CSS-Referenz bei w3schools.com (http://www.w3schools.com/css/css_reference.asp) (englischsprachig)
• TripleColors (http://www.tntluoma.com/sidebars/triplecolors/) als sidebar mit Farbcodes für HTML-Elemente.