Profil 2.0 - Kurze Einführung in HTML

mpeg.exe

Bekanntes Gesicht
Mitglied seit
21.08.2006
Beiträge
1.336
Reaktionspunkte
0
Website
mpeg.pytalhost.com
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.
HTML:
<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:
HTML:
<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:
youtubehq7.jpg

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!)
xfiredm5.jpg

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.
lastfmmu8.jpg

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 :)
 
Zuletzt bearbeitet:
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
 
Zuletzt bearbeitet:
DaDon schrieb:
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. :ugly:

Sieht das bei dir so aus?
HTML:
<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.
 
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).:D
 
mpeg.exe schrieb:
Also bei mir funktioniert der Hintergrund mit dem <p> Container. Übrigens bin ich endlich drauf gekommen, dass man auch einfach <div> nutzen kann. :ugly:

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.:rolleyes:
 
FightRider schrieb:
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.:rolleyes:
Ich nutze auch FireFox ^^
 
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:uff: Dabei will ich nur einen anderen Hintegrund, den anderen Schei* weiß ich doch.. HILF!:confused:
 
mpeg.exe schrieb:
Ich nutze auch FireFox ^^

Wer tut das nicht?:D

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.:confused:
Und das ist bis jetzt so geblieben.

Nur im IE wird das so angezeigt, wie es auch soll.
 
Is ja wurscht jetz (nee, farbe ich weiß...) Verrätst du jetzt auch, warum das bei dir funzt und bei mir nich?:nice: Ich find das nämlich ziemlich plööööhöööt:D
 
FightRider schrieb:
Wer tut das nicht?:D
Bestimmt 80% der Internetnutzer

@TyBmaN: Ich bin nunmal Gott :evil: :ugly:
Mein Quelltext ist
HTML:
<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.
 
Gott, es hat funktioniert, wie kann ich dir dafür danken?:D Nee, cool, dann tüftel ich jetz bissl rum, wird schon *gg* Auf jeden Fall ein Zeichen dass es doch geht:hoch:
 
TyBmaN schrieb:
Gott, es hat funktioniert, wie kann ich dir dafür danken?:D Nee, cool, dann tüftel ich jetz bissl rum, wird schon *gg* Auf jeden Fall ein Zeichen dass es doch geht:hoch:
Godcode funktioniert immer :D Bei mir gibts jetzt das ürbigens das ultimative Stanglnatorspiel. :ugly: :hoch:
 
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

Code:
<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!
 
Zuletzt bearbeitet:
@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
 
Zuletzt bearbeitet:
@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.
 
911_Emergency schrieb:
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!

Code:
<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
 
Zuletzt bearbeitet:
Zurück