Untitled.">

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

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

Hodina 2. 14SIAP – SÍTĚ A PROTOKOLY. Připomenutí z minula Untitled.

Podobné prezentace


Prezentace na téma: "Hodina 2. 14SIAP – SÍTĚ A PROTOKOLY. Připomenutí z minula Untitled."— Transkript prezentace:

1 Hodina 2. 14SIAP – SÍTĚ A PROTOKOLY

2 Připomenutí z minula Untitled …obsah stránek…

3 BODY - atributy

4 Barvy  Barvy:  složky RGB – Red, Green, Blue  red, blue, yellow, white  vyjádření barvy v 16-kové soustavě #RRGGBB # černá #FFFFFF (bíla) „00FF00“ (HTML) = „00ff00“ (HTML) PSpad – Nástroje / Výběr barvy  Vyjádření barvy pomocí rgb zápisu rgb(0%,100%,0%) rgb(0,255,0)

5 Poznámky v dokumentu  Je dobré používat poznámky.   Zobrazí se text: „poznámka na dalším řádku -->“

6 Úkol na procvičení  Vytvořte stránku, která bude mít nastavenu následující strukturu:  Titulek stránky – „Moje první stránka“  Kódování – „utf-8“  Barva pozadí dokumentu – „zelená“  Barva textu – „bílá“  Barva odkazů – „žlutá“  Metatag pro klíčová slova – „želva,sníh,zima“ PSPad – vložení elementu včetně nastavení atributů Ctrl+mezerník

7 Řešení úkolu Moje první stránka barva textu je bila

8 Mezery v HTML kódu a v prohlížeči Folder Crypt je na první pohled jednoduchá aplikace, která má ale velký bezpečnostní potenciál.

9 "Speciální" znaky mezera << >> && ©© PSpad – Nástroje / ASCII tabulka

10 Text v těle nesmí být "ve vzduchu" Můj první pokus Příšerně žluťoučký kůň úpěl ďábelské ódy.


11 Blokové elementy  Odstavec (angl. paragraph)  tady je tělo odstavce  Základní prvek dokumentu  Před a za odstavce mezera velikosti 1 řádku  2 odstavce pod sebou ≠ mezera 2 řádky, ale mezera 1 řádku  Atributy: align - zarovnání odstavce- left | right | center | justify  Příklad: Odstavec zarovnaný doprava.

12 Blokové elementy  Řádkování (angl. break)   Způsobuje okamžité ukončení řádku. Případný další text pokračuje na nové řádce.  Nedělá mezery před a za  Z typografického hlediska odpovídá tento tag "vynucenému zalomení řádku".

13 Blokové elementy  Oddíl (angl. division)  obsah  Před a za oddílem se zalomí řádek.  Je velmi podobný odstavci ( … ). Na rozdíl od odstavce ale nedělá před a za sebou mezery.  Atributy: align - zarovnání oddílu - left | right | center | justify  Příklad: text

14 Blokové elementy  Nadpis (angl. heading)  Nadpis 1. úrovně  Nadpis 2. úrovně  Nadpis 3. úrovně  Nadpis 4. úrovně  Nadpis 5. úrovně  Nadpis 6. úrovně

15 Blokové elementy  Nadpis ( pokračování )  Nadpisy se automaticky zobrazují tučně  Různá velikost písma.  Mají kolem sebe vertikální mezery.  Atributy: align - zarovnání nadpisu- left | right | center | justify  Příklad: Dopravní prostředky

16 Blokové elementy  Předformátovaný text (angl. preformatted)  text  Tento tag umožňuje rychlé publikování textových souborů, které už jsou formátované pomocí mezer a konců řádek.  Má kolem sebe vertikální mezery.  Příklad: text text na dalším řádku text.

17 Blokové elementy  Vodorovná čára (angl. horizontal rule)   Přes celou šířku stránky.  Atributy: width - šířka čáry - XXpx | XX% align - zarovnání čáry - left | right | center size - tloušťka čáry – XXpx color - barva čáry – blue | #AACCFF  Příklad:

