HTML & CSS pre začiatočníkov.

Kto chce vytvárať webové stránky, skôr či neskôr sa stretne s HTML. Preto sa spolu v nasledujúcich video-tréningoch zoznámime s krásnym svetom HTML. Postupne uvidíte, aký tento jazyk je a ako s ním môžete vytvárať webové stránky v kombinácii so štýlmi. Na začiatku však stojí otázka: Čo je vlastne HTML a štýly? Na konci tohto video-tréningu sa tiež dozviete, aký softvér potrebujete na vytváranie a testovanie webových stránok.

Na rozdiel od programovacích jazykov ako napríklad Java, v HTML môžete veľmi rýchlo dosiahnuť prvé výsledky bez väčšieho zasiahnutia. Všetko, čo na začiatok potrebujete, je editor a prehliadač. V tomto videu sa naučíte (vy) ako vytvoriť svoj prvý HTML dokument a okamžite získať výstup v prehliadači. A takto vedľa vedľa budete zistíte, ako sú HTML dokumenty, konkrétne webové stránky, štrukturované alebo aká základná štruktúra ich nasleduje.

Vzťah medzi pojmy prvok, tag a atribút už poznáte z prvého dielu tejto série. Teraz ide o to, ako sa tieto veci dajú prakticky využiť v HTML dokumentoch. Na záver tohto video tréningu sa dozviete, ako môžete skontrolovať syntaktickú správnosť vášho HTML kódu.

Vaše webové stránky určite nebudú tvorené len obrázkami, ale aj textami. A texty by mali byť riadne štrukturované, nielen pre zlepšenie čitateľnosti. Na to má HTML k dispozícii mnoho prvkov. V tomto videotrénigu budú predstavené najdôležitejšie štrukturovacie prvky pre texty. Okrem toho sa dozviete, ako môžete maskovať vlastné znaky v HTML a ako môžete vypisovať programové zoznamy.

Pre dobrú čitateľnosť textov je potrebné rozumné formátovanie. A to ide nad rámec čistých štruktúrne prvkov ako sú nadpisy a odseky textu. Takže napríklad v HTML sa môžu označovať citáty a zvýrazňovať jednotlivé pasáže tučne alebo kurzívou. Potrebné náradie k tomu poskytuje toto videotrénovanie.

Prvky, ktoré sa vám v HTML pravidelne budú opakovane stretávať, sú zoznamy. To platí mimochodom nielen pre zoznamy úloh, kontaktné údaje, ale aj pre definíciu ponúk. Zoznamy teda zohrávajú veľmi centrálnu úlohu v HTML. Dôvod dosť zláka, aby sme na ne venovali dôkladnú pozornosť. V tomto video kurze sa naučíte všetky varianty zoznamov, ktoré HTML ponúka. Patria sem zoznamy s odrážkami, číslované zoznamy, zoznamy definícií a ponukové zoznamy. Okrem toho dostanete tipy na to, ako si prípadne prispôsobiť vzhľad zoznamov.

Tabuľky stále zohrávajú dôležitú úlohu na webových stránkach. Toto však platí už len pokiaľ ide o prezentovanie údajov. Keď ešte neexistoval CSS a/alebo ho prehliadače nepodporovali, tabuľky slúžili aj k niečomu úplne inému: Ako spôsob pre prevedenie layoutov. V jednotlivých bunkách tabuliek sa umiestňovali jednotlivé časti stránky. Takto vzniknuté monštrá layoutových tabuliek sú vďaka CSS našťastie minulosťou. Dnes sa tabuľky v webdesigne používajú výlučne na to, na čo boli určené: Na prehľadné zobrazovanie údajov.

Spôsob, akým pôsobia tabuľky, ktoré sú dobre zostavené, nemusí nutne spočívať v rovnakom počte buniek v rámci riadka tabuľky. V tomto video tréningu sa ukáže, ako môžete spojiť bunky tabuliek. V druhej časti sa dozviete niečo o popisovaní tabuliek. Tento aspekt je dôležitý, pretože tak môžete návštevníkom okamžite ukázať, o aké údaje presne ide. Video tréning končí podrobným pohľadom na dizajn tabuliek v HTML. Práve v tejto oblasti sa oproti predchádzajúcim verziám HTML veľa zmenilo.

