Balík: Kurz Webdesignér I.
programátor a designer webstránok

Úvod do problematiky tvorby www stránok

• Čo je webová stránka? Ako sa dostane na môj počítač?
• HTTP, HTTPS, FTP - protokoly v praxi protokol na prenos HTML
• Čo je web a webserver?
• Princíp tvorby webových stránok
  • Chcem si napísať obyčajný textový dokument, ale aby bol pekný
  • Potrebuje obsah - HTML
  • Vizuál - CSS
  • A interaktivitu - JavaScript, PHP
• História HTML 4.01, XHTML, HTML5, www a web server
• Trendy vo výrobe webových stránok
• Editory na tvorbu webových stránok - porovnanie
• Práca s programom na tvorbu a editovanie stránok: Notepad2, Brackets, Sublime Text, Atom a VS Code

Práca so súbormi

• Základné prípony web stránok
• Uloženie stránky
• Otvorenie stránky
• Otvorenie a uloženie súboru, otvorenie v prehliadači, znovu načítanie stránky
• Optimalizácia klávesovými skratkami
• utf-8 alebo ako na jazykovú sadu a jazyk web stránky

Základné princípy značkovacieho jazyka HTML

• Základné príkazy a vkladanie HTML kódu do stránky
• Ako sa vytvára webová stránka
  • !DOCTYPE
  • priznáme sa s verziou
  • hlavička stránky - meta údaje pre znakovú sadu, jazyk a titulok
  • telo stránky
  • štábna kultúra - správne odsadzujme náš kód
• ako písať HTML príkazy
  • čo je to príkaz - element
  • čo je to atribút
• Párové, nepárové značky a správne uzatváranie značiek
• Formátovanie textu, B I U STRONG EM a BR
• Nadpisy H1 - H6
• Čiara HR
• Práca s odstavcami - P
• Vnáranie značiek do seba - ako spravím tučný a šikmý text?
• Práca s oddielmi - DIV
• Obrázky - IMG
  • vkladanie obrázkov
  • typy používaných obrázkov
  • používanie obrázkov ako pozadia
  • popisovanie obrázkov - ALT atribút
• Zadávanie ciest k súborom
  • Relatívna cesta - na našej doméne
  • Absolútna cesta, URL - mimo našej domény
• Hypertextové odkazy - A
  • textové odkazy
  • obrázkové odkazy
  • odkaz na e-mail
  • odkaz na stránku mimo našej domény
  • absolútna cesta odkazu
  • relatívna cesta
  • odkazy na iné súbory - na stiahnutie
  • odkaz na inú časť tej istej stránky
    • PDF
    • dokumenty Microsoft Word a Microsoft Excel
    • obrázky
    • iné
• Zoznam UL OL LI
  • číslovaný
  • odrážkový
  • využívame zoznam na tvorbu navigačného menu
• Tabuľky TABLE TR TH TD
  • zápis
  • používanie
  • tvorba záhlavia, riadkov, buniek
• Rámce a iframe - IFRAME
• Iné HTML tagy
• HTML parametre, ktoré sa nepoužívajú
• HTML tagy, ktoré sa nepoužívajú

Moderné princípy web stránok a príkazy jazyka HTML5

• rozdiely medzi verziami HTML
• prístupnosť
• sémantické elementy a správna štruktúra web stránky

Základy a princípy jazyka CSS

• história CSS jazyka a verzie CSS 1, 2 a CSS 3
• Tvorba moderných webových stránok, využívanie CSS na zadávanie štýlu
  • oddelenie grafiky od textu
• Ako CSS vkladáme do stránky?
  • priamy štýlopis - Nie je to veľmi dobré, ale keď musíš, tak musíš
  • STYLE v hlavičke súboru - Lepšie, ale predsa len ...
  • externý súbor - ideálne
  • merné jednotky - percentá, PX, EM a REM
  • vkladanie CSS štýlu
    • selektory v CSS jazyku
    • priamy štýlopis
    • CSS zápis priamo v HTML súbore
    • CSS zošit
    • nanášanie cez identifikátor
    • nanášanie štýlu cez triedu - class
• preberanie referenčnej CSS príručky
• CSS selektory
  • Na čo slúžia?
  • Ako sa píšu?
    • Selektor podľa HTML značky
    • Selektor podľa triedy - class
    • Selektor podľa identifikátora - ID
