Text Editorok és az első kód – 2. óra

Beszéljünk egy kicsit a szövegszerkesztőkről. Számtalan különböző tulajdonságokkal felvértezett program elérhető az interneten, de általában a különböző operációs rendszerek beépítve tartalmaznak egy, vagy két szövegszerkesztő programot.

Szövegszerkesztők csoportosítása

Alapvetően a szövegszerkesztőket három különböző típusra különíthetjük el:

  • Egyszerű – Text editor
  • Professzionális – Word processor
  • Kiadványszerkesztő – Desktop publishing

Bár a weboldal készítéséhez számtalan program fellelhető az interneten, még a profi webprogramozók is gyakran csak egy egyszerű szövegszerkesztőt “editort” használnak. Hogy kinek melyik a legjobb választás, az egyrészt ízlés, másrészt az adott feladatok függvénye.

Word processor

Kezdjük talán a legrosszabb választással (weboldal készítés szempontjából), ez a széles körben ismert MS Word.

MS Word
Microsoft Word – Office 365

A Word alapvetően egy WYSIWYG ((!) What You See, Is What You Get – Amit látsz azt kapod) szövegszerkesztő, nyomtatott dokumentumokat hozhatunk vele létre, ezek a dokumentumok rengeteg szövegformázást, és láthatatlan formázási jelet tartalmaznak. A Word képes a dokumentumokat html formátumba konvertálni, de az így átalakított szöveg sok fölösleges elemet tartalmazhat, ami a későbbi optimalizálás során még problémákhoz is vezethet.

Desktop publishing

A kiadványszerkesztőket alapvetően nyomdai célokra tervezték, erősségük a tipográfiában van. Bár ezek között is vannak már “hibrid” termékek (pl. Adobe InDesign), melyek képesek weboldalak előállítására, egy oldal funkcióinak beállításakor lehetnek nehézségeink. Az ilyen programok több nyomdai szakember munkáját hivatottak kiváltani, és professzionális oldalak létrehozásához, nagyon magas szinten kell elsajátítani kezelésüket.

Text editor

A text editor, vagy más néven egyszerű szövegszerkesztő az egyik legjobb választás kódolására. A különböző programozási nyelvekhez rengeteg segítséget nyújthatnak a parancsok szintaktikai kiemelésével, vagy a kód automatikus tagolásával, rendezésével.

Egy weboldal készítésekor a kódolás során mi magunk mondjuk meg a böngészőnek hogyan kezelje különböző tartalmakat. Az internet fejlődésével egyre szélesebb körű tartalmak megjelenítését várták el a böngészőtől az emberek. Kezdetben elég volt az egyszerű szöveg, meg néhány kép. Később mindenféle bővítményekkel (plugin) egészítették ki a böngészőjüket, hogy az képes legyen megjeleníteni animációkat, zenét, videót. A HTML5 ezen a téren is követte a fejlődést a W3C sztenderdjei szabványosították az új elemek kódolását is, így a modern böngészők bővítmény nélkül is képesek megjeleníteni pl. egy HTML5 weboldalon lévő videót. Egy nagyobb weboldal szerkesztése közben több különböző kódnyelvet használhatunk a html-be ágyazva.

Notepad – Jegyzettömb (Windows)

Tanulás szempontjából úgy hisszük a legjobb választás mindenképp egy egyszerű szövegszerkesztő. A Windows beépített szövegszerkesztője a Notepad, melyet a Windows-menübe gépelve könnyen megtalálhatunk megfelel erre a célra.

notepad editor

A weboldalkészítést csak gyakorlattal lehet elsajátítani, a legjobb módszer a tanulásra, ha mindent kipróbálunk. Keressük meg a számítógépen a Notepadot, gépeljünk bele egy tetszőleges kódot, és mentsük el.

Én ezt a kódot használtam:

<!DOCTYPE html>
<html>
<body>

<h1>Címsor</h1>

<p>Bekezdés…</p>

</body>
</html>

Néhány dologra viszont nem árt figyelni! A Windows a fájlok kiterjesztése alapján dönti el, mihez milyen programot kell társítani. A fájl kiterjesztése az utolsó pont utáni karaktersorozat: “valami.txt” az egyszerű szövegé, “valami.htm” vagy “valami.html” a HTML fájloké. Az, hogy a Notepad bezárása után milyen ikont és milyen programot társít majd a Windows attól függ milyen kiterjesztéssel mentjük el. Az alapértelmezett kiterjesztés a “.txt” Ezért nekünk másképp kell mentenünk, válasszuk a “Fájl” menü “Mentés másként…” parancsát, majd a fájl típusa mező “Minden fájl (*.*)” típus kiválasztása után saját magunk adhatjuk meg a kívánt név után a kiterjesztést.

notepad-mentes
Notepad mentés másként parancsa után

A másik fontos dolog a karakter kódolás beállítása. Dióhéjban a karakterkódolásra azért van szükség, mert a számítógép a betűket vagy más karaktereket számok formájában tárolja. Különböző szabványok terjedtek el arra vonatkozóan melyik számérték milyen karaktert jelent. Erről részletesen olvashatsz a Wikipedia cikkében. Hogy a világ minden pontján ugyanaz a betű jelenjen meg a weboldalakon a különböző számítógépeken ezt is szabványosítani kellett valahogy. Erről a későbbiekben még lesz szó, de most elég annyit tudni, hogy a HTML5 szabványos karakterkészlete az UTF-8. Ne felejtsük el beállítani a jegyzettömbben a megfelelő karakterkódolást is.

Feladat:

Gyakoroljunk, hozzunk létre különböző dokumentumokat, próbáljuk ki mi történik ha átírjuk a kódot, használjunk több sorközt, nézzük meg milyen fájlt kapunk ha nem .html kiterjesztést használunk.

Végül pedig egy kis videó Windows 8.1 és a Notepad használatával.

Ez az oldal az Akismet szolgáltatást használja a spam csökkentésére. Ismerje meg a hozzászólás adatainak feldolgozását .

%d bloggers like this: