html Tutorial 4 von 4 - Scrollfeld und Spoiler

Und damit kommen wir auch schon zum letzten Teil des html Tutorials.
Heute geht es darum, wie man ein Scrollfeld einrichtet und wie man einen Spoilerbutton zum Aufklappen macht.
Fangen wir also gleich mit dem Scrollfeld an.
<*div style="text-align:center;font-size:Schriftgrößept;overflow:auto;width:Breitepx;font-family:arial;height:Höhepx;margin:auto;padding:10px;"> Text </*div>

Hier seht ihr ein Beispiel
ihr könnt auch Bilder oder Tabellen hier einfügen.

der Spoilerbutton ist dann schon etwas komplizierter
<*div class="pre-spoiler">
<*input name="button" onclick="if (this.parentNode.getElementsByTagName('div')[0].style.display != 'none') { this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Buttonaufschrift'; } else { this.parentNode.getElementsByTagName('div')[0].style.display = 'block'; this.value = 'Buttonaufschrift';}" type="button" value="Buttonaufschrift" />
<*div class="spoiler" style="display: none;">Text</*div>

 Das Ganze sieht dann in der Umsetzung so aus:

Hier seht ihr ein Beispiel
ihr könnt auch Bilder oder Tabellen hier einfügen.

Damit sind wir auch schon am Ende unsere Tutorials. Ich hoffen es konnte einigen von euch helfen und wäre auch über ein Feedback froh. Falls noch jemand Fragen hat oder Hilfe braucht, dann könnt ihr mir gerne einen Kommentar hinterlassen, oder mir einfach eine Mail schreiben, indem ihr links auf den Button mit dem Briefumschlag klickt.

html Tutorial 3 von 4 - Bilder

Und wie versprochen geht es schon weiter mit dem html Tutorial.
Als erstes hatten wir die Grundlagen und anschließend die Tabellen, jetzt wollen wir uns das Einfügen von Bildern näher anschauen. Es gibt verschiedene Arten Bilder einzufügen. Ich werde euch zwei bzw. drei Varianten zeigen.

In den folgenden Codes müsst ihr euch den * wegdenken, den trage ich in den Beispielen ein, damit ihr die Codes lesen könnt. In den Klammern [ ] sind kurze Erklärungen zum Code.

1. Variante
<*img alt="Dateiname [kann man aber auch ignorieren]" src="Link" style="border-radius:Abrundungsradius%; border-style:solid; height:Höhepx; margin:5px; width:Breitepx" />

Damit bekommt ihr runde oder abgerundete Bilder hin, indem ihr den Radius einstellst.

Radius auf 10%	Radius auf 30%	Radius auf 50%

2. Variante
<*img src="Link" />

Damit setzt ihr ein einfaches Bild rein in Originalgröße, mit der Erweiterung style="width:Weitepx" könnt ihr auch die Größe einstellen. Das ganze sähe dann so aus:
<*img src="Link" style="width: Weitepx" />
3. Variante
<*a href="Link"><*img alt="Dateiname [kann man auch ignorieren]" src="Link" style="width: Weitepx;" />
Hierbei verlinkt ihr ein Bild. Ihr könnt zB. den Direktlink des Bildes angeben, damit man das Bild anklicken und es sich in Originalgröße anschauen kann. Ihr könnt aber auch den Link im a href Bereich austauschen und zu einer anderen Webseite verlinken. Das gleiche funktioniert auch mit dem Mail verlinken. Dabei tauscht ihr einfach den Link im a href Bereich durch mailto:Mailadresse aus. So macht man zB. auch Buttons.

    mit Direktlink zum Bild                           mit verlinkter Mailadresse
So das war auch schon der dritte Teil des Tutorials. Im nächsten geht es dann mit einem Scrollfeld und dem Spoilerbutton zum Aufklappen weiter.

html Tutorial 2 von 4 - Tabellen

Und wie versprochen geht es schon weiter mit dem html Tutorial.

In den folgenden Codes müsst ihr euch den * wegdenken, den trage ich in den Beispielen ein, damit ihr die Codes lesen könnt. In den Klammern [ ] sind kurze Erklärungen zum Code.
Fangen wir mit einer einfachen Tabelle an.
 Beispiel:
 <*table border="Zahl von 0 bis ..."> [mit der Zahl könnt ihr die Umrandung eurer Tabelle ändern]
  <*tbody>
    <*tr> [Tabellenzeile]
      <*td> [Tabellenspalte, 
                       hiervon könnt ihr so viele nebeneinander setzen, wie in euer Fenster passt.]
              dein Text
      </*td> 
    </*tr>
  </*tbody> 
</*table>
und so sieht das Ganze dann aus hier mit zwei Zeilen à zwei Spalten

mit border="0"       Text1 Text2 Text3 Text4

mit border="1"       Text1 Text2 Text3 Text4

mit border="2"        Text1 Text2 Text3 Text4

mit border="3" Text1 Text2 Text3 Text4

Wie ihr seht wird die Umrandung stärker, je höher ihr mit dem border geht.
Soweit zur einfachen Tabelle. Wir wollen aber nun keine einfache Tabelle, sondern eine Tabelle mit Hintergrundbild.
<*table border="0" cellspacing="30" style="background-image: url(Link); height: Höhepx; margin-left: auto; margin-right: auto; width: Breitepx;>
anschließend geht es wie oben weiter.
Das ganze geht natürlich auch noch weiter, so dass wir in die vorhandene Tabelle mit Hintergrundbild eine weitere Tabelle setzen können. Das sieht dann wie folgt aus:
<*table border="0" cellspacing="30" style="background-image: url(Link); height: Höhepx; margin-left: auto; margin-right: auto; width: Breitepx;>
  <*tbody>
    <*tr>
      <*table>
        <*tbody>
          <*tr>
            <*td>
              Text
            </*td>
          </*tr>
        </ *tbody>
      </*table>
    </*tr>
  </*tbody>
</*table>

So könnte das Ganze dann aussehen

So .... das war es vorerst mit den Tabellen. Im nächsten Part dieses vierteiligen Tutorials zeige ich euch drei verschiedene Möglichkeiten Bilder im htmlmodus zu platzieren.

html Tutorial 1 von 4 - Grundlagen

Meiner Erfahrung nach haben sehr viele Probleme damit ihre htmlcodes zu programieren, bzw wissen einfach nicht wie es geht. Ich habe gerade einer Freundin erklärt wie sie ihre Beschreibung für ihr RPG auf Animexx programmieren muss und dachte, dass es vielleicht einigen hilft, wenn ich hier einfach mal das Wichtigste zusammen trage. Die html Codes funktionieren natürlich nicht nur auf Animexx, sondern auch unter anderem hier bei Blogger.
Ich werde das ganze allerdings nicht als einen Post machen, denn das wäre wirklich etwas zu viel auf einmal.
Daher habe ich überlegt, dass ich das Tutorial in vier Einzelposts aufteilen werde.
1. Grundlagen
2. Tabellen
3. Bilder
4. Scrollen und Spoilerbutton

In den folgenden Codes müsst ihr euch den * wegdenken, den trage ich in den Beispielen ein, damit ihr die Codes lesen könnt. In den Klammern [ ] sind kurze Erklärungen zum Code.
Wir fangen heute mit den Grundlagen an.

zum Fett schreiben   <*b>Text</*b>

zum kursiv schreiben   <*i>Text</*i>

zum Unterstreichen   <*u>Text</*u>

zum Durchstreichen   <*strike>Text</*strike>

zum _unter setzen   <*sub>Text</*sub>

zum ^hoch setzen   <*sup>Text</*sup>

zum Einfärben   <*span style="color:#Farbnummer">Text</*span>
die Farbnummer findet ihr zB. in Photoshop, indem ihr mit Doppelklick auf eure Vorder- oder Hintergrundfarbe klickt und dann eure Farbe auswählt. Die Farbnummer steht nun ganz unten.
zum Größe verändern   <*span style="font-size:Größepx">Text</*span>

um ein Wort mit einer Webseite zu verlinken   <*a href="Link" target="_blank">Text</*a>

um Worte mit einer Mailadresse zu verlinken   <*a href="Emailadresse" target="_blank">Text</*a>

Das war der erste Teil des Tutorials. Im nächsten Teil zeige ich euch dann wie man Tabellen einfügt.

GIF Dateien zuschneiden

Kennt ihr das, wenn ihr im Internet, ob über Google oder über tumbler eine gif Datei sucht, ihr aber entweder nicht das findet was ihr sucht, oder sie einfach das falsche Format hat für das was ihr machen möchtet. Die Lösung für das Problem: zu große gif Dateien einfach selbst zuschneiden.
Wie das geht zeige ich euch im folgenden Video.
Als Beispiel nehme ich ein gif, das ich über tumbler gefunden habe.
Wir wollen jetzt dieses querformat gif auf größe eines Avatars zuschneiden.
zum Vergleich hier schonmal die original Datei

bevor wir aber anfangen können solltet ihr kontrollieren ob und welchen QuickTimeplayer ihr auf eurem Rechner installiert habt. Ihr solltet mindestens QuickTime 7.1 installiert haben. Falls ihr ihn noch nicht habt findet ihr ihn hier.

und so sieht dann am Ende das Ergebnis aus 

Silk - A magical interactive artwork

Ich habe neulich eine wirklich witzige Seite entdeckt, die ich euch nun vorstellen möchte der Name der Seite ist Silk. Auf dieser Seite könnt ihr egal ob mit Maus, oder Grafiktablett wunderschöne Spiegelzeichnungen machen. Ich habe euch den ganzen Prozess mal aufgenommen, um euch kurz zu erklären, wie es funktioniert. Die immer zuerst ausgewählte Farbe ist Blau, diese könnt ihr aber unten links in der Ecke, wo ihr den Blauen Kasten seht ändern. 

Zur Wahl stehen: Grau, Pink, Gelb, Rot, Grün und Blau. 

Nachdem ihr die Zeichnung eurer Meinung nach beendet habt könnt ihr sie natürlich auch mit anderen teilen, indem ihr oben links auf Share geht. So könnt ihr es mit euren Freunden auf Facebook und Twitter teilen, oder es per Mail, oder Direktlink verschicken. Seid ihr mit eurer Zeichnung fertig und wollt nochmal von vorne beginnen, geht einfach oben links auf Clear und ihr habt wieder den anfänglichen Blackscreen und könnt wieder von vorne loslegen. 

Den Link zu der Seite findet ihr hier! → Klick mich!

Speed Colo 2

und hier habt ihr die versprochene Chibiversion von Lu und meinem anderen OC 

aus meiner geplanten Kurzgeschichte
hat jemand schon eine Idee, worum es gehen könnte?
bzw hat schon jemand einen Verdacht, wer oder was Lu wirklich ist? xD

und hier das Endprodukt:

Speedcolo 1

ich hab heute meine erste Speed Coloration gemacht ..

hier seht ihr das Ergebnis

ich habe nur eine schnell eine Skizze von meinem OC Lu nachgezeichnet und dann coloriert

für das ganze habe ich etwa eine halbe Stunde gebraucht 

.GIF-Tutorial Part 1

FORTSETZUNG FOLGT.....