Tvorba, programovanie webstránok I.
základy HTML a CSS, úvod do JavaScript a PHP

Ú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