HTML kódok - Tutorial

Sziasztok!

Oh, Istenem, de jó érzés bejegyzést hozni ide. Nagyon rég nem posztoltam semmi hasznosat, de mint mindennek, ennek is eljött az ideje.

A chatben kértek egy kis segítséget, mégpedig, hogy hogyan lehet a modulban lévő szöveget sorkizárttá tenni. Nos ennek több módja is van, szóval kezdjük.

A) lehetőség.

Ha csak egy egyszerű szöveget szeretnél sorkizárttá tenni, nincs is más dolgod, mint megírni Wordben (sorkizártan), kijelölöd, másolod és beilleszted egy szöveg modulba. Én ezt nem szoktam használni, egy másik blogon láttam, de ez is megoldás.

B) lehetőség.

Az adott szöveget megírod egy szöveg modulban, majd a fenti lehetőségek közül rámész a HTML-kód szerkesztésére. Nincs más dolgod, mint hogy a kisregényed elé beírd a megfelelő kódot, és voila, megvagyunk.

Pl.: <div style="text-align: justify;">Ez lenne a te kisregényed, de én lusta vagyok írni.</div>

Elmagyaráznám, hogy mi micsoda, de nem nagyon van mit. Ha ezen változtatni szeretnél, és mondjuk középre szeretnéd igazítani a szöveget, akkor csak annyi a dolgod, hogy a justify-t átírod center-re.

justify - sorkizárt

center - középre igazított

left - balra igazított

right - jobbra igazított

Én ezt eddig nem próbáltam, de működnie kell.

C) lehetőség.

Általam ajánlott.

Kezdd ott, hogy megnyitsz egy HTML modult. A lényege ugyan az, mint a B) lehetőségnek, de én valamiért ezzel jobban szimpatizálok. Mindig ezt használom, és nekem ez így nagyon is jó.

És akkor jön a feketeleves...

Ezt az kezdje el olvasni, akit érdekel a kódolás, de még nincs benne annyira a témában. Én általában magam írom azokat a kódokat, amiket felhasználok más blogokon, maximum sablonnak veszek egy egyszerűbbet (mostanság már azt se nagyon), hogy könnyebben menjen. Túl bonyolultakat nem tudok csinálni, eddig nem is nagyon akartam, mert az olyasfajtákat nem nagyon tudom hol felhasználni. Nos, nézzük, hogy hogy kell elkezdeni.

Én mindig <div>-vel dolgozok. ezt ajánlom nektek is. Az ilyesfajta kódokat mindig ugyan úgy kell elkezdeni; <div style=". Innentől jöhet az, amit te szeretnél. Betűszín, méret, betűtípus, háttérszín... minden, amit el tudsz képzelni. Én most le fogok nektek gyártani egy egyszerűbb címes szövegdobozt, csak hogy lássátok lépésről, lépésre.

Először a cím dobozának a tulajdonságaival kezdjük. Csináljunk valami rózsaszínt!

<div style="width: 200px; height: 30px; background: #FF6666; border-top: 2px  #fff solid; -moz-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;">

Magyarázatok

width, height: a szövegdobozod szélességét és magasságát határozzák meg (width=szélesség, height=magasság)

background: itt a háttér színét kell bepötyögnöd, Hex színkódban. (egy kis puska)

border: nos, ide jöhetnek különböző variációk. A doboz keretét adja meg. én utána írtam, hogy top, mivel én csak a doboz tetejére szeretnék keretet, de ez kombinálható is. Mutatom:

border-top: ez ugye a tetején lévő csík;

border-bottom: ez a fenekére varázsol akármilyen színű vonalat;

border-left: bal oldalra;

border-right: értelem szerűen jobb oldalra.

Fontos dolog az, hogy ahhoz, hogy látszódjon is a kereted jól kell megadnod az információkat. Le kell írnod, hogy milyen vastagságú legyen a vonal (ezt px-ben kell megadni), hogy milyen színű legyen a vonal (szintén Hex kódban), és, hogy milyen típusú vonalat szeretnél. Ennek is vannak különböző fajtái.

solid - sima vonal

dashed - szaggatott vonal

double - dupla vonal

dotted - pöttyözött (vagy valami olyasmi)

Van még egy pár fajta, amik inkább 3D effektet adnak a doboznak (én ilyesmiket nem használok), azokat itt találjátok. Valamint itt láthattok példákat is, az általam említett keret fajtákra.

border-radius: Ez szolgál a kerekített sarkakért. Mint mindennek, ennek is van egy szabálya, nekem is időbe tellett, mire rájöttem. Nos. balról megyünk jobbra, fentről le. Azaz az első 10px a bal felső sarokban lévő sarokért felel. Aztán a következő szám pedig a jobb-felső sarokhoz tartozik. Innen le megyünk, a jobb-alsó sarokra, majd tovább a bal-alsóra. Remélem, érthető volt. :) Fontos, hogy először berakd a -moz-border-radius-t, majd utána a border-radius-t! Az adatok ugyan azok maradnak.

Persze lehet még extrákat pakolni rá, de én nem szeretem túlcsicsázni a dolgokat. Viszont, ha valakit érdekel bármi ilyesmi, ajánlanám nektek ezt az oldalt, én innen nagyon sokat tanultam. :)

Folytatás....

Nos, már megvagyunk a háttérrel, szóval jöjjön a szöveg. Ismét <div>-ben dolgozunk.

<div style="font-size:24px; font-family: Times New Roman; color: #fff; text-shadow: #727272 2px 2px 2px;">Cím</div>

font-size: betűméret.
font-family: betűtípus. Egy másik bejegyzésben majd még fogok nektek erről beszélni.
color: betűszín.
text-shadow: ez a betű árnyékolásáért felel. Lehet színt állítani, meg minden mást is, de szerintem ez így nagyon jól van.

Most már csak össze kell dolgozni a kódokat, és meg van a címünk! Figyeljetek!

<div style="width: 200px; height: 30px; background: #FF6666; border-top: 2px  #fff solid; -moz-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;"><div style="font-size:24px; font-family: Times New Roman; color: #fff; text-shadow: #727272 2px 2px 2px;">Cím</div></div>

Csak, hogy meg tudjátok őket különböztetni. Nos, ez így néz ki:

Cím

Mivel már elmagyaráztam a dolgokat, ezért csak összedobok gyorsan egy alsó részt is, hogy teljes legyen, és tudjatok mit vinni. :) Az utasítások alapján meg is tudjátok őket változtatni.

A kód:

<div style="width: 200px; height: 30px; background: #FF6666; border-top: 2px  #fff solid; -moz-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;"><div style="font-size:24px; font-family: Times New Roman; color: #fff; text-shadow: #727272 2px 2px 2px;">Cím</div></div>
<div style="width: 200px; background:#ff9393; border-top: 3px white solid; border-bottom: 4px white double;"><div style="font-size: 13px; font-family: times new roman; color: #727272; text-align: justify;">ide jön a szöveg. ide jön a szöveg. ide jön a szöveg. ide jön a szöveg. ide jön a szöveg. ide jön a szöveg. </div></div>

Ahogy kinéz:

Cím

ide jön a szöveg. ide jön a szöveg. ide jön a szöveg. ide jön a szöveg. ide jön a szöveg. ide jön a szöveg.

Nos, remélem, segíthettem. :) Nyugodtan kérjetek még segítséget ilyen téren, szívesen megosztom veletek azt, amit tudok.