4. 1. 2015 1
Obsah prezentace» Jak naplánovat strukturu» 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» Vytvoření a provázání 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 4. 1. 2015 2
4. 1. 2015 3
Tři vrstvy webu 4. 1. 2015 4
Postup plánování 1. 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í (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í) 4. 1. 2015 5
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 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. 4. 1. 2015 8
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) 4. 1. 2015 10
4. 1. 2015 11
Ukázka HTML kódu <!DOCTYPE html> <html lang="cs" dir="ltr"> <head> <meta charset="utf-8"> </head> <body> <h1> Hlavní nadpis stránky </h1> </body> </html> 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á <html> a končí </html> Hlavičky jež začíná <head> a končí </head> Těla jež začíná <body> a končí </body>» Data jsou označována tagy např.: <h1> Toto je hlavní nadpis </h1> 4. 1. 2015 13
Tagy, jejich parametry a hodnoty Otevírací tag Uzavírací tag <a href= "odkaz.html" target="_blank" >odkaz</a> Parametr Hodnota Parametr Hodnota Atribut Ovlivněný text 4. 1. 2015 14
4. 1. 2015 15
DOCTYPE není věda <!doctype html > Deklarace pro HTML5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> 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 4. 1. 2015 16
4. 1. 2015 17
Tagy pro hlavičku» <title> vkládá titulek stránky, který se zobrazí ve vyhledávačích a záhlaví okna prohlížeče </title>» <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) <link rel="stylesheet" href="/styl.css" type="text/css" /> 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) 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 Adresa přesměrování 4. 1. 2015 20
4. 1. 2015 21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionat//EN "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="robots" content="index, follow" /> <title>školení, konzultace, tvorba webu a obsahu - HelpMark</title> <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" /> </head> <body> <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> 4. 1. 2015 22
4. 1. 2015 23
Seznam důležitých tagů» Texty <h1> <p> <strong> <em> <cite> <code> <abbr> <address> <ul> <ol> <li>» Odkazy <a>» Obrázky <img>» Tabulky <table> <tr> <th> <td><caption>» Objekty <object> <param>» Formuláře <form> <imput> <select> <option> <textarea>» Skripty <script>» Události myši; klávesnice» Styly <style>» Rámce <iframe>» Oddíly <div> <span> <hr> 4. 1. 2015 24
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» <p> označuje odstavec textu, text se bude sám zarovnávat podle velikosti bloku nebo okna prohlížeče, je párový» <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ý» <em> mění text na kurzívu, párový» <cite> označuje citaci v textu, párový 4. 1. 2015 25
Texty a jejich tagy II.» <code> označuje část textu jako kód, měl by se zobrazit fontem Courier, párový» <abbr> označuje zkratku, nemá vliv na vzhled, pokud to není nastaveno v CSS, párový» <address> 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ý 4. 1. 2015 26
Texty a jejich tagy III.» <ul> označuje začátek neuspořádaného 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> a. Položka seznamu 4. 1. 2015 27
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 <a href="/odkaz.html" target="_blank" >odkaz</a> 4. 1. 2015 28
Odkazy na kotvy» Kotva je odkaz uvnitř dané stránky <a href="/#kotva">odkaz</a> Vytvoření kotvy <a name=""></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"></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> 4. 1. 2015 29
Obrázky» Tag <img> nepárový. Jeho atributy: src=" " URL adresa směřující na umístění obrázku 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 height=" " určuje výšku zobrazení obrázku v pixelech <img src="/obrazek.png" alt="popis" title="titulek" width="200" height="200" /> 4. 1. 2015 30
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» Parametr rowspan slučuje buňky v sloupci 4. 1. 2015 31
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> 4. 1. 2015 32
Objekty» Pomocí tagů <object> a </object> umístíte 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 druh objektu např. flash)» Parametry <param name="neco" value="neco"> 4. 1. 2015 33
Formuláře I.» Formuláře se skládají ze dvou částí Formulář v HTML umístěný na webu PHP skript provádějící např. odeslání mailu nebo uložení do databáze» Formuláře se umisťují mezi značky <form> a </form>» Do otevírací značky se uvádějí atributy: <form metod="post" action="/odeslani-formulare.php"> </form> 4. 1. 2015 34
Formuláře II. Tag <input> pole pro text, tlačítka, volby» Atributy: name="nazev_pole" název, který přiřadí k odeslaným datům type="text" druh pole 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 4. 1. 2015 35
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ů 4. 1. 2015 36
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) 4. 1. 2015 37
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, 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> 4. 1. 2015 38
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) <script type="text/javascript"> </script> 4. 1. 2015 39
Události <a href="/něco.html"> <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ší» onclick při kliknutí» ondbclick při dvojitém kliknutí» onsubmit před odesláním formuláře 4. 1. 2015 40
Události <a href= /něco.html > <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ší» onclick při kliknutí» ondbclick při dvojitém kliknutí» onsubmit před odesláním formuláře 4. 1. 2015 41
Styly» Umožní vložit styl přímo do HTML nevhodné!!!» Používá se atribut style="" <p style="color: #ff9900; background-color: #ffff00"> </p> 4. 1. 2015 42
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) <iframe src="http://... " width="200" height="100"> Alternativní text pro případ nezobrazení obsahu iframe </iframe> 4. 1. 2015 43
Oddíly» <div> označení bloku» <span> označení části uvnitř bloku» <hr> oddělení stránky 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 4. 1. 2015 44
4. 1. 2015 45
Styly vzhledu v HTML 1. 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) 4. 1. 2015 46
4. 1. 2015 47
Jak na externí CSS soubor 1. Vytvořte soubor s příponou *.css 2. Do hlavičky HTML vložte odkaz na tento soubor <html> <head> <link href="/styly.css" rel="stylesheet" type="text/css"> </html> </head> <body> </body> 4. 1. 2015 48
4. 1. 2015 49
Popis struktury CSS Selektor Vlastnost h1 { } color: #FF0000; font-size: 24px; Hodnota Deklarace vlastnosti 4. 1. 2015 50
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» Čím specifičtější, tím vyšší síla slabší #neco; silnější div#neco; ještě silnější div#neco.neco2 <p style="color: red"> </p> <div id="neco"> CSS #neco { } <div class="neco"> CSS.neco { } <p> </p> CSS p { } 4. 1. 2015 51
Základní pravidla CSS II.» Některé styly se dědí od rodičů ve struktuře 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 4. 1. 2015 52
4. 1. 2015 53
Druhy selektorů 1. 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; } 4. 1. 2015 54
Způsoby zápisu I.» Jednoduchý: element {vlastnost:hodnota; }» Vícenásobný: element1, element2, {vlastnost:hodnota; } h1, h2, h3 {color: red; }» Rodičovský bez sledování hloubky: element_rodic element_potomka {deklarace} div.obsah h1 {color: red; } h1 {color: red; } 4. 1. 2015 55
Způsoby zápisu II.» Rodičovský pouze v přímém vztahu: element_rodice > element_potomka {deklarace} div.obsah > h1 {color: red; } Sourozenecký sousedící: element_soused + element_soused {deklarace} h1 + p {color: black; } 4. 1. 2015 56
Způsoby zápisu III.» Selektor podmíněný parametry: element [parametr] {vlastnost:hodnota; } a [title="titulek"] {color: red; } Selektor pseudotřídy: element:pseudotřída {deklarace} a:hover {color: red; } 4. 1. 2015 57
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» lang ovlivňuje pouze určený jazyk (en) 4. 1. 2015 58
4. 1. 2015 59
O některých hodnotách Rozměry» px pixely (body)» em šířka velkého M» ex šířka malého x» mm milimetry» cm centimetry» % poměrná hodnota Barvy» hexadecimální #FF0000» RGB 0 až 255 rgb(255, 0, 0)» RGB v poměru rgb(100%, 0%, 0%)» textem red, white, black 4. 1. 2015 60
4. 1. 2015 61
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, clear, z-index» Pozadí a barvy background, opacity» Seznamy list-style, counter» Ostatní cursor 4. 1. 2015 62
4. 1. 2015 63
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; } 4. 1. 2015 64
4. 1. 2015 65
<div id= "telo" style="width: 900px ; height: auto; margin: 0 auto"> <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> <div id= "p_sloupec" style="width: 400px; height: auto; margin: 3px 49px 3px auto; float: right"> </div> <div class= "neobtekat" style= "clear: both"> </div> </div> <p> Nějaký obsah článku </p> 4. 1. 2015 66
4. 1. 2015 67
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 4. 1. 2015 68
Metody úprav pro prohlížeče 1. Speciální CSS soubory pro daný prohlížeč <head> <!--[if lte IE 6]> <link href="/ieonly.css" rel="stylesheet" type="text/css" /> <![endif]--> </head> 2. Hacky pro IE!important tomuto nerozumí IE6 a nižší *html tomuto rozumí jen IE6 a nižší 4. 1. 2015 69
4. 1. 2015 70
Validátory Validace HTML http://validator.w3.org/ Validace CSS http://jigsaw.w3.org/css-validator/ 4. 1. 2015 71
4. 1. 2015 72
SW aplikace a rozšíření» PSPad zdarma editor HTML, CSS, PHP» Dreamweaver placený špičkový editor» KompoZer zdarma editor HTML a CSS (Slunečnice)» Web developer sledování prvků webu (FF i CH)» Firebug rozšíření pro Firefox na zkoumání kódu» IE tester aplikace na testování verzí IE» Wamp server samoinstalace Apach a MySQL 4. 1. 2015 73
Doporučená literatura» HTML, XHTML a CSS Computer Press» Kapesní přehled CSS Computer Press» CSS finty, hacky a pokročilé postupy Zoner Press 4. 1. 2015 74
4. 1. 2015 75