DIV

HTML- und CSS-Generator

28. März 2008
von

Auf die Gefahr hin, das es Anderes oder Besseres gibt. Der Markup Generator macht aus einer Struktur ein HTML- und CSS-Gerüst. Das spart viel Arbeit wenn des Öfteren Seiten nach einem ähnlichem Muster angelegt werden müssen. Man nehme eine Struktur wie diese:

markup generator foto

und heraus kommt:

<div id="Kopf">
<div id="Inhalt"></div>
</div>
<div id="Fuss"></div>

Die Einrückung sorgt für eine Verschachtelung der ersten beiden DIVs. Das dazugehörige CSS-Gerüst schaut folgendermaßen aus:

#Kopf { }
#Inhalt { }
#Fuss { }

Auch Klassen können angegeben und Texte bereits eingesetzt werden.

So wird aus:

h1#logo.red=Firmenname

Dieses Markup:

<h1 id="logo" class="red">Firmenname</h1>

Umlaute dürfen nicht benutzt werden.

 foto

Sven Lennartz

Sven ist der Erfinder des Dr. Web Magazins, Autor und Herausgeber verschiedener Fachbücher. Als Webdesigner und Texter früher freiberuflich für verschiedene Unternehmen und Verlage tätig. Jetzt Geschäftsführer der Smashing Media GmbH.

9 Kommentare zu „HTML- und CSS-Generator

  1. Kevin am 28. März 2008 um 00:11

    Bei solchen Tools stelle ich mir immer die Frage, welcher Webentwickler so ein Gedönse braucht? Otto-Normal User nimmt Dreamweaver, ein CMS, Blog o.ä. und die Profis schreiben Ihre Code eh per Hand…

    Naja, vielleicht hilfts ja dem ein oder anderen Einsteiger ;)

  2. Sven Lennartz am 28. März 2008 um 00:20

    ob es darum wohl ging?

  3. Tobi am 28. März 2008 um 00:36

    Also ich find’s nicht schlecht, zumal ich WYSIWYG-Editoren grundsätzlich misstrauisch gegenüberstehe und gerne das Coding selber durch die Gegend schubse. Da kommt mir so ein kleines Tool gerade recht.

    Danke für den Tipp!

  4. ~~~d(o.o)b~~~ am 28. März 2008 um 07:24

    Ich bin neulich schon über dieses Tool gestolpert und finde die Idee gar nicht so übel…
    Ich schreibe meinen Code gewöhnlich auch selbst – kein Thema… Trotzdem erspart dieses Tool Schreibarbeit und wenn man mal auf die Schnelle ein Grundgerüst benötigt, ist das Teil doch ganz praktisch und sinnvoll…

    hAVE pHUN
    ~~~d(o.o)b~~~

  5. Tanja am 28. März 2008 um 10:50

    Also ich bin der Meinung man sollte nicht so viel von Tools generieren lassen. Schließlich sollte man auch die Hintergründe und die Struktur eines Quellcodes kennen.

    Tanja

  6. David am 28. März 2008 um 11:42

    Ist eigentlich ganz lustig und funktioniert anscheinend auch super aber so viel codearbeit spart man sich auch nicht. nur das lästige “/” “” Tippen fällt weg.

  7. Carrera4 am 28. März 2008 um 17:59

    Also ganz meine Meinung von Kevin!
    Es gibt soviele Editors die diese Funktion hier standartmässig beinhalten….

  8. JanB am 30. März 2008 um 22:46

    Geniales Teil, ideal zum Anfang eines Projekts. Danke für den Link ;)

  9. Ralph am 1. April 2008 um 08:40

    Wenn man den Code öfters selbst schreibt, sollte man sich doch bereits Vorlagen erarbeitet haben ;)

    Ralph

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!

*