A HTML nyelv alapjai

Átírás

1 A HTML nyelv alapjai

2 Legalább mit kell ismernie egy webprogamozónak? Weblap tartalmának, szerkezetének kialakítása: HTML (HyperText Markup Language) Weblap formázása: CSS (Cascading Style Sheets) Kliensoldali szkriptnyelvek: JavaScript (EcmaScript) Szerveroldali szkriptnyelvek: PHP, Perl Egyéb: MySQL, Java, AJAX, számítógépes grafika stb.

3 Rövid történeti áttekintés : ARPA (Advanced Research Projects Agency, 'Fejlett Kutatási Projektek Ügynöksége') létrehozása 1965: a csomagkapcsolt adatátviteli protokoll (X.35) kifejlesztése Ted Nelson először használja a hipertext kifejezést 1969: ARPANET (1971: 15 intézmény) 1970: az IBM-nél Goldfarb, Mosher és Lone létrehozza a GML (Generalized Markup Language) jelölőnyelvet 1974: TCP/IP protokollcsalád megalkotása, az internet kifejezés első használata 1983: az ARPANET átáll a TCP/IP-re, miután kiválik belőle a katonai rész (MILNET)

4 Rövid történeti áttekintés : a National Science Foundation (Amerikai Tudományos Alapítvány) NSFNET néven TCP/IP alapú hálózatot hoz létre 1986: a GML nyelv SGML (Standard Generalized Markup Language) néven ISO (International Standard Organization) szabvány lesz 1988: az NFSNET és az ARPANET egyesítése és nyitás a kereskedelmi alkalmazások felé 1989: az ARPANET formális megszűnése

5 Rövid történeti áttekintés október: a svájci-francia határon lévő CERNben (Centre Européen pour la Recherche Nucléaire, 'Nukleáris Kutatások Európai Központja') elfogadják Tim Berners-Lee ötletét a World Wide Web létrehozására 1991 május: első webhely 1991 augusztus: első webszerver első honlap webcíme volt: : World Wide Web Consortium (W3C) létrehozása 1995: W3C Magyar Iroda létrehozása 1995: HTML : HTML 3.2, HTML 4.0, CSS, PNG

6 Rövid történeti áttekintés : HTML 4.01, XHTML 1.0 az alapját képező XML-t (extensible Markup Language) az Open Text Corporation az SGML egy egyszerűsített részhalmazaként fejlesztette ki 2004: szakadás a W3C-n belül: többség (Safari, Firefox, Opera gyártói): XHTML 2.0 fejlesztése kisebbség: HTML fejlesztése WHATWG (Web Hypertext Applications Technology Working Group, 'Világháló Hiperszöveges Alkalmazási Technológiáinak Munkacsoportja')létrehozása 2007: a böngészők nem támogatják az XHTML 2.0-t a W3C átveszi a WHATWG eredményeit és HTML5 néven tovább folytatja 2009: XHTML 2.0 fejlesztésének befejezése

7 A HTML nyelvről általában 1. A weblap tartalmát és szerkezetét lehet vele kialakítani A címke (angolul: tag) vagy utasítás jelzi, hogy a tartalmat hogyan kell a böngészőnek értelmezni; két típusa van páros címke: <címke>tartalom</címke> a páros címkék egymásba is ágyazhatók: <1. címke> 1. tartalom <2. címke> 2. tartalom </2. címke> 3. tartalom </1. címke> páratlan címke: 1. tartalom <címke> 2. tartalom

8 A HTML nyelvről általában 2. Egy címkének (utasításnak, tag-nek) lehet jellemzője (attribute) és a jellemzőnek van értéke (value) Egy címkének több jellemzője is lehet, ezeket szóközzel kell egymástól elválasztani. A jellemző és az érték közé (szóköz nélkül) egyenlőségjelet kell tenni, az értéket (szintén szóköz nélkül) idézőjelbe kell tenni: <címke jellemző1= érték1 jellemző2="érték2"> tartalom </címke> Elem: a címke, jellemző, érték és tartalom együtt blokkszintű (tömbszerű) elem: az előző elem után új sorban kezdődik és a következő elem is új sorban kezdődik inline (sorban elhelyezkedő) elem: az előző elem után ugyanabban a sorban kezdődik és a következő elem is ugyanabban a sorban folytatódik