• textové efekty
  • farba písma
  • typ písma
  • tučné, šikmé, zarovnané vpravo, na stred, do bloku, riadkovanie
  • práca s fontom
  • štýly písma
  • ostatné CSS príkazy
• Bližšie vysvetlenie jednotiek v CSS - px a %
• Farby v CSS - pomenovaná farba, RGB model, hexakód
• Zápis fontov v CSS , možnosti, ake nemám daný font
• práca s pozadím - farba alebo obrázok
  • Obrázok na pozadí ako kachličky
  • Obrázok na pozadí ako veľká fotka
• práca obrázkami na pozadí
• práca so zarovnávaním
• Vrátenie sa k HTML - delíme našu stránku na oddiely/škatule - DIV
• Všetko je škatuľa - box model a vlastnosti veľkosti, odsadenia a obrysy objektov
  • šírka a výška HTML elementov
  • Pretekanie obsahu
  • Odsadenie z vnútra - padding - niekedy nafukuje (box-sizing)
  • Odsadenie z vonku - margin
  • Rámček/bordúra dookola
• Zarovnáme škatule vpravo a na stred?
• nanášanie CSS jazyka priamo na elementy a atribút STYLE
• Praktický príklad: Tvoríme svoju prvú hotovú webovú stránku
  • Tvoríme rozloženie: stredový stĺpec s 3 oddielmi - hlavička, menu a obsah
  • Prepájame stránky odkazmi
  • nastavujeme menu
  • tvoríme štruktúru
  • vytvárame obsah
  • nastavujeme vzhľad cez CSS štýl
  • vytvárame a vkladáme grafiku
  • kopírujeme stránku a linkujeme menu
  • editujeme obsah podstránok
• FTP a domény, publikujeme webovú stránku
  • aký webhosting budeme potrebovať, aké sú možnosti na trhu
  • akú doménu si zvolíme
  • aké programy používame na kopírovanie cez FTP
  • registrujeme si bezplatný webhosting a stránku kopírujeme na webový server

CSS štýly a grafika na web stránkach:

• CSS selektory - optimalizujeme náš CSS kód
  • Kombinujeme selektory - selektor dietaťa (>), selektor potomka (medzera)
  • Viac selektorov pre jednu definíciu (,)
  • nanášanie CSS jazyka NIE priamo
  • selektor - názov HTML tagu
  • selektor - názov triedy
  • selektor - identifikátora
  • selektor - rodič a potomok
• Tvoríme ďalší príklad a novú hotovú webovú stránku
• Upravujeme webstránku s novými CSS efektami
  • nastavujeme menu, tentokrát vyžívame zoznam
  • tvoríme novú grafiku
  • nanášanie vlastností cez identifikátor
  • nanášanie štýlu cez triedu - class
  • tvoríme viacstĺpcový design stránky alebo aj navigácia v riadku
  • ukladáme 2 odstavce vedľa seba - vlastnosť float
  • pracujeme s relatívnymi pozíciami
  • upravujeme obsah

Tvorba dynamických webov a JavaScript a PHP začiatočník:

• Čo je dynamický web?
• Dynamickosť na strane servera a klienta - jazyky PHP a JavaScript
• JavaScript
  • Beží lokálne - môj počítač mení stránku
  • Čo JavaScript môže a čo už nie
  • Ako a kde JavaScript zapisujeme?
  • Základný princíp: akcia - reakcia: kliknem a niečo sa zmení
  • Pravidlá syntaxe a zápis - ukážka
• PHP
  • Beží na serveri - iný počítač mi mení a tvorí HTML kód
  • Stránky sa skladajú dynamicky - po kúskoch ako lego
  • Čo je to Apache?
  • Čo môže robiť PHP?
  • Ako a kde zapisujeme PHP?
  • Pravidlá syntaxe a zápis - ukážka
  • Ukážka príkazov echo a include

Odborná diskusia s lektorom

• Trendy vo vývoji HTML a CSS jazyka
• responzívny webdesign a mobilné aplikácie, CSS grid
• Aké webové stránky sa ľuďom páčia
• Aký typ grafiky si zvoliť
• Webhosting, ceny, služby, prieskum trhu
• Domény, registrácia, možnosti
• Diskusia s účastníkmi

