a html - szerver2.lacszki.sulinet.huszerver2.lacszki.sulinet.hu/tananyag/informatika/html2.pdf · 2...

1

A HTML

Készítette: Pet László

Saját website

• Saját webdokumentumok (HTMLformátumban)

• Egy webszerver, ahol a webdokumentumelhelyezhet– 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 iselké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 kellbevinni. Kicsit fapados módszer, de adokumentum garantáltan úgy fog kinézni,ahogy azt elképzeltük.

• HTML-szerkeszt vel, ilyenkor azutasításokat a program helyezi el adokumentumban, de kézzel ismódosíthatók. (pl.: Htmleditor)

HTML nyelv alkalmazása• WYSIWYG szerkeszt vel, ilyenkor pl. a

„Wordben” megszokott módszerekkel készül aszöveg. Gyakran nem úgy jelenik meg adokumentum a böngész ben, mint ahogy terveztük.– Pl.: Microsoft FrontPage

• HTML fordítás: a Microsoft Office, a Lotus, aStarOffice, az OpenOffice stb. irodai csomagokképesek dokumentumaikat HTML formátumban ismenteni.– Erre a módszerre is jellemz a „pontatlanság”

Mit választunk mi?

• Htmleditor: Egy általam oktatási célrakészült HTML-szerkeszt , ami együttmutatja a forrást és azt is, hogy hogyanjelenik majd meg a böngész ben.

• OpenOffice.org 1.0: Windows, és Linuxkörnyezetben egyaránt használhatóingyenes irodai programcsomag, amelyképes HTML fordításra. Linux alatt fogjukhasználni.

2

Htmleditor A kA kéét ment menüüparancsai aparancsai aJegyzettJegyzettöömbmbmenmenüüivelivelmegegyezmegegyez kk

A HTMLA HTMLparancsokatparancsokathelyettesshelyettessííttgombok.gombok.

HTML forrHTML forrááss

A bA bööngngéészsz ááltalltalmutatottmutatottmegjelenmegjelenééss

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

TITLETITLE

BODYBODY

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>

3

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)

4

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ésNé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

http://www.ipari222-klachaza.sulinet.hu/peto1.htm

5

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 velKapcsolá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!

6

Link

• Itt található az <A HREF=„elso.html”>elsweblapom</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 afájlban

• Dokumentum tetején a tartalomjegyzékbenszoktá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 isEbben az ablakban iskijelkijelöölhetlhet

7

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 vagyrelatí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

8

Próbáljuk ki böngész velMá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 HTMLnyelv dokumentumról van szó, hogy akiterjesztése htm vagy html, lehet leg eztadjuk neki.

• Ha egy szövegben nincs html utasítás(egyszer ASCII szöveg) txt legyen akiterjesztése. (megjelenítés aJegyzettömbhöz hasonló)

Javaslatok

