Saját website A HTML Készítette: Pet László

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

• 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 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é két menü menü parancsai a Jegyzettö Jegyzettö mb menü menüivel megegyez k A HTML parancsokat helyettessí helyettessít gombok. HTML forrá forrás

A bö bö ngé ngész által mutatott megjelené megjelenés

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.

A HTML dokumentum váza • • • • • • • •

Elkészítés

<TITLE>Az els Weblapom Elkészült az els Weblapom.

Nézzük meg böngész vel TITLE

BODY

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.

2

Elkészítés

Igazítás • • • • •

Bet típus • • • • • • •

balra

középre

jobbra nincs hozzájuk nyomógomb most nem próbáljuk ki! (esetleg HF)

Elkészítés

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

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

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)

3

Elkészítés

El re formázott szöveg •

szöveg

– – – –

A készít neve: Pet László http://www.ipari222-klachaza.sulinet.hu/peto1.htm 

Nézzük meg böngész vel Elkészítés

Listák

Elkészítés

• Készítsünk egy új dokumentumot! • Számozatlan: – – – – –

• Kés
• Kanál
• Villa

4

Listák

Elkészítés

• Sorszámozott – – – – –

1. Kés
2. Kanál
3. Villa

Listák

Elkészítés

• Definiált (Definíció: DT, listázott elem: DD) – – – – – – – – –

Ev eszközök:

Kés

Kanál

Villa

Települések:

Kiskunlacháza

Debrecen

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

Elkészítés

• Itt található az els weblapom. – 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. • 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.

Elkészítés

Ebben az ablakban is kijelö kijelö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!

Elkészítés

Ugrás más webhelyre

Kipróbálás böngész vel

Elkészítés

• szöveg • pl: • Nézd meg a MIÉP honlapját!

7

Más webhelyre mutató linkek szolgáltatásai

Próbáljuk ki böngész vel • • • • • • •

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

Képek

• 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!

Elkészítés

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

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

Sajnos nem minden ké képet tud megjelení megjeleníteni!

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

•

Kép ami link is • • •

– 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!!!!!

9

Elkészítés

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

Még a linkekr l

Plug-in

• 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

Háttérszín • és a közé kell elhelyezni •

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

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

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

10

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

Háttérkép • •

Elkészítés

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

TABLE

Táblázat

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

• táblázat címe • fejléc, vagy adatsor • Fejlécmez • Adatmez

11

A táblázat forrása Készítsük el a következ t! Ország Németország Olaszország Lengyelország

Adatok város Nyelv Berlin német Róma olasz Varsó lengyel

Zászló

EL SZÖ SZÖR KERET NÉ NÉLKÜ LKÜL. A ZÁ ZÁSZLÓ SZLÓ OSZLOPOKBA KÉ KÉPET HELYEZZÜ HELYEZZÜNK! K ÉSZÍ SZÍTSÜ TSÜNK ÚJ DOKUMENTUMOT!

• • • • • • • • • • •

Elkészítés

Adjunk keretet a táblázatnak

CLASS=Header> CLASS=Body> CLASS=Body> CLASS=Body>

Adatok

Orszá	Ország	F város	Nyelv	Zá ros	Nyelv	Zászló szló
Né	Németorszá metország	Berlin	né g	Berlin	német	SRC="gde.gif">
Olaszorszá	Olaszország	Ró g	Róma	olasz	SRC="git.gif">
Lengyelorszá	Lengyelország	Varsó g	Varsó	lengyel	SRC="gpl.gif">

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

Elkészítés

• • n a keret vastagsága; nem szükséges használni • kézzel vihet be a legegyszer bben

12

A keretek

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

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

Feladat

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

• Elso.html, masodik.html, harmadik.html már készen vannak. • Index.html tartalmazza a keretekre osztást • Link.html tartalmazza a linkeket

Link.html Index.html • • <TITLE>Index • • SRC="Link.html" • SRC="Elso.html" • •

• • • • • • • • • • •

<TITLE>Menü <TITLE>Menü

Menü

Menü

Els HREF="elso.html" weblap
Má HREF="masodik.html" TARGET="Adat">Második weblap
Harmadik HREF="harmadik.html" weblap


13

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

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.

Próbáljuk ki böngész vel Elkészítés

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é Kiemelés szí színe, Há Hátté ttérszí rszín Formátum > Oldal

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

Linkek

BESZÚ BESZÚRÁS > HIPERHIVATKOZÁ HIPERHIVATKOZÁS

Link

Kép beszúrása Beszú Beszúrá s > Ké Kép

K ép eszkö eszkö ztá ztár

15

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

Kép, ami link is K ép kijelö kijelölése Beszú Beszúrá s > Hiperhivatkozá Hiperhivatkozá s

Már van egy kis kü különbsé nbség

Imagemap

Elkészítés

• 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ú Beszúrá s > Tá Táblá blá zat

16

Táblázat

Nézzük meg böngész vel

Összegzés

Egyszer animációk

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

Weblapra helyezés

Animáció mentése

Nézzük meg böngész vel

• • • <TITLE>ANIMÁ <TITLE>ANIMÁCIÓ CIÓ • • •

Ké

Készí szítettem egy animá animált GIFGIFet:

et:
• • •

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Ö RÖVID RÉ RÉSZLETET JELÖ JELÖLJÜ LJÜNK KI! LEGYEN 1 PERCNÉ PERCNÉ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

• •

Ké

Készí szítettem egy animá animált GIFGIF-et:

et:
•
•

Pityke

• SRC="pityke.gif"> •

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