Weboldalak tervezése II. (X)HTML

Huszár István 2010/2011.

1. dia

Sir Timothy John "Tim" Berners-Lee

• WWW (1989.) • HTML • http • • World Wide Web Consortium (W3C) http://info.cern.ch

(1991. augusztus 1.) http://www.w3.org/History/19921103-hypertext/hypertext/WWW/News/9201.html

2010/2011.

Huszár István 2. 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.:

…

) 2010/2011.

Huszár István 3. 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 2010/2011.

Huszár István 4. 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) Huszár István 2010/2011.

5. 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!

Huszár István 2010/2011.

6. 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 - > - 2010/2011.

törzs - Huszár István 7. 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 Huszár István 2010/2011.

8. 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-beallitasa 2010/2011.

Huszár István 9. 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.

•

megjegyzés

--> a böngésző a „

megjegyzés

” szöveget figyelmen kívül hagyja 2010/2011.

Huszár István 10. 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 Huszár István 2010/2011.

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