Návrh webového obchodu

Rozměr: px
Začít zobrazení ze stránky:

Download "Návrh webového obchodu"

Transkript

1 Bankovní institut vysoká škola Praha Katedra informatiky a kvantitativních metod Návrh webového obchodu Bakalářská práce Autor: Alyabyev Alexandr Informační technologie Vedoucí práce: Ing. Bohuslav Růžička, CSc. Praha Duben, 2014

2 Prohlášení Prohlašuji, že jsem bakalářskou práci zpracoval samostatně a v seznamu uvedl veškerou použitou literaturu. Svým podpisem stvrzuji, že odevzdaná elektronická podoba práce je identická s její tištěnou verzí, a jsem seznámen se skutečností, že se práce bude archivovat v knihovně BIVŠ a dále bude zpřístupněna třetím osobám prostřednictvím interní databáze elektronických vysokoškolských prací. V Praze, Alexandr Alyabyev 2

3 Poděkovaní Chci srdečně poděkovat vedoucímu mé bakalářské práce Ing. Bohuslavu Růžičkovi, CSc. za odborné vedení, podporu při řešení častých dotazů, cenné připomínky a konzultace, pomocí kterých jsem zpracoval tuto bakalářskou práci. 3

4 Anotace Bakalářská práce na téma Návrh webového obchodu řeší úlohy a otázky, které vyskytují u lidí při vytvářené webových stránek (v daném případě vytváření E-shopu), a při další práci s ním. Například, co to je domén, hosting, server a jaké existují jejích druhy. Také v této práci popisuji a současně zkoumám hlavní jazyky webového programování: HTML, CSS, JavaScript a PHP. Vzhledem k tomu, že v dnešní době moderní multifunkční webové stránky vyžadují znalost každého z nich, popíšu každý jazyk v samostatné kapitole z hlediska teorie i praxe jejich použití. Pro lepší názornost jsou v textu uvedeny tabulky, obrázky a schémata. Protože práce je navržena tak, aby čtenář lépe pochopil co to je webová stránka, popsal jsem velmi podrobně téměř všechny funkce, které by měla mít moderní webová stránka. Pro ty, kteří si chtějí vyzkoušet roli vlastníka E-shopu, jsem důkladně prozkoumal a popsal co má nabízet svým zákazníkům úspěšný E-shop. Klíčové slova: Internet, doména, hosting, programovací jazyky, HTML, CSS, JavaScript, PHP, E-shop, SEO optimalizace. Annotation Bachelor work on the topic E-shop Proposal solves the problems and issues that often occur by creating a website (in this work E-shop) and by further work with it. For example, what is a domain, hosting, server and it s species? Also in this work is considered and simultaneously examined the main languages of web programming: HTML, CSS, JavaScript and PHP. Because today's modern multifunctional website requires a knowledge of each of them, I decided this problem by covering each programming language in a separate chapter. I will also tell from my point of view about the theory and practice of using of these languages. 4

5 For better visualization of one of web programming languages, I have used tables, pictures and schemes in this work. The work is designed for the reader better to understand what is the website, so that s why I described in detail the functionality, which must have a modern website. Then, for those who want to try themselves as E-shop owners, I have deeply studied and described what a successful E-shop must have and provide customers with. Keywords: Internet, domain, hosting, programming language, HTML, CSS, JavaScript, PHP, E- shop, SEO. 5

6 Obsah Úvod Popis webových stránek Internet World Wide Web Co jsou webové stránky Jak fungují webové stránky DNS Hosting Tvorba webových stránek HTML Tag Prvky Atribut DHTML K čemu je DHTML? Potřeba DHTML Jak DHTML funguje CSS Selektor Dědičnost stylů Kaskáda Specifičnost Pseudotřídy JavaScript Komentáře v JS Objekt Document Proměnné v JS Typy proměnných Tvorba funkce v JS JS větvení JS cykly JS pole (Array) Podobnosti s Javou

7 2.5 PHP Instalace Denwer Komentáře v PHP Proměnné v PHP Typy proměnných Funkce v PHP Větvení v PHP Operátory Cykly v PHP Pole v PHP (Array) Návrh funkčnosti webového obchodu Pravidla pro určité kategorie rozhraní použitelnosti Vyhledávání Hlavní stránka Návrh sledovaní provozu Google Analytics Funkce Google Analytics Definice webového obchodu Oblast B2B Oblast B2C SEO optimalizace Proč nakupovat na Internetu? E-shop s pohledu zákazníka Elektronická nabídka Online-konzultace Nákupní košík Registrace nákupu Elektronická platba Dodání objednávky Zajištění vrácení zboží a záruka Závěr Seznam použitých tabulek Seznam použitých schémat Seznam obrázků

8 Úvod V posledních deseti letech zaznamenal Internet velmi bouřlivý vývoj a rozvíjel se velmi dynamicky, nicméně jeho vývoj stále nekončí. Internet má v dnešní době zásadní dopad na život každého z nás a moderní život si bez něj již takřka nelze představit. Moderní Internet má celou řadu společenských a kulturních aspektů. Jedná se o univerzální nástroj pro komunikaci, zábavu a vzdělávání. Na Internetu je dnes běžné nakupovat a platit za služby a pro mnoho lidí Internet znamená také pracovní místo. Obecně lze říct, že Internet je odrazem moderní společnosti a moderního světonázoru. V poslední době se stále častěji a více objevují nejrůznější internetové obchody, které poskytují své služby nejen v rámci konkrétních měst, ale řada z nich celosvětově. O tuto oblast se aktivně zajímám, a proto jsem v této práci řešil problematiku internetových obchodů v teoretické i praktické rovině. V předkládané práci na téma Návrh webového obchodu se pokusím popsat, co je Internet, z čeho se skládá a jak funguje, protože tato témata jsou přímo spojena s problematikou webových obchodů a jsou jejich základem. Stejně jako v každém podnikání, tak i v této oblasti je třeba danou problematiku prozkoumat od základů. Ne všichni si dokáží představit, jak Internet funguje, a co všechno je zapotřebí k vytvoření webové stránky. Předkládaná práce se skládá ze čtyř kapitol. První kapitola tvoří podklad celé práce a popisuje základní pojmy jako Internet, to, jak funguje, prostřednictvím čeho funguje, jak si vybrat hosting a doménu pro svůj web, co to je server a jaké druhy serverů existují, co to jsou webové stránky, jak fungují atd. Hlavním cílem mé bakalářské práce je důkladně popsat jednotlivé kroky vytváření webových stránek, velkou pozornost věnuji především vytvoření webového obchodu. Ve druhé kapitole se zaobírám technickou stránkou webového obchodu, zejména pak tím, jak vytvořit kvalitní webovou stránku. V rámci řešení tohoto problému důkladně popíšu dva hlavní webové programovací jazyky HTML a CSS. Tyto dva jazyky jsem si vybral proto, že je s jejich pomocí napsán největší počet webových stránek a jejich zkoumání a využívání je poměrně jednoduché. HTML a CSS jsou mezi sebou poměrně úzce propojeny, proto jsem se je rozhodl popsat společně, abych přesně dokumentoval, jak vytvořit webové stránky. 8

9 V další části práce popíšu také další, již složitější programovací jazyky JavaScript a PHP. Nebudu se jimi však zabývat příliš podrobně, jelikož mají velmi bohaté spektrum funkcí, které představují velké množství příležitostí. S pochopením HTML a CSS bude pro všechny zájemce jednodušší naučit se programovat v JavaScript a PHP. Osobně tedy doporučuji studovat Web design vždy v tomto pořadí. Ve třetí kapitole své práce se poté, co popíšu, co je webová stránka a jak funguje, zaměřím na popis toho, co by mělo být na webových stránkách, které fungují jako webové obchody. Na tomto místě je důležité upozornit na to, že webové stránky tohoto typu by měly především přilákat zákazníky. V této kapitole se pokusím popsat, jak nejlépe zaregistrovat hlavní stránku webu, co by měla hlavní stránka obsahovat a čemu je naopak třeba se vyhnout. Nejdůležitější je uvědomit si, že čím jednodušší a funkčnější webová stránka je, tím lépe pro klienta a zákazníka. Ve čtvrté kapitole popíšu, jak optimalizovat webovou stránku a učinit ji konkurenceschopnou pomocí Google Analytics. Tento nástroj od společnosti Google je určen pro všechny webové stránky, ať už se jedná o zpravodajský web nebo o E-shop. Jeho hlavním cílem je vytvořit statistiky o tom, kolik lidí konkrétní webové stránky navštíví, odkud tito lidé pocházejí, na jaké články a stránky se nejčastěji dívají a proč odcházejí. S pomocí Google Analytics můžeme poměrně jednoduše určit, které části našich webových stránek potřebují zlepšit, a to např. odstraněním nepotřebných informací, funkcí apod. Na konci čtvrté kapitoly a na konci práce ještě podrobně popíšu, jaké služby by správně a dobře fungující webový obchod měl poskytovat. 9

10 1. Popis webových stránek 1.1 Internet Internet je celosvětový systém integrovaných počítačových sítí pro ukládání a přenos informací. Počet uživatelů Internetu každoročně vzrůstá a k 30. červnu činil již více než 2,4 miliardy lidí. Za začátek historie Internetu je obvykle považován rok , kdy byl zahájen projekt Ministerstva obrany USA, který nesl název Advanced Project Agency (ARPA) a byl experimentálním projektem. Jedním z jeho cílů bylo propojit počítače pomocí sítě tak, aby ARPA fungoval i v případě výpadku některých počítačů v síti. Celá navrhovaná síť byla zamýšlena jako zabezpečená. V roce 1969 byly propojeny čtyři výzkumné instituce (University of California, University of Utah, California State University, Stanford University) a vznikl tzv. ARPANet (Advanced Research Projects Agency Network). ARPANet vždy obsahoval spojení mezi zdrojovým a cílovým počítačem. Přenos dat v síti byl organizován na základě Internetového protokolu (IP). Tento protokol byl navržen tak, aby při nestabilním fungování jedné z tras bylo možné zajistit přenos dat pomocí alternativní trasy. Můžeme říct, že tento komunikační protokol dal Internetu jeho jméno. 3 Časem se k IP připojil Transmission Control Protocol (TCP). Tento protokol zajišťoval propojení dvou počítačů v síti a řídil provoz (datové toky) mezi nimi. Spojením obou protokolů vznikla přenosová sada, spojení dvou protokolů, a to za účelem větší flexibility a schopnosti vytvářet pro Internet lepší komunikační aplikace. Protokol TCP / IP je určen pouze pro přenos dat a bez ohledu na to, co je posíláno (soubory, y, dokumenty), se informace dělí do menších paketů, které jsou odesílané příjemci samostatně. Každý paket obsahuje určitou část zprávy nebo souboru a servisní 1 Citace. In: Wikipedia: the free encyclopedia [online]. Příklad z ruštiny - Wikipedia: Интернет. Dostupné z 2 SCHAFER, M. Steven. HTML, XHTML a CSS. Bible pro tvorbu WWW stránek (4. vydání). Praha: Grada Publishing, ISBN SCHAFER, M. Steven. HTML, XHTML a CSS. Bible pro tvorbu WWW stránek (4. vydání). Praha: Grada Publishing, ISBN

