HTML & CSS pre začiatočníkov

HTML & CSS pre začiatočníkov (časť 01): Prvý pohľad na HTML, CSS a pod.

Všetky videá tutoriálu HTML & CSS pre začiatočníkov.

Hypertextový značkovací jazyk je domovským jazykom WWW. Prvá verzia tohto jazyka bola zverejnená v roku 1992. Odvtedy prešiel HTML mnohými modifikáciami a momentálne dosiahol verziu 5. (Version 5 zatiaľ oficiálne nebol schválený ako štandard, ale je už pomerne dobre podporovaný v súčasných prehliadačoch).

HTML je tzv. značkovací jazyk, ktorý umožňuje štrukturovať obsah. Za formátovanie obsahu sú zodpovedné štýly. O nich viac v ďalšej časti.

Za rozvoj HTML je zodpovedné World Wide Web Consortium (skratka W3C).

HTML & CSS pre začiatočníkov (časť 01): Prvý pohľad na HTML, CSS & Co.

Doporučujeme pravidelne sledovať stránku W3C, aby ste boli v obraze v súčasných novinkách v oblasti webu.

Ak sa zaoberáte HTML, kľúčová otázka znie: Ktorú verziu by som mal použiť? Samozrejme, môžete si predstaviť, že jazyk ako HTML je neustále aktualizovaný. Do jazyka sa pridávajú nové prvky, staré sa odstraňujú.

Tu sú najdôležitejšie verzie jazyka HTML:

• HTML (november 1992): To bola prvá verzia. Fokus bol výhradne na textové dokumenty.

• HTML 2.0 (november 1995): Pridané sú prvky pre obrázky a formuláre.

• HTML 4.0 (december 1997): Zavádzajú sa štýly, rámce a skripty.

• XHTML 1.0 (január 2000): Ide o nové formulovanie HTML 4.0 prostredníctvom XML.

• HTML5 (apríl 2009): Ide o stále pracovný návrh, ešte nie je schválený ako štandard.

V nasledujúcich návodoch bude zameranie na HTML5. S HTML5 by mal konečne prejsť zmenou svet HTML. Nová špecifikácia prináša mnoho zaujímavých noviniek. Medzi ne patrí napríklad pohodlnejšie formuláre, stavové indikátory, kresliace prvky a vylepšená štruktúra dokumentu. Okrem toho je možné s novým štandardom vložiť videá do webových stránok bez potreby doplnkových plug-inov a existuje rozhranie pre Drag & Drop.

Prvý návrh pre HTML5 bol už v roku 2004 zverejnený skupinou Web Hypertext Application Technology Working Group (WHATWG) pod názvom Web Applications 1.0.

HTML & CSS pre začiatočníkov (časť 01): Prvý pohľad na HTML, CSS a ostatné.



Dodnes síce HTML5 nebol oficiálne zverejnený ako štandard, ale výrobcovia prehliadačov už zahŕňajú mnoho funkcií HTML5 do svojich výrobkov. Nie je to prekvapujúce, keďže WHATWG je alianciou výrobcov prehliadačov Apple, Mozilla a Opera. Vznik WHATWG bol priamou reakciou na pomalý vývoj web štandardov zo strany World Wide Web Consortium (W3C).

Môžete sa opýtať, čo viedlo výrobcov prehliadačov k vytvoreniu vlastného štandardu HTML. Doteraz totiž malo W3C na starosti vývoj HTML. Z pohľadu výrobcov prehliadačov začali problémy tým, že W3C skonvertovalo HTML 4.01 na XHTML 1 bez osobitných obsahových opráv. Pôvodne W3C chcelo zaviesť XHTML 1 ako prvý krok k ustálenému webu založenému na XML. Na konci vývoja sa malo stáť XHTML 2. Presne na tento XML prístup sú výrobcovia prehliadačov, ktorí vidia určitú nepraktickosť a to nezohľadňuje skutočné želania používateľov (čo W3C samozrejme vidí inak).

Od roku 2007 W3C a WHATWG spoločne vyvíjajú špecifikáciu HTML5 alebo na nej pracujú. Aktuálne vývojové informácie o HTML5 nájdete na http://www.w3.org/TR/html5/.

HTML a CSS pre začiatočníkov (časť 01): Prvý pohľad na HTML, CSS a ďalšie.



Zameranie sa v nasledujúcich návodoch bude práve na HTML5.

CSS pre formátovanie

Určite ste už niekedy pracovali s šablónami dokumentov vo Word alebo iných textových spracovných programoch. Takže ak napríklad označíte riadok, môžete vybrať formátovaciu šablónu.

HTML a CSS pre začiatočníkov (časť 01): Prvý pohľad na HTML, CSS a spol.



V závislosti na tom, aké formátovanie bolo vybrané v šablóne dokumentu pre túto formátovaciu šablónu, sa zobrazí nadpis. Pri zmene šablóny dokumentu sa zmení aj vzhľad nadpisu.

Aký má Word vzťah k HTML? Aj pre HTML dokumenty existujú formátovacie šablóny. Tieto šablóny je možné definovať pomocou CSS (kaskádové štýly). Vďaka CSS je možné napríklad stanoviť, že hlavné nadpisy (h1) by mali mať veľkosť 22 pixelov a mať zelenú písmo Arial.

Štýly umožňujú prísne oddelenie štruktúry a rozloženia. Na štruktúrovanie dokumentov sa používa HTML. Vzhľad elementov definujete pomocou CSS.

Čo budete potrebovať

V nasledujúcich návodoch sa postupne oboznámite s HTML a CSS. Ak chcete vytvárať webové stránky na základe HTML a CSS, nepotrebujete žiadny zložitý softvér. V najjednoduchšom prípade používate – ak pracujete s Windows – štandardný editor.

HTML a CSS pre začiatočníkov (časť 01): Prvý pohľad na HTML, CSS a spol.

Ak je to síce nepohodlné, ale postačí to na začiatok. Ak preferujete niečo pohodlnejšie, mali by ste sa radšej pozrieť po "skutočnom" editori HTML. Jeden z klasikov je samozrejme Dreamweaver.

Tento editor však nie je zadarmo.

HTML & CSS pre začiatočníkov (časť 01): Prvý pohľad na HTML, CSS & ďalšie.

Na rozdiel od toho je pre súkromných používateľov zadarmo phase5 (http://www.phase5.info/). Ak teda chcete editor používať na súkromné účely, dostávate tu dobrý a bezplatný nástroj.

HTML & CSS pre začiatočníkov (časť 01): Prvý pohľad na HTML, CSS & Co.



Okrem editora by ste mali mať nainštalované najdôležitejšie prehliadače na testovanie webových stránok. Prehliadače totiž občas interpretujú HTML a CSS veľmi osobito. Vzhľadom na to je testovanie stránok v rôznych prehliadačoch povinné. Mali by ste mať inštalované aspoň Internet Explorer, Google Chrome a Mozilla Firefox. Ideálne je však testovať aj stránku v prehliadači Opera a na tablete/smartphone.