www.helpmark.cz

© Tomáš Herout

4. 1. 2015

1

Obsah prezentace » Jak naplánovat strukturu

» Vytvoření a provázání

» Co je to HTML a CSS » Co používat za nástroje

»

» Struktura a logika HTML

»

» DOCTYPE

»

» Hlavička (X)HTML

»

» Tělo (X)HTML

»

» Skupiny (X)HTML tagů

»

» Vztah mezi HTML a CSS

» » »

www.helpmark.cz

externího CSS souboru/ů Pravidla a logika CSS O selektorech O hodnotách O vlastnostech Ovlivnění vzhledu obsahu Tvorba layout CSS a různé prohlížeče Zásady validity HTML i CSS Užiteční pomocníci

© Tomáš Herout

4. 1. 2015

2

www.helpmark.cz

© Tomáš Herout

4. 1. 2015

3

Tři vrstvy webu

www.helpmark.cz

© Tomáš Herout

4. 1. 2015

4

Postup plánování Stanovení cílů webu (hlavní, vedlejší, postupové) 2. Vytvoření wireframe, neboli drátěný model rozmístění prvků, ale bez grafického provedení 1.

(rozmístění menu, sloupců…, reakce na návštěvníka…)

3.

Skica – oproti wireframe obsahuje i grafické prvky (pro HTML a CSS není zásadní)

www.helpmark.cz

© Tomáš Herout

4. 1. 2015

5

www.helpmark.cz

© Tomáš Herout

4. 1. 2015

6

Co je HTML a XHTML » HyperText Markup Language

Text se značkami (tagy) označujícími význam. Existuje od roku 1991 (verze 0.9), od 1999 verze 4.01. Dnes HTML5, ale stále ve vývoji. » Extensible HyperText Markup Language Totéž co HTML, ale přísnější pravidla • XHTML 1.0 Strict – relativně hodně striktní • XHTML 1.0 Transitional – dovoluje některé

zavržené prvky

www.helpmark.cz

© Tomáš Herout

4. 1. 2015

7

Co je to CSS » Cascading Style Sheets

určuje jak se budou zobrazovat prvky (X)HTML » Může být vkládán přímo do HTML, ale není to vhodné » V případě XHTML být vkládán do kódu nemá, avšak fungovat bude i vložený » Existují verze 1. 2. a 3.

www.helpmark.cz

© Tomáš Herout

4. 1. 2015

8

www.helpmark.cz

© Tomáš Herout

4. 1. 2015

9

Nástroje pro HTML a CSS » Aptana – zdarma editor HTML, CSS, PHP

i s dokončováním (našeptáváním) slov » PSPad – zdarma editor HTML, CSS, PHP… » Dreamweaver – placený špičkový editor » KompoZer – zdarma editor HTML a CSS (Slunečnice)

www.helpmark.cz

© Tomáš Herout

4. 1. 2015

10

www.helpmark.cz

© Tomáš Herout

4. 1. 2015

11

Ukázka HTML kódu <meta charset="utf-8"> …

Hlavní nadpis stránky

www.helpmark.cz

© Tomáš Herout

4. 1. 2015

12

Struktura (X)HTML » (X)HTML je určen výhradně pro strukturování dat » Skládá se z těchto hlavních částí • DOCTYPE který deklaruje použitou verzi • HTML jež začíná a končí • Hlavičky jež začíná a končí • Těla jež začíná a končí

» Data jsou označována tagy

např.:

Toto je hlavní nadpis

www.helpmark.cz

© Tomáš Herout

4. 1. 2015

13

Tagy, jejich parametry a hodnoty Uzavírací tag

Otevírací tag

odkaz Parametr

Hodnota

Parametr

Hodnota Ovlivněný text

Atribut

www.helpmark.cz

© Tomáš Herout

4. 1. 2015

14

www.helpmark.cz

© Tomáš Herout

4. 1. 2015

15

DOCTYPE není věda

Deklarace pro HTML5



Deklarace pro XHTML 1.0

» Deklaruje použitou verzi HTML a tím říká, jak má

prohlížeč kód interpretovat » Pokud nepoužijete DOCTYPE, budou se stránky interpretovat v nestandardní režimu www.helpmark.cz

© Tomáš Herout

4. 1. 2015

16

www.helpmark.cz

© Tomáš Herout

4. 1. 2015

17

Tagy pro hlavičku » » <meta> doplňuje informace o stránce • <meta name="description" content="popis" /> • <meta http-equiv="Content-Type"

content="text/html;charset=utf-8" /> • <meta scheme=„YYYY-MM-DD“ name="date" content="2012-10-01" /> (HTML 4.01)  www.helpmark.cz