Každá webová stránka má málokedy grafiku. Niet divu, že téma grafiky zaberá dôležité miesto aj v tejto sérii. V tomto a nasledujúcom video tréningu sa ukáže, ako môžete integrovať grafiky do vašich webových stránok. Na začiatku však stojí iný aspekt v popredí: Ktoré formáty obrázkov sú vôbec vhodné pre online použitie? V druhej časti pôjde o to, ako sa dajú referencovať cesty k obrázkom.

Ako sa v zásade odkazujú obrázky, bolo ukázané v predchádzajúcej časti. Koniec cesty však ešte zďaleka nie je dosiahnutý, čo sa týka obrázkov. Skutočne je možné bližšie popísať obrázky pomocou príslušných atribútov. O tom bude reč na začiatku tohto videa. V druhej časti bude popísané, ako je možné implementovať popisy obrázkov pomocou syntaxe HTML5.

Soľ v polievke internetu spočíva v možnosti spojiť obsahy pomocou hypertextových odkazov. Bez týchto odkazov by internet v dnešnej podobe nebol možný. Aké varianty definícií hyperodkazov vám HTML poskytuje, sa dozviete v tomto a ďalšom videotrénigu.

HTML ponúka voľne omnoho viac možností týkajúcich sa odkazov ako to, čo bolo predvedené v predchádzajúcom videotrénigu. Tak môžete napríklad definovať odkazy na e-maily a ponúknuť súbory na stiahnutie. Tieto a ďalšie varianty hyperodkazov sa dozviete v tomto videotrénigu.

Predstihnutím tohto: Práve v HTML5 absolvovali formuláre kvantový skok. Vďaka mnohým novým typom polí je možné vytvoriť veľmi zaujímavé formuláre. Tieto nové možnosti samozrejme ešte spoznáte. Avšak v tomto video tréningu sa začneme s nevyhnutným náradím, ktoré je potrebné na definovanie formulárov. Na začiatku ide o vytvorenie jednoriadkových vstupných polí. Uvidíte, ako je možné ich definovať, ako ich prednastaviť na hodnoty a nastaviť, aby neboli editovateľné. Rovnako sa naučíte definovať polia pre heslá. Ide totiž o typ poľa, ktorý sa občas hodia.

V tomto videu sa dozviete o ďalších typoch polí, ktoré môžete použiť vo vašich formulároch. Konkrétne ide o výberové polia, prepínače a zaškrtávacie políčka. Všetky tieto sú dôležité prvky, ktoré sa v formulároch často používajú. Dôvodov na to, aby sme sa podrobnejšie pozreli na tieto a iné prvky, je dosť.

S HTML5 sa deje veľa, a to najmä pokiaľ ide o formuláre. Dôvodov na toľko nových formulárových funkcií, ktoré sa už dajú teraz použiť, je dosť. Je na čase podrobne sa pozrieť na tieto nové formulárové funkcie. Koniec je totiž s obyčajnými vstupnými poliami. Nakoniec je možné definovať aj posuvníky, polia pre dátumy atď. - a to úplne bez použitia JavaScriptu.

Vstup do sveta formulárov HTML5 umožnil predchádzajúci výcvikový video kurz. Koniec záležitosti však ešte zďaleka nie je dosiahnutý. V skutočnosti HTML5 na tomto poli ponúka ešte oveľa viac.

V HTML5 okrem predstavených typov polí existuje mnoho ďalších zaujímavých aspektov. Teraz je možné napríklad s veľmi malým úsilím implementovať funkciu automatického dopĺňania pre polia formuláru podľa vzoru Google. Tieto a iné veci sú ukázané v tomto video-tréningu.

