Tools und Sonderzeichen

#1 von Pukhi , 17.09.2010 12:17

Tools und Sonderzeichen




Unsere Gilden-HomePage ist seit neustem nun auch xHTML-fähig.

Was bedeutet das?
Ganz einfach:
Ihr könnt euer Profil und jeden Beitrag, den ihr schreibt individuell gestalten!
Es gibt unendlich viele Möglichkeiten, wie ihr Modifizierungen an Text, Bildern, Animationen u.v.m. vornehmen könnt!
Gewissermaßen könnt ihr aus jeder Nachricht und jedem Beitrag eine mini-WebSite machen.

Ich kenn mich mit html nicht aus, was nun?
Das ist absolut kein Problem:
Hier werden im Folgenden einige der nützlichsten html-Codes als Vorlagen präsentiert.
Ihr müsst sie dann nur noch [mit strg+c] kopieren, in euren Beitrag [mit strg+v] einfügen und dann den Standardinhalt entsprechend euren Vorstellungen ersetzen.
Keine Sorge, wie das geht ist schnell gezeigt und noch schneller gelernt!
Also viel Spaß beim experimentieren!

Wichtig:
Das Einfügen von Daten, die das Gesamtbild dieser WebSite verändern,
von Spyware und anderer Schädlicher Software, wie
Vieren und Trojaner ist strengstens verboten!
Wer sich dieser Regelung wissentlich wiedersetzt,
hat die strafrechtlichen Konsequenzen dafür zu tragen!


Falls ihr euch über den Ursprung eurer Daten und Ausführungsdateien nicht genau im Klaren seit,
empfiehlt es sich, auf diese zu verzichten.
Alle html-codes aus "Tools und Sonderzeichen" sind absolut bedenkenlos zu nutzen.
Wenn ihr euch also unsicher seit, dann verwendet nur die dort aufgeführten Kommandos.



Also, auf geht's!



Im Folgenden sind die Anführungszeichen inklusive enthaltenem Text ["..."] durch entsprechendes zu ersetzen!








[Dick]


"Text"
Wird dargestellt durch: <b>"Text"</b>


[Kursiv]


"Text"
Wird dargestellt durch: <i>"Text"</i>


[Groß]


"Text"
Wird dargestellt durch: <big>"Text"</big>


[Klein]


"Text"
Wird dargestellt durch: <small>"Text"</small>



[Zentrieren]


"Text"

Wird dargestellt durch: <center>"Text"</center>


[Trennlinie]




Wird dargestellt durch: <hr />

[Absatz]


"Text"
"Text"
Wird dargestellt durch: "Text"<br />"Text"




[Überschriften und Unter-Überschriften; automatische Größenanpassung]


"Überschrift"


"Unter-Überschrift"


"Unter-Unter-Überschrift"


Wird dargestellt durch:
<h3>"Text"</h3>
<h2>"Text"</h2>
<h1>"Text"</h1>




[Listen]




[Einfache Liste]

  • "Text1"

  • "Text2"


Wird dargestellt durch:
<ul>
<li>"Text1"</li>
<li>"Text2"</li>
</ul>




[Automatisch fortzählende Liste]

  1. "Text1"

  2. "Text2"


Wird dargestellt durch:
<ol>
<li>"Text1"</li>
<li>"Text2"</li>
</ol>


Die Anzahl an Listenpunkten ist durch das Einfügen weiterer Code-Zeilen beliebig wählbar.






"Link zur Überschrift 1"
"Link zur Überschrift 2"

"...Textblock..."

"Überschrift 1"


"Überschrift 2"


Wird dargestellt durch:
<a href="#heading1">"Name der 1. Verlinkung"</a>
<a href="#heading2">"Name der 2. Verlinkung"</a>

"...Textblock..."

<h3 id="heading1">"Name des Ziels der 1. Verlinkung"</h3>
<h3 id="heading2">"Name des Ziels der 2. Verlinkung"</h3>

