1 / 14

Weboldalak tervezése

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. HTML felépítése.

lynne
Download Presentation

Weboldalak tervezése

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Weboldalak tervezése II. (X)HTML Huszár István

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

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

  4. TAG felépítése Pl.: <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 Huszár István

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

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

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

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

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

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

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

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

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

  14. Az egymásba ágyazás jelzése Huszár István

More Related