Kleines HTML Tutorial für Rahmen||Border

Thema: Kleines HTML Tutorial für Rahmen||Border Sa Apr 19, 2014 11:46 am

Hier ein kleines HTML Tutorial, wie man ganz einfach einen einfachen Rahmen macht (:
Bitte verbessert mich wenn nötig, da auch ich kein Genie in HTML bin und gebt mir Bescheid, wenn etwas arg unverständlich formuliert ist ^.^
Ich erkläre es jetzt mal anhand unserer Steckbriefvorlage...:

Hier ist nochmal der Code zum Vergleichen, während des Tutorials:

Code:: <center><div style="border-style: dotted;border-color: #00000; border-radius: 20px; background-color: #50646E; padding: 0px; margin: 0px; border-top-width: 0px; border-bottom-width: 3px; border-left-width: 1px dotted; border-right-width: 1px dotted; width: 350px; height: 600px; overflow: scroll;">
<img src="http://img5.fotos-hochladen.net/uploads/zahlsdx0naoyuri.png">
<br>
[size=24][u]Allgemeines[/u][/size]
<br><div style="border-style: none; border-color: #00000; border-radius: 20px; background-color: #9BA6B0; padding: 0px; margin: 0px; widht: 300px; height: 130px; overflow: scroll;">
[left][b]Name:[/b]
[b]Alter:[/b]
[b]Geschlecht:[/b]
[b]Clan:[/b]
[b]Rang:[/b][/left]
</div>
<br>
[size=24][u]Aussehen[/u][/size]
<br><div style="border-style: none; border-color: #00000; border-radius: 20px; background-color: #9BA6B0; padding: 0px; margin: 0px; widht: 300px; height: 130px; overflow: scroll;">
[left][b]Fell:[/b] [i]50 Wörter[/i]
[b]Statur:[/b] [i]50 Wörter[/i]
[b]Augen:[/b] [i]30 Wörter[/i]
[b]Sonstiges:[/b] [i]nicht notwendig[/i][/left]
</div>
<br>
[size=24][u]Inneres[/u][/size]
<br><div style="border-style: none; border-color: #00000; border-radius: 20px; background-color: #9BA6B0; padding: 0px; margin: 0px; widht: 300px; height: 130px; overflow: scroll;">
[left][b]Charakter:[/b] [i]100 Wörter[/i]
[b]Vorlieben:[/b] [i]3 Sätze[/i]
[b]Abneigungen:[/b] [i]3 Sätze[/i]
[b]Stärken:[/b] [i]3 Sätze[/i]
[b]Schwächen:[/b] [i]3 Sätze[/i][/left]
</div>
<br>
[size=24][u]Familie[/u][/size]
<br><div style="border-style: none; border-color: #00000; border-radius: 20px; background-color: #9BA6B0; padding: 0px; margin: 0px; widht: 300px; height: 130px; overflow: scroll;">
[left][b]Mutter:[/b]
[b]Vater:[/b]
[b]Geschwister:[/b]
[b]Gefährte:[/b]
[b]Junge:[/b]
[b]Sonstige Verwandte:[/b] [i]nicht notwendig[/i]
[b]Freunde:[/b]
[b]Feinde:[/b][/left]
</div>
<br>
[size=24][u]Sonstiges[/u][/size]
<br><div style="border-style: none; border-color: #00000; border-radius: 20px; background-color: #9BA6B0; padding: 0px; margin: 0px; widht: 300px; height: 130px; overflow: scroll;">
[left][b]Player:[/b]
[b]Wievielter geplayter Charakter:[/b]
[b]Onlinehäufigkeit:[/b]
[b]Onlinezeiten:[/b][/left]
</div>
Copyright by Schauerstern||Light and Darkness RPG
</div></center>

Okay, beginnen wir erstmal mit dem Grundlegenden.
Wie du bestimmt schon weißt muss man das, was man begonnen hat, auch abschließen.
Also wenn wir etwas fett schreiben wollen geht das so:

Code:: <strong>Schrift Text irgendwas</strong>

Der hintere Code mit dem / drin bedeutet, dass alles was dahinter geschrieben wird nicht mehr fett ist.
So ist das eigentlich bei allen Codes.
Das am Anfang können wir schonmal weglassen, weil das nur bedeutet, dass die fertige Vorstellung am Ende mittig ist.

Als nächstes kommt das

, das zieht sich über den ganzen Rahmen hinweg und wird erst ganz am Ende mit

geschlossen.
Jetzt wird es etwas komplizierter, denn wir verwenden für unseren Rahmen nicht nur HTML, sondern auch eine andere Computersprache namens CSS.
Diese kommt nämlich jetzt ins Spiel.
Erstmal noch eine grundlegende Regel zu CSS: Hier werden nicht die sog. HTML Tags, also die Eckchen < und > verwendet, sondern ein CSS Befehl sieht so aus:
BEFEHL: ANGABE;
Besonders wichtig ist das Semikolon ( Wink

am Ende, denn wenn das vergisst funktioniert es nicht.
Nun werden wir HTML und CSS kombinieren.
Unser erster CSS Befehl lautet 'border-style'. Hiermit legen wir dir Art der Linie um den Rahmen fest. 'Solid' zum Beispiel ist eine normale durchgezogene Linie. Ich in meiner Vorstellung verwende 'dotted', sodass die Linie gepunktet wird.
(Andere Angaben wären z.B: none (keine Linie), dashed (gestrichelt) oder groove (3D))
Der Befehl lautet also: border-style: dotted;

Als nächstes müssen wir die Farbe der Linie festlegen, das geht mit dem Befehl "border-color"
Man kann z.B. schreiben: border-color: yellow; das wäre dann ein gelber Rahmen, wer aber eine spezielle Farbe will muss Hexadezimal-Codes nehmen.
Ich für die Vorstellung verwende den Hex.Code #00000 , das ist die Farbe schwarz.

Das nächste Wichtige ist die Farbe des Rahmeninnenraums, der Befehl hierzu lautet "background-color".
Hierfür gilt das gleiche wie für "border-color", ich verwende nun die Farbe #50646E, da sie farblich gut zu dem Forum passt.
Und nicht das Semikolon vergessen! :D

Eigentlich ist es doch gar nicht so schwer, oder? (=

Nun muss noch die Dicke der Rahmenlinie bestimmt werden, und zwar mit dem Befehl "border-width". Die Angabe kann sein: thin (also dünn), medium (mittel), thick (dick) oder mit der Einheit px.
Man kann an den Seiten unterschiedliche Dicken verwenden mit den Befehlen:
border-top-width (Dicke der Linie oben)
border-bottom-width (Dicke der Linie unten)
border-right-width (Dicke der Linie rechts)
border-left-width (Dicke der Linie links)
So mache auch ich es zum Beispiel.

Nun ist der Äußere Rahmen fast fertig!
Jetzt muss nur noch die Höhe und Breite bestimmt werden:
Höhe geht mit dem Befehl "height" und darauf folgt ein Wert in der Einheit px. (Ich verwende 600px, da mein Rahmen scrollbar ist). Die Höhe muss aber meistens gar nicht angegeben werden, weil es sowieso darauf ankommt, wie lang der Inhalt ist. Die Höhe muss nur angegeben werden wenn der Rahmen srollbar sein soll (Wie das geht unter "Zusätze"). Die Breite aber sollte schon angegeben werden, ihr Befehl lautet "width", und darauf folgt, wie bei der Höhe ein Wert in der Einheit px. (Ich verwende 350px).

Kleiner, aber nicht zwingender Zusatz:
Runde Ecken bekommt man mit dem Befehl "border-radius" und als Angabe ein Wert in der Einheit px. (Ich verwende 20 px)

Mit dem Befehl und der Angabe: overflow: scroll;
lässt sich der Rahmen am Ende scrollen.

So, nun muss man das nur noch alles in das HTML einbinden und fertig ist der äußere Rahmen!
Gesamt sieht alles, was wir bis jetzt gemacht haben, als Code so aus:

Code:: <div style="border-style: dotted;border-color: #00000; border-radius: 20px; background-color: #50646E; border-top-width: 0px; border-bottom-width: 3px; border-left-width: 1px dotted; border-right-width: 1px dotted; width: 350px; height: 600px; overflow: scroll;">HIER STEHT DEIN TEXT</div>

Wichtig: Nicht das

am Ende vergessen, sonst klappt es nicht!
Und im Beitrag sieht es dann so aus:

HIER STEHT DEIN TEXT!

Soo, wenn man das verstanden hat kann man eigentlich dann alles Mögliche machen, zum Beispiel einen Rahmen im Rahmen (so wie ich es für die Textfelder gemacht habe).
Ein Bild fügt man übrigens mit HTML so ein:

Code:: <img src="DEINE URL">

Beachte: Dein Bild sollte natürlich nicht breiter sein als die Rahmenbreite (width)!
Und die
oben im Code sind nichts weiter als ein Platzhalter für eine leere Zeile.
Sonst hilft nichts außer üben, üben, üben, denn es ist ja noch kein Meister vom Himmel gefallen ^^

Bitte um eine kleine Rückmeldung wie ihr es findet und was ich noch verbessern kann!
Bitte nicht kopieren ohne mich um Erlaubnis zu fragen, das Tutorial war nämlich sehr viel Arbeit!
Aber natürlich dürft ihr es gerne nutzen, um eure Kenntnisse zu erweitern, dazu ist es schließlich da!

» Kleines Namenslexikon
» Ein kleines Gesuche :3
» Noch ein kleines Gesuche|| Bitte mal schauen ^^
» Gesuhe für Aschenherz / Eher kleines Gesuche...
» HTML-Code Vorlage