11 informaci, která popisuje zejména celkový počet paketů a číslo každého z nich. Pakety často nedochází v původním pořadí, protože prochází různými trasami, ale díky servisní informaci je cílový počítač vždy schopen obnovit zprávu nebo soubor ve správném pořadí. Pokud se nějaký paket ztratí, počítač požádá u odesílatele o novou kopii, a tento proces se opakuje tak dlouho, dokud všechny pakety nedorazí na místo určení. Na začátku 90. let se stal Internet nejpopulárnější sítí světa. V této době britský počítačový vědec Tim Berners-Lee 4 vytvořil hypertextový značkovací jazyk (HTML) a protokol pro přenos dokumentů Hypertext Transfer Protokol (HTTP), a také první prohlížecí editor World Wide Web (WWW). 1.2 World Wide Web Po celém světě je pro World Wide Web používána zkratka WWW. Web se zakládá na technologii hypertextu, takže můžeme říct, že WWW slouží pro hledání a zobrazení hypertextových dokumentů. Hypertext je text, který obsahuje odkazy na jiné dokumenty (např. texty, videa, obrázky, hudbu atd.). Jak bylo řečeno dříve, autorem Webu je Tim Berners-Lee, který na konci roku 1990 spustil první webový server na světě info.cern.ch. Dalším důležitým termínem je prohlížeč (browser). 5 Prohlížeč je program pro čtení hypertextu. Browser funguje na počítači uživatele jako klient. Program vyžaduje potřebné informace z webových serverů, se kterými komunikuje pomocí speciálního protokolu HTTP. Prvním rozšířeným prohlížečem byl v letech NCSA Mosaic. Tento browser měl svá omezení, která byla opravena v dalším populárním prohlížeči Netscape Navigator (rok 1995) 6. Tento browser byl populární, protože byl schopen pracovat pod různými operačními systémy (Windows, Mac OS). To přivedlo Microsoft k vydání vlastního prohlížeče, kterým se stal všem dobře znáý Internet Explorer. Později byly na trh 4 SUSAN, Lesch. Tim Berners-Lee. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, [cit ]. Dostupné z: 5 KROL, Ed. Vše o Internetu. Průvodce uživatele a katalog zdrojů (2. vydání). Veletiny: Science, ISBN KOSEK, Jiří. Internet: první kroky českého uživatele (1. vydání). Praha: Grada Publishing, ISBN

12 uvedeny další prohlížeče Opera (1995) a Chrome (2008), které se také staly velmi populárními a fungují až do dneška. V roce 1991 byl Web představen všem uživatelům Internetu 7. Tento program byl nabízen zcela zdarma a poskytovatelé informací mohli zdarma použít také programy pro webový server. Pojem server má 2 hlavní významy: Server je program, který poskytuje své služby jiným programům. Když chceme prohlížet nějakou webovou stránku, prohlížeč si ji vyžádá od serveru. Server je počítač, který poskytuje své služby ostatním počítačům. Obvykle na serveru-počítači je zapnut server-program. Server-program komunikuje s prohlížečem a na základě uvedených požadavků vysílá soubory k počítači. 8 Z toho vyplývá, že webový server je spojením těchto server-program a server-počítač. URL URL neboli celým názvem Uniform Resource Locator ( jednotný lokátor zdrojů ) je řetězec znaků s definovanou strukturou, který slouží k přesné specifikaci umístění zdrojů informací (ve smyslu dokument nebo služba) na Internetu. Každý dokument, který je uložen na nějakém serveru v Internetu, má svou adresu. Původně byl URL používán pro označení umístěných zdrojů (nejčastěji to jsou soubory) na počítačovém serveru. Zjednodušeně můžeme říct, že URL je odkaz Co jsou webové stránky Webová stránka je zdroj informací. Webové stránky mají jednoznačnou adresu URL (viz výše). Webové stránky mají různé cíle, mezi které patří například: zajištění prodeje (E-shop); organizace vzájemné komunikace lidí (sociální sítě); tyto cíle jsou však až druhořadé, primárním cílem bylo zveřejnit informace, které budou přístupné kdykoli a komukoli (vědecké články v CERN). Až později se 7 KOSEK, Jiří. Internet: první kroky českého uživatele (1. vydání). Praha: Grada Publishing, ISBN KOSEK, Jiří. Internet: první kroky českého uživatele (1. vydání). Praha: Grada Publishing, ISBN Odkaz cesta pro prohlížeč, aby ten mohl přijít na požadovaný dokument nebo služby. 12

13 zjistilo, že se webové stránky dají použít ke zprostředkování a šíření jakýchkoli informací. Jak již bylo řečeno, první webovou stránkou se stala info.cern.ch, která popisovala novou technologii World Wide Web. Autorem byl Tim Berners-Lee. Z pohledu běžného uživatele není webová stránka ničím jiným než textovým dokumentem. Tento dokument je napsán v konkrétních programovacích jazycích (HTML, XHTML, Java atd.). Webové stránky mohou být statické, tedy tvořené jednoduchou sadou souborů. Z technického pohledu je webová stránka softwarový komplex, který obsahuje určité množství dat a je zobrazována pomocí prohlížeče v podobě webových stránek. Tento komplex je uložen na vyhrazeném počítači, který se nazývá server. Definice serveru již byla podána výše. 1.4 Jak fungují webové stránky Na jednodušší úrovni dochází k výměně informací mezi dvěma počítači, které jsou propojeny sítí vaším počítačem (klient) a počítačem s webovou stránkou (server). Na žádost z vašeho počítače, server pošle webovou stránku (viz Schéma 1). Schéma 1: Jednoduchá výměna informací mezi dvěma počítači 1 Počítač-server Žádost o webové stránky Počítač-klient Získaní html-souboru 2 Počítače mohou samozřejmě fungovat 1 samostatně, a proto výměna informací probíhá v programech. Na straně klienta funguje prohlížeč IE (Internet Explorer), Firefox, Opera, Chrome atd. Na straně serveru funguje webový server (Apache, IIS), což je program určený k odpovídání na žádosti prohlížečů, který obdrží od prohlížeče žádost a vydá mu webovou stránku. Schéma 2: Výměna informací mezi dvěma počítači pří pomocí programů Počítač-server Webový server 1 Žádost o webové stránky Získání html-souboru Počítač-klient Prohlížeče (Opera, Chrome, IE atd.)

14 Nyní se zaměříme na to, jak server pozná, které stránky má vydat. Prohlížeč mu vysílá tuto informaci do URL stránky např. seznam.cz. Počítače samotné mají odlišné adresy tzv. IP adresy. IP adresa je v informatice číslo, které jednoznačně identifikuje síťové rozhraní v počítačové síti, která používá IP (internetový protokol). V současné době je nejrozšířenější verze IPv4, která používá 32bitové adresy zapsané dekadicky po jednotlivých oktetech (osmibitové slovo), například Z důvodu nedostatku IP adres bude nahrazen protokolem IPv6, který používá 128bitové IP adresy. Z toho vyplývá, že prohlížeč komunikuje s počítačem na konkrétní IP adresu a řekne mu, že chce dostat webovou stránku s konkrétní adresou. Webová stránka je vždy na serveru, který ji posílá. Už víme, že IP adresa se skládá z čísel, ale tento kód je pro běžného uživatele těžko zapamatovatelný. Daleko lépe se pamatují vhodně zvolená jména a názvy. Proto byl v roce vytvořen DNS, který vyvinul Paul Mockapetris DNS DNS (Domain Name Service) je síťová služba, která převádí doménové jméno (např. seznam.cz) na jeho IP adresu ). DNS je sít serverů s databází doménových jmen a jejich IP ekvivalentů, které se nachází na Internetu. Všechny servery jsou vzájemně propojeny. Pokud není konkrétní server schopen při přijetí žádosti zajistit přepis jména na IP adresu (např. ji ještě nemá v databázi), server předá tento požadavek na jiné DNS servery, které si tento požadavek předávají tak dlouho, dokud není doménové jméno převedeno na IP adresu. Služby DNS serverů používají prakticky všechny programy, které fungují na Internetu. Vždy, když píšeme doménové jméno do prohlížeče, DNS vypočítá, jaká IP adresa odpovídá tomuto názvu a jaké zdroje je třeba poskytnout. DNS je rozdělen do několika úrovní. Uveďme si jednoduchý příklad: za nejvyšší úroveň můžeme považovat domény země cz (Česká republika), kz (Kazachstán), ru (Rusko), com pro komerční organizace atd. druhá úroveň zobrazuje název organizace Google, seznam apod. nejnižší úroveň zobrazuje název počítače v rámci organizace 10 KROL, Ed. Vše o Internetu. Průvodce uživatele a katalog zdrojů (2. vydání). Veletiny: Science, ISBN

15 Z výše uvedeného lze vyvodit, že pro provozování webové stránky jsou zapotřebí celkem tři počítače: počítač-klient Server, na kterém je uložena webová stránka DNS-server Pokud zadáme nějaké jméno webové stránky do adresního řádku prohlížeče, prohlížeč bude nejprve komunikovat s DNS-serverem a získá od něho IP adresu webového serveru. Následně pak požádá webový server o webovou stránku se správnou adresou. Schéma 3: Složitá výměna informací pří pomocí IP-adresy Počítač-server DNS server IP počítačů, na kterém se nachází webová stránka 1 2 Prohlížeče (Opera, Chrome atd.) 3 4 Webový server 1. Žádost o IP, na kterém se nachází webová stránka; 2. obdržení IP; 3. žádost od poznaného IP, aby ten ukázal webovou stránku; 4. získání html-souboru. Pouze samo doménové jméno však ještě nestačí. Soubory, které se mají stát webovou stránkou, musí být někde umístěny. Takové místo musí splňovat následující podmínky: musí to být počítač počítač musí být stále zapnutý a připojený k Internetu výhodou je vysokorychlostní připojení k Internetu počítač musí mít přidělenu IP adresu, pod kterou je možné ho najít musí mít nainstalovaný speciální software Z toho vyplývá, že musíme mít server (ten byl popsán v předchozích kapitolách). Webový server je nákladné zařízení jak z hlediska pořízení, tak z hlediska nákladů. Proto ho nemá každý, kdo chce webové stránky provozovat. Pro ně je k dispozici služba nazvaná hosting. 15

