Profil 2.0 - Kurze Einführung in HTML

[mpeg.exe]

Da mit dem Profil 2.0 bestimmt viele ihr Profil mit HTML 'pimpen' möchten habe ich mir gedacht, dass ich eine kleine Einführung in HTML und eine Übersicht der wichtigsten Befehle gestalte. So, dass man sich auch ohne das Durchwühlen von selfhtml in seinem Profil zurechtfindet.

Basics
HTML ist hauptsächlich in sogenannten 'tags' aufgebaut. Einen 'tag' erkennt man an den eckigen Klammern "<;>". Zwischen den 'tags' steht der Befehl. Dabei gibt es hauptsächlich 2 Arten von 'tags':

1. Die Alleinstehenden. Beispiel: img; br. - Man beendet sie durch ein Slash vor der Schlussklammer ".../>"
2. 'tags' zwischen denen ein Text steht. Beispiel: p - Sie werden mit einem weiterem Tag beendet.

Wichtige 'tags':

• <p>...</p> - Der Text zwischen <p> wird als Absatz angezeigt
• <b>breit<b/>;<i>kursiv</i>;<u>unterstrichen</u> - Der Text zwischen <b>,<i> & <u> wird formatiert
• <h1>...</h1>;<h2>...<h2>;...;<h6>...</h6> - Der Text zwischen <h*> erscheint größer/kleiner. <h1> ist am größten, <h3> 'normal' und <h6> am kleinsten
• <img src="url_zum_bild" alt="Beschreibung des Bildes" width="Breite" height="Höhe" /> - Ein Bild wird angezeigt
• <a href="url_zur_seite">Name des Links</a>
• <br /> - Gestaltet einen Zeilenumbruch

Nun hätten wir die wichtigsten Elemente, womit wir zumindest dem BBCode das Wasser reichen können.

Formatierung
Um das Erscheinungsbild der Schrift und den Hintergund zu änern, packt ihr den Text am besten in einen <div> Container. Nun könnt ihr die Eigenschaften des <div> Containers ändern.

<div style="...
...">...</div>

• Schriftart - Ändert die Schriftart - font-family : Name einer Schriftart wie z.B. Comic Sans MS
• Schriftvariante - Bei 'small-caps' werden alle Kleinbuchstaben als kleine Großbuchstaben geschrieben - font-variant : normal/small-caps
• Schriftfettigkeit - Ändert die Schriftfettigkeit - font-weight : normal/bolder/lighter
• Schriftgröße - Ändert die Schriftgröße - font-size : absolute Angabe in Punkten, z.B. 14pt
• Schriftfarbe - Ändert die Schriftfarbe - color : Farbname/RGB-Wert/Hex-Farbcode
• Hintergrundfarbe - Legt die Hintergrundfarbe fest - background-color : Farbname/RGB-Wert/Hex-Farbcode
• Hintergrundbild - Legt ein Hintergrundbilder fest - background-image : URL zum Bild
• Textanordnung - Legt die Schriftanordnung fest - text-align : left/right/center

Einen oder mehrere dieser Befehle kann man nun in 'style' unterbringen. Dabei trennt man mehrer Eigenschaften durch ";". Beispiel:

<div style="font-family : Comic Sans MS;
font-color : red;
background-color: black;">Dieser Text ist in Comic Sans MS, wird Rot angezeigt und hat einen schwarzen Hintergrund</div>

Einbindung von Youtube, Xfire, last.fm usw.
Viele Web 2.0 Seiten erlauben es ein Profil oder ähnliches durch einen HTML Code auf anderen Seiten erscheinen zu lassen. Ich beschränke mich hier auf YouTube, Xfire und last.fm.
YouTube
Ein Video in eurem Profil einzubinden ist recht einfach. Rechts neben des Videos findet ihr diesen Kasten mit Informationen:

Den 'embed'-Code müsst ihr nun einfach kopieren und in eurem Profil-Code einfügen. Schon habt ihr das Video in eurem Profil.
Xfire
Ein Xfire-Profil ist immer gern gesehen. Auf eurer Profilseite klickt ihr oben auf "Find out..." und auf der folgenden Seite kopiert ihr den HTML-Code (Nicht den BBCode!)

