Webové stránky, blogy, webové stránky – v našej dobe už známe pojmy. S rozvojom internetu sa stránky na hosťovanie webových stránok stali neuveriteľne populárnymi a nie je to prekvapujúce: pre niektorých ľudí je vlastná stránka nevyhnutnosťou, pre iných je to príjemná zábava. V prvom prípade zvyčajne hovoríme o firmách, korporáciách, súkromných podnikateľoch, keď inzerujú akýkoľvek žiadaný produkt alebo službu. Druhá je o blogeroch.
Okrem toho existujú používatelia internetu, ktorí jednoducho hľadajú informácie, čítajú blogy, pozerajú videá a podobne.
Na vytvorenie kvalitnej webovej stránky existuje veľa možností. Zameriame sa na programovanie webu prostredníctvom HTML.
Čo je HTML
HTML je skratka pre Hyper Text Mark-Up Language. V preklade z angličtiny to znamená „Hypertextový značkovací jazyk“.
Inými slovami, HTML je súbor kódov, pomocou ktorých môžete vytvárať hlavné prvky stránky, jej rámec, napr.ako sa slová skladajú z viet.
HTML kódy sú napísané výlučne latinkou a nazývajú sa tagy a každý kód je uzavretý v lomených zátvorkách. Niektoré značky sú spárované, niektoré nie sú spárované.
Spárované znamená, že sa musia bezpodmienečne používať v pároch. Napríklad úvodná značka označuje, kde na webovej stránke začína, a záverečná značka označuje, kde končí. Ten sa od prvého líši prítomnosťou znaku lomky za lomenou zátvorkou. Napríklad je úvodná značka,je záverečná.
Nespárované štítky nepotrebujú partnera.
Mnohé značky môžu mať atribúty – dodatočné prvky, ktoré im dávajú konkrétnejší význam. Napríklad značka.
Kde sa používa HTML
Klasické chápanie toho, kde je potrebný HTML, je tvorba webových stránok.
V praxi to môže stačiť, keďže HTML umožňuje vytvárať hlavné prvky stránky, menu (vrátane viacúrovňových), nastavovať pozadie, vkladať text, obrázky, zvuk, video, upravovať písma a oveľa viac.
Existujú však aj iné jazyky, ktoré vám umožňujú pridať na webovú stránku zaujímavejšie a často potrebné prvky:
- CSS nastavuje štýly pre celý web bez nutnosti neustáleho predpisovania vlastností jednotlivých prvkov pomocou tagov – napríklad farby a písma textu.
- Skriptovací jazyk vám umožňuje vyvíjať a vkladať miniprogramy (skripty) na stránku, odbanálne estetické veci (zmena farby odkazu pri prejdení myšou) a končiac funkčnými (zbieranie emailových adries zákazníkov, telefónnych čísel).
- S PHP si môžete vytvoriť vlastnú knihu návštev alebo systém komentárov.
Pri vytváraní e-mailov na distribúciu sa používa aj HTML.
Čo je to odkaz
Umožňujú vám prejsť na inú webovú stránku, v rámci lokality aj externe.
Odkazy HTML sa bežne používajú:
- Prejsť na externý webový zdroj.
- Na pohyb po stránkach v rámci lokality.
- Prejsť na formuláre Google.
Často sa uvádza aj odkaz na zdroj v HTML, najmä preto, že pri kopírovaní materiálu z inej stránky musíte uviesť autora. V opačnom prípade môže kopírovanie bez uvedenia zdroja spadať pod definície porušovania autorských práv, krádeže obsahu a spätných reakcií. Okrem toho používanie vypožičaných, nejedinečných materiálov znižuje výkonnosť SEO a uvedenie odkazu na zdroj znižuje riziká.
Typy odkazov
V klasickom zmysle je odkaz adresa webového zdroja, na ktorý môžete prejsť kliknutím naň.
Okrem toho existujú hypertextové odkazy: text a obrázky. V týchto prípadoch je HTML odkaz „skrytý“pod nejakou vetou (slovom) alebo obrázkom a ak ho chcete sledovať, musíte kliknúť na text alebo obrázok.
Iné typy odkazov:
- Nenavštívené – odkaz, na ktorý sa počas konkrétnej relácie ešte nekliklo. Ak ste napríklad včera nasledovali tento odkaz, potom ste vypli počítač a dnes ho znova zapli, odkaz je teraz opäť nenavštívený, pretože sa začala nová relácia.
- Aktívne – v tomto stave je odkaz uložený na veľmi krátky čas: interval medzi kliknutím na odkaz a jeho sledovaním.
- Visited – odkaz, ktorý už bol aspoň raz navštívený počas jednej relácie.
V prípade bežných textových odkazov majú navštívené odkazy tendenciu meniť farbu, pokiaľ nie je uvedené inak.
Obrázok s hypertextovým odkazom nemení svoj vzhľad bez ohľadu na to, či je navštívený alebo nie.
Ako vložiť bežný odkaz
Mnohé webové zdroje vnímajú adresu stránky ako odkaz, okamžite na ňu dajú kliknúť a zvýraznia ju farbou. Napríklad, ak je adresa odoslaná cez messenger alebo e-mailom, kliknutím na ňu môžete prejsť na stránku.
V prípade, že si stránku vytvoríte sami pomocou HTML, musíte vložiť odkaz pomocou špeciálnej značky. Bude to vyzerať takto: adresa webovej stránky. Text odkazu v HTML musí byť špecifikovaný celý, s protokolom.
Ako vložiť textový hypertextový odkaz
Už skôr bolo povedané, že textový hypertextový odkaz plní rovnakú funkciu ako bežný odkaz, no vyzerá estetickejšie: namiesto adresy stránky, ktorá je často zbytočne dlhá, sa uvádza slovo alebo fráza. Napríklad vo vete „Tu hľadajte informácie“môžete odkaz skryťslovo „tu“. Bude zvýraznený a kliknutím naň sa používateľ dostane na požadovanú stránku.
Ako vytvoriť odkaz HTML sme už diskutovali vyššie. Pomocou rovnakej značky môžete vložiť textový hypertextový odkaz. Jediný rozdiel je v tom, že medzi značkami musíte zadať text, pod ktorým bude odkaz skrytý: viditeľný text.
Ako vložiť hypertextový odkaz na obrázok
Tu je to trochu komplikovanejšie. Používame rovnakú značku, ale namiesto textu musíte zadať cestu k obrázku.
Cesta je umiestnenie obrázka. Ak sa obrázok (fotografia) nachádza v službe zdieľania súborov, musíte zadať všetky priečinky pozdĺž cesty k obrázku pomocou lomky. Ak je to možné, môžete pridať aj odkaz na obrázok.
Na označenie
okrem src sú použiteľné aj ďalšie atribúty, ktoré vám umožňujú upraviť výšku, šírku a umiestnenie obrázka a oveľa viac. Niektoré z nich:
- Src – určuje cestu k obrázku.
- Lowsrc – identický s predchádzajúcim atribútom, ale určený pre obrázky nízkej kvality.
- Výška - výška obrázku.
- Šírka – jej šírka.
- Alt – popis obrázka. Keď umiestnite kurzor myši na fotku alebo obrázok, zobrazí sa text uvedený v tomto atribúte.
- Okraj – určuje hrúbku okraja okolo obrázka.
Atribúty sú uvedené za značkou a sú zahrnuté vjeho zloženie. Za atribútom musí nasledovať jeho hodnota. Napríklad pre atribúty „height“alebo „width“(výška, šírka) určuje výšku obrázka na webovej stránke. Jednotkou merania sú pixely, pokiaľ nie je uvedené inak.
Bude to vyzerať takto: <a href="adresa webovej stránky"
. Tieto atribúty pomôžu nastaviť vhodnú veľkosť obrázka. Orámovanie pomáha vytvoriť okolo obrázka neviditeľný okraj.
Vyššie uvedené atribúty platia samostatne pre značku na vkladanie obrázkov. Napríklad:.
Čo sú to kotviace odkazy
Vytváranie kotviacich odkazov je veľmi užitočná zručnosť. Často je potrebné rozložiť webovú stránku s dlhým textovým blokom alebo s niekoľkými podsekciami na jednej stránke. V tomto prípade môžete okamžite začať so zoznamom odkazov na podsekcie textu alebo webovej stránky a po kliknutí na ne používateľ prejde priamo do požadovanej sekcie.
Vytvorenie ukotvených odkazov si bude vyžadovať viac používania značiek atribútov ako iné typy odkazov.
Najprv musíte nastaviť celkovú hodnotu pre každý blok informácií alebo podsekciu textu pomocou atribútu top a potom ho priradiť k príslušnému odkazu.
Ich funkcie sú rozsiahlejšie, preto je vhodné najskôr zvládnuť tvorbu jednoduchších odkazov a až potom prejsť k tvorbe kotevných odkazov.
Tipy
Pomoc od skúsenýchprogramátori:
- Môžete to urobiť tak, aby sa informácie o odkaze zobrazovali pri umiestnení kurzora myši v HTML. Na to nám môže prísť vhod atribút alt, ktorý používame aj pre grafické prvky.
- Je možné vytvoriť zoznam odkazov pomocou HTML. Toto môže byť užitočné najmä pre ukotvené odkazy, ako aj vtedy, keď potrebujete vytvoriť zoznam webových zdrojov, na ktoré môže nasledovať odkaz priamo z aktuálnej webovej stránky.
- Pomocou CSS a JavaScriptu, ako aj niektorých funkcií HTML, môžete vytvoriť iný dizajn textových odkazov a hypertextových odkazov ako zvyčajne. Napríklad, keď umiestnite kurzor myši na odkaz, môže zmeniť svoju farbu a vrátiť sa na predchádzajúcu, keď je kurzor mimo neho. Dá sa to urobiť pomocou vlastného skriptu JavaScript. Farbu odkazu je navyše možné nastaviť na inú ako modrú pre nenavštívených alebo fialovú pre navštívených. Toto je práca CSS.
- Nezneužívajte odkazy. Webová stránka s množstvom nevhodných odkazov vyzerá nedbale a nedbale.
- Uistite sa, že používateľ chápe, že hypertextový odkaz s obrázkom je skutočne obrázkom, a nie iba obrázkom.
Záver
Odkaz na stránku v HTML je veľmi jednoduchý. Je dôležité dodržiavať všetky hlavné body tohto jazyka, pretože aj malá chyba môže viesť k tomu, že nebude výsledok a kód nebude fungovať.
