Szöveg szerkesztő felület => html kód

Amikor hozzászólni készülsz egy témához, blogodat írod, vagy szerkesztő vagy a site-on, és nem tudod miért olyan randa az általad felvitt tartalom, nézd meg ezt a kis leírást, és megérted, hogyan is működik a web-es szövegszerkesztő (html editor).

Tartalom:

Bevezető

Forráskód megnézése

Ami hasonlít a Word-höz

Ami más mint a Word

Kész szöveg beillesztése

Kép beillesztése

File kezelő használata

Beillesztett kép kiemelése (Lightbox)

Hivatkozás beillesztése

webcím hivatkozás elhelyezése

hivatkozás megjelenítése

szerveren lévő file-ra való hivatkozás

e-mail küldése a felhasználó levelezőkliensén keresztül

e-mail küldése a weboldalon keresztül

Navigáció az oldalon belül

Táblázat beillesztése

Táblázat forráskódja

---

Bevezető

Először is nézzük meg, hogyan is működik a web-es szövegszerkesztő.

Feltételezem, mindenki használt már Word, vagy OpenOffice programot. Ez a szerkesztő nagyon sok szempontból arra hajaz, hogy úgy nézzen ki, mint egy már általunk megszokott szövegszerkesztő. Ám ez nem minden szempontból azonos vele.

A fő ok az, hogy egy ilyen szövegszerkesztő nem egy nyomtatandó dokumentumot, hanem egy weboldal tartalmi elemét szerkeszti. A nagy különbség itt abban van, hogy ez a tartalom nem minden gépen, és minden esetben azonos kinézetű. A webtartalom (html kód) ezért olyan formátumokat, és szerkesztési szabályokat tartalmaz, ami ehhez az igényhez igazodik.

A szerkesztő tehát ennek tükrében működik. Igazából Ő annyit csinál, hogy elfedi előlünk a html kód tartalmát, és egy hasonló nézetet teremt, mint ahogyan a megcsinált kódunk ki fog nézni. Ismétlem: CSAK HASONLÓ

vissza a lap tetejére

---

Forráskód megnézése:

Ahoz, hogy ezt a kódot követhessük, a szerkesztő lehetőséget kínál nekünk, hogy megnézzük az általunk a vizuális szerkesztővel létrehozott tartalom forráskódját is.

Nézzünk egy példát:

Beírjuk a szerkesztő szövegmezőjébe a következő tartalmat:

"Ide írjunk bele valami szöveget <ENTER>  dobjunk sort egy 'enter'-rel"

(<ENTER> az az enter billentyűt jelölte.)

Ekkor a képernyőn a következő tartalom jelenik meg.

 

 

 

 

 

 

Most pedig nézzük meg, hogy hogyan is néz ki ennek a tartalomnak a forráskódja. Ehez az alábbi gombot kell megnyomnunk a szerkesztő fejlécében:

 

Az eredmény a következő lesz:

(Ha újra megnyomjuk a 'Forráskód' feliratú gombot, a szerkesztő visszavált a nézeti képre.)

Első látásra ákombákomok kerültek a képernyőre. Ha azonban jobban megnézzük, láthatjuk, hogy tulajdonképpen egy strukturált szöveg van elöttünk. Először is a sor elején '<p>', majd a sor végén '</p>' feliratok vannak. A szövegünkben pedig az ékezetes betűk helyett több karakter van 'áéíúóöüú' betűk helyett: á = &aacute;             é = &eacute;             í = &iacute;              ú = &uacute;               ó = &oacute;

ö = &ouml;                ü = &uuml;               ú = &uacute;

 Ez nem olyan gázos, csak első ránézésre. A kódolása a következő:

1. egy '&'

2. a betű ékezet nélkül

3. - egy hosszú ékezet esetén: 'acute'

    - kettő rövid ékezet esetén: 'uml'

4. egy ';'