Kto sa zaoberá HTML5, nemôže sa vyhnúť téme sémantiky. V tomto a nasledujúcom videotrénigu sa naučíte najdôležitejšie prvky, ktoré HTML5 prináša, pomocou ktorých môžete rozumne štrukturovať dokumenty. V skutočnosti je táto logická usporiadanosť nevyhnutná, ak chcete svoje webové stránky chrániť pred budúcnosťou.

HTML5 prináša množstvo nových štruktúrovacích prvkov. Ktoré to v zásade sú, bolo už prezentované v predchádzajúcom videu. Teraz ide o praktické použitie týchto prvkov. Pretože tieto prvky zabezpečujú sémantickú štruktúru dokumentov. V tomto videu sa naučíte najmä o dvoch prvkoch - article a section. Tieto zaisťujú základnú štruktúru HTML dokumentov. Na konci tohto videa sa ešte raz pohľadne na rozdiely medzi div, article a section.

V HTML5 nemôžu byť dokumenty len rozdelené na články a sekcie. V skutočnosti existuje ešte veľa ďalších prvkov ako header, footer a ďalšie pre semantické štruktúrovania. Určite sa oplatí bližšie preskúmať tieto prvky.

V tomto poslednom videotrénigu série prvkov sémantiky sa naučíte ďalšie štrukturovacie prvky. V skutočnosti HTML5 ponúka prvky pre navigačné oblasti, marginálie a pre zhrnutia.

V predchádzajúcich verziách HTML bolo vkladanie multimediálnych obsahov problémom. S kombináciou prvkov object a embed sa snažilo priniesť videá a zvuk na webové stránky. Bolo neisté, či sa vložené video skutočne prehrávalo. Aj v tejto oblasti sa s HTML5 udialo veľa zmien.

Ako vložiť videá, ste videli. Videá samozrejme nie sú všetko, čo môžete svojim návštevníkom na webovej stránke predstaviť. V tomto videotrénigu sa preto popisuje, aké možnosti vám HTML5 ponúka pri vkladaní zvukových súborov a Flash filmov. Pretože aj tieto veci je občas potrebné zobraziť na vašej stránke.

Rámce už nie sú k dispozícii v HTML5. Ich následníci, iRámce, však prežili aj v novej ére HTML a sú súčasťou HTML5. Zatiaľ čo klasické rámce rozdelujú stránku na samostatné časti, pomocou iRámcov je možné vložiť ľubovoľné zdroje do webových stránok.

HTML je určený na štruktúrovanie obsahu. Keď príde na navrhovanie stránky, prichádzajú do hry Kaskádové štýly (CSS). Je to kombinácia CSS a HTML, ktorá umožňuje previesť nevýraznú štruktúru HTML na atraktívne webové stránky. Dôvodov preto je dosť na to, aby sme si bližšie pozreli CSS.

Počas práce s CSS sa s vami stále znova stretnete s pojmom "selektory". Tieto selektory vám napokon určia prvky, ktoré majú byť formátované pomocou CSS. V tomto video-tréningu sa naučíte prvé selektory. Predstavia sa vám tu selektory elementov, ID a univerzálne. Keď budete dizajnovať vaše webové stránky pomocou CSS, budete s nimi mať každý deň čo robiť.

Niektoré selektory boli predstavené v predchádzajúcom videotrénigu. Samozrejme, CSS ponúka mnoho ďalších selektorov.

V tomto poslednom videoukážkovom tréningu so selektormi vám predstavím veľmi špeciálnu formu selektorov. Sú to tzv. pseudo triedy a pseudoelementy. Jedná sa o také selektory, ktoré sa nevzťahujú na konkrétne HTML prvky, ale sú generované zariadením na výstupe.

V tomto a nadchádzajúcom video-tréningu vám predstavím najdôležitejšie vlastnosti CSS. V tejto chvíli nejde o to, aby som vám predstavil referenciu k CSS. Skôr vám má byť prevedené pochopenie toho, čo všetko je s CSS možné. Začneme tu s formátovaním písma. V tomto video-tréningu budú predstavené všetky veci, ktoré sú priamo spojené s takzvanými fontami. Majte na pamäti, že ohľadom formátovania písma existujú ďalšie vlastnosti, ktoré budú ukázané v nasledujúcom video-tréningu.

