Image
24.7.2016 0 Comments

Vytvárame webové stránky / 1. časť

Spôsobov, ako si vytvoriť webovú stránku, je niekoľko. V prvom rade môžete využiť editor kódu HTML, redakčný systém alebo rôzne špecializované nástroje. Prvý spôsob dáva plnú kontrolu nad kódom používateľovi a spája sa s editorom WYSIWYG, teda takým programom, kde pracujete akoby na bežnom dokumente a na pozadí program na základe vašich textov dopĺňa kód. Tento spôsob používajú programátori, ktorí zároveň potrebujú dostať pod kontrolu grafický návrh a kombinovať kód s návrhovým zobrazením stránky. Niekdajšie písanie stránok v poznámkovom bloku je dávno preč a aj medzi „geekmi“ ide o stratu času. Jednoducho spôsob vytvárania stránok sa za tie roky posunul niekam inam a „kódenie“ v poznámkovom bloku dnes už vyvolá mierny úsmev. Ďalšia preferovaná skupina sú redakčné systémy. Nainštalujete ich na server a môžete začať pracovať na vlastných stránkach. Chybou však býva, že používatelia, hoci potrebujú jednoduchú stránku, inštalujú redakčný systém. Ten má mnoho komponentov a treba ich znefunkčniť. Na pridávanie ďalších článkov sa síce hodí, no nie v prípade, ak potrebujete párkrát do roka obmeniť pár textov. Tretí hlavný spôsob je používanie šablón spolu so špecializovanými aplikáciami. Tie sa postarajú o grafickú podobu stránok a vy môžete pracovať na obsahu. V zásade sa nedá určiť, ktorý spôsob je ten správny, každý potrebuje niečo iné a od toho sa odvíjajú požiadavky na nástroj a spôsob tvorby webu.

Priamo na stránkach združenia W3 Consorcium (www.w3c.org) nájdete validátor stránok na zistenie, či je zápis kódu korektný a zodpovedá aktuálne definovaným štandardom vašej stránky

Jazyky a zápis

Webové stránky pozostávajú najčastejšie z jazykov HTML, xHTML, CSS, JavaScript alebo PHP. Je bežné, že sa kombinujú, nie je to ako v prípade programovacieho jazyka pre počítačové aplikácie, že programátor si jeden vyberiete a pracujete v ňom. Jazyk xHTML vychádza zo štandardu XML a je vhodný najmä pre jeho štruktúru. Dokumenty xHTML sú zároveň platné na použitie s nástrojmi XML. Príprava tohto značkovacieho jazyka nebola samoúčelná a okrem pridávania nových značiek sa zameriava na podporu zobrazovania stránok v rôznych zariadeniach, nielen štandardných prehliadačoch na počítači. V jednotlivých verziách HTML a xHTML je mnoho rozdielov, nemá zmysel sa tým na začiatok zaoberať. Na príklade vám ukážeme rozdiely. Značky sa musia písať malými písmenami. Zatiaľ čo pri HTML môže vyzerať zápis takto:

Nový odsek, pri xHTML musí byť párová značka ukončená

Nový odsek

. Nepárová značka
musí mať v príde xHTML koncovú lomku
. Parametre vlastností musia byť v úvodzovkách, napríklad . Prakticky tieto veci za vás spraví editor, nech používate akékoľvek riešenie.

Štruktúra stránky

Každá stránka má definovanú presnú štruktúru. Môže vyzerať takto:

"1.0" encoding="utf-8"?>
-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Názov stránky
"content-type" content="text/html; charset=utf-8" />
"created" content="št, 12 7 2012 09:33:48 GMT" />
"description" content="Vlastný popis obsahu stránky" />
"keywords" content="počítače, USB, tlačiarne, predaj" />



Deklarácia dokumentu XML obsahuje na prvom riadku opis verzie a východiskové kódovanie. Najčastejšie sa stretávame s kódovaním Unicode (v našom prípade utf-8). Definícia typu dokumentu !DOCTYPE hovorí prehliadaču o tom, aký dokument je použitý. V našom prípade xHTML 1.1. V hlavičke stránky Head sú metatagy určené pre webové vyhľadávače. Sem píšeme informácie ako kľúčové slová, opis stránky, ale aj informácie o autorovi a nadpis, ktorý sa zobrazuje v okne prehliadača. Ako vidieť, párové značky musia byť uzavreté, minimálne aj preto, aby bolo vidno telo dokumentu označené ako Body.

Entity v HTML