9 A HTML nyelvről általában 3. Néhány általános (a legtöbb címkénél használható) jellemző: accesskey="karakter": billentyűzetkód class="osztálynév" dir ="szövegirány": ltr (balról jobbra) vagy rtl (jobbról balra) id ="egyedi azonosító" lang ="nyelvi kód" style ="szövegközi (helyi) stílus definíciója" title ="információk az elemről":

10 Egy szabványos HTML 5 weblap szerkezete <!doctype html> <! dokumentumtípus meghatározás > <html lang="hu"> <! a weblap kezdete és a fő nyelvnek a megadása > <head> <! a weblap fejrészének a kezdete > <meta charset="utf 8"> <! karakterkódolás megadása > <title></title> <! a weblap címe, ami a böngésző címsorában jelenik meg > <link rel= stylesheet href= fájlnév.css > <! külső stíluslap csatolása > <style> belső vagy beágyazott stílusok </style> </head> <! a weblap fejrészének a vége > <body> <! a weblap törzsének a kezdete > <p></p> <! bekezdés, a szöveget célszerű legalább egy bekezdésbe tenni > </body> <! a weblap törzsének a vége > </html> <! a weblap vége >

11 Megjegyzések a weblap szerkezetéhez <! megjegyzés, ami a böngészőben nem jelenik meg > Mivel a HTML kód a böngészőben megnézhető, ritkán alkalmazzák, főleg csak olyankor, ha a weblap egy részét nem akarjuk ideiglenesen megjeleníteni. A meta címke charset jellemzőjének az értéke az utf 8 on kívül lehet még vagy windows 1250 vagy iso (ezek tartalmazzák a magyar ékezetes betűket). Ha az adott karakterkészlet nem tartalmazza a kívánt karaktert, azt külön kódolva kell megadni Egy weblap fő részei: dokumentumtípus meghatározás: a legelső sor, HTML 5 nél: <doctype html> fejrész: <head> </head> törzs: <body> </body> A stíluslapok a weblap formázását végzik. A html címke lang jellemzőjének a megadása a megjelenést nem befolyásolja, csak a keresőprogramok hamarabb megtalálják a weblapot.

12 A tartalom tagolása 1. <p>bekezdés (paragraph)</p> <br>egyszerű sortörés (break) Címsorok: <h1>egyes (legmagasabb) szintű címsor</h1> <h2>kettes szintű címsor</h2> <h3>hármas szintű címsor</h3> <h4>négyes szintű címsor</h4> <h5>ötös szintű címsor</h5> <h6>hatos (legalacsonyabb) szintű címsor</h6>

13 A tartalom tagolása 2. <hr> vízszintes osztóvonal (horizontal rule) <q> rövid idézet (quotation) </q> <blockquote>hosszú (esetleg több soros) idézet</blockquote> a <q> és a <blockquote> utasítás cite jellemzőjével lehet megadni az idézet forrását <pre>a szóközökkel, tabulátorokkal és Enterekkel előre formázott (predefinied) szöveg</pre>

14 A tartalom tagolása 3. <div>dokumentum-részlet (division), általános tárolóelem, amely lehetővé teszi a weblap egy részének logikai egységként történő kezelését</div> az egyes div szakaszokat az id jellemzővel különböztetjük meg egyetlen blokkszintű elemet önmagában nem célszerű div-be helyezni, mert az id azonosítóval anélkül is önállóan formázhatóvá, kezelhetővé tehető <span>dokumentum egy szakasza (span), amely lehetővé teszi egy vagy több karakter egy egységként történő kezelését</span> <hgroup> címsorok csoportosítása </hgroup> <address> a webmester elérhetőségei </address>

15 A tartalom tagolása 4. <iframe> </iframe>: egy beágyazott keretben jelenít meg egy másik lapot vagy egy dokumentumot, néhány jellemzője: height: magasság (%-ban vagy képpontban) name: a keret neve scrolling: a keret gördíthetősége (yes, no, auto) src a keret forrásának webcíme width: szélesség (%-ban vagy képpontban)