Zopakovanie HTML tagov, ktoré budeme potrebovať

• práca s textom
• práca s odstavcami
• Obrázky a odkazy
• Zoznamy a tabuľky
• oddiely a časti webstránky
• obrázky a pozadia
• odkazy
• nástroje pre vývojára alebo DEVELOPERS TOOLS v prehliadači

Nové HTML Elementy

• Čo sú sémantické elementy? W3 štandard
• Aký majú význam značky STRONG, EM, INS, DEL, ADDRESS, ABBR, BLOCKQUOTE, CITE?
• Blokové sémantické elementy - HEADER, FOOTER, NAV, ASIDE, ARTICLE, SECTION, MAIN
• Prerobíme DIVká na stránke na sémantické elementy

Grafika na webstránkach

• na čo sa používajú obrázky
• kedy sa používajú obrázky pozadia
• rozdelenie grafických formátov
  • rastrové
    • JPG
    • png8 a png24
    • PNG
    • GIF
    • Animácie
  • Vektorové - SVG
• použite grafických formátov - na čo je ktorý formát vhodný
• kde nájdem vhodnú grafiku? - fotobanky, platené/zadarmo, ikony
• obrázky a legislatíva
• Úprava rastrových obrázkov
  • Šetríme prenosové pásmo, zrýchľujeme stránku pomocou obrázkov vhodnej veľkosti a kvality
  • Vhodná veľkosť - orezanie obrázku online služby/Photoshop
  • Optimalizácia kvality - online služby/Photoshop
• Prečo je vektorová grafika budúcnosť webu?
  • SVG je bratranec HTML
  • SVG formát

Zopakovanie CSS jazyka

• CSS I., CSS II. a CSS III.
• Syntax
• zápis CSS štýlu
• • priamo
  • Štýl v HTML súbore
  • externý súbor
  • výhody / nevýhody
• Selektory
  • Podľa HTML značky
  • Podľa triedy - class
  • Podľa identifikátora - ID
  • Kombinácie selektorov (child selector a descendant selector)

CSS pokročilý

• Nové jednotky na veľkosť - em, rem
  • Aká je základná veľkosť fontu? Čo je 1em?
  • Rozdiely em a rem a ich využitie - prístupnosť
• Využitie nových fontov na stránke
  • Google fonts
  • Prečo je font-weight udaná v číslach?
  • @font-face direktíva na vkladanie vlastných fontov - čo obsahuje?
  • Vložíme si manuálne do stránky nový font (z 1001fonts/dafont)
• Definície a volanie farieb
  • Nové definovanie farieb s priehľadnosťou - rgba(), hsl(), hsla()
  • hexakód a priehľadnosť - podpora nových vecí prehliadačmi: caniuse.com
• Margin, padding - komplexnejší príklad
  • Dvoj, troj a štvorhodnotový zápis margin a padding

• Problémy pri box modeli - margin collapse,  box-sizing
• Niekedy je lepšie použiť padding ako margin a naopak
• Pre kontorlu použijeme DEVELOPER TOOLS v prehliadači
• CSS reset - keď prehliadač robí napriek
• Spravíme si jednoduchý reset pre box-sizing, využijeme selektor všetkého (*)

Pozíciovanie - CSS vlastnosť position

• Static - to, čo doteraz
• Relative - relatívne voči originálnemu miestu
• Posúvame veci left, right, top a bottom
• Fixed - fixne na obrazovku
• Absolute - najkomplikovanejšie ale najpoužívanejšie

Vlastnosť display a viditeľnosť v CSS

• Keď chcem elementy skrývať
• Meníme blokovitosť a riadkovitosť
• Spravíme si riadkové menu
• Prekresľujeme z príkladov
• • základom je aby po kurze účastníci vedeli kopírovať vizuálne vzhľad z predlohy a vedeli to vytvoriť a zapísať do HTML a CSS kódu, preto je súčasťou kurzu aj nácvik prekresľovania obrázku stránky do HTML a CSS aj nasledujúce cvičenia:
    • prekresľovanie rôznej grafiky do HTML a CSS
    • kontrola a vyhodnocovanie
    • zapracovanie šablóny do webstránky
• Záverečná diskusia a priestor na otázky