referaty.sk – Všetko čo študent potrebuje
René
Štvrtok, 7. novembra 2024
Základy HTML
Dátum pridania: 28.07.2014 Oznámkuj: 12345
Autor referátu: iTomas
 
Jazyk: Slovenčina Počet slov: 5 569
Referát vhodný pre: Stredná odborná škola Počet A4: 15.8
Priemerná známka: 0.00 Rýchle čítanie: 26m 20s
Pomalé čítanie: 39m 30s
 
ÚVOD
S modernými technológiami prichádzajú aj moderné požiadavky na ľudí. V minulosti stačilo, ak vedel bežný človek čítať, písať, počítať. Dnes je doba trochu iná a s príchodom informačnej doby a nových informačných technológií prišiel fenomén zvaný internet. Informácie na internete sa zobrazujú rôznymi spôsobmi a práve jednou z najčastejšie využívaných foriem je webová stránka – web.
Aby vedel bežný užívateľ získať informácie z webu, stačí, ak vie čítať alebo si nechá prostredníctvom počítača stránku prečítať automatickou čítačkou. No, na to, aby človek mohol zapísať informácie do webovej stránky, nestačí len vedieť písať, ale hlavne poznať kód HTML (XHTML).
Prostredníctvom tejto práce, si prejdeme základy tvorby WWW stránky (web stránky) a základné pravidlá, ktoré je potrebné dodržiavať pri písaní kódu HTML (XHTML).

