Készítette: Pető László A HTML Készítette: Pető László
Saját website 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.
Htmleditor A két menü parancsai a Jegyzettömb menüivel megegyezők A HTML parancsokat helyettessítő gombok. HTML forrás A bö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>
Elkészítés
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>
Elkészítés
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>
Elkészítés
Címméret <Hn>szöveg</Hn> n = 1,2,3,4,5,6 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)
Elkészítés
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>
Elkészítés
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>
Elkészítés
Listák Sorszámozott <OL> <LI>Kés <LI>Kanál <LI>Villa </OL>
Elkészítés
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>
Elkészítés
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!
Link Itt található az <A HREF=„elso.html”>első weblapom</A>. elso.html: az ugrás helye első weblapom: az ugrás neve
Elkészítés
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.
Elkészítés Ebben az ablakban is kijelölhető
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!
Elkészítés
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!
Elkészítés
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?
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ődő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> </P> Az én programom esetén kézzel kell az igazító parancsot beírni.
Elkészítés Sajnos nem minden képet tud megjeleníteni!
Próbáljuk ki böngészővel
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>
Elkészítés
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.
Elkészítés A text és a link beállítása csak kézzel lehetséges, most nem próbáljuk ki, esetleg HF
Próbáljuk ki böngészővel
Háttérkép <BODY BACKGROUND=„képneve”> <BODY BACKGROUND=„disk1.gif”>
Elkészítés
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ő
Készítsük el a következőt! ELŐSZÖR KERET NÉLKÜL. A ZÁSZLÓ OSZLOPOKBA KÉPET HELYEZZÜNK! KÉSZÍTSÜNK ÚJ DOKUMENTUMOT!
A táblázat forrása <TABLE> <CAPTION>Adatok</CAPTION> <TR CLASS=Header> <TH>Ország<TH>Főváros<TH>Nyelv<TH>Zászló <TR CLASS=Body> <TD>Németország<TD>Berlin<TD>német<TD><IMG SRC="gde.gif"> <TD>Olaszország<TD>Róma<TD>olasz<TD><IMG SRC="git.gif"> <TD>Lengyelország<TD>Varsó<TD>lengyel<TD><IMG SRC="gpl.gif"> </TABLE>
Elkészítés
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
Elkészítés
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" NAME="Link"> <FRAME SRC="Elso.html" NAME="Adat"> </FRAMESET> </HTML>
Link.html <HTML> <HEAD> <TITLE>Menü</TITLE> <BODY> <H3>Menü</H3><BR> <A HREF="elso.html" TARGET="Adat">Első weblap</A><BR> <A HREF="masodik.html" TARGET="Adat">Második weblap</A><BR> <A HREF="harmadik.html" TARGET="Adat">Harmadik weblap</A><BR> </BODY> </HTML>
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.
Elkészítés
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, HTML-szerkesztő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.
HTML-szerkesztő
Szövegformázás a Wordhöz hasonlóan ld. Word Betűszín, Kiemelés színe, Háttérszín Formátum > Oldal
Próbáljuk ki böngészővel
Linkek BESZÚRÁS > HIPERHIVATKOZÁS
Link
Kép beszúrása Beszúrás > Kép Kép eszköztár
Próbáljuk ki böngészővel Már van egy kis különbség
Kép, ami link is Kép kijelölése Beszúrás > Hiperhivatkozás
Imagemap A képet érzékeny részekre bontjuk Pl.: a lengyel zászló piros részére kattintva a Műszaki Egyetem, a fehér részére kattintva a suli honlapja jöjjön elő. Képre jobbegér > imagemap
Elkészítés
Próbáljuk ki böngészővel
Táblázatok Beszúrás > Táblázat
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.
Egyszerű animációk Animált GIF 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!
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 Minden fordítás után mentsük a képet! A név 1.bmp, 2.bmp … legyen!
Animálás 1.
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
Képkockák „kilopása” 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!)
VirtualDub
Feladat 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őző weboldalt egészítsük ki ezzel az animációval!
Film megnyitása
Kijelölés CSAK RÖVID RÉSZLETET JELÖLJÜNK KI! LEGYEN 1 PERCNÉL KISEBB!!!!
„Kilopás”
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 <BODY> <H1>Készítettem egy animált GIF-et:</H1><BR> <IMG SRC="anim1.gif"><BR> <H1>Pityke</H1><BR> <IMG SRC="pityke.gif"> </BODY>
Nézzük meg böngészővel
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
Készült OpenOffice.org 1.0-ban VÉGE Készült OpenOffice.org 1.0-ban