Ú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ď).

Máte nejakú otázku alebo Vám niečo nie je jasné? Napíšte nám na info@zacni-programovat.sk a poradíme!

Ťažko sa vám učí samému?

Máte problémy s niektorými časťami alebo sa neviete učiť sám? Využite našu možnosť individuálnej asistencie:

  • samostatný prístup
  • vysvetlenie nejasností prebraného učiva
  • úlohy a cvičenia navyše
  • všetko z pohodlia domova cez mail a skype

Pre viac info kliknite tu

Kľúčové slová prednášky

htmltvorba webstrankyjazyk htmlhtml pre zaciatocnikovhtml definiciaco je jazyk htmlznackovaci jazyk

IT ftip

Ako rozpoznáš introvertného programátora od extrovertného programátora? Extrovertný programátor sa pri rozhovore s tebou pozerá na tvoje topánky.