2010/2011.Huszár István1. dia Weboldalak tervezése II. (X)HTML.

Az előadások a következő témára: "2010/2011.Huszár István1. dia Weboldalak tervezése II. (X)HTML."— Előadás másolata:

1 2010/2011.Huszár István1. dia Weboldalak tervezése II. (X)HTML

2 2010/2011.Huszár István2. dia Sir Timothy John "Tim" Berners-Lee WWW (1989.) HTML http World Wide Web Consortium (W3C) http://info.cern.ch (1991. augusztus 1.)http://info.cern.ch http://www.w3.org/History/19921103-hypertext/hypertext/WWW/News/9201.html

3 2010/2011.Huszár István3. dia HTML felépítése HyperText Markup Language – kereszthivatkozások kezelésére is alkalmas jelölő nyelv Tartalom + megjelenés TAG : jelölőelem jelek között Lehet: - önmagában álló (pl.: ) - páros (pl.: … ) - elhagyható zárotag (pl.: … )

4 2010/2011.Huszár István4. dia TAG felépítése Pl.: Kattints ide ahol: < - a tag kezdete A – a tag neve HREF – attribútum ” www.valami.hu” – az attribútum értéke > - tag zárása Kattints ide – a megjelenő tartalmi rész - zárótag

5 2010/2011.Huszár István5. dia Szabványosítás W3C – szempontok: - a megjelenésre, dizájnra vonatkozó jelölőelem elhagyása - fő funkció: az oldal tartalmi részének, struktúrájának leírása XML (eXtensible Markup Language) adatstruktúrák leírására használt jelölőnyelv HTML + XML => XHTML (2000. XHTML 1.0)

6 2010/2011.Huszár István6. dia Weboldal szerkezete 1. DTD (Document Type Definition) - Azonosítja az oldal leírásához használt nyelvet, annak verzióját és változatát. - A különböző böngészőket szabványkövető üzemmódba kényszeríti. Weboldalunk mindig DTD-vel kezdődjön!

7 2010/2011.Huszár István7. dia Weboldal szerkezete 2. … - oldal nyitás és zárás fontos! - xmlns – névtér megadása - xml – oldal tartalmi részének nyelve (A névtérnek XML dokumentumokban van jelentősége, itt csak nyilatkozunk, hogy az oldalban XHTML jelölőnyelvet fogunk használni.) Részei: - - fej - > - - törzs -

8 2010/2011.Huszár István8. dia Weboldal szerkezete 3. … - fejléc, mint a weboldal egyik fő része - a böngészőben nem látható - fontos szerepe van a weboldal megjelenését illetően - metaadatokat tartalmaz

9 2010/2011.Huszár István9. dia Weboldal szerkezete 4. Metaadatok a -ben (pl.): - author – szerző neve - description – az oldal leírása (tartalom) - keywords – kulcsszavak a keresőknek - robots – kereső robotok vezérlése - resource-type – dokumentum típusa Bővebben: http://www.googleoptimalizalas.com/meta-tag-beallitasahttp://www.googleoptimalizalas.com/meta-tag-beallitasa

10 2010/2011.Huszár István10. dia Weboldal szerkezete 5. … - az oldal címe. (Kötelező elem!) - Böngészőablakának címsor tartalma - Kedvencek listájának megnevezése - Kereső programok is figyelik. - a böngésző a „megjegyzés” szöveget figyelmen kívül hagyja

11 2010/2011.Huszár István11. dia Weboldal szerkezete 6. … - törzs, az oldal tényleges, látható része. A forráskód formai jellemzői: -tagolt szöveg -áttekinthető -jól olvasható -struktúrált

12 2010/2011.Huszár István12. dia Weboldal szerkezete 7. … - division – szakasz, rész: Az XHTML-ben a dokumentum főbb strukturális részeinek kijelölésére szolgál id attribútum: a egyedi azonosítója. Pl.: Az attribútumnak fontos szerepe van a stíluslapok használatakor. A -eket struktúráltan írjuk a forráskódba!.

13 2010/2011.Huszár István13. dia A jól olvasható forrás egyben tükrözi az oldal struktúráját is!

14 2010/2011.Huszár István14. dia Az egymásba ágyazás jelzése