Download to read offline
![[Hungarian] HTML Course - Sapientia University](https://cdn.slidesharecdn.com/ss_thumbnails/html-iszlaizoltan-sysgenic-151227143536-thumbnail.jpg?width=640&height=640&fit=bounds)
Oktatástechnológia 12
- 1. 1 Kommunikáció és Internet Aprogram megvalósulását az Apertus Közalapítvány támogatta.
- 2. 2 Információtovábbítás az Interneten •szerver és kliens közötti kommunikáció • kliens: böngészők (Internet Explorer, Opera, Netscape, Konqueror) • minden Interneten lévő szervert, gépet, weboldalt azonosítani kell! IP-cím: 192.148 domain-név: www.szanalmas.hu
- 3. 3 Keresőgépek és katalógusok Akeresőgépeket pl. www.google.com, www.msn.com, http://vizsla.origo.hu/ akkor használjuk • ha gyorsan szeretnénk információhoz jutni, • speciális információkat szeretnénk kapni • egy dokumentumban lévő kifejezést keresünk • konkrét termékre keresünk (Fiat Stilo 1.6) Metakeresők több kereső rendszer eredményeiből MetaCrawler, Dogpile
- 4. 4 Témakatalógusok www.yahoo.com, www.dmoz.org, Vizslakatalógus • nem tudjuk pontosan, mit keresünk, a katalógus segítségével megismerkedhetünk a témával • ha a témakör legfontosabb, válogatott webhelyeit szeretnénk áttekinteni • ha van időnk böngészni a katalógusban
- 5. 5 Multimédia a weben Médialejátszás streaming- folyamatos, valós idejű hang- és mozgókép-átviteli technikák http://mfile.akamai.com/28/asf/mgm.download.akamai.com/28/silenceofthelambs_trailer_300k.asx Plug-in - beépülő programok: flashplayer http://www.macromedia.com real media www.real.com quick time www.apple.com/quicktime codec – filmek lejátszásához (divx, Xvid, ac3)
- 6. 6 Levelezés • levelező programok(Outlook, Eudora) • protokol Pop3 letölti a szerverről a leveleket IMAP távolról is kezelhető, a szerveren rajta hagyja • webes felületű, többnyire ingyenes levelezők regisztráció
- 7. 7 Levelező programok beállításai •A postafiók beállítása • Internetes levelek, címek, beállítások importálása és exportálása • Névjegyalbum, címjegyzék használata • Terjesztési lista és körlevél
- 8. 8 SPAM • Vigyázzon aze-mailcím nyilvánossá tételénél! • Használjon spamellenes szűrőket! • Levelezőprogramjában állítson be szabályokat! • a SPAM kéretlen, általában reklám jellegű levél
- 9. 9 Valósidejű kommunikáció • Csevegőprogramok mirc– csatornákon www.mirc.com • Csevegőoldalak csak böngészővel http://chat.gyaloglo.hu/ • Üzenetküldők (ICQ, MSN v. Yahoo Messenger) csak jóváhagyással
- 10. 10 HTML • A HTMLwebhez létrehozott leíró nyelv, amellyel weboldalt hozhatunk létre. • Lehet rajta szöveg, kép, hang és mozgókép • Készíthető: szövegszerkesztővel (pl. a Jegyzettömb), html-szerkesztővel az a fontos, hogy lehessen html-ba menteni! (Macromedia Dreamweaver, Microsoft Frontpage, illetve au ingyenes HTMLPad) • A tartalmakat formázó utasítások <tagek> fogják közre
- 11. 11 HTML-dokumentum <html> <head> <title>Ez a dokumentumcíme</title> </head> <body> Ez a dokumentum törzse </body> </html>
- 12. 12 Betűk • A dokumentumtörzstulajdonságai: bgcolor: háttérszín text: szöveg színe barckgound="hatter.gif„ • Betűk meghatározása <font> méret: <font size="4">szöveg</font> • Betűk stílusa: félkövér:<b>félkövér</b>, dőlt:<i>dőlt</i> félkövér és dőlt: <b><i>félkövér és dőlt</b></i> • Betűtípus <font face="arial"> arial</font> <font face="Times New Roman">Times New Roman</font>
- 13. 13 HTML dokumentum tagolása •Címek hat mélységi szint a legnagyobb <h1> a legkisebb <h6> • az igazítás: align-nal left – balra right - jobbra center – középre • Pl: <h1 align="center">1-es fejléc</h1> •Bekezdések <p> vagy <div> • <span> néhány szó azonosítása
- 14. 14 Listák • az elemeket<li> tag után adjuk meg • a számozatlan listák <ul> tag-gel kezdődnek típusa: kör, korong, négyzet • számozott listák <ol> tag-gel kezdődnek • egymásba ágyazott listák
- 15. 15 Képek • <IMG> tagképek, grafikák elhelyezésére src – elérési út, fájlnév pl. <img src=„kepek/kep.jpg”> align – igazítás (left, center, right) width - szélesség pixelben, height – magasság pixelben alt – magyarázó szöveg border – keretvastagság pixelben • <img src="images/asami.gif" alt="magyarázó szöveget is csatolhatunk a képhez" width="600" height="150" hspace="10" vspace="10" border="3" align="right">
- 16. 16 Link • <a> ugrásegy másik helyre (dokumentumra v. részletre) href - az ugrás célja (honlap, kép, dokumentum címe) szánalmas <a href=www.szanalmas.hu>szánalmas</a> • link egy képről, a képre kattintva a megadott oldal fog betöltődni <a href=„www.irodalmiakademia.hu"><img src="kep.gif" border=0></a>
- 17. 17 Táblázat • a táblázatok<table> tagek között <table>: width, height, align, border, bgcolor, cellspacing • a táblázatok sorai <tr> tagek között: valign, align • oszlopfejlécek <th> tagek között • cellák <td> tagek között <table width="300" height="150" border="2" cellspacing="5" bgcolor="#FFFFCC"> <tr> <th>arab szám</th><th>római szám</th><th>latin betű</th> </tr> <tr> <td></td><td>i</td><td>a</td> </tr> <tr> <td>1 (alapértelmezett) </td><td>I</td><td>A</td> </tr> </table> Cellatávolság: 5 px keret: 5 px háttérszín: krémsárga szélessége: 300 px
- 18. 18 Táblázat 2. <table width="300"border="2" bordercolor="#006699"> <tr bgcolor="#99CCCC"> <th scope="col"></th> <th colspan="2" scope="col">létszám</th> </tr> <tr> <th bgcolor="#FFFFCC">osztály</th> <th width="100" align="center">lányok</td> <th width="100" align="center">fiúk</td> </tr> <tr> <th bgcolor="#FFFFCC">7.a</th> <td width="100" align="center">15</td> <td width="100" align="center">12</td> </tr> <tr> <th bgcolor="#FFFFCC">8.a</th> <td align="center">13</td> <td align="center">15</td> </tr> </table> Feladat: Csinálj egy olyan táblázatot, amelyben feltünteted két osztály létszámadatait, lányok és fiúk külön! Szélesség: 300 px színes keret oszlopfejléc<th> színe zöld és sárga cellaszélesség: 100 px
Editor's Notes
- #3 Az Interneten megtalálható weboldalakat a szerverek szolgáltatják a felhasználók igényei szerint a kliensek számára. A kliens egy program, amely most is fut a számítógépen (pl. a böngészőprogram, mostanában a leggyakrabban Internet Explorer). A böngésző feladata a megadott URL-címen (ez a weboldal egyedi címe pl.: www.szanalmas.hu) lévő dokumentumok letöltése a web-szerverről és megjelenítése.
- #4 Az Interneten keresőszolgáltatásai közül leggyakrabban a keresőgépeket és a témakatalógusokat használják. A keresőgépek állandóan pásztázzák a hálózatot, az egyes oldalakra linkeken keresztül jutnak el. Keresőgépeket elsősorban gyors, speciális információkeresésre használhatjuk, illetve ha egy dokumentum belsejében lévő kifejezést akarunk megtalálni.
- #5 A témakatalógusok (pl.: www.yahoo.com, http://www.dmoz.org/, http://vizsla.origo.hu/, www.startlap.hu, ) hierarchikusan rendezett, fő- és alosztályokból álló kereshető gyűjtemények. Témakatalógusokat akkor érdemes használnunk, ha meg akarunk ismerkedni egy téma internetes, válogatott irodalmával, és van időnk böngészni a katalógusban.
- #6 Médiafájlok lejátszásánál a legegyszerűbb, ha a hivatkozásra kattintunk egy weboldalon, a böngészőnk ilyenkor megjeleníti a Médialejátszónkat és elkezdi a médiafájl lejátszását. Találkozhatunk letölthető és streaming multimédiás anyagokkal, amelyeknél a Médialejátszónk a tartalmat előre beolvassa (Pufferelés - Buffering), majd elkezdi lejászani. Alacsonyabb sebességű Internetkapcsolatotnál (pl. modemnél) megtörténhet, hogy többször meg szakad a lejátszás pufferelés miatt. A weboldalak látványvilágának vonzóvá és mozgalmasabbá tételére újabb és újabb technológiák jelennek meg a weben. Ezek egy része feltelepül a böngészőkkel, de a legtöbb új technológiával készített weblap, animáció, hang megjelenítéséhez beépülő programokat (plug in) kell telepítenünk.
- #7 Az elektronikus posta (e-mail) segítségével más felhasználók számára üzeneteket, illetve korlátozott méretű, általában max 1-1,5 MB méretű fájlokat küldhetünk. A levelezőprogramok (Outlook, Eudora) használata ma már nagyon egyszerű, csak a címet és a szöveget kell beírnunk, esetleg csatolni egy fájlt a levélhez, és máris küldhetjük. A másik lehetőségünk, hogy webes felület használunk. Néhány megabite-nyi tárhellyel ellátott webes postafiókot ingyen is kaphatunk. http://ingyenmail.lap.hu
- #8 A postafiók beállításánál meg kell adni a nevet, címet, a választott protokolt, a POP3 vagy IMAP szerver és a mail szerver címét, a felhasználónevet és a hozzátartozó jelszót. Importálás, exportálásMicrosoft Outlooknál kattintsunk a Fájl menü Importálás és exportálás parancsára, majd választhatjuk leveleink, címjegyzékünk korábban elmentett változatának importálását, vagy exportálhatunk adatokat a Microsoft Access, Microsoft Excel, Microsoft Word, és Microsoft PowerPoint programba, illetve személyes mappafájlokba. Körlevél Az Outlook Névjegyalbumában található adatokból is létrehozhatjuk, ekkor az ott szereplő nevek és címek lesznek láthatók a dokumentumban. A névjegyek kiválasztása: Tartsuk lenyomva a CTRL billentyűt, és kattintsunk a névjegyekre a Névjegyalbum mappában. Hozzunk létre egy új, névjegyeket tartalmazó mappát, és abba csak a szükséges névjegyeket másoljuk.
- #10 IRCAz egyik legnépszerűbb csevegő szolgáltatás az Interneten, ahol szabadon létrehozható csatornákon, IRC-kliensek segítségével lehet élőben, írásban kommunikálni egymással. A csevegéshez mindenki tetszés szerint választhat magának nevet (nick), a hozzászólásokat a nick alapján azonosítják a többiek. Érdemes ritka, különleges nicket választani vagy a becenevet egyéb azonosítókkal ellátni, mert egy névvel nem jelentkezhet be két ember. Letöltés: http://www.mirc.com/get.html Léteznek csevegő oldalak is – pl. a gyalogló –, amikhez a böngészőn kívül nem kell más programot használni. A téma linkgyűjteménye: http://chat.lap.hu/ Több nagy internetszolgáltató is fejlesztett saját üzenetküldő programot, amelyeket regisztráció és a program letöltése után használhatunk. Barátainkat, ismerőseinket általában az e-maljük, azonosítójuk alapján találjuk meg, de itt jóváhagyást kell kérnünk partnereinktől, és csak a visszaigazolás megérkezése után tudunk üzeneteket váltani egymással. Egyes programoknál (pl. ICQ) lehetőség van a hangátvitelre is.
- #12 A tartalmakat formázó utasítások fogják közre, amik relációs jellel különülnek el a tartalmaktól. A zárótag mindig / -jellel kezdődik &lt;/head&gt;. Minden HTML-dokumentum &lt;html&gt; utasítással kezdődik és &lt;/html&gt; utasítással zárul. A fejrészt &lt;head&gt; tag közé zárjuk. A fejrészben kell megadnunk a html-dokumentum címét &lt;title&gt;, ami a böngészőablak tetején lesz majd látható. A dokumentum törzsét &lt;body&gt; tag közé zárjuk.
- #13 Háttér A háttér színeinek megadásánál vagy a színek nevét (red, green, blue, black, white, yellow, purple stb.) vagy a 16-os számrendszerbeli megfeleltetését kell megadni &lt;body bgcolor=&quot;#FFFF00&quot; &gt;. Ha a háttérbe képet helyezünk el, akkor meg kell adnunk a háttérkép elérési útját a weblaphoz képest: &lt;body barckgound=&quot;hatter.gif&quot;&gt; A betűk mérete:&lt;font size=&quot;4&quot;&gt;szöveg&lt;/font&gt; vagy &lt;font size=+2&gt;szöveg&lt;/font&gt;, tehát vagy a betűméretet kell megadni, vagy az alapméret képest kell meghatározni a karakter méretét (font size=+2). Ez estben a méret negatív érték is lehet.
- #14 Cím A címek és általában a html objektumok elhelyezkedését ALIGN-nal állítjuk be. Értékei: left (balra) ez az alapértelmezett, center(középre), right (jobbra). Bekezdés A bekezdésekre vonatkozó paramétereket a &lt;p&gt; tagen belül kell beállítani. Pl. &lt;p align=right&gt;valami&lt;/p&gt;
- #15 Lista A számozatlan lista &lt;ul&gt; típusa a TYPE paramétereivel beállítható, ami lehet: DISC (korong), SQUARE (négyzet), CIRCLE (kör). Pl.:&lt;ul type=„square”&gt;&lt;li&gt;kutya&lt;li&gt;macska&lt;/ul&gt; A számozott lista &lt;ol&gt; típusát módosíthatjuk római számmal való felsorolásra (TYPE=I v. i) v. kis és nagy betűkre (TYPE=A v. a). Egymásba ágyazott listákat is létrehozhatunk, ilyenkor az alacsonyabb szinten lévő listaelemek jelzőkaraktere különböző lesz. Megvalósítása úgy néz ki, hogy amikor egy alacsonyabb szint következik a lista hierarchiájában, akkor a &lt;LI&gt; taghez egy újabb &lt;UL&gt; taget szúrunk be.
- #16 Képek A weben elsősorban .gif, .jpg vagy png formátumú képeket szoktak használni. Ha az elérési útvonal (src) &quot;kep.jpg” – akkor a kép a HTML-dokumentummal azonos könyvtárban van &quot;../ kep.jpg&quot; – akkor a kép a HTML-oldalt tartalmazó könyvtár feletti könyvtárban van &quot;kepek/ kep.jpg&quot; – akkor a kép a HTML-oldalt tartalmazó könyvtár KEPEK alkönyvtárban van &quot;../kepek/ kep.jpg &quot; – akkor a kép a HTML-oldalt tartalmazó könyvtár feletti könyvtárból nyíló KEPEK könyvtárban van. Ezek a relatív hivatkozások, a mentett HTML-dokumentumhoz való viszonya alapján adtuk meg a kép helyét. &quot;F:/kepek/ kep.jpg&quot; – akkor a kép a F meghajtó megjelölt helyén van (abszolút hivatkozás) &quot;http://tar.hu/kep.jpg&quot; – akkor a kép a megadott címen található A kép pozicionálása: ALIGN a kép és a szöveg viszonyát határozza meg: bottom – a kép alját a szöveg alapvonalához illeszti (alapértelmezett) middle – a kép közepéhez illeszti a szöveg alapvonalát top – a kép tetejét a mellette lévő szöveg tetejével illeszti egy vonalba left – a képet a bal margóhoz illeszti, a szöveget pedig mellé (a szöveget addig íródik a kép mellé, míg az véget nem ér, ez megszakítható sortörésssel &lt;br&gt;) right – a kép a jobboldali margóhoz illeszkedik, a képet mellé WIDTH a szélességét, a HEIGHT pedig a magasságát adja a képnek, képpontokban vagy a rendelkezésre álló hely százalékában megadva, ha az itt megadott értékek eltérnek az eredti mérettől a böngészők a képet torzítva fogják megjeleníteni. A HSPACE a kép melletti vízszintes, a VSPACE pedig a függőleges térközt határozza meg. ALT szöveg, amely a nem grafikus böngészők használata esetén fog megjelenni a kép helyett, így: &lt;img src=&quot;kep.jpg&quot; alt=&quot;a kép helyett megjelenő szöveg&quot;&gt;
- #17 Link egy képről: &lt;a href=&quot;lapnev.htm&quot;&gt; &lt;img src=&quot;kep.gif&quot; border=0&gt; &lt;/a&gt; Jelentése: a kép neve, melyről a link indul kep.gif, a képnek kerete nincs. A képre kattintva az egérrel a lapnev.htm oldal fog betöltődni a böngészőbe.
- #18 A táblázatok a &lt;TABLE&gt; elemmel kezdődnek és &lt;/TABLE&gt; taggel végződnek. A &lt;TABLE&gt; paraméterei: BGCOLOR a táblázat háttérszínét határozza meg, CELLSPACING az egyes cellák közötti távolságot adja meg. A sorokat &lt;TR&gt; elemmel definiáljuk és a zárótagig &lt;/TR&gt; tart. VALIGN a cellatartalmak függőleges igazítása, lehet top, middle és bottom. Egy sor tartalmazhat oszlopfejléceket &lt;TH&gt;, amik nemcsak a legfelső oszlopban szerepelhetnek, hanem a sorok címeként is. A sorok adatcelláit &lt;TD&gt; taggel adjuk meg, ami vagy a &lt;/TD&gt; tagig vagy a következő cellatagig, illetve sor elejét jelző &lt;TR&gt; tagig tart. WIDTH, HEIGHT a cella szélessége és magassága pixelben vagy százalékban. ALIGN, VALIGN cellatartalmak vízszintes és függőleges igazítása
- #19 COLSPAN az egymással szomszédos cellákat egyesíti vízszintesen, számROWSPAN egymás alatti cellákat egyesít függőlegesen, a cellák számát kell megadni.