Text formatieren / Bild einfügen u.a. (Das "Tutorial")

[Ugge]

Dies ist euer Tutorial zum Thema Text formatieren und Bilder einfügen!

>>> [Edit] März 2016: Nach einem Update der Forensoftware funktioniert jetzt vieles etwas anders. Dieses Tutorial wurden überarbeitet. <<<


Inhaltsverzeichnis (auf den Begriff klicken, um das Thema aufzurufen)

• Fettdruck - kursiv - unterstrichen - durchgestrichen
• Schriftgröße ändern
• Schriftfarbe ändern
• Farbtabelle (zusätzliche Farben für Schrift und den Glühen-Befehl)
• Glühen
• einen kompletten Beitrag zitieren
• Teile eines Beitrages zitieren
• Smileys einfügen
• beschreibender Link (Link einfügen)
• Die Listen-Befehle
• Die Tabellenbefehle
• Schriftart ändern
• Laufschrift (Marquee)
• Horizontale Linie
• Text linksbündig - zentriert - rechtsbündig
• Vorformatierter Text
• hochgestellte / tiefgestellte Schrift (superscript / supscript)
• Schreibmaschinenschrift
• Eine Codeformel sichtbar machen (Code einfügen / der nobbc-Befehl)
• E-Mail-Adressen einfügen
• FTP-Links einfügen
• Abkürzungen
• Flash einfügen
• Schatten
• Capital letter
• Spoiler
• Formatierung entfernen
• Ansicht umschalten
• Fußnoten
• Bild einfügen (verlinken)
• Bilder und andere Dateien als Dateianhang vom eigenen Rechner hochladen
• Bilder über den Uploaddienst picR hochladen <-------- Der Uploaddienst picR ist  unsere Empfehlung!
• Bilder über den Uploaddienst postimage hochladen
• Videos einfügen

Die beiden "Blitztutorials" bleiben bestehen, allerdings werden sie nicht weiter überarbeitet.

Wer gerne noch darauf zugreifen möchte, findet sie hier:

Blitztutorial "Text formatieren" bitte *hier klicken*

Blitztutorial "Bild einfügen bitte *hier klicken*




Weiterführende Literatur  hier: 

Text formatieren / Bild einfügen u.a. (Das "Tutorial")

  *SMF Benutzer-Hilfe*

Und hier: *Die Suchfunktion des Forums*




Direktlink zum Übungs- und Experimentierthread:   *Der Thread zum Experimentieren und Üben*
Dort könnt ihr in Ruhe alles ausprobieren! 


[Edit Oktober 2015]: Die Anleitungen für die Uploaddienste tinypic, qpic und pic-upload wurden entfernt, da diese nicht mehr verwendet werden sollen! *Näheres hier.*

[Edit November 2016]: Die Anleitung für den Uploaddienst 250kb.de wurde entfernt. Die Seite ist leider vom Netz. *Näheres hier.*

[Ugge]

Zur ersten Übersicht seht ihr hier einen Screenshot, auf dem die gesamte Antwortmaske zu sehen ist.

Beim Erstellen eines neuen Themas wird zunächst die Betreffzeile ausgefüllt, die das Thema möglichst treffend beschreiben sollte.

Als Symbol kann man optional noch einen passenden Smiley auswählen, der vor dem Betreff erscheint (siehe weiter unten ***).

Unter diesem Feld befinden sich die Buttons, mit dem ihr euren Text formatieren könnt, und direkt über dem Antwortfeld werden die wichtigsten Smileys (Standardsmileys) angezeigt, die durch Anklicken in den Text eingefügt werden können. Weitere Smileys verstecken sich hinter den Buttons daneben (Extras, Schilder und zeitweise saisonale, wie etwa hier zu sehen Ostern).

Schließlich seht ihr ganz unten den Button zum Schreiben (Absenden) des Beitrags und den für die Vorschau.

Text formatieren / Bild einfügen u.a. (Das "Tutorial")

Eine Möglichkeit wie früher, Dateianhänge direkt hier hochzuladen, gibt es nicht mehr. Alte Dateianhänge sind aber noch in den Beiträgen vorhanden und können angeschaut werden.
Bilder könnt ihr mit einem Bilderhoster hochladen. Unter dem Textfenster findet ihr zwei Symbole: und die euch durch einen Klick darauf zu den Hostern picR.de und postimage.org führen. Genaue Anleitungen für diese Hoster findet ihr in separaten Beiträgen *Anleitung picR.de*, die *Anleitung postimage.org* wird noch erstellt.