16 A tartalom tagolása 5. <header> a weblap fejléce </header> <nav> navigációs linkek </nav> <article>cikk, idézet egy külső írásból </article>, speciális jellemzők: cite: az idézet webcíme pubdate: az írás legelső publikálásának a dátuma <section> a weblap egy része </section> <aside> a weblap tartalma </aside> <footer> a weblap lábléce </footer>

17 A weblap törzsének általános szerkezete

18 Szöveg jelentése <abbr title="eredeti kifejezés"> rövidítés (abbreviation)</abbr> <bdo dir="szövegirány"> szöveg </bdo> a szövegirány lehet: rtl (right to left, 'jobbról balra') vagy ltr (left to right, 'balról jobbra') <del cite="url" datetime="éééé/hh/nn > törölt szöveg </del> az URL annak a dokumentumnak a webcíme, ami miatt a törlés történt a datetime jellemző értéke: a törlés pontos dátuma <ins cite="url" datetime="éééé/hh/nn > beszúrt szöveg </ins> az URL annak a dokumentumnak a webcíme, ami megmagyarázza, hogy a szöveg miért lett beszúrva a datetime jellemző értéke: a beszúrás pontos dátuma <mark> kiemelt szöveg </mark> nem mindegyik böngésző támogatja <time> időpont, dátum </time> vagy <time datetime="éééé-hh-nn"> szöveg </time>

19 Karakterformázás <small>az előtte és mögötte lévőknél kisebb (small) méretű karakterek</small> <strong> erősen kiemelt karakterek </strong> általában félkövér karakterként jelennek meg <em> kiemelt karakterek </em> általában dőlt karakterként jelennek meg <sup>felső index-beli szöveg (superscript)</sup> <sub>alsó index-beli szöveg (subscript)</sub>

20 Különleges karakterek Számkód: &#szám; Névkód: &név; néhány különleges karakter kódjai: karakter számkód névkód ± ± &plusm; < < < > > >

21 Felsorolások, listák 1. Felsorolás (rendezetlen lista, unordered list) <ul> <li>első elem</li> <li>második elem</li> <li>harmadik elem</li> </ul> Számozás (rendezett lista, ordered list) <ol> <li>első elem</li> <li>második elem</li> <li>harmadik elem</li> </ol> start= mennyiről indul a számozás (alapértelmezés: 1) <li value= ennek az elemnek a sorszáma >...</li>

22 Felsorolások, listák 2. Meghatározás (definíciós lista) <dl> <dt>első fogalom</dt> <dd>első fogalom magyarázata (definiton description)</dd> <dt>második fogalom</dt> <dd>második fogalom magyarázata</dd> <dt>harmadik fogalom</dt> <dd>harmadik fogalom magyarázata</dd> </dl> Menü: <menu label="ez a menü címkéje"> <li>egyszerű (alapértelmezés szerinti) menüelem</li> <li type="context">tartalom típusú menüelem</li> <li type="toolbar">eszköztár típusú menüelem</li> <li type="list">lista típusú menüelem (alapértelmezés)</li> </menu>

23 Hiperhivatkozások, linkek Cél: kapcsolat megteremtése két dokumentum vagy két dokumentumrész között Általános alakja: <a href= webcím#címke >szöveg</a> a webcím lehet relatív vagy abszolút a relatív dokumentumot tartalmazó gépen levő fájlra, az abszolút pedig tetszőleges másik gépen levő fájlra hivatkozik a címkét előzőleg az id jellemző értékeként az adott helyen meg kell adni ha nincs címke, a hivatkozás a céldokumentum elejére mutat ha a webcímben csak domain név van (tehát a honlapra mutat), az oldal gyorsabban betöltődik, ha a domain név végére egy / jelet teszünk ha a webcím helyén a mailto:egy cím van, akkor a linkre kattintáskor elindul az alapértelmezett levelezőprogram, a címzett mezőben a beállított címmel ha az cím után (szóköz nélkül) a?subject=szöveg van, akkor a levél beállított tárgya a szöveg lesz az cím-gyűjtő spam robotok miatt célszerű a tényleges e- mail cím karaktereit speciális karakterként szám- vagy névkóddal megadni