last.fm
Sofern ihr Mitglied bei last.fm seid, geht ihr auf diese Seite. Dort könnt ihr euch eines der Widgets wie z.B. eure Playlist aussuchen.

Ihr gelangt auf eine weitere Seite, wo euch der Code angezeigt wird, den ihr ebenfalls kopieren und einfügen könnt. Eignet sich übrigens perfekt um euer Profil auch musikalisch zu versüßen

Wenn jemand Anregungen zu weiteren Befehlen hat (Ich habe bei weitem nicht alles aufgezählt und bestimmt einiges wichtiges vergessen), dann lasst es mich hören

 

[911_Emergency]

Super das hilft mir als nicht HTMLer weiter danke !

 

[DaDon]

Tolles Tutorial!
Wie geht denn das mit dem Hintergund Ich hab schon alles veruscht um den Hintergund schwarz zu gestalten nichts klappt! und mit dem <p> usw auch nicht! Hab schon versucht an jede denkbare Stelle zu setzen hmm..


Hat sich erledigt, hab eine Lösung gefunden!
Danke

 

[mpeg.exe]

Tolles Tutorial! Wie geht denn das mit dem Hintergund Ich hab schon alles veruscht um den Hintergund schwarz zu gestalten nichts klappt! und mit dem <p> usw auch nicht! Hab schon versucht an jede denkbare Stelle zu setzen hmm..

Also bei mir funktioniert der Hintergrund mit dem <p> Container. Übrigens bin ich endlich drauf gekommen, dass man auch einfach <div> nutzen kann.

Sieht das bei dir so aus?

<div style="background-color : black">

Hast du auch "black" statt "schwarz" geschrieben? Weil in HTML haben die Farben bestimmte Namen.
Hier kanst du übrigens die HEX Farbcodes nachgucken.
Wenn das nicht hilft, gib mir mal den Code.

 

[Hande83]

Klasse, genau nach so einem Tutorial hab ich schon in einem anderen Thread gefragt. Werd ich doch gleich mal ausprobieren ob ich es auch hinbekomme, sobald mein Profil wieder richtig funzt (kann grad keinen Begrüßungstext schreiben).

 

[FightRider]

Also bei mir funktioniert der Hintergrund mit dem <p> Container. Übrigens bin ich endlich drauf gekommen, dass man auch einfach <div> nutzen kann.

Ich hatte das selbe Problem mit dem Hintergrund.
Nutze FireFox und da wird das witzigerweise nicht angezeigt.

Also hab ich mal den IE rausgekramt und siehe da, es funzt.
Könnte also durchaus am Browser liegen und nicht am Code.

 

[mpeg.exe]

Ich hatte das selbe Problem mit dem Hintergrund.
Nutze FireFox und da wird das witzigerweise nicht angezeigt.

Also hab ich mal den IE rausgekramt und siehe da, es funzt.
Könnte also durchaus am Browser liegen und nicht am Code.

Ich nutze auch FireFox ^^

 

[TyBmaN]

Ich nutze auch Firefox bin hier aber grade am verzweifeln, ich hab jetz alle Möglichkeiten versucht, es verschluckt einfach meine Begrüßung und dann steht garnix mehr Dabei will ich nur einen anderen Hintegrund, den anderen Schei* weiß ich doch.. HILF!

 

[mpeg.exe]

Wird bei euch mein Hintergrund angezeigt?
http://www.cynamite.de/community/mysite/mpeg_exe/

 

[TyBmaN]

Wird bei euch mein Hintergrund angezeigt?
http://www.cynamite.de/community/mysite/mpeg_exe/

Wenn dein HG Babyblau-grau is, oder was das sein soll, dann ja

 

[mpeg.exe]

Wenn dein HG Babyblau-grau is, oder was das sein soll, dann ja

Pöh, das ist kein Babyblau

 

[FightRider]

Ich nutze auch FireFox ^^

Wer tut das nicht?