Ennyi az egész. Ahogyan egyre jobban belemegyünk a grafikus szerkesztő kezelésébe, és van hozzá ideged, és kedved, mindíg nézz bele a forráskódba, és meg fogod érteni, hogy az egész szerkesztő semmi mást nem csinál, minthogy a beírt kódunkat lefordítja html formátumúra.

Mindíg igyekezz a lehető egegyszerűbb html kódot generáltatni a szerkesztővel!

vissza a lap tetejére

---

Ami hasonlít a Word-höz:

Egyszerű html kód létrehozásához figyelj ezekre:

1. A sorok nem ugyan olyan hosszúak a szövegszerkesztőben, mint az elmentés utáni megjelenő dokumentumban, ezért ne próbáljunk <space> nyomogatásával, vagy valamilyen más módszerrel üres helyet csinálni.
2. Lehetőleg ne használj az alap karakterkészlethez képest más fontokat. Tehát a  fülbe lehetőleg ne állítsd át a fontkészletet. (Ez általában csúnya is.)
3. Ha megkülönböztetett betűket akarsz használni, a  lenyitható fület, illetve a   betűformázó/színező gombokat használd.
4. A sorok elrendezésére mindíg a Word-ből jól ismert gombokat használd.

 

Nézzünk néhány hasznos tanácsot:

  

• Ha valamit ki akarsz javítani, és ezért az utolsó műveletedet vissza akarod vonni, akkor a Word-ben is használt "visszavonó", és "Ismét" gombokat tudod használni.
• A keresés és csere gombok is igen hasonlóan működnek a már ismert szövegszerkesztőkhöz a
• Ha a tartalomban valamit ki akarsz jelölni, nyomd le a <shift> gombot miközben a nyilakkal haladsz. Megteheted ezt úgy is, hogy a szövegben az egérrel rámész a kijelölendő rész egyik végére, majd az egér bal gombját lenyomva a kijelölendő rész másik végéhez mész, és ott elengeded a bal gombot.
• Ha az egész tartalmat ki akarod jelölni, akkor pedig nyomd meg a gombot.
• Ha a felvitt tartalomból el akarod távolítani a formázását, akkor jelöld ki a tartalomrészletet, majd pedig nyomd meg a gombot. Ez a szöveget nem, de a formázási tulajdonságokat eltávolítja.
• Ha valamely, a billentyűzetről nem elérhető karaktart akarod megjeleníteni, használd a
• Ha a szövegedben akarsz egy vízszintes vonalat húzni elválasztás képpen, akkor nyomd meg a gombot.

Ez eleddig nem bonyolult dolog.

 vissza a lap tetejére

---

Nézzük most azokat az elemeket, amik másként vannak mint a megszokott szövegszerkesztőkben:

 vissza a lap tetejére

---

Kész szöveg beszúrása:

Általános szabálynak azt kell elmondanunk, hogy mindíg úgy szúrjunk be szöveget egy másik szövegszerkesztőből, hogy a szöveg formázási elemeit ne másoljuk át.

Mit is jelent ez?

Nagyjából annyit, hogy amikor egy szövegszerkesztőben (pl. Word) beírunk egy szöveget, akkor maga a szövegszerkesztő a konzekvens megjelenés érdekében az általunk látott szöveget különböző szövegformázásokkal látja el. (pl.: betűtipus, behúzás, dőlt vagy megvastagított betű st.)

Amikor pedig a Wordben kijelöljük a szöveget, akkor ezeket a formázásokat is kijelöljük, és a beásoláskor azokat is átvisszük a html editorba. A gond pedig ezzel az, hogy ezeket a formázó jeleket a html editor vagy nem tudja értemezni, vagy pedig értelmezi, és így a weben megszokott és esztétikus formázások helyére a szövegszerkesztő formázását rakja, ami ezáltal széthullott, vagy felesleges karakterekkel összezavart lesz.

Ezt úgy tudjuk elkerülni, ha a Word-ben (vagy más szövegszerkesztőben, akár wordpad is) kijelöljük a másolandó szöveget, majd átlépünk a html editorhoz, a cursorral oda megyünk, ahová a szöveget be akarjuk illeszteni, és az egérrel a 'Beillesztés formázás nélkül' ikonra klikkelünk.