Na zápis špeciálnych znakov je vhodné použiť štandardný zápis prostredníctvom tzv. entít. Bez nich sa v niektorých prípadoch nepohnete a všeobecne sa odporúča použiť ich všade tam, kde je pre danú situáciu vytvorený znak entity. V  editore HTML napríklad nedokážete zapísať pevnú medzeru. Tá musí byť zapísaná znakom  . Všetky sa začínajú znakom „and“, takže na vytvorenie znaku copyrightu © treba použiť ©, registered ® má zápis ® atď. Editory na prácu s kódom automaticky dopĺňajú tieto značky, ak pracujete v rozhraní vizuálneho návrhu stránky.

Kaskádové štýly

Uvedený príklad môže byť rozšírený o deklaráciu CSS a zapuzdrenie priamo do stránky.

type="text/css">

 
Mechanizmus Cascade Style Sheets sa stará o to, ako bude stránka vyzerať. V prípade komplexnejších webov bývajú kaskádové štýly definované v samostatnom súbore. V našom prípade ho netreba umiestňovať so súboru s príponou CSS, ale môžeme ho vložiť do časti Head. V praxi však nie je dôležité, aký rozsiahly bude web, resp. obsah dokumentu xHTML, dôležité je oddelenie obsahu stránky od jej vzhľadu. Typické redakčné systémy sú na CSS postavené. Všimnite si, že stačí napísať nejaký článok a bude mať odsadenie od okrajov, definované odseky, fonty a farby, prípadne veľkosti rôznych nadpisov podľa štruktúry dokumentov. Ak napríklad definujeme, že tabuľa má mať vonkajšie orámovanie červenou farbou, stačí vytvoriť tabuľku a do nej zadať texty. O viac sa netreba starať. Vo výsledku sa tak kód stránky stáva čitateľnejším. Vďaka CSS môžete umiestňovať obrázky kdekoľvek na stránku v presne definovanej pozícii, môžete čokoľvek orámovať bez použitia tabuliek a rizika, že výsledok bude mať vplyv na rozloženie stránky. Môžete zvýrazňovať objekty, na ktorých je ukazovateľ myši, vytvárať priehľadné texty, vytvárať odsadenia prvého riadka odseku, zväčšiť prvé písmo v novom odseku. Podotýkame, že to všetko automaticky. Stačí len prostredníctvom príslušných príkazov nadefinovať štýl a zaoberať sa už len obsahom textu. Netreba sa obávať, že každý nový odsek by mal potom prvé písmeno veľkým fontom. Všetky parametre pre jednotlivé časti stránky a objektov sa dajú nastaviť. Základný zápis nie je zložitý a príkazy sa dajú rýchlo naučiť. Navyše existujú špecializované editory CSS – či už ako samostatné programy, alebo súčasť editorov stránok.

V uvedenom príklad sme definovali v prvom riadku použitie CSS. V ďalších riadkoch máme definovanú vlastnosť Color na čiernu pre všetky texty na stránke a biele pozadie stránky. K tomu sme pridali základnú štruktúru definovania, ako majú vyzerať odkazy. Čiže uvedený je štandardný odkaz modrou farbou, a:visited je odkaz fialovou farbou, príkaz a:hover určuje, že označený odkaz, teda ten, na ktorom je kurzor myši, má byť zvýraznený zelenou. Posledný z príkazov v CSS patrí takisto k linkom a stará sa o to, aby odkaz, na ktorom stlačíme ľavé tlačidlo myši, zmenil svoje zafarbenie na červenú.

Základy CSS

Jednoduché definovanie vzhľadu stránky alebo jednotlivých prvkov môžete vkladať medzi tagy Head. No dokument CSS môže byť poriadne rozsiahly a vtedy je lepšie umiestniť štruktúrovanie dokumentu samostatne. Opäť treba vložiť definíciu medzi tagy Head:

Spôsobov, ako zapísať kód, je niekoľko. Do úvahy treba zobrať aj to, že ak začneme používať CSS, sú tu isté pravidlá prednosti. Tak napríklad atribút style má v zápise HTML prednosť pred definíciou štýlu CSS. Takisto platia isté pravidlá aj v kóde CSS. Posledný zápis pravidla má prednosť.

