In folgenden Abschnitt sehen Sie die typografischen Eigenschaften des ALLROUNDER Templates im Detail. Als Typografie bezeichnet man die Gestaltung der HTML Elemente, auf welche der Betreiber der Seite später per HTML Code in Beiträgen Zugriff hat. Weiters sehen Sie hier wie Sie vorgehen müssen wenn sie die HTML Elemente ansprechen wollen um diese in Beiträgen zu verwenden. Viel Spass beim durchstöbern Ihrer Code-elemente!
Eine horizontale Linie
Der hr Tag wird wird eingesetzt um eine horizontale Linie in einen Beitrag auszugeben.
<hr>
Gibt man hier einen Klassennamen an, so verändert er sich wie folgt:
<hr class="black">
<hr class="blue">
<hr class="red">
<hr class="green">
Überschriften Ordnung eins bis sechs
<h1>
Überschrift der ersten Ordnung
<h1 class="info">
H1-Tag mit Klassennamen info
<h1 class="right">
H1-Tag mit Klassennamen right
<h1 class="alert">
H1-Tag mit Klassennamen alert
<h1 class="tell">
H1-Tag mit Klassennamen tell
<h1 class="content">
H1-Tag mit Klassennamen content
<h1 class="note">
H1-Tag mit Klassennamen note
<h2>
Überschrift der zweiten Ordnung
<h3>
Überschrift der dritten Ordnung
<h3 class="section">
H3-Tag mit Klassennamen section:
<h4>
Überschrift der vierten Ordnung
<h5>
Überschrift der fünften Ordnung
<h6>
Überschrift der sechsten Ordnung
Spezielle DIV's
<div class=info>
Div Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen.
Sofern man dem div einen Klassennamen mitgibt, wird es so formatiert wie in dieser Demo.
<div class=right>
Div Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen.
Sofern man dem div einen Klassennamen mitgibt, wird es so formatiert wie in dieser Demo.
<div class=alert>
Div Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen.
Sofern man dem div einen Klassennamen mitgibt, wird es so formatiert wie in dieser Demo.
<div class=tell>
Div Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen.
Sofern man dem div einen Klassennamen mitgibt, wird es so formatiert wie in dieser Demo.
<div class=content>
Div Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen.
Sofern man dem div einen Klassennamen mitgibt, wird es so formatiert wie in dieser Demo.
<div class=note>
Div Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen.
Sofern man dem div einen Klassennamen mitgibt, wird es so formatiert wie in dieser Demo.
<div class=contenthead>
Div Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen.
Sofern man dem div einen Klassennamen mitgibt, wird es so formatiert wie in dieser Demo.
<div class=contenthead-dark>
Div Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen.
Sofern man dem div einen Klassennamen mitgibt, wird es so formatiert wie in dieser Demo.
<div class=contenthead-blue>
Div Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen.
Sofern man dem div einen Klassennamen mitgibt, wird es so formatiert wie in dieser Demo.
<div class=contenthead-red>
Div Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen.
Sofern man dem div einen Klassennamen mitgibt, wird es so formatiert wie in dieser Demo.
<div class=contenthead-green>
Div Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen.
Sofern man dem div einen Klassennamen mitgibt, wird es so formatiert wie in dieser Demo.
<div class=hot>
Div Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen.
Sofern man dem div einen Klassennamen mitgibt, wird es so formatiert wie in dieser Demo.
<div class=new>
Div Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen.
Sofern man dem div einen Klassennamen mitgibt, wird es so formatiert wie in dieser Demo.
<div class=top>
Div Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen.
Sofern man dem div einen Klassennamen mitgibt, wird es so formatiert wie in dieser Demo.
<div class=cols-3>
<div>Inhalt der Spalte 1</div>
<div>Inhalt der Spalte 2</div>
<div>Inhalt der Spalte 3</div>
</div>
Spalte 1
Dies ist die erste von drei Spalten. Dieses Spaltenlayout eigent sich hervrragend zur optischen Trennung von Text, was die Lesbarkeit erhöht.
Spalte 2
Dies ist die zweite von drei Spalten. Dieses Spaltenlayout eigent sich hervrragend zur optischen Trennung von Text, was die Lesbarkeit erhöht.
Spalte 3
Dies ist die dritte von drei Spalten. Dieses Spaltenlayout eigent sich hervrragend zur optischen Trennung von Text, was die Lesbarkeit erhöht.
<div class=cols-2>
<div>Inhalt der Spalte 1</div>
<div>Inhalt der Spalte 2</div>
</div>
Spalte 1
Dies ist die erste von zwei Spalten. Dieses Spaltenlayout eigent sich hervrragend zur optischen Trennung von Text, was die Lesbarkeit erhöht.
Spalte 2
Dies ist die zweite von zwei Spalten. Dieses Spaltenlayout eigent sich hervrragend zur optischen Trennung von Text, was die Lesbarkeit erhöht.
Spezielle Absätze:
Ein Tip Text welcher dazu verwendet werden kann um spezielle gut sichtbare Tips von sich zu geben. Der Code hierfür lautet wie folgt:
<p class="tip">
Ein Alarm Text welcher dazu verwendet werden kann um spezielle gut sichtbare Alarmmeldungen von sich zu geben. Der Code hierfür lautet wie folgt:
<p class="alert">
Preformatierter Text:
<pre>
Dies ist ein preformatierter Text. Ein preformatierter
Text eignet sich hervorragend um zum Beispiel
ein Stück Code in einen Beitrag aufzunehmen und anzuzeigen. Beispiel gefällig?
<pre class="css">
#wrapper {
background: #efefef;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #ccc;
}
<pre class="html">
<body style="background:#fff; color:#000;">
<!-- Content -->
</body>
<pre class="xml">
<files>
<filename>index.php</filename>
<filename>head_includes.php</filename>
<filename>index.html</filename>
<files>
<pre class="js">
var Tips3 = new Tips($$('#tip-gray'), {
className: 'gray',
showDelay: 100,
hideDelay: 400,
});
Code Text:
<code> Dies ist ein Code Text. Eigentlich gedacht um Code zu auf HTML zu posten muss man feststellen, dass sich der <pre> Tag dazu besser eignet. Preformatierter Text nimmt auch Leerstellen als ganzes und füllt diese in der Anzeige von Texten auf. So ist es möglich code zu kopieren ohne dass die Leerstellen in der Anzeige später entfernt werden und der Code verückt/einrückt.</code>
Ein Zitat Block
<blockquote>
Dies ist ein Zitat Block mit Textinhalt. Zitate bilden des öfteren eine schicke Bereicherung für eine Webseite. So kann man Zitate sehr gut nutzen um andere Quellen zu zitieren oder einfach den eigenen Beitrag etwas aufbessern indem man seinen verfassten Text mit einem blockquote Tag umschließt.
Listen
Eine unsortierte Liste
<ul>
- Listenpunkt 1.1
- Listenpunkt 1.2
- Listenpunkt 1.3
- Listenpunkt 1.3.1
- Listenpunkt 1.3.2
- Listenpunkt 1.3.3
- Listenpunkt 1.3.3.1
- Listenpunkt 1.3.3.2
- Listenpunkt 1.3.3.3
- Listenpunkt 1.3.3.4
- Listenpunkt 1.3.3.5
- Listenpunkt 1.3.4
- Listenpunkt 1.3.5
- Listenpunkt 1.4
- Listenpunkt 1.5
Eine unsortierte Liste mit dem Klassennamen arrow
<ul class="arrow">
- Listenpunkt 1.1
- Listenpunkt 1.2
- Listenpunkt 1.3
- Listenpunkt 1.3.1
- Listenpunkt 1.3.2
- Listenpunkt 1.3.3
- Listenpunkt 1.3.3.1
- Listenpunkt 1.3.3.2
- Listenpunkt 1.3.3.3
- Listenpunkt 1.3.3.4
- Listenpunkt 1.3.3.5
- Listenpunkt 1.3.4
- Listenpunkt 1.3.5
- Listenpunkt 1.4
- Listenpunkt 1.5
Eine unsortierte Liste mit dem Klassennamen folder
<ul class="folder">
- Listenpunkt 1.1
- Listenpunkt 1.2
- Listenpunkt 1.3
- Listenpunkt 1.3.1
- Listenpunkt 1.3.2
- Listenpunkt 1.3.3
- Listenpunkt 1.3.3.1
- Listenpunkt 1.3.3.2
- Listenpunkt 1.3.3.3
- Listenpunkt 1.3.3.4
- Listenpunkt 1.3.3.5
- Listenpunkt 1.3.4
- Listenpunkt 1.3.5
- Listenpunkt 1.4
- Listenpunkt 1.5
Eine unsortierte Liste mit dem Klassennamen ok
<ul class="ok">
- Listenpunkt 1.1
- Listenpunkt 1.2
- Listenpunkt 1.3
- Listenpunkt 1.3.1
- Listenpunkt 1.3.2
- Listenpunkt 1.3.3
- Listenpunkt 1.3.3.1
- Listenpunkt 1.3.3.2
- Listenpunkt 1.3.3.3
- Listenpunkt 1.3.3.4
- Listenpunkt 1.3.3.5
- Listenpunkt 1.3.4
- Listenpunkt 1.3.5
- Listenpunkt 1.4
- Listenpunkt 1.5
Eine unsortierte Liste mit dem Klassennamen star
<ul class="star">
- Listenpunkt 1.1
- Listenpunkt 1.2
- Listenpunkt 1.3
- Listenpunkt 1.3.1
- Listenpunkt 1.3.2
- Listenpunkt 1.3.3
- Listenpunkt 1.3.3.1
- Listenpunkt 1.3.3.2
- Listenpunkt 1.3.3.3
- Listenpunkt 1.3.3.4
- Listenpunkt 1.3.3.5
- Listenpunkt 1.3.4
- Listenpunkt 1.3.5
- Listenpunkt 1.4
- Listenpunkt 1.5
Eine geordnete Liste
<ol>
- Listenpunkt 1.1
- Listenpunkt 1.2
- Listenpunkt 1.3
- Listenpunkt 1.3.1
- Listenpunkt 1.3.2
- Listenpunkt 1.3.3
- Listenpunkt 1.3.3.1
- Listenpunkt 1.3.3.2
- Listenpunkt 1.3.3.3
- Listenpunkt 1.3.3.4
- Listenpunkt 1.3.3.5
- Listenpunkt 1.3.4
- Listenpunkt 1.3.5
- Listenpunkt 1.4
- Listenpunkt 1.5
Hyperlinks
<a>
Ein normaler Hyperlink
<a class="info">
Ein info Hyperlink
<a class="extern">
Ein externer Hyperlink
<a class="www">
Ein www Hyperlink
<a class="download">
Ein Download Hyperlink
<a class="run">
Ein run Hyperlink
<a class="image">
Ein image Hyperlink
<a class="user">
Ein user Hyperlink
<a class="pdf">
Ein pdf Hyperlink
<a class="zip">
Ein zip Hyperlink
<a class="text">
Ein text Hyperlink
<a class="sound">
Ein sound Hyperlink
<a class="video">
Ein video Hyperlink
Tabellen
<table>
| Tabellenplatz 1 | Tabellenplatz 2 |
| Tabellenplatz 3 |
Tabellenplatz 4 |
| Tabellenplatz 5 |
Tabellenplatz 6 |
| Tabellenplatz 7 |
Tabellenplatz 8 |
| Tabellenplatz 9 |
Tabellenplatz 10 |
Tabelle mit dem Klassennamen gray
<table class="gray">
| Tabellenplatz 1 |
Tabellenplatz 2 |
| Tabellenplatz 3 |
Tabellenplatz 4 |
| Tabellenplatz 5 |
Tabellenplatz 6 |
| Tabellenplatz 7 |
Tabellenplatz 8 |
| Tabellenplatz 9 |
Tabellenplatz 10 |
Tabelle mit dem Klassennamen blue
<table class="blue">
| Tabellenplatz 1 |
Tabellenplatz 2 |
| Tabellenplatz 3 |
Tabellenplatz 4 |
| Tabellenplatz 5 |
Tabellenplatz 6 |
| Tabellenplatz 7 |
Tabellenplatz 8 |
| Tabellenplatz 9 |
Tabellenplatz 10 |
Tabelle mit dem Klassennamen red
<table class="red">
| Tabellenplatz 1 |
Tabellenplatz 2 |
| Tabellenplatz 3 |
Tabellenplatz 4 |
| Tabellenplatz 5 |
Tabellenplatz 6 |
| Tabellenplatz 7 |
Tabellenplatz 8 |
| Tabellenplatz 9 |
Tabellenplatz 10 |
Tabelle mit dem Klassennamen yellow
<table class="yellow">
| Tabellenplatz 1 |
Tabellenplatz 2 |
| Tabellenplatz 3 |
Tabellenplatz 4 |
| Tabellenplatz 5 |
Tabellenplatz 6 |
| Tabellenplatz 7 |
Tabellenplatz 8 |
| Tabellenplatz 9 |
Tabellenplatz 10 |
Tabelle mit dem Klassennamen white
<table class="white">
| Tabellenplatz 1 |
Tabellenplatz 2 |
| Tabellenplatz 3 |
Tabellenplatz 4 |
| Tabellenplatz 5 |
Tabellenplatz 6 |
| Tabellenplatz 7 |
Tabellenplatz 8 |
| Tabellenplatz 9 |
Tabellenplatz 10 |
Tooltips via Mootools
Code
- <a id="tip-fade" title="Tooltip Title :: Hyperlink - Tooltip - Fade !" href="#">Hyperlink - Tooltip - Fade</a>
- <a id="tip-white" title="Tooltip Title :: Hyperlink - Tooltip - Weiss !" href="#">Hyperlink - Tooltip - Weiss</a>
- <a id="tip-gray" title="Tooltip Title :: Hyperlink - Tooltip - Grau !" href="#">Hyperlink - Tooltip - Grau</a>
- <a id="tip-blue" title="Tooltip Title :: Hyperlink - Tooltip - Blau !" href="#">Hyperlink - Tooltip - Blau</a>
- <a id="tip-green" title="Tooltip Title :: Hyperlink - Tooltip - Grün!" href="#">Hyperlink - Tooltip - Grün</a>
- <a id="tip-red" title="Tooltip Title :: Hyperlink - Tooltip - Rot!" href="#">Hyperlink - Tooltip - Rot</a>
Ergebnis
<img id="tip-white" title="Tooltip Title :: Ein Bild mit weissem Tooltip !" src="/images/stories/modulpositonen.png" />
Bilder
<img class="border-dark">
<img class="border-light">
Dropcap:
Das ist ein Dropcap! Dropcaps werden zur Auschschmückung von Textblöcken verwendet. Besonders ansehentlich ist ein Dropcap wenn er den Beginn eines neuen Abschnitts markiert. Um einen Dropcap zu benutzen umschließt man den Anfangsbuchstaben der ersten Wortes eines Absatzes mit einem span Tag dass den Klassennamen dropcap hat.
<span class="dropcap">D</span>as ist ein Dropcap! ...
Zuletzt aktualisiert am Donnerstag, den 23. Dezember 2010 um 16:27 Uhr
Geschrieben von: Webmaster
Donnerstag, den 15. Juli 2010 um 20:16 Uhr