Einmal hat das mit dem Hintergrund auch im FireFox gefunzt, aber nach dem Ändern der Schriftfarbe hat FireFox nur noch den Standart, heißt: grauer Hintergrund und Schwarze Schrift angezeigt.
Und das ist bis jetzt so geblieben.

Nur im IE wird das so angezeigt, wie es auch soll.

 

[TyBmaN]

Is ja wurscht jetz (nee, farbe ich weiß...) Verrätst du jetzt auch, warum das bei dir funzt und bei mir nich? Ich find das nämlich ziemlich plööööhöööt

 

[mpeg.exe]

Wer tut das nicht?

Bestimmt 80% der Internetnutzer

@TyBmaN: Ich bin nunmal Gott
Mein Quelltext ist

<div style="background-color: rgb(219,224,255);border: 1px solid white; padding: 5px; font-family : Verdana; font-size: 12pt">...</div>

Probier mal ob das bei dir geht.

 

[TyBmaN]

Gott, es hat funktioniert, wie kann ich dir dafür danken? Nee, cool, dann tüftel ich jetz bissl rum, wird schon *gg* Auf jeden Fall ein Zeichen dass es doch geht

 

[mpeg.exe]

Gott, es hat funktioniert, wie kann ich dir dafür danken? Nee, cool, dann tüftel ich jetz bissl rum, wird schon *gg* Auf jeden Fall ein Zeichen dass es doch geht

Godcode funktioniert immer Bei mir gibts jetzt das ürbigens das ultimative Stanglnatorspiel.

 

[911_Emergency]

Also ich sehe überall den Hintergrund. Ich benutze auch Fire Fox. Endlich ist meine Profil-Seite "fertig", vorübergehend...

Edit: ich hätte da noch ein Problem und zwar möchte ich das hier

<p><strong><span style="text-decoration: underline;"><span style="color: white;">Meine Most-Wanted:</span></span></strong></strong><br />

<span style="color: orange;">Battlefield Bad Company<br />
Heavenly Sword<br />
Army Of Two<br />
Call of Duty 4<br />
Metal Gear Solid 4: Guns Of The Patriots<br />
PlayStation Home<br />
SOCOM (PS-Store)<br />
Warhawk</span></p>

<p><span style="color: orange;">Meine Hobbys sind Gitarre spielen, am PC basteln und natürlich PC/PS3 spielen.</span></p>

alles auf Schriftgröße 14PT haben, aber das hat bis jetzt nicht funktioniert, hoff mir kann jemand helfen, evtl den Code richtig ausbessern, danke!

 

[Robert1985]

@mpeg.exe: Ich brauch kurz hilfe! Ich hab den Hintergrund in schwarz aber hätte lieber eine etwas andere Farbe da! Bei den http://www.filb.de/content/games/gba/emerald/hex-colors.html kommt dann diese zahl: "Color value = 2A2A29"!

Wie kann ich die Hinter das "background-color : black" einbauen so das der Farb Ton genutz wird?

Und bei "color : orange" würde ich gern diesen Farb Code einbauen "Color value = EF8217"


Wer super wenn du mir helfen kannst gott!

Gruß, Robert

 

[911_Emergency]

@Robert

<Background-color="color: EF8217";>

Dann ist der ganze Hintergrund in dieser Farbe.


den Farbcode:

<span style="color: EF8217";>TEXT</span>

Dann ist der Text in der Farbe.

Sollte so funktionieren, ich kenn mich leider (noch) nicht wirklich gut mit HTML aus, hab heute angefagen da ich es ja fürs Profil brauche.

 

[Robert1985]

Sollte so funktionieren, ich kenn mich leider (noch) nicht wirklich gut mit HTML aus, hab heute angefagen da ich es ja fürs Profil brauche.

mhhh, geht nich da ich den code ja so verwende!

<div style="color : orange; background-color : black; font-family : Cambria; font-size: 11pt">

@911_Emergency: Mir ist aufgefallen das in deiner Forums Signatur nen Fehler ist! Wenn man auf "Mein Profil Reloaded" geht kommt man nur auf sein eigenens aber nicht auf deins! Du hast da den standart link genommen! Hier mal der richtige link: http://www.cynamite.de/community/mysite/911_Emergency/

Gruß, Robert