Üdvözlünk mindenkit a Blurred Colors-on, amely továbbra is az első és egyetlen magyar szerepjátékos és grafikai fórum, illetve annak közössége. Kedves, segítőkész emberekkel, változatos versenyekkel, sokoldalú kódokkal, grafikákkal és egyéb hasznos dolgokkal látjuk el a rászoruló eltévedt szerepjátékozni, vagy épp csak képet szerkeszteni vágyókat. Csatlakozz hozzánk te is! Regisztrálj, de még mielőtt megtennéd, kérlek, olvasd el a szabályzatunkat.






a hónap aláírása by
don'tFORGET


a hónap blendje by
away from the light &


a hónap ikonszettje by
light up the world


  
  válaszol új topik szavazás

» Kódolási alapismeretek, ~dohtml alapok~
gazdy
 Posted: Sep 20 2011, 12:43 PM
idézés



Group Icon

Group: statiszta
Posts: 47
Member No.: 11
Joined: 19-September 11









ALAPOK?!?!

HELLO KEDVES IDEGEN! Itt az ideje, hogy meséljek neked egy kicsit a kódolásról! Mert nem nagy ördöngősség ám, hidd el! Csak az alapoknál kell kezdeni mindent és aztán haladni az egyre bonyolultabb dolgok felé! (; Azt remélem mindenki tudja, hogy [ dohtml] tag-ek közé illesztjük a kódunkat. Azért ez mégiscsak alap, de hátha valaki még erről sem hallott soha. xD

Oké, tehát, valaha láttál egy dohtml sablont, láttad a < div style = "kód hókusz-pókuszt;" > < / div > cuccot, igaz? Nos, ez a dolog határozza meg, hogy milyen lesz az utána lévő szöveg vagy kép stílusa. NAGYON FONTOS: - mindig győződj meg arról, hogy minden ilyen megkezdett kódot lezártál-e!

Most, nézzük meg egy dohtml kód felépítését. Kezdjük valami egyszerűvel. Mit szólnál egy hozzászóláshoz?




where's your real friends now?



CODE
[dohtml]<center>
<div style="width:400; height:15; background-color:321212; font-family:georgia; font-size:25; text-transform:lowercase; font-style:italic; text-align:center; color:ffffff; padding-bottom: 9px; padding-top: 0px; text-shadow: 1px 1px 1px #000000; line-height:80%;">
where's your real friends now?</div>
</center>[/dohtml]


most vessünk egy pillantást a kódunkra.


QUOTE

<div style="width:400; height:15; background-color:321212; font-family:georgia; font-size:25; text-transform:lowercase; font-style:italic; text-align:center; color:ffffff; padding-bottom: 9px; padding-top: 0px; text-shadow: 1px 1px 1px #000000; line-height:80%;">
where's your real friends now?</div>


A PIROS az a része, amely meghatározza a div (nem tudom, van-e hivatalos megnevezése xD) magasságát (height) és szélességét (width). Ez azért is fontos, mert ezzel tudod igazítani a szöveget.
A LILA a háttérnek a színét adja meg, melyet egy 6 jegyű betűkből és számokból álló HEX kóddal adhatsz meg.
A KÉK a szöveget formázza különféle módon - erre majd később kitérünk egy külön topikban.

Most egy picit bonyolítunk rajta, hogy végre igazi hozzászólás sablont kapjunk.Tudom, hogy ez a kód kicsit félelmetesnek és zavarosnak fog kinézni, de ne aggódj. Apránként átnézzük és mire észbe kapsz, már kész is a teljes kód. (;


where's your real friends now?
szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide

szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide

szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide

TAGGED: Név WORDS: ###MUSIC: CLICK


CODE
[dohtml]<center><div style="width: 400; height: 540px; border: 2px #000000 dotted; padding: 2px 2px 2px 2px; -moz-border-radius: 30px 30px 30px 30px;">

<div style="width: 400px; height: 200px; background-image: url(http://i40.tinypic.com/nosw38.jpg); -moz-border-radius: 30px 30px 0px 0px;"></div>

<div style="width:400; height:15; background-color:321212; font-family:georgia; font-size:25; text-transform:lowercase; font-style:italic; text-align:center; color:ffffff; padding-bottom: 9px; padding-top: 0px; text-shadow: 1px 1px 1px #000000; line-height:80%;">
where's your real friends now?</div>

<div style="width: 400px; height: 300px; text-align: justify; overflow: auto; font-family: verdana; font-size: 9px; color: #000000;">
szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide
<p>
szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide
<p>
szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide szöveg jön ide
<p></div>

<div style="width:400; height:10; background-color:321212; font-family:georgia; font-size:10; text-transform:uppercase; font-face:bold; letter-spacing:3; text-align:center; color:ffffff; padding-bottom: 3px; padding-top: 8px; text-shadow: 1px 1px 1px #000000; line-height:50%;-moz-border-radius: 0px 0px 30px 30px;">
<b><font color=bdbaba>TAGGED:</font></b> Név <b><font color=bdbaba>WORDS:</font></b> ###<b><font color=bdbaba>MUSIC:</font></b> <a href=http://www.link.com>CLICK</a></div>
</div></center>[/dohtml]


QUOTE
<center><div style="width: 400; height: 540px; border: 2px #000000 dotted; padding: 2px 2px 2px 2px; -moz-border-radius: 30px 30px 30px 30px;">

<div style="width: 400px; height: 200px; background-image: url(http://i40.tinypic.com/nosw38.jpg); -moz-border-radius: 30px 30px 0px 0px;"></div>

<div style="width:400; height:15; background-color:321212; font-family:georgia; font-size:25; text-transform:lowercase; font-style:italic; text-align:center; color:ffffff; padding-bottom: 9px; padding-top: 0px; text-shadow: 1px 1px 1px #000000; line-height:80%;">
where's your real friends now?</div>

<div style="width: 400px; height: 300px; text-align: justify; overflow: auto; font-family: verdana; font-size: 9px; color: #000000;">
szöveg jön ide
<p></div>

<div style="width:400; height:10; background-color:321212; font-family:georgia; font-size:10; text-transform:uppercase; font-face:bold; letter-spacing:3; text-align:center; color:ffffff; padding-bottom: 3px; padding-top: 8px; text-shadow: 1px 1px 1px #000000; line-height:50%;-moz-border-radius: 0px 0px 30px 30px;">
<b><font color=bdbaba>TAGGED:</font></b> Név <b><font color=bdbaba>WORDS:</font></b> ###<b><font color=bdbaba>MUSIC:</font></b> <a href=http://www.link.com>CLICK</a></div>
</div></center>


A LILA a bordert, más néven a szegélyt jelenti, melyek a vázat körülölelik. (A border/szegély 2px vastagságú, # HEX színkódú dotted/pontozott, dashed/szaggatott, solid/szolid, stb. stílusú lehet.) Ehhez még a padding, vagyis a "körül párnázás" vagy margó jön még hozzá. E kitöltés segít megőrizni/egyben tartani a dolgokat. Úgy döntöttem, 2px lesz nálam, de növelheted a vastagságát tetszés szerint. Minden oldalról 2 px-et választottam. Egységesen, ha valahol 4 db px-es szám áll, az a négy oldalt jelenti. Vagyis: 1.px= bal felső, 2.px= jobb felső, 3.px= bal alsó, 4.px= jobb alsó sarkát a kódodnak.
A PIROS a háttérképet jelenti, valamint a lekerekítést, ami a ugyanúgy működik, mint a padding esetében. Azonban, ha csak egy számból áll ez a lekerekítés, akkor kört kapunk. (;
A ZÖLD a betűk árnyékolásáért (text-shadow) felel, az árnyék színét a HEX színkódok segítségével határozhatjuk meg.
A NARANCS a szöveg rendezésérért felel. ÉN most sorkizártra (justify) állítottam.
A KÉK a görgetősáv. Ez igen hasznos, mert a szöveg - ha túl sok - nem tölt ki nagy helyet az oldalon. Én szinte minden esetben használom.

Nos, a tanmesém végéhez ért, remélem hasznos volt számotokra. Már csak némi visszajelzését szeretnék kapni tőletek! Hasznos volt ez egyáltalán? Van valami, amit esetleg magyarázzak meg ezzel a kóddal kapcsolatban? Tudasd velem, és én megpróbálom a legjobb tudásom szerint megválaszolni a dolgot.

--------------------
user posted image
pm
^
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

Topic Options válaszol új topik szavazás