16 1.4.2 Hosting Hosting (neboli hostování webových stránek) je služba, která poskytuje prostředky pro fyzické umístění informací na serveru, do něhož nahrajeme soubory projektu webových stránek, a který je vždy připojen do sítě. Pod pojmem hosting si můžeme představit široké spektrum služeb: domény zdarma elektronická pošta databáze podpora skriptů zabezpečení před síťovými útoky technická podpora V souladu s podmínkami služby můžeme zvolit bezplatný nebo placený hosting. Bezplatný hosting znamená, že umístění webové stránky na webový server je zdarma. Bezplatný hosting má bohužel celou řadu nevýhod: malý objem prostoru na disku různá omezení týkající se formátu a velikosti nahrávaných souborů často zákaz používání skriptovacích jazyků (Perl, Java, ASP.NET) a databází umístění reklamy na vašich stránkách pomalejší než placené nejsou spolehlivé Placený hosting znamená, že za použití hostingu musí jeho uživatel zaplatit určitou finanční částku. Tato částka je obvykle závislá na kvalitě poskytovaných služeb. Placený hosting nabízí daleko lepší služby včetně různých garancí. Obvykle nabízí větší prostor na disku, lepší administraci, statistiky, podporu většího počtu databází, více ů apod. Tento prostor obvykle poskytuje tzv. poskytovatel hostingu a platí se za něj. Podle typu poskytovaných prostředků se hosting dělí na: 1. Virtuální hosting. V tomto typu hostingu existuje množství webových stránek umístěných na jednom serveru. 2. Virtuální privátní server (VPS). Pokud zvolíte tento hosting, budete mít místo na disku, část sdílené pamětí a procesorový čas na serveru. 16

17 Virtuální server je emulovaný stroj běžící na fyzickém hardwaru skutečného serveru. VPS je mezikrok mezi webhostingem a dedikovaným serverem, kdy klient může se serverem pracovat, jako by byl vyhrazen pouze pro něj, ale prakticky jsou HW prostředky sdílené několika uživateli. Při klasickém serverhostingu má zákazník umístěn svůj vlastní nebo pronajatý server v datovém centru. Hradí náklady na provoz serveru, zajišťuje si sám jeho monitoring, dohlíží na správnou funkčnost hardware, jeho upgrady v případě potřeby vyššího výkonu a případné opravy. Z uvedených důvodů je také nucen řešit návštěvy datového centra, přístupová oprávnění apod. Virtuální serverhosting je funkčností shodný s klasickým serverhostingem, veškeré starosti a náklady na provoz serveru ale přebírá poskytovatel služby. Ten také řeší případné opravy a zodpovídá za dostupnost serveru. Zákazník nemusí nikdy navštěvovat datové centrum ani se starat o hardware nebo řešit problémy s výkonem. Při potřebě vyššího výkonu lze více zdrojů (více procesorových jader), více paměti RAM, větší nebo další HDD, nastavit prakticky okamžitě. Hlavní výhody virtuálního serveru Plná kontrola nad serverem včetně SSH (Secure Shell je v informatice označení pro program a zároveň pro zabezpečený komunikační protokol v počítačových sítích, které používají TCP/IP přístup) Instalace libovolných programů a skriptovacích jazyků Libovolné nastavení aplikací a pracovního prostředí Nízká cena v porovnání s dedikovaným serverem Vyhrazený výpočetní výkon Neomezený datový tok V případě že je server nevytížen, má uživatel navíc k dispozici řádově vyšší výkon a množství operační paměti Vas-hosting.cz: Virtualni-server [online] [cit ]. Dostupné z: 17

18 3. Dedikovaný server je fyzický server pronajatý pouze jedinému zákazníkovi a jeho webovým projektům, databázím, ům a dalším aplikacím. Dedikované servery jsou určeny pro větší webové projekty a aplikace, kde je kladen velký důraz na výkon, bezpečnost a stabilitu. Na rozdíl od webhostingu, kde se dělí o jednu HW platformu desítky (někdy i stovky) zákazníků, je dedikovaný server nesdílený. Součástí služby pronájmu serverů je i konektivita. Pronájem serveru je výhodný pro společnosti, které chtějí přenechat provoz serveru poskytovateli, který například zajistí výměnu jednotlivých komponent v případě havárie Colocation neboli lokalizovaný hosting. Poskytuje podobné služby jako dedikovaný server, ale kupující si v tomto případě nepronajímá server, ale kupuje si svůj osobní server, který poté doručí do datového centra. Hostingová společnost v tomto případě poskytuje serveru fyzický prostor a zajišťuje jeho výkon (síťové připojení prostřednictvím komunikačních kanálů s vysokou šířkou pásma, redundantní napájení, bezpečnost, ochrana proti přehřátí, prachu a vlhkosti). Představili jsme si jednotlivé druhy hostingu, především pak jeho rozdělení na bezplatné a placené. Ceny za hosting mohou být od několika korun až po tisíce korun za měsíc, ale to neznamená, že čím dražší server si pronajmeme, tím lépe pro nás. Za vysokou cenu totiž i na poli hostingu můžeme získat nekvalitní výrobek. 12 Master.cz: dedikovane-servery [online] [cit ]. Dostupné z: 18

19 2. Tvorba webových stránek Tvorba webových stránek se skládá z několika kroků: vytvoření struktury webové stránky, grafické části (v těchto dvou krocích je potřeba zjistit od zákazníka, jak má stránka vypadat a k jakému účelu bude sloužit atd.), kódování v HTML&CSS. K dalším potřebám současných moderních webových stránek patří programování pro webové účely, ve většině případů to jsou programovací jazyky PHP a JavaScript. 2.1 HTML HTML (Hypertext Markup Language) je značkovací jazyk pro hypertext. Původně měl jazyk HTML umožnit zobrazení textového a obrazového obsahu stránek a propojit jednotlivé stránky mezi sebou pomocí odkazů. Jazyk HTML byl vytvořen k tomu, aby dal obsahu WWW stránky smysl. Pomocí HTML tedy vytváříme logickou strukturu dokumentu. Obvykle zahrnuje: formát stránky a tiskové zrcadlo rozvržení textu, obrázků a prázdných ploch typ, velikost a barvy písma záhlaví a nadpisy další grafické prvky (logo, linky a podobně) výběr barev nebo motivů pozadí HTML definuje syntaxi a umístění speciálních instrukcí (tagy), které nejsou zobrazeny, ale ukazují prohlížeči, jak zobrazit obsah dokumentu. Slouží také k vytvoření odkazů na jiné dokumenty, ať již lokální nebo síťové. Struktura HTML stránky <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head>hlavička stránky <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>titulek stránky</title> </head> <body> Obsah stránky </body> </html> 19

20 HTML dokument je rozdělen do dvou hlavních částí: záhlaví <head> a těla <body>. Záhlaví obsahuje informace o dokumentu (jeho jméno a metodické informace, které popisují obsah). V těle se nachází obsah dokumentu (ten se zobrazí v prohlížeči). <html> uvozuje a zakončuje celou stránku. <title> velmi důležitá značka, titulek stránky, její název. Zobrazuje se úplně nahoře v horním pruhu prohlížeče, rovněž se zobrazuje ve výsledcích vyhledávání (např. google.cz). V dnešní době populární HTML Rozlišujeme následující typy: HTML 4.01 Transitional - jedná se o nejrozšířenější typ a je v něm napsaná většina existujících webových stránek (z tohoto důvodu je v něm napsána také velká část učebnic a příruček o HTML). HTML 4.01 Strict - liší se od transitional tím, že nepřipouští všechny tagy a prvky, které odpovídají za podobu a prezentaci dokumentu; HTML 4.01 Frameset - je naopak liberálnější než transitional, protože umožňuje vše jako transitional, ale navíc podporuje i rámečky. Nedávno byl vyvinut HTML5. Rozdíly mezi HTML4 a HTML5 uvedu níže. Tag Tabulka 1: Rozdíl mezi HTML4 a HTML5 HTML 4.01 Transitional Strict Frameset 20 HTML5 <!-- --> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <!DOCTYPE> <base> <body> <br> <button>

21 <caption> <col> <colgroup> <command> <comment> <datalist> <dd> <del> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1>, <h2>,<h3>, <h4>,<h5>, <h6> <head> <header> <hgroup> <hr> <html> <i> <iframe> <img> <input> <label> <legend> <li> <link> <map> <mark> <meta> <nav> <object> <ol> <option> <output> <p> <param> <pre> <samp> <script> <section> <select> <source> <span> <style> <sub> <sup> <summary> <table> 21

22 <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <tt> <u> <ul> <var> <video> <wbr> Nyní popíšeme prvek Doctype, do HTMLu píšeme <!DOCTYPE>. Doctype je určen pro označení typu aktuálního dokumentu DTD (Document Type Definition). Je to nutné proto, aby prohlížeč rozuměl, jak interpretovat aktuální webovou stránku, protože HTML existuje v několika verzích, které jsou uvedeny výše. Tabulka 2: DOCTYPE v různých verzích HTML Verze HTML DOCTYPE Popis HTML 4.01 Transitional HTML 4.01 Strict HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> Transitional syntax HTML. Obsahuje všechny HTML prvky a atributy, společné se zastaralými. Striktní syntax HTML. Obsahuje všechny HTML prvky a atributy, kromě zastaralých. Rámečky jsou zakázány. V HTML dokumentu používáme rámečky (frame). Stejný jako HTML 4.01 Transitional, ale dovolí rámečky. HTML5 <!DOCTYPE html> Pro všechny dokumenty Nyní si popíšeme slíbené rozdíly mezi HTML4 a HTML5. Jak vidíte z tabulky výše, jedním z rozdílů je zmíněný Doctype. Dříve jsme v HTML4 psali: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> 22

23 Ale v HTML5 stač napsat pouze: <!DOCTYPE html> Další důležitý příklad: Tag <meta> v HTML4 bude vypadat takto <meta http-equiv="content-type" content="text/html; charset=utf-8"> V HTML5 takto: <meta charset="utf-8"> HTML5 také obsahuje hodně nových tagu: <header>, <footer>, <section> atd. Některé staré tagy naproti tomu byly odstraněny: <font>, <center>, <frame> atd. Popíšu si ještě, co to vlastně jsou tag a atribut Tag Tag je prvek jazyka HTML, je to prostý text, který je uzavřen v lomených závorkách <>. Je to aktivní prvek, který mění za ním následující informaci. Tag definuje hranici prvku v textu a má jen malý počet atributů. Většina tagů jsou počáteční (otevřené) a konečné (zavřené). Text mezi nimi bude provádět pokyny podle instrukci. Konečný tag má stejný název jako počáteční, ale píšeme před ním lomítko (/). Konečný tag nikdy neobsahuje atribut. <tag>text zobrazovaný na stránce.</tag> Některé tagy nemají konečný tag, protože se používají pro umístění jednotlivých prvků na stránce. Jedním z nich je tag <img>. (Např. tag <img> je určen pro zobrazení obrázků na webové stránce v grafickém formátu GIF, JPEG nebo PNG. Nejedná se o uzavírací tag, je to jen jeden tag. Tento tag má jediný povinný atribut, který určuje cestu na obrázek). Další samostatné tagy jsou např. konec řádku (<br>), horizontální čára (<hr>) a tagy, které obsahují informace 23

