Úvod do jazyka HTML

V prvom semestri sa budeme učiť základy jazyka HTML, pomocou ktorého sa naučíme tvoriť web stránku. Schválne som nepoužil slovo naprogramovať (webstránku), pretože jazyk HTML v podstate nie je tak úplne programovací jazyk. Nevieme ním prikazovať počítaču, aby niečo spravil, vieme ale niekedy povedať počítaču (prehliadaču – aktuálnej stránke), čo sa má stať, ak používateľ na niečo klikne a podobne. Týmto jazykom však nevieme vykonávať logické postupy a funkcionalitu, ako napríklad jazykom PHP, ktorý sa budeme učiť hneď v druhom semestri. Nejdem vás zbytočne pliesť hneď na začiatku, všetko časom spolu pochopíme :)

Čo to ten jazyk HTML teda je? Jazyk HTML je už dlhé roky štandardom pre tvorbu webových stránok. Každá webová stránka, ktorú vidíte, je napísaná v jazyku HTML. Je to značkovací jazyk, ktorý zahŕňa množstvo rôznych značiek. Každá značka označuje nejaký komponent (obrázok, text, tlačítko a iné) vo webovom dokumente. My sa teda ideme učiť tieto značky a tým budeme vedieť použiť veľa rôznych komponentov na našej webovej stránke. Poďme teda na to!

Na začiatok si budeme jazyk HTML skúšať na tejto stránke : http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default. V ľavom bloku budeme písať náš kód v jazyku HTML a po kliknutí na tlačítko nad pravým rohom tohto okna (See result) sa náš výsledok zobrazí v pravom bloku. Jednotlivými lekciami jazyka HTML sa na začiatku budeme učiť najpoužívanejšie značky a pracovať s nimi.

Základom každej webovej stránky je vo väčšine text. Jazyk HTML zobrazuje všetko, čo sa v danom dokumente nachádza napísané. Dokument – webstránka - je v podstate obyčajný textový súbor (napísaný v hocijakom textovom editore ako poznámkový blok alebo Word), ktorý má príponu .html. V našom prípade bude nateraz dokumentom ľavý blok simulátora. Ako bolo spomenuté, webstránka je textový súbor, takže skúsme všetko, čo je v našom bloku, na začiatku zmazať a napísať iba text Toto je nasa prva webstranka!. Po kliknutí na tlačítko sa v pravom bloku zobrazí len nami zadaný text. Vyzerá to zrejme sucho, ale v podstate je toto vaša prvá webstránka. Všetko, čo budeme písať v ľavom bloku, budeme neskôr písať do samostatného textového súboru, ktorý bude mať príponu .html. Ten si neskôr otvoríme v ľubovoľnom prehliadači (Firefox, Chrome, Internet Explorer...) a prehliadač nám zobrazí to, čo sa momentálne zobrazuje v pravom bloku, pretože daný textový súbor je v podstate webstránka. Je to súbor, ktorý obsahuje kód webstránky a prehliadač ho zobrazí.

V predchádzajúcom príklade sme do kódu zapísali iba čistý text, nepoužili sme žiadnu značku. Tento štýl nie je optimálny a v podstate ho nebudeme používať, slúžil iba na vysvetlenie zobrazenia textu v HTML. Webová stránka sa skladá z rôznych elementov – blokov - častí, ako napríklad blok textu, obrázok, tabuľka, odkaz a podobne. Každý tento element určujeme príslušnou značkou (tagom, tag = značka). Každú časť našej stránky sa budeme snažiť vkladať do nejakého elementu určeného príslušnou značkou, pretože neskôr budeme tieto elementy na stránke usporiadavať (rozloženie) a budeme na nich meniť dizajn, čiže to, ako vyzerajú (farba pozadia, veľkosť textu atď).