Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
1
Készítette: Pető László
A HTML Készítette: Pető László
2
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
3
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
4
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)
5
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”
6
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.
7
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
8
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.
9
A HTML dokumentum váza <HTML> <HEAD>
<TITLE>Az első Weblapom</TITLE> </HEAD> <BODY> Elkészült az első Weblapom. </BODY> </HTML>
10
Elkészítés
11
Nézzük meg böngészővel
TITLE BODY
12
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>
13
Elkészítés
14
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)
15
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>
16
Elkészítés
17
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
18
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)
19
Elkészítés
20
Előre formázott szöveg
<PRE>szöveg</PRE> <PRE>A készítő neve: Pető László </PRE>
21
Elkészítés
22
Nézzük meg böngészővel
23
Listák Készítsünk egy új dokumentumot! Számozatlan: <UL>
<LI> Kés <LI> Kanál <LI> Villa </UL>
24
Elkészítés
25
Listák Sorszámozott <OL> <LI>Kés <LI>Kanál
<LI>Villa </OL>
26
Elkészítés
27
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>
28
Elkészítés
29
Nézzük meg böngészővel
30
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!
31
Link Itt található az <A HREF=„elso.html”>első weblapom</A>. elso.html: az ugrás helye első weblapom: az ugrás neve
32
Elkészítés
33
Próbáljuk ki böngészővel
34
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.
35
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.
36
Elkészítés Ebben az ablakban is kijelölhető
37
Próbáljuk ki böngészővel
38
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!
39
Elkészítés
40
Kipróbálás böngészővel
41
Ugrás más webhelyre <A HREF= URL-je> szöveg </A> pl: Nézd meg a <A HREF= MIÉP </A> honlapját!
42
Elkészítés
43
Próbáljuk ki böngészővel
44
Más webhelyre mutató linkek szolgáltatásai
Telnet:// Ftp:// gopher:// wais:// news:// mailto:// (egyből lehet t írni a linkre kattintással.) Az én programom csak a http-t írja be automatikusan, a többit kézzel lehet megvalósítani.
45
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ó)
46
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.
47
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!
48
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?
49
Javaslatok Dátumozd, és írd alá a munkádat!
Egy mailto:// link nem árt, hogy tudjanak neked t í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!
50
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.
51
Elkészítés Sajnos nem minden képet tud megjeleníteni!
52
Próbáljuk ki böngészővel
53
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!!!!!
54
Kép ami link is <A HREF=http://www.miep.hu>
<IMG SRC=„cimer.jpg”> </A>
55
Elkészítés
56
Próbáljuk ki böngészővel
57
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
58
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.
59
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.
60
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
61
Próbáljuk ki böngészővel
62
Háttérkép <BODY BACKGROUND=„képneve”>
<BODY BACKGROUND=„disk1.gif”>
63
Elkészítés
64
Próbáljuk ki böngészővel
65
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>
66
Táblázat <CAPTION> táblázat címe </CAPTION>
<TR CLASS=Header|Body> fejléc, vagy adatsor <TH>Fejlécmező <TD>Adatmező
67
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!
68
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>
69
Elkészítés
70
Próbáljuk ki böngészővel
71
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
72
Elkészítés
73
Próbáljuk ki böngészővel
74
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.
75
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>
76
Feladat Elso.html, masodik.html, harmadik.html már készen vannak.
Index.html tartalmazza a keretekre osztást Link.html tartalmazza a linkeket
77
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>
78
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>
79
Próbáljuk ki böngészővel
80
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.
81
Elkészítés
82
Próbáljuk ki böngészővel
83
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.
84
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.
85
HTML-szerkesztő
86
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
87
Próbáljuk ki böngészővel
88
Linkek BESZÚRÁS > HIPERHIVATKOZÁS
89
Link
90
Kép beszúrása Beszúrás > Kép Kép eszköztár
91
Próbáljuk ki böngészővel
Már van egy kis különbség
92
Kép, ami link is Kép kijelölése Beszúrás > Hiperhivatkozás
93
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
94
Elkészítés
95
Próbáljuk ki böngészővel
96
Táblázatok Beszúrás > Táblázat
97
Táblázat
98
Nézzük meg böngészővel
99
Ö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.
100
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
101
Animagic GIF
102
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!
103
Rajz készítése 1.
104
Rajz készítése 2.
105
Rajz készítése 3.
106
Rajz készítése 4.
107
Rajz készítése Minden fordítás után mentsük a képet!
A név 1.bmp, 2.bmp … legyen!
108
Animálás 1.
109
Animálás 2.
110
Korrekciók az animálás során
Frame törlése Frames > Delete Frame-ek sorrendjének megváltoztatása Frames > Reverse order ...
111
Animálás 3.
112
Animáció mentése
113
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>
114
Nézzük meg böngészővel
115
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!)
116
VirtualDub
117
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!
118
Film megnyitása
119
Kijelölés CSAK RÖVID RÉSZLETET JELÖLJÜNK KI!
LEGYEN 1 PERCNÉL KISEBB!!!!
120
„Kilopás”
121
Kilopás
122
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.
123
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>
124
Nézzük meg böngészővel
125
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
126
Készült OpenOffice.org 1.0-ban
VÉGE Készült OpenOffice.org 1.0-ban
Hasonló előadás
