Weboldalak tervezése (X)HTML
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.: <BR>) - páros (pl.: <TBLE> … </TABLE>) - elhagyható zárotag (pl.: <LI> … </LI>)
TAG felépítése Pl.: <A HREF=”www.valami.hu”>Kattints ide</A> 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 </A> - zárótag
Szabványosítás 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>
Weboldal szerkezete 3. <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
Weboldal szerkezete 4. 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
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
Weboldal szerkezete 6. <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
Weboldal szerkezete 7. <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!.