© Tomáš Herout

4. 1. 2015

18

Důležité druhy META I. » name="description" – popis stránky, v SEO

nejmocnější nástroj  name="robots" – informace pro roboty

content= (index/noindex, follow/nofollow) » name="keywords" – klíčová slova pro

vyhledávače, dnes zbytečné » name="autor" – autor obsahu webu » http-equiv="Content-language" – nastaví třeba content="cs" (český obsah) www.helpmark.cz

© Tomáš Herout

4. 1. 2015

19

Důležité druhy META II.  http-equiv="Content-Type"

content="text/html;charset=utf-8" – určuje znakovou sadu  Můžete také přesměrovávat stránku, ukázka: <meta http-equiv="refresh" content="6;URL=http://helpmark.cz"> Počet sekund před přesměrováním

www.helpmark.cz

Adresa přesměrování

© Tomáš Herout

4. 1. 2015

20

www.helpmark.cz

© Tomáš Herout

4. 1. 2015

21

<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="robots" content="index, follow" /> <meta name="description" content="Nabízíme: školení, konzultace, návody pro Joomla/> <meta name="keywords" content="SEO, marketing, školení, webdesign, copywriting" /> <meta name="author" content="Tomas Herout" />

Toto je hlavní nadpis těla XHTML dolumentu

Odstavec textu dokumentu před zalomením
pokračování za zalomením

www.helpmark.cz

© Tomáš Herout

4. 1. 2015

22

www.helpmark.cz

© Tomáš Herout

4. 1. 2015

23

Seznam důležitých tagů » Texty –

<strong> <em>