V tomto video tréningu je prezentovaných niekoľko CSS vlastností, ktoré umožňujú opticky prispôsobiť texty a znaky. Napríklad je možné zmeniť medzery medzi jednotlivými písmenami a zarovnať texty. Tieto vlastnosti vám teda pomáhajú prezentovať texty príťažlivo.

Samozrejme, vo CSS nesmú chýbať definície farieb a grafické pozadia. Príslušné vlastnosti budú predstavené v tomto videoštúdiu. Skutočne má CSS na tejto oblasti mnoho možností. Takže nie je možné len jednoducho definovať farby a obrázky. Sú možné aj opakujúce sa pozadie.

Práve aj pri návrhu webových stránok budete mať čo robiť s definovaním vonkajších okrajov a medzier. V posledných videotréninkoch v tejto sérii sa mimochodom realizuje rozsiahly príkladový projekt, v ktorom sa prakticky demonštruje použitie týchto a iných CSS vlastností.

CSS ponúka niekoľko zaujímavých vlastností pre odseky a bloky textu, ktoré by som vám nechcel zadržať. Napríklad môžete zarovnať textové odseky doľava a doprava.

Keď sa hovorí o rámove, väčšina ľudí si pravdepodobne najskôr pomyslí na tabuľky. Rámiky v skutočnosti hrajú dôležitú úlohu v spojení s tabuľkami. Avšak pomocou CSS je možné vybaviť rámikymi aj iné elementy. A ako tieto rámiky nakoniec vyzerajú, je možné explicitne určiť pomocou definícií v CSS.

Ako definovať zoznamy, pravdepodobne už dobre viete. To sa konečne podrobne ukázalo v rámci tejto série. Z bežného pohľadu zoznamy nie sú nevyhnutne šikovné. Na to, aby boli vizuálne príťažlivé, existujú príslušné vlastnosti CSS. Aké sú a ako ich použiť sa dozviete sa v tomto video tréningu. V druhej časti pôjde o takzvané počítadlá, s ktorými je možné zaviesť aj zložitejšie číslovanie.

Keď príde na návrh webových stránok, tzv. Boxový model bude vaším neustálym spoločníkom. Pretože vďaka nemu sa nakoniec určuje, ako a kde budú elementy umiestnené.

Na to, aby ste mohli umiestniť prvky na webovej stránke na požadované miesta, musíte sa spoliehať na veľmi konkrétne vlastnosti CSS.

V predchádzajúcom video-tréningu bol tzv. Floating-Prinzip už stručne spomenutý. Téma je však taká komplexná, že sa sem ešte raz dôkladnejšie zameriame na toto Floatovanie. Je to skutočne dôležitý koncept v CSS. Len ak pochopíte túto tématiku, môžete skutočne vytvárať webové stránky.

V predchádzajúcich video-tréningoch boli vysvetlené základy práce s HTML a CSS. Teraz sa samozrejme chcú zozbierať prvé plody. V ďalších video-tréningoch preto bude postupne zostavená príkladová webová stránka. V tomto video-tréningu sa však najskôr naučíte rôzne varianty rozloženia. Preto by výber vhodnej formy rozloženia mala vždy byť na začiatku vašich úvah pri navrhovaní webovej stránky.

Pri našom praktickom projekte predpokladám typický stĺpcový layout. Predtým než však tento projekt prezentujem naživo a farebne, chcem vám konkrétne ukázať, ako môžete sami implementovať stĺpcové layouty. Dôraz bude kladený na dvoj- a trojstĺpcové layouty, pretože týchto sa stále vykorisťuje na väčšine webových stránok.

V nasledujúcich video-tréningoch vám ukážem, ako krok za krokom vytvoriť rozloženie webovej stránky. K tomu existujú rôzne prístupy. Často sa rozloženia vytvárajú v programe Photoshop. Jednotlivé prvky stránky sa potom vystrihujú a následne sa pomocou CSS a HTML opäť zlučujú do jednej webovej stránky. To isté sa deje aj tu. Avšak namiesto Photoshopu používam bezplatný program GIMP. Opísané kroky sa však dajú ľahko zopakovať aj v programe Photoshop.

