1 / 42

Hodina 2.

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>

phila
Download Presentation

Hodina 2.

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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>

  3. BODY - atributy <body background="obrazek.gif" bgcolor="yellow" text="blue" link="green" vlink="olive" alink="#FF0000">

  4. 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)

  5. Poznámky v dokumentu • Je dobré používat poznámky. • <!-- poznámka --> • <!-- poznámka na 1. řádku poznámka na dalším řádku --> • <!-- poznámka na 1. řádku <!-- vložená poznámka --> poznámka na dalším řádku --> • 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 <!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>

  8. Mezery v HTML kódu a v prohlížeči <p>Folder Crypt je naprvnípohledjednoduchá aplikace, kterámá ale velkýbezpečnostní potenciál. </p>

  9. "Speciální" znaky PSpad – Nástroje / ASCII tabulka

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

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

  12. 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".

  13. Blokové elementy • Oddíl (angl. division) • <div>obsah</div> • Před a za oddílem se zalomí řádek. • Je velmi podobný odstavci (<p> … </p>). Narozdí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>

  14. 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>

  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: • <h1 align="center">Dopravní prostředky</h1>

  16. 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>

  17. 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">

  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. <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">

  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. <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> <p align="justify">Lobortis felis pede lorem diam Nam tellus ac porttitor eros wisi. Sed tincidunt libero consectetuer id lacus parturient quis. </p>

  21. Řá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áselogickourolíformátovanéhotextu (asi výjimka <sup> a <sub>). • Logické formátování • Logické formátování určuje význam textu,neříká, jakmávymezený text vypadat.

  22. Řá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>

  23. Řá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>

  24. Řá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>

  25. Ú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. </p>

  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.

  29. Řá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>

  30. Ú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

  31. Ř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>"&lt;Black&amp;White&gt;"</cite> Lobortis felis pede lorem diam Nam tellus ac porttitor eros wisi. Sed tincidunt libero consectetuer id lacus parturient quis. </p>

  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 • Příklady <ul type="circle"> <li>položka1</li> <li>položka2</li> <li>položka3 <ul> <litype="square">položka3 – a</li> </ul> </li> <li>položka4</li> </ul>

  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>

More Related