14SIAP – SÍTĚ A PROTOKOLY Hodina 2.
Připomenutí z minula <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <title>Untitled</title> </head> <body> <p>…obsah stránek…</p> </body> </html>
BODY - atributy <body background="obrazek.gif" bgcolor="yellow" text="blue" link="green" vlink="olive" alink="#FF0000">
Barvy Barvy: složky RGB – Red, Green, Blue red, blue, yellow, white vyjádření barvy v 16-kové soustavě #RRGGBB #000000 č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)
Poznámky v dokumentu Je dobré používat poznámky. <!-- poznámka --> <!-- poznámka na 1. řádku poznámka na dalším řádku --> <!-- vložená poznámka --> Zobrazí se text: „poznámka na dalším řádku -->“
Ú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
Řešení úkolu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title>Moje první stránka</title> <meta name="keywords" content="želva,sníh,zima"> </head> <body vlink="yellow" alink="yellow" link="yellow" text="white" bgcolor="green"> barva textu je bila </body> </html>
Mezery v HTML kódu a v prohlížeči <p>Folder Crypt je na první pohled jednoduchá aplikace, která má ale velký bezpečnostní potenciál. </p>
"Speciální" znaky PSpad – Nástroje / ASCII tabulka mezera < > & & © © PSpad – Nástroje / ASCII tabulka
Text v těle nesmí být "ve vzduchu" <html> <head> <title>Můj první pokus</title> </head> <body> Příšerně žluťoučký kůň úpěl ďábelské ódy. </body> </html> <p> </p>
Blokové elementy Odstavec (angl. paragraph) <p> tady je tělo odstavce </p> 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: <p align="right">Odstavec zarovnaný doprava.</p>
Blokové elementy Řádkování (angl. break) <br> 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".
Blokové elementy Oddíl (angl. division) <div> obsah </div> Před a za oddílem se zalomí řádek. Je velmi podobný odstavci (<p> … </p>). Na rozdíl od odstavce ale <div> nedělá před a za sebou mezery. Atributy: align - zarovnání oddílu - left | right | center | justify Příklad: <div align="center">text</div>
Blokové elementy Nadpis (angl. heading) <h1>Nadpis 1. úrovně</h1> <h2>Nadpis 2. úrovně</h2> <h3>Nadpis 3. úrovně</h3> <h4>Nadpis 4. úrovně</h4> <h5>Nadpis 5. úrovně</h5> <h6>Nadpis 6. úrovně</h6>
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: <h1 align="center">Dopravní prostředky</h1>
Blokové elementy Předformátovaný text (angl. preformatted) <pre> text </pre> 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: <pre> text text na dalším řádku text.</pre>
Blokové elementy Vodorovná čára (angl. horizontal rule) <hr> 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: <hr width="50%" size="50px" color="green" align="center">
Ú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. 18
Ř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. <h1 align="center">Tvorba WWW stránek</h1> Pod nadpis vložte čáru, která bude světle modrá, bude dlouhá 80% a tlustá 3px. <hr align="center" size="3px" width="80%" color="skyblue"> 19
Řešení úkolu Vytvořte 3 odstavce s textem „Lorem ipsum…“ PSPad – Nástroje – Lorem Ipsum generátor Odstavce budou zarovnány do bloku. <p align="justify">Lorem ipsum. Dolor sit amet consectetuer. </p> <p align="justify">Lacus ut Ut nascetur ut Vestibulum Donec eu est Phasellus augue. Malesuada. <p align="justify">Lobortis felis pede lorem diam Nam tellus ac porttitor eros wisi. Sed tincidunt libero consectetuer id lacus parturient quis. 20
Ř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. <div align="justify"> <p>Lorem ipsum. Dolor sit amet consectetuer. </p> <p>Lacus ut Ut nascetur ut Vestibulum Donec eu est Phasellus augue. Malesuada. <p>Lobortis felis pede lorem diam Nam tellus ac porttitor eros wisi. Sed tincidunt libero consectetuer id lacus parturient quis. </div> 21
Řádkové elementy Fyzické formátování Logické 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 <sup> a <sub>). Logické formátování Logické formátování určuje význam textu, neříká, jak má vymezený text vypadat.
Řádkové elementy - Fyzické formátování Tučný text (angl. bold) <b> text </b> Sešikmený text - kurzíva (angl. italic) <i> text </i> Podtržení textu (angl. underline) <u> text </u> Dolní index (angl. subscript) H<sub>2</sub>SO<sub>4</sub> Horní index (angl. superscript) x<sup>2</sup>
Řádkové elementy - Fyzické formátování Zmenšení písma o jeden stupeň <small> text </small> <small>malý text<small>maličký text</small></small> Zvětšení písma o jeden stupeň <big> text </big> <p>Dnešní den, <big>pondělí 18.10.2010</big>, odpadá hodina ze SIAPu</p> Přeškrtnuté písmo (angl. striked) <s>toto už neplatí</s>
Řádkové elementy - Fyzické formátování Nastavení písma <font> text </font> 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: <font size="5" color="red" face="Arial, Helvetica">červené písmo Arialem</font>
Ú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ý - H8N2O4S“ 26
Řešení úkolu U již vytvořeného nadpisu 1. úrovně s textem „Tvorba WWW stránek“ nastavte barvu textu na modrou. <h1 align="center"><font color="blue">Tvorba WWW stránek</font></h1> 27
Ř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. <p align="justify"><b>Lorem ipsum.</b> <br> Dolor sit amet consectetuer. Sed et wisi ut tortor. Feugiat. </p> V 2. odstavci vložte na začátek text: „síran amonný - H8N2O4S“ <p align="justify">Síran amonný H<sub>8</sub>N<sub>2</sub>O<sub>4</sub>S. Lacus ut Ut nascetur ut Vestibulum Donec eu est Phasellus augue. Malesuada. 28
Řádkové elementy - Logické formátování Vymezení části textu <span>text</span> Není v prohlížeči nijak formátován – využívá se pro CSS Zvýraznění textu <strong>důležitý text</strong> Prohlížeč zobrazí text tučně. Zvýraznění textu (angl. emphasis) <em>důležitý text</em> Prohlížeč zobrazí text kurzívou.
Řádkové elementy - Logické formátování Citace I. <cite>citace</cite> Prohlížeč zobrazí text se kurzívou. Citace II. (angl. quote) <q>citace</q> Kolem textu se udělají uvozovky, mimo IE. Atribut: cite – zdroj citace – url adresa Příklad: <q cite=http://cs.wikipedia.org/>Časoprostor je obecně zakřivený.</q>
Ú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) "<Black&White>" a označte ho jako citaci
Řešení úkolu V 1. odstavci 2. větu vyznačte jako důležitou (zvýrazněnou). <p align="justify"><b>Lorem ipsum.</b> <br> <strong>Dolor sit amet consectetuer. </strong> Sed et wisi ut tortor. Feugiat. </p> Ve 3. odstavci na začátek vložte řetězec (takto se má řetězec zobrazit v prohlížeči) "<Black&White>" a označte ho jako citaci <p align="justify"><cite>"<Black&White>"</cite> Lobortis felis pede lorem diam Nam tellus ac porttitor eros wisi. Sed tincidunt libero consectetuer id lacus parturient quis. 32
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 33
Odrážkový seznam Hlavní element („kontejner“) (angl. unordered list) <ul> ….. </ul> Atribut: type="hodnota" Úvodní odrážka Hodnoty: disc - plná tečka (imlicitní) circle - prázdné kolečko square - čtvereček 34
Odrážkový seznam Položka seznamu (angl. list item) <li> ….. </li> 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 <li> Atribut: type="hodnota" Hodnoty: disc - plná tečka (imlicitní) circle - prázdné kolečko square - čtvereček 35
Odrážkový seznam <ul type="circle"> Příklady <ul type="circle"> <li>položka1</li> <li>položka2</li> <li>položka3 <ul> <li type="square">položka3 – a</li> </ul> </li> <li>položka4</li> 36
Uspořádaný seznam Hlavní element („kontejner“) (angl. ordered list) <ol> ….. </ol> 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í" 37
Uspořádaný seznam Položka seznamu (angl. list item) <li> ….. </li> 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í" 38
Uspořádaný seznam Příklad 1: <ol type="i" start="3"> <li>polozka1</li> <li type="1">polozka2</li> <li>položka3 <ul> <li>polozka3 – a</li> </ul> </li> </ol> 39
Uspořádaný seznam Příklad 2: <ol type="A" start="3"> <li>polozka1</li> <li type="1">polozka2</li> <li>položka3 <ul> <li>polozka3 – a</li> </ul> </li> </ol> 40
Uspořádaný seznam Příklad 3: <ol> <li>číslo 1.</li> <li value="30">číslo 30.</li> <li value="40">číslo 40.</li> <li>číslo 41.</li> </ol> 41
Úkol na procvičení Použijte stránku z předchozího úkolu vytvořte následující seznam: 42
Řešení úkolu vytvořte následující seznam: <ol type="a"> <li>Seznamy <ul> <li>neuspořádaný seznam</li> <li type="square">uspořádaný seznam</li> <li>seznam definic</li> </ul> </li> <li>Odkazy</li> <li>Záložky</li> </ol> 43