BBCodes Erklärungen

Siber Forum
Verfügbare Informationen zu "BBCodes Erklärungen"

  • Qualität des Beitrags: 0 Sterne
  • Beteiligte Poster: Siber
  • Forum: Siber Forum
  • Forenbeschreibung: http://www.siber.li
  • aus dem Unterforum: Tutoriale/Regeln
  • Antworten: 1
  • Forum gestartet am: Montag 30.10.2006
  • Sprache: deutsch
  • Link zum Originaltopic: BBCodes Erklärungen
  • Letzte Antwort: vor 13 Jahren, 11 Monaten, 1 Tag, 20 Stunden, 56 Minuten
  • Alle Beiträge und Antworten zu "BBCodes Erklärungen"

    Re: BBCodes Erklärungen

    Siber - 30.08.2007, 16:39

    BBCodes Erklärungen
    BBCodes
    Ihr habt euch vielleicht schon mal gefragt was die vielen Schalter im Texteditor sollen.
    Das sind alles Funktionen die z.b. den Text fett machen.
    Diese lassen sich auf Knopfdruck einfügen,
    doch wer sie näher erklärt und oder sie selbstständig nutzen will,
    den wird das hier vielleicht interessieren.

    Also fangen wir mit der fett Funktion an.
    Sie ist wie folgt aufgebaut:
    Code: Normaler Text [b]Fett gedrukter Text[/b] Normaler Text
    Ihr erkennt das mit b in den [] der Effekt beginnt und mit
    Code: [/b]
    beendet wird.
    Genau so sind diese nützlichen kleinen Funktionen aufgebaut.
    [] Start,
    [/] Ende.
    Und so sieht unser Beispiel aus:
    Normaler Text Fett gedrukter Text Normaler Text

    Toll oder?
    Jetzt wollen wir es aber noch farbig, sagen wir mal grün.
    wie könnte es nun aussehen?
    "[grün]Das soll grün sein![/grün] Das nicht!"?
    Nein.

    Ihr wollt die Farbe ändern.
    Und Farbe heisst auf englisch "color".
    Also müssen wir die "color" definieren.
    "color" soll grün sein, also:
    color=green
    Und das nun noch in den []:
    Code: [color=green]
    Und wie beende ich das nun?
    [/color=green]?
    Nein.
    Ihr habt die Farbe, also die "color" bestimmt.
    Jetzt müsst ihr nur die "color" beenden.
    Also:
    Code: Normaler Text [color=green]Grüner Text[/color] Normaler Text
    Das ganze sieht dan so aus:
    Normaler Text Grüner Text Normaler Text

    Gut so!
    Aber wie mache ich jetzt das mit fetten Wörtern?
    Ganz einfach! Ihr "stellt" sozusagen die beiden Codes ineinander.
    Also wie bei einer Klammerrechnung um das (Inhalt) zwei weitere () also einfach ((Inhalt)) und das sieht dann so aus:
    Code: Normaler Text [color=green][b]Fetter grüner Text[/b][/color] Normaler Text
    Es könnte auch
    Code: Normaler Text [b][color=green]Fetter grüner Text[/color][/b] Normaler Text
    sein.
    1. Beispiel:
    Normaler Text Fetter grüner Text Normaler Text
    2. Beispiel:
    Normaler Text Fetter grüner Text Normaler Text

    Also total gleich!
    Doch wie ist das wenn ich nun erst einen fetten blauen Text möchte
    und dann noch einen normalen blauen Text danach?
    Code: Normaler Text [color=blue][b]Fetter blauer Text[/b][/color][color=blue] Blauer Text[/color] Normaler Text
    Ist das dan so?
    Nein.

    Es geht einfacher, nämlich so:
    Code: Normaler Text [color=blue][b]Fetter blauer Text[/b] Blauer Text[/color] Normaler Text
    Hier wurde erst der Text blau gemacht und dann fett.
    So wurde ein Fetter blauer Text generiert.
    Danach wird durch das:
    Code: [/b]
    Der fette Abschnitt beendet.
    Doch immer noch ist der Text blau.
    Erst durch:
    Code: [/color]
    Wird der blaue Abschnitt beendet.
    All das sieht dann so aus:
    Normaler Text Fetter blauer Text Blauer Text Normaler Text

    Super!
    Kommen wir nun zur Schriftgrösse!
    Sie ist gleich aufgebaut wie die Farbe (color).
    Erst muss man die Grösse definieren und dann kann man sie ganz einfach beenden.
    Grösse auf englisch?
    Der hier gesuchte Begriff wäre "size".
    Also:
    Code: Normaler Text[size=24] Grosser Text [/size]Normaler Text
    Ist:
    Normaler Text Grosser Text Normaler Text

    So mit dem Wissen könnt ihr schon viel anfangen.
    Nun noch ein paar Inputs.
    b = fett geschrieben
    i = kursiv geschrieben
    u = unterstrichen
    quote = Zitat
    code = Codetext
    list = Listentext
    center = Im Zentrum stehend
    Also dann mal weiter mit der Reinstellung von Links.
    Klar kann man einfach:
    www.google.ch
    posten, doch das ist doch schon sehr...
    ...standart eben....
    Deswegen hier zwei alternativen mit BBCodes:
    Der Code für ne Url ist:
    Code: [url]http://Adresse[/url]
    Also Beispielsweise:
    http://google.ch
    Oder:
    http://www.google.ch

    Was ist der unterschied?
    Hmmmm. es steht noch http...
    Nagut so wahnsinnig toll ist das nun auch wieder nicht...
    Aber wie wärs mit:
    Wahnsinnig interessanter link zu Google!
    oder:
    Wahnsinnig schneller link zu Google!
    ?

    Der Code dazu ist so:
    Code: Text [url=http://url]Link[/url] Text
    Also mit:
    Code: [url=]
    Wird der Link bestimmt, danach folgt der Name und mit:
    Code: [/url]
    wird der Linkname beendet.
    Der Code:
    Code: Text [url=http://www.google.ch]Link zu Google[/url] Text
    ist:
    Text Link zu Google Text

    Nun wollen wir den Link farbig das geht mit:
    Code: [color=green]Text[/color]
    wie oben schon erwähnt.
    Wie wird nun ein Link farbig?
    In dem wir den Linkname farbig machen!
    Also:
    Code: [url=http://www.google.ch][color=green]Link zu Google[/color][/url]
    Das sieht dann so aus:
    Link zu Google

    Puh!
    Der Text ist schon lange aber er zeigt was alles möglich ist mit so einfachen Befehlen.
    Gut weiter...

    Wie mache ich ein Bild in den Text?
    Das geht nun schon ziemlich weit,
    ist aber nachdem wir einen Link eingefärbt haben nur halb so wild.
    Entweder man befolgt den Bild Upload Fenster das,
    in unserem Forum ach so schön eingebaut ist - oder,
    man sucht ein Bild aus dem Internet.

    Bild uploaden:
    1) Durchsuchen
    2) Host it!
    3) "Hotlink for forums (1)" kopieren und im Textfeld einfügen

    Ist die Anleitung unseres eingebauten ImagesHack System.
    Machen wir das mal...
    Und wir finden folgenden Code, den wir hier hereinkopieren sollen:
    Code: [URL=http://imageshack.us][IMG]http://img49.imageshack.us/img49/2550/siberfinal04hs3.png[/IMG][/URL]

    Und so siehts aus:



    Nehmen wir das auseinander...
    Doch erst was heisst eigentlich img?
    Img ist die Kürzung von Image und Image heisst auf Deutsch "Bild".
    Toll oder?
    Doch schon bald merken wir:
    Wieso bei allen Sternen hat ein Bild eine eingebauten Link?
    Das ist sozusagen die "eingebaute" Werbung von ImagesHack.
    Es könnte nämlich geradesogut:
    Code: [img]http://img49.imageshack.us/img49/2550/siberfinal04hs3.png[/img]
    heissen.
    So sieht das dann aus und ist kein Link mehr:



    Gut, nun wollen wir auf dem Bild einen Link zu Google,
    dann lautet der Code:
    Code: [url=http://www.google.ch][img]http://img49.imageshack.us/img49/2550/siberfinal04hs3.png[/img][/url]
    Und das Resultat dieses Codes:



    Das Grundgerüst ist also:
    Code: [url=http://Adresse]Name oder[img]Link zum Bild[/img][/url]

    Wenn wir also ein Bild im Internet gefunden haben und wir es hier posten wollen,
    dann können wir ganz einfach die Grafikadresse kopieren und zwischen
    Code: [img] und [/img]
    einfügen:



    So das wars fürs erste!
    Das nächste mal nehmen wir Html und die Gestaltung einer eigenen Website dran^^
    Na also war doch halb so wild!
    Schauen sie es ruhig nochmals an das sind Sachen fürs Leben!
    Oder für das Forum...
    Naja

    Bei Verbesserungsvorschlägen/Kritik/Lob/Dank usw. schreiben!

    Danke fürs lesen!

    Lg

    Siber



    Mit folgendem Code, können Sie den Beitrag ganz bequem auf ihrer Homepage verlinken



    Weitere Beiträge aus dem Forum Siber Forum

    Guten Start - gepostet von Anonymous am Samstag 13.10.2007



    Ähnliche Beiträge wie "BBCodes Erklärungen"

    Rang-Erklärungen - Fridrich (Donnerstag 21.09.2006)
    Erklärungen - thedevil (Sonntag 05.03.2006)
    Erklärungen bei solchen fehlern im Forum wer euch da helfen - BugFinder (Donnerstag 15.03.2007)
    Forum allgemeine Regeln und Erklärungen: - felix (Mittwoch 15.11.2006)
    Erklärungen der Genres und Altersgruppen - lilith (Mittwoch 04.01.2006)
    Erklärungen - Kim (Samstag 17.03.2007)
    Erklärungen - Liana Angelus (Sonntag 04.06.2006)
    Kriegs Erklärungen - Der Momo (Montag 31.01.2005)
    Skillsimulator - Ashi. (Montag 11.10.2010)
    Erklärung zu den BBCodes - jorgen (Donnerstag 07.06.2007)