Tomáš Herout

Transkript

1

2 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

3

4 Tři vrstvy webu

5 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í)

6

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

8 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 a

9

10 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)

11

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

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

14 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

15

16 DOCTYPE není věda <!doctype html > Deklarace pro HTML5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 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

17

18 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=" " /> (HTML 4.01) <link rel="stylesheet" href="/styl.css" type="text/css" />

19 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)

20 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= Počet sekund před přesměrováním Adresa přesměrování

21

22 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionat//EN " <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>

23

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

25 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ý

26 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ý

27 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

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

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

30 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" />

31 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

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

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

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

35 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

36 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ů

37 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)

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

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

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

41 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

42 Styly» Umožní vložit styl přímo do HTML nevhodné!!!» Používá se atribut style="" <p style="color: #ff9900; background-color: #ffff00"> </p>

43 Rámce Do HTML umožní umístit obsah z jiného umístění» Atributy src=" " (URL adresa zdroje) width="300" (šířka vyhrazená pro objekt) height="400" (výška vyhrazená pro objekt) <iframe src=" " width="200" height="100"> Alternativní text pro případ nezobrazení obsahu iframe </iframe>

44 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

45

46 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)

47

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

49

50 Popis struktury CSS Selektor Vlastnost h1 { } color: #FF0000; font-size: 24px; Hodnota Deklarace vlastnosti

51 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 { }

52 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

53

54 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; }

55 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; }

56 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; }

57 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; }

58 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)

59

60 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

61

62 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

63

64 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; }

65

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

67

68 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

69 Metody úprav pro prohlížeče 1. Speciální CSS soubory pro daný prohlížeč <head>  </head> 2. Hacky pro IE!important tomuto nerozumí IE6 a nižší *html tomuto rozumí jen IE6 a nižší

70

71 Validátory Validace HTML Validace CSS

72

73 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

74 Doporučená literatura» HTML, XHTML a CSS Computer Press» Kapesní přehled CSS Computer Press» CSS finty, hacky a pokročilé postupy Zoner Press

75