1.HISTÓRIA VYTVÁRANIA WEBOVÝCH STRÁNOK
Skôr ako sa začneme zaoberať tvorbou základnej štruktúry WWW stránok, mali by sme sa oboznámiť so základnými pojmami a históriou internetu, resp. tvorby WWW stránok. Je dôležité pochopiť, prečo samotné WWW stránky vznikli a aký je ich prvotný účel. Ak nám bude známy primárny cieľ , môžeme efektívnejšie vytvoriť obsah samotnej webovej služby a následne ho poskytnúť koncovému užívateľovi.
1.1 WWW stránka
V dnešnej dobre je výraz internet bežne používaný termín. V skratke sa dá povedať, že Je to technológia, ktorá umožňuje prepojiť počítače medzi sebou. Jedna zo služieb internetu je Web. Ide o rozhranie, službu, vďaka ktorej môžeme vidieť textový a obrazový obsah internetu. To znamená, že primárny účel je zobrazovanie a zdieľanie informácií.
WWW je internetový protokol, ktorý hovorí počítaču, že bude využívaná webová služba internetu. Viacej podobne zameraných a vzájomne prepojených WWW stránok, napr. pomocou jednej navigačnej ponuky, tvorí webové sídlo, ktoré má konkrétnu WWW adresu (URL). Takému webovému sídlu hovoríme web.
1.2 Jazyk HTML a XHTML
Od relatívne jednoduchého pojmu WWW, môžeme prejsť k samotnej stránok pomocou technológie HTML, XHTML. Jedná sa o značkovací jazyk, ktorý sa skladá zo značiek, čo je vlastne čistý neformátovaný text (bez tučnosti, kurzívy, bez rôznych veľkostí písma, atď.), ktorého zmyslom je zobrazenie textového a obrazového obsahu webových stránok a prepojiť jednotlivé stránky medzi sebou pomocou odkazov. Pomocou HTML vytvárame logickú (významovú) štruktúru dokumentu – podobne ako sú v knihe nadpisy, podnadpisy, odstavce a pod.. HMTL nevytvára vzhľad WWW stránky, ale označuje samotné prvky webu, napr. toto je odstavec, toto je nadpis, toto je text, toto je obrázok, atď.. XHTML je novšia verzia jazyka HTML, v mnohých prípadoch zjednodušuje použite značiek HTML jazyka. Má prísnejšie pravidlá, čo je ale pri tvorbe web stránok výhoda.
XHTML vznikol ako odpoveď web dizajnérov (ľudia, ktorí vytvárajú WWW stránky), pre ktorých bol pôvodný HTML neprehľadný a mätúci. XHTML sa začal používať aj na vytváranie vzhľadu WWW stránky – pomocou niektorých značiek definoval typy písma alebo veľkosti. No stále platí, že XHTML dodáva častiam WWW stránky hlavne zmysel (logiku).
XHTML je kombinácia HTML jazyka a XML, ktorý má prísne pravidlá a používa sa k značkovaniu dát k ďalšiemu spracovaniu, napr. v databázach.
Platí však , že mnoho používaných značiek v jazyku XHTML má rovnakú funkciu aj jazyku HTML. Písanie značiek jazyka HTML (XHTML), hovor. kódovanie, má svoje pravidlá a presne určený syntax zápisu
2. INTERNETOVÉ PREHLIADAČE
Samotné počítače nerozumejú dokumentu napísaného v jazyku HTML (XHTML). Na preloženie HTML dokumentu do textovej, vizuálnej podoby sa používajú internetové prehliadače. Avšak na to, aby sa web stránka zobrazila korektne a v takej istej podobe v rôznych internetových prehliadačoch, je potrebné používať schválené technické štandardy, ktoré definuje spoločnosť W3C. Ide o spoločnosť založenú v 90. rokoch 20. Storočia, za účelom štandardizovania prostredia internetu. Jej cieľom je zaistiť spoločný vývoj technológií internetu a ich prijatie internetovými prehliadačmi. Preto spoločnosť významne spolupracuje s tvorcami internetových prehliadačov.
2.1 Zaužívané štandardy
Aktuálnymi platnými verziami značkovacieho jazyka HTML a XHTML je:
•HTML 4.01
•XHTML 1.0
Existujú však je novšie verzie HTML (napr. HTML 5.0), umožňujúce rozšírené používanie značiek a tým aj obsahu WWW stránky, no tieto sú stále vo vývoji a nie sú kompletne schválené spoločnosťou W3C. To však nezakazuje ich používanie, no samotné „neschválenie“ nám hovorí o tom, že nie každý internetový prehliadač dokáže korektne zobraziť informácie napísané v novšej verzii jazyka HTML, aj keď moderné prehliadače už štandardne podporujú novší typ jazyka HTML v.5.0. [1]
Problém je, že všetky schválené štandardy nie sú záväzné pre vývojárov internetových prehliadačov, preto je bežné je rovnaký dokument HTML nemusia zobraziť prehliadače tak isto. Takáto situácia nastáva hlavne pri starším verziách internetových prehliadačoch.Dnes existuje veľké množstvo internetových prehliadačov.
Mozilla Firefox
Tento veľmi obľúbený internetový prehliadač podporuje CSS veľmi dobre a striktne podľa štandardov. Prakticky platí, že pokiaľ sa vám stránky vo Firefoxe zobrazia, ako ste zamýšľali, tak ste všetko urobili správne. Firefox je vhodný ako hlavný vývojový prehliadač, takže pri tvorbe stránok ho priebežne kontrolujte práve v tomto prehliadači. Firefox prešiel vývojom niekoľkých verzií, od verzie 1.6 obsahuje funkcie automatickej aktualizácie, takže nie je potreba stránky prehliadať v inej než v aktuálne najnovšej stabilnej verzií, pretože je pravdepodobné, že u všetkých užívateľov v pomerne krátkej dobe po vydaní novej verzie prebehne aktualizácia. V dobe písania tejto práce bola najnovšia verzia 25.0 s jadrom Gecko 25.
Chrome
Internetový prehliadač Chrome je od spoločnosti Google. Patrí medzi najrýchlejšie prehliadače (rýchlosť načítavania webových stránok) vďaka vykresľovaciemu jadru WebKit. Jeho veľkou výhodou je plná paleta služieb implementovaných priamo do prehliadača. Jediné, čo stačí je, aby sa užívateľ prihlásil pod svojím kontom a môže okamžite využívať tento opensourcový prehliadač. Nevýhodou je, že spoločnosť Google je reklamná spoločnosť a preto užívateľov čaká na každom „rohu“ nejaká skrytá reklama.
Opera
Opera je prehliadačom pomerne malým zastúpením, ale o to vernejšou základňou svojich užívateľov. Aktuálne patrí k najrýchlejším prehliadačom (spolu s Google Chrome, pretože majú spoločné vykreslovacie jadro WebKit), čo je možno užívateľsky zaujímavé, ale z pozície web dizajnéra to nie je najpodstatnejšie. Podstatné je, že Opera je v prijímaní webových štandardov spoločnosti W3C zo všetkých prehliadačov najďalej. Špecifikáciu CSS 2 a CSS 3 zvláda presne a takmer bez akýchkoľvek odchýliek. Pokiaľ teda budeme chcieť Operu zvoliť ako svoj hlavný prehliadač, tak je to dobrá voľba. Problémom by mohla byť snáď len menšia základňa užívateľov- preto obvykle dostane prednosť Firefox alebo Google Chrome. V dobre písania tejto práce bola aktuálna verzia 17.00.
IE v. 8,9,10, 11
Je to najrozšírenejší prehliadač, ktorý je súčasťou operačných systémov Windows. Dlhodobo bol kritizovaný zo strany W3C za nedodržiavanie všeobecných štandardov, hlavne v CSS 2. Dnes sa používa CSS 3 a novšie verzie IE už zobrazujú stránky obstojne. Vzhľadom k tomu, že existuje ešte stále veľké množstvo užívateľov, ktorý používajú staršie verzie IE, hlavne IE 7, je potrebné optimalizovať HTML kód tak, aby sa korektne zobrazil aj týchto verziách. Aktuálny trend je však taký, že čoraz menej sa optimalizujú samotné weby pre staršie verzie a nútia tak užívateľov prejsť na novšiu verziu operačného systému alebo iný internetový prehliadač. Deje sa to hlavne kvôli implementovaniu nových bezpečnostných pravidiel a záplat. Aktuálne verzia IE má označenie 11.0 (11/2013).
Browser Android
Aktuálne jeden z najviac používaných mobilných internetových prehliadačov na svete. Je dôležité sa ním zaoberať práve kvôli jeho používateľskej základni. Systém Android patrí medzi najrozšírenejšie mobilné operačné systémy na svete a čo raz viac užívateľov používa na prehliadanie webových stránok práve mobilné zariadenie.
Safari
Safari je webový prehliadač vyvíjaný spoločnosťou Apple pre operačný systém Mac OS X a Windows. Po prvý raz bol uvedený ako hlavný prehliadač vo verzii Mac OS X 10.3 Panther a od verzie 10.4 Tiger je jediným prehliadačom dodávaným so systémom. Je tiež preddefinovaným prehliadačom v mobilnom telefóne iPhone. Safari používa typické rozhranie Mac OS X evokujúce vyleštený kov, správa záložiek pracuje na podobnom princípe ako databáza v iTunes, má integrované multimediálne technológie QuickTime a podporuje prehliadanie so záložkami, podobne ako Opera alebo Firefox. Štandardnou súčasťou Safari je tiež zabudované vyhľadávanie prostredníctvom Google (či iných vyhľadávači) a automatické dopĺňanie textových polí a formulárov na stránkach. Prehliadač má tiež zabudované blokovanie vyskakovacích okien. Je viac využívaný na mobilných zariadeniach ako na klasických počítačoch.
Doplhin
Dolphin Browser je prioritne určený pre mobilné zariadenia so systémom Android pre zariadenia fungujúce na iOS. Bil vyvíjaný spoločnosťou Mobotap. Bola to prvá alternatíva k bežne ponúkaným internetovým prehliadačom, ktorá plnohodnotne ponúkalo možnoť viacdotykových gest. Tento prehliadač takisto ako Chrome alebo Opera používa vykresľovacie jadro WebKit, vďaka ktorému je rýchlosť načítavania webových stránok veľmi vysoká. Dokáže tiež ako jeden z mála prehrať Adobe Flash v operačnom systéme Android a v iOS.
2.2 Nástroje na tvorby WEB stránok
Na, tvorbu WWW stránok existuje dnes už množstvo špecializovaných programov, jednoduchšie aj zložitejšie, prípadne vieme použiť už hotové šablóny.
Existujú však dva základné druhy takýchto programov:
1.WYSIWYG ( What You See Is What You Get) – takýto program, resp. editor web stránok má grafické rozhranie a tvorba stránky prebieha voľbou prvkov v grafickom prostredí, tzn. presne vidíme, ktorý prvok, značka, príkaz konkrétne vykonáva. Výhodou je, že nemusíme poznať kódovanie. Nevyžaduje sa teda znalosť jazykov HTML (X) a CSS. Nevýhodou je tento kód, na základe našich inštrukcií, tvorí samotný tento editor. To znamená, že nad kódom máme len veľmi malú kontrolu a preto, tieto editory nie sú príliš vhodnú pre bežné kódovanie. Medzi najznámejšie editory takéto typu patria Adobe DreamWiever, Microsoft FrontPage alebo Microsoft ExpressionWeb.
2.Štruktúrne editory – to sú vlastne obyčajnú textové editory, v ktorých píšeme kód, ale poskytujú nástroje, vďaka ktorým je tvorba kódu jednoduchšia a automatizovaná. Sú veľmi vhodných doplnkom a veľmi dobre ich pri tvorbe WWW stránok využijeme. Výsledok kód si potom musíme skontrolovať v internetovom prehliadači. Ako štruktúrny editor môže fungovať aj Adobe DreamWiever, ktorý mimo grafického WYSIWYG režimu obsahuje tiež čisto štruktúrny režim, v ktorom vidíme a píšeme iba kód. Nevýhodou je tento program je platený. Na naše potreby môžeme využiť bezplatné editory, napr. PSPad. Zvoliť ale môžeme samozrejme aj akýkoľvek iný editor, ktorý nájdeme na internete.
3.TVORBA WEB STRÁNKY
3.1 Štruktúra dokumentu HTLM a XHTML
Telo samotného HTML dokumentu uzatvárame medzi značky a . Všetko , čo sa ma na stránke zobraziť (texty, odkazy, atd.) vkladáme práve medzi tieto značky. Dokument XHTML sa zďaleka neskladá iba z tela. Postupne si prejdeme kostru dokumentu.
Doctype (document type, typ dokumentu) je zvláštnym elementom, pomocou ktorému hovoríme prehliadaču, aký typ dokumentu bude čítať = podľa akých pravidiel ma dokument vykresliť v prehliadači. Zápis tohto elementu je povinný obsahuje odkaz na špecifikáciu požitého štandardu jazyku HTML – teda na súhrn pravidiel, ktorými sme sa pri písaní dokumentu riadili. Existuje dve hlavne špecifikácie štandardov jazyk HTML:
1.Prísna (strict) – ide o špecifikáciu, ktorá sa presne a bez výnimiek drží štandardov jazyka.
2.Prechodová (transitional) – ide o špecifikáciu, ktorá vychádza z platného štandardu ale nevyžaduje presne dodržiavanie všetkých pravidiel.
Dokument XHTML sa skladá z nasledujúcich elementov, ktoré tvoria nasledujúce časti
Doctype
Element HTML
o Element head – hlavička dokumentu, pomocou ktorej do dokumentu zapisuje doplňujúce informácie
o element body – telo dokumentu kam patrí všetok obsah , ktorý sa zobrazí v prehliadači.
Element HTML slúži k otváraniu a uzatváraniu dokumentu. Všetky značky patriace do tohto elementu a nikdy sa nesmú vyskytnúť mimo neho. Parameter xmlns určuje tzv. menný priestor, ,ktorý sa používa v jazyku XML , z ktorého vychádzajú pravidla jazyka XHTML. Tento parameter a je ho obsah je u otvárajúcej značky HTML povinný a nikdy by sme nemali zabudnúť ho napísať. Pokiaľ sa používa editor ako PSPad, netreba ho písať. Najdôležitejším elementom, ktorý sa skrýva v hlavičke element title. Slúži k pomenovaniu dokumentu XHTML, teda k pomenovaniu WWW stránky. Titulok vkladáme medzi znak a a môže obsahovať iba bežný text. Nie je sem teda možné umiestniť obrázok. Znaky každého jazyka nájdeme v znakovej sade. Ta obsahu obsahuje všetky znaky určené pre určitú skupinu jazykov - bežné písmena abecedy, písmena s čiarkami, čí iné doplňujúce znaky, čísla , špeciálne znaky. Aby prehliadač vedel, akú znakovú sadu ma pre dokument použiť, je treba mu to v hlavičke dokumentu povedať. Všetky doplňujúce informácie v hlavičke dokumentu je možné umiestniť do značky meta , ktorú tiež použije pre určenie znakovej sady. Pre stredoeurópske jazyk, medzi ktoré patrí aj slovenčina môžeme použiť nasledujúce znakové sady:
Windows-1250
ISO-8859-2 – sada používaná v Unixových systémoch
UTF-8 – sada vhodná pre viacjazyčné dokumenty a stránky obsahujúce zvláštne znaky nepodporovane inými sadami. [4]

