V tejto kapitole sa naučíte:
- Chápať HTMl a XHTML
- K čomu su CSS
- Ako HTML pracuje
Hypertexový značkovací jazyk HTML je základný značkovací jazyk určený k tvorbe webových stránok. Je spoločenskou nitou,ktorá virtuálne spojuje každú webovú stránku, od rozsiachlých firemných stránok ako napríklad Microsoftu až po jednoduché stránky triednych projektov na základnej śkole.
Nenechajte sa zastražiť frázou „značkovacý jazyk„. Tvorba webových stránok je oveľa jednoduchšia ako písanie poćítačoveho programu ako je napríklad Microsoft Visual Basic alebo C++. Jednoduchú stránku s nejakým článkom môžete vytvoriť behom 10 minút v obyčajnom programe na úpravu textu ako je napríklad Poznámkový Blok. Nepotrebujete žiaden špeciálny software alebo rozsiahle školenie.
V tejto kapitole sa naučíte základy HTML a jeho mladšieho brata XHTML. Ukážem vám,ako z obyčajného textu vytvoríte atraktívne formátovanie,jak pracovať s grafikou a odkazmi. Zpoznáte čo sú to kaskádove styly CSS.
Keďže každý si môže určiť o čom bude jeho stránka,tak aj ja som sa rozhodol že budem písať práve o mojom najobľúbenejšom meste New York ;) každý si môže vymislieť vlastnú webovú stránku napríklad o sebe,o svojom aute,domácom miláčiku… Po preštudovaní všetkých Kapitol od začiatku po koniec budete mať vytvorenú vlastnú webovú stránku ktorá bude obsahovať obrázky,odkazy,navigačné prvky, a dokonca zvukové či video efekty. Všetko sa naučite na vaších vlastných webových stránkach.
Porozumenie jazykom HTML a XHTML
Jednoducho povedané webová stránka je obyčajný textový súbor zakodovaný HTML tak, že sa u webových prehliadačov zobrazi ako pekne zformatované. Tu vám prinášam význam jednotlivých slov z ktorých sa skladá skratka HTML:
- Hypertext (hypertextový) Text,na ktorý keď kliknete aby ste sa dostali z jedneho dokuemntu na iný. Je to schopnosť webových stránok vzájomne na seba odkazovať.
- Markup (Značkovací) Značky,ktore dajú obyčajnému textu štruktúru a formát. Obyčajný text je proste označený pomocou značiek.
- Language (jazyk) Poukazuje na skutočnosť že HTML je považovaný za jazyk… Značkovací jazyk.
Ako HTML pracuje?
Kód vnútri súboru HTMl je uzavrený medzi značkami. Tieto značky signalizujú kde sa má použit formatovanie,ako ma vyzerať rozdelenie slov,aké obrázky sa na určitých miestach použijú atd.
Predpokladajme že chceme aby slovo ktoré napíšeme bolo napísane kurzivou:
Mesto New York
v HTML neexistuje tlačítko ktoré to urobý za nás ako napríklad v programe na formátovanie textu. Preto musíme slovo ktoré chceme aby bolo napísane kurzivou označit značkami. Uvodzovacia značka pre kurzivu je
<i>
a ukončovacia značka je
</i>
To znamená že náš kód aby slovo Mesto bolo napísane kurzivou bude vyzerať takto:
<i>Mesto</i> New York
Výsledok: Mesto New York
Slovo Mesto vložíme doprostred mezdi tieto určené kódy.
Takže už asi vieme ako budeme cez HTML programovať :) Samozrejme,nebude to len pridávanie slov mezdi riadky a preto čítajte ďalej.
Abyste pochopili, ako vznikol tento značkovacý jazyk musíte vedieť že v dávnych dobách bolo internetové pripojenie neskutočne pomalé a každý sa pripojoval pomocou modemi z ryćhlosťou od 2400 b/s do 28,8 kb/s A takúto rýchlosť si nevieme v dnešnej dobr ani predstaviť. Textové súbory sa prenášajú rýchlejšie ako binárne súbory,takže vśetke systémy pre zdielanie informácii musley býť znakovo orientované aby boli obľubené. Inak by každý čo čakal na načítanie stránok zaspal :D
Webový designéry chceli aby boli ich stránky atraktívne. Nemohli teda stránky len tak naformátovať v textovom editore, pretože textový editor zpracováva formátovanie inak a nemohli vedieť ktorý z nich by návštevnik mohol používať.
Tvorcovia webu teda prišli zo super riešením. Namiesto posielanie formatovaných stránok cez internet vytvorili aplikáciu-Webový prehliadač ktory by mohol intrpretovať kód v prostom textu HTML ako formatovacie inštrukcie. Text by mohol byť poslaný rýchlejšie a efektívne v podobe obyčajného textu a tak na lokálnom PC spracovaný a zobrazený ako pekný atraktívny a graficky.
Pre všetke HTMl texty to fungovalo výborne,ale webový designéry chceli do HTML začleniť i grafiku. Aby to bolo možné vytvorili teda HTML tág
<img>
pomocou ktorého programátory odkazovali obrázok uložený na servery a spracovaný do dnešnej podoby. Lenže tág <img> je nepárový a to znamená že nemá ukončovaći Tag. Pri kurzive sme slovo Mesto dali do tágov <i> a ukončili ho tágom </i>. teda značka <img> obsahuje tzv. Parameter. Parameter je text vo vnútri značky ktorý obsahuje informacie o tom čo by mala značka spôsobyť. Na to používame ZDROJ.
Dáme si mänši príklad:
Pre značku <img> môžete napríklad určiť zdroj pomocou parametru src takto:
<img src="https://www.pocitacovyexpert.6f.sk/ukazky/obrazok.jpg">
Výsledok
Pochopili ste že? V značke <img> sme použili parameter src=“obrazok“ a určili tak že sa zobrazi na stránke súbor-obrázok http://www.skscript.atknet.sk/images/obrazok.jpg ukončime to len znamienkom vätší >
Veľa značiek obsahuje nepovinné alebo povinné parametry. V naších kapitolách pocitacovyexpert.6f.sk uvidíte veľa príkladov.
V HTML môžete vytvárať taktiež odkazy z jednej stránky na inú. Pokiaľ klikne návštevník na stránky na odkaz, nahraje prehliadač odkazovanú stránku alebo prejde na označené miesto,teda záložku na rovnakej stránke. Odkazy sa naučíte vytvárať v 5 tutoriále na našej stránke počitacovyexpert.eu
Značka pre odkaz je
<a>
Je párova ale vätšina ľudí by to bez parametru pre urćenie súboru alebo miesta na ktoré odkazuje, nepoznala. Kód pre vytvorenie odkazu zo slov Kliknite Sem, a po jeho klinutí aby ste sa dostali na index.html je následovný:
<a href="index.html">Kliknite Sem</a>
V HTML je toho ale oveľa viac ale základ funguje presne ako som vám to popísal.
Text je označený znaćkami ktoré ukazujú to,kde sa maju umiestniť prvky ako je formatovanie,odkazy a grafika, tieto značky potom premení webový prehliadač a zobrazí stránku v naformátovanej podobe. Trik je samozrejme v tom,že musíte vedieť ktoré znaćky použíť a kde a aké parametry sú za potrebné. O tomto je presne HTML a ja sa vás to pokúsim naučíť.
Jak do toho zapadá XHTML?
HTML trpelo nedostatočnou štandarnizáciou už od svojho predstavenie v roku 1990. Prvé niekoľko rokov nebola za štandarnizáciu zodpovedná žiadna organizácia takže jeho úpravy boli dosť divoké. Iniciatívny webový vývojari chcely pre svoje weby nové veci ale HTML im to neumožnilo. A viete čo urobili? Vymislely si vlastné nové kódy :)
Spoločností ktoré dodávajú webové prehliadače integrovalo do svojích prehliadačov tieto neštardantné kódy.
Časom vznikla organizácia pre správu HTML a bolo to konzorcium World Wide Web Consortium v skartke W3C. Práve táto organizácia vydala niekoľko oficiálnych verzii HTML ktoré obsahovaly nové značky a možnosti. lenže stále to nebolo ono. Nová verzia priniesla nové veci,ale zatienila staré. To znamenalo ak ste chcely použíť pri tvorení stránky typ písma z verzie HTML 2.0 z roku 1995 použili ste tág <font> . Ale keby ste používaly HTML 4.01 z roku 1999 tak by ste <font> už nepoužili. namiesto toho by ste museli použit pre urćitý tip písma kaskadové styly v skartke CSS. Dobrz webovy prehliadač by vśak mal podporovat vśetke značky,ale tak viete nie každy prehliadač to tak má. Tie známe to ale podporuju a to sú napríklad IE,Opera,Firefox,Safari,Chrome.
Aj ked W3C dohliadalo prísne na kontrolu HMTL,svojský vývojari chcely stále od HTML viac a viac. W3C tak dalo na nich a vytvorili HTML do najnovších štandardov.
Existuje jazyk príbuzny HTML a to je Extensible Markup Language XML. Vyšiel v roku 2001. XHTML je teda HTML napísaný v širšom jazyku XML. Keďže je v praxi takmer rovnáky ako HTML tak aj množina značiek je takmer rovnaká.
V XHTML si musíte dať pozor na jednu dôležitú vec a tou je že XHTML netoleruje Chyby. Dajme si príklad:
V HTML predpokladajme že každý odstavec začneme značkou <p> a ukončime značkou </p>. Ale v HTML keby že chcete,alebo zabudnete možete ukoncovaciu značku proste vynechať. Lenže v XHTML by to teda nefungovalo. Je veľa podobných blbostí na ktoré teda XHTML veľmi citlivé. Neskôr vás na to upozorním dúfam že nezabudnem :) .
V našom tutoriále budeme výlučne používať názov HTML keďže na to sme zvyknutý,ale dá sa z toho naučit hneď aj XHTML,je to na pár minút.
Načo nám su kaskádove styly-CSS?
Webový designéry ktorý pre svoju tvorbu webových stránok rozsiachlych rozmerov používaly prvotné HTML,boli často znechutený často opakujúcom sa kódu,ktorý ich prácu značno predĺžovalo. Napríklad stránka s 200 stránkami z rovnakou štruktúrou a designom. Týto programátory museli vždy upravovať a vkládať rovnaké kódy do každej z 200 stránok. A preto vymislely Kaskadové styly. Majú príponu .css napríklad styly.css . Do toho sa vložil kód obsahujúci design stránky z čoho vznikla šablóna a pomocou určitého parametru sa vložil jeden riadok do každej stránky. Týmto sa ich práca o 180 stupňov zjednodušila. Súčasná verzia HTML 4.01 podporuje kaskádové styly.
Aj keď môžte stále formátovať svojú stránku pomocou starších metód tak vätšina webových designérov a programátorov používaju CSS. Naozaj to není nič tažké a pochopíte to. Na prvý pohľad to môže vyzerať ako zastrašovanie,ale ak idete tvoriť niekoľkostránkovu prezentáciu námaha v podobe kaskádovych stylov sa omnoho násobne oplatí.
Takže kapitolu 1 máme za sebou. Túto teóriu by ste ako HTML programátor mali ovládať. V Kapitole 2 nás čaká stanovenie štruktúry dokumentu HTML stránky,definicie typu dokumentu,vytvorenie hlavičky a tela dokumentu HTML,nastavenie názvu a kľúčových slov pre stránku vhodne pre vyhľadávače ako Google,vytvorenie odstavcov a zalomenie riadkov,prezeranie webovej stránky v prehliadači,vytváranie,ukládanie a prezeranie zmien.