Kurz			Cena	Množstvo

Detail kurzu

Prihlásiť sa na kurz 226.32 EUR

Tvorba, programovanie webstránok III. - expert HTML a CSS, pokročilé selektory, médiá a formuláre

IT LEARNING SLOVAKIA, s.r.o.

Popis kurzu

Viete už spraviť dobre vyzerajúcu stránku, ale stále nie ste spokojní? Jazyky HTML a CSS sa konštantne vyvíjajú a niekedy je ťažké držať krok s vývojom. Máte dojem, že Vaša stránka ešte stále nevyzerá ako moderná stránka dnešnej doby? Chcete vedieť ako vložiť do vašej stránky to “pozlátko”, ktoré ju spraví výnimočnou? Na tomto kurze dvíhame latku a hovoríme o HTML značkách a CSS vlastnostiach, ktoré dokážu zmeniť Vašu stránku na stránku hodnú 21. storočia. Na tomto kurze si ukážeme si tipy a triky na štýlovanie tabuliek a zoznamov. Skrášlime si našu stránku “pozlátkom” - vytvoríme efektnú navigáciu v riadku, ktorá sa rozklikáva a použijeme ikonky pre vylepšený grafický dojem. Dôležitou časťou profesionálnych stránok sú formuláre a preto sa budeme venovať tomu ako fungujú, čo je to tá ich “prístupnosť” a čo je validácia a ako ju dosiahnuť pomocou čistého HTML. Nie posledná vec, ktorú sa naučíme sú dynamické prechody a animácie - efekty, ktoré našu stránku oživia pohybom a zmenou. A pri tom všetkom spomenieme všetky druhy CSS selektorov a atribútov. Na kurze sa očakáva, že máte znalosť jazyka HTML na úrovni, že Vám nerobí problém čítať HTML kód ľubovoľnej stránky. Takisto sa očakáva znalosť CSS na mierne pokročilej úrovni - viete formátovať text a obrázky v pozadí, poznáte CSS Box model a vlastnosti float, display a position Vám nie sú neznáme.

Prihlásiť sa na kurz

Obsah kurzu

Pokročilé CSS vlastnosti a selektory

Vyskakujúci podzoznam - finta s :hover a display,
kombinátor selektorov - súrodenci (+, ~)

Moderné formátovanie tabuliek

CSS vlastnosti - border, border-collapse, border-spacing, vertical-align
Zafarbenie riadkov na preskačku - selektory :first-child, :nth-child(), :last-child

Fonty a ikonky

HTML entity (napr ) a iné akože ikonky
Emoji
Fonty s ikonami na stránke, Font Awesome, Glyphicons, …
Pseudo-element selektory ::before a ::after a CSS vlastnosť content

Pozadie stránky - rozšírené

Farebné prechody v pozadí - linear-gradient(), radial-gradient()
Viacnásobné pozadia
- Pozícia: background-position
- Obrázky, priehľadné textúry, filtre
- gradienty

Médiá a videá na stránke

Kedysi Flash, dnes už nie
Vkladáme video z Youtube/Vimeo
AUDIO element a jeho SOURCE
VIDEO element
Atribúty controls, autoplay, muted, loop
Podporované formáty - mp3, mp4, ogg
Video ako pozadie stránky

Formuláre na stránke

Čo je formulár? (FORM)
Ako sa posielajú dáta? - atribút METHOD
- Aké sú možnosti?
- Aké výhody má GET? - URL ma dostane priamo na n-tú stránku
- Aké výhody má POST - dáta idú skryto
Element INPUT
- Atribúty TYPE, NAME, VALUE
- Bežné typy inputov -
  - TEXT, PASSWORD a atribút MAXLENGTH
  - Prečo máme HIDDEN?
  - RADIO - pozor na name a value atribúty
  - CHECKBOX - atribút CHECKED
  - SUBMIT, RESET - nepoužijeme radšej BUTTON element?
  - FILE - atribút ACCEPT pre výber typu súboru, atribút MULTIPLE
- Nové typy inputov - COLOR, DATE, EMAIL, NUMBER, RANGE
- Nové atribúty - MIN, MAX, PLACEHOLDER
- Atribút PATTERN - definovanie vlastného inputu
- Podpora nových inputov
- Kde si môžem skontrolovať podporu HTML a CSS vlastností? - caniuse.com
- Náhrada - jQuery UI datepicker,...
Element SELECT + OPTION - výber rôznych hodnôt
Element DATALIST - našepkávač hodnôt
Element TEXTAREA
Element LABEL a spravenie prístupnejšieho formulára
- Použitie atribútu TABINDEX
Element FIELDSET a LEGEND - rámčekovanie nášho formulára
Validácia formulárov prehliadačom
- Atribúty REQUIRED, READONLY, DISABLED, ACCEPT

Formátovanie formulárov

Selektor podľa atribútu [type], [type=xyz]
Pseudo-class selektory - :required, :disabled, :read-only, :checked, :focus
Prefixované CSS vlastnosti -moz-, -webkit-
Špecificita selektorov - čo určuje, ktorý selektor sa uplatní?
Upravíme si formulár pomocou nových selektorov a vlastností
- orámujeme inputy, odsadíme a otieňujeme
- Uplatníme nové selektory a vlastnosti

Prechody a animácie

CSS vlastnosť transition
- aplikujeme na :hover selektor
- Postupná zmena
  - Čo sa má zmeniť?
  - Trvanie
  - Omeškanie
  - Prechodové funkcie
    - Ease
    - Linear
    - Ease-in
    - Ease-out
    - Ease-in-out
    - steps
    - Cubic-beziere
  - Viaceré prechody
- Spravíme si animované tlačidlo
CSS vlastnosť transform - Geometrické transformácie
- Otáčanie - rotate
- Škálovanie - scale
- Skosenie - skew
- Posun - translate
CSS vlastnosť animation
- Čo môžem animovať a čo nie? - animatable
- @keyframes pravidlo
- Animujeme ako film - postupnosť zmien
- Trvanie, omeškanie a prechodové funkcie ako transition
- počet opakovaní
- Smerovanie
- Fill-mode
- Pozastavenie animácie