3.2 Značkovanie
Značka označuje časť obsahu dokumentu, čím mu dáva význam. Hovoríme tým vlastne prehliadaču: toto je odstavec. Značka sa zapisuje párovo, existujú teda dve alternatívy:
Značka otváracia- hovoríme prehliadaču, kde označená oblasť začína.
Značka uzatváracia – hovoríme prehliadaču, že tu označená oblasť končí.
Všeobecný zápis (namiesto slova značky bude treba použiť názov značky) vyzerá nasledovne:

Obsah značky

Značku uzatvoríme do ostrých zátvoriek, pri čom uzatváraciu značku doplňujeme lomítko pre názvom. Všetko uzatvorené medzi obidve varianty značky, je obsahom značky. Aby to nebolo tak jednoduché, existujú tiež značky nepárové. Ich zápis vyzerá nasledovne:
Nepárová značka sa tiež zapisuje do ostrých zátvoriek, ale za názvom značky vo vnútri zátvoriek nasleduje prázdna medzera, jedného znaku a lomítko. Nepárová značka žiadny obsah nemá. Účel týchto značiek je iný.
3.3 Texty
Všetko, čo sa má zobraziť v okne prehliadača, patrí medzi značky a . Značka označuje hlavnú časť dokumentu XHTML, teda vlastne jeho telo, napr. text. Všetko, čo sem zapíšeme, sa zobrazí v prehliadači. Postupujeme teda takto:
1.Do elementu napíšeme nejaký text.
2.Dokument uložíme (napr. súbor → uložiť)
3.Zvolíme svoju zložku a názov súboru zapíšeme vrátane správnej koncovky. Dokumenty jazyka HTML majú koncovku html. Názov súboru by mohol vyzerať takto: stranka.html.
4.Stlačíme tlačidlo uložiť.
Stránka uložená v súbore sa po otvorení v prieskumníkovi zobrazí v predvolenom internetovom prehliadači. Pokiaľ ju budeme chcieť otvoriť v inom prehliadači, tak budeme musieť použiť na otvorenie stránky príkaz „otvoriť ako...“
Text na stránke umiestnený medzi značky nehovorí nič o význame textu, prehliadač nevie, či má ísť o nadpis, odstavec alebo niečo iné. Odstavce textu a nadpisy sa tvoria pomocou párových značiek. Odstavec a nadpis vytvoríme nasledovne:
1.Medzi značky vložíme značky .
2.Medzi tieto značky napíšeme nadpis.
3.Za značkou stlačíme ENTER a zapíšeme značky pre odstavec: . Medzi tieto značky zapíšeme text odstavca.