24 o dokumentu a neovlivňují obsah zobrazovaný na obrazovce. To jsou například tagy <meta> a <base>. Jinými slovy lze říct, že existují párové a nepárové tagy. Jak je zřejmé z příkladu, vyskytují se tagy v párech <tag> a </tag>, kdy první tag něco začíná a druhý něco končí. Příklady párových tagů: <head> je začátek hlavičky a </head> je její konec <body> je začátek těla stránky a </body> je konec těla stránky <b> je začátek tučného textu a </b> je konec tučného textu Schéma 4: a Schéma 5: b Vložení tagu: a správně, b špatně. Z tohoto důvodu můžeme pochopit, že nepárové tagy nemají uzavírací tag, ty ale nejsou časté Prvky Prvkem nazýváme celou sekvenci tagů počínaje počátečním tagem a konče tagem ukončovacím. Existují tři základní druhy prvků: blokové, inline a nahrazované. Podle významu, který textu přiřazují, je můžeme rozdělit ještě na prvky pro strukturování dokumentu, textové prvky, prvky pro tvorbu odkazů, prvky pro tvorbu tabulek, prvky pro tvorbu seznamů a podobně. Blokové prvky Jsou to prvky, které tvoří nějaký blok. Zjednodušeně to znamená, že po takovém elementu je text dokumentu zalomen, odřádkován. Blokovými elementy jsou například <h1> pro nadpis nebo <p> pro odstavec. Inline prvky Inline prvky jsou ty, které se nachází uvnitř textu, nedochází po nich k zalomení. Obvykle plní funkci zvýraznění nějaké části textu. Je to například <a> pro hypertextový odkaz. 24

25 Nahrazované prvky Ty jsou nahrazeny nějakým obsahem, pro začlenění dokumentu jsou důležité jejich rozměry. Například <img> pro obrázek Atribut Atribut je vlastnost tagu, která poskytuje další možnosti pro formátování textu. Atributy se píší do počátečního tagu, může jich být více (oddělují se mezerou). Každý atribut má svou hodnotu. Hodnota atributu musí být zapsána v uvozovkách. <prvek atribut="hodnota _atributu">text zobrazovaný na stránce.</prvek> Standard HTML a ostatní standardy pro Web vyvinuté pod vedením konsorcia W3C (World Wide Web Consortium). Standardy, specifikace a projekty nových návrhů lze najít na webových stránkách HTML dokumenty jsou obvyklými textovými ASCII 13 soubory. To znamená, že k jejich vytvoření můžeme použít libovolný textový editor, dokonce s minimálními funkcemi. K dispozici jsou nástroje pro úpravu, které byly navrženy speciálně pro psaní HTML Protože se jazyk HTML vyvíjel, vznikaly časem různé způsoby, jak formátovat text. Proto dnes existují dva odlišné způsoby, jak můžeme v HTML například obarvit písmo nebo ztučnit text. 1. Starší způsob používá přímo HTML tagy (o tomto způsobu pojednáváme na začátku této podkapitoly). Jen za pomocí tagů však nemůžeme některé věci vytvořit. 2. Novějším způsobem jsou tzv. CSS styly používají tag <style> a obecný atribut style, kterému se přiřazuje nějaká definice. Jedná se o složitější, ale užitečnější a všeobecnější způsob, s jehož pomocí se dají vytvářet různé věci, které popíšeme v následující podkapitole CSS. V následujících odstavcích popíšeme proces vytvoření dynamické webové stránky pomocí DHTML. DHTML je dynamická varianta HTML. 13 ASCII (American Standard Code for Information Interchange) americký standardní kód pro výměnu informací. 25

26 2.2 DHTML DHTML (Dynamic Hypertext Markup Language nebo prostě Dynamic HTML) je způsob vytvoření interaktivní webové stránky a dynamických efektů na webových stránkách, který používá kombinaci statického značkovacího jazyka HTML, klientský JavaScript, kaskádové styly CSS (Cascading Style Sheets) a někdy také objektové modely dokumentu DOM (Document Object Model). Zkratkou DHTML se označuje souhrn nástrojů a postupů umožňujících dynamické změny HTML dokumentů. Jedná se o postup, jak přímo v prohlížeči na jinak statické stránce zobrazit či skrýt část jejího obsahu, provést určitou akci podle činnosti uživatele (pohyb myši, kliknutí, stisk klávesy, načtení stránky atd.), animovat pohyb prvků na stránce či automatizovat funkce prohlížeče. Může se jednat o animace, dynamické nabídky, textové efekty jako například vržený stín, text, který se zobrazí, jakmile uživatel přesune kurzor na některou položku a podobné efekty. DHTML není samostatný jazyk nebo webový standard, jde o soubor nástrojů a postupů kombinující ostatní technologie K čemu je DHTML? Je vcelku k ničemu, protože: DHTML zřídka poskytují nějakou informaci, většinou se jedná pouze 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 26

27 2.2.3 Potřeba DHTML Pokud se DHTML použije správně, může u uživatelů výrazně přispět k lepšímu dojmu z webových stránek. DHTML bylo původně známé pro své flashové efekty. Tyto efekty se dají používat i dnes, ale jejich důležitost je sporná a v případě nevhodného použití mohou být pro uživatele dokonce rušivé a otravné Jak DHTML funguje Podle Stevena M. Schafera: DHTML se dá aktivovat bud pomocí určitých vlastností kaskádových stylů nebo pomocí JavaScriptu, který přímo manipuluje s prvky HTML. Při použití JavaScriptu využívá DHTML objektový model prohlížeče, což je strom objektů vycházející ze sady prvků HTML a sady vlastností CSS. Když tento objektový model použijete při svém kódování, můžete změnit vlastností prvků, které jsou propojeny s atributy prvků. Na atributy prvků se v prostředí JavaScriptu odkazuje jako na vlastnosti. Jak se na tyto vlastnosti odkazuje a jaké akce (metody) je s nimi provádět, závisí právě na rozhrání DOM. 14 Závěrem lze říct, že HTML definuje základní strukturu webové stránky a také ukazuje, které prvky se na ní vyskytují. Úprava webové stránky, poloha a tvar prvků jsou přiřazeny stylům, nebo CSS. Pokud se jedná o kódování webových stránek, to se děje za spolupráce HTML a CSS. HTML může vytvořit jednoduchou stránku. Také CSS je nadstavba nad HTML pro lepší formátování textů. Proto pracují HTML a CSS společně. Kterákoli webová stránka je tedy ve skutečnosti kombinací HTML a CSS kódu. Bez základní znalosti těchto technologií není možné správně vytvořit žádné dokumenty. 2.3 CSS CSS (Cascading Style Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. Kaskádové se nazývají proto, že se na sebe mohou vrstvit definice stylu. První návrh normy byl zveřejněn v roce 1994, v roce 1996 byla pak vydána specifikace CSS1 (byla zavedena syntaxe používaná ve všech následujících verzích, způsob vybírání prvků přes selektory, několik pseudotříd, hodnoty a jejich jednotky), v roce 1998 CSS2 (obsahuje navíc stránkovaná média a lepší podporu písem a nastavování pozic prvků. Také byla vylepšena řada dalších vlastností), nyní se pracuje na verzi CSS3 (spojená se standardem HTML5, obsahuje navíc vlastnosti pro prezentaci, díky čemuž bude možné z webových dokumentů efektivně 14 SCHAFER, M. Steven. HTML, XHTML a CSS. Bible pro tvorbu WWW stránek (4. vydání). Praha: Grada Publishing, ISBN

28 vytvářet prezentace). 15 Jazyk byl navržen standardizační organizací W3C, autorem prvotního návrhu byl Håkon Wium Lie. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s formátováním pomocí atributů v HTML formátovací schopnosti rozšiřuje. Styly umožňují přesně určit, jak bude který prvek vypadat. Na rozdíl od atributů, stylem můžeme definovat jednotný vzhled prvku pro celý dokument (např. všechny tagy <h1> budou modré), a to jediným zápisem pro příslušný prvek. Stejně tak můžeme pomocí stylu určit odlišné formátování pro třeba jen jediný výskyt určitého prvku. Tím se jednak zbavíme velkého množství kódu, jednak se tento kód stane mnohem přehlednějším. Jeden styl můžeme snadno použít pro libovolné množství stránek, nebo můžeme CSS styly pomocí jednoho souboru ovlivňovat design celého webu. Tabulka 3: Specifikace CSS Specifikace CSS Kategorie Co umí, a jaké možnosti se rozšíří (jde o CSS2 a CSS3) vlastnosti písma barvy textu a pozadí vlastnosti textu vlastnosti blokových prvků způsoby zobrazení prvků řízení pozice CSS1 Hodnoty a jednotky barvy přes některou z předdefinovaných konstant, např. black (černá), blue (modrá), gray (šedá), green (zelená), red (červená), white (bílá) atd. #rgb, kde r, g nebo b jsou barevné složky specifikované jako hexadecimální číslovky (0 až f) rgb(r,g,b), podobně jako výše, ale hodnoty jsou v desítkové soustavě (0 až 255) CSS2 outline vnější ohraničení max-height, max-width, min-height, min-width minimální a maximální šířka nebo výška prvků content nastavitelný obsah prvku counter nástroj pro číslování kapitol cursor kurzor nad prvkem 15 Webtvorba.cz: CSS [online] [cit ]. Dostupné z: 28

29 position možnost umístit prvek v řádku, v bloku, absolutně, relativně top, bottom, right, left okrajové hodnoty pro position: absolute overflow zobrazení při přetékání obsahu visibility viditelnost prvků z-index možnosti překrývání border-collapse, border-spacing, caption-side, empty-cells nové možnosti pro zobrazení tabulek direction směr psaní textu CSS3 animace CSS3 přímo podporuje animaci prvků (jejich vlastností), doposud se animace dělaly přes DHTML, např. jquery dodatečné možnosti stylování pozadí blokových prvků dodatečná pravidla pro přetékání obsahu blokových prvků další podpora stránkovaného obsahu záložky a možnosti dělení textu flexibilní blokové elementy dodatečné vlastnosti pro písma načítání písma z externího zdroje, přizpůsobení velikosti při nízké čitelnosti, zužování/rozšiřování písma vlastnosti pro generovaný obsah zkracování obsahu s možností expanze, přesunování prvků dále ve stránce cílové odkazy jak a kde se mají otevírat vlastnosti pro čtený text 2D a 3D transformace vlastnosti spolupracující s navigací uživatelsky definované vlastnosti Styl můžeme k dokumentu připojit několika způsoby, níže uvádím příklady: 1. Přímý styl styl můžeme definovat přímo nějakému prvku, což se hodí zvláště v případě, kdy máme definovaný jednotný styl, ale pro například jedno konkrétní slovo chceme použít jiné pravidlo. V takovém případě použijeme v příslušném tagu atribut style: 29

30 <h1 "style=">text</h1> 2. Pomocí stylopisu (stylesheet) v hlavičce stránky. Stylopis je seznam stylů. Je v něm obecně napsáno, co a jak má být zformátováno: <style type="text/css">body {color: blue}</style> 3. Použitím externího stylopisu to je soubor *.css. Ten pak připojíme k dokumentu zápisem v hlavičce, mezi tagy <head> a </head> v tagu <link>. V souboru je umístěný stylopis. Hlavní výhoda je v tom, že jeden styl lze využit pro více dokumentů: <link rel="stylesheet" type="text/css" href="styl.css" /> Jak již bylo uvedeno výše, pravidla stylu jsou psána v jiném než HTML formátu. Základním pojmem je selector to je název stylů, pro které jsou přidány možnosti formátování. Pod pojmem selector můžeme v dokumentu uvádět tagy, třídy a identifikátory Selektor Schéma 6: Obecný způsob zápisu selektoru Selektor (angl. selector) může být přeložen jako vybraný. Selektor udává, jaký prvek bude blok deklarací formátovat. Selektorem může být třída (class), identifikátor (id), tag, nebo různé kombinace. Identifikátoru se v CSS předřazuje křížek (#), třídám tečka (.) a tagu se nepředřazuje nic, napíše se tak jak je (bez špičatých závorek). Je možné formátovat více elementů najednou, stačí jejich selektory oddělovat čárami. Dalším formátováním je formátování vnořených prvků, pro takové formátování se selektory oddělují mezerami. Selektory jsou vzory, díky nimž uživatelský prohlížeč pozná, na které prvky se určitý styl vztahuje. Shrnutí v následujících příkladech: Identifikátor jako selektor. Identifikátor určuje unikátní jméno prvku, který se používá ke změně svého stylu a přístupu k němu prostřednictvím skriptů. #id {vlastnost: hodnota;} 30

31 Třída jako selektor. Třídy se používají, když chceme definovat styl pro jednotlivý prvek na webové stránce nebo nastavit různé styly pro jeden tag..class {vlastnost: hodnota;} Tag jako selektor. Jako selektor může být libovolný HTML tag, který definuje pravidla pro formátování, jako jsou barva, barva pozadí, velikost atd. tag {vlastnost: hodnota;} Univerzální selektor. Někdy je třeba nainstalovat jeden styl pro všechny prvky webových stránek, například nastavení písma nebo styl písma textu. V tomto případě použijeme univerzální selektor, který odpovídá libovolnému prvku webové stránky. Pro označení selektoru používáme hvězdičku (*). *{popis pravidel stylu} Hromadné.class, #id {vlastnost: hodnota;} To označuje, že prvky s třídou "class" budou formátovány stejně jako prvek s identifikátorem "id". Hromadné formátování můžeme přiřadit prvkům neomezeně. Formátování vnořených prvků p a {vlastnost: hodnota;} Označení bude formátovaný pouze a (odkaz), který se nachází v p (odstavec). Vnořené formátování je možné kombinovat s hromadným formátováním. Tabulka 4: Základní CSS vlastností Vlastnost Hodnoty Význam color barvy slovy, hexadecimálně, rgb změna barvy textu text-align left, right, center, justify zarovnání textu text-decoration none, over line, line-through, underline, blink přikrášlení textu - podtržení, natržení, přeškrtnutí.. text-transform uppercase, lowercase, capitalize převod velkých a malých písmen 31

32 margin jednotky vnější odsazení prvku padding jednotky vnitřní odsazení background-color barvy slovy, hexadecimálně, rgb barva pozadí background-image cesta k obrázku obrázkové pozadí background-repeat none, repeat-x, repeat-y iterace obrázku v pozadí width jednotky šířka prvku height jednotky výška prvku border-width jednotky šířka ohraničení border-style none, dotted, dashed, solid, double, groove, ridge, inset, outset styl ohraničení position absolute, relative umístění left jednotky pozice zleva top jednotky pozice shora z-index čísla pozice prvku v ose z, vyšší číslo blíže border-collapse separate, collapse překrývání buněk v tabulce visibility visible, hidden viditelnost prvku Dědičnost stylů Podle Stevena M. Schafera: Slovo dědičnost je ve slovníku Webster s Dictionary definováno jako: a) skutek zdědění majetku; b) přenos genetických kvalit z rodičů na potomky; c) získání majetku, stavu nebo charakteru od minulých generací. A právě tato definice odpovídá i chování prvků HTML ovládaných kaskádovými styly dceřiné prvky dědí vlastnosti svých rodičů. 16 Dědičnost stylů je při práci s kaskádovými styly velmi důležitým mechanizmem. V kaskádových stylech jsou všechny vlastnosti popředí automaticky děděny všemi následujícími prvky. Následující definice bude mít například za následek, že všechny prvky budou mít červenou barvu, pokud každý prvek v dokumentu je potomkem body: body {color: red;} 16 SCHAFER, M. Steven. HTML, XHTML a CSS. Bible pro tvorbu WWW stránek (4. vydání). Praha: Grada Publishing, ISBN