Durch das Hinzufügen weiterer Codezeilen[logischerweise mit fortlaufender "heading[Zahl]" ist diese interne linkliste beliebig fortführbar.

Man kann die Linkliste selbstverständlich auch listenförmig anordnen; z.B. so:


Wird dargestellt durch:
<ul>
<li><a href="#heading1">"Name der 1. Verlinkung"</a></li>
<li><a href="#heading2">"Name der 2. Verlinkung"</a></li>
</ul>










[Bilder]




[Bild einfügen]

Wird dargestellt durch: <img src="Speicherort des Bildes[http://...]" width="Breite in Pixeln" height="Höhe in Pixeln" title="Name des Bildes"/>
Will man die größe des Bildes nicht modifizieren, geht man wie folgt vor:
<img src="[Speicherort des Bildes: http://...]" title="Name des Bildes"/>


[Bild als Link einfügen]



Wird dargestellt durch:
<a href="Ziel des Links[http//:...]">
<img src="Speicherort des Bildes: [http://...]" width="Breite in Pixeln" height="Höhe in Pixeln" title="Name des Bildes"/>
<a/>





[Tabellen]




[Tabelle ohne Grenzlinie]
"1.Spalte, 1.Zeile""2.Spalte, 1.Zeile""3.Spalte, 1.Zeile"
"1.Spalte, 2.Zeile""2.Spalte, 2.Zeile""3.Spalte, 2.Zeile"
"1.Spalte, 3.Zeile""2.Spalte, 3.Zeile""3.Spalte, 3.Zeile"

Wird dargestellt durch:
< table><tr><td>"1.Spalte, 1.Zeile"</td><td>"2.Spalte, 1.Zeile"</td><td>"3.Spalte, 1.Zeile"</td></tr><tr><td>"1.Spalte, 2.Zeile"</td><td>"2.Spalte, 2.Zeile"</td><td>"3.Spalte, 2.Zeile"</td></tr><tr><td>"1.Spalte, 3.Zeile"</td><td>"2.Spalte, 3.Zeile"</td><td>"3.Spalte, 3.Zeile"</td></tr></table>



[Tabelle mit Grenzlinie]
"1.Spalte, 1.Zeile""2.Spalte, 1.Zeile""3.Spalte, 1.Zeile"
"1.Spalte, 2.Zeile""2.Spalte, 2.Zeile""3.Spalte, 2.Zeile"
"1.Spalte, 3.Zeile""2.Spalte, 3.Zeile""3.Spalte, 3.Zeile"

Wird dargestellt durch:
< table border="Dicke des Rahmens[Zahl von 1-9]"><tr><td>"1.Spalte, 1.Zeile"</td><td>"2.Spalte, 1.Zeile"</td><td>"3.Spalte, 1.Zeile"</td></tr><tr><td>"1.Spalte, 2.Zeile"</td><td>"2.Spalte, 2.Zeile"</td><td>"3.Spalte, 2.Zeile"</td></tr><tr><td>"1.Spalte, 3.Zeile"</td><td>"2.Spalte, 3.Zeile"</td><td>"3.Spalte, 3.Zeile"</td></tr></table>

Die Anzahl an Zeilen und Spalten lässt sich beliebig verändern:
Dazu einfach entsprechende html-Zeilen löschen, bis wieder ein bündiger Code entsteht oder neue Code-Zeilen hinzufügen!

Statt dem "Text" in dein einzelnen Feldern lassen sich selbstverständlich auch Bilder einfügen.
Anstelle des Textes einfach Folgendes einfügen:
<img src="Speicherort des Bildes[http://...]" width="Breite in Pixeln" height="Höhe in Pixeln" title="Name des Bildes"/>

Es empfiehlt sich, für alle Bilder einer Tabelle dieselben Höhen- und Breitenangaben zu verwenden.
Auf diese Weise lassen sich auch mehrere Bilder exakt nebeneinander ausrichten.









Wird dargestellt durch:
<form action="Ziel des Links [http://...]">
<input type=submit
value="Hier Buttontext eingeben">
</form>





[Spoiler-Button]







Wird dargestellt durch:
<div class="pre-spoiler">
<input name="button" type="button" onClick="if (this.parentNode.getElementsByTagName('div')[0].style.display != 'none') { this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Zuklappen'; } else { this.parentNode.getElementsByTagName('div')[0].style.display = 'block'; this.value = 'Aufklappen';}" value="Hier Name des Buttons eingeben!">
<div class="spoiler" style="display: none;">"Der Text, der sichtbar gemacht wird"</div>





[Sub-Text]









Wird dargestellt durch:
<head>
<style>
.ta {scrollbar-3dlight-color:;
scrollbar-arrow-color:#006666;
scrollbar-base-color:#006666;
scrollbar-darkshadow-color:#003333;
scrollbar-face-color:#00CCCC;
scrollbar-highlight-color:#00FFFF;
scrollbar-shadow-color:#0099CC
scrollbar-track-color:#000000;}
</style>
</head>
<body>
<textarea cols="[Breite in Zeichenplätzen]" rows="[Höhe in Zeichenplätzen]" wrap=off CLASS="ta">
"Hier den Text eingeben!
"</textarea>
</body>



Ragnaroek Al Pukhi





 
Pukhi
Beiträge: 106
Registriert am: 14.09.2010

zuletzt bearbeitet 19.09.2010 | Top

   

News
Videosammlung


Uhrzeit:
Stunden:
Minuten:
Sekunden:
TeamSpeak³
Quicklinks [zum Öffnen der Links auf das entsprechende Bild klicken]


























Xobor Einfach ein eigenes Xobor Forum erstellen
Datenschutz