Kokosmakronen

Eigentlich sind Kokosmakronen bei uns ja eher an Weihnachten angesagt, aber dennoch stelle ich euch jetzt mal das Rezept online.

Dazu braucht ihr: 

250 g Kokosraspeln

250 g Zucker

4 Eiweiß

evtl. Oblaten

evtl Schokoglasur

Als erstes müsst ihr das Eiweiß steif schlagen. Die Kokosraspeln und den Zucker erst einmal mischen und dann nach und nach unter den Eischnee heben. Mit einem Löffel formt ihr nur kleine Häufchen und legt sie auf ein Backblech mit Backpapier. Wer möchte kann Oblaten unter die Makronen legen, das ist aber nicht zwingend nötig und eine reine Geschmackssache. Bei 170° steckt ihr sie nun für 15 Minuten in den Ofen, lasst sie nochmal 5 Minuten länger drin, falls ihr sie für zu hell erachtet.

Haben sie die gewünschte Bräunung erreicht, holt das Blech aus dem Ofen und lasst es abkühlen. Sind die Makronen dann halt, löst ihr etwas Kuvertüre eurer Lieblingssorte auf und verteilt etwas über die Makronen. Erfahrungsgemäß passt Zartbitterschokolade am besten dazu, das ist aber eurem Geschmack überlassen.

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.