18 Úkoly na procvičení  Použijte stránku z předchozího úkolu a vytvořte následující obsah:  Vytvořte nadpis 1. úrovně s textem „Tvorba WWW stránek“. Text bude zarovnaný na střed.  Pod nadpis vložte čáru, která bude světle modrá, bude dlouhá 80% a tlustá 3px.  Vytvořte 3 odstavce s textem „Lorem ipsum…“ PSPad – Nástroje – Lorem Ipsum generátor Odstavce budou zarovnány do bloku.

19 Řešení úkolu  Vytvořte nadpis 1. úrovně s textem „Tvorba WWW stránek“. Barva textu bude modrá a text bude zarovnaný na střed. Tvorba WWW stránek  Pod nadpis vložte čáru, která bude světle modrá, bude dlouhá 80% a tlustá 3px.

20 Řešení úkolu  Vytvořte 3 odstavce s textem „Lorem ipsum…“ PSPad – Nástroje – Lorem Ipsum generátor Odstavce budou zarovnány do bloku. Lorem ipsum. Dolor sit amet consectetuer. Lacus ut Ut nascetur ut Vestibulum Donec eu est Phasellus augue. Malesuada. Lobortis felis pede lorem diam Nam tellus ac porttitor eros wisi. Sed tincidunt libero consectetuer id lacus parturient quis.

21 Řešení úkolu - alternativa  Vytvořte 3 odstavce s textem „Lorem ipsum…“ PSPad – Nástroje – Lorem Ipsum generátor Odstavce budou zarovnány do bloku. Lorem ipsum. Dolor sit amet consectetuer. Lacus ut Ut nascetur ut Vestibulum Donec eu est Phasellus augue. Malesuada. Lobortis felis pede lorem diam Nam tellus ac porttitor eros wisi. Sed tincidunt libero consectetuer id lacus parturient quis.

22 Řádkové elementy  Fyzické formátování  Fyzické formátování říká, jak má který text přesně vypadat (tedy jak má být formátován). Nezabývá se logickou rolí formátovaného textu (asi výjimka a ).  Logické formátování  Logické formátování určuje význam textu, neříká, jak má vymezený text vypadat.

23 Řádkové elementy - F yzické formátování  Tučný text (angl. bold)  text  Sešikmený text - kurzíva (angl. italic)  text  Podtržení textu (angl. underline)  text  Dolní index (angl. subscript)  H 2 SO 4  Horní index (angl. superscript)  x 2

24  Zmenšení písma o jeden stupeň  text  malý text maličký text  Zvětšení písma o jeden stupeň  text  Dnešní den, pondělí , odpadá hodina ze SIAPu  Přeškrtnuté písmo (angl. striked)  toto už neplatí Řádkové elementy - F yzické formátování

25  Nastavení písma  text  Nastavujeme barvu, velikost a font písma  Atributy: color - barva písma - red | #AACCFF face - druh písma Arialu (arial, helvetica, verdana, sans-serif) - bezpatkové Timesu (serif) - patkové Courieru (monotype) size - velikost písma – stupeň písma (1-7 stupňů)  Příklad: červené písmo Arialem Řádkové elementy - F yzické formátování

26 Úkoly na procvičení  Použijte stránku z předchozího úkolu a doplňte:  U již vytvořeného nadpisu 1. úrovně s textem „Tvorba WWW stránek“ nastavte barvu textu na modrou.  V 1. odstavci 1. věta má být vypsána tučně a za ní má být odřádkováno.  Do 2. odstavce vložte na začátek text: „síran amonný - H 8 N 2 O 4 S“

27 Řešení úkolu  U již vytvořeného nadpisu 1. úrovně s textem „Tvorba WWW stránek“ nastavte barvu textu na modrou. Tvorba WWW stránek

28 Řešení úkolu  V 1. odstavci 1. věta má být vypsána tučně a za ní má být odřádkováno. Lorem ipsum. Dolor sit amet consectetuer. Sed et wisi ut tortor. Feugiat.  V 2. odstavci vložte na začátek text: „síran amonný - H 8 N 2 O 4 S“ Síran amonný H 8 N 2 O 4 S. Lacus ut Ut nascetur ut Vestibulum Donec eu est Phasellus augue. Malesuada.

