Jeronym.net

Vtípek

Tahák na HTML

HTML - HyperText Markup Language (značkovací jazyk).

Užitečné odkazy

HTML5 a CSS3

HTML5 a CSS3 od Elizabeth Castro a Bruce Hyslop

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.
Základní kostra HTML
- 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

Box model CSS

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

Opakování:
  • link rel="stylesheet" href="globalni.css" media="screen"
  • @media print {
    header nav, .ad {
    display: none; }
    }
Seznam vlastností, které můžeme zahrnout do svých dotazů:
width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid.
Všem vlastnostem kromě orientation, scan, grid můžeme přiřadit ještě min- a max- (menší/větší nebo rovné).
Bez podpory Internet Explorer 8 (a dále).
MP: šířka jednotlivých zařízení dle Website Dimensions:
  • smartfóny: menší nebo rovno 768 px;
  • tablety: větší 768 px;
  • střední PC: větší než 992 px;
  • velké PC: větší než 1200 px.
MP: test responzivního webu - náhled celkový, náhled podrobnější.
Takže do CSS: @media only screen and (max-width: 767px). Logika: only, not; typ: screen - obrazovky, print - pro tisk; vlastnost: viz výše (width...). Můžeme spojit dvojici hodnot pomocí and a také jednotlivé dotazy oddělíme čárkou. Např. @media only screen and (color), projection and (color).
- maximum-scale=1.0, user-scalable=no v meta- vypne možnost přiblížení uživateli (např. vhodné proti automatickému přiblížení uživatelů iPhone).
- width - šířka zobrazovací plochy; device-width - šířka obrazovky zařízení.
- meta se jménem viewport... width=device width - šířka zobrazovací plochy = šířka plochy zařízení, initial-scale=1.0 nastaví úvodní úroveň přiblížení na 100%. Takže meta name="viewport" content="width=device-width, initial-scale=1.0".
- IE 8 a starší neumí width zařízení. Řešit přes javaskript + [IF... Ale používá 0.1% lidí, takže...

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

Formáty (používané)

- TrueType (*.ttf) a OpenType (*.otf) - především desktop.
- Web Open Font Format (*.woff) - komprimované písmo *.ttf a *.otf + dodatečná data.

Volně dostupné

- Font Squirrel
- The League of Moveable Type
- MP: české - České fonty
Mohu nahrát na vlastní hosting nebo využít službu poskytující hosting.
- v CSS: @font-face {font-family: "NAZEV"; src: url("cesta")} a pak použiji pomocí font-family.
- přidávat i bold a italic...

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)
- MP - kdy použít prefix - Should I Prefix.
- CSS3 generator - zdroj informací a pomocník.
- polyfill nebo shim - alternativní řešení v JavaScript.
- border-radius - zaoblení rohů. Procenta, pixely... také mohu zaoblit jen jeden roh - např. border-top-left-radius. Kruh: 50%. border-radius: x / y - elyptické rohy (x = vodorovný poloměr, y = svislý poloměr. Také mohu psát hodnoty za sebou... HL, HP, DL, DP...
- text-shadow: posun-x posun-y poloměr_rozostření barva, např. text-shadow: 2px 2px 5px #999. Více rozostření oddělím čárkou ,. Dědičné. Posun i záporné číslo. Více stínů - první vpředu.
- box-shadow: inset/outset posun-x posun-y poloměr_rozostření rozsah barva. Rozsah = celé okolo... Není dědičné.
- 1.background-color; 2.background-image: url(...), url(...);, 3.background-position: 50% 50%, 20px 20px; (y-pozice jde opačným směrem...?), 4.background-repeat: no-repeat, repeat-x;. Nebo zkracený zápis: background: url(...) 0 0 no-repeat, url(...) 100% 10% no-repeat; (ale ruší pak background-color). background-size: cover; - roztažení přes celou stránku... nebo x y;
- background: linear-gradient (45deg, blue, red); - lineární přechod. Radiální: např. radial-gradient:(yellow 50%, yellowgreen 60%);. I elypsa a a další fce. Více barev: background: linear-gradient(0deg, black 30%, red 50%, chocolate 70%);.
- opacity: n; kde n je číslo (0 - 1) na dvě desetinná čísla, i jen ".5". Tip: použítí s :hover:. "Skoro" dědičné - potomci se chovají stejně, ale hodnotu mají "1".

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
- post - větší množství dat, get - data se objeví v panelu adresy (lze přidat do záložek).
- PHP : "Hypertext Preprocessor".
- bezpečnost - ověřovat data, útočník si může udělat vlastní formulář...
- alternativy k PHP: ASP.NET (Microsoft), ColdFusion (Adobe), JSP (JavaServer Pages), framework Ruby on Rails.
- dvojité zadání - vhodná kontrola překlepů...
- fieldset - více polí... legend - legenda. Ale radši nepoužívat - omezené možnosti a co prohlížeče?
- textové pole: více oddělíme pomocí tabulky. Ale také možno div, p nebo br. input type="text" - typ text, name="nazev" - indentifikátor na serveru, id="identifikator" - vhodné nastavit stejně s name, value="vychozi" - vychozí hodnota..., required=required" - je-li hodnota žádoucí (bez ní nejde formulář odeslat), placeholder - napověda (napsaná v poli), autofocus="autofocus" - pokud se jedná o první textové pole na stránce s touto hodnotou, získá automatické zaměření (může se začít hned psát), size="n" - šířka pole v počtech znaků, maxlength="n" - maximální počet znaků.
- standardní velikost textového pole je 20.
- pole pro heslo: jediný rozdíl oproti běženému textovému poli je, že prohlížeč zobrazuje kruhy nebo hvězdičky. Ale stejně nešifruje. input type="password".
- type: email, url, tel.
- pattern="regulární výraz" - vymezuje formát. HTML5PATTERN.
- label for="" - popisek. Lepší formátování v CSS, zaškrtávací pole, tlačítka - umožnují kliknout na label. Propojit for s id.
- přepínače: type: radio, value="hodnota" - nutné použít! (odešle výběr, není-li přiřazena, odešle se on), checked="checked" - pokud má jediný prvek, bude označen.
- rozevírací seznam: select name id size - klasika, a ještě multiple - možnost vybrat si více možností (ale pak se divně zobrazuje). Uvnitř pak option value, také možno přidat label. Nadpisy: optgroup label="nazev skupiy", kdy se název skupiny zobrazuje.
- textová oblast: textarea name id maxlength a také rows výška ve řádcích, cols šířka ve znacích. Lepší ale nastavit v CSS. Nedědí písmo, takže v CSS font: inherit. Až 32 700 znaků.
- nahrávání souboru: form method="post" enctype="multipart/form-data" - enctype - nahrání ve správném formátu, action="upload.url" - url skript, jež zpracovává. label, input type="file" - vznikne tlačítko "Procházet", name id, size šířka pole cesty - už dnes není?
- skryté pole: input type="hidden". Použítí: např. předání dat skriptu, které uživatel vyplnil již v předchozím formuláři...
- odesílací tlačitko: input type="submit" value="popisek". Nebo obrázek: button type="submit">, popř. text (vlevo od obrázku), img src alt, konec button. CSS typ - cursor: pointer.
- zakazování: disabled="disabled", ale třeba práce s JavaScriptem...

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

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

Video

- kodeky: *.ogg, *.ogv; *.mp4, *.m4v; *.webm
- přidání: video src=""
- možné atributy: src, autoplay - automatické spuštění, controls - ovládací prvky, muted - potichu, loop - přehrávání ve smyčce, poster - název souboru, když načítá (obrázek), width, height, preload - "přednačítání", může mít tři hodnoty: none, metadata, auto.
- dobré mít dva zdroje, použít 2x element(!) source uvnitř elementu video... bere je postupně a pokud nefunguje ani jeden, ignoruje element video. A nic se nezobrazí... Ještě dobrý záložní flash přehrávač a odkaz...
- source atributy: src, type - pomáhá prohlížečům (např. media/mp4, video/webm, video/ogg), media - kvůli CSS3.
- dobré dát záložní odkaz pro stažení (prostě vložit mezi značky video). Nebo záložní flashové video.

Audio

- kodeky: *.ogg, *.mp3, *.wav, *.aac, *.mp4
- audio - jinak stejné použití jako video.

Flashová animace

- object type="application/x-shockwave-flash" data="cestaksouboru.sou" width height a pak param name="movie" value="cestaksouboru.sou.

- canvas - "plátno" pro vykreslování pomocí JavaSkriptu.

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

- vložení JavaScriptu: (nejlépe do body) script type="text/javacript" src="script.js" - externí soubor. Nebo přímo do stránky - také element script, ale bez src.
- nemusí ho umět všechny prohlížeče.

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

Validátory

Testování prohlížečů

- které a jaké minimální verze?
  • Chrome (nejnovější)
  • Firefox (nejnovější)
  • IE od verze 7
  • Safari od verze 5 (lepší test v Macu)
  • Opera od verze 11

- rady: Stack Overflow



Flexbox

- výpisky především z A Complete Guide to Flexbox.
- Flexible box
- hlavní idea je schopnost měnit šířků a výšku prvků a nejlíp zaplnit možný prostor (různé displeje, rozlišení).
- flex container se roztahuje, aby naplnil volný prostor.

Schéma fungování flexboxu

Rodič - parent

- display: flex - u rodiče. Definuje flex container. Flex kontext pro všechny přímé potomky.
- flex-direction - hlavní osa. Flexbox je "jednosměrný" koncept (krom balení). row, row-reverse - zleva doprava, zprava doleva, column-column-reverse - shora dolů a opačně...
- MP: smršťuje i přesně daný rozměr...
- defaultně se flex prvky budou snažit nacpat na jednu řádku. Možno nastavit pomocí flex-wrap: nowrap, wrap, wrap-reverse.
- flex-flow - zkráceně dá flex-direction a flex-wrap dohromady.
- justify-content - zarovnání v hlavní ose. flex-start - na začátku osy, flex-end, center - ..., space-around - mezery okolo. Mezery nejsou stejné - (např. kraje). space-evenly - mezery, stejně velké.
- align-items - zarovnání v kolmém směru... flex-start, flex-end, center, baseline, stretch. stretch - roztahuje aby naplnil kontejner, ale respekutuje nastavení šírky, výšky...
- align-content - zarovnání s extra mezerou...

Potomek - children

- order - pořadí...
- flex-grow - nastavuje schopnost flexů, pokud je to nutné. Akceptuje bezrozměrovou jednotku: pokdu budou mít všechny "1", zaberou všechny stejně místa. Pokud nějaký potomek bude mít "2", zabere dvakrát tolik místa než ostatní.
- flex-shrink - smršťování, pokud je nutné (nevejde se na osu).
- flex-basis - nastavuje velikost, ještě než dojde rozdělení zbylého prostoru.
- flex - zkrácený verze pro flex-grow, flex-shrink, flex basis - 2. a 3. parametry jsou volitelné. Defaultně: 0 1 auto. Doporučuje se zkratky používat!
- align-self - zarovnání jen jednoho prvku.



Moje postřehy

- nutno nastavit height u html v CSS!
- vertikální vycentrování - obalení do div, absolutní pozice a také transform: translateX(-50%) translateY(50%);. A nebo flebox: display: flex; justify-content: center; align-items: center;.
- tester regulárních výrazů - regular expressions 101.