Zobrazení zdroje stránky 12. Tvorba www stránky

==Jak se tvoří html==
Html lze tvořit v jakémkoliv '''jednoduchém textovém editoru''' a pak uložit s''' koncovkou html'''. Toto se nazývá  '''strukturní vytváření'''. Můžeme použití aplikaci pro tvorbu stránek, kde se obsah edituje graficky '''WYSIWYG editory'''. 

===Jak pracují prohlížeče===
Stránky jsou umístěny na serveru na páteřní síti s velkou propustností dat do internetu. Uživatel který chce procházet stránky musí zadat ve svém počítači''' ip nebo www adresu''', která ho přesměruje na patřičný server.  Server pošle uživateli kód, který se jmenuje HTML. Tento kód je '''dekódován internetovým prohlížečem''' (Mozzila Firefox, Opera, Chrome, Safari a taky i internet Explorer) a následně zobrazen jako internetová stránka. 
 
===Strukturní editory===
Je mnoho aplikací, ve kterých můžeme psát html. Například notepad++, Pspad, Gedit atd. Používání textového editoru je výhodou třeba u dynamického rozsáhlejšího webu, kdy je potřeba mít absolutní '''přehled o celé struktuře stránky'''.   

===WYSIWYG editory===
je zkratka od anglického '''„What you see is what you get“''', v překladu „Co vidíš, to dostaneš“. Je to viditelný náhled při editaci například stránek nebo dokumentů. Editory zobrazují stránku už při psaní tak, jak bude vypadat v prohlížeči a kód generuje automaticky, žádná znalost jazyka není potřeba. Například Adobe Dreamweaver, nebo Front page. Editory umožňují snadnější propojení html s databází a '''obsahují i pokročilejší funkce php jazyka a javascriptu'''.

==Jazyky a technologie==

===HTML===
HTML je HyperText Markup Language, neboli hypertextový jazyk značek (tagů). Jazyk byl navržen v roce 1990 ve Švýcarskkém Cernu společně s koncepcí WWW. Autorem je '''Tim Berners-Lee'''. Postupně se vyvíjel a do nedávna se používala verze HTML 4.1.

*HTML 1.0  -  jen pár značek které se používají i dnes .
*HTML 2.0 -  Vydán v roce 1994. Obsahuje foruláře a mnoho nových tagů
*HTML 3.0 – 3.2 Podpora všech barev, tabulek a pozadí stránek. Používal se prohlížeč
Netscape  Navigátor a Internet Explorer. Měl podporu javascriptu.
*HTML 4.0 – 4.1 Vznik 4.0 v roce 1997 a 4.1 v roce 1999. Přibyly tagy div a span a pokročilé tabulky. Podporovala kaskádové styly CSS a zavrhla používaní některých tagů přímo v html .  Jazyk už umožňoval vytvářet už prakticky cokoliv. 
*HTML 5.0 – V současnosti přichází nová verze HTML, která poskytuje uživateli mnoho nových funkcí a možností, které do teď byly možné jen prostřednictvím Adobe Flash.


====Tagy neboli formátovací značky====
Máme dva typy tagů. Párové a nepárové. Každý tag začíná a končí hranatými závorkami <img>. Pokud je tag párový druhý tag je tzv uzavírací a píše se do něj lomítko. <div></div> 
Struktura Html vypadá následovně.


 <html>
 :<head>
 ::<title>Má první stránka</title>
 :</head>

 :<body>
 ::Moje první html stránka.
 ::A nějaké další texty.
 :</body>
 </htm>

====Základní tagy====
<html> </html>  začíná dokument  a končí kód 

<head> a </head> začíná a končí hlavičku, která se sice nezobrazuje, ale obsahuje některé důležité údaje, například 

<title> a </title> vymezující název dokumentu (může se lišit od jména souboru) 

<body> </body> 
Co je mezi <body> a </body>, se bude zobrazovat. <body> je tag, kterým začíná vlastní tělo dokumentu (angl. body = tělo). 
<h1>, </h1> vymezení nadpisu první úrovně. 

<h2>, </h2> nadpis druhé úrovně (mezinadpis, nadpis kapitoly). Dá se použít až šest úrovní nadpisů (tedy <h1>, <h2> až <h6>). Vykreslují se různě velké podle důležitosti. 

<p>, </p>vymezení odstavce. Možná vůbec nejpoužívanější tag. Po jeho konci prohlížeč automaticky zalomí řádek a udělá vertikální mezeru. 

<b>, </b> text mezi těmito tagy bude tučný. 

<i>, </i> kurzíva,

<span>, </span> dvojice tagů vymezující nějak odlišný text. 

<span style="color: red">, </span> V tomto případě má obalený kus textu červenou barvu písma. Jde o první příklad tagu, který má tak zvaný atribut. Atributem je "style" a má hodnotu "color: red" (angl. barva: červená). Pomocí tohoto atributu style= se dá detailně nadefinovat vzhled textu, obaleného libovolným tagem. V praxi má většina tagů nějaký atribut, zatím jsem se tomu vyhýbal.
 
<br> zalomení řádky, takzvaný měkký enter. Text po tomto tagu bude vždy začínat na novém řádku, ale není to nový odstavec. Pozor, tento tag je nepárový, to znamená, že žádné </br> neexistuje! 

<a href="adresa">text odkazu </a> text (nebo obrázek) mezi těmito dvěma tagy se zobrazí jako text odkazu ("a" jako angl. "anchor" = odkaz). Po kliknutí na něj se prohlížeč přepne na adresu, která je zadaná atributem HREF. 

atribut tagu "a" se rovná cestě k odkazovanému souboru. Používá se zde buď relativní, nebo absolutní adresa. 

'''absolutní adresa''' 
používá se ve formě http://www.atakdále.cz. V příkladu je takto použita adresa Seznamu. 

'''relativní cesta''' 
pokud se chci odkázat na jiný svůj soubor, je zbytečné vypisovat tam to http:// a celou cestu. Nejlepší je, když je odkazovaný soubor ve stejném adresáři jako ten aktuální. Pak se na něj dá ukázat relativně. Stačí zapsat jenom jméno souboru a prohlížeč to pochopí.  Jestliže je ten cílový soubor v jiném blízkém adresáři, stačí napsat href="adresář/soubor.htm". 


====Zásady html ====
Nezáleží na velikosti písem, <body> je totéž co <BODY> 
V adresách a jménech souborů záleží na velikosti písmen, nesmějí tam být mezery a čeština. 
Tagy, které prohlížeč nezná, jako by nebyly. 
Na začátku tagu nesmí být mezera, třeba < br> je špatně. 
Dvě mezery po sobě (nebo víc) mají stejný význam jako jedna mezera. 
Konec řádku ve zdroji se chápe jako mezera. 
Jména atributů je dobré dávat vždy do uvozovek, ale není to úplně nutné, pokud uvnitř nejsou mezery. 
Speciální znaky typu © se do zdroje zadávají jako posloupnost znaků &něco; například &copy; , pevná mezera je &nbsp; 
Poznámka se do zdroje vkládá mezi značky <!-- a --> <!-- Toto je poznámka, která se nezobrazí. --> 

===CSS===
CSS je zkratka slov Cascading Style Sheets. Do češtiny bychom to přeložili jako '''Tabulky kaskádových stylů'''. Většinou se jedná o externí soubor s příponou css ale informace o stylech můžeme umístit i do hlavičky, nebo přímo do tagu tzv přímý styl. Nejvýhodnější je však volit '''externí soubor''' z důvodů '''snadné editace všech stránek'''. Ten musí být nadefinován v hlavičce stránky. Css obsahuje '''informace o  barvě, velikosti, pozici, pozadí''' atd.. objektu ke kterém bude styl přiřazen. 
'''
Přímý styl'''
vepisuje se přímo do tagu.
 <p style="color: red">Tento odstavec bude červený.</p>

Stylování
Tag umístěný v html a připojeným stylem bude mít velikost 300pixelů a červené pozadí

 <div style=“horizontalMenu“>

Styl v externím css 
 horizontalMenu
 {
 background-color:red;
 width:300px;
 } ;

Nástin možností CSS
Opravdu jenom nástin. (Kdyžtak vizte kompletní přehled.) Tak co třeba CSS dovedou: 
Nastavit libovolnou a přesnou velikost písma, prokládání, kapitálky 
Udělat odsazení prvního řádku odstavce, zvětšit řádkování 
Zrušit nebo zvětšit prázdný prostor po odstavci 
Automaticky formátovat nadpisy (například je všechny udělat zelené) 
Zvýrazňovat odkazy po přejetí myší 
Udělat automaticky grafické odrážky 
Určité části textu zneviditelnit, zprůhlednit nebo nezobrazit 
Předefinovat grafický význam běžných tagů (například všechno, co je kurzívou, udělat i tučně) 
Nastavit pozadí čehokoliv, stránky, tabulky ale třeba i odstavce; pozadí se nemusí opakovat a může mít přesnou pozici! 
Umístit nějaký objekt (třeba kus textu) kamkoliv do stránky, může se to i překrývat 
Přidat k čemukoli rolovací lišty, oříznout to, orámovat, nastavit okraje 
V kombinaci se skripty je dnes CSS nejmocnější zbraň pro "rozhýbání" stránek. 
Hlavní význam CSS spočívá v tom, že fungují hodně automaticky, přečemž se vzhled celého webu deklaruje jedním souborem. 

XHTML 
je novější alternativní forma HTML. X na začátku znamená eXtensible. Byl vytvořen pro flexibilnější možnosti zobrazování tagů. Je to rozšířený HTML a začal se vyvíjet, protože se zastavil vývoj HTML 4.1 a čekalo se že bude nahrazen. Nesetkal s příliš velkou odezvou a nadále html převažuje. V současné době se vyvíjí jak XTHML tak HTML.  

XML
je zkratka pro Rozšířitelný značkovací jazyk (Extensible Markup Language). Je zajímavý tím, že neobsahuje žádné konkrétní značky, kdokoliv si tedy může vymyslet vlastní značky, např. <barva>zelená</barva>. To umožňuje velice dobře definovat přesnou strukturu každého XML dokumentu podle aktuální potřeby. XML je tak jakýmsi předělem mezi databázovou strukturou a textovým dokumentem.
XML na rozdíl od známějšího jazyka HTML vůbec neobsahuje informace o způsobu zobrazení, dochází tak k naprostému oddělení formy od obsahu. Díky tomu je XML mnohem flexibilnější, umožňuje vlastní volbu zobrazení každé aplikaci, která s XML dokumentem pracuje. Pokud je přesto potřeba jednotný vzhled, lze ho definovat pomocí speciálních stylesheetů , které jsou připojeny v záhlaví XML dokumentu.
 Má jednoduchý převod na jiné formáty. XML se dnes používá především pro snadnou výměnu informací (např. výměnu faktur) a komunikaci nezávislou na konkrétní aplikaci či platformě. Hlavními výhodami XML oproti jiným formátům používaným pro přenos informací je jeho nezávislost, standardizace, poměrně malá velikost, podpora národních kódování a jednoduchý převod na jiné formáty.
Dynamcké HTML
Lze říci, že DHTML je spojení JavaScriptu (JScriptu) a CSS v prohlížečích Internet Explorer verze 4, 5 a 6:
JavaScript + CSS + MS IE 4|5|6 = DHTML
Jiné prohlížeče DHTML nezavádějí jako pojem, níže uvedené příklady v nich ale fungují (jde v zásadě o aplikace javascriptu). 
Dynamické HTML je protiklad ke statickému HTML, které se jednou načetlo do stránky a pak už se s ním nedalo nic dělat. A právě dynamické HTML umožňuje obsah stránky měnit i po načtení. Klasicky jsou to různé animace, změny barev, automatické psaní textu, změny textu, problikávání, vyskakování oken a podobné vylomeniny. Pokud si říkáte, že to je to samé, co JavaScripty, tak máte pravdu. Microsoft k JavaScriptu dopsal pár věcí a nazval to JScript.
Užitečnost DHTML:
Nevíme, jaký má čtenář prohlížeč, proto se na skript nemůžu spolehnout. 
DHTML zřídka poskytují nějakou informaci, většinou jde jen o efekt. 
Programovací úsilí je zpravidla silně neadekvátní  výsledku, protože je třeba skript odladit na mnoha různých platformách. 
nedokáže ukládat data (z bezpečnostních důvodů) 
Co je z DHTML použitelné:
Reklamy 
Vyskakující menu 
Veselé matení čtenáře 
Částečná kontrola ovládání formulářů 
Vpisování společných hlaviček do mnoha souborů 
Přizpůsobení vzhledu dokumentu podle volby čtenáře 
Java Script
JavaScript je objektově orientovaný programovací jazyk, využívaný při tvorbě webových stránek. Na rozdíl od serverových programovacích jazyků (například ) sloužících ke generování kódu samotné stránky, JavaScript běží na straně klienta, tedy v prohlížeči až po stažení do vašeho počítače.
JavaScript se používá především pro vytváření interaktivních webových stránek. Příkladem použití mohou být nejrůznější kontroly správného vyplnění formulářů, obrázky měnící se po přejetí myší, rozbalovací menu atd. JavaScript se také často používá k měření statistik návštěvnosti.
JavaScript je jazyk
interpretovaný -- nemusí se kompilovat 
objektový -- využívá objektů prohlížeče a zabudovaných objektů 
závislý na prohlížeči -- funguje ale ve většině prohlížečů 
case sensitivní -- záleží na velikosti písem v zápisu 
syntaxí podobný jazykům C, Java a podobným 
Omezení jazyka
JavaScript funguje pouze v prohlížeči. 
Uživatel může JavaScript zakázat 
Existují různé odlišné verze jazyka i prohlížečů, což vede k častým chybám. 
Neumí přistupovat k souborům (kromě cookies) ani k žádným systémovým objektům. 
Neumí žádná data uložit (kromě cookies). 
To vše z něj dělá pouze jazyk druhořadý, účelově použitelný pouze v HTML stránkách. 
Flash
Flash byl původně technologií určenou k vytváření složitých animací. Ve svých počátcích býval Flash používán pouze při tvorbě reklamních bannerů, pro což je vhodný i díky malé velikosti souborů (využívá vektorovou grafiku). Dnes má však Flash mnohem rozsáhlejší možnosti využití – hodí se ke stavbě celých prezentací, vytváření on-line her či interaktivních aplikací.
Významnou výhodou technologie Flash je možnost uložit hotovou aplikaci i jako spustitelný soubor a distribuovat ji tak i offline např. na CD-ROM. Stále větší význam dostává také Flash Lite, mladší a mírně odlehčený bratříček určený pro mobilní zařízení.
Tím však přednosti technologie Flash zdaleka nekončí. Podobně jako technologie AJAX bývá Flash používán k vytváření tzv. RIA aplikací, těží zde ze schopnosti přehrávat audio a video, pracovat s databázemi a dalšími pokročilými nástroji.
Prohlížeče neumí Flash zobrazovat automaticky, je nutné mít instalovaný tzv. Flash plugin. V současnosti to však již není velkým problémem, podle statistik má Flash plugin instalován přes 90 % české internetové populace. V některých případech jde naopak o výhodu, neboť není nutné Flash aplikaci testovat na různých prohlížečích.
Action script
 je programovací jazyk podobný JavaScriptu. Je součástí technologie Flash, kde jeho využití významně zvyšuje interaktivnost animací. Právě ActionScript stojí za schopností vytvářet rozsáhlé flashové prezentace, on-line hry či složité flashové aplikace.
ActionScript je tedy hlavním motorem technologie Flash, umožňuje nejen tvorbu základních prvků sloužících k dynamickému ovládání stránek (např. tlačítka, menu…), ActionScript funguje například i jako prostředník při komunikaci s externími zdroji dat, dokáže přehrávat hudbu či video a vykonávat další funkce potřebné při vytváření RIA aplikací.
ActionScript byl vyvinut v roce 2000 z ECMA scriptu a patří k objektově orientovaným programovacím jazykům.

Podporované formáty souborů
Zobrazení obrázku, či přehrávání videa je omezeno na určité spektrum formátů. S instalací přídavných softwarů nebo addonů není problém zobrazovat mnoho dalších formátů přímo v okně prohlížeče.
Obrázky
BMP – Dnes již nepoužívaný formát. Velká datová velikost bez komprimace.
JPG/JPEG – Nejběžněji používaný soubor. Výhodný kvůli jeho nízké datové velikosti, která však ovlivňuje kvalitu souborů . Nepodporuje pruhledný kanál.
GIF – Podporuje průhledný kanál. Malá velikost, ale nízká barevná hloubka. Pouze 256 barev. Podporuje i jednoduchou animaci.
PNG – Asi nejvýhodnější formát pro webové stránky. Je komprimovaný a podporuje i průhledný kanál.  
Zvuk
MID – Nejstarší zvukový formát, dnes již skoro nepoužívaný.
WAV – Nekomprimovaný zvukový formát. Pro web nevhodný kvůli datové velikosti. Je však podporován všemi prohlížeči.
MP3 – Nejrozšířenější zvukjový formát ideálni pro jakékoliv použití.
WMA – Streamový zvukový formát. Používá se především v internetových rádiích. 
OGG – Komprimovaný zvukový soubor, který má dobrou kvalitu i při nízkem datovém objemu. 
RM, RAM – real media audio formát. Používá se pro stream.
Video
FLV – Využívá technologíí flashe. Momentálně jeden z nejrozšířenějších formátů. Přehrává video i bez jeho celého načtení. 
WMV – Formát, firmy Microsoft. Není multiplatformní. Malý datový objem. 
MOV – Formát firmy Apple.
RM, RAM – real media audio formát. Používá se pro stream.
Ostatní
SWF – soubor pro Flash. Jedná se o kompilovaný soubor. Pro jeho spuštění je nutné mít nainstalovaný flash player.
Optimalizace stránek
Validace www stránky
Zobrazení stránky je závislé na tom,  jak daný prohlížeč kód vykreslí. V minulosti  byly komplikace se správným zobrazením stránky na různých prohlížečích. Kvůli lepšímu zobrazení stránek vznikly určité standardy pro psaní a vykreslování kódu. Jsou popisovány organizací W3C. 
Metadata
Správně vyplněná metadata jsou nezbytnou součástí každé webové stránky. Říkají prohlížeči kdo je autorem stránky, jaké kódování je použito, obsahují klíčová slova a popisek stránky, jenž je nesmírně důležitý pro vyhladávače, dále informace pro roboty a další. Umisťují se do hlavičky a jsou někdy velice rozsáhlé. 
Copywriting
 je označení pro činnost, zabývající se obecně tvorbou úspěšných a vhodně cílených textů. V oblasti marketingu a firemní komunikace se zákazníky a partnery, kam spadá i příprava obsahu webových prezentací (dále například tištěných katalogů a prospektů, newsletterů, e-mailových oslovení i dopisů), je nanejvýš vhodné koncipovat veškeré texty s ohledem na jejich skutečný efekt, cílovou skupinu oslovených i přínos pro podporu obchodu či jiného stanoveného cíle.

Jak poznáte kvalitní výsledek práce copywritera:
text je strukturovaný, čtivý a jazykově na úrovni, 
vhodně cílí na požadovanou skupinu čtenářů, 
přináší zajímavé a pravdivé informace přehlednou a korektní formou, 
respektuje hlavní zásady pro podporu SEO (optimalizace pro vyhledávače). 

Zásadní podmínkou pro vznik každého kvalitního obsahu webu je dostatek relevantních podkladů, stejně jako následná zkušenost copywritera při jejich uchopení. Dobrý text má předpoklad přinášet obchodní úspěchy a plnit stanovené komunikační cíle.
SEO optimalizace
 je zkratka z anglického Search Engine Optimization, tedy optimalizace pro vyhledávače. Základem SEO je jakýsi neohraničený soubor pravidel, jejichž dodržení zajistí stránkám dobré umístění ve výsledcích vyhledávání (tzv. SERP). Tato pravidla vznikla (a stále se trochu mění) praktickým pozorováním činnosti vyhledávačů, jejich algoritmů a hodnocení výsledků vyhledávání.
Obvykle zahrnuje SEO analýzu, jejímž výsledkem je optimální SEO strategie, výběr vhodných klíčových slov, různé SEO taktiky, změny v informační architektuře webu, SEO úpravy textů, budování zpětných odkazů a další činnosti.


http://www.adaptic.cz/znalosti/slovnicek/
http://www.jakpsatweb.cz/css/css-uvod.html
http://www.jakpsatweb.cz/zaklady-html.html
http://www.jakpsatweb.cz/dhtml.html
http://www.adaptic.cz/znalosti/slovnicek/flash.htm
http://www.amadeo.cz/cs/aktuality/co-je-to-copywriting.html
http://www.w3schools.com/media/media_videoformats.asp
http://www.w3schools.com/media/media_videoformats.asp