Mgr. Vlastislav Kučera přednáška č. 2.  Struktura stránky  hlavička  meta tagy  titulek stránky  připojení stylů,...  CSS.

Prezentace na téma: "Mgr. Vlastislav Kučera přednáška č. 2.  Struktura stránky  hlavička  meta tagy  titulek stránky  připojení stylů,...  CSS."— Transkript prezentace:

1 Mgr. Vlastislav Kučera přednáška č. 2

2  Struktura stránky  hlavička  meta tagy  titulek stránky  připojení stylů,...  CSS

3 To je to, co se zobrazí v titulkové liště prohlížeče

4  uvozena tagy  vše, co je mezi nimi obsaženo, se nezobrazí

5  nepárový tag  syntaxe: ◦  pro zadání popisu webu, klíčových slov, autora,... ◦  pro zadání kódování, přesměrování,...  více na: ◦ http://interval.cz/clanky/kurz-html-jak-na-meta- tagy-v-html/ http://interval.cz/clanky/kurz-html-jak-na-meta- tagy-v-html/ ◦ http://interval.cz/clanky/xhtml-element-meta-a- jeho-pouziti/ http://interval.cz/clanky/xhtml-element-meta-a- jeho-pouziti/ ◦ http://www.jakpsatweb.cz/meta-tagy.html http://www.jakpsatweb.cz/meta-tagy.html

6  nastavení kódování ◦ http-equiv  content-type ◦ content  text/html; charset=utf-8  text/html; charset=windows-1250 ◦ př.: 

7  nastavení jazyka ◦ http-equiv  content-language ◦ content  cs,.... ◦ př.: 

8  popis stránky ◦ name  description ◦ content  popis dokumentu (webu,...) ◦ př.: 

9  klíčová slova ◦ name  keywords ◦ content  klíčová slova, která se váží ke stránce, k webu,... ◦ př.: 

10  autor ◦ name  author ◦ content  jméno tvůrce, mail,... ◦ př.: 

11  copyright ◦ name  copyright ◦ content  informace o copyrightu,...

12  roboti ◦ name  robots ◦ content  all  robot může stránku zanést do databáze (zaindexovat) i procházet stránky, na které jsou v ní odkazy  výchozí nastavení  index  robot může stránku zaindexovat  nofollow  robot nesmí procházet odkazy  noindex  robot stránku nesmí zaindexovat  robots.txt ◦ náhrada za meta robots ◦ umístěn v kořenovém adresáři webu (jinými slovy, tam co je výchozí soubor webu)

13  párový tag   př.: ◦ To je to, co se zobrazí v titulkové liště prohlížeče

14  Externí styly ◦ tag ◦ př.:   Interní styly ◦ tag ◦ př.:  <!-- (XHTML: /* <![CDATA[ */) //--> (XHTML: /* ]]> */)

15  oddělení struktury dokumentu od jeho formátování bylo cílem HTML od samých počátků v roce 1990  bohužel nedošlo ze strany autorů prohlížečů k rozvinutí této koncepce  jak stoupala popularita webu, autoři stránek neměli možnost ovlivnit vzhled svých HTML dokumentů  dvě reakce: ◦ listopad 1994 – 1. koncept "Cascading HTML Style Sheet" ◦ listopad 1994 – Netscape – místo implementace stylového jazyka zabudoval základní formátovací prostředky přímo do jazyka HTML

16  CSS1 ◦ prosinec 1996  CSS2 ◦ květen 1998  CSS3 ◦ zatím neuveden, stále ve stadiu příprav  IE ◦ částečná podpora CSS1 – IE3  Netscape ◦ NN4 – v důsledku konkurenčního boje spíše chybová  Opera ◦ od verze 3.5

17  tag  př.: ◦  interně  př.: ◦

18  širší formátovací možnosti ◦ několik příkladů  - v HTML nastavuje tučné písmo; v CSS pomocí font-weight lze sílu písma nastavit až v devíti stupních  - v HTML – čára (horizontální), lze nastavit sílu, styl (3D, plochá), barvu; v CSS pomocí border lze vytvořit až 8 stylů čar o libovolné síle a barvě, lze tvořit i vertikální čáry  - v HTML – lze určit jeden ze tří možných stylů odrážky; v CSS pomocí list-style-image lze pro odrážky použít libovolný obrázek  snadná tvorba a údržba stylu ◦ údržba webu, který nevyužívá CSS, je velmi složitá a zdlouhavá (nalézt a nahradit tagy, změnit atributy tabulek,...)  oddělení struktury a stylu ◦ lepší "dělba" práce ◦ tentýž obsah lze prezentovat různými způsoby

19  3 metody ◦ tag  používá se pro připojení ext. styl. předpisu ◦ tag  používá se pro vložení interního styl. předpisu ◦ parametr style u HTML tagů  používá pro přiřazení stylu konkrétnímu tagu

20  vkládá se výhradně do hlavičky dokumentu (mezi tagy a )  př.: <!-- //--> /* <![CDATA[ */ /* ]]> */  parametry ◦ type – typ odkazovaného předmětu, v tomto případě hodnota – text/css ◦ media – určuje média, pro které je stylový předpis určen, není povinný (screen, print, …) ◦ title – textový titulek danému styl. předpisu  méně praktický ◦ zvětšuje objem dokumentu (načítá se s každou stránkou) ◦ obtížně se udržují (každá změna se musí provést ve více dokumentech)

21  výhoda ◦ snadné testování  nedoporučuje se používat  př: ◦

22  př: H1 {color: red; text-decoration: underline;} ◦ H1 – selektor ◦ color, text-decoration – vlastnost ◦ red, underline – hodnota  povolené znaky ◦ na velikosti nezáleží (neplatí pro prvky, které nejsou součástí CSS) ◦ jména prvků, tříd a ID v selektorech – písmena anglické abecedy, číslice, pomlčku; nesmí začínat pomlčkou nebo číslicí  komentář: /*.... */