Farben und Rahmen

[[Bild:farbe.png|center]]<br><br><br>
Hier bekommt ihr noch ein paar Tipps, wie ihr eure Seite mit Farben und Rahmen gestalten könnt.<br><br>

* Generell gibt es zwei Möglichkeiten im WIKI eine Farbe anzugeben

# Durch den Farbnamen, der '''immer in Englisch''' angegeben wird
# Durch den '''Hexadezimalcode'''

* Hier ein paar Beispiele:

{| class="wikitable "
! width="50%"; style="background-color:#00bfff" | Eingabe mit Farbnamen
! width="50%"; style="background-color:#00bfff" | Eingabe mit Hexadezimalcode
! width="50%"; style="background-color:#00bfff" | Das was dabei heraus kommt
|-
| <nowiki><span style="color: red">roter Text</span></nowiki>
| <nowiki><span style="color: #FF0000">roter Text</span></nowiki>
| <span style="color: red">roter Text</span>
|-
| <nowiki><span style="color: green>grüner Text</span></nowiki>
| <nowiki><span style="color: #00FF00">grüner Text</span></nowiki>
| <span style="color: green">grüner Text</span>
|-
| <nowiki><span style="color: blue>blauer Text</span></nowiki>
| <nowiki><span style="color: #0000FF>blauer Text</span></nowiki>
| <span style="color: blue">blauer Text</span>
|-
|<nowiki><span style="color: orange>oranger Text</span></nowiki>
| <nowiki><span style="color: #FFA500>oranger Text</span></nowiki>
| <span style="color: orange">oranger Text</span>
|}

 
* Für die ganz bunten unter euch ist hier noch eine kleine Farbauswahl:<br><br>

{| 
|width="25%" style="background-color:peachpuff" | <center>peachpuff <br> #FFDAB9</center>
|width="25%" style="background-color:dodgerblue" | <center>dodgerblue <br> #1E90FF</center>
|width="25%" style="background-color:skyblue" | <center>skyblue <br> #87CEFF</center>
|width="25%" style="background-color:Chartreuse" | <center>chartreuse <br> #7FFF00</center>
|-
|width="25%" style="background-color:DarkGreen" | <center><span style="color: white">darkgreen <br> #006400</span></center>
|width="25%" style="background-color:khaki" | <center>khaki <br> #FFF68F</center>
|width="25%" style="background-color:gold" | <center>gold <br> #FFD700</center>
|width="25%" style="background-color:salmon" | <center>salmon <br> #FF8C69</center>
|-
|width="25%" style="background-color:orangered" | <center>orangered <br> #FF4500</center>
|width="25%" style="background-color:hotpink " | <center>hotpink <br> #FF6EB4</center>
|width="25%" style="background-color:deeppink" | <center>deeppink <br> #FF1493</center>
|width="25%" style="background-color:orchid" | <center>orchid <br> #FF83FA</center>
|-
|width="25%" style="background-color:purple" | <center><span style="color: white">purple <br> #9B30FF</span></center>
|width="25%" style="background-color:gainsboro " | <center>gainsboro <br> #DCDCDC</center>
|width="25%" style="background-color:gray" | <center><span style="color: white">gray <br> #808080</span></center>
|width="25%" style="background-color:dimgray" | <center><span style="color: white">dimgray <br> #696969</span></center>
|}
<br><br>
* Natürlich hast du auch die Möglichkeit, deinen Text einzurahmen oder farbig zu hinterlegen:<br><br>
{|class="wikitable "
! width="50%"; style="background-color:#00bfff" | Das was du eingibst
! width="50%"; style="background-color:#00bfff" | Und was dabei heraus kommt
|-
|<nowiki><span style="border:2px dimgray;">Rahmen um einzelne Worte oder einzeiligen Text</span></nowiki>
|<span style="border:2px solid dimgray;">Rahmen um einzelne Worte oder einzeiligen Text</span>
|-
|<nowiki><div style="border:2px solid dimgray;">Rahmen um einen mehrzeiligen Text </div></nowiki>
|<div style="border:2px solid dimgray;">Rahmen um einen <br> mehrzeiligen Text</div>
|-
|<nowiki><span style="background:skyblue">Farbiger Hintergrund für einzelne Worte oder einzeiligen Text</span></nowiki>
|<span style="background:skyblue">Farbiger Hintergrund für einzelne Worte oder einzeiligen Text</span>
|-
|<nowiki><div style="background:skyblue">Farbiger Hintergrund für mehrzeiligen Text</div></nowiki>
|<div style="background:skyblue">Farbiger Hintergrund für <br> einen mehrzeiligen Text</div>
|-
|<nowiki><span style="border:2px solid dimgray;background:skyblue">Box mit farbigem Hintergrund und Rahmen für einzeiligen Text</span></nowiki>
|<span style="border:2px solid dimgray;background:skyblue">Box mit farbigem Hintergrund und Rahmen für einzeiligen Text</span>
|-
|<nowiki><div style="border:2px solid dimgray;background:skyblue">Box mit farbigem Hintergrund und Rahmen für mehrzeiligen Text</div></nowiki>
|<div style="border:2px solid dimgray;background:skyblue">Box mit farbigem Hintergrund und Rahmen <br> für mehrzeiligen Text</div>
|}
<br><br>

* Da ihr auch eure Skizzen hochladen sollt, an dieser Stelle noch eine kurze Anleitung, wie man ein Bild einbinden kann:
{|class="wikitable"
! width="33%"; style="background-color:#00bfff" | Das was es bewirken soll
! width="33%"; style="background-color:#00bfff" | Das was du eingibst
! width="33%"; style="background-color:#00bfff" | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Und was dabei heraus kommt &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
|-
| ein Bild in Originalgröße einfügen
| <tt><nowiki>[[Bild:bildbeispiel1.png]]</nowiki></tt>
|[[Bild: bildbeispiel1.png ]]
|-
|ein Bild auf eine bestimmte Größe skalieren
|
<tt><nowiki>[[Bild:bildbeispiel1.png | 50px]]</nowiki></tt>

<tt><nowiki>[[Bild:bildbeispiel1.png | 100px]]</nowiki></tt>

<tt><nowiki>[[Bild:bildbeispiel1.png | 150px]]</nowiki></tt>

<tt><nowiki>[[Bild:bildbeispiel1.png | 200px]]</nowiki></tt>
|
[[Bild: bildbeispiel1.png | 50px ]]

[[Bild: bildbeispiel1.png | 100px]]

[[Bild: bildbeispiel1.png | 150px]]

[[Bild:bildbeispiel1.png|200px]]
|-
|ein Bild rechtsbündig einfügen
|<tt><nowiki>[[Bild:bildbeispiel1.png | right]]</nowiki></tt>
|[[Bild:bildbeispiel1.png|right]]
|-
|ein Bild zentriert einfügen
|<tt><nowiki>[[Bild:bildbeispiel1.png |center]]</nowiki></tt>
|[[Bild:bildbeispiel1.png|center]]
|}
<br>
* Wichtig ist hier, dass ihr den '''exakten Namen des Bildes''' angebt, sonst funktioniert es nicht.