Detail kurzu
Tvorba, programovanie webstránok I. - základy HTML a CSS, úvod do JavaScript a PHP
IT LEARNING SLOVAKIA, s.r.o.
Popis kurzu
Počítačový kurz Tvorba a programovanie webstránok I. je určený pre začiatočníkov v oblasti programovania a tvorby webových stránok. Počítačový kurz a učivo v ňom obsiahnuté je odrazovým mostíkom v "kariére" každého začínajúceho webdesignera a web programátora. V balíku kurzov sa nachádza úvod do tvorby webstránok, naučíme sa pracovať s FTP protokolom, editorom na tvorbu web stránok, princípy tvorenia web stránok a správne postupy, ďalej preberanie značkovacieho jazyka HTML, kaskádových štýlov CSS a účastníci sa oboznámia aj so skriptovacím jazykom JavaScript a v neposlednom rade aj s programovacím jazykom PHP. Programovanie v jazykoch JavaScript a PHP je brané len ako úvod a oboznámenie sa s platformami, to znamená, že pre ich pokročilé možnosti využite možnosť kurzov a školení zameraných konkrétne na túto tematiku.
Aké sú predpoklady pre úspešné absolvovanie? Stačí vedieť ovládať počítač na základnej úrovni - pracovať s textovým editorom a prehliadačom webstránok, otvoriť a uložiť súbor, prepnúť si klávesnicu. Prakticky si vyskúšame vytvoriť jednoduchú stránku v značkovacom jazyku HTML, ktorý tvorí základ každého webu. Povieme všetky potrebné HTML značky pomocou ktorých vytvoríme všetko, čo by jednoduchá stránka mala obsahovať. Našu stránku si následne vizuálne upravíme pomocou jazyka CSS. Doplníme do nej farby, obrázky, iné typy písma a pohráme sa s rozložením prvkov. Nakoniec si povieme o technológiách, ktoré nás čakajú, ak sa chceme vydať na cestu skutočného frontend developera. Kurz je veľmi praktický.
Obsah kurzu
Ú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
- 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
Cieľová skupina
začiatočníkHodnotenie
Organizátor
Ďalšie termíny kurzu
Podobné kurzy
podľa názvu a lokality
