Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/34.0501 Tvorba webových.

Podobné prezentace


Prezentace na téma: "VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/34.0501 Tvorba webových."— Transkript prezentace:

1 VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tvorba webových stránek FORMÁTOVÁNÍ a STYLOVÁNÍ TEXTU, vybraných OBJEKTŮ a ELEMENTŮ

2 VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tvorba webových stránek FORMÁTOVÁNÍ a STYLOVÁNÍ TEXTU, vybraných OBJEKTŮ a ELEMENTŮ, BARVA NA WEBU ??? Text - základní prvek webové stránky - může mít různé vlastnosti – musí se naformátovat Základní formátování písma - styl-řez - provedení, řez - velikost - tloušťka - druh - barva - aj. Značka a zápis v css: – style, variant, weight, size, height, family, color vhodné psát vlastnosti písma do stylopisu Př.: {font-style: název; font-weight: název; font-size: počet px; font-family: druh písma; color: barva;... }

3 VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Zdrojový kód: (NUTNO dodržet pořadí vlastností !!) Výsledek: Odstavec – důležitý prvek webové stránky tagy-párové:, a, patří mezi blokové prvky odst. p - vytváří kolem sebe vertikální mezeru (nad a pod) odst. div – nedělá kolem sebe mezery (2 div za sebou se „slepí“) - používá se pro prostorové vyčlenění oddílů na stránce, kterým lze přiřadit css pozice - před sebou a za sebou vytvoří konec řádku Stylování písma - prakticky

4 VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Různé možnosti formátování odstavců - různá barva orámování textu i pozadí, zaoblené rohy - hromadné nastavení vlastnosti (zde nadpisy h1-h3) - stejné prvky různě naformátované css Stejné prvky různé formátování (h1), třídy class 02 Zdrojový kód:

5 VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Výsledek: Třídy a identifikátory - umožňují nastavit stejným prvkům různé vlastnosti na stránce - patří mezi blokové prvky webových stránek Třídy (class) – umoňují, aby stejné prvky měly různé vlastnosti, apod. Můžeme je přiřadit témměř všem html tagům, a tím tyto prvky pojmenovat a odlišit jeden od druhého. Na stránce libovolně tříd. Zápis: Př.:.jméno třídy{deklarace formátu, atp.} v, ve, (tj. v hlavičce ve stylopisu) v těle ( ) pak text, apod.

6 VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Př.: #jméno identifikátoru{deklarace formátu, atp.} v … … v těle ( ) pak text, apod. Identifikátory (id) – opět pro rozlišení prvků, ale na stránce může být pouze jeden (je unikátní) Zápis: Zdrojový kód: (praktické příklady tříd a identifikátoru)

7 VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Výsledek: (praktické příklady tříd a identifikátoru)... možná deklarace stylů různých nadpisů h1 {color: green;} (různou barvou), ale ve stylopisu či h2 {color: blue;} externím stylem, ne přímým stylem ! (př. pro žáky)

8 VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Zdrojový kód: (praktické příklady formátování odstavce)

9 VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Výsledek: (praktické příklady formátování odstavce) - odsazení 1.ř. a zarovnání do bloku - obrázek na pozadí (textu a odstavce) - orámování a nastavení okrajů (zleva a zprava) - kratší jednodušší nastavení stylu - pozadí stránky (body)

10 VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tagy a - užívají se pro zformátování části textu, aj., který není vymezen nějakým tagem - pro více odstavců se používá div, pro jeden odstavec span - div je prvek blokový - span je prvek řádkový Příklady: použití div a span Zdrojový kód:

11 VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Výsledek:

12 VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Zdroje: JANOVSKÝ, Dušan. Jak psat web [online] [cit ]. Dostupné z: BROŽA, Petr. Jak na počítač vytváříme www stránky. Brno: Computer Press, ISBN Flídr, M.: HTML pro začátečníky. Praha: PC WORLD, 2001, roč. 2001, č. 2. Co to je html [online]. [cit ]. Dostupné z: ROUBAL, Pavel. Počítačová grafika pro úplné začátečníky. Computer Press, Tvorba webu [online] [cit ]. Dostupné z:


Stáhnout ppt "VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/34.0501 Tvorba webových."

Podobné prezentace


Reklamy Google