És most lehet föltenni a kérdést, hogy ugyan miért is foglalkozok ezzel az egésszel. A válasz igen egyszerű, régebben is ezt csináltam, html/css/photoshop tutorialokat írtam és videóztam, szóval lehet ez egyfajta nosztalgia, illetve rengeteg blogger blogján látom szabadkozásukat, hogy ők nem értenek ehhez az egészhez, szóval ezért néz ki ez és ez így meg ilyenek.
Ettől függetlenül tudom, hogy rengeteg ilyen leírás található már a google találatlistáján és gondolhatjátok, hogy én se úgy születtem, hogy ezt az egészet tudtam, én is megtanultam valahonnan... DE.
De több helyről és hosszas idő alatt, mert egyszerűen sehol se láttam még tökéletesen egyértelműen és leegyszerűsítve a dolgokat, szóval szeretném én megpróbálni. Lássunk is neki. c:
Ez a poszt a blogger felületén dolgozó bloggereknek és bloggerináknak szól, elsőnek is a szövegszerkesztésről és a az alapvető kódértelmezésről.
Őszintén, ha átváltunk az "írás" nézetből "html"-re sokan sírva futnak ki a világból, mert ezek értelmetlen kódok és kacsacsőrök mindenhol.
Elsőnek is a legfontosabb megérteni, hogy hogyan is épül fel ez az egész. Számomra olyan mint egy doboz. Egy doboz amibe egyre kisebb dobozokat pakolunk. Van, hogy a dobozba tett doboz mellé és van, hogy a dobozba tett dobozba kerül még egy és így tovább.
Ez a gyakorlatban úgy néz ki, hogy mindennek van egy eleje és egy lezáró kódja (többnyire) így tudja a számítógép ezeket az egységeket értelmezni.
A kezdő jel mindig egy egyszerű
< valami > két egymás felé fordított kacsacsőrben van és az ezt lezáró is úgy szint, csak az első kacsacsőr után írunk egy per / jelet. Így:
< / valami >Már ezekben a sorokban is látszik, hogy bizony mindent el kell kezdeni és le is kell zárni, ahogy a kacsacsőrök is mutatják.
Ha megnézzük egy-egy bejegyzésünk html kódját, láthatjuk, hogy a <, vagyis kacsacsőr után többnyire egy div szócska található. E helyett használhatjuk még a P betűt is, de mégis mire?
Ez alapvetően a bekezdések jelzése, tehát a blogger minden egyes enter lenyomás után új bekezdést generál, egy új dobozt hoz létre a többi mellé (és nem bele!).
((Alapvetően a bekezdéseket
<p> ez egy bekezdés </p> <p> ez meg egy másik </p> így szoktuk kifejezni, de a blogger ezen generátora a div tag-et használja. Erről majd később, de mindkettőt felismeri természetesen.))
Minden egyes bekezdés külön formázást kap tehát külön külön mindegyiknek meg van mondva, hogy merre igazítsa a tartalmazott szöveget, mekkora betűmérettel, milyen betűtípussal és így tovább. Ezek a formázások a <div> tag elejébe vannak beírva, egy "style" szócska után. Tehát a kód úgy néz ki, hogy
<div style="mindenféle adatok"> itt a formázott bekezdés szövege </div>. A lezáró </div> mindig csak így egymagában áll, őt nem bővítjük, hisz logikus, hogy mielőtt elkezdenénk festeni, kinyomkodjuk a megfelelő színeket a palettára és rajzolunk a vázlatot, majd csak ezután jön a munka, ami ez esetben a szöveg. c: Remélem érthető.
Bár mondhatnám hogy ez az egész olyan, mint az esküvő előtti menyasszony, aki áradozik, hogy itt lila virágok lesznek, ott fog a zenekar játszani és így tovább.
Na de, mit is tudunk megmondani? A legalapvetőbb a szöveg igazítása, tehát a balra-jobbra-középre-sorkizárt négyes. Minden tulajdonságnak megvan a maga tulajdonsági neve és utána a meghatározott tulajdonsága. Tehát:
- text-align: szöveg igazítása, center (középre), left (balra), right (jobbra), justify (sorkizárt)
- font-color: szöveg színe, #színkód (6 karakteres kód, ITT lehet pl generálni)
- font-family: betűtípus, mint a Times New Roman, Comic Sans Ms stb..
Több is van, de a bloggerben nem sokra lehet őket használni, szóval szükségtelen lenne most leírni. De akkor most nézzük, hogyan is lehet őket használni.
<div style="text-align: justify; font-color: #000000; font-family: Times New Roman;"> itt a bekezdés szövege </div>
Minden egyes tulajdonságot ; pontosvesszővel választunk el egymástól és két idézőjel közé írunk, itt is ez mutatja, hogy hol kezdődik és meddig tart a stílusleírás, majd egyszerűen az egészet lezárjuk. itt látható, hogy milyen az, ha egy dobozba egy másikat teszünk, hisz a div tagben azaz dobozban helyeztük el a style dobozkát. Fontos, hogy ne felejtsük el lezárni a div dobozt a végén egy kacsacsőrrel és a tulajdonságokat is egy ; pontosvesszővel az idézőjel előtt!
Most, hogy kész a bekezdésünk, jöhetnek a bekezdésen belüli formázások, azaz a dőlt-aláhúzott-félkövér-áthúzott négyes, a kép és link beillesztése (na meg a képes link beillesztése is!)
- dőlt: <i>dőlt szöveg</i>
- félkövér: <b>félkövér szöveg</b>
- aláhúzott: <u>aláhúzott szöveg</u>
- áthúzott: <s>áthúzott szöveg</s>
Értelem szerűen addig fogja átalakítani a választott formára a gép a szöveget, amíg azt le nem zártuk. Tehát az egy diven belüli szöveget tudjuk ezzel formázni, amikor mondjuk fontos dolgot akarunk kiemelni, mint én följebb az eddig összerakott kódokat. Html formában csak a kiválasztott mondatrészt, mondatott, betűt, szót közre kell fognunk, egy-egy
<i> valamilyen szöveg </i> kacsacsőrrel és már formázva is van. c:
Fontos még, hogy a html nézetben hiába nyomkodjuk az entert, nem csinál semmit különösebben, főleg nem azt ami mi szeretnénk, tehát csak egy enter lenyomás miatt nem fog semmi új sorban kezdődni, ugyanúgy folytatódik, mintha hozzá se értünk volna a billentyűhöz. Tehát a html-ben az enterre is külön kód van, a
<br />. Ő kiváltképp érdekes, hisz nincs párja, nem kell elkezdeni se lezárni, csak beírni és megtörténik a sortörés. Ezenkívül a / jelet nem az elejére, hanem a végére kell írni.
Fontos, hogy őt nem csak a bekezdésen belül tudjuk használni, hanem a bekezdéseket távolíthatjuk vele.
Tehát kinézhet így is:
<div> valami szöveg az első sorban <br /> valami szöveg egy új sorban </div>
Illetve így is:
<div> első bekezdés </div> <br /> <br /> <div> egy bekezdés két sorral lejjebb</div>
Értelem szerűen minden egyes <br /> egy enter leütésének felel meg, tehát ha többet írunk le, nagyobb lesz a távolság.
Mint mondtam itt a blogger szerkesztőjében nagyjából egyenértékű a <p> </p> és a <div> </div> tehát a fönt leírt div-ek átírhatóak p-re is.
A többi majd egy következő bejegyzésben, egyenlőre ez is elég sok. ^-^ Sok sikert a megemésztéséhez. Végezetül pedig a legfontosabb: ezeket mind a html nézetben lehet és tudjátok használni, tehát ha írás nézetben gépelitek be, ugyanúgy egyszerű szövegnek fogja tekinteni a blogger és kiírja a kódokat, mint ebben a posztban én is. c:
