A Mozilla 1.7.11 magyar nyelvű szerkesztőjének használata 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/

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ő

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

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

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

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

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

Háttérkép hiba lehetőségek: 1 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

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

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

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

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)

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….

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 ékezet 2. A háttér kép és a Html egy mappában legyen

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

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)

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 ???)

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

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

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