Ekkor megjelenik az alábbi ablak:

Ide beillesztjük a kívánt szövegünket, és megnyomjuk a 'Rendben' gombot. Ha a beillesztett szövegbe formázást akarunk rakni, akkor a html editorban ezek utántudunk értelmesen formázni benne anélkül, hogy szétesne a kép. (Figyelem, ne használj az alaptól eltérő betűtipust, vagy más speciális formázást, mert az nem minden olvasó böngészője számára lesz értelmezhető.)

vissza a lap tetejére

---

Kép beillesztése a szövegbe:

A weboldalakon egy-egy jól elhelyezett megfelelő méretű kép elhelyezésével szebbé, színesebbé és érthetőbbé tehetjük a tartalmat.

Ezért pedig a következő képpen tehetjük meg az általunk felvitt tartalomba. Figyelem, a weboldalon csak .jpg, .jpeg, .png és .gif kiterjesztésű képeket lehet megjeleníteni!

Tehát menjünk a szövegben oda, ahová a képet be akarjuk tenni.

Egérrel menjünk a 'Kép beillesztése/módosítása' gombra és klikkeljönk bele. Ekkor a következő felugró ablak jelenik meg:

Amennyiben a beillesztendő kép már a szerveren van, a kép hivatkozását csak be kell írnunk a 'Hivatkozás' ablakba. Ha nem tudjuk pontosan a hivatkozás helyét, akkor a 'Böngészés a szerveren' gomb beklikkelése után megnyílik egy file-kezelő ablak:

Értsük meg először, hogy hogyan is működik ez a file kezelő:

- A fejlécben találhatóak (halvány sárgás színekkel) a funkciók.

- Alattuk a bal felső traktusban a könyvtárstruktúrát jelölő ablak. (Itt nem lehet ki-be járkálni, pusztán a felhasználó számára fenntartott alkönyvtár kezelhető.)

- A jobb felső traktusban láthatóak a már feltöltött file-ok.

- A bal alső részben a különböző események naplóját láthatjuk.

- A jobb alsó rész pedig a kiválasztott képet mutatja meg nekünk.

a,) Ha a kép, amit be akatunk illeszteni, elérhető a könyvtárunkban, akkor a jobb felső traktusban válasszuk ki, majd klikkeljünk a 'Send to FCKEditor' fejléc elemre.

b,) Ha a képünk nincsen fenn a szerver adott könyvtárában, akkor nyomjuk meg a fejlécen a 'Feltöltés' szöveget. Ekkor a fejléc kibővül az alábbi elemmel:

Ítt a 'Tallózás' gombra klikkelünk, és a már megszokott módon kiválasztjuk a feltöltendő kép file-t. Majd a 'Feltöltés' gombra kattintva feltölthetjük a képet a szerverre. Figyelem, a kép méretére korlátozás van. Ha szükségünk van egy kisebb képre is a szerveren, akkor a 'Feltöltés' gomb benyomása előtt az Ikon készítése résznél választhatunk előre meghatározott méretekből. Ezek után klikkeljünk a 'Send to FCKEditor' fejléc elemre.

Visszakapjuk a 'Kép tulajdonságai' ablakot egy kitöltött 'hivatkozás' mezővel.

A 'Buborék szöveg' mezőbe beírhatunk egy szöveget, ami akkor fog megjelenni az olvasó előtt, ha az egeret a képre viszi.

Ha a képünk méretei nem megfelelőek, akkor a 'Szélesség' és 'Magasság' gombok használatával átméretezhetjük azt. (Figyelem, kerülni kell azt, hogy feltöltünk egy nagy képet, és azt itt méretezzük kicsire, mert az lassítja az oldal beolvasását a felhasználó számára. Azaz igyekezzünk akkora képet feltölteni a szerverre, amekkorát használni szeretnénk.)

