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.