• Jó ha van a HTML dokumentációnkhoz egykezd lap, ahová minden szál összefut (ezgyakran index.htm, index.html [Novell,Linux hagyomány], default.htm,default.html [Windows újítás] névre szokotthallgatni.

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 avégén szeretik használni.

• A lap közepére, ha nincs jó okod rá, ne rakjlinket!

Javaslatok

• Egy lap általában egy A4-es oldalra elférinformációkat tartalmazzon!– A böngész gyorsan be tudja tölteni.– A hosszút úgyse olvassa végig senki.

• Mindig teszteld minden fontosabbbö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?

9

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 nefelejts el az illetékesnek köszönetetmondani!

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.

Elkészítés

Sajnos nemSajnos nemminden kminden kéépet tudpet tudmegjelenmegjelenííteni!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ékelnikell!!!!!

Kép ami link is

• <A HREF=http://www.miep.hu>• <IMG SRC=„cimer.jpg”>• </A>

10

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önablakban nyílik meg.

• Állománytípusok:– htm, html– txt, ps– gif– tiff– jpg

Plug-in

• Küls fájltípusok is megnyithatók, ha amegfelel 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é kellelhelyezni

• <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ásaer sebb.

ElkészítésA text és a linkbeállítása csakkézzel lehetséges,most nempróbáljuk ki,esetleg HF

11

Próbáljuk ki böngész vel Háttérkép

• <BODY BACKGROUND=„képneve”>• <BODY BACKGROUND=„disk1.gif”>


TABLE

• Gyakran szokták máshol elkészíteni ésképként beszúrni, így viszont az adataitmáshol nem lehet felhasználni., és a képekáltalában nagy méret ek, letöltésükhosszabb.

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

12

Készítsük el a következ t!

Ország város Nyelv ZászlóNémetország Berlin németOlaszország Róma olaszLengyelország Varsó lengyel

Adatok

ELEL SZSZÖÖR KERET NR KERET NÉÉLKLKÜÜL.L.

A ZA ZÁÁSZLSZLÓÓ OSZLOPOKBA KOSZLOPOKBA KÉÉPET HELYEZZPET HELYEZZÜÜNK!NK!

KKÉÉSZSZÍÍTSTSÜÜNKNK ÚÚJ DOKUMENTUMOT!J DOKUMENTUMOT!

A táblázat forrása•• <TABLE><TABLE>•• <CAPTION>Adatok</CAPTION><CAPTION>Adatok</CAPTION>•• <TR CLASS=<TR CLASS=HeaderHeader>>•• <TH>Orsz<TH>Orszáág<TH>Fg<TH>F vvááros<TH>Nyelv<TH>Zros<TH>Nyelv<TH>Záászlszlóó•• <TR CLASS=<TR CLASS=BodyBody>>•• <TD>N<TD>Néémetorszmetorszáág<TD>Berlin<TD>ng<TD>Berlin<TD>néémet<TD><IMGmet<TD><IMGSRC="SRC="gde.gifgde.gif">">

•• <TR CLASS=<TR CLASS=BodyBody>>•• <TD>Olaszorsz<TD>Olaszorszáág<TD>Rg<TD>Róóma<TD>olasz<TD><IMGma<TD>olasz<TD><IMGSRC="SRC="git.gifgit.gif">">

•• <TR CLASS=<TR CLASS=BodyBody>>•• <TD>Lengyelorsz<TD>Lengyelorszáág<TD>Varsg<TD>Varsóó<TD>lengyel<TD><IMG<TD>lengyel<TD><IMGSRC="SRC="gpl.gifgpl.gif">">

•• </TABLE></TABLE>


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

13

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 dokumentummegadása, a hivatkozással kés bb hivatkozhatunk akeretre.

• Az én programom nem képes kezelni a kereteket.

Feladat

• Készítsünk egy olyan keretet, amely abaloldalon három linket tartalmaz, a jobboldalon 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.htmlmár készen vannak.

• Index.html tartalmazza a keretekre osztást• Link.html tartalmazza a linkeket

Index.html

•• <HTML><HTML>•• <HEAD><TITLE>Index</TITLE></HEAD><HEAD><TITLE>Index</TITLE></HEAD>•• <FRAMESET COLS="30%,70%"><FRAMESET COLS="30%,70%">•• <FRAME SRC="<FRAME SRC="Link.htmlLink.html" NAME="Link">" NAME="Link">•• <FRAME SRC="<FRAME SRC="Elso.htmlElso.html" NAME="Adat">" NAME="Adat">•• </FRAMESET></FRAMESET>•• </HTML></HTML>

Link.html•• <HTML><HTML>•• <HEAD><HEAD>•• <TITLE>Men<TITLE>Menüü</TITLE></TITLE>•• </HEAD></HEAD>•• <BODY><BODY>•• <H3>Men<H3>Menüü</H3><BR></H3><BR>•• <A HREF="<A HREF="elso.htmlelso.html" TARGET="Adat">Els" TARGET="Adat">Elsweblap</A><BR>weblap</A><BR>

•• <A HREF="<A HREF="masodik.htmlmasodik.html" TARGET="Adat">M" TARGET="Adat">Máásodiksodikweblap</A><BR>weblap</A><BR>

•• <A HREF="<A HREF="harmadik.htmlharmadik.html" TARGET="Adat">Harmadik" TARGET="Adat">Harmadikweblap</A><BR>weblap</A><BR>

•• </BODY></BODY>•• </HTML></HTML>

14

Próbáljuk ki böngész velMegnyitás új ablakban

• <A HREF=„dokumentumnév”TARGET=_blank>szöveg</A>

• A Link.html-ben vegyünk fel egy olyanlinket, amely új ablakban nyitja meg azelso.html-t.

ElkészítésPró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 kkö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.

15

HTML-szerkeszt Szövegformázás a Wordhözhasonlóan

ld. Wordld. Word

BetBet szszíín, Kiemeln, Kiemeléés szs szííne, Hne, Hááttttéérszrszíínn

Formátum > Oldal

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

BESZBESZÚÚRRÁÁS > HIPERHIVATKOZS > HIPERHIVATKOZÁÁSS

Link Kép beszúrásaBeszBeszúúrráás > Ks > Kéépp

KKéép eszkp eszkööztztáárr

16

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

MMáár van egy kis kr van egy kis küüllöönbsnbséégg

Kép, ami link is

KKéép kijelp kijelöölléésese

BeszBeszúúrráás >s >HiperhivatkozHiperhivatkozááss

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

BeszBeszúúrráás > Ts > Tááblbláázatzat

17

Táblázat Nézzük meg böngész vel

Összegzés

• Vannak olyan funkciók, amelyek azOpenOfficeban könnyebben kivitelezhet k

• A HTML szerkesztés nagyrésze azonbanegyszer bb WYSIWYG szerkeszt nélkül

• WYSIWYG szerkeszt t akkor szokáshasználni, amikor olyan professzionálismegjelenésre van szükség, ami kézzelnagyon 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!

18

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.

19

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><HTML>•• <HEAD><HEAD>•• <TITLE>ANIM<TITLE>ANIMÁÁCICIÓÓ</TITLE></TITLE>•• </HEAD></HEAD>•• <BODY><BODY>•• <H1>K<H1>Kéészszíítettem egy animtettem egy animááltlt GIFGIF--etet:</H1><BR>:</H1><BR>

•• <IMG SRC="anim1.gif"><IMG SRC="anim1.gif">•• </BODY></BODY>

•• </HTML></HTML>


20

Képkockák „kilopása”

• Filmb l is lophatunk ki képkockákat,amikb l weblapon megjeleníthet animáltGIF-et állíthatunk össze.

• A kilopáshoz is célszoftver szükséges:VirtualDub (egyéb más célokra is fogjukmé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 weboldalt egészítsük ki ezzel az

animációval!

Film megnyitása

Kijelölés

CSAK RCSAK RÖÖVID RVID RÉÉSZLETET JELSZLETET JELÖÖLJLJÜÜNK KI!NK KI!

LEGYEN 1 PERCNLEGYEN 1 PERCNÉÉL KISEBB!!!!L KISEBB!!!!

„Kilopás”

21

Kilopás Animáció létrehozása

• A létrejöv képekb l, a már megismertmó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><BODY>•• <H1>K<H1>Kéészszíítettem egy animtettem egy animááltltGIFGIF--etet:</H1><BR>:</H1><BR>

•• <IMG SRC="anim1.gif"><BR><IMG SRC="anim1.gif"><BR>•• <H1>Pityke</H1><BR><H1>Pityke</H1><BR>•• <IMG SRC="<IMG SRC="pityke.gifpityke.gif">">•• </BODY></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

a html - szerver2.lacszki.sulinet.huszerver2.lacszki.sulinet.hu/tananyag/informatika/html2.pdf · 2...

Documents