Einfaches HTML zum Formatieren von Pageballs




Platz #47 in Pageballs Tipps, #2189 insgesamt
4.5
Durchschnitt: 4.5 (4 Bewertungen)

Es ist nicht schwer

Einfaches HTML zum Formatieren von Pageballs
Pageballs Tutorial

Texte von einem Pageball kann man mit Hilfe von HTML formatieren. Dazu gehört der Textbaustein zu Beginn, aber auch die 10 Text-Bausteine, die man über die Seitenleiste "Bausteine hinzufügen" an seinen Pageball hängen kann.


Es ist sehr zu empfehlen, die zusätzlichen Textbausteine zu nutzen, damit Texte nicht zu lang erscheinen.


Mit den HTML Befehlen kann man einen Text schöner und leserlicher machen. Man sollte es aber nicht übertreiben, da dies unter Umständen anstregend für den Leser werden kann.


Dieser Pageball zeigt kurz, anhand von einfachen Beispiel, wie man einige HTML Befehle verwendet, und was sie bewirken.

Einfache Formatierung von Text

3 Möglichkeiten, 5 HTML Befehle

Die beiden HTML Befehle <strong> und <b> bewirken genau dasselbe: sie machen einen Text fett.

Dazu muss man entweder einen Text mit einem HTML Befehl "einschließen", wie in diesem Beispiel


normaler text und <strong>dieser text soll fett werden</strong> und dieser hier ist wieder normal

Wieso auch immer, aber HTML erlaubt es auch den Befehl b anstatt von strong zu verwenden:


<b>auch fett</b>

Das Ergenis sieht in beiden Fällen so aus:

fett
auch fett


Mit den folgenden beiden Befehlen, kann man einen Text kursiv machen:


<em>schräg</em>
<i>auch schräg</i>

Ergebnis:

schräg
auch schräg


Und als letztes kann man auch einen Text unterstreichen:


<u>unterstrichen</u>

Ergebnis:
unterstrichen

Links

Funktionieren von allein

Einfach den Link einfügen oder die E-Mail, alles Weitere funktioniert von alleine.

www.pageballs.com
ideas@pageballs.com

Zeilenumbrüche mit HTML

br und p

Um für einen gewollten Zeilenumbruch zu erzeugen, kann man <br> verwenden. Dieser Befehl kann einfach so in den Text gesetzt werden, ohne dass er, wie im vorherigen Beispiel, geschlossen werden muss.


Eine Zeile<br>Noch eine Zeile

Ergebnis:

Eine Zeile
Noch eine Zeile

Möchte man nur etwas Platz schaffen, dann kann man mit der Taste ENTER Zeilenumbrüche setzen und zwischen zwei Zeilen <br> verwenden.

Beispiel:

Eine Zeile
<br>
Noch eine Zeile

Ergebnis:

Eine Zeile


Noch eine Zeile


Alternativ kann man mit <p>Ein Text</p> auch einen Text umschließen, und so für einen Zeilenumbruch sorgen.

Das Beispiel:

<p>Ein etwas längerer, nicht besonders kreativer, Text, um zu zeigen, wie p funktioniert.</p> <p>Das war schon mal eine Zeile, aber jetzt muss ich mir noch eine zweite Zeile einfallen lassen.</p>

Und so sieht das Ergebnis aus:

Ein etwas längerer, nicht besonders kreativer, Text, um zu zeigen, wie p funktioniert.

Das war schon mal eine Zeile, aber jetzt muss ich mir noch eine zweite Zeile einfallen lassen.

Ein paar Flickr-Bildchen zum Auflockern des Textes, die mit dem Flickr-Baustein erstellt wurden - puuhhh

Listen mit HTML formatieren

unsortiert und sortiert

Listen machen einen Text nicht nur lesbarer, sie sind auch beliebt bei Suchmaschinen. Es gibt zwei Varianten, die unsortierte (nur Bullets) und die sortierte (nummeriert).

Jeder Eintrag wird mit <li></li> eingeschlossen und die gesamte Liste zu Beginn mit einem <ul> oder <ol> eröffnet. Am Ende schließt man die Liste mit </ul> bzw. </ol>, je nachdem für welche der beiden Varianten man sich entschieden hat.


Variante 1 (unsortiert):


<ul>
<li>liste - eintrag 1</li>
<li>liste - eintrag 2</li>
</ul>

Und so sieht das Ergebnis aus:


  • liste - eintrag 1
  • liste - eintrag 2




Variante 2 (sortiert):


<ol>
<li>sortierte liste - eintrag 1</li>
<li>sortierte liste - eintrag 2</li>
</ol>

sieht so aus:


  1. sortierte liste - eintrag 1
  2. sortierte liste - eintrag 2

Überschriften mit HTML formatieren

Von h1 bis h4

Mit den folgenden HTML Befehlen kannst du eigene Überschriften in den Text einfügen:

<h1>Überschrift 1</h1>
<h2>Überschrift 1</h2>
<h3>Überschrift 1</h3>
<h4>Überschrift 1</h4>

und so sehen die Überschriften aus:


Überschrift h1

Überschrift h2

Überschrift h3

Überschrift h4


h5 und h6 funktionieren zwar auch, sehen aber genauso aus wie h4.

Noch ein paar Möglichkeiten

hr, code und pre

Mit <hr>, das man wie das <br> nicht schließen muss, da es keinen Text verändert, kann man eine Linie zeichnen, wie diese hier:


Und dann gibt es noch <code></code> und <pre></pre>, mit dem man zum Beispiel Anweisungen oder irgendwelche speziell vervorzuhebende Textstücke formieren kann.


Das zeigt die Anwendung von Code

Und das hier von pre

Bleibt noch zu sagen

Viel Spass beim Erstellen von Pageballs.

Eure Pageballs-Team.