h1{color: #FF6600;}
h1{color: green;}

Nadpis úrovne 1 bude mať zelenú farbu namiesto oranžovej. Keď sa pozriete na rôzne zápisy kódov z iných stránok, všimnete si, že farby sa takmer výhradne zapisujú v hexadecimálnom formáte hodnôt RGB. Len so slovnými opismi farieb nevystačíte, pretože pokrývajú iba základné farby. Na uprednostnenie oranžovej farby ju treba dať buď za definovanie zelenej, alebo zápis pripraviť takto: h1{color: #FF6600 !important;}

Ak chceme jednu vlastnosť nariadiť viacerým tagom, môžeme použiť dva druhy zápisu.

Prvý zápis je obšírnejší a trochu zbytočne nafukuje kód, no v prípade potreby niečo zmeniť máme situáciu jednoduchšiu:

h1 {color: blue;}
h2 {color: blue;}
p {color: blue;}
 
alebo skrátene takto: h1, h3, p {color: blue;}

Do kódu môžeme vkladať komentáre. Tie sa začínajú a končia znakmi /* umiestnenie komentára */. Teraz si ukážeme príklad definovaním vlastnej triedy, ktorá zabezpečí, že môžeme operatívne meniť vzhľad písma podľa potreby. Tým sa vyhneme tomu, aby sme na rôzne texty nemali len jeden štýl a nemuseli ich „prebíjať“ definovaním v HTML.

Na zafarbenie odsekov použijeme vlastnú triedu s názvom .odsek_cerveny. Trieda sa vždy začína bodkou pred jej názvom. Píše sa bez diakritiky a nemá obsahovať špeciálne znaky ani číslice na začiatku názvu.

.odsek_cerveny{background: red;}

V zápise HTML použijeme príklad:

"odsek_cerveny">Cerveny odsek

Štýly pre iné zariadenia

V praxi sa vám pri tvorbe osvedčí použitie CSS s vlastnosťami pre rôzne zariadenia. Ak máte stránky, kde je predpoklad, že ich obsah si bude chcieť používateľ vytlačiť, je tu možnosť definovať vzhľad samostatne na monitor a vzhľad vhodný na tlač.

<style media="print">
p {font-style: italic}

Atribút s hodnotou print značí, že daný štýl sa použije len pri tlači. Prehliadač ho zoberie do úvahy a v prípade komplexnejšieho zápisu je vhodné oddeliť CSS na tlačové účely do samostatného súboru.

Tento zápis

PC REVUE

sa na monitore zobrazí štandardným rezom písma, po vytlačení však bude mať rez kurzívy. Okrem bežného textu netreba zabudnúť pripraviť vzhľad odkazov. Pri čiernobielej tlači by sa odkazy v texte stratili, keďže tu nefunguje princíp ukázania naň myšou a následného podčiarknutia. Takisto je vhodné definovať farbu, najlepšie čiernu, a podčiarknutím, prípadne zvýraznením písma na tučné docieliť ľahšiu viditeľnosť v texte.

a:link, a:visited {
text-decoration: underline;
font-weight: bold;
color: #000;
}

Komentáre v HTML

Samozrejme, v kóde HTML môžete použiť komentáre. Vyzerajú takto:

Existujú aj podmienené komentáre, na ktoré reaguje prehliadač Internet Explorer. Zápis vyzerá takto:

V tomto prípade sme použili operátor lte, ktorý má za úlohu porovnanie hodnoty, tu konkrétne nižšiu alebo rovnú uvedenej. Text sa zobrazí aj v prehliadači Internet Explorer 7 a nižších. Ďalej sa dajú použiť operátory lt (menší než) alebo gt (väčší než).

V praxi môžete využiť podmienené komentáre, ak potrebujete definovať napríklad špeciálny štýl pre Internet Explorer z dôvodu kompatibility správneho zobrazenia stránky.

"stylesheet" href="vzhlad.css">

Záver

V ďalšej časti budeme pokračovať niektorými zaujímavosťami, s ktorými sa stretnete pri tvorbe stránok, vysvvetlíme niektoré príkazy na príkladoch a predstavíme redakčné systémy.

Zobrazit Galériu
Autor: Michal Reiter

Nechajte si posielať prehľad najdôležitejších správ emailom

Mohlo by Vás zaujímať

ITPro

Linux súkromne i pracovne v2.0 (14. časť): Small Business Server

09.11.2016 14:57

Pojem Small Business Server (malý firemný server) začala používať spoločnosť Microsoft ešte v roku 2000 na označenie servera, ktorý ­dokázal plniť úlohy niekoľkých samostatných serverov. Aplikačná vrs ...

ITPro

Industry 4.0: Fikcia alebo už realita?

09.11.2016 14:52

Štvrtá priemyselná revolúcia je pomenovanie rozsiahlych zmien prudko vstupujúcich do súčasného priemyslu. Nositeľom týchto zmien je digitalizácia výroby a optimalizácia všetkých podnikových procesov v ...

ITPro

Vývoj aplikácií UWP pre Xbox One II.

09.11.2016 14:47

V predošlej časti sme ukázali postup, ako si ­vytvoriť vývojársky účet a aktivovať vývojársky režim na hernej konzole Xbox One, aby ste mohli testovať svoje aplikácie. Výhodou hernej konzoly Xbox je v ...

Žiadne komentáre

Vyhľadávanie

Kyocera - prve-zariadenia-formatu-a4-s-vykonom-a3

Najnovšie videá