Môj nadpis
Môj odstavec na stránke.

Dokument uložíme a spustíme v prehliadači.
Každý prvok v dokumente sa nazýva element. A elementom odstavca je p (skratka anglického slova paragraph, odstavec). Element p je určený k označeniu odstavca a má k dispozícii dve párové značky- a . Všetko medzi týmito značkami je obsah elementu p. A s týmto obsahom pracuje prehliadač. Prehliadač vie, že ide o odstavec textu, pretože text sme umiestnili do elementu p. Jazyk HTML ponúka 6 úrovní nadpisu (nadpis kapitoly, nižšia úroveň nadpis podkapitoly, nižšia úroveň – nadpis časti podkapitoly). Všeobecný zápis elementu nadpis vyzerá nasledovne: hX, kde h je element nadpisu X je číslo od 1 do 6 (označuje úroveň). Element h ( angl. headline, nadpis) teda môže vo svojich šiestich úrovniach vyzerať takto: h1, h2, h3, h4, h5, h6.

Nadpis prvej úrovne
Obyčajný odstavec textu pod nadpisom prvej úrovne.
Nadpis druhej úrovne.
Obyčajný odstavec textu pod nadpisom druhej úrovne
Nadpis tretej úrovne.
Obyčajný text odstavca tretej úrovne.
...

