Mgr. Vlastislav Kučera Struktura stránky, hlavička,

Rozměr: px

Začít zobrazení ze stránky:

Download "Mgr. Vlastislav Kučera Struktura stránky, hlavička,"

Marcela Bártová
před 7 lety
Počet zobrazení:

1 Mgr. Vlastislav Kučera Struktura stránky, hlavička,

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

3 <doctype html> <html lang="cs"> <head> <meta charset="windows-1250"> <title>to je to, co se zobrazí v titulkové liště prohlížeče</title> </head> <body> </body> </html>

4 uvozena tagy <head></head> vše, co je mezi nimi obsaženo, se nezobrazí

5 nepárový tag syntaxe: <meta name="" content=""/> pro zadání popisu webu, klíčových slov, autora,... <meta charset=""/> pro zadání kódování více na:

6 nastavení kódování charset utf-8 windows-1250 př.: <meta charset="utf-8" >

7 popis stránky name description content popis dokumentu (webu,...) př.: <meta name="description" content= Stručný popis webu." />

8 klíčová slova name keywords content klíčová slova, která se váží ke stránce, k webu,... př.: <meta name="keywords" content= UHK, PdF," />

9 autor name author content jméno tvůrce, mail,... př.: <meta name="author" content="vlastislav Kučera; />

10 copyright name copyright content informace o copyrightu,...

11 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)

12 párový tag <title></title> př.: <title>to je to, co se zobrazí v titulkové liště prohlížeče</title>

13 <link rel="stylesheet" href="style.css" > Pro srovnání o <link media="screen" rel="stylesheet" type="text/css" href="css/hlavni.css" />

14 Interní styly tag <style></style> př.: <style type="text/css">  (XHTML: /* ]]> */) </style>

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 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 <script> př.: <script src="js/script.js"></script> interně př.: <script></script>

širší formátovací možnosti několik příkladů <b> - v HTML nastavuje tučné písmo; v CSS pomocí font-weight lze sílu písma nastavit až v devíti stupních <hr /> - v HTML čára (horizontální), lze nastavit

18 širší formátovací možnosti několik příkladů <b> - v HTML nastavuje tučné písmo; v CSS pomocí font-weight lze sílu písma nastavit až v devíti stupních <hr /> - 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 <ol> - 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 <font>, 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 <link> používá se pro připojení ext. styl. předpisu tag <style> 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 <head> a </head>) př.: <style>  </style> <style media="all"> /* <![CDATA[ */ /* ]]> */ </style> 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ř: <h1 style="text-align: center; text-decoration: underline;"> <p style="color: #FF0; background-color: #000; text-indent: 1.2em">

př: H1 {color: red; text-decoration: underline;} H1 selektor color, text-decoration vlastnost red, underline hodnota povolené znaky na velikosti nezáleží (neplatí pro

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ář: /*... */

Podobné dokumenty

Mgr. Vlastislav Kučera lekce č. 2

Mgr. Vlastislav Kučera lekce č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to je to, co se