25 September 2012

Bilderrahmen ohne Bearbeitungsprogramm ändern - Part I

Auf Grund von meines Studiums und allgemein meinem großen Interesse für Webdesign kenne ich mich einigermaßen mit HTML (und CSS) aus. Beides kann man sehr leicht für das Arbeiten mit Blogs verwenden und ich wollte euch heute einen kleinen Trick zeigen, wie ihr innerhalb von ein paar Sekunden einen Rahmen um eure Bilder bekommt, um sie so optisch schöner zu machen, ohne sie groß bearbeiten zu müssen.

Dazu nehmen wir ein Bild von der guten Megan Fox und schauen uns dazu den Quellcode an.
<img border="0" height="240" src="http://1.bp.blogspot.com/megan-fox.jpg" width="320" /></a>
Was vielleicht auf den ersten Blick verwirrend aussieht, ist es überhaupt nicht. Das img steht für das englische Wort image, das src für source. Mit den height und width könnt ihr die Größe des Bildes verstellen.
Relevant ist jedoch das, was ich schwarz markiert habe.

Fügt also wie gewohnt ein Bild zu eurem Post hinzu. Geht dann auf "HTML" und sucht den Quellcode für euer Bild. Das Border im Quellcode steht für Rand, er ist automatisch auf null gestellt und ist somit aus. Ändern könnt ihr es, in dem ihr eine Zahl eingebt beispielsweise die Zahl 1.

Wollt ihr für den Rahmen eine bestimmte Farbe haben? Kein Problem, auch das lässt sich ganz einfach mit HTML einstellen.
<img border="1" height="240" src="http://1.bp.blogspot.com/megan-fox.jpg" width="320" style="border:1px solid #ff0000"</img>
Hängt dazu einfach den schwarz markierten Quellcode dran, wobei ihr mit Hilfe der hexadezimalen Farbcodes die Farbe ändern könnt.
#ff0000" <- Farbcode
Hier findet ihr eine Übersicht mit unterschiedlichen Farben, die ihr für euren Rahmen verwenden könnt. Wenn ich um meine Megan Fox also zum Beispiel einen braunen Rahmen haben will, füge ich diese Zahl zu meinem Quellcode hinzu #61210B.

Am Ende sieht dann das Ergebnis so aus:
<img border="1" height="240" src="http://1.bp.blogspot.com/megan-fox.jpg" width="320" style="border:1px solid #61210B"</img>

Ich hoffe, dass ihr das Tutorial einigermaßen nützlich fand. Zwar war es einfaches HTML, jedoch kann ich einfach schlecht einschätzen, inwieweit ihr euch damit schon bereits auskennt oder eben nicht. Wenn ihr noch mehr Tutorials haben wollt, dann lasst es mich wissen! :*



Kommentare:

  1. Sehr schön geschrieben... Auch nett aufgebaut mit dem Quellcode (vielleicht beim nächsten mal etwas deutlicher makieren: mit farbe oder so)... Aber wirklich gut gemacht!!

    Liebe Grüße
    Vroith

    AntwortenLöschen
  2. Schön erklärt... finde es immer toll, wenn man nützliche Inhalte anbietet!

    LG, Christian

    AntwortenLöschen
  3. Have you ever considered creating an ebook or guest authoring on other websites?
    I have a blog based on the same subjects you discuss and would really like to have you share some stories/information.
    I know my readers would appreciate your work. If you're even remotely interested, feel free to shoot me an email.

    Here is my homepage ... grupa kreatywna
    my website > grupa kreatywna

    AntwortenLöschen

Share some Love. Leave a Comment! <3

Related Posts Plugin for WordPress, Blogger...