Weboldalak tervezése

2010/2011. Huszár István 1. dia

Weboldalak tervezése

II. (X)HTML


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

http://info.cern.ch/







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öttLehet:- önmagában álló (pl.: <BR>)- páros (pl.: <TBLE> … </TABLE>)- elhagyható zárotag (pl.: <LI> … </LI>)


TAG felépítésePl.: <A HREF=”www.valami.hu”>Kattints ide</A>ahol:

< - a tag kezdete

A – a tag neveHREF – attribútum

” www.valami.hu” – az attribútum értéke

> - tag zárása

Kattints ide – a megjelenő tartalmi rész

</A> - zárótag


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)


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!


Weboldal szerkezete 2.• <html> … </html> - 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: - <head> - fej - </head>>

- <body> - törzs - </body>



• <head> … </head> - 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



• Metaadatok a <head>-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

http://www.googleoptimalizalas.com/meta-tag-beallitasa


Weboldal szerkezete 5.• <title> … </title> - 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



• <body> … </body> - 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



• <div> … </div> - 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 <div> egyedi azonosítója. Pl.: <div id=”container”>

Az attribútumnak fontos szerepe van a stíluslapok használatakor.

A <div>-eket struktúráltan írjuk a forráskódba!.


A jól olvasható forrás egyben tükrözi az oldal struktúráját is!


Az egymásba ágyazás jelzése

Documents

Weboldalak tervezése