Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

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.

Hasonló előadás


Az előadások a következő témára: "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."— Előadás másolata:

1 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: –Kis és nagybetűk egyaránt használhatók. Ha az utasítás lezárást igényel, az 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 Az első Weblapom Elkészült az első Weblapom.

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: Új bekezdés: –Változás: – –Elkészült az első weblapom. –Ez egy újabb sora. –Ez meg egy új bekezdése. –

13 Elkészítés

14 Igazítás balra középre jobbra nincs hozzájuk nyomógomb most nem próbáljuk ki! (esetleg HF)

15 Betűtípus Dőlt betűs: szöveg Félkövér betűs: szöveg Aláhúzott: szöveg Félkövér dőlt: szöveg Félkövér aláhúzott: szöveg Dőlt aláhúzott: szöveg Félkövér dőlt aláhúzott: szöveg

16 Elkészítés

17 Címméret szöveg –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 szöveg 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 szöveg – A készítő neve: –Pető László –http://www.ipari222-klachaza.sulinet.hu/peto1.htm –

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: – – Kés – Kanál – Villa –

24 Elkészítés

25 Listák Sorszámozott – – Kés – Kanál – Villa –

26 Elkészítés

27 Listák Definiált (Definíció: DT, listázott elem: DD) – – Evőeszközök: – Kés – Kanál – Villa – Települések: – Kiskunlacháza – Debrecen –

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 első weblapom. –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. szöveg Az ugrás helyén a következőket kell elhelyezni: szöveg 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 szöveg pl: Nézd meg a MIÉP 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) Ha például középre szeretnénk igazítani – –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. –a szöveg a kép közepével kerül egy szintre –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

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 és a közé kell elhelyezni –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

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.

66 Táblázat táblázat címe fejléc, vagy adatsor Fejlécmező 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 Adatok Adatok Ország Főváros Nyelv Zászló Ország Főváros Nyelv Zászló Németország Berlin német Németország Berlin német Olaszország Róma olasz Olaszország Róma olasz Lengyelország Varsó lengyel Lengyelország Varsó lengyel

69 Elkészítés

70 Próbáljuk ki böngészővel

71 Adjunk keretet a táblázatnak 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. vízszintesen függőlegesen 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. szöveg

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 Index Index

78 Link.html Menü Menü Menü Menü Első weblap Első weblap Második weblap Második weblap Harmadik weblap Harmadik weblap

79 Próbáljuk ki böngészővel

80 Megnyitás új ablakban szöveg 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

102 Animált GIF készítése Készítsünk el kb 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 ANIMÁCIÓ ANIMÁCIÓ Készítettem egy animált GIF- et: Készítettem egy animált GIF- et:

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 Készítettem egy animált GIF-et: Készítettem egy animált GIF-et: Pityke Pityke

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 VÉGE Készült OpenOffice.org 1.0-ban


Letölteni ppt "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."

Hasonló előadás


Google Hirdetések