1. 
   
   » Formuláře –
   <select> <br /> <br /> » Odkazy – <a><br /> <br /> » Skripty – <script><br /> <br /> » Obrázky – <img><br /> <br /> » Události – myši; klávesnice<br /> <br /> » Tabulky – <table> <tr> <th><br /> <br /> » Styly – <style><br /> <br /> <td><caption><br /> <br /> » Objekty – <object> <param><br /> <br /> www.helpmark.cz<br /> <br /> » Rámce – <iframe> » Oddíly – <div> <span> <hr><br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 24<br /> <br /> Texty a jejich tagy I. » <h1> – označuje nadpis číselné úrovně od <h1> až po <h6>, jedná se o párový tag, musí být tedy uzavřen<br /> <br /> » <p> – označuje odstavec textu, text se bude sám zarovnávat podle velikosti bloku nebo okna prohlížeče, je párový<br /> <br /> » <br /> – provádí „ruční“ zalomení textu v odstavci, nepárový » <strong> – zvýrazní tu část textu ve které se nachází, zobrazí jako tučné, pro vyhledávače znamená důležité, párový<br /> <br /> » <em> – mění text na kurzívu, párový » <cite> – označuje citaci v textu, párový<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 25<br /> <br /> Texty a jejich tagy II. » <code> – označuje část textu jako kód, měl by<br /> <br /> se zobrazit fontem „Courier“, párový » <abbr rel="nofollow"> – označuje zkratku, nemá vliv na vzhled, pokud to není nastaveno v CSS, párový » <address rel="nofollow"> – obsah označuje za adresu pro vyhledávače je to velmi užitečné, změní vzhled na kurzívu, ale to lze v CSS změnit, párový<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 26<br /> <br /> Texty a jejich tagy III. » <ul> – označuje začátek neuspořádaného<br /> <br /> seznamu, párový » <ol> – označuje začátek uspořádaného seznamu (1,2… a, b.…), párový, atributy: type= "1" "A" "a " "I" » <li> – označuje položky seznamu, párový <ol type="a"> <li> Položka seznamu </li> </ol> www.helpmark.cz<br /> <br /> a. Položka seznamu<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 27<br /> <br /> Odkazy relativní, absolutní » Odkaz se označuje tagem <a> » Má další atributy: • href=" " – mezi uvozovky se uvádí URL adresa buď relativní v případě vnitřního odkazu, nebo absolutní • title=" " – vytvoří bublinkovou nápovědu k odkazu • target=" " – označuje chování např. "_blanc" – nové okno | "_parent" – v nadřazeném rámci<br /> <br /> <a href="/odkaz.html" target="_blank" rel="nofollow">odkaz</a><br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 28<br /> <br /> Odkazy na kotvy » Kotva je odkaz uvnitř dané stránky<br /> <br /> <a href="/#kotva" rel="nofollow">odkaz</a>  Vytvoření kotvy – <a name="" rel="nofollow"></a> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionat//EN„ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> … </head> <body> <a name="kotva" rel="nofollow"></a><h1> Toto je hlavní nadpis těla XHTML dolumentu </h1> <p> Odstavec textu dokumentu před zalomením <br /> pokračování za zalomením </p> </body> </html><br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 29<br /> <br /> Obrázky » Tag <img> nepárový. Jeho atributy: • src=" " – URL adresa směřující na umístění obrázku<br /> <br /> • alt=" " – alternativní popis, důležité pro SEO a čtečky webů určené pro slepé • title=" " – titulek se zobrazí v „bublině“ nad obrázkem • width=" " – určuje šířku zobrazení obrázku v pixelech<br /> <br /> • height=" " – určuje výšku zobrazení obrázku v pixelech<br /> <br /> <img src="/obrazek.png" alt="popis" title="titulek" width="200" height="200" /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 30<br /> <br /> Tabulky I. » Nacházejí se mezi tagy <table> a </table> » Řádek se ohraničí <tr> a </tr> » Obsah buňky hlavičky ohraničuje <th> a </th> » Obsah buňky těla ohraničuje <td> a </td> » Parametr clospan slučuje buňky v řádku<br /> <br /> » Parametr rowspan slučuje buňky v sloupci<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 31<br /> <br /> Tabulky II. <table> <tr> <th> hlavička 1. sloupce </th> <th> hlavička 2. sloupce </th> </tr> <tr> <td> tělo 1. sloupce </td> <td> tělo 2. sloupce </td> </tr> <tr> <td clospan= "2"> buňka přes oba dva sloupce</td> </tr> </table><br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 32<br /> <br /> Objekty » Pomocí tagů <object> a </object> umístíte<br /> <br /> libovolný objekt do HTML » Atributy: • data="/flash.swf" (URL adresa objektu) • width="300" (šířka vyhrazená pro objekt) • height="400" (výška vyhrazená pro objekt) • type="application/x-shockwave-flash"(specifikuje<br /> <br /> druh objektu např. flash) » Parametry <param name="neco" value="neco"><br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 33<br /> <br /> Formuláře I. » Formuláře se skládají ze dvou částí • Formulář v HTML umístěný na webu<br /> <br /> • PHP skript provádějící např. odeslání mailu nebo<br /> <br /> uložení do databáze » Formuláře se umisťují mezi značky<br /> <br /> <form> a </form> » Do otevírací značky se uvádějí atributy: <form metod="post" action="/odeslani-formulare.php"> … </form> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 34<br /> <br /> Formuláře II. Tag <input> – pole pro text, tlačítka, volby… » Atributy: • name="nazev_pole" – název, který přiřadí<br /> <br /> k odeslaným datům • type="text" – druh pole • • • • • •<br /> <br /> text – běžné textové pole password – pole s maskovaným vstupem checkbox – zaškrtávací pole radio – přepínání mezi možnostmi (nelze dvě) submit – potvrzovací tlačítko reset – tlačítko na vymazání obsahu…<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 35<br /> <br /> Formuláře III. • type="text" (pokračování) • image – grafické tlačítko na odeslání s možností odeslat souřadnice • button – tlačítko ovládané pomocí skriptů • file – otevře dialog pro výběr souboru určeného k odeslání • hidden – používá se pro přenesení nezobrazených informací • maxlength – definuje číslem max. počet znaků<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 36<br /> <br /> Formuláře VI. Tag <textarea> – víceřádkové pole pro text » Atributy: • Name="" (název, který přiřadí k odeslaným datům) • Rows="" (výška pole) • Cols="" (šířka pole)<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 37<br /> <br /> Formuláře V. Tag <select> – pole pro výběr z možností » Atributy: • Name= "" (název, který přiřadí k odeslaným datům) • size= "1" (číselná hodnota udávající velikost pole,<br /> <br /> pokud je hodnota "1" vytvoří se roletka) • multiple="" (umožní zvolit více možností) <select name="polozky" multiple size="2"> <option> první </option> … </select> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 38<br /> <br /> Skripty v HTML Nejčastěji se používá JavaScript, který se uzavírá mezi tagy <script> a </script> » Atribury • type="" (identifikace jazyka) • src= "/script.js" (URL adresa externího skriptu)<br /> <br /> <script type="text/javascript"> … </script><br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 39<br /> <br /> Události <a href="/něco.html" rel="nofollow"> <img src="/obr.png" onmouseover="this.src= '/obr_a.jpg'; "onmouseout="this.src='/obr.jpg'; "> </a> » onmouseover – při najetí myší na prvek » onmouseout – při opuštění prvku myší<br /> <br /> » onclick – při kliknutí » ondbclick – při dvojitém kliknutí » onsubmit – před odesláním formuláře www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 40<br /> <br /> Události <a href=„/něco.html“ rel="nofollow"> <img src="/obr.png" onmouseover="this.src= '/obr_a.jpg'; "onmouseout="this.src='/obr.jpg'; "> </a> » onmouseover – při najetí myší na prvek » onmouseout – při opuštění prvku myší<br /> <br /> » onclick – při kliknutí » ondbclick – při dvojitém kliknutí » onsubmit – před odesláním formuláře www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 41<br /> <br /> Styly » Umožní vložit styl přímo do HTML – nevhodné !!! » Používá se atribut style=""<br /> <br /> <p style="color: #ff9900; background-color: #ffff00"> … </p><br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 42<br /> <br /> Rámce Do HTML umožní umístit obsah z jiného umístění » Atributy • src="http://…" (URL adresa zdroje) • width="300" (šířka vyhrazená pro objekt) • height="400" (výška vyhrazená pro objekt)<br /> <br /> <iframe src="http://... " width="200" height="100"> Alternativní text pro případ nezobrazení obsahu iframe </iframe><br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 43<br /> <br /> Oddíly » <div> – označení bloku » <span> – označení části uvnitř bloku » <hr> – oddělení stránky<br /> <br /> Pouze v HTML5 » <nav> – blok určený pro navigační odkazy » <section> – označení bloku kapitoly stránky » <header> – záhlaví stránky, nadpis, pretext… » <footer> – doprovodné informace k článku www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 44<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 45<br /> <br /> Styly vzhledu v HTML Styly zapsané přímo v HTML pro každý tag samostatně 2. Označení HTML tagů a vytvoření stylů v záhlaví HTML dokumentu 3. Samostatný externí CSS soubor (doporučeno) 1.<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 46<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 47<br /> <br /> Jak na externí CSS soubor Vytvořte soubor s příponou *.css 2. Do hlavičky HTML vložte odkaz na tento soubor 1.<br /> <br /> <html><br /> <br /> <head><br /> <br /> <link href="/styly.css" rel="stylesheet" type="text/css"> … </head> <body> … </body> </html><br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 48<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 49<br /> <br /> Popis struktury CSS Selektor<br /> <br /> Vlastnost<br /> <br /> h1 { color: #FF0000; font-size: 24px; }<br /> <br /> Hodnota Deklarace vlastnosti<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 50<br /> <br /> Základní pravidla CSS I. » Styly se dědí podle kaskádovosti » Různé zápisy mají různou sílu dle specifičnosti 1. řádkový styl 2. identifikátor 3. třída 4. univerzální selektor<br /> <br /> »<br /> <br /> <p style="color: red"> </p> <div id="neco"> CSS #neco { } <div class="neco"> CSS .neco { } <p> </p> CSS p { }<br /> <br /> Čím specifičtější, tím vyšší síla slabší #neco; silnější div#neco; ještě silnější div#neco .neco2 www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 51<br /> <br /> Základní pravidla CSS II. » Některé styly se dědí od rodičů ve struktuře<br /> <br /> HTML. Rodič předává své vlastnosti dítěti » Mezery v zápisu jsou ignorovány » Každá deklarace musí být oddělena středníkem<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 52<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 53<br /> <br /> Druhy selektorů Obecný selektor platí na druhy tagů (např.:*, h1, p, img, a…) zápis: h1 {color: red;…} 2. Selektor třídy lze používat opakovaně (např.: <div class="cervena">) zápis: .cervena {color: red;…} 3. Selektor id lze použít jen jednou (větší síla) (např.: <div id="cervena">) zápis: #cervena {color: red;…} 1.<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 54<br /> <br /> Způsoby zápisu I. » Jednoduchý:<br /> <br /> h1 {color: red;…}<br /> <br /> element {vlastnost:hodnota;…} » Vícenásobný: element1, element2, … {vlastnost:hodnota;…}<br /> <br /> h1, h2, h3 {color: red;…} » Rodičovský bez sledování hloubky:<br /> <br /> element_rodic element_potomka {deklarace}<br /> <br /> div.obsah h1 {color: red;…} www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 55<br /> <br /> Způsoby zápisu II. » Rodičovský pouze v přímém vztahu:<br /> <br /> element_rodice > element_potomka {deklarace}<br /> <br /> div.obsah > h1 {color: red;…}  Sourozenecký sousedící:<br /> <br /> element_soused + element_soused {deklarace}<br /> <br /> h1 + p {color: black;…}<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 56<br /> <br /> Způsoby zápisu III. » Selektor podmíněný parametry:<br /> <br /> element [parametr] {vlastnost:hodnota;…}<br /> <br /> a [title="titulek"] {color: red;…}  Selektor pseudotřídy:<br /> <br /> element:pseudotřída {deklarace}<br /> <br /> a:hover {color: red;…}<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 57<br /> <br /> Některé pseudotřídy » hover – aktivuje se v případě umístění kurzoru » link – působí pouze na nenavštívené odkazy » visited – působí pouze na navštívené odkazy » active – reaguje na kliknutí a držení tl. myši » first-line – aplikuje se pouze na první řádek<br /> <br /> » lang – ovlivňuje pouze určený jazyk (en)<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 58<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 59<br /> <br /> O některých hodnotách Rozměry<br /> <br /> Barvy<br /> <br /> » px – pixely (body)<br /> <br /> » hexadecimální<br /> <br /> » em – šířka velkého M<br /> <br /> #FF0000 » RGB 0 až 255 rgb(255, 0, 0) » RGB v poměru rgb(100%, 0%, 0%) » textem red, white, black…<br /> <br /> » ex – šířka malého x » mm – milimetry » cm – centimetry<br /> <br /> » % – poměrná hodnota<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 60<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 61<br /> <br /> Skupiny vlastností » Text – color, font, text, letter-spacing, line-height » Rozměry – width, height » Box – border, padding, margin, overflow, display » Umístění – position, top, right, bottom, left, float,<br /> <br /> clear, z-index » Pozadí a barvy – background, opacity » Seznamy – list-style, counter » Ostatní – cursor<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 62<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 63<br /> <br /> Ukázka ovlivnění obsahu h1, h2, p { font-family: Arial, Helvetica, sans-serif; font-size: 11pt; color: #333333; } #nazev h1 { line-height: 1.5; margin: 5px 0; }<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 64<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 65<br /> <br /> <div id= "telo" style="width: 900px ; height: auto; margin: 0 auto"><br /> <br /> <div id="hlavicka" style="width: 800px ; height: 50px; margin: 100px 49px 3px 49px"> </div> <div id= "l_sloupec" style="width: 200px; height: auto; margin: 3px auto 3px 49px; float: left"> </div><br /> <br /> <div id= "p_sloupec" style="width: 400px; height: auto; margin: 3px 49px 3px auto; float: right"> </div><br /> <br /> <div class= "neobtekat" style= "clear: both"> </div> <p> Nějaký obsah článku </p> </div><br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 66<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 67<br /> <br /> Prohlížeče Nejčastěji používané prohlížeče » Chrome – možnost ve verzi portable » Internet Explorer – problém s testováním a instalací více verzí na jednom PC » Mozilla Firefox – možnost ve verzi portable » Opera – možnost ve verzi portable<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 68<br /> <br /> Metody úprav pro prohlížeče Speciální CSS soubory pro daný prohlížeč<br /> <br /> 1.<br /> <br /> <head> …<br /> <br /> <!--[if lte IE 6]> <link href="/ieonly.css" rel="stylesheet" type="text/css" /><br /> <br /> <![endif]--> </head><br /> <br /> Hacky pro IE<br /> <br /> 2. • •<br /> <br /> !important – tomuto nerozumí IE6 a nižší *html – tomuto rozumí jen IE6 a nižší<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 69<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 70<br /> <br /> Validátory Validace HTML http://validator.w3.org/ Validace CSS http://jigsaw.w3.org/css-validator/<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 71<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 72<br /> <br /> SW aplikace a rozšíření » PSPad – zdarma editor HTML, CSS, PHP… » Dreamweaver – placený špičkový editor » KompoZer – zdarma editor HTML a CSS<br /> <br /> (Slunečnice)<br /> <br /> » Web developer – sledování prvků webu (FF i CH) » Firebug – rozšíření pro Firefox na zkoumání kódu<br /> <br /> » IE tester – aplikace na testování verzí IE » Wamp server – samoinstalace Apach a MySQL<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 73<br /> <br /> Doporučená literatura » HTML, XHTML a CSS – Computer Press » Kapesní přehled CSS – Computer Press » CSS finty, hacky a pokročilé postupy –<br /> <br /> Zoner Press<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 74<br /> <br /> www.helpmark.cz<br /> <br /> © Tomáš Herout<br /> <br /> 4. 1. 2015<br /> <br /> 75<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/toma-herout8fcb545bdbce3f658f4488e8f1312d3525825" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "Tomáš Herout"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;">