*** Hier die Symbole für den Betreff mit Erklärung:

Text formatieren / Bild einfügen u.a. (Das "Tutorial")

Standard = selbsterklärend 
Thumb Up = Daumen hoch
Thumb Down = Daumen runter 
Exclamation Point = Ausrufezeichen (wichtiges Thema) 
Question Mark = Fragezeichen, Frage
Lamp = Lampe ( so wie: Aha!) 
Smiley = selbsterklärend (zufrieden)
Angry = wütend
Cheesy = lächeln
Grin = grinsen
Sad = traurig (trauriges Thema)
Wink = zwinkern (nicht so ernst nehmen)
Topic solved = Problem gelöst   (noch im Test und nicht in allen Boards verfügbar)

Diese Symbole erscheinen in den Unterforen in der zweiten Spalte, direkt vor dem Threadnamen.

Text formatieren / Bild einfügen u.a. (Das "Tutorial")

[Ugge]

Die wichtigsten Funktionen:  Fettdruck - kursiv - unterstrichen - durchgestrichen


Ihr müsst den Text zunächst markieren (linke Maustaste gedrückt halten und über den Text ziehen) und danach den entsprechenden Befehl anklicken!

Symbol	Auswirkung	BB-Code
	Fettdruck	[b]Text[/b]
	kursiv	[i]Text[/i]
	unterstrichen	[u]Text[/u]
	durchgestrichen	[s]Text[/s]

[Ugge]

Schriftgröße ändern

Die voreingestellte Schriftgröße ist 9pt. Folgendermaßen kann das geändert werden:

Ihr müsst den Text zunächst markieren (linke Maustaste gedrückt halten und über den Text ziehen) und danach den Pfeil neben dem Feld Schriftgröße anklicken.

Die Größen 8pt, 10pt, 12pt, 14pt, 18pt, 24pt und 36pt könnt ihr nun direkt durch Anklicken auswählen.

Manuell können weitere Schriftgrößen erfasst werden. Hierzu wird zunächst für den markierten Text irgendeine Schriftgröße ausgewählt. Die Zahl im Size-Befehl muss nun gelöscht und durch eine andere Zahl ersetzt werden. Von 1 bis 99 sind alle Eingaben möglich (nur ganze Zahlen).

Aus "Text" mit Größe 10pt [size=10pt] wird beispielsweise "Text"  mit Größe 14pt [size=14pt].

[Ugge]

Farbe ändern

Euren Text macht ihr folgendermaßen farbig:

Text zunächst markieren (linke Maustaste gedrückt halten und über den Text ziehen) und danach den Pfeil neben dem Feld Farbe ändern anklicken.

Entsprechende Farbe anklicken - fertig!

Der BB-Code für das Ändern der Farbe lautet:

[color=xxx]Text[/color]

wobei xxx für die gewählte Farbe steht.

Die englischen Bezeichnungen der Farben, wie sie im Code erscheinen:

schwarz	black
rot	red
gelb	yellow
pink	pink
grün	green
orange	orange
violett	purple
blau	blue
beige	beige
braun	brown
blaugrün	teal
dunkelblau	navy
kastanienbraun	maroon
hellgrün	limegreen
weiß	weiß
türkis	turquoise
grau	grey
hellgrau	lightgrey
olivgrün	olive
aquamarin	aquamarin
firebrick	firebrick
gold	gold
fuchsia	fuchsia

Es gibt noch weitere Farben, die verwendet werden können; sie stehen aber nicht in der Liste zur Auswahl, da sie den schon enthaltenen Farbtönen sehr ähneln. Sie müssen manuell eingegeben werden. Hierzu wendet man einen der Farbbefehle an und ändert dann die Farbbezeichnung ab.


Die Tabelle über die zusätzlichen Farbtöne findet ihr ab sofort *hier*.

[Ugge]

Glühen: Den Text mit einer Art farbigem Schein umgeben


Text zunächst markieren (linke Maustaste gedrückt halten und über den Text ziehen) und danach auf den Button Glühen klicken.

Symbol		Auswirkung		BB-Code
		Text		[glow=red,2,300][/glow]