29 Řádkové elementy - Logické formátování  Vymezení části textu  text  Není v prohlížeči nijak formátován – využívá se pro CSS  Zvýraznění textu  důležitý text  Prohlížeč zobrazí text tučně.  Zvýraznění textu (angl. emphasis)  důležitý text  Prohlížeč zobrazí text kurzívou.

30  Citace I.  citace  Prohlížeč zobrazí text se kurzívou.  Citace II. (angl. quote)  citace  Kolem textu se udělají uvozovky, mimo IE.  Atribut: cite – zdroj citace – url adresa  Příklad: Časoprostor je obecně zakřivený. Řádkové elementy - Logické formátování

31 Úkoly na procvičení  Použijte stránku z předchozího úkolu a vytvořte následující obsah:  V 1. odstavci 2. větu vyznačte jako důležitou (zvýrazněnou).  Ve 3. odstavci na začátek vložte řetězec (takto se má řetězec zobrazit v prohlížeči) " " a označte ho jako citaci

32 Řešení úkolu  V 1. odstavci 2. větu vyznačte jako důležitou (zvýrazněnou). Lorem ipsum. Dolor sit amet consectetuer. Sed et wisi ut tortor. Feugiat.  Ve 3. odstavci na začátek vložte řetězec (takto se má řetězec zobrazit v prohlížeči) " " a označte ho jako citaci "<Black&White>" Lobortis felis pede lorem diam Nam tellus ac porttitor eros wisi. Sed tincidunt libero consectetuer id lacus parturient quis.

33 Formátované seznamy  Hlavní funkce – zjednodušit a zpřehlednit text pro rychlé pochopení, pročtení a vyhledání informací.  Dělení  Neuspořádané – odrážkové – seznamy  Uspořádané - číslované – seznamy  Seznam definic

34 Odrážkový seznam  Hlavní element („kontejner“) (angl. unordered list)  …..  Atribut: type="hodnota" Úvodní odrážka Hodnoty: disc - plná tečka (imlicitní) circle - prázdné kolečko square - čtvereček

35 Odrážkový seznam  Položka seznamu (angl. list item)  …..  Obsahem - cokoliv včetně odstavců, dalších seznamů  Každá položka na novém řádku  Nemá kolem sebe vertikální mezery  Vše musí být uvnitř tagu  Atribut: type="hodnota" Hodnoty: disc - plná tečka (imlicitní) circle - prázdné kolečko square - čtvereček

36 Odrážkový seznam  Příklady položka1 položka2 položka3 položka3 – a položka4

37 Uspořádaný seznam  Hlavní element („kontejner“) (angl. ordered list)  …..  Atribut: type="hodnota" 1 - normální číslování- defaultní číslování A - velké písmenkování a - malé písmenkování I - římské číslice i - malé římské číslice start="počáteční hodnota číslování"

38 Uspořádaný seznam  Položka seznamu (angl. list item)  …..  Atribut: type="hodnota" 1 - normální číslování- defaultní číslování A - velké písmenkování a- malé písmenkování I - římské číslice i - malé římské číslice value="změna číslování"

39 Uspořádaný seznam  Příklad 1: polozka1 polozka2 položka3 polozka3 – a

40 Uspořádaný seznam  Příklad 2: polozka1 polozka2 položka3 polozka3 – a

41 Uspořádaný seznam  Příklad 3: číslo 1. číslo 30. číslo 40. číslo 41.

42 Úkol na procvičení  Použijte stránku z předchozího úkolu  vytvořte následující seznam:

43 Řešení úkolu  vytvořte následující seznam: Seznamy neuspořádaný seznam uspořádaný seznam seznam definic Odkazy Záložky


Stáhnout ppt "Hodina 2. 14SIAP – SÍTĚ A PROTOKOLY. Připomenutí z minula Untitled."

Podobné prezentace


Reklamy Google