Kód by mohol pokračovať ďalšími úrovňami. Existujú elementy, vďaka ktorým môžeme slovám pridať nejaký význam:
Strong (silný) – používa sa k vyzdvihnutiu dôležitosti časti vety
Em (skratka z angl. emphasise, zvýraznenie) – slúži k zvýrazneniu časti textu.
Cite (citovať) – element určený k vyznačovaniu citácií v texte
Code (kód) – element k označeniu výpisu kódu
Ins (skratka z angl. iserted, vložené) – označuje vložený text
Del (skratka angl. deleted, vymazané) – označuje zmazaný a neaktuálny text.
Najviac sa používajú elementy strong a em, a to k zvýrazneniu časti textu vo vetách.
3.4 Zoznamy
Zoznamy sú veľmi silnou a používanou zbraňou Html obzvlášť XHLTML. Pomocou nich dokážeme štrukturovať text do odrážkovaných a číslovaných zoznamov. Tieto zoznamy nazývame podľa ich povahy:
Neusporiadane zoznamy – ich položky majú vzájomný vzťah, ale nezáleží na ich poradí v zozname, preto sú neusporiadané.
Usporiadané zoznamy – ich položky majú vzájomný vzťah a záleží na poradí, v ktorých sa zobrazujú.
Neusporiadane zoznamy sa skvelo hodia pre výpočty, ako napr. zoznam položiek nákupu, ponuku služieb firmy či zoznam doporučenej literatúry. HTML ponuka pre tieto druhy zoznamov párovú značku
    - unordered list. Položky zoznamu definuje druhý element, ktorý je spoločný pre oba typy zoznamu a nazýva sa
  • (list item, položka zoznamu) – používa párová značky
  • a
  • .
    Usporiadané číslované zoznamy sa používajú, keď chceme na svojich stránkach uviesť nejaký postup alebo recept v rámci krokového postupu. Každý krok má byť logicky označený číslom. Usporiadaný zoznam definuje v HTML element ol (ordered list, usporiadaný zoznam) a jeho položky element li.
    3.5 Odkazy
    Odkazy sú tým najdôležitejších . čo internetové stránky ponúkajú. Vďaka nim sa môžeme dostať na inú stránku toho istého alebo iného webu na internete. Odkaz ale môže viesť tiež k nejakému textovému dokumentu, hudobnej nahrávke či videu. Odkaz je tiež veľmi dôležitý, pretože z odkazov sa môže skladať navigačná ponuka webu. Odkazy sa rozlišujú:
    Odkaz hypertextový – vedie na inú internetovú stránku (na iný dokument HTML) či na akýkoľvek iný súbor (textový dokument, skladba v MP3, ..)
    Menné odkazy – označujú konkrétne miesto na WWW stránke, čo môže byť cieľom hypertextového odkazu. Bez hypertextových odkazov by sa Internet neobišiel (slovo hypertextový je súčasťou názvu HTML). Hlavných účelom hypertextových odkazov je umožniť prechod k inému textu (na inú WWW stránku) kliknutím na nejaký text , pripadne obrázok. Obvykle ide o podčiarknutý text na stránke, prípadne o grafické tlačidla.
    Pre odkaz sa v jazyku HTML elementu a (skratka angl. anchor, kotva), v dokumente ju zaznačíme pomocou značiek a . Do elementu a patri zvyčajne text alebo iné elementy – obrázok. Značka a však nie je schopná preniesť nad na iné miesto na internete. Potrebuje pomocníka, ktorého nazývame v jazyku HTML parameter. Parameter sa zapisuje do otváracej značky, nasleduje znak = a hodnota vložená do úvodzoviek. Tak ako jazyk HTML definuje elementy s ich značkami, tak definuje aj parametre a ich hodnoty. Každý parameter má svoje meno, je možné ho použiť len u niektorých elementov a môže nadobudnúť len urvite hodnoty. [6]
    Parametrom, ktorý je potrebný k určeniu cieľu odkazu href , a jeho hodnotou je URL – všeobecne hovoríme adresa URL. Adresou URL je WWW adresa. Adresa URL môže mať dve podoby:
    Absolútna adresa – plná WWW adresa dokumentu na internete, napr. http://www.mojestranky.sk/stranka.html. Skladá sa z protokolu (http), WWW adresy a za lomítkom názvu súboru. Za lomítkom pred názvom súboru, môže prísť ešte iná zložka – v tom prípade by adresa vyzerala takto: http://www.mojestranky.sk/adresar/stranka.html.
    Relatívna adresa – cesta k dokumentu v rámci jedného webového sídla. Relatívna adresa sa vždy odvíja od umiestnenia dokumentu, z ktorého odkazujeme.
    Odkaz nemusí viesť iba na inú internetovú stránku, dokument HTML, ale jeho cieľ môže byť ktorýkoľvek súbor umiestnený na internete. Stačí k nemu poznať cestu alebo WWW adresu. To môžeme využiť nasledovne:
    Môžeme tak na internete zverejniť dokument vo Worde čí dokument vo formáte PDF.
    Môžeme odkazovať na hudobnú skladbu čí video
    Môžeme odkazovať na akýkoľvek iný súbor
    Pokiaľ je cieľom odkaz napr. textový dokument alebo hudobná nahrávka, môže nastať jeden z dvoch scenárov:
    1.Prehliadač sa podľa prípony súboru pokúsi nájsť program určený k otvoreniu tohto typu súboru. A súbor sa otvorí v danom programe.
    2.Pokiaľ k typu súboru počítači nie je priradený žiadny program, prehliadač otvorí dialóg, v ktorom ponúkne stiahnutie súboru, v ktorom sa súbor tvorí.
    Ako ciel odkazu môže slúžiť tiež e-mailová adresa so známym zavináčom. Môžeme tak ľahko vytvoriť odkaz, vďaka ktorému je možné používateľovi stránky napísať e-mail. Pred e-mailovou adresou sa objavuje záhadný výraz mail to – tento výraz je treba vždy uprednostniť zápisom samotnej e-mailovej adresy, pretože tým hovoríme prehliadaču, že cieľom odjazd hre práve e-mail.

    3.6 Obrázky
    Obrázky používame na webových stránkach dvojakým spôsobom:
    Obrázky vložene pomocou kódu jazyka XHTML do tela stránky, slúži ako doplnok textu, ku ktorému sa bezpodmienečne vzťahujú. Takéto obrázky sa nepoužívajú k dekorácií bez určeného významu.
    Obrázky na pozadí, obrázky tlačítok a iná grafika pozívať ako dekorácia sa do stránky vkladajú pomocou kaskádových štýlov (CSS).
    Obrázky čí fotografie môžeme uložiť v rôznych formátoch:
    Gif – obrázky v tomto formáte sa obyčajne používajú pre rôzne tlačidla doplnkovú grafiku s malým počtom farieb. Ponuka i jednoduché animácie na základe skladania viacerých obrázkov do jedného a tiež priehľadnosť.
    Png – ide o podobný formát ako gif, ale umožňuje používať viac farieb preto je vhodný i pre menšie fotografie. Ponuka lepšiu priehľadnosť, ale nie je použiteľný pre animáciu.
    Jpg – tento formát sa najčastejšie používa pre ukladanie fotografii, ktoré chceme použiť na internete. Pracuje s veľkým počtom farieb. Nie je možná animácia.
    Fotografia, ktorú si stiahneme s fotoaparátu do počítača je veľmi objemná- na internetovej stránke musíme dávať pozor na to, aby grafika malo čo najmenšiu veľkosť. K tomu slúžia vyššie uvedené formáty, ktoré používajú pri uložení obrázkov tzv. kompresiu. Pomocou nej je možné zmenšiť veľkosť súboru obrázku na čo najmenšiu hodnotu.
    Element jazyk HTML, ktorý sa používa pre vloženie obrázkov do webovej stránky, sa nazýva img (image, obrázok). V skutočnosti sa nevkladá do stránky samotný obrázok , ale zo spomínaného elementu budeme na neho odkazovať pomocou parametru src (source, zdroj) a adresy url. Značka img je nepárová, takže netreba zabudnúť na lomítko pred uzatváracou zátvorkou. Značka img je práve onou značkou bez obsahu, pretože neobsahuje samotný obrázok, ale odkazuje na jeho zdroj (=súbor). Obrázok je uložený vo svojom vlastnom súbore a nie v tele dokumentu XHTML, kam píšeme iba značku img z odkazu na súbor obrázku. [7]
    Parameter title slúži k vytvoreniu k titulku obrázku. Ten sa zobrazí v bubline, pokiaľ na obrázok prehliadači prejdeme myšou. Cieľom je doplniť pre užívateľa komentár. V prípade fotografie môžeme napr. uviesť miesto, kde bol snímok odfotený. Parametre alt slúži k popisu obsahu obrázku. Tento text bežne neuvidíme, pretože nesúž primárne pre užívateľa. Na stránke sa zobrazí iba vtedy, pokiaľ prehliadač nenájde súbor obrázku, ktorý odkazuje v parametri src. Sú dva dôvody prečo parameter alt treba používať:
    Pokiaľ sa obrázok z akéhokoľvek dôvodu nenačíta, užívateľ nepríde o obsah. Pokiaľ nepoužijeme parameter alt a obrázok sa nezobrazí, užívateľ sa nedozvie, že tu obrázok mal byť a ani čo obsahuje.
    Obsah stránky na internete čítajú a indexujú vyhľadávače. Tie samozrejme nedokážu zistiť, čo je obsahom obrázku. Parameter alt tak hrá nezastupiteľnú úlohy v tzv. optimalizácií pre vyhľadávače - SEO.
    K formátovaniu obrázkov je potrebný nejaký graficky editor.
    Adobe Photoshop - vysoko kvalitný editor s funkciou obrázkov pre web. Ide o komerčný, platený produkt a zohnať jeho možne v dvoch edíciách, ta lačnejšie sa vola Photoshop Elements.
    Corel Paint Shop Pro – veľmi kvalitný komerčný software, ponuka tiež možnosť ukladania obrázkov pre web.
    Gimp – voľne dostupný, veľmi kvalitný software pre úpravu obrázkov a grafiky. Je možné tiež ukladať súbory pre web.
    Skicár vo Windowse – súčasť operačného systému Windows. Nemal by slúžiť ako náhrada grafického software, pretože poskytuje len veľmi základne funkcie. Neponúka ukladanie obrázkov pre web.
    Je dôležité mať nastavený správny farebný režim. V nejakom editore otvoríme fotografiu, ktorú chceme vložiť do WWW stránky. Prvým krokom bude prevod do farebného módu RGB.
    1.Po otvorení, v ponuke obraz klikneme na režim.
    2.Vyberieme príkaz RGB farba.
    Ďalším krokom je potreba upraviť veľkosť fotografie tak, aby bola pre našu stránku vhodná. Čím menší rozmer fotografie, tým je menšia veľkosť výsledného súboru.
    1.V ponuke obraz klikneme na veľkosť obrázku.
    2.V zobrazenom dialógu v poliach šírka a výška ako jednotku obrazovkové body- pixely.
    3.Do jedného z polí výšky alebo šírky napíšeme výslednú veľkosť ô druhy rozmer by sa ma upraviť automaticky. Obrázky na webovej stránke obvykle umiestňuje v menších veľkostiach , napr. 200x200 pixlov a pomocou odkazu odkážeme užívateľa na plnú veľkosť fotografie, ktoré môže mať veľkosť napr. 800x600.
    4.Kliknutí na tlačidlo OK sa mení veľkosť obrázku.
    Posledným krokom je uloženie fotografie vo formáte jpg, pretože ten je najvhodnejší práve pre fotografie a obrázky s mnohými farbami.
    1.V ponuke súbor klikneme na príkaz uložiť pre web a zariadenie.
    2.V zobrazenom dialógu sa prepneme na záložku dve naraz – umožní nám to porovnať originálny obrázok a obrázok po kompresii (teda ako bude vyzerať výsledná fotografia)
    3.Ďalej je treba nastaviť v tabe formát jpg a v tabe kvalita pomer zachovanej kvality snímku. Čím vyššie číslo , tým výšia kvalita.
    4.Zvolíme voľbu progresívny – prehliadač bude takýto obrázok načítavať tak, že začne s menej kvalitných obrázkom a postupne ho bude skvalitňovať. Tento spôsob sa hodí pre užívateľov s pomalým pripojením.
    5.Klikneme na OK, zvolíme názov súboru a zložku, do ktorého chceme obrázok uložiť a klikneme na OK. [8]
    ZÁVER
    K tvorbe kvalitných webových stránok nestačí len poznať HTML kód, ale aj vedieť pracovať s grafickým editorom. Akékoľvek grafické znalosti sú vítané, pretože samotné stránky netvorí len obsah ale aj vizuálne stvárnenie. Existuje však aj omnoho jednoduchšie riešenie ako mať vlastné webovú stránku, stačí si kúpiť už hotovú webovú šablónu s hotovým HTML kódom a pripraveným grafickým rozhraním.
    Pokiaľ chceme tvoriť webové stránky a ďalej sa rozvíjať v tejto disciplíne, prípadne sa tým aj živiť, je znalosť základných pravidiel kódu HTML nevyhnutnou podmienkou.

    ZOZNAM BIBLIOGRAFICKÝCH ODKAZOV


    [1] Domes, M. Tvorba WWW stránek pro úplné začátečníky. Brno: Computer Press, 2012. 238 s. ISBN: 978-80-251-2160-3

    [2] Google.com. Google Analytics. [Online]. 2013 [cit. 2013-03-20]. Dostupné na internete:

    [3] Doba.sk. 22 zaujímavých máp, ktoré zmenia váš pohľad na svet [Online]. 2013 [cit. 2013-03-20]. Dostupné na internete:

    [4[ Dawson, A. Výjimečný webdesign. Jak tvořit osobité, přítažlivé, použitelné weby..Brno: Computer Press, 2012. 332 s. ISBN: 978-80-251-3719-2

    [5] Ostatic.com. PSPad [Online]. 2013 [cit. 2013-03-20]. Dostupné na internete:
    [6] Kiwiki.info. HTML code [Online]. 2013 [cit. 2013-03-20]. Dostupné na internete:
    [7] Birdz.sk. Ako vyrobiť WWW stránku [Online]. 2013 [cit. 2013-03-20]. Dostupné na internete:
    [8] Deja-vix.sk. Step by Step [Online]. 2013 [cit. 2013-03-20]. Dostupné na internete:
    ZOZNAM POUŽITÝCH SKRATIEK
    WWW World Wide Web – hypertextový informačný internetový systém
    URL Uniform Resource Locator – jednotný ukazovateľ zdroja
    HTMLHypertext Markup Language – hypertextový značkovací jazyk používaný pri písaní kódu webových stránok
    XHTMLeXtensible Hypertext Markup Language – rozšírený hypertextový značkovací jazyk používaný tiež pri písaní kódu webových stránok
    W3CWorld Wide Web Consortium – spoločnosť určujúca štandardy pri tvorbe webových stránok
    CSSCascading Style Sheets – kaskádové štýly používane pri HTML kóde
    HTTPHypertext Transport Protocol – protokol pre prenos HTML dokumentov medzi servermi a klientmi služby WWW
    GIFGraphics Interchange Format – formát obrázkov
    PNGPortable Network Graphics – formát obrázkov
    JPGJoin Photographic (experts) Group – formát obrázkov vyvinutých konzorciom JP(E)G

 
Galéria k článku [3]
Copyright © 1999-2019 News and Media Holding, a.s.
Všetky práva vyhradené. Publikovanie alebo šírenie obsahu je zakázané bez predchádzajúceho súhlasu.