Die vorgegebene Farbe ist Rot; sie lässt sich aber ändern. Dazu muss man aus dem glow-Befehl das Wort "red" entfernen und durch eine andere Farbbezeichnung (englisches Wort) ersetzen.

Die entsprechende englische Bezeichnung der Farben findet ihr unter der Anleitung zum Befehl Schriftfarbe ändern oder in der Tabelle für zusätzliche Farben.

Ein Beispiel:

• Das Wort Text wird durch Markieren und Drücken des Glühen-Buttons mit einem roten Balken hinterlegt: Text
  Der Code ist: [glow=red,2,300]Text[/glow]
  
  
• Durch Entfernen des Wortes red und die Eingabe von yellow wird der Balken gelb: Text
  Der Code dafür: [glow=yellow,2,300]Text[/glow]

Die Kombination des Befehls Farbe ändern und des Glühen-Befehls ergibt interessante Effekte:

Text		[glow=yellow,2,300][color=red]Text[/color][/glow]
Text		[glow=black,2,300][color=beige]Text[/color][/glow]

...

Anmerkung: Die Befehle Glühen und Schatten lassen sich nicht kombinieren. Falls man's tut, wird der Schatten-Befehl nicht ausgeführt, sondern nur der Glühen-Befehl.
 
Ein Blick zurück: Unter SMF 1.1.x hatte dieser Code zumindest bei einigen Browsern farbige Balken erzeugt und wir hatten uns einen Spaß daraus gemacht Flaggen nachzuarbeiten oder neu zu kreieren. Dies scheint nun nicht mehr zu gehen, zumindest hab ich bisher keine Möglichkeit gefunden. Das ist aber auch nicht der Sinn des Glühen-Befehls. Wir hatten damals lediglich eine Fehlfunktion kreativ ausgenutzt. Heute funktioniert der Befehl korrekt, zumindest unter dem aktuellen Firefox und unter Edge.

[Ugge]

Linksbündig - Zentriert - Rechtsbündig


Text zunächst markieren (linke Maustaste gedrückt halten und über den Text ziehen) und danach auf den entsprechenden Button klicken.

Symbol		Auswirkung		BB-Code
		Der Text wird am linken Rand ausgerichtet		[left]Text[/left]
		Der Text wird mittig ausgerichtet		[center]Text[/center]
		Der Text wird am rechten Rand ausgerichtet		[right]Text[/right]

[Ugge]

Marquee    (= Laufschrift)

Text bzw. Smiley oder Bild zunächst markieren (linke Maustaste gedrückt halten und über den Text ziehen) und danach auf den Button Marquee klicken.

Symbol:
BB-Code:	[move]Text[/move]

Auswirkung:    Sich von rechts nach links bewegende Schrift, Smileys oder eingefügte Bilder:



Text

Text formatieren / Bild einfügen u.a. (Das "Tutorial")

[Ugge]

Schatten

Text zunächst markieren (linke Maustaste gedrückt halten und über den Text ziehen) und danach auf den Button Schatten klicken.

Symbol	BB-Code:
	[shadow=red,left]Text[/shadow]

Es wird ein roter (red) Schatten erzeugt, der nach links (left) fällt. So sieht das aus: Text

Die Farbe des Schattens kann man ändern, indem man red durch eine andere Farbe (englisches Wort) ersetzt (siehe hierzu die Farbenliste)
Die Richtung left (nach links) kann ersetzt werden durch right (nach rechts), top (nach oben) oder bottom (nach unten).

Der Code für einen grünen Schatten nach rechts	Text	sieht also so aus:	[shadow=green,right]Text[/shadow]
Der Code für einen blauen Schatten nach oben	Text	sieht so aus:	[shadow=blue,top]Text[/shadow]
Hier ein fuchsiafarbener Schatten nach unten	Text	das geht so:	[shadow=fuchsia,bottom]Text[/shadow]

Anmerkung: Die Befehle Glühen und Schatten lassen sich nicht kombinieren. Falls man's tut, wird der Schatten-Befehl nicht ausgeführt, sondern nur der Glühen-Befehl.

[Ugge]

Horizontale Linie

Symbol	BB-Code:
	[hr]

Auswirkung: Der Befehl erzeugt eine horizontale Linie über das gesamte Antwortfeld hinweg.

[Ugge]

vorformatierter Text

Symbol:		BB-Code:
		[pre]Text[/pre]

