HTML szerkesztés NVU-val
Az NVU egy WYSIWYG (What You See Is What You Get) HTML szerkesztő, ami azt jelenti, hogy szerkesztés közben is naygjából úgy néz ki az oldal, mint a böngészőben. Ez egyszerű oldalak esetében gyorsabb munkát tesz lehetővé.
Első indítás után az Eszközök / Beállítások közt tedd meg az alábbiakat:
- Az Általános lapon kapcsold ki a CSS használatot! Ebben ugyanis nem túl jó az NVU.
- Az Új oldal fülön az újonnan létrehozott oldalak alapbeállításait adhatod meg. Itt a Karakterkészletek közül válaszd a Unicode (UTF-8) karakterkészletet, hogy használhass magyar ékezeteket!
- A Haladó fülön Jelölőnyelvnek az XHTML1 Transitional-t válaszd, hogy hosszabb távon használható legyen az oldalad!
- Szintén a Haladó oldalon a Különleges karakterek beállításai alatt válaszd azt, hogy Csak & < > ' és a nem törhető szóköz legyen HTML entitásként kódolva — így az oldalad forrása könnyebben olvasható marad.
Most biztonság kedvéért lépj ki az NVU-ból, majd indítsad újra, hogy ezek a beállítások mindenképp érvénybe lépjenek!
Relatív és abszolút URI (URL)
Ha lusta vagy megérteni a világot, akkor most rögtön pár bekezdéssel lejebb a "Konklúzió"-ra ugorhatsz.
Mikor a HTML oldalunkba beillesztünk egy képet, akkor valójában csak a fájl nevét és elérési útját mentjük bele a HTML fájlba, tehát, ha valakinek meg akarjuk mutatni a HTML oldalunkat, akkor a HTML fájl mellett a kép fájlokat is oda kell neki adnunk.
Tegyük fel, hogy a H:\html\kert mappában van a HTML fájlunk és a hozzá tartozó virag.jpg képfájl. Ebben az esetben ...
- ... A relatív URI így néz ki virag.jpg. Ezt használva a böngésző mindig ugyanabban a mappában keresi a képet, ahol a HTML fájl van. Ha tehát a HTML fájlt átvisszük a virag.jpg-vel együtt egy másik gépre, akkor ott is jól fog megjelenni.
- Az abszolút URI így néz ki file:///H:/html/kert/virag.jpg. Ha ezt a HTML-t visszük át egy másik gépre, akkor csak abban az esetben jelenik meg a kép, ha azt a másik gépen is a H: meghajtó html/kert mappájába tesszük.
Láthatóan az abszolút URI kényelmetlenebb. Ám, ha létrehozunk egy HTML fájlt, és beillesztünk egy képet, mielőtt elmentenénk a HTML-t, akkor az NVU nem tudja, hogy melyik mappából kiindulva kéne a relatív URI-nak indulnia, ezért csak abszolút URI-t tud írni.
Ugyanez mondható el a hivatkozásokról is.
Konklúzió: Mentsd el a HTML fájlt, mielőtt képet illesztenél bele, vagy hivatkozást hoznál benne létre! Legjobban teszed, ha rögtön üresen elmented a HTML fájlt, amint létrehoztad.
Fájl mentés
Amikor először mented a fájlt, akkor rákérdez, hogy mi legyen az oldal címe. Ez lesz a <title> </title> közti cím, ez tartalmazhat ékezetet meg szóközt. Csak ezután kell a fájl nevét megadnod, ami viszont csak ékezet nélküli kisbetűket, számokat és aláhúzás karaktert tartalmazzon, ha jót akarsz. (És a képfájlok neve és a mappák neve is.)
Felhasználói felület
Stílus
- Szövegtörzs: normál szöveg
- Bekezdés: normál szöveg, bekezdésekbe tördelve. (<p> </p>)
- Címsor1 - Címsor6: Címsorok (<h1> - <h6>)
Kijelölt elem
Itt mutatja a kijelölt elemet (a legjobboldalibb a listában), annak a szülőjét (eggyel balrább a listában), annak a szülőjét és így tovább. Jól jöhet, ha olyan elemet akarunk kijelölni, amit egyébként nem lehet: pl. egy egész táblázatot, nem csak a celláit.
Színek
A kijelölt elem szöveg- és háttérszínét állíthatjuk be. Ha az egész dokumentum színeit akarjuk beálítani, akkor a Formátum / Oldal színei és háttere menüpont alatt tehetjük meg.
Ha táblázatban járunk, és a háttérszínét próbáljuk megváltoztatni, akkor a megjelenő színválasztó ablakban először válasszuk ki, hogy a kijelölt cellák, vagy az egész táblázat (a cellák közti rést is) kívánjuk színezni.
Nézetek
Leginkább a Normál nézetet fogjuk használni. A Forrás nézetben tisztogathatjuk meg a forrást, ha szükséges.
Nincs elmentve változás
Piros ikon jelenik meg azon HTML fájlok fülén, amelyek változásai még nincsenek elmentve.
Egyebek
Mindenféle formázás elérhető a menüsorból és a jobbkattintásra megjelenő helyi menüből is. A táblázat formázó párbeszéd ablakban a következő dolgokra kell figyelni:
- Az ablakban két fül van: külön az egész táblázat tulajdonságainak és külön a kijelölt celláknak.
- A szélességek/magasságok melleti legördülő menüből kell kiválasztani, hogy képpontban, vagy százalékban akarjuk megadni a méretet.
Ha kattintással nem tudjuk egy táblázat elé helyezni a kurzort, akkor álljunk a legfelső cella tetejére, és a kurzormozgató billentyűvel lépjünk feljebb: ekkor a táblázat bal oldalára kerül a kurzor. Itt Entert ütve üres sort szúrhatunk a táblázat elé. A táblázat mögé hasonlóan vihetjük a kurzort, a legalsó cellában a lefelé billentyűt megnyomva.
Képek, hivatkozások, horgonyok
Ha képet akarunk beilleszteni, akkor először másoljuk be a HTML fájl mappájába a kép fájlt. A kép beszúrása párbeszéd ablakban ne felejtsd el, hogy a relatív URL négyzet be legyen pipálva (erről volt szó feljebb) és adjál magyarázó szöveget is! A megjelenés fül alatt állíthatod be, hogy a kép a szöveg jobb vagy bal oldalán lebegjen, és több szöveg sor lehessen mellette.
Hivatkozás létrehozásához: először készítsd el a fájlt, amire mutatni fog a hivatkozás; másodszor jelöld ki a szöveget, amiből hivatkozás lesz (amire kattintva eljutunk a másik oldalra); majd nyomd meg a Hivatkozás gombot! Itt is legyen bejelölve a relatív URL négyzet, ha nem weben lévő oldalra mutat a hivatkozás!
Ha oldalon belüli hivatkozást akarsz létrehozni, akkor először a Horgonyt kell elhelyezni, ahova a hivatkozás ugrani fog.