Prvé kroky smerom k vlastnému rozloženiu boli urobené v predchádzajúcom video-tréningu. Samozrejme, stále chýba množstvo prvkov. Tieto budú pridané v tomto video-tréningu. Keď bude rozloženie hotové, pokračuje sa s vystrihnutím, tzv. Slicením. To je nakoniec pracovný krok, cez ktorý je možné vytvorený dizajn prakticky implementovať pomocou HTML a CSS.

Dizajn ste vytvorili. Teraz pristupujeme k jeho praktickému vykonaniu. V tomto videotrénigu spoločne vytvoríme základnú štruktúru HTML stránky.

Základná štruktúra stránky je nastavená, avšak zatiaľ pôsobí dosť skromne. V tomto video školení bude obsah stránky ďalej rozvíjaný. Zameranie sa v prvom rade sústreďuje na menu nachádzajúce sa v hornej časti stránky. Nasleduje pravé a dolné menu.

Jedným rozhodujúcim aspektom pre vizuálne príťažlivú webovú stránku je samozrejme jej typografia. Počas tohto seriálu ste už zistili možnosti, ktoré vám HTML a CSS ponúkajú pre formátovanie písma. V tomto video tréningu budú tieto možnosti využité na vylepšenie stránky. Mimochodom, nebudeme sa zaoberať iba klasickými variantami. Kľúčovým slovom pre použitie "exotických" písem je @font-face.

Väčšinou by sme mali svojim návštevníkom ponúknuť možnosť kontaktovania. V najjednoduchšom prípade si zapíšeme telefónne číslo a/alebo e-mailovú adresu. To sa dá takto urobiť, ale pre návštevníkov to nie je veľmi pohodlné. Preto v tomto videotrénigu vytvoríme formulár, cez ktorý si návštevníci veľmi jednoducho môžu s nami skontaktovať. A samozrejme pri tom využijeme možnosti, ktoré nám poskytujú HTML5 a CSS3.

Základná štruktúra a úplné základné formovanie formulára sú definované a ukončené. A skutočne, formulár už teraz pôsobí veľmi príťažlivo. Vďaka CSS3 však je tam ešte oveľa viac, pokiaľ ide o vizuálne vylepšenie formulára. V tomto video tréningu bude formulár ešte trochu upravený.

Už v tomto okamihu ste istotne venovali veľa času a práce na vývoji vašej webovej stránky. Začínajúc od koncepčnej práce na dizajne rozloženia až po jeho realizáciu v HTML a CSS. Dostatok dôvodov teda, aby sme vašu webovú stránku konečne predstavili svetu. Presne o tom je toto video-tréning. Ukážem vám, ako môžete umiestniť webovú stránku online. Najprv sa dozviete, ako získať správneho poskytovateľa a vhodný balík webového priestoru. Potom budú údaje nahrané na server s obľúbeným FileZilla. A potom, no potom je webová stránka skutočne online.

V tomto videovýcviku vám chcem ponúknuť malý náhľad do správneho vývojového prostredia na tvorbu webových stránok. Kto už napísal celé webové stránky alebo menšie jednotlivé stránky, zvyčajne už má tieto editory a môže tento videoklip preskočiť.

Je ukázané:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

HTML5 Boilerplate je mocná šablóna pre webové stránky v HTML5 a CSS3; robí HTML5 takmer úplne kompatibilný s CrossBrowserom a obsahuje niektoré veľmi dobré kódové šablóny v JavaScripte, CSS3 a samozrejme aj v HTML.

V tomto video-tréningu vám chcem predstaviť tieto funkcie. Pre začiatok v oblasti HTML5 a CSS3 aktuálne neexistuje lepšia šablóna.

V tomto video tréningu by som vám rád predstavil niektoré veľmi užitočné nástroje, s ktorými môžete vyvíjať HTML5 a CSS3.

K nim patria:
html5css3box.com
kuler.adobe.com (teraz https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com