24 Alap URL az egész oldal számára <base href= URL target= hely > meghatározza az egész oldalon belüli linkek, képek és egyebek alapvető URL-jét (webcímét) a weblap fejrészében kell elhelyezni kötelezően megadandó jellemzők: href: a webcím target, amelynek lehetséges értékei: _blank (új ablak vagy fül), _parent (szülő-dokumentum), _self (az eredeti ablak, ez az alapértelmezés), _top (az ablak teteje)

25 Képek Kép elhelyezésének általános alakja: <img src= URL alt= leírás title= magyarázat width= szélesség height= magasság > URL: a képfájl elérési útvonala a kép csak jpg, gif vagy png formátumú lehet leírás: az a szöveg, ami akkor jelenik meg a kép helyén, ha a kép nem jelenik meg ha alt= módon adjuk meg (a két idézőjel közé semmi!), azt jelezzük, hogy a kép nem a weblap tartalmának szerves része magyarázat: az a szöveg, amelyik egy téglalapban jelenik meg, ha a kép fölé visszük az egérkurzort (nem kötelező megadni) a szélesség és magasság megadása nem kötelező, de célszerű (sok képet tartalmazó weblap szerkezete azonnal megjelenik) célszerű, ha a méretek a kép valódi méretével egyeznek meg egy kép lehet egy lista eleme vagy egy táblázatcella tartalma is <figure> több médiaelem (kép, diagram stb.) csoportosan kezelve </figure> <figcaption>a médiaelem-csoport címe </figcaption>

26 Képlink, image map Képlink: olyan kép, amely teljes egészében egy hivatkozás Megadásának általános alakja: <a href= URL#címke ><img src= URL alt= leírás title= magyarázat ></a> Image map (kép alakú térkép): olyan kép, amelynek egyes részei máshova mutató hivatkozások megadásának általános alakja: <img src="..." height="..." width="..." alt="..." usemap="#név"> <map name="név"> <area...> </map>

