Kapitola 1: Základní stránka HTML

- sémantický jazyk - popisuje obsah.
- až 100 elementů, ale používá se zlomek z nich
- elementy - popisují se značkami, párové vs. nepárové (u nepárových není nutno používat lomítka, ale držet se způsobu).

- head - hlavička, skryté, až na title = zobrazuje se v záhlaví.
- body - obsah stránky (viditelný).
- meta charset="UTF-8" - nastavení UTF-8 (v head).

- article - výrazný kus textu.
- img - src = odkaz, width = šířka, height = výška, alt = alternativní text, když není obr. k dispozici. Povinný.
MP: HREF - Hyperlink Reference (odkazy na stránku), SRC - Source (zdroj - obrázky, video, soubory... viz TeamTreeHouse.
- a - href = odkaz (hypertext reference), rel - external => externí stránka, title = popisek.
- p = odstavec, normální písmo, b = tučné, i = kurzíva, em = důraz (bývá kurzíva), h1 = nadpis (h1 - h6).
- small - malé písmo (např. zákony apod.).
- Entity.

Kapitola 3: Základní struktura dokumentu HTML

Každý dokument HTML by měl obsahovat: DOCTYPE (definice typu dokumentu), html lang (cs), head, meta (specifikace znakové sady), title, body.

- Nadpisy h1 - h6. Nadpisům lze taktéž přiřadit lang. Problém s h1 vs. article a section. => Vyřešeno v CSS, viz ITnetwork.
- hgroup - seskupení nadpisů.
- header - záhlaví, role="banner" - záhlaví...
- section - sekce...
- nav - povídá, že se jedná o hlavní nabídku na stránce (nepoužívat pro všechny).
- ul (ještě ol = uspořádaný) - seznam; li - řádka v seznamu.
MP: změna odrážky - ul type="" a výběr disc, square, circle, A, a, i, I, 1.
- id - možnost použití na více místech, např. article, section. Pak na ně lze odkazovat.
- aside - postranní panel, může být kdekoliv

4 hlavní elementy z kategorie rozdělující obsah: header, article, aside, footer.

- footer - zápatí.
- div - obecně obalující element. Zabalení např. celé stránky => pozadí v CSS...; více sloupců. Obaluje celé bloky.
- span - také bez vlastního významu, uvnitř odstavců. Slova, fráze.

ARIA

Pro lepší předčítání textu.
- role="banner" - oblast s obsahem týkajícím se celé stránky, např. logo, info o sponzorech, vyhledávací nástroj. Většinou záhlaví
- role="navigation" - skupina navigačních elementů (odkazů). Možno použít vícekrát.
- role="main" - hlavní část s obsahem. Často div, ale může bát i article, section. Až na vyjímky použit jedenkrát.
- role="complementary" - podpůrná část, ale má i samostatný význam. Např. pro postranní panely aside nebo div s doplňujícími informacemi.
- role="contentinfo" - informace o rodičovském dokumentu. Copyright, odkazy na prohlášení o ochraně soukromí => zápatí.
(- form - k elementům form; search - vyhledávací formuláře.)

- class - třída. Použítí: CSS, ale vznikla kvůli mikroformátům viz. Microformats.org. Pokusit se používat pro lepší sémantiku.
- title - textová nápověda. Při najetí kurzoru se zobrazí. Umí i předčítače textu. IE a dřívější prohlížeče čtou i alt u obrázků.
- <!-- --> - komentáře v dokumentu HTML. Krom komentářů i skrytí kódu. CSS - /* */, JavaScript //.

Kapitola 4: Text

- cite - citace um. díla. Kurzíva.
- code - zapisování kodu ze skriptu nebo programu (neproporciální písmo).
- address - adresa autora, lidí nebo společnosti, co má s HTML stránkou něco společného. Vytvoří odstavec
- figure - samostatný kus obsahu. figcaption - popis. Může obsahovat např. h1-h6, ale nezobrazuje se v osnově.
- time - čas, datetime - atribut. pubdate - čas publikování článku...
- strong - důležitý text (em - mírný důraz). Moc nepoužívat b a i.
- blockquote - citace (delší kus, nová řádka - použít odstavec / element. Rozdělující kořen.), q - kratší citace i uvnitř věty. Atribut cite (nezaměňovat s elementem) - specifikace umístění. Doplnit lang (liší - li se, určuje druh závorek).
- mark - zvýrazňovač: vyhledávač, v citaci, fragment zdrojového kódu.
- abbr - vyznačení zkratek + title i s popisem (podtrhne se). Pozor na smartphony a tablety. Nahradilo dřívější acronym.
- dfn - definice termínu. Obaluje se pouze termín, nikoliv definice, přičemž definice musí být ve stejném odstavci.
- sup - horní index, sub dolní index. Rozhodí řádkování. Oprava v CSS: GitHubGist.
- Sledování změn textu: del - smazání, ins přídání nového a také s nepřesný nebo nepodstatný obsah. Atributy datetime a cite.
- Elementy týkající se výpočetní techniky: kbd - uživatelský vstup; samp - ukázkový výstup; var - proměnná. math - matematické výrazy.
- pre - předformátovaný text (původní zalomení řádků a mezery).
- br - zalamování.
- wbr - přiležitost pro zalomení => nezalamuje se, jen kdyby se potřeboval zalomit... (dlouhá slova, URL, atd.)
- u - dříve podtržení. Dnes "záměrná chyba", třeba i v cizím jazyce. Vhodné změnit v CSS podtržení (záměna s odkazy).
- ruby - výslovnost východní asijské jazyky; dir="rtl" - text zpravda doleva; bdi, bdo - jazyky zprava doleva...
- meter + hodnota value 0 - 1. Výsledek: 80%. Možnost definovat hodnoty low, optimum, high.
- progress - jako meter Zkouška 50%. Lepší ale mít dynamické hodnoty (na rámec knihy HTML). Atributy: max, value, form.

Kapitola 5: Obrázky

Nejrozšířenější formáty na webu: *.gif, *.png, *.jpeg (ztrátovy).
Komprese - *.jpeg. Průhlednost, animace - *.gif, *.png - i částečná průhlednost.
Creative Commons (odkaz na Wikipedii) - nezisková organizace, možný zdroj pro obrázky. I přes Google (Rozšířené vyhledávání => licence...). Uvádět autora. Volné dílo: CC0, Public Domain.
...Programy pro tvorbu webové grafiky...

- border="n" - n = šířka rámečku v pixelech. Zastaralé. Možno použít "0", ale i tak je lepší v CSS.

Favicon

- ikona na oblíbené položky.
- 16 x 16 pixelů, 114 x 114 pixelů pro Apple (*.png)
<link rel="shorcut icon" href="favicon.ico"> popř. jiný formát(png): <link rel="icon" type="image/png" href="favicon.ico">; Apple: <link rel="apple-touch-icon" href="/apple-icon.png">

Kapitola 6: Odkazy

Možno obalovat téměř jakýkoliv element (třeba interaktivní ne).
Relativní adresy - stejný web. Absolutní - jiné servery.
- atribut rel - viz. Mikroformats.org - existing rel values. Dobrovolné.
- rel="external" - používat alespoň toto, odkaz na jiný server.
- tabindex - pro pořadí při ovládání Tabem. Zastaralé, raději nepoužívat.
- target="nazev_okna" - otevření v novém okně. Ale raději nepoužívat, bere uživatelům jejich svobodu v prohlížení, či je může zmást (páč to neumí). target="_blank" - pokaždé nové okno. Hodí se ale u iframe (vnořené plovoucí rámy).
Obrazové mapy - hledat v Google.
- Kotvy - odkaz někde na stránce. href="#sekce1", přičemž musíme indetifikovat sekci v id. Je - li kotvy v jiném dokumentu, tak href="dokument.html#sekce1"
Při odkazech na soubor je vhodné poukázat na to, co je to za soubor a jak je velký.
Vhodné komprimovat. Také náhledy obrázků...

Kapitola 7: Stavební kameny kaskádových stylů

CSS - Cascading Style Sheet.
1. Selektor - určuje, jaký element.
2. Deklarační blok - vlastnosti, hodnoty. Uzavírá se složenými závorkami { }. Více vlastnostní se odděluje středníkem ;.
Oboje - deklarace.
- komentáře - /* */
- Dědičnost: ne všechny vlastnosti se dědí. Ale mohou pomocí inherit. Specifičnost: čím přesnější je selektor, tím je důležitější pravidlo stylu. id přesnější než class.
- float - obtékání: left, right, none.
- délka - velikost + jednotka. 3em, 10px. em odpovídá standartní velikosti písma. pt - bod, pro tisk. % - procenta.

Barvy

- RGB: color: rgb(89, 0, 127) - podíly barvy v rozmezí 0 - 255 (či procenta). BARVA.
- Šestnáctková soustava: color: #59007f (59 = 89; 7f = 127). Možno krátit: #ff3344 => #f34.
- rgba(89, 0, 127, 0.5) - průhlednost (0 - 1).
- HSL, HSLA: hue, saturation, lightness (odstín 0 - 360, saturace 0 - 100, světlost 0 - 100).

Kapitola 8: Práce s kaskádovými styly

Na šablonu lze odkázat nebo importovat. Ale raději odkázat...
- @charset "UTF-8" - dávat raději všude. Dobré při používání znaky mimo ASCII.
- Odkázání: v head - link rel="stylesheet" href="nazev.css". Více šablon v kolizi - vyhraje nahrané dýl.
- Použítí CSS přímo v HTML dokumentu - style v head.
- Použítí style přímo u elementu. Velmi nevhodné.
- @import - importuje. Přebije všechny. Ale !important vyhraje vždycky.
- Možno specifikovat i jen pro média, tisk... media="screen" u link. screen, print, all a další.
- Alternativní šablony: více, např. uživatel si může volit. Přidáme do link title="popisek". Alternativní šablonu ještě označime rel=alternate stylesheet. Přepínání v prohlížeči, nebo najít "style sheet switcher".

Kapitola 9: Definování selektorů

Až pět různých kritérií: název, kontext, class/id, pseudotřída, atributy/hodnoty.
- * - zástupný znak, všechny elementy...
- třída: .nazev_tridy {} / h1.trida - ovlivní třídu.
- Předek, potomek... i pro více generací. Také Předek > potomek pro přímé dědictví (vynechá např. section navíc).
- first-child - pseudotřída, pouze první potomek...
- sourozenecký element, znak +. Bezprostředně předchází hledanému elementu. Přímo následují... (pozn. br se také počítá)
- obecný sourozenecký element - ~. Př. h1~h2: h2, pokud mu předchází h1 (nemusí být ale sousední).
- část elementu - first-line, např. p:first-line. first-letter (interpunkční znaménko?).
- Odkazy: a:prikaz, link nenavštívené, visited navštívené, focus zaměření (Tab), hover najetí kurzoru, active zrovna se aktivuje. Nejlépe v tomto pořadí (Lenka vítá Frantu hodně aktivně). Vyrobeno na zkoušku.
- p:hover změna odstavce při najetí...
- element dle atributů element[atribut]. ="hodnota" (přesně), ~="hodnota" (+ i další hodnoty, oddělené mezerou), |="hodnota" buď přesně odpovídá, nebo jím začíná, ^="hodnota" musí začínat, $="hodnota" musí končit, *="hodnota" musí obsahovat alespoň jeden výskyt (nemusí se jednat o kompletní slovo).
- lze spojit element[hodnota1] [hodnota2].
Více selektorů - oddělíme čárkou.
- MP: příklady zápisu selektorů JakPsatWeb.

Kapitola 10: Formátování textu pomocí stylů

- body {font-family: "font"} - rodina písma. Více slov: uvozovky, apostrofy.
- Přehled fontů pro Windows a MacOs.
- Uvádět i alternativní písmo (napsat jich víc...) a nejlépe ještě jedno z obecných: serif, sans-serif, cursive, fantasy, monoscape.
- font-style: italic - kurzíva; popř. oblique (šikmé písmo). Odstranění kurzívy: normal.
- font-weight: bold - průměřná tučnost. bolder, lighter - hodnota realtivně k aktuální tučnosti. Nebo násobky 100 od 100 do 900 (pro vhodné písmo). normal.
- font-size: 100% - raději uvádět v body, chceme - li používat tuto metodu. Velikost nadpisů v px. Nebo poměrně např. 1,375em. Použití klíčových slov: xx-small, ..., medium, ..., xx-large.
- line-height: 0,85; - výška řádku. Také em či %.
- font: 100%/1,6 "Palatino Linotype"... více nastavení.
- color: - barva.
- background: pozadí. Stránky, elementu... obrázek: url(cesta.jpg). repeat-x, repeat-x, no-repeat. fixed, scroll - posun s obsahem. x y - posun od okraje popř. left, center, right / top, center, bottom.
- background-size: 100% 100% - roztáhne na obrazovku.
- word-spacing; letter-spacing: délka - prokládání, mezery (i záporné hodnoty).
- text-indent - odsazení prvního odstavce. Např. u článků.
- white-space: - zobrazení mezer a zalomení v HTML dokumentu. Hodnoty: pre všechny mezery a zalomení, nowrap bez zalamování, normal.
- text-align: left, right, center, justify. Zarování textu. justify - do bloku. Musí mít hodnotu display: block nebo display: inline-block, tzn. být blokové. U jiných elementů nastavit.
- text-transform - změma velikosti písmen. Hodnoty: capitalize, uppercase, lowercase, none.
- kapitálky - font-variant: small-caps.
- text-decoration: underline / overline / linethrough / none.

Kapitola 11: Rozvržení pomocí stylů

Box model

Obrázek viz HTML & CSS - Lesson 8: Box model.
- padding, border, margin / left, right / top, bottom.
- background-image: url (obrazek.jpg); - obrázek na pozadí. background-repeat - opakování, background-size. background-attachment - posunování... position. Nejlépe celé dát do background.
- width - šířka, height - výška. Procenta - vztahují se k rodičkovskému elementu. Pro úpravu řádkových elementů: display: block. min-width, max-width.
MP: tvorba zápatí: vložit footer na konec stránky nulové pozice left: 0; bottom: 0;, position: absolute... a v případě předchozího obtékání použít clear!
- float: left, right, none.
- clear: left, right, both, none - nechci, aby obtékal text... možno použít třídu a pojmenovat clearfix.
- border-style: none, dotted, dashed, solid, double, groove, ridge, inset, outset - rámeček. Viz přehled
- border-width: n, kde n = šířka včetně jednotky. border-color.
- omezení na jednu stranu: border-top, popř. rigth, bottom, left.
- také možno: border: 2px dashed green.
MP: responzivní design - přizpůsobení multiplatformním zařízením. Tvořit v procentech a upravit CSS pomocí @media screen and (max-width: 768px) (460px, 320px apod.).
- position: relative - relativní posunutí elementu ze svého původního umístění (nikoliv k rodiči). Vlastnosti top, right, bottom, left + jednotka (a nefunguje bez position). z-index - ovlivňuje pořadí v trojrozměrném prostoru.
- position: absolute, vlastnosti top, right, bottom, left + jednotka. Mohu udělat absolutní vzhledem k předkovi - když předkovi přiřadím position: relative. Jinak je pozice absolutní k body.
- position: fixed - pozice vůči oknu (při posuvu zůstává na místě). position: static (vrácení do běžného toku)???
- z-index: n; kde n je číslo pořadí (1 vzadu .... 5vpředu).
- overflow - přetekání obsahu. visible - prostě jde vidět (jako normál), hidden - co přetéká se skryje, scroll - scroll... auto - posuvníky se objeví, jen když je třeba.
- vertical-align - svislé zarovnání. Možnosti: baseline, middle, sub, super, text-top, text-bottom, top, bottom, %. Nutno být inline-block.
- cursor: default, pointer, crosshair, move, wait, help, text, progress, x-resize... - změna ukazatele myši (a další. x-resize - x = směr světové strany. e = east...). Ukázka.
- display: zobrazení. inline - "in - line" v řádku. block - blok. inline-block - hybrid. Chová se jako inline, ale mohu mu přiřadit velikost a tak. display: none - nezobrazí se. visibility: hidden - nezobrazí se, ale zůstane prázdný prostor (opak visible).

Kapitola 12: Kaskádové rozvržení pro rozličná zařízení

Technika postupného vylepšování...

Responzivní design.

• Flexibilní mřížkové rozvržení - width, margin, padding v procentech.
• Flexibilní obrázky a média - rozměry taktéž v procentech.
• Dotazy na médium - např. šířka zobrazoveného média.

Implementace dotazů na médium

• link rel="stylesheet" href="globalni.css" media="screen"
• @media print {
header nav, .ad {
display: none; }
}

Kapitola 13: Práce s webovými písmy

Formáty (používané)

Volně dostupné

Kapitola 14: Vylepšení jazyka CSS3

- vendor prefix - učí prohlížeče podporu chytrách CSS vlastností.

Testovací předpony různých prohlížečů

• -webkit- (Safari, Chrome)
• -moz- (Firefox)
• -ms- (IE)
• -o- (Opera)
• -khtml- (Konqueror)

Kapitola 15: Seznamy

- ul: neupořádaný; ol: uspořádaný; dl: seznam definic. li: položky.
- v CSS list-style-type: disc, circle, square, decimal, upper-alpha, lower-alpha, upper-roman, lower-roman. none - bez odrážek.
MP: nebo zkráceně k ul naprat např. a, A, 1, I...
- start="n" napsáno k elementu - jiná počáteční hodnota.
- změna přímo u li - value="n".
- Vlastní značka: margin-lfet: 0; padding-left: 0; u ul. U li: padding-left: 30px; background-image: url(cesta); background-repeat: no-repeat; background-size: 1.5em; background-position: 0 0.5em; = odsazení šířky obrázku, obrázek na pozadí, bez opakování, velikost obrázku, pozice - vyrovnání na střed! MP: rozšířenější zápis oproti knize... Tam: background: url(obr/finger.png) no-repeat 0 0.5em;.
- list-style-position: umístění značek. outside - vlevo od seznamu, inside součást seznamu (obtékání textu).
- zkrácené: např. list-style: inside circle.
- rozevírací navigace: .navigace>li {float: left; margin-left: 20px} - obtékání + odsazení. Vnořené ul: {position: absolute; left: -9999em; margin-left: -n;} - posunutí mimo zobrazovací plochu + margin (vysvětlení dále). .navigace>li:hover>ul {left: auto; background-color: white; padding-right: n; padding-left: n;} - zarovnání pod položku. Všechny použité n poštelovat (např. -10px, 10px, 10px).
- definice: dl - seznam; dt - název, termín; dd - odpovídající hodnota. dfn - důraz na definici.

Kapitola 16: Formuláře

Tři důležité části:

• form - obsahuje URL, method - metodu komunikace post nebo get.
• formulářové pole (textové pole, rozevírací seznamy, zaškrtávací políčko, přepínače, apod.
• odesílací tlačítko

Kapitola 17: Audio, video a jiná multimédia

Dříve: Flash Player (Adobe) nebo QuickTime (Apple), dnes můžeme nativně (přímo).

Video

Audio

Flashová animace

Kapitola 18: Tabulky

- table - tabulka, tr - řádek, th - buňka záhlaví, td - buňka datová.
- caption - popisek, musí být jako první element. scope - doporučovaný atribut pro předčítače textu (např. jestli col, row), přidání k th.
- označení částí tabulky - thead, tbody, tfoot.
- v CSS: border-collapse: collapse - aby se rámečky buněk spojili.
- colspan, rowspan - roztahování přes více buněk. Jako atribut colspan="n" u td, th. Ostatní sloupce, řádky se také musí definovat.

Kapitola 19: Práce se skripty

Kapitola 20: Testování a ladění webových stránek

Validátory

• Validator.nu (X)HTML5 Validator
• Markup Validation Service (stejné jádro jako předcházející)
• CSS Validation Service pro CSS

Testování prohlížečů

• Chrome (nejnovější)
• Firefox (nejnovější)
• IE od verze 7
• Safari od verze 5 (lepší test v Macu)
• Opera od verze 11