A Mozilla 1.7.11 magyar nyelvű szerkesztőjének használata

1. Egyszerű WEb-oldal készítés WYSIWYG („What You See Is What You Get”, azaz az „amit látsz, azt kapod”) szerkesztő segítségével. A Mozilla 1.7.11 magyar nyelvű szerkesztőjének használata Letölthető: http://www.kozge.sulinet.hu/heppemma/

2. Mozilla szerkesztője • Előnyök: • Magyar nyelvű • Ingyenesen letölhető • Azonnal megtekinthető • Szükség esetén a forrásba HTML parancsokkal kiegészíthető

3. Szerkesztés-formázás a szövegszerkesztésnél megtanultak szerint: Szöveg beírása Szerkesztendő szöveg kijelölése Megfelelő formázási lehetőségek kiválasztása menüből, vagy eszközök segítségével

4. HTM forrás, megtekintése - szerkeszthető Ismerős HTML tag-ek felfedezhetőek Vannak újdonságok, amit a „szerkesztő ír be” (később)

5. Mentés: Fontos oldalunkat megfelelő néven és helyre rögtön az elején mentsük el, aztán folyamatosan mentsünk • Fájl mentés másként • Az első mentés alkalmával, ha még addig nem tettük be kell írnunk az aktuális oldal címét (TITLE) (ezt utólag módosíthatjuk • Ezután a már megszokott módon menthetünk(pontosan állítsuk be a file helyét és nevét

6. Böngésző színeinek beállítása:szöveg, hivatkozások színei

7. Háttér beállítása: Ne feledjük: 1. A háttér file nevében ne legyen ékezet2. A háttér kép és a Html egy mappában legyen (ellenkező esetben útvonalat kell adni)

8. Háttérkép hiba lehetőségek:1.Túl kicsi a kép amit háttérnek szeretnénk tenni, ekkor többször beteszi (amennyi fér - képernyőfelbontástól függ) 2. Túl sötét, túl sok minden van a háttéren nem jól olvasható a szöveg

9. A mozilla „nem hajtja végre” a formázási műveletet • Szúrjunk be egy vonalat: beszúrás  vízszintes vonal  (a vonalat az aktuális pont után teszi) • Ha a vonal tulajdonságait szeretnénk megváltoztatni, pl 10 pontos, az oldal közepén 80 %-a az asztalnak és középre igazított • Rákattintunk kettőt a vonalra ablak nyílik Beállítjuk a kívánt formázást, de nem történik változás

10. Beágyazott stílus törlése 1.Haladó szerkesztés 2. Beágyazott stílusból eltöröljük a beállításokat 3. Ok és most már beállíthatjuk a megfelelő tulajdonságokat, végre- hajtja

11. Táblázat • Táblázatbeszúrás táblázat Létrehozáskor , beállíthatjuk a táblázat tulajdonságait

12. Táblázat tulajdonságainak módosítása • Táblázatban jobb klikk táblázatcella tulajdonságai • Értelemszerűen állítható a táblázat és cellák tulajdonságai Ha nem sikerül a formázás, töröljük a beágyazott stílust (haladó szerkesztés)

13. Táblázat tulajdonságainak módosítása • A táblázat további módosítása hasonló a szövegszerkesztésnél tanultakkal: pl • Cellák egyesítése: megfelelő cellák kijelöl  jobb klikk  kijelölt cellák egyesítése (vagy felosztása) • Táblázatba új sor, oszlop beszúrása: megfelelő helyre kattint táblázat beszúrás  sor alulra felülre…. • Táblázat, sor oszlop törlése  hasonló • Táblázat hátterének beállítása hasonló • Táblázatba írni, képet beszúrni….

14. Feladat: • Egyesítsük a táblázatunk első sorának két celláját • A második sor második cellájába írjuk be a következőket • A második sor első cellájába szúrjunk be egy képet: oroszlan.jpg: • MCellába áll –> beszúráskép, vagy Kép eszköz Tallózás, magyarázó szöveg, vagy ne használjon Már tudod: A háttér file nevében ne legyen ékezet2. A háttér kép és a Html egy mappában legyen

15. Felsorolás számozás Tanultak alapján : szöveg kijelöl felsorolás, vagy számozás

16. Többszintű felsorolás • Mint a szövegszerkesztésnél itt is van lehetőség többszintű felsorolásra • Végezd el a feladatot (segít: behúzás növelése, csökkentése)

17. Hivatkozás: Feladat: • Nyiss egy üres oldalt, címe(TITLE) legyen :X.Y második oldala • Mentsd el html2.html néven • Szúrd be lo.jpg-t és alá a vissza.gif-et • A vissza képre szeretnénk egy hivatkozást beszúrni ami visszaugrik a html1.html oldalra • kép kijelöl: beszúrás hivatkozás, vagy Hivatkozás eszköz • Tallózás, html1.html (Hol van a vissza.gif ???)

18. Feladat • A HTML1.html oldalon a LÓ szóra ugorjon át a html2.html oldalra Próbáld ki a hivatkozásokat

19. Külső hivatkozás: • Ha az interneten található oldalra szeretnénk hivatkozást betenni, a pont elérhetőséget meg kell adni • Feladat: • A HTML.1 oldalon a macska szóra tegyél be hivatkozást a : http://www.macska.hu oldalra • Ugyanitt az Emma nénire tegyél egy linket ami levelet küld a heppemma@gmail.com-ra Hivatkozás címe: mailto:heppemma@gmail.com Próbáld ki a hivatkozásokat

20. HTML oldal forrása: • Nézd meg mindkét HTML forrását • Keress benne ismerős utasításokat