27 Image map <area>: aktív (kattintásra érzékeny) terület megadása a térképen belül, legfontosabb jellemzői: shape: az aktív terület alakja (értékei lehetnek: rect vagy rectangle: téglalap circ vagy circle: kör poly vagy polygon: sokszög coords: az aktív terület adatai (egymástól vesszővel elválasztott számok): téglalapnál: bal felső csúcs x koordinátája, bal felső csúcs y koordinátája, jobb alsó csúcs x koordinátája, jobb alsó csúcs y koordinátája körnél: középpont x koordinátája, középpont y koordinátája, sugár sokszögnél: 1. csúcs x koordinátája, 1. csúcs y koordinátája, 2. csúcs x koordinátája, 2, csúcs y koordinátája, a koordináták kiindulópontja (az origó) a kép bal felső sarka, innen jobbra az x, lefelé pedig az y koordináták növekszenek

28 Táblázatok 1. A táblázat elhelyezésének általános alakja: <table> <caption>a táblázat neve, címe</caption> <tr> <td>1. sor 1. cella tartalma</td> <td>1. sor 2. cella tartalma</td> </tr> <tr> <td>2. sor 1. cella tartalma</td> <td>2. sor 2. cella tartalma</td> </tr> </table>

29 Táblázatok 2. Az első sor vagy az első oszlop celláit úgy lehet kiemeltté alakítani, hogy a sorok első celláinál a <td>...</td> elem helyére a <th>...</th> elemet tesszük A <td>...</td> esetén balra, a <th>...</th> esetén középre van a cella tartalma igazítva, hacsak mást nem állítunk be

30 Táblázatok 3. Oszlopok ill. sorok átívelése (egyesítése) a <th>...</th> és a <td>...</td> elemek következő paramétereivel lehetséges: rowspan: az adott cella ennyi sor magas lesz. (cellák egyesítése, átívelése függőlegesen) colspan: az adott cella ennyi oszlop széles lesz (cellák egyesítése, átívelése vízszintesen)

31 Nagyméretű táblázatok <thead> táblázatfej </thead> egy táblázatban csak egy lehet <tbody> táblázattörzs </tbody> egy táblázatban több is lehet nyomtatásnál minden oldal tetején a táblázatfej és az oldal alján a táblázat lábléce lesz <tfoot> táblázat lábléce </tfoot> egy táblázatban csak egy lehet lehet benne egyszerű szöveg vagy táblázatsor

32 Beágyazott tartalmak 1. hang beszúrása, lejátszása: <audio> szöveg, olyan böngészők esetén, amelyek nem támogatják ezt a címkét </audio>, néhány fontos jellemzője és azok értékei: autoplay="autoplay": a böngésző a lap betöltése után azonnal lejátssza az audio tartalmat controls="controls": a lejátszást vezérlő gombok megjelenítése preload="preload": az oldal betöltése alatt az audiotartalom letöltése ha van autoplay jellemző, hatástalan src="a hangfájl elérési útvonala": a lejátszandó fájl

33 Beágyazott tartalmak 2. video beszúrása, megjelenítése, lejátszása: <video> szöveg, olyan böngészők esetén, amelyek nem támogatják ezt a címkét </video>, néhány fontos jellemzője és azok értékei: autoplay="autoplay": automatikus lejátszás loop="loop": folyamatos lejátszás height="pixelszám": a videóablak magassága width="pixelszám": a videóablak szélessége src="elérési útvonal": a videofájl elérési útvonala preload="preload": a video az ablakkal együtt betöltődik hatástalan, ha van autoplay jellemző controls="controls": a vezérlőgombok megjelenítése

34 Beágyazott tartalmak 3. audio vagy video forrása (az audio vagy video elem tartalmában): <source>, néhány fontos jellemzője és azok értékei src="elérési útvonal": a forrásfájl elérési útvonala media="eszköz vagy média": megadja, hogy mire van optimalizálva a tartalom (alapértelmezés: all) type="típusnév": az audio vagy videofájl típusa

35 Beágyazott tartalmak 4. beágyazott objektum (kép, hang, flashprogram, java-program, pdf dokumentum stb.): <object>, néhány fontos jellemzője és azok értékei data="elérési útvonal": a forrásfájl elérési útvonala height="képpontszám": az objektum magassága width="képpontszám": az objektum szélessége name="név": név, amivel hivatkozni lehet az objektumra type="típusnév": az objektum adattípusának a neve usermap="térképnév": az objektum által használt kliens-oldali térkép neve

36 Beágyazott tartalmak 5. beágyazott objektum paramétereinek (jellemzőinek) megadása: <param> a param jellemzői és azok értékei: name="név": az objektum jellemzőjének a neve value="érték": az objektum jellemzőjének az értéke

37 Beágyazott tartalmak 6. beépített külső tartalom mint egy plug-in (beépülő): <embed> néhány fontos jellemzője és azok értékei height="képpontszám": magasság width="képpontszám": szélesség src="webcím": a külső forrás webcíme type="típusnév": a külső tartalom típusa

38 Keresőoptimalizálás 1. Cél: Az internetes keresőrobotok, nagyobb eséllyel találják meg a weblapunkat Előzetes tennivalók: minden weblap estén meghatározni azt a 2-3 kulcsszót, amely az oldal lényegét legjobban kiemeli A weblap címébe (a fejrészben található <title> és </title> közé) célszerű minél több kulcsszót beírni egy értelmes szövegbe

39 Keresőoptimalizálás 2. A weblap fejrészébe elhelyezett <meta> elemekkel: <meta name="keywords" content="a kulcsszavak, egymástól vesszővel elválasztva" /> <meta name="description" content="a weblap tartalmának rövid összefoglalása /> <meta name="author" content="a weblap készítője" /> <meta name="language" content="hu" /> <meta name="allow-search" content="yes" />: kereshet a lapon a keresőrobot <meta name="robots" content="index, follow" />: a keresőrobot mindent indexelhet és követheti a hivatkozásokat is

40 Keresőoptimalizálás 3. A weblap törzsében: A HTML kódban a kulcsszavakat kb. 3-4%-nyi részben kell beírni! A kulcsszavakat a szöveg elejébe tegyük! A kulcsszavakat címsorokba (h1,, h6) írjuk! A képeknél (img elem) az alt paraméter értéke a kép tartalmára is utaló kulcsszó legyen