1 / 29

Úvod do HTML

Úvod do HTML. Tvorba multimediálneho webu doc. Ing. Juraj Vaculík, PhD. html, http, xhtml. H yper T ext M arkup L anguage – jazyk pre tvorbu webových stránok H yper T ext T ransport P rotocol – protokol pre komunikáciu medzi webovými servermi

oki
Download Presentation

Úvod do HTML

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. Úvod do HTML Tvorba multimediálneho webu doc. Ing. Juraj Vaculík, PhD.

  2. html, http, xhtml • HyperText Markup Language – jazyk pre tvorbu webových stránok • HyperText Transport Protocol – protokol pre komunikáciu medzi webovými servermi • eXtented html – nová verzia jazyka html na báze štandardu xml, • xml, svg, vrml, wml, xhtml mp, @JV/TMW 07

  3. Formát značiek Formát značiek môže byť : • <tag>obsah prvku</tag> - tzv. párové značky, • napríklad : <title>názov</title> • <tag> - tzv. nepárové značky bez obsahu, • napríklad : <br> • <tag>obsah prvku - tzv. nepárové značky, • napríklad : <p>text odstavca • <tag atribúty>obsah prvku</tag>, • napríklad : <font size=2 color=red>text dokumentu</font> • <tag atribúty> - t.j. značky s atribútami bez obsahu prvku, napríklad : <hr size=20> @JV/TMW 07

  4. Formát atribútov • atribút="hodnota" • napríklad : align="left", kde je použitá definovaná hodnota, • atribút • napríklad : nowrap alebo control, kde má atribút význam on alebo off @JV/TMW 07

  5. Štruktúra WEB dokumentu typ dokumentu hlavička kódstránky telo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> . . </head> <body> . . </body> </html> @JV/TMW 07

  6. Typy dokumentu DTD - Document Type Definition Strict — Najprísnejšia norma, neobsahuje formátovacie prvky <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Transitional — „Prechodná“ norma, snaží sa zachovať spätnú kompatibilitu, preto je pomerne mierna — v súčasnej dobe najrozšírenejší XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> @JV/TMW 07

  7. Typy dokumentu Frameset — Norma určená pre stránky s rámci (angl. frames). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> XHTML 1.1 definuje len <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> @JV/TMW 07

  8. Typy dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//ENhttp://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//ENhttp://www.w3.org/TR/html4/frameset.dtd"> @JV/TMW 07

  9. Základná štruktúra dokumentu <html> <head> <title>názov dokumentu</title> <meta atribúty> ostatné elementy </head> <body> telo dokumentu </body> </html> @JV/TMW 07

  10. Štruktúra dokumentu • časť HTML, ktorá definuje vlastný dokument a neobsahuje ďalšie atribúty ani príkazy, • časť HEAD, ktorá poskytuje, pomocou sady príkazov, informácie pre browser a podporné informácie pre definíciu skriptov, štýlov a podobne, • časť BODY, ktorá tvorí vlastný dokument - táto časť sa zobrazuje pomocou browseru, respektíve podľa príkazov alebo značiek - tag-ov jednotlivé elementy dokumentu. @JV/TMW 07

  11. Rozšírená štruktúra dokumentu Základná štruktúra dokumentu môže byť rozšírená použitím tzv. technológie rámov Frame. <frameset definícia štruktúry rámov> <frame definícia prvého rámu> <frame definícia druho rámu> </frameset> </noframe> definícia bez rámu <body> telo dokumentu </body> </noframe> @JV/TMW 07

  12. Element <head> • <BASE> - umožňuje definícu základnej adresy dokumetu • <BASEFONT> - nastavuje základný font pre dokument • <ISINDEX> - umožňnuje prehľadávať dokument podľa kľúčových slov • <LINK> - indikuje vzťah dokumentu k inému objektu • <META> - špecifikuje informácie pre browser alebo iného klienta • <NEXTID> - vytvára unikátny identifikátor dokumentu • <STYLE> - špecifikácia štýlu dokumentu • <TITLE> - špecifikácia názvu dokumentu @JV/TMW 07

  13. Element <BASE...> atribút href, ktorý definuje URL, ktoré by malo byť definované v plnom tvare. <base ref="http://fp446.utc.sk/"> • atribút target, ktorý definuje umiestenie dokumentu do okna alebo rámu pri použití obalenia dokumentu pomocou elementu Frame. <base target="meno_okna"> @JV/TMW 07

  14. Element <BASEFONT...> • zmení veľkosť, prípadne typ a farbu, všetkých textových prvkov v dokumente <BASEFONTcolor=red > <BASEFONTface="ariel, courier" > <BASEFONTsize=5 color=#fafa00 > • Nastavenie elementu <BASEFONT> vo vnútri dokumentu predefinuje predchádzajúce nastavenia alebo štýl definovaný pred ním. @JV/TMW 07

  15. Element <LINK...> • Definuje spojitosť s iným súborom - neviditeľný vzťah. Najčastejšie sa požíva pre prepojenie s externým CSS štýlom. Nepárový tag, vyskytuje sa len v hlavičke - atribúty • rel - vzťah k linkovanému súboru hodnoty : stylesheet | javascript, teoreticky aj dalšie • rev - spätný vzťah, prakticky nefunguje • href - cesta k linkovanému súboru URL • type- MIME typ súboru (nepovinné) MIME špecifikácia (napr. "text/css") • media - obmedzenie na typ výstupu - hodnoty all | screen | print | a dalšie (pozri štýly) • disabled - zrušenie platnosti (kvôli skriptom) bez hodnoty @JV/TMW 07

  16. Ukážka použitia ... <HTML> <HEAD> <TITLE>Názov dokumentu</TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="../subor.css" TITLE="formal"> </head> <body> Telo dokumentu </body> </html> @JV/TMW 07

  17. Element <META...> • Meta informácie o dokumente : • name druh metainformácie - uživateľské informácie keywords | description | author | generator a mnoho ďalších • http-equiv ekvivalent name - http hlavičky content-type | refresh a mnoho ďalších (akýkoľvek http údaj) • content obsah, vlastná informácia - hodnota podľa typu informácie @JV/TMW 07

  18. Význam položiek ... • keywords v minulosti kľúčové slova pre vyhľadávacie stroje, dnes bezcené slovo, pretože väčšina prehľadáva "fulltext" • description popis stránky, väčšinou pre vyhľadávacie stroje stručný popis obsahu stránky • author informácie o autorovi • generator identifikácia programu, ktorý stránku vytvoril reťazec vkladaný programom @JV/TMW 07

  19. Význam položiek ... • content-type MIME špecifikácia + informácia o kódovaní text/html; charset=iso-8859-2 | text/html; charset=windows-1250 | prípadne ďalšie kódovanie • content-language Info o jazyku dokumentu - hodnoty cs | sk | de | en-us | en-gb a mnohé ďalšie jazyky (podľa ISO normy) • refresh presmerovánie na adresu po určitom čase, hodnota sekundy;URL=URL, napríklad "6;URL=http://www.utc.sk/index.htm" @JV/TMW 07

  20. Význam položiek ... • robots zakázánie robotov indexovať alebo sledovať odkazy [index | noindex ], [ follow | nofolow] a ďalšie hodnoty, ktoré si pridáva nejaký software alebo sa pre niečo, niekomu hodí refresh presmerovánie na adresu po určitom čase, hodnota sekundy;URL=URL, napríklad "6;URL=http://www.utc.sk/index.htm" • cache-control spôsob cacheovanie (ukladanie na klientoch) - hodnoty no-cache | cache a mnoho ďalších ekvivalentov HTTP hlavičiek. Niektoré z nich sú používané len niektorými klientami. @JV/TMW 07

  21. Element <STYLE...> Definovanie kaskádového štýlu <STYLE TYPE="text/css" TITLE=„farby"> BODY {color : white} P {color : blue; font-size : 12pt; font-family : Arial} H1 { color : red; font-size : 18pt} ... </STYLE> @JV/TMW 07

  22. Element <TITLE...> • Názov stránky: • zobrazuje sa v záhlaví okna a na hlavnom panele ako nadpis aplikácie • zobrazuje sa ako nadpis vo vyhľadávačoch • je prioritný pri indexovaní stránky vyhľadávacími robotmi • veľa softwaru ho používa ako nativný odkaz <TITLE>Názov stránky</TITLE> @JV/TMW 07

  23. Element <body> <BODY ... atribúty príkazu ...> Tu je umiestnený celý dokument s všetky jeho príkazy, ktoré sú prezentované browserom </BODY> @JV/TMW 07

  24. Atribúty elementu body • BackGround - špecifikuje obrázok na pozadí dokumentu, • BgColor - umožňuje nastaviť farbu pozadia dokumetu • Text - nastavuje základú farbu textu dkumentu • Link - nastavenie farbu linku • vLink - nastavenie farbu vykonaného linku • aLink - nastavenie farbu aktívneho linku • BgProperties – vlastnosti pozadia (fixed) • LeftMargin - nastavuje odstavenie dokumentu od ľavého okraju • TopMargin - nastavuje odstavenie dokumentu od vrchného okraju • RightMargin - nastavuje odstavenie dokumentu od pravého okraju • BottomMargin - nastavuje odstavenie dokumentu od spodného okraju @JV/TMW 07

  25. Základné prvky • Inline prvky – formátovanie textu • Blokové -oddelenie do bloku • Nahradzovacie – nahradia sa iným obsahom • Tabuľky • Zoznamy • Logické elementy (inline alebo blokové) @JV/TMW 07

  26. Validita stránok Predstavuje kontrolu dodržiavania pravidiel stanovených W3C (Worl Wide Web Consortium), SGML (Standard Generalized Markup Language) a XML (Extensible Markup Language). Obyčajne sa problém kontinuity rieši tak, že nové riešenie umožňuje všetko, čo aj predošlé, ale ponúka niečo naviac. Do nového riešenia sa tak dostanú všetky chyby prameniace zo zlých rozhodnutí, ktoré sa v minulosti do normy dostali. V prípade HTML bolo prijaté opatrenie, ktoré umožňuje „zbaviť“ sa nežiaducich prvkov či atribútov. Tie sú označené ako zastarané, alebo sú zaradené do zoznamu zavrhovaných prvkov. @JV/TMW 07

  27. Validita stránok Zastaralé prvky (obsolete elements) sú také, ktoré nová norma už nepodporuje a nemali by sa už používať, hoci webové prehliadače spravidla voči nim „neprotestujú“. Také sú napríklad prvky LISTING, PLAINTEXT a XMP. Všade, kde sa voľakedy používali tieto prvky, je vhodné použiť prvok PRE. @JV/TMW 07

  28. Validita stránok Zavrhované prvky (deprecated elements) sú také, ktoré nie je odporúčané používať, ale aj napriek tomu sú súčasťou normy. Medzi také prvky patrí APPLET, BASEFONT, CENTER, DIR, FONT, ISINDEX, MENU, S, STRIKE a U. Odporúčanie nepoužívať tieto prvky zrejme smeruje k tomu, aby si tvorcovia stránok od nich odvykli a možno príde čas, keď budú z normy odstránené. @JV/TMW 07

  29. Vyhodnotenie dodržania pravidiel Dodržiavanie pravidiel v dokumentoch uverejnených vo webe môžu skontrolovať špeciálne programy, tzv. validátory. Na stránkach W3C sú dokonca dostupné validátory, ktorým stačí zadať adresu stránky. Získame tak nielen informáciu o počte chýb, ale aj o mieste, kde a aká chyba tam je. Ak v našej stránke chyba nie je, dostaneme odporúčanie, aby sme na svoju stránku umiestnili obrázok, ktorý bude potvrdzovať dodržiavanie pravidiel W3C. @JV/TMW 07

More Related