Az 'Igazítás' lenyíló menü használatával pedig beállíthatjuk, hogy a szövegkörbefollya a képet, esetleg az a jobb, vagy a bal oldalra kerüljön. (Figyelem, mivel a gép nem ismeri a jobb margó pontos helyét, ezért a középre rendezés nem mindíg működik.)

Ezek után megnyomjuk a 'Rendben' gombot, és már be is illesztettük a képet.

A már beillesztett kép megfogásával (egérrel rámegyünk, és a bal gombot lenyomva tartjuk) áthúzható a szöveg már részére az elem.

 vissza a lap tetejére

---

Beillesztett kép kiemelése (Lightbox)

Ha azt akarjuk elérni, - hogy a feltöltött képet bár lekícsinyítve tettük be a szövegbe a jobb áttekinthetőség kedvéért - ám rákattintva a kép előugorjon egy sötét háttér elé, akkor a 'Lightbox modul' segítségével ezt is megtehetjük. Ez talán bonyolultnak hangzik, de nyugodjunk meg, nagyon egyszerű a dolog. Tehát a kiválasztott képet a már ismertetett módon beillesztjük a gomb segítségével:

A 'Hivatkozás' menühöz beírjuk a kép linkjét, majd a 'Szélesség', 'Magasság' és 'Igazítás' gombok használatával beállítjuk a megfelelő méretet és elhelyezkedést az oldalon való megjelenéshez.
Ezek után átlépünk a 'Hivatkozás' fülre.

Itt a 'Webcím' mezőbe bemásoljuk az eredeti kép hivatkozását az 'Alaptulajdonság' fülből a 'Hivatkozás' sorból. Majd továbblépünk a 'További opciók' fülre.

Itt pedig a 'Stíluskészlet' menübe beírjuk, hogy 'Lightbox'. Majd megnyomjuk a 'Rendben' gombot.

/A fenti képre kattintva meg is nézheted, hogy hogyan működik a megoldás. Feltünhet, hogy a 'Súgócimke' is ki van töltve, ami az egér ráhelyezésekor megjelenik az egérnél./

 vissza a lap tetejére

---

Hivatkozás beillesztése:

 Ha azt szeretnéd, hogy a bevitt tartalomban legyen egy hivatkozás egy másik oldalra, vagy ugyanezen oldal egy másik részére, akkor hivatkozást kell elhelyezned.

Ennek legegyszerűbb módja, hogy beilleszted a meghivatkozandó oldal címét. (pl.: "www.recteam.hu")

Amikor az oldalt elmented, ez automatikusan hivatkozássá válik.

Ennél egy kicsit árnyaltabb megoldás, ha egy adott szövegre, vagy képre kattintva akarod a hivatkozást elhelyezni.

Jelöld ki azt a részt, amire kattintva a hivatkozást el szeretnéd indítani. Nyomd meg a gombot.

Ekkor előugrik a következő ablak:

Itt először azt állítsuk be, hogy milyen típusú hivatkozást akarunk elhelyezni.

vissza a lap tetejére

---

Webcím hivatkozás elhelyezése:

Az 'Alaptulajdonságok' fülön a 'Webcím' mezőbe másoljuk be a hivatkozandó oldal címét. Ha nem http:// oldalt, hanem https://, ftp://, news://, vagy más, akkor a 'Protokoll:' felirat alatt azt is átállíthatjuk.

A 'Hivatkozás tulajdonságai' ablakban a fenti fülekben további beállításokra is lehetőség van.

Ezek közül talán a legfontosabb az, hogy az adott hivatkozásunk miként jelenjen meg.

Így a 'Megjelenítés' fülön azt dönthetjük el, hogy a kijelölt hivatkozásra kattintva az hogyan jelenjen meg.

Ítt ha lenyitjuk a 'Tartalom megjelenítése' ablakot, kiválaszthatjuk, hogy hol is jelenjen meg a hivatkozásunk. Így például, ha azt akarjuk elérni, hogy az eredeti oldalunk megmaradjon, és a hivatkozásunk egy új lapon nyíljon meg, akkor válaszuk ki az 'Új ablakban (_blank)' sort.

