Saját website A HTML Készítette: Pet László Saját webdokumentumok (HTML formátumban) Egy webszerver, ahol a webdokumentum elhelyezhet iskolai ingyenes (általában el kell viselni valamilyen reklámszolgáltatást) - feltöltés FTP-vel HTML dokumentum Egyszer ASCII szöveg (Jegyzettömbbel is elkészíthet ) Kétféle dolgot tartalmaz: magát a szöveget (a böngész ben látható dolgokat) az utasításokat (a böngész által végrehajtandó, nem látható dolgokat) utasítás = TAG, ezek összessége a HTML nyelv HTML nyelv alkalmazása Szövegszerkeszt vel (pl.: Jegyzettömb), ilyenkor az utasításokat manuálisan kell bevinni. Kicsit fapados módszer, de a dokumentum garantáltan úgy fog kinézni, ahogy azt elképzeltük. HTML-szerkeszt vel, ilyenkor az utasításokat a program helyezi el a dokumentumban, de kézzel is módosíthatók. (pl.: Htmleditor) HTML nyelv alkalmazása WYSIWYG szerkeszt vel, ilyenkor pl. a Wordben megszokott módszerekkel készül a szöveg. Gyakran nem úgy jelenik meg a dokumentum a böngész ben, mint ahogy terveztük. Pl.: Microsoft FrontPage HTML fordítás: a Microsoft Office, a Lotus, a StarOffice, az OpenOffice stb. irodai csomagok képesek dokumentumaikat HTML formátumban is menteni. Erre a módszerre is jellemz a pontatlanság Mit választunk mi? Htmleditor: Egy általam oktatási célra készült HTML-szerkeszt, ami együtt mutatja a forrást és azt is, hogy hogyan jelenik majd meg a böngész ben. OpenOffice.org 1.0: Windows, és Linux környezetben egyaránt használható ingyenes irodai programcsomag, amely képes HTML fordításra. Linux alatt fogjuk használni. 1
Htmleditor A két k t menü parancsai a Jegyzettömb menüivel megegyez k A HTML parancsokat helyettessít gombok. HTML forrás A böngb ngész által mutatott megjelenés Az utasítások Minden utasítás formátuma: <UTASÍTÁS> Kis és nagybet k egyaránt használhatók. Ha az utasítás lezárást igényel, az </UTASÍTÁS> módon történik. A program tudja, hogy van-e szükség lezárásra, vagy nincsen. El fordulhat, hogy a jobb áttekinthet ség miatt azért ENTER-eket kell használni. A HTML dokumentum váza <HTML> <HEAD> <TITLE>Az els Weblapom</TITLE> </HEAD> <BODY> Elkészült az els Weblapom. </BODY> </HTML> Nézzük meg böngész vel TITLE BODY Sortörés, új bekezdés Sortörés: <BR> Új bekezdés: <P> Változás: <BODY> Elkészült az els weblapom. <BR> Ez egy újabb sora. <P> Ez meg egy új bekezdése. </BODY> 2
Igazítás <p align=left> balra <p align=center> középre <p align=right> jobbra nincs hozzájuk nyomógomb most nem próbáljuk ki! (esetleg HF) Bet típus D lt bet s: <I>szöveg</I> Félkövér bet s: <B>szöveg</B> Aláhúzott:<U>szöveg</U> Félkövér d lt: <B><I>szöveg</I></B> Félkövér aláhúzott: <B><U>szöveg</U></B> D lt aláhúzott: <I><U>szöveg</U></I> Félkövér d lt aláhúzott: <B><I><U>szöveg</U></I></B> <Hn>szöveg</Hn> n = 1,2,3,4,5,6 Címméret ehhez nincs a programnak nyomógombja, kézzel kell bevinni. 1 a legnagyobb, 6 a legkisebb Bet méret <FONTSIZE=n>szöveg</FONTSIZE> n=1..7, 1 a legkisebb, 7 a legnagyobb nincs hozzá nyomógomb most nem próbáljuk ki, (esetleg HF) 3
El re formázott szöveg <PRE>szöveg</PRE> <PRE>A készít neve: Pet László http://www.ipari222-klachaza.sulinet.hu/peto1.htm </PRE> Nézzük meg böngész vel Listák Készítsünk egy új dokumentumot! Számozatlan: <UL> <LI> Kés <LI> Kanál <LI> Villa </UL> 4
Listák Sorszámozott <OL> <LI>Kés <LI>Kanál <LI>Villa </OL> Listák Definiált (Definíció: DT, listázott elem: DD) <DL> <DT> Ev eszközök: <DD>Kés <DD>Kanál <DD>Villa <DT>Települések: <DD>Kiskunlacháza <DD>Debrecen </DL> Nézzük meg böngész vel Kapcsolások Eddig a szöveg külalakjával foglalkoztunk. Word helyett így is lehetne szerkeszteni szöveget. Platformfüggetlen!!!! Hogyan lesz Hypertext? Horgonyok elhelyezésével! 5
Link Itt található az <A HREF= elso.html >els weblapom</a>. elso.html: az ugrás helye els weblapom: az ugrás neve Próbáljuk ki böngész vel Linkek típusai Egy kijelölt helyre ugyanabban a fájlban. Egy másik fájlra ugyanazon a kiszolgálón. Egy teljesen más helyre a World Wide Weben. Egy kijelölt helyre ugyanabban a fájlban Dokumentum tetején a tartalomjegyzékben szokták alkalmazni. <A HREF= #ugrásnév>szöveg</a> Az ugrás helyén a következ ket kell elhelyezni: <A NAME=ugrásnév>szöveg</A> Az info2ep.htm-ben készítsünk a lap elejér l ugrást a Web publikáláshoz. Ebben az ablakban is kijelölhet lhet 6
Próbáljuk ki böngész vel Link másik dokumentumra Ilyet már csináltunk. Ha a másik dokumentum nem ugyanabban a könyvtárban van, akkor abszolút vagy relatív elérési utat kell használnunk! Linkeljük az els weblapról a másodikat! Kipróbálás böngész vel Ugrás más webhelyre <A HREF=http://weblab URL-je> szöveg </A> pl: Nézd meg a <A HREF=http://www.miep.hu> MIÉP </A> honlapját! 7
Próbáljuk ki böngész vel Más webhelyre mutató linkek szolgáltatásai Telnet:// Ftp:// http:// gopher:// wais:// news:// mailto:// (egyb l lehet e-mailt írni a linkre kattintással.) Az én programom csak a http-t írja be automatikusan, a többit kézzel lehet megvalósítani. Javaslatok A böngész onnan tudja, hogy HTML nyelv dokumentumról van szó, hogy a kiterjesztése htm vagy html, lehet leg ezt adjuk neki. Ha egy szövegben nincs html utasítás (egyszer ASCII szöveg) txt legyen a kiterjesztése. (megjelenítés a Jegyzettömbhöz hasonló) Javaslatok Jó ha van a HTML dokumentációnkhoz egy kezd lap, ahová minden szál összefut (ez gyakran index.htm, index.html [Novell, Linux hagyomány], default.htm, default.html [Windows újítás] névre szokott hallgatni. Javaslatok Minden lapnak adj címet! Innen lehet tudni, hogy mit böngészünk. Minden lapról legyen link a kezd lapra, mert az segíti a lapjaid közötti navigálást! A linkeket az olvasók a lap elején, vagy a végén szeretik használni. A lap közepére, ha nincs jó okod rá, ne rakj linket! Javaslatok Egy lap általában egy A4-es oldalra elfér információkat tartalmazzon! A böngész gyorsan be tudja tölteni. A hosszút úgyse olvassa végig senki. Mindig teszteld minden fontosabb böngész vel (Netscape, Internet Explorer, Opera, stb), de legalább az els kett vel a lap megfelel en néz-e ki? M ködnek-e a linkek? 8
Javaslatok Dátumozd, és írd alá a munkádat! Egy mailto:// link nem árt, hogy tudjanak neked e-mailt írni a téma iránt érdekl k. Vigyázz a szerz jogra! Ha engedélyt kaptál ilyen információ megjelenítésére, akkor ne felejts el az illetékesnek köszönetet mondani! Képek GIF, JPG, XBM (Linuxos, Unixos bitmap) <IMG SRC= képneve > Ha például középre szeretnénk igazítani <P ALIGN=CENTER> <IMG SRC= képneve > </P> Az én programom esetén kézzel kell az igazító parancsot beírni. Próbáljuk ki böngész vel Sajnos nem minden képet k tud megjeleníteni! További képre vonatkozó utasítások A szöveg a kép aljával kerül egy szintre. <IMG SRC= kép neve ALIGN=CENTER> a szöveg a kép közepével kerül egy szintre <IMG SRC= kép neve ALIGN=TOP> a szöveg a kép tetejével kerül egy szintre A programban csak kézzel valósíthatók meg. Nem próbáljuk ki, esetleg HF A képek csak csatolódnak a dokumentumhoz, a dokumentumhoz a képet mindig külön mellékelni kell!!!!! Kép ami link is <A HREF=http://www.miep.hu> <IMG SRC= cimer.jpg > </A> 9
Próbáljuk ki böngész vel Még a linkekr l A képhez is vezethet link, ekkor a kép külön ablakban nyílik meg. Állománytípusok: htm, html txt, ps gif tiff jpg Plug-in Küls fájltípusok is megnyithatók, ha a megfelel plug-in telepítve van. Pdf (adobe acrobat) aiff, au, wav, mp3 mov, mpg, avi zip stb. Háttérszín </HEAD> és a <BODY> közé kell elhelyezni <BODY BACKGROUND= #XXXXXX TEXT= #XXXXXX LINK= #XXXXXX > XXXXXX: színkód, egy 6 jegy hexadecimális szám El fordulhat, hogy a link beállítás hatástalan, mert a böngész erre vonatkozó beállítása er sebb. A text és a link beállítása csak kézzel lehetséges, most nem próbáljuk ki, esetleg HF 10
Próbáljuk ki böngész vel Háttérkép <BODY BACKGROUND= képneve > <BODY BACKGROUND= disk1.gif > Próbáljuk ki böngész vel TABLE Gyakran szokták máshol elkészíteni és képként beszúrni, így viszont az adatait máshol nem lehet felhasználni., és a képek általában nagy méret ek, letöltésük hosszabb. <TABLE></TABLE> Táblázat <CAPTION> táblázat címe </CAPTION> <TR CLASS=Header Body> fejléc, vagy adatsor <TH>Fejlécmez <TD>Adatmez 11
Készítsük el a következ t! Adatok Ország város Nyelv Zászló Németország Berlin német Olaszország Róma olasz Lengyelország Varsó lengyel EL SZ SZÖR R KERET NÉLKN LKÜL. L. A ZÁSZLZ SZLÓ OSZLOPOKBA KÉPET K HELYEZZÜNK! KÉSZÍTSÜNK ÚJ J DOKUMENTUMOT! A táblázat forrása <TABLE> <CAPTION>Adatok</CAPTION> <TR CLASS=Header Header> <TH>Ország<TH>F g<th>f város<th>nyelv<th>zászló <TR CLASS=Body Body> <TD>Németorsz metország<td>berlin<td>német<td><img SRC="gde.gif gde.gif"> <TR CLASS=Body Body> <TD>Olaszország<TD>R g<td>róma<td>olasz<td><img SRC="git.gif git.gif"> <TR CLASS=Body Body> <TD>Lengyelország<TD>Vars g<td>varsó<td>lengyel<td><img<td>lengyel<td><img SRC="gpl.gif gpl.gif"> </TABLE> Próbáljuk ki böngész vel Adjunk keretet a táblázatnak <TABLE BORDER[=n]> n a keret vastagsága; nem szükséges használni kézzel vihet be a legegyszer bben 12
Próbáljuk ki böngész vel A keretek A böngész ablakát függ leges és vízszintes tartományokra lehet bontani. <FRAMESET ROWS> </FRAMESET> vízszintesen <FRAMESET COLS> </FRAMESET> függ legesen <FRAME SRC= dokumentumnév NAME= hivatkozás > a keretben lév dokumentum megadása, a hivatkozással kés bb hivatkozhatunk a keretre. Az én programom nem képes kezelni a kereteket. Feladat Készítsünk egy olyan keretet, amely a baloldalon három linket tartalmaz, a jobb oldalon meg az a dokumentum jelenik meg, amelynek a linkjére kattintunk. <A HREF= dokumentumnév TARGET= hivatkozás >szöveg</a> Feladat Elso.html, masodik.html, harmadik.html már készen vannak. Index.html tartalmazza a keretekre osztást Link.html tartalmazza a linkeket Index.html <HTML> <HEAD><TITLE>Index</TITLE></HEAD> <FRAMESET COLS="30%,70%"> <FRAME SRC="Link.html Link.html" " NAME="Link"> <FRAME SRC="Elso.html Elso.html" " NAME="Adat"> </FRAMESET> </HTML> Link.html <HTML> <HEAD> <TITLE>Menü</TITLE> </TITLE> </HEAD> <BODY> <H3>Menü</H3><BR> </H3><BR> <A HREF="elso.html elso.html" " TARGET="Adat">Els weblap</a><br> <A HREF="masodik.html masodik.html" " TARGET="Adat">Második weblap</a><br> <A HREF="harmadik.html harmadik.html" " TARGET="Adat">Harmadik weblap</a><br> </BODY> </HTML> 13
Próbáljuk ki böngész vel Megnyitás új ablakban <A HREF= dokumentumnév TARGET=_blank>szöveg</A> A Link.html-ben vegyünk fel egy olyan linket, amely új ablakban nyitja meg az elso.html-t. Próbáljuk ki böngész vel OpenOffice.org 1.0 Irodai programcsomag Magyar nyelv változata is elérhet Linuxos és Windowsos változata is van. Tartalmaz egyenletszerkeszt t, HTMLszerkeszt t, prezentációkészít, rajzoló, szövegszerkeszt, táblázatkezel Ismeri a Microsoft Office formátumait is. HTML-szerkeszt Mi a Linuxos változatot fogjuk használni. A Linux a Windows-zal ellentétben a fájlok nevében különbséget tesz kis és nagybet k között. A Windowshoz szokott felhasználóknál sok probléma forrása. A keretek használata mindig kézimunkával a legegyszer bb. 14
HTML-szerkeszt Szövegformázás a Wordhöz hasonlóan ld. Word Bet sz szín, Kiemelés s színe, HáttH ttérszín Formátum > Oldal Próbáljuk ki böngész vel Linkek BESZÚRÁS S > HIPERHIVATKOZÁS Link Beszúrás s > KépK Kép beszúrása Kép p eszközt ztár 15
Próbáljuk ki böngész vel Kép, ami link is Kép p kijelölése Beszúrás s > Hiperhivatkozás Már r van egy kis különbsk nbség Imagemap A képet érzékeny részekre bontjuk Pl.: a lengyel zászló piros részére kattintva a szaki Egyetem, a fehér részére kattintva a suli honlapja jöjjön el. Képre jobbegér > imagemap Próbáljuk ki böngész vel Táblázatok Beszúrás s > TáblT blázat 16
Táblázat Nézzük meg böngész vel Összegzés Vannak olyan funkciók, amelyek az OpenOfficeban könnyebben kivitelezhet k A HTML szerkesztés nagyrésze azonban egyszer bb WYSIWYG szerkeszt nélkül WYSIWYG szerkeszt t akkor szokás használni, amikor olyan professzionális megjelenésre van szükség, ami kézzel nagyon sok munkát igényelne. Animált GIF Egyszer animációk Több statikus kép egymás után vetítve mozgóképet eredményez. Az elkészítés speciális szoftvert igényel. Animagic GIF Animagic GIF Animált GIF készítése Készítsünk el kb. 12-13 képet! Rajzoláshoz az OpenOffice-t használjuk! Az Animagicbe egymás után szúrjuk be! Állítsuk a képeket helyes sorrendbe! Mentsük el az animációt! A képet jelenítsük meg egy weblapon! 17
Rajz készítése 1. Rajz készítése 2. Rajz készítése 3. Rajz készítése 4. Rajz készítése Animálás 1. Minden fordítás után mentsük a képet! A név 1.bmp, 2.bmp legyen! 18
Animálás 2. Korrekciók az animálás során Frame törlése Frames > Delete Frame-ek sorrendjének megváltoztatása Frames > Reverse order... Animálás 3. Animáció mentése Weblapra helyezés <HTML> <HEAD> <TITLE>ANIMÁCIÓ</TITLE> </HEAD> <BODY> <H1>Készítettem egy animált GIF- et:</h1><br> <IMG SRC="anim1.gif"> </BODY> </HTML> Nézzük meg böngész vel 19
Képkockák kilopása VirtualDub Filmb l is lophatunk ki képkockákat, amikb l weblapon megjeleníthet animált GIF-et állíthatunk össze. A kilopáshoz is célszoftver szükséges: VirtualDub (egyéb más célokra is fogjuk még használni!) Feladat Film megnyitása Nyissunk meg egy filmet a VirtualDub-bal! Egy rövid részletéb l lopjuk ki a képkockákat! (nagyon sokat készíthet!) Az Animagic-kel hozzunk létre a képek egy részéb l animált GIF-et! Az el weboldalt egészítsük ki ezzel az animációval! Kijelölés Kilopás CSAK RÖVID R RÉSZLETET R JELÖLJ LJÜNK KI! LEGYEN 1 PERCNÉL L KISEBB!!!! 20
Kilopás Animáció létrehozása A létrejöv képekb l, a már megismert módon! Nem muszáj minden képet felhasználni! Gyakran az egymást követ képek között nincs lényeges eltérés. Elhelyezés a weblapon Nézzük meg böngész vel <BODY> <H1>Készítettem egy animált GIF-et et:</h1><br> <IMG SRC="anim1.gif"><BR> <H1>Pityke</H1><BR> <IMG SRC="pityke.gif pityke.gif"> </BODY> Feladat Egy webes dokumentáció készítése kinek - kinek a saját szakterületén. Legalább nyolc A4-es terjedelemben Tartalmazzon képeket, hyperhivatkozásokat, kereteket Legyen esztétikus megjelenés legalább az Internet Explorerben VÉGE Készült OpenOffice.org 1.0-ban 21