Dieser Befehl ist dazu da, um HTML-Codes ohne Formatierungen darzustellen, wird aber hier nicht gebraucht, da nicht mit HTML-Codes, sondern mit BB-Codes gearbeitet wird.

[Ugge]

Schriftart ändern


Mit diesem Befehl könnt ihr euren Text in einer anderen Schriftart anzeigen lassen. Die Voraussetzung hierfür ist, dass dieser Font auf eurem PC installiert ist.

Text zunächst markieren (linke Maustaste gedrückt halten und über den Text ziehen) und danach den Pfeil neben dem Feld Schriftart anklicken.

Entsprechende Schriftart anklicken - fertig!

Im Moment können folgende Schriftarten direkt ausgewählt werden:

- Courier
- Arial
- Arial Black
- Impact
- Verdana
- Times New Roman
- Georgia
- Andale Mono
- Trebuchet MS
- Comic sans MS


Manuell können weitere Schriftarten eingegeben werden. Hierzu muss für den Text zunächst irgendein Font ausgewählt und dieser anschließend durch die Bezeichnung einer anderen Schriftart ersetzt werden.

Beispiele:

[font=Arial narrow]Text in Arial narrow[/font]

----> Text in Arial narrow

[font=segoe script]Text in segoe script[/font]

----> Text in segoe script

Einige interessante Schriftarten könnt ihr hier finden: Klick!

[Ugge]

Link einfügen / beschreibender Link:

Ein Link lässt sich ganz einfach und unkompliziert einsetzen, indem man ihn in der Adresszeile des Browsers markiert, in die Zwischenablage des PCs kopiert und hier im Beitrag wieder einfügt.

Darüber hinaus gibt es aber auch noch eine andere Möglichkeit:

Symbol:		BB-Code:
		[url][/url]

Mit diesem Befehl könnt ihr einen sogenannten "beschreibenden Link" erstellen, d.h., ein Wort oder einen Satz so "präparieren", dass beim Klicken darauf ein Link aufgerufen wird: *klick*

So geht's: Öffnet zunächst in einem separaten Browserfenster bzw. -tab die zu verlinkende Seite und kopiert den Link, der oben in der Adresszeile steht, mit Strg + c in die Zwischenablage des PCs, beispielsweise diese Seite: https://www.aliqs.de/index.php?page=page_regeln

Nun wechselt ihr zum geöffneten Textfenster in ALIQs und schreibt das Wort bzw. den Satz, der zum Link führen soll, z.B.: *klick*; anschließend muss es markiert werden (das ist wichtig, bitte nicht vergessen!)

Anschließend klickt ihr den Befehl Link einfügen an.

Es sieht dann in eurem Textfenster so aus: [url][b]*klick*[/b][/url]

Man muss dann beim vorderen url-Befehl zwischen url und der Klammer-zu ] ein Gleichheitszeichen und den Link setzen.

[url=http://www.aliqs.de/index.php?page=page_regeln][b]*klick*[/b][/url]

Das Ergebnis: *klick*



Das funktioniert auch mit Bildern. Einfach ein Bild mit dem "Bild einfügen"-Code  versehen (näheres siehe *hier*), das ganze markieren und dann den Button "Link einfügen" anklicken und, wie oben beschrieben, den Link einfügen. Nun wird man beim Anklicken des Bildes zur entsprechenen Seite weiter geleitet.  Allerdings sieht man es einem so präparierten Bild - im Gegensatz zu Text - nicht an, dass sich dahinter ein Link "versteckt".

[Ugge]

Superscript - Subscript


Text zunächst markieren (linke Maustaste gedrückt halten und über den Text ziehen) und danach auf den entsprechenden Button klicken.

Symbol:		Auswirkungen:		BB-Code:
		Schrift hochgestellt		[sup]Text[/sup]
		Schrift tiefgestellt		[sub]Text[/sub]

[Ugge]

Schreibmaschine:


Text zunächst markieren (linke Maustaste gedrückt halten und über den Text ziehen) und danach auf den Button Schreibmaschine klicken.

Es wird eine Schrift erzeugt, die aussieht, als hätte man sie auf einer Schreibmaschine geschrieben.

Symbol:		Auswirkungen:		BB-Code:
		Schriftbild, wie mit einer Schreibmaschine geschrieben		[tt]Text[/tt]