HpBk-TemplateWorld

Textarea

Textarea für HTML-Codes erstellen

Einleitung

Textareas sind eine hilfreiche Methode, Codes übersichtlich und gebündelt zusammenzufassen. Hier auf TemplateWorld befinden sich alle Design-Codes in sogenannten Textareas. Sie haben den Vorteil, dass sie nur wenig Platz benötigen und von den Besuchern mit einem Klick kopiert und bei sich eingefügt werden können.

Schwierigkeitsstufe: Anfänger

Für Textareas gibt es zwei Methoden, sie vom Aussehen her zu gestalten. Im ersten Beispiel gilt folgender Code, der unter "Seiten" im "Quellcode" eures Seiteneditors eingefügt werden muss.

DEIN VOLLSTÄNDIGER CODE>

In diesem Code haben wir der Textarea eine bestimmte Breite und eine bestimmte Höhe mittels der Angaben width: 200px; und height: 100px. Dort, wo jetzt noch DEIN VOLLSTÄNDIGER CODE steht, können wir nun einen kompletten Design-Code einfügen, wie es auch hier auf TemplateWorld der Fall ist. Diese Textarea sollte auf eurer Homepage mit den hier angegebenen Werten folgendermaßen aussehen:

DEIN VOLLSTÄNDIGER CODE

Wir sehen, dass diese Textarea wirklich klein gehalten ist. Ihr könnt also die Werte bei height (Höhe) und width (Breite) natürlich beliebig ändern.

Um das Design anzupassen fügt ihr folgenden CSS-Code unter "Design" - "Erweiterte Designeinstellungen" im Feld "Text über dem Design" ein.

<style type="text/css">
<!--
textarea {    
  width:600px;
  margin:12px 0;
  padding: 20px;
  background-color: #F5F5F5;
  border:1px solid #CCCCCC;
  font:normal 12px/1.8em Arial, Helvetica, sans-serif;
  border-bottom: 2px solid #ebc42b;
}
--></style>

Dieser Code verändert unsere Textarea vollkommen, was das Aussehen angeht. Wir können hier ebenfalls eine feste Breite bestimmen, aber Achtung! Wenn man in diesem CSS-Code eine feste Breite eingibt, bedeutet dies, dass ALLE eure Textareas diese Breite besitzen werden. Deshalb kann ich euch nur raten, es einfach einmal auszuprobieren, wie eure Textareas auf eurer Homepage am besten aussehen.

Kommentare zu dieser Seite:

Kommentar von FireFelix.de.tl( ), 19.03.2011 um 19:48 (UTC):
cooler Tipp! Danke