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.

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,

, 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 © , pevná mezera je
Poznámka se do zdroje vkládá mezi značky

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