Aus Das deutschsprachige Scratch-Wiki
In den vorherigen Kapiteln hast du gelernt, wie du mithilfe von verschiedensten Formatierungsmöglichkeiten deine Artikel optisch aufwerten kannst. Wichtig beim Erstellen von Artikeln ist aber nicht nur die Optik, sondern auch die Gliederung und Ordnung der einzelnen Elemente. Nachfolgend erhälst du einen Einblick in das Ordnen von Inhalten mithilfe von <div>'s und Tabellen.
Ordnen mit dem <div> Element
Das <div>-Element dient zum Gruppieren von Elementen in HTML und im Wiki-Syntax. Du kannst es benutzen, um Informationsblöcke zu erstellen oder um das Aussehen einer ganzen Gruppe von Elementen zu verändern.
Die Verwendung ist ziemlich simpel: Umschließe deine zu gruppierenden Elemente mit <div> und </div>. Allein dadurch wird die Gruppe vom Rest des Artikels abgetrennt.
Beispiel 1
<div>
Im Alphabet sind alle Buchstaben (ohne Umlaute) unserer Sprache zu finden.
[[Datei:A.png|Der Buchstabe A]]
</div>
Das ergibt:
Im Alphabet sind alle Buchstaben (ohne Umlaute) unserer Sprache zu finden. Der Buchstabe A
Beispiel 2
Möchtest du nun noch einen Rahmen um die Gruppe ziehen, schreibst du:
<div style="border: 1px red solid">Inhalt</div>
Das ergibt:
Attribute
Wir haben dem div gerade in Beispiel 2 das Attribut style mit dem Wert border: 1px red solid zugeteilt. Zum Ordnen brauchen wir besonders das Attribut align. Es bedeutet etwa so viel wie Ausrichtung. Diesem Attribut können wir dann einen Wert zuteilen. Davon haben wir 3 Stück zur Auswahl:
- right (rechts)
- left (links)
- center (mitte)
Ein Beispiel:
<div align="right">Text 1</div>
<div align="left">Text 2</div>
<div align="center">Text 3</div>
ergibt:
Ordnen mit Tabellen
Manchmal ist es jedoch besser, manche seiner Inhalte mit Tabellen zu ordnen, z.B. wenn man ein Inhaltsverzeichnis für seine Unterseiten erstellt (Beispiel siehe Bild). Um gleichmäßige Abstände zwischen Seitentiteln und der Beschreibung zu erhalten, wird eine Tabelle eingesetzt. Das Ergebnis sieht aus wie im Bild rechts.
[wiki=de:Scratch-Wiki:Hilfe:Ordnen mit div und Tabellen]Hilfe:Ordnen mit div und Tabellen[/wiki]
