Vtípek
Tahák na HTML
HTML - HyperText Markup Language (značkovací jazyk).Užitečné odkazy
- Výpisky z knihy: HTML5 a CSS3 od Elizabeth Castro a Bruce Hyslop
- Moje postřehy
- Flexbox
- Fórum ITnetwork
- Přehled fontů podporovaných Windows a MacOs
- (Mikroformats.org - existing rel values)
- (Obrazové mapy - hledat v Google)
- Příklady zápisu selektorů JakPsatWeb
- Velikost nadpisů v px
- Ukázka druhů kurzorů
- Responzivní design - náhled celkový
- Responzivní design - náhled podrobnější
- Font Squirrel
- The League of Moveable Type
- České fonty
- Should I Prefix
- CSS3 generator
- Validator.nu (X)HTML5 Validator
- Markup Validation Service
- CSS Validation Service

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
.
- 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: low, optimum, high
.
- progress
- jako meter . 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">
; <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
Opakování:link rel="stylesheet" href="globalni.css" media="screen"
@media print {
header nav, .ad {
display: none; }
}
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.
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í.
-webkit-
(Safari, Chrome)-moz-
(Firefox)-ms-
(IE)-o-
(Opera)-khtml-
(Konqueror)
Testovací předpony různých prohlížečů
- 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
form
- obsahuje URL,method
- metodu komunikacepost
neboget
.- formulářové pole (textové pole, rozevírací seznamy, zaškrtávací políčko, přepínače, apod.
- odesílací tlačítko
Tři důležité části:
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 dobody
) 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
- 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čů
- 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.

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.