Ha olyan tartalmunk van, amit fel akarunk tölteni az oldalra, (pl. egy .pdf file-t akarunk letölthetővé tenni) akkor a 'Hivatkozás tulajdonságai' ablakban válasszuk ki a felső fülek közül a 'Feltöltés' fülecskét.

Itt a 'Tallózás' gombra kattintva a gépünk filerendszerében kiválaszthatjuk a megfelelő file-t.

Ezután a 'Küldés a szerverre' gomb lenyomása után feltöltődik a file, és a kijelölt helyen megjelenik a rá mutató link. (Figyelem, ha a kijelölt file túl nagy, akkor sokáig is eltarthat a művelet, illetve a szerver vissza is utasíthatja a feltöltési szándékot.)

Ha olyan file-re akarunk hivatkozni, ami már fenn van a szerveren, akkor írjuk be a file struktura szerűen a dolgot a 'Hivatkozás tulajdonságai' ablak 'Alaptulajdonságok' ablakában a webcím helyére, majd nyomjunk rendben gombot.

Íme itt egy példa, ahol a 'www.recteam.hu/proba/ilyen_nincsen.jpg' file-ra való hivatkozást akarunk elhelyezni:

vissza a lap tetejére

---

Amennyiben azt akarjuk, hogy az olvasó alapbeállított levelezőjén keresztül a felhasználó tudjon nekünk levelet küldeni, akkor a 'Hivatkozás típusa:' felirat alatt lenyíló fülnél válasszuk ki az 'E-Mail' sort.

Itt az E-Mail cím helyére írjuk be azt a címet, ahová a levelet szeretnénk, hogy küldje a felhasználó. Az alatta levő sorokba pedig ennek az e-mail-nek a címét és a tartalmát adhatjuk meg.

 vissza a lap tetejére

---

Ha úgy akarsz levelet kapni, hogy nem használod ki a felhasználónál működő levelező klienset, erre is van mód.

Miért is jó ez?

Előnyei:

• Így nem tudja meg a felhasználó, hogy mi az e-mail címed.
• Különböző spam listák számára így nem publikálódik az e-mail címed.
• Akkor is tudsz levelet kapni, ha a felhasználónak nincsen a kliensén levelezőkliens. (Pl. ha csak webmail /klasszikus freemail levelezése van a felhasználónak)

Hátrányai:

• Csak regisztrált, és belépett felhasználótól kaphatsz levelet. Ezért csak privát infók oldalon használd.
• Ha a 'Kapcsolat' oldalt linkeled be, akkor csak az ott beállított címekre tudsz levelet küldetni.

A kivitelezésnek két lehetősége van.

Először nézzük azt, amikor a saját kapcsolati címedet akarod belinkelni.

Először is lépj be. A belépés után menj a bal oldali menüben a 'Saját adatok', majd pedig a 'Kapcsolat' oldalra. Itt jelöld ki az url-t. (http://www.recteam.hu/user/.../contact címre, ahol a ... a te felhasználói számod)

Ezek után menj át arra az oldalra, ahová el akarod helyezni a hivatkozást, jelöld ki a klikkelendő részt, és nyomd meg a gombot. Ezek után másold be a kapcsolatlapod url-jét, majd nyomd meg a 'Rendben' gombot.

 

Második módszer, hogy az oldal 'Kapcsolat' linkjét hivatkozod meg.

Menj arra az oldalra, ahová el akarod helyezni a hivatkozást, jelöld ki a klikkelendő részt, és nyomd meg a gombot. Ezek után írd be a "www.recteam.hu/contact" szöveget, majd nyomd meg a 'Rendben' gombot.

 vissza a lap tetejére

---

Ha a szerkesztett lapunk valamelyik részére akarnánk a klikkelőt irányítani, helyezzünk el a hivatkozandó helyre egy "horgonyt" oly módon, hogy e cursort oda visszük, ahová hivatkozni akarunk, majd megnyomjuk a gombot.

Ekkor felugrik az alábbi ablak:

Ide beírhatunk egy tetszőleges nevet a horgonynak. Majd nyomjuk meg a 'Rendben' gombot.

Majd jelöljük ki azt a tartalmi részt, amire klkkelve a horgonyhoz szeretnénk jutni. Nyomd meg a gombot, majd az előugró ablakban válaszd ki a 'Hivatkozás tipusa' lenyíló menüből a 'Horgony az oldalon' elemet.

Itt a 'horgony név szerint' menüben megtalálod az elöbb adott horgony nevét. Ezt válaszd ki, majd nyomd meg a 'Rendben' gombot.

 vissza a lap tetejére

---

Táblázat beszúrása:

Táblázat beszúrása előtt mindíg találjuk ki, hogy hány oszlop és sor lesz a táblázatunkban. Ha ezt elrontjuk, akkor a későbbiekben korrektül csak a forráskód turkálásával tudunk újabb oszlopokat és sorokat bevarázsolni.

Ha tehát megvan, hogy hány oszlopot és sort akarunk betenni, akkor nyomjuk meg a 'Táblázat beszúrása' gombot. Ekkor a következő lap fog előugrani:      

 Itt írjuk be a megfelelő sor és oszlopszámot, és a rendezési paramétereket, valamint ha akarjuk, hogy legyen felette cím, akkor azt is.

Figyeljünk, mert ha túl hosszú szöveget akarunk beleírni egy-egy mezőbe, akkor a táblázat egyre szélesebb lesz. Ezért itt nekünk kell <enter>-rel elválasztanunk a szöveget.

vissza a lap tetejére

---

Ha elrontottuk a sor, és oszlopszámot, és nem akarjuk előről kezdeni a táblázat megcsinálását, marad a forrás turkálása.

Nézzünk erre is két példát.

Először is csináltunk egy két sorból és két oszlopból álló táblázatot, aminek a címe "Példaa árlista" lett.

Felvittünk egy "Termék" és egy "Ár" nevet az első sorba, majd a másodikba egy "sapka" és egy "400" feliratot.

Most nézzük meg ennek a forráskódját:

A szerkesztő láthatóan elég jól struktúrálja a dolgot. A <table> üzenettel indul, és a </table> paranccsal zárul. A <tbody> és a </tbody> között találjuk a táblázat adatait.

Plusz oszlop beszúrása:

Legyen az, hogy beszúrunk egy első "Cikkszám" oszlopot.

Ehez minden sorhoz szükséges beszúrni egy újabb forrássort. Ezt sárgával jelöltem:

<table cellspacing="1" cellpadding="1" border="1" width="200">
    <caption>P&eacute;lda &aacute;rlista</caption>
    <tbody>
        <tr>
            <td>Cikkszám</td>
            <td>Term&eacute;k</td>
            <td>&Aacute;r</td>
        </tr>
        <tr>
            <td>1234567</td>
            <td>sapka</td>
            <td>400</td>
        </tr>
    </tbody>
</table>

Ennek eredményeként, ha visszaváltunk a Forráskód nézetről:

 

Most szúrjunk be egy plusz sort is:

Tegyünk be egy 7654321 Cikkszámú sálat 100 ért. Sárgával jelöltem a beírást:

 <table cellspacing="1" cellpadding="1" border="1" width="200">
    <caption>P&eacute;lda &aacute;rlista</caption>
    <tbody>
        <tr>
            <td>Cikkszám</td>
            <td>Term&eacute;k</td>
            <td>&Aacute;r</td>
        </tr>
        <tr>
            <td>1234567</td>
            <td>sapka</td>
            <td>400</td>
        </tr>
        <tr>
            <td>7654321</td>
            <td>sál</td>
            <td>100</td>
        </tr>
    </tbody>
</table>

 És íme az eredmény ha nem a forráskódot nézzük:

vissza a lap tetejére