33 Toto pravidlo o dědičnosti platí pouze pro vlastnosti popředí. Vlastnosti pozadí (barva pozadí, obrázek pozadí atd.) totiž následné prvky automaticky nepřebírají Kaskáda Zkratka CSS je označení pro kaskádové styly (Cascading Style Sheets), jedním z klíčových slov je kaskáda. Pod tímto pojmem v tomto případě rozumíme současné použití různých pravidel stylu pro prvky v dokumentu za pomoci připojení několika stylů souboru, dědičnosti majetku a dalších technik. Aby v takové situaci prohlížeč pochopil, jaké pravidlo bude nakonec platit pro prvek, byly zavedeny některé priority. Níže jsou priority prohlížeče, které řídí zpracování pravidel stylu. Platí, že čím vyšší je položka v seznamu, tím nižší je její priorita: 1. Styl prohlížeče. Jedná se o styly, které prohlížeč použije v případě, že žádné jiné styly nejsou v dokumentu definovány. Tyto styly jsou obvykle velmi primitivní a jednoduché. 2. Styl uživatele. Jedná se o styly, které si vybere uživatel. Tyto styly si koncový uživatel vybírá z místních šablon a lze pomocí nich modifikovat výchozí vzhled dokumentu. 3. Styl autora. Jedná se o styly, které do dokumentu vloží sám autor. Tyto styly označují způsob, jak má podle autora dokument vypadat Specifičnost Existuje ještě jedna stránka kaskádových stylů, která přispívá ke konfliktům při zobrazení. Jestliže se k jednomu prvku současně vztahují konfliktní pravidla stylu, má vyšší prioritu pravidlo, u kterého je hodnota specifičnosti selektoru větší. Specifičnost je nějaká podmíněná hodnota, kterou lze vypočítat následujícím způsobem: a) pro každý identifikátor platí 100 b) pro každou třídu a pseudotřídu platí 10 c) pro každý selektor tagu a pseudoprvek platí 1 Po sečtení těchto hodnot získáme hodnotu specifičnosti pro daný selektor. 33

34 Obrázek 1: Průměrný způsob výpočtu specifičnosti Inline styl, přidaný do tagu přes atribut style, má specifičnost 1000, a proto vždy překrývá související a globální styly Pseudotřídy Pseudotřídy jsou identifikátory, které dovedou prohlížeče zpracovat a aplikovat na určité prvky, aniž by tyto prvky musely být explicitně stylizovány. Pseudotřídy definují dynamický stav prvků, které se mění s časem nebo s akcemi uživatele. Příkladem takového stavu je text odkazu, který mění barvu, když na něm podržíme kurzor myši (jinými slovy je odkaz navštívený nebo nenavštívený). Při použití pseudotříd prohlížeč nezatěžuje aktuální dokument, proto pomocí pseudotříd můžeme obdržet různé dynamické efekty na stránce. Syntaxe použití pseudotříd: selektor: pseudotřída { popis pravidel stylu } Obvykle jsou všechny pseudotřídy rozděleny do tří skupin: definující stav prvků související se stromem prvků označující jazyk textu Pseudotřídy definující stav prvků Tato skupina obsahuje pseudotřídy, které uznávají současný stav prvků a používají styl pouze pro tuto podmínku. Jako příklad můžeme uvést styly odkazů. U těchto prvků se dá použít celá řada pseudotříd. 34

Přehled základních html tagů

Přehled základních html tagů Přehled základních html tagů h1... hlavní nadpis h2... podnadpisy h3... podnadpisy další úrovně p... odstavec strong... tučné písmo b... tučné písmo em... kurzíva i... kurzíva br... zalomení řádku ol...

Více

(X)HTML, CSS a jquery

(X)HTML, CSS a jquery Prezentační vrstva webové aplikace (X)HTML, CSS a jquery jquery Java Scriptová knihovna Ing. Martin Dostal (X)HTML první stránka Textový soubor s příponou.htm nebo.html: moje

Více

HTML Hypertext Markup Language

HTML Hypertext Markup Language HTML Hypertext Markup Language je jazyk určený na publikování a distribuci dokumentů na Webu velmi jednoduchý jazyk používá ho mnoho uživatelů má výkonné prostředky (příkazy) k formátování dokumentů (různé

Více

HTML - Úvod. Zpracoval: Petr Lasák

HTML - Úvod. Zpracoval: Petr Lasák HTML - Úvod Zpracoval: Petr Lasák Je značkovací jazyk, popisující obsah HTML stránek Je z rodiny SGML jazyků, jako např. XML, DOCX, XLSX Nejedná se o programovací ale značkovací jazyk Dynamičnost dodávají

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek HTML Hypertext Markup Language jazyk pro tvorbu webových stránek Rozšíření: JavaScript, CSS Dynamické stránky: PHP, ASP(X), JSP Prohlížeče: IE, Firefox, Opera, Google Chrome mohou

Více

WWW a HTML. Základní pojmy. Ivo Peterka

WWW a HTML. Základní pojmy. Ivo Peterka WWW a HTML Základní pojmy WWW World Wide Web systém navzájem propojených stránek Stránky se mohou skládat z částí nacházejících se v různých částech světa. HTML HyperText Markup Language Slouží k psaní

Více

Vývoj Internetových Aplikací

Vývoj Internetových Aplikací 2 Vývoj Internetových Aplikací HTML a CSS Ing. Michal Radecký, Ph.D. www.cs.vsb.cz/radecky HTML a CSS - Tvorba webových stránek - Struktura - Obsah - Vzhled - Funkcionalita zdroj: http://www.99points.info

Více

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN Škola: Gymnázium, Brno, Slovanské náměstí 7 Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN prostřednictvím ICT Číslo projektu: CZ.1.07/1.5.00/34.0940

Více

Obsah. Stručná historie World Wide Webu 7

Obsah. Stručná historie World Wide Webu 7 KAPITOLA I Web bez tajemství 1 Kde se vzal web a jeho stránky 2 Kouzlo jménem HTML 3 Jak stránky připravovat 5 Webová grafika 6 Web aktivní a interaktivní 6 Na straně serveru 6 Jak studovat tuto knihu

Více

Tvorba webu. Úvod a základní principy. Martin Urza

Tvorba webu. Úvod a základní principy. Martin Urza Tvorba webu Úvod a základní principy Martin Urza World Wide Web (WWW) World Wide Web (doslova celosvětová pavučina ) je označení pro mnoho dokumentů rozmístěných na různých serverech po celém světě. Tyto

Více

22. Tvorba webových stránek

22. Tvorba webových stránek 22. Tvorba webových stránek Webové stránky jsou spolu s elektronickou poštou nejpoužívanější prostředky internetu. Brouzdáme li internetem používáme nějaký prohlížeč. To, co vidíme na obrazovce v prohlížeči

Více

Mgr. Vlastislav Kučera přednáška č. 1

Mgr. Vlastislav Kučera přednáška č. 1 Mgr. Vlastislav Kučera přednáška č. 1 jazyk (x)html kaskádové styly Castro, E.: HTML, XHTML a CSS. CPress, 2007 Písek, S.: HTML a XHTML, začínáme programovat. Grada Publishing, 2003 Wempen, F.: HTML a

Více

Základy programovacího jazyka HTML. Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP

Základy programovacího jazyka HTML. Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP Základy programovacího jazyka HTML Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP Název školy: Číslo a název projektu: Číslo a název šablony klíčové

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek Kaskádové styly Úprava vzhledu webové stránky pomocí atributů má několik nevýhod a úskalí. Atributy nabízejí málo možností úprav. Obtížně se sjednocují změny na různých částech

Více

CZ.1.07/1.5.00/34.0527

CZ.1.07/1.5.00/34.0527 Projekt: Příjemce: Digitální učební materiály ve škole, registrační číslo projektu CZ.1.07/1.5.00/34.0527 Střední zdravotnická škola a Vyšší odborná škola zdravotnická, Husova 3, 371 60 České Budějovice

Více

Škola. Téma hodiny 08.08 HTML - Základní návrh stránky Informační a komunikační technologie

Škola. Téma hodiny 08.08 HTML - Základní návrh stránky Informační a komunikační technologie Škola Střední odborná škola a Střední odborné učiliště, Hustopeče, Masarykovo nám. 1 Autor Ing. Jiří Tinka Číslo projektu CZ.1.07/1.5.00/34.0394 Číslo DUM VY_32_INOVACE_18_ICT_08.08a Název Tvorba webu

Více

DUM č. 11 v sadě. 36. Inf-12 Počítačové sítě

DUM č. 11 v sadě. 36. Inf-12 Počítačové sítě projekt GML Brno Docens DUM č. 11 v sadě 36. Inf-12 Počítačové sítě Autor: Lukáš Rýdlo Datum: 06.05.2014 Ročník: 3AV, 3AF Anotace DUMu: WWW, HTML, HTTP, HTTPS, webhosting Materiály jsou určeny pro bezplatné

Více

Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web,

Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web, Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web, v doslovném překladu "světová rozsáhlá síť neboli celosvětová síť, je označení

Více

Mgr. Vlastislav Kučera přednáška č. 1

Mgr. Vlastislav Kučera přednáška č. 1 Mgr. Vlastislav Kučera přednáška č. 1 jazyk HTML5 CSS3 HTML5 a CSS3: CASTRO, E. HTML5 a CSS3. Computer press, 2012 GOLDSTEIN, A., LAZARIS, L. a WEYL, E. HTML5 a CSS3 pro webové designéry. Brno: Zoner Press,

Více

Základní pojmy spojené s webovým publikováním ~ malý slovníček pojmů~ C3231 Základy WWW publikování Radka Svobodová, Stanislav Geidl

Základní pojmy spojené s webovým publikováním ~ malý slovníček pojmů~ C3231 Základy WWW publikování Radka Svobodová, Stanislav Geidl Základní pojmy spojené s webovým publikováním ~ malý slovníček pojmů~ C3231 Základy WWW publikování Radka Svobodová, Stanislav Geidl Internet celosvětová síť spojení jednotlivých síťí pomocí uzlů (síť

Více

HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy

HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy V čem se píší web. dokumenty HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy HTML HTML (HyperText Markup Language, značkovací jazyk pro hypertext) standart pro vytváření stránek v systému aplikací World

Více

Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675

Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675 Tvorba WWW stránek Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675 Zdroje KRUG: Web design - nenuťte uživatele přemýšlet.. Computer Press, 2003. PROKOP M.: CSS

Více

Úvod do informatiky 5)

Úvod do informatiky 5) PŘEHLED PŘEDNÁŠKY Internet Protokol a služba Jmenná služba (DNS) URL adresa Elektronická pošta Přenos souborů (FTP) World Wide Web (WWW) Téměř zapomenuté služby 1 INTERNET 2 PROTOKOL A SLUŽBA Protokol

Více

Internet WEB stránky HTML, Hypertext MarkUp Language - nadtextový jazyk - Místo příkazů obsahuje tagy - značky

Internet WEB stránky HTML, Hypertext MarkUp Language - nadtextový jazyk - Místo příkazů obsahuje tagy - značky Internet WEB stránky HTML, Hypertext MarkUp Language - nadtextový jazyk - Místo příkazů obsahuje tagy - značky Fungování internetu je celosvětový systém navzájem propojených počítačových sítí ve kterých

Více

Ukázka knihy z internetového knihkupectví www.kosmas.cz

Ukázka knihy z internetového knihkupectví www.kosmas.cz Ukázka knihy z internetového knihkupectví www.kosmas.cz U k á z k a k n i h y z i n t e r n e t o v é h o k n i h k u p e c t v í w w w. k o s m a s. c z, U I D : K O S 1 8 0 6 5 9 U k á z k a k n i h

Více

Mgr. Vlastislav Kučera lekce č. 2

Mgr. Vlastislav Kučera lekce č. 2 Mgr. Vlastislav Kučera lekce č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to je to, co se

Více

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD Tvorba www-stránek Webové stránky jsou napsané pomocí jazyka HTML (HyperText Markup Language). Ke tvorbě webových stránek potřebujeme - speciální program umožňuje tvořit stránku bez znalostí HTML-kódu

Více

KAPITOLA 2 - ZÁKLADNÍ POJMY INFORMAČNÍCH A KOMUNIKAČNÍCH TECHNOLOGIÍ

KAPITOLA 2 - ZÁKLADNÍ POJMY INFORMAČNÍCH A KOMUNIKAČNÍCH TECHNOLOGIÍ KAPITOLA 2 - ZÁKLADNÍ POJMY INFORMAČNÍCH A KOMUNIKAČNÍCH TECHNOLOGIÍ KLÍČOVÉ POJMY Internet World Wide Web FTP, fulltext e-mail, IP adresa webový prohlížeč a vyhledávač CÍLE KAPITOLY Pochopit, co je Internet

Více

Databázové aplikace pro internetové prostředí. 01 - PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku

Databázové aplikace pro internetové prostředí. 01 - PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku Databázové aplikace pro internetové prostředí 01 - PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku Projekt: Inovace výuky prostřednictvím ICT Registrační číslo: CZ.1.07/1.5.00/34.250

Více

Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování

Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování Tvorba WWW stránek přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování HTML/XHTML kaskádové styly PHP spolupráce PHP s databázemi Technologie

Více

O CSS podrobněji. Box model Document flow Layout

O CSS podrobněji. Box model Document flow Layout O CSS podrobněji Box model Document flow Layout O CSS podrobněji Box model Každý element má: -obsah (content) -spadávku (padding) -rámeček (border) -okraj (margin) O CSS podrobněji http://www.w3.org/tr/css21/box.html

Více

Základy WWW publikování

Základy WWW publikování Ing. Igor Kopetschke Oddělení aplikované informatiky Ústav nových technologií a aplikované informatiky Fakulta mechatroniky a mezioborových inženýrských studií Technická univerzita v Liberci Email : igor.kopetschke@tul.cz

Více

1. Začínáme s FrontPage 2003 11

1. Začínáme s FrontPage 2003 11 Úvod 9 1. Začínáme s FrontPage 2003 11 Instalace programu 12 Spuštění a ukončení programu 15 Základní ovládání 16 Hledání souborů 30 Najít a nahradit 31 Tisk 32 Schránka sady Office 34 Nápověda 36 Varianty

Více

Inovace výuky prostřednictvím šablon pro SŠ

Inovace výuky prostřednictvím šablon pro SŠ Název projektu Číslo projektu Název školy Autor Název šablony Název DUMu Stupeň a typ vzdělávání Vzdělávací oblast Vzdělávací obor Tematický okruh Inovace výuky prostřednictvím šablon pro SŠ CZ.1.07/1.5.00/34.0748

Více

Kaskádové styly základy grafiky

Kaskádové styly základy grafiky 1 Kaskádové styly základy grafiky Vymezení pojmů Historie Základy stylů 2 Co je to CSS? Vznik CSS a je možné zařadit přibližně do roku 1997. Pojem CSS by se dal shrnout definicí :"souhrn pravidel a metod

Více

VÝUKOVÝ MATERIÁL. Bratislavská 2166, 407 47 Varnsdorf, IČO: 18383874 www.vosassvdf.cz, tel. +420412372632 Číslo projektu

VÝUKOVÝ MATERIÁL. Bratislavská 2166, 407 47 Varnsdorf, IČO: 18383874 www.vosassvdf.cz, tel. +420412372632 Číslo projektu VÝUKOVÝ MATERIÁL Identifikační údaje školy Vyšší odborná škola a Střední škola, Varnsdorf, příspěvková organizace Bratislavská 2166, 407 47 Varnsdorf, IČO: 18383874 www.vosassvdf.cz, tel. +420412372632

Více

Inovace výuky prostřednictvím šablon pro SŠ

Inovace výuky prostřednictvím šablon pro SŠ Název projektu Číslo projektu Název školy Autor Název šablony Název DUMu Stupeň a typ vzdělávání Vzdělávací oblast Vzdělávací obor Tematický okruh Inovace výuky prostřednictvím šablon pro SŠ CZ.1.07/1.5.00/34.0748

Více

Datum vytvoření. Vytvořeno 18. října 2012. Očekávaný výstup. Žák chápe pojmy URL, IP, umí vyjmenovat běžné protokoly a ví, k čemu slouží

Datum vytvoření. Vytvořeno 18. října 2012. Očekávaný výstup. Žák chápe pojmy URL, IP, umí vyjmenovat běžné protokoly a ví, k čemu slouží Číslo projektu CZ.1.07/1.5.00/34.0394 Škola SOŠ a SOU Hustopeče, Masarykovo nám. 1 Autor Ing. Miriam Sedláčková Číslo VY_32_INOVACE_ICT.3.01 Název Teorie internetu- úvod Téma hodiny Teorie internetu Předmět

Více

Základy HTML. Autor: Palito

Základy HTML. Autor: Palito Základy HTML Autor: Palito Zobrazení zdrojového kódu Zobrazení zdrojového kódu Každá stránka je na disku nebo na serveru uložena ve formě zdrojového kódu. Ten kód je psaný v jazyce HTML. Když si chcete

Více

Mgr. Vlastislav Kučera přednáška č. 2

Mgr. Vlastislav Kučera přednáška č. 2 Mgr. Vlastislav Kučera přednáška č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS

Více

Uspořádání klient-server. Standardy pro Web

Uspořádání klient-server. Standardy pro Web Návrh a tvorba WWW stránek 1/11 Uspořádání klient-server klient na straně uživatele (browser, prohlížeč) server program obsluhující požadavky uživatele Standardy pro Web HTTP Hypertext Transfer Protocol

Více

Internet 2 css, skriptování, dynamické prvky

Internet 2 css, skriptování, dynamické prvky Internet 2 css, skriptování, dynamické prvky Martin Hejtmánek hejtmmar@fjfi.cvut.cz http://kmlinux.fjfi.cvut.cz/ hejtmmar Počítačový kurs Univerzity třetího věku na FJFI ČVUT Znalci 26. března 2009 Dnešní

Více

Mgr. Stěpan Stěpanov, 2013

Mgr. Stěpan Stěpanov, 2013 Mgr. Stěpan Stěpanov, 2013 Abstrakt V tomto kurzu se seznámíme se základními pojmy HTML, klíčovými pravidly pro práci se značkami a atributy a strukturou dokumentu. Také se dozvíte, jak a v čem lze vytvářet

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek 1 HTML Hyper Text Markup Language = hypertextový značkovací jazyk Slouží pro tvorbu webových stránek, které jsou propojeny hypertextovými odkazy HTML soubor je obyčejný text obalený

Více

Nové přístupy tvorby web site. Doc. Ing. Zdeněk Havlíček, CSc. KIT PEF CZU - 13/11/2001

Nové přístupy tvorby web site. Doc. Ing. Zdeněk Havlíček, CSc. KIT PEF CZU - 13/11/2001 Nové přístupy tvorby web site Doc. Ing. Zdeněk Havlíček, CSc. KIT PEF CZU - 13/11/2001 Osnova Úvod Web site - jasný cíl Technologie - dynamický web Forma - vyšší interaktivita Obsah - stálá aktualizace

Více

Web. Získání informace z internetu Grafické zobrazení dat a jejich struktura Rozšíření funkcí pomocí serveru Rozšíření funkcí pomocí prohlížeče

Web. Získání informace z internetu Grafické zobrazení dat a jejich struktura Rozšíření funkcí pomocí serveru Rozšíření funkcí pomocí prohlížeče Web Získání informace z internetu Grafické zobrazení dat a jejich struktura Rozšíření funkcí pomocí serveru Rozšíření funkcí pomocí prohlížeče Technologické trendy v AV tvorbě, Web 2 DNS Domain Name Systém

Více

1. Struktura stránky, zásady při psaní kódu, MVC pattern. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008)

1. Struktura stránky, zásady při psaní kódu, MVC pattern. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008) 1. Struktura stránky, zásady při psaní kódu, MVC pattern Web pro kodéry (Petr Kosnar, ČVUT, Obsah } Terminologie } Prezentace x Obsah } Struktura kódu } Sémantika kódu } Struktura stránky } Šablony } Template

Více

Úvod do CSS. Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm. Modernizace výuky s využitím ICT, CZ.1.07/1.5.00/34.

Úvod do CSS. Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm. Modernizace výuky s využitím ICT, CZ.1.07/1.5.00/34. Úvod do CSS Tematický okruh (ŠVP) CSS1 Vysvětlení úlohy CSS při programování www stránek Úvod do CSS VY_32_INOVACE_01_02_01 Vytvořeno září 2012 Materiál slouží k podpoře výuky programování webových aplikací

Více

Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 1 VY 32 INOVACE 0101 0301

Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 1 VY 32 INOVACE 0101 0301 Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace Šablona 1 VY 32 INOVACE 0101 0301 VÝUKOVÝ MATERIÁL Identifikační údaje školy Číslo projektu Název projektu Číslo a název šablony Autor

Více

Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz

Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz Webové stránky 2. Úvod do jazyka HTML Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 11. 9. 2012 Webové Strana: 1/6 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická

Více

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s

Více

Internet - základní pojmy

Internet - základní pojmy Název školy: Střední odborná škola stavební Karlovy Vary Sabinovo náměstí 16, 360 09 Karlovy Vary Autor: Ing. Hana Šmídová Název materiálu: VY_32_INOVACE_07_INTERNET_P2 Číslo projektu: CZ 1.07/1.5.00/34.1077

Více

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht. Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz Internetové publikování CSS 4. Formátovací model, pozicování

Více

IE1 jazyk HTML a kaskádové styly

IE1 jazyk HTML a kaskádové styly IE1 jazyk HTML a kaskádové styly Tvorbu webových stránek v jazyce HTML a jejich formátování pomocí kaskádových stylů (CSS) budeme zkoušet na souvislém příkladu. Můžete si zvolit vlastní téma webové prezentace.

Více

================================================================================ =====

================================================================================ ===== Název: VY_32_INOVACE_PG4101 Základní struktura HTML stránky Datum vytvoření: 01 / 2012 Anotace: DUM seznamuje se základní strukturou a členěním HTML stránky, s jednotlivými složkami - HTML, CSS, externí

Více

PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě

PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě PHP PHP původně znamenalo Personal Home Page a vzniklo v roce 1996, od té doby prošlo velkými změnami a nyní tato zkratka znamená Hypertext Preprocessor. PHP je skriptovací programovací jazyk, určený především

Více

Zá klady HTML. Tag HTML Párová značka, který definuje webovou stránku. Obsah stránky končí značkou

Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou Zá klady HTML Jazyk HTML (Hypertext Markup Language) - jedná se o souhrn pravidel pro formatování textu, obrázků atd. pro použítí na webových stránekách. Webovou stránku tvoří prvky, které jsou definovány

Více

15. CSS styly (funkce, vývoj, využití). Práce s CSS styly (vkládání do kódu, pravidlo, selektor, dědičnost, kaskády, id a vlastní třídy)

15. CSS styly (funkce, vývoj, využití). Práce s CSS styly (vkládání do kódu, pravidlo, selektor, dědičnost, kaskády, id a vlastní třídy) 15. CSS styly (funkce, vývoj, využití). Práce s CSS styly (vkládání do kódu, pravidlo, selektor, dědičnost, kaskády, id a vlastní třídy) Formátování HTML Každý text má obsah a formu. Když mluvím o formátu

Více

Olga Rudikova 2. ročník APIN

Olga Rudikova 2. ročník APIN Olga Rudikova 2. ročník APIN Redakční (publikační) systém neboli CMS - content management system (systém pro správu obsahu) je software zajišťující správu dokumentů, nejčastěji webového obsahu. (webová

Více

TNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz

TNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz 6.10.2015 aneta.bartuskova@uhk.cz TNPW1 Cvičení 1 Technologie pro tvorbu webu HTML, HTML5 značkovací jazyk struktura, obsah, odkazy - hypertext CSS, CSS3 kaskádové styly vzhled (rozvržení, formátování,

Více

IE1 jazyk HTML a kaskádové styly

IE1 jazyk HTML a kaskádové styly IE1 jazyk HTML a kaskádové styly Tvorbu webových stránek v jazyce HTML a jejich formátování pomocí kaskádových stylů (CSS) budeme zkoušet na souvislém příkladu. Můžete si zvolit vlastní téma webové prezentace.

Více

Tvorba jednoduchých WWW stránek. VŠB - Technická univerzita Ostrava Katedra informatiky

Tvorba jednoduchých WWW stránek. VŠB - Technická univerzita Ostrava Katedra informatiky Tvorba jednoduchých WWW stránek RNDr. Daniela Ďuráková VŠB - Technická univerzita Ostrava Katedra informatiky Vznik WWW technologie Vznik - CERN 1989-90, vedoucí projektu Tim Berners-Lee cíl - infrastruktura

Více

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD CSS 1 Výhody: Udřování prezentace oddělené od dokumentu znamená, že můžete nastavit styly dokumentu pro různá média; Oddělení dokumentu od jeho prezentace znamená menší dokument, což dále znamená, že se

Více

APLIKACE XML PRO INTERNET

APLIKACE XML PRO INTERNET APLIKACE XML PRO INTERNET Jaroslav Ráček Fakulta Informatiky, Masarykova Universita Brno Abstrakt Text je věnován možnostem využití XML technologie pro prezentaci dokumentů pomocí Internetu. V úvodu je

Více

Nová struktura souborů a složek

Nová struktura souborů a složek Tvorba podstránek Vytvoření podstránek Asi si kladete otázku, jakým způsobem docílíme toho, aby se všechny podstránky na našem webu zobrazovaly v námi vytvořeném layoutu. Máme 4 možnosti jak vytvářet podstránky

Více

13. Vytváření webových stránek

13. Vytváření webových stránek 13. Vytváření webových stránek značkovací jazyk HTML, základní členění dokumentu, odkazy, tabulky, seznamy, obrázky, HTML editory Značkovací jazyk HTML HTML - Hypertext markup Language (hypertextový značkovací

Více

Současný svět Projekt č. CZ.2.17/3.1.00/32038, podpořený Evropským sociálním fondem v rámci Operačního programu Praha adaptabilita

Současný svět Projekt č. CZ.2.17/3.1.00/32038, podpořený Evropským sociálním fondem v rámci Operačního programu Praha adaptabilita Aktivní webové stránky Úvod: - statické webové stránky: pevně vytvořený kód HTML uložený na serveru, ke kterému se přistupuje obvykle pomocí protokolu HTTP (HTTPS - zabezpečený). Je možno používat i různé

Více

Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto

Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto Gymnázium Vysoké Mýto nám. Vaňorného 163, 566 01 Vysoké Mýto Registrační číslo projektu Šablona Autor Název materiálu / Druh CZ.1.07/1.5.00/34.0951 III/2 INOVACE A ZKVALITNĚNÍ VÝUKY PROSTŘEDNICTVÍM ICT

Více

VÝVOJ INTERNETOVÝCH APLIKACÍ - VIA

VÝVOJ INTERNETOVÝCH APLIKACÍ - VIA Metodický list č. 1 Způsob zakončení : Úvod Technologie webových aplikací Protokol HTTP Po zvládnutí tématického celku bude student mít základní přehled o problematice programování internetových (webových)

Více

Úvod do informačních služeb Internetu

Úvod do informačních služeb Internetu Úvod do informačních služeb Internetu Rozdělení počítačových sítí Počítačové sítě se obecně rozdělují do základních typů podle toho, na jak velkém území spojují počítače a jaké spojovací prostředky k tomu

Více

HLEDEJCENY.mobi. Obsah. Mobilní verze e-shopu. Důvody instalace

HLEDEJCENY.mobi. Obsah. Mobilní verze e-shopu. Důvody instalace Obsah HLEDEJCENY.mobi Mezi Vodami 1952/9 e-mail: info@hledejceny.cz HLEDEJCENY.mobi... 1 Mobilní verze e-shopu... 1 Důvody instalace... 1 Výhody... 2 Co je k mobilní verzi potřeba... 2 Objednávka služby...

Více

HTML. ICT_01., 02. konzultace; 2. ročník 1/6

HTML. ICT_01., 02. konzultace; 2. ročník 1/6 ICT_01., 02. konzultace; 2. ročník 1/6 HTML Vystavení vlastních dat na Internetu Každý uživatel Internetu, který chce svoje webové stránky publikovat na Internetu potřebuje: - místo na webovém serveru,

Více

Rozměry, okraje a rámečky

Rozměry, okraje a rámečky Rozměry, okraje a rámečky 185 Jaké jednotky délky lze v CSS použít Jednotky délky slouží k zapisování vzdálenosti a definují se jimi jak rozměry elementů, tak rozměry okrajů či rámečků. Zapisují se hned

Více

rychlý vývoj webových aplikací nezávislých na platformě Jiří Kosek

rychlý vývoj webových aplikací nezávislých na platformě Jiří Kosek rychlý vývoj webových aplikací nezávislých na platformě Jiří Kosek Co je to webová aplikace? příklady virtuální obchodní dům intranetový IS podniku vyhledávací služby aplikace jako každá jiná přístupná

Více

Jazyk XSL XPath XPath XML. Jazyk XSL - rychlá transformace dokumentů. PhDr. Milan Novák, Ph.D. KIN PF JU České Budějovice. 9.

Jazyk XSL XPath XPath XML. Jazyk XSL - rychlá transformace dokumentů. PhDr. Milan Novák, Ph.D. KIN PF JU České Budějovice. 9. Jazyk XSL - rychlá transformace dokumentů 9. prosince 2010 Osnova 1 Jazyk XSL Úvod Princip zpracování pomocí stylů Formátování dokumentu pomocí XSL FO Osnova 1 Jazyk XSL Úvod Princip zpracování pomocí

Více

Maturitní témata Školní rok: 2015/2016

Maturitní témata Školní rok: 2015/2016 Maturitní témata Školní rok: 2015/2016 Ředitel školy: Předmětová komise: Předseda předmětové komise: Předmět: PhDr. Karel Goš Informatika a výpočetní technika Mgr. Ivan Studnička Informatika a výpočetní

Více

Identifikátor materiálu: ICT-3-55

Identifikátor materiálu: ICT-3-55 Identifikátor materiálu: ICT-3-55 Předmět Téma sady Téma materiálu Informační a komunikační technologie Počítačové sítě, Internet Funkce a přehled internetových prohlížečů Autor Ing. Bohuslav Nepovím Anotace

Více

12. Základy HTML a formuláře v HTML

12. Základy HTML a formuláře v HTML 12. Základy HTML a formuláře v HTML 1) Co je to HTML a historie HTML 2) Termíny v HTML a. tag b. značka c. element d. atribut e. entita 3) specifikace a. html, xhtmll b. rozdíly xhtml a html 4) struktura

Více

Systém elektronického rádce v životních situacích portálu www.senorady.cz

Systém elektronického rádce v životních situacích portálu www.senorady.cz Systém elektronického rádce v životních situacích portálu www.senorady.cz Obec Senorady Miroslav Patočka 2006 Obsah: 1. Úvodní informace 1.1 Informace pro uživatele 1.1.1 Přístupnost HTML, PDA, WAP, XML

Více

Název modulu: Tvorba webu pomocí XHTML a CSS začátečníci

Název modulu: Tvorba webu pomocí XHTML a CSS začátečníci Název modulu: Označení: C7 Stručná charakteristika modulu Modul vznikl za účelem úvodního seznámení zájemců o problematiku tvorby moderních webových stránek podle standardů W3C. Zahrnuje základní nezbytné

Více

www.helpmark.cz Tomáš Herout

www.helpmark.cz Tomáš Herout 4. 1. 2015 1 Obsah prezentace» Jak naplánovat strukturu» Co je to HTML a CSS» Co používat za nástroje» Struktura a logika HTML» DOCTYPE» Hlavička (X)HTML» Tělo (X)HTML» Skupiny (X)HTML tagů» Vztah mezi

Více

INOVACE PŘEDMĚTŮ ICT. MODUL 11: PROGRAMOVÁNÍ WEBOVÝCH APLIKLACÍ Metodika

INOVACE PŘEDMĚTŮ ICT. MODUL 11: PROGRAMOVÁNÍ WEBOVÝCH APLIKLACÍ Metodika Vyšší odborná škola ekonomická a zdravotnická a Střední škola, Boskovice INOVACE PŘEDMĚTŮ ICT MODUL 11: PROGRAMOVÁNÍ WEBOVÝCH APLIKLACÍ Metodika Zpracoval: Jaroslav Kotlán srpen 2009s Úvod Modul Programování

Více

Tvorba fotogalerie v HTML str.1

Tvorba fotogalerie v HTML str.1 Tvorba fotogalerie v HTML str.1 obr. A obr. B 1) Spustíme PsPad, vytvoříme nový dokument a otevře se nám okno nový soubor, kde si můžeme zvolit jaký chceme typ. My označíme HTML a potvrdíme. 2) Pro správné

Více

Název modulu: XHTML a CSS pokročilé techniky tvorby webových stránek

Název modulu: XHTML a CSS pokročilé techniky tvorby webových stránek Název modulu: XHTML a CSS pokročilé techniky tvorby webových stránek Označení: C8 Stručná charakteristika modulu Modul si klade za cíl seznámit detailněji s tvorbou webových stránek pomocí kódovacího jazyka

Více

Webová stránka. Matěj Klenka

Webová stránka. Matěj Klenka Webová stránka Matěj Klenka Osobní webová stránka Toto je dokumentace k mé webové stránce This is a documentation to my web page Já, Matěj Klenka, prohlašuji, že má webová stránka byla vytvořena mnou a

Více

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY 25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY 25.1 Přidání nového tlačítka do menu Abychom mohli zpřístupnit nový pevný tvar do systému, je třeba přidat nové tlačítko do Menu. V našem případě se jedná o příčné

Více

Malý průvodce Internetem

Malý průvodce Internetem Malý průvodce Internetem Úvod Toto povídání by mělo sloužit jako užitečný zdroj informací pro ty, co o Internetu zatím mnoho neví nebo o něm jen slyšeli a neví, co si pod tím slovem představit. Klade si

Více

Práce se styly 1. Styl

Práce se styly 1. Styl Práce se styly 1. Styl Styl se používá, pokud chceme, aby dokument měl jednotný vzhled odstavců. Můžeme si nadefinovat styly pro různé úrovně nadpisů, jednotlivé popisy, charakteristiky a další odstavce.

Více

24-2-2 PROMĚNNÉ, KONSTANTY A DATOVÉ TYPY TEORIE DATUM VYTVOŘENÍ: 23.7.2013 KLÍČOVÁ AKTIVITA: 02 PROGRAMOVÁNÍ 2. ROČNÍK (PRG2) HODINOVÁ DOTACE: 1

24-2-2 PROMĚNNÉ, KONSTANTY A DATOVÉ TYPY TEORIE DATUM VYTVOŘENÍ: 23.7.2013 KLÍČOVÁ AKTIVITA: 02 PROGRAMOVÁNÍ 2. ROČNÍK (PRG2) HODINOVÁ DOTACE: 1 24-2-2 PROMĚNNÉ, KONSTANTY A DATOVÉ TYPY TEORIE AUTOR DOKUMENTU: MGR. MARTINA SUKOVÁ DATUM VYTVOŘENÍ: 23.7.2013 KLÍČOVÁ AKTIVITA: 02 UČIVO: STUDIJNÍ OBOR: PROGRAMOVÁNÍ 2. ROČNÍK (PRG2) INFORMAČNÍ TECHNOLOGIE

Více

CSS. SEO Search Engine Optimization (optimalizace pro vyhledávače)

CSS. SEO Search Engine Optimization (optimalizace pro vyhledávače) CSS SEO Search Engine Optimization (optimalizace pro vyhledávače) Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Marek Čechák. Financováno z ESF a státního rozpočtu ČR. Název školy

Více

Textové editory. Ing. Luděk Richter

Textové editory. Ing. Luděk Richter Textové editory Ing. Luděk Richter Střední škola, Havířov-Šumbark, Sýkorova 1/613, příspěvková organizace Tento výukový materiál byl zpracován v rámci akce EU peníze středním školám - OP VK 1.5. Výuková

Více

TVORBA WEBOVÝCH STRÁNEK

TVORBA WEBOVÝCH STRÁNEK TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03c Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03c 1. Box model v CSS 2. Obtékání blokových (X)HTML elementů 3. Pozicování blokových (X)HTML

Více

Základy HTML (2. přednáška)

Základy HTML (2. přednáška) Základy HTML (2. přednáška) WWW World Wide Web Sestává ze tří stavebních bloků Síť informačních zdrojů Universal Resource Identifier jednotný způsob jak adresovat zdroje, (URL) protokoly pro přístup ke

Více

Dnešní téma. Oblasti standardizace v ICT. Oblasti standardizace v ICT. Oblasti standardizace v ICT

Dnešní téma. Oblasti standardizace v ICT. Oblasti standardizace v ICT. Oblasti standardizace v ICT Dnešní téma Oblasti standardizace v ICT Případové studie standardizace v ICT: 1) Znakové sady 2) Jazyk 1. technická infrastruktura transfer a komunikace informací, přístup k informacím, sdílení zdrojů

Více

Stránka se dá otevřít dvěma způsoby

Stránka se dá otevřít dvěma způsoby Co je potřeba Mozek, to zaprvé. Budete potřebovat počítač, na kterém běží alespoň nějaký jednoduchý textový editor (Poznámkový blok). Potřebujete webový prohlížeč. Hodí se připojení na internet. Kdo nemá

Více

Maturitní otázky z předmětu PROGRAMOVÁNÍ

Maturitní otázky z předmětu PROGRAMOVÁNÍ Wichterlovo gymnázium, Ostrava-Poruba, příspěvková organizace Maturitní otázky z předmětu PROGRAMOVÁNÍ 1. Algoritmus a jeho vlastnosti algoritmus a jeho vlastnosti, formy zápisu algoritmu ověřování správnosti

Více