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

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

Připomenutí z minula <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <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 # č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.
   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, <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>

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í </big>, odpadá hodina ze SIAPu</p> Přeškrtnuté písmo (angl. striked) <s>toto už neplatí</s>

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= 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

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

Podobné prezentace

Prezentace na téma: "14SIAP – SÍTĚ A PROTOKOLY Hodina 2.."— Transkript prezentace:

Podobné prezentace

O projektu

Kontaktní formulář

Přihlásit se

Přihlásit se přes sociální síť:

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

Podobné prezentace

Prezentace na téma: "14SIAP – SÍTĚ A PROTOKOLY Hodina 2.."— Transkript prezentace:

Podobné prezentace

O projektu

Kontaktní formulář