Skripta obsahují části textů a náměty ze zdrojů: wikipedia.org, w3schools.com a ukázky příkladů z volně dostupných zdrojů.

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

Download "Skripta obsahují části textů a náměty ze zdrojů: wikipedia.org, w3schools.com a ukázky příkladů z volně dostupných zdrojů."

Transkript

1 Úvod Skripta Tvorba www stránek jsou určena pro všechny, kteří si chtějí rozšířit své IT znalosti v oblasti tvorby a webových stránek. Skripta jsou určena pro začátečníky a pokrývají standardy HTML5, CSS3, JavaScript, knihovna jquery. Dozvíte se také, jak optimalizovat webové stránky pro vyhledávače SEO, jak zaregistrovat doménu, zřídit hosting a publikovat webové stránky na Internetu. Zaměříme se i na optimalizaci webových stránek pro mobilní zařízení moderní responzivní design a na základy grafiky s použitím produktu Adobe Photoshop. Součástí těchto skript jsou i příklady. Softwarové požadavky pro Windows: 1. OS Windows 7 a vyšší 2. editor pro zápis kódu (Adobe Dreamweaver, PSPad, Notepad++, Sublime Text) 3. virtuální webový server (Wamp, Xampp) 4. alespoň 3 standardní webové prohlížeče (Google Chrome, Internet Explorer, Mozilla Firefox) Softwarové požadavky pro Linux: OS Linux distribuce Ubuntu, Debian editor pro zápis kódu (Bluefish) virtuální webový server (Lamp) standardní webové prohlížeče (Google Chrome, Mozilla Firefox) Softwarové požadavky pro Mac: Mac OS X Snow Leopard nebo Lion nebo OS X Mountain Lion a vyšší editor pro zápis kódu (Adobe Dreamweaver, Sublime Text) virtuální webový server (je součástí systému Mac OS X nebo OS X) Skripta obsahují části textů a náměty ze zdrojů: wikipedia.org, w3schools.com a ukázky příkladů z volně dostupných zdrojů. EULA Podle ustanovení 12 Autorského zákona č. 121/2000 Sb. udělují ASYS IJD, spol. s r. o. (dále jen vlastník) a Jiří Hampl (dále jen autor) uživateli právo k užití díla pro osobní potřebu, citace apod. (viz ustanovení 29 a násl. Autorského zákona). Vlastník uděluje uživateli nevýhradní licenci a výslovně zakazuje uživateli publikaci skript nebo jejich částí na Internetu, zakazuje rozmnožování a distribuci. Vlastník si nárokuje odměnu za užití licence. Odměnu stanoví vlastník při poskytnutí licence konkrétnímu uživateli (nabyvateli). V případě, že k užití autorského díla dojde bez souhlasu vlastníka a autora, má vlastník podle ustanovení 40 odst. 4 Autorského zákona právo na náhradu škody a na vydání bezdůvodného obohacení. Vlastník má právo se domáhat, namísto ušlého zisku, náhrady ušlého zisku ve výši obvyklé odměny. 6

2 1. Kódování HTML 1.1. Základní informace o webových stránkách Webové stránky statické a dynamické Webová stránka je dokument, který je možné pomocí webového prohlížeče zobrazit na monitoru počítače či displeji mobilního přístroje. Webové stránky jsou obvykle poskytované v rámci World Wide Webu. Informace jsou prezentovány ve formě hypertextu, který je vytvořen použitím značek HTML. Stránky se skládají z textu, multimediálních dat (obrázky, videa, zvuky, ) a odkazů, které umožňují přechod na další webové stránky. Webové stránky mohou být uloženy v podobě souborů na pevném disku nebo je poskytují webové servery prostřednictvím počítačové sítě nebo Internetu, kde jsou přenášeny pomocí protokolu HTTP. Stránky mohou být statické (obsahují stále stejný obsah, jsou uloženy v souborech) nebo dynamické (mění svůj obsah v čase, vytváří je program na straně webového serveru). Stránka se může měnit i přímo v prohlížeči použitím skriptovacích jazyků, Javy, ActiveX a dalších technologií Co je HTML? HyperText Markup Language (HTML) neboli značkovací jazyk je standard pro tvorbu struktury a obsahu webových stránek. Můžete se setkat s označením XHTML, který je rovněž značkovacím jazykem, jehož původní přínos měl být nahrazení právě HTML. Ve skutečnosti přinesl spoustu omezení a nepříjemností při kódování a stal se slepou uličkou při určování standardů. HTML5 HTML5 je nejnovější verze specifikace značkovacího jazyka HTML, která přinesla velké změny v technologiích webových stránek. Významným krokem od poslední verze 4.01 je zjednodušení zápisu některých značek, odstranění zbytečných a zastaralých značek, možnost pracovat s multimédii nebo sémantické značky definující strukturu stránky Co je CSS? Cascading Style Sheets neboli kaskádové styly je standard pro popis způsobu vykreslování stránek ve webových prohlížečích, napsané v jazycích HTML, XHTML, XML. Hlavním smyslem je umožnit kodérům a programátorům oddělit vzhled dokumentu od jeho struktury a obsahu, rozsáhlé možnosti formátování a jednoduchou údržbu webové prezentace. Nevýhodou CSS je ne vždy dostatečná podpora v majoritních prohlížečích. Prohlížeče obsahují v implementaci CSS chyby a je někdy nesnadné napsat kód tak, aby se ve všech (resp. v běžných) prohlížečích výsledek zobrazil stejně. Pro některé CSS vlastnosti existuje několik variant zápisu tak, aby byl styl vykreslen ve všech běžných prohlížečích. CSS3 CSS3 je třetí verze kaskádových stylů od roku 2005, kdy byla tato technologie vyvinuta. Její kompletní dokončení se předpokládá na rok CSS3 přináší velké množství nových vlastností, díky kterým odpadávají některé práce v grafických editorech nebo obcházení skriptovacími jazyky. 7

3 Než bude dokončen vývoj této verze a než standardní prohlížeče začnou plně podporovat všechny vlastnosti, je potřeba tyto nové vlastnosti definovat s tzv. vendor prefixy pro jednotlivé prohlížeče. K vendro prefixům se dostaneme později Co je PHP? Hypertext Preprocesor neboli hypertextový preprocesor, původně Personal Home Page, je nejrozšířenější programovací skriptovací jazyk určený především k programování dynamických webových stránek a webových aplikací. Syntaxe jazyka je inspirována několika programovacími jazyky, např. Perl, C, Pascal, Java. Oblíbený je hlavně díky jednoduchosti použití a bohaté zásobě funkcí. PHP podporuje mnoho knihoven pro různé účely, např. zpracování textu, grafiky, práci se soubory, přístup k většině databázových systémů (MySQL, ODBC, Oracle, MSSQL) a podporuje celé řady internetových protokolů (HTTP, SMTP, FTP, IMAP, POP3, ). Na rozdíl od HTML a CSS jsou skripty zpracovány na straně serveru a k uživateli je odeslán výsledek skriptu, který prohlížeč následně vykreslí na zobrazovacím zařízení Co je MySQL? MySQL je multiplatformní databázový systém. Komunikace s ním probíhá pomocí jazyka SQL s několika modifikacemi a rozšířeními. V současnosti patří MySQL k nejrozšířenějším řešením jako základ webového serveru a to díky snadné implementaci, výkonu a bezplatné GPL licenci (existuje i komerční licence) Co je JavaScript JavaScript (JS) je objektově orientovaný skriptovací jazyk, který se nejčastěji využívá jako interpretovaný programovací jazyk pro webové stránky. Obvykle jsou jím ovládány různé interaktivní prvky nebo tvořeny animace a efekty obrázků nebo textů. Ačkoliv je JS programovací skriptovací jazyk, oproti PHP se zpravidla spouští na straně klienta po stažení webové stánky. Existují však implementace, které umožní spouštět skript na straně serveru. Většina dnešních webových stránek hojně využívá JavaScript, proto není dobré, abyste jako uživatel měl tento jazyk v prohlížeči zakázaný. V dobách, kdy bylo běžné, že uživatel platí za přenesená data, byl právě JS v prohlížečích zakázaný. jquery jquery je javascriptová knihovna s několika funkcemi, např. pro vytváření událostí, manipulaci s CSS, animací a efektů nebo AJAX. 8

4 Co je CMS? Content Management System, neboli systém pro správu obsahu je software zajišťující správu dokumentů, nejčastěji pak webového obsahu redakční systém. Smyslem CMS je umožnit uživatelům bez znalostí HTML a programovacích jazyků snadnou správu obsahu webových stránek. Hlavními funkcemi CMS jsou tvorba, editace a publikování článků, řízení přístupu k obsahu a správa uživatelů a jejich přístupových práv, správa diskusí a komentářů, správa souborů, galerií, obrázků, kalendářní funkce a statistiky. Nejrozšířenějšími redakčními systémy, které jsou nasazovány na webové stránky, jsou Drupal, Joomla!, Wordpress Výběr a instalace HTML editoru Jaký editor zvolit? Existuje široká řada editorů opravdu jednoduché, bez jakýchkoliv funkcí až po velmi pokročilé, které dokáží pracovat s různými programovacími jazyky, obsahují šablony a nástroje pro vytváření profesionálních webových stránek. První otázka při volbě editoru, kterou budete řešit, je volba mezi editorem pro ruční zápis kódu a tzv. WYSIWYG editorem. WYSIWYG editory What You See Is What You Get (WYSIWYG), neboli co vidíte, to získáte. Jde o typ editoru, kde nepracujete se samotným kódem, ale stránku a obsah vytváříte podobně jako v aplikaci Word tedy, vyberete text a pomocí nástrojů ho formátujete. Určitě se hodí pro začínající uživatele, kteří si mohou osvojit HTML tagy z výsledků, které editor vytvoří. Nutno však upozornit, že většina WYSIWYG editorů generuje ne zrovna čistý, tvz. nevalidní kód. Nejpoužívanějším je TinyMCE, ačkoliv nejlepší WYSIWYG editor je žádný WYSIWYG editor. Chcete-li se naučit tvořit kvalitní webové stránky a porozumět jejich kódu, zvolte některý z následujících klasických editorů. PSPad V Česku je jednoznačně nejpoužívanějším HTML editorem aplikace PSPad, jejímž autorem je Čech. Výhodou aplikace je bezplatná licence, práce s více soubory najednou a jejich seskupování do projektů, šablony, zvýrazňování syntaxí a podpora více jazyků. Notepad++ Rovněž bezplatný a jednoduchý nástroj, který podporuje více jazyků. Nabízí zvýraznění syntaxe, WYSIWYG editor, seskupování částí kódu. Adobe Dreamweaver Velmi pokročilá aplikace pro tvorbu a správu webu a to za pomocí jak vizuálních úprav i přímého psaní kódu. Podporuje několik standardů HTML5, CSS3, JavaScript, PHP, integruje knihovnu jquery, umožňuje tvorbu aplikací pro ios a Android, obsahuje podporu CMS, automatické doplňování párových tagů. Dreamweaver je ideální jak pro začínající uživatele i pro ty pokročilé, kteří tvoří rozsáhle projekty. Výhodou je jistě i podpora práce s grafikou, interaktivní prohlížeč a detekce chyb v kódu. 9

5 Licence softwaru je poskytována za pravidelný roční poplatek pro všechny typy zákazníků. Roční licence vyjde zhruba na 8 tisíc Kč. Pro další období je poskytnuta sleva cca 30 %. Bluefish Dalším pokročilým nástrojem je aplikace Bluefish, která běží pod systémem Windows, ale i Linux a OS X. Podporuje několik značkovacích a skriptovacích jazyků, zvýrazňování syntaxí, podpora projektů, detekce chyb a další. Sublime Text Na první pohled jednoduchá aplikace s čistým a přívětivým uživatelským prostředím, která však ukrývá nespočet výhod. Kromě práce s více soubory a projekty si zaslouží pozornost možnost instalace dalších užitečných doplňků, vytváření vlastních snippetů. Jelikož jsou tato skripta určena především pro začínající uživatele, bude v následujících kapitolách využívána aplikace PSPad Stažení a instalace aplikace PSPad 1. Přejděte na stránku pspad.com/cz. 2. Přejděte na odkaz Stažení PSPadu a klikněte na položku Instalátor. Soubor uložte na disk. 3. Spusťte instalaci. Ponechte všechna výchozí nastavení Základní nastavení PSPadu 1. Zapněte číslování řádků, případně zalamování řádků v nabídce Zobrazit > Čísla řádků, Zalomení řádků. 2. Přidejte možnost spouštět stránky přímo z PSPadu ve standardních prohlížečích: nabídka Nastavení > Nastavení zvýrazňovačů v levém sloupci vyberte HTML v pravé horní části okna přejděte na kartu Externí programy v části Program klikněte na tlačítko pro procházení na systémovém disku ve složce Program Files/Program Files (x86) vyhledejte složku webového prohlížeče (Google, Internet Explorer, Mozilla) vyberte spouštěcí soubor webového prohlížeče (chrome, iexplore, firefox) Čísla a zalomení řádků Přidání webového prohlížeče 10

6 1.3. Značkovací jazyk HTML Správné návyky při kódování otevřete soubor ve dvou programech v HTML editoru a ve webovém prohlížeči, po provedených změnách v kódu soubor uložte a webovou stránku aktualizujte vykreslí se provedené změny strukturujte části HTML kódu pomocí tabulátorů a nepište vše v jednom sloupci pokud začínáte párový tag, ihned ho i ukončete, abyste na to později nezapomněli při vytváření adresářů (složek) nebo souborů nepoužívejte diakritiku a místo mezer použijte pomlčku nebo spodní pomlčku, názvy adresářů a souborů zapisujte malými písmeny zapamatujte si tyto klávesové zkratky: Znak Zkratka < Alt +, (pravý alt a čárka) > Alt +. (pravý alt a tečka) [ Alt + F ] Alt + G { Alt + B } Alt + N # Alt + X \ Alt + Q & Alt + C ^ Alt (levý alt a číslice 094 na numerické klávesnici) HTML tagy (značky) HTML soubor je text obalený značkami, které se nazývají tagy. tagy určují, jak bude text vypadat, např. zda bude tučný, v odstavci, modrou barvu apod. všechny tagy jsou uzavřeny v <ostrých závorkách> tagy mohou obsahovat atributy specifikující další vlastnosti obsahu, který tagy obalují co není v ostrých závorkách, je text, který se bude na webové stránce zobrazovat <tag atribut= "hodnota ">text</tag> další text <tag>další text</tag> Vytvoření HTML souboru Zobrazovaný text 1. V aplikaci PSPad otevřete nabídku Soubor a klikněte na položku Nový nebo klikněte na panelu nástrojů na tlačítko Nový. 11

7 2. V seznamu souborů vyberte HTML nebo HTML Multihighlighter a potvrďte OK. 3. Vytvoří se nový soubor typu.html, který bude obsahovat základní strukturu HTML dokumentu. 4. Nově vytvořený soubor uložte na disk. 5. Klikněte pravým tlačítkem na kartu nově vytvořeného souboru a z nabídky vyberte Přidat do projektu nebo uchopte kartu s názvem souboru a přetáhněte ji do nové složky projektu v levém navigačním podokně. 6. Uložte projekt: Otevřete nabídku Projekt a v nabídce klikněte na Uložit projekt. Projekt uložte nejlépe do stejné složky, jako soubor HTML. Struktura složek v levém navigačním podokně není provázaná se samotnými složkami na disku, tzn., vytvoříte-li v podokně složku, nevytvoří se zároveň na disku a naopak Změna/úprava šablony Aktuální verze PSPadu (4.5.7) stále nabízí jako výchozí šablonu standard HTML Proveďte změnu výchozí šablony na standard HTML5: 1. V aplikaci PSPad otevřete nabídku Soubor > Otevřít. 2. Vyhledejte soubor HTML5.html v adresáři Program Files/Program Files(x86) > PSPad editor > Template. 3. V šabloně odstraňte řádky 7 a 10 a soubor uložte do stejného adresáře jako Default.html (nahraďte stávající soubor). Nový soubor HTML - šablona HTML5 12

8 Struktura HTML dokumentu <!DOCTYPE html> <html lang="cs"> <head> <title>název stránky</title> </head> <body> Obsah stránky. </body> </html> Používat jednoduché nebo dvojité uvozovky? Při kódování HTML používejte dvojité, ale v zásadě na tom nezáleží. Později, až budeme programovat, Vás upozorním kdy jaké použít. <!DOCTYPE html> = definuje, že se jedná o HTML dokument <head> = hlavička dokumentu, která obsahu důležité informace pro vyhledávače a prohlížeče <body> = tělo dokumentu, kam se vkládá obsah, který chceme na stránce zobrazit Komentáře (poznámky) Součástí kódu mohou být komentáře (poznámky), které se na stránce ve webovém prohlížeči nezobrazují a mají pouze informativní charakter pro kodéra webu. Pomocí komentářů můžete odlišit začátek a konec různých částí stránky nebo skriptů jiných jazyků a usnadnit tak orientaci v kódu stránky. Začátek komentáře uvozuje posloupnost těchto znaků: <!-- Konec komentáře uvozuje posloupnost těchto znaků: -- > Vše, co uvedete mezi tyto znaky, bude sloužit jako poznámka a webový prohlížeč ji na stránce nezobrazí Párové a nepárové tagy HTML tagy jsou ve většině případů párové jeden tag označuje začátek, např. těla dokumentu, druhý tag označuje jeho konec. Počáteční tag těla dokumentu je <body> a jeho ukončovací tag je </body>. Vše, co se vyskytne mezi těmito tagy, vykreslí prohlížeč na zobrazovacím zařízení. Lomítko tedy ukončuje párový tag. <body>obsah stránky.</body> Kromě párových tagů se vyskytují i nepárové, ale nejsou příliš časté. Který tag je párový a který není, Vás vždy upozorním Hlavička HTML dokumentu Hlavnička HTML dokumentu obsahuje několik důležitých informací pro prohlížeče a vyhledávače, které se na stránce nezobrazují. Zejména se jedná o kódování stránky, popis stránky, název stránky, provázání s dalšími dokumenty (CSS, JS), vnitřní CSS, informace o jazykové lokalizaci stránek atd. 13

9 Tag Význam Pár title název stránky ano link propojení HTML dokumentu s externím dokumentem ne meta informace o dokumentu ne Název stránky <title> Jedná se o párový tag, jehož obsah je prohlížečem chápán jako název stránky a zobrazuje ho i na kartě (panelu) otevřené stránky. Pro každou podstránku projektu je nutné volit jiný název a to takový, který odpovídá obsahu dané stránky. Pokud na jedné doméně existují stránky se stejným názvem, vyhledávač je chápe jako duplicitní a vyřadí je z výsledků hledání. <title> je jedním z klíčových tagů pro vyhledávače a tudíš důležitý pro SEO. <title>název stránky</title> Propojení HTML dokumentu s jiným dokumentem <link> Tag se nejčastěji využívá pro spojení s CSS dokumentem nebo JavaScript dokumentem. Atribut Význam Hodnoty rel vztah mezi dokumenty stylesheet type MIME typ připojovaného dokumentu text/css (nejčastěji) icon href umístění připojovaného dokumentu URL adresa hreflang jazyk připojovaného dokumentu ID jazyka sizes nastavení velikosti ikony (pouze pro icon) velikost v px specifikace zařízení, pro které je připojovaný media ID zařízení soubor určen <link href="css/style.css" rel="stylesheet" type="text/css" /> Informace o dokumentu <meta> Meta tagy neboli metadata jsou obsaženy v hlavičce HTML dokumentu a některé z nich jsou klíčové pro vyhledávače nebo prohlížeče. Mohou např. nést informace o tom, co se na stránce nachází, kdo je autorem, kdo je vlastníkem autorských práv, jaká se má použít znaková sada při renderování obsahu, zda mají být stránky indexovány roboty nebo zda se mají zjišťovat informace o zařízení, na němž se stránka zobrazuje. Atribut Význam Hodnoty charset znaková sada utf-8, windows-1250, description (popis stránky) name robots typ meta informací indexování stránek roboty author (autor) copyright (vlastník) viewport (zjištění informací o zobrazovacím zařízení) all, follow nofollow index noindex 14

10 Atribut Význam Hodnoty content-type (typ dokumentu) http-equiv content určuje chování obsahu obsah meta tagů cache-control (ukládání v proxy) refresh (obnovení nebo presměrování stránky) expires (platnost stránky) popis, autor, vlastník, znaková sada, počet sekund do refreshe, indexování atd. <meta charset="utf-8" /> <meta name="description" content="zde se nachází popis stránky." /> <meta name="author" content="zde je jméno autora dokumentu" /> <meta name="copyright" content="zde je jméno vlastníka autorských práv" /> <meta name="robots" cotent="index,follow" /> <meta http-equiv="refresh" content="30" /> <meta http-equiv="cache-control" content="no-cache" /> Formátování textu HTML rozlišuje fyzické a logické formátování textu. Fyzické formátování se považuje za zastaralé a nedoporučuje se používat. Všechna fyzická formátování byla nahrazena styly CSS. Fyzické formátování nenese žádnou sémantickou hodnotu, kdežto logické ano. Všechny značky logického formátování jsou dnes vymřelé, kromě tagu <strong>, který se však spíše využívá s fyzickým významem. Pouze pro informaci uvedu tagy fyzického formátování, protože i dnes se s nimi můžete setkat. Ačkoliv je doporučeno použít spíše CSS. Z praktického hlediska může být ale někdy jednodušší a rychlejší použít některý z těchto tagů, než používat in-line zápis CSS nebo vytvářet novou třídu či identifikátor. Přehled HTML tagů pro fyzické formátování textu Tag Význam Pár v HTM5 b tučné písmo ano ano i kurzíva ano ano u podtržení ano ano strike přeškrtnutí ano ne sub dolní index ano ano sup horní index ano ano font písmo (vzhled určují další atributy) ano ne Zde je normální text. <b>zde se nachází tučný text.</b> Opět normální text Neplatný (přeškrtnutý) text V tabulce výše jste si mohli všimnout dnes již nepodporovaného tagu <strike>, který přeškrtnte text, který tato značka obaluje. 15

11 Do HTML5 byla implementována nová značka <del>, která také přeškrtne text, ale pro vyhledávače nese také informaci, že se jedná o text, který není nadále platný a byl nahrazen jiným textem, který je uzavřený v další nové značce - <ins>. Má oblíbená barva je <del>modrá</del> <ins>fialová</ins> Zvýraznění části textu Sémantická značka <mark> slouží ke zvýrazňování částí textu. Dnes se učíme <mark>html</mark> tagy. Zvýrazěný text Atributy tagů HTML tagy mohou obsahovat tzv. atributy s přiřazenými hodnotami, které dále specifikují formát daného elementu, resp. obsahu, který daný element obaluje. Příkladem může být tag <font>, který má tři možné atributy, jenž specifikují typ písma, jeho barvu a velikost. Atributy tagu <font> Atribut Význam Hodnoty face typ písma názvy fontů, např. Tahoma, Arial, Courier size velikost písma pouze hodnoty 1 7 color barva písma názvy barev (green, blue, black, ) decimální zápis (rgb) hexadecimální zápis (#) <font color="red" size="4" face="arial">formátovaný text</font> Text zformátovaný červenou barvou, velikostí 4 a písmem Arial. HTML značka <font> a její atrinuty nejsou již nadále podporovány, proto je nevyužívejte. 16

12 Křížení tagů Pokud obalíte text více tagy např. fyzického formátování, dbejte na to, aby nedošlo k jejich křížení při ukončování párových tagů. <b><i>tento text je tučnou kurzívou</i></b> <i>a tento pouze kurzívou.</i> Při ukončování párových tagů tedy vždy postupujte od konce od posledního započatého k prvnímu započatému Blokové tagy Blokové tagy automaticky zalamují řádek. Jde např. o odstavce a jiné oddíly textu nebo nadpisy. Některé z těchto blokových tagů dělají před a za elementem viditelnou mezeru. Tag Význam Pár? p odstavec ano ano br zalomení řádku ne ano div oddíl ano ano h1 h6 nadpis úrovně ano ano hr vodorovná čára ne ne Odstavec <p> Párový tag, který obaluje libovolně dlouhý text. V místě ukončovacího tagu bude zalomen řádek a před a za odstavcem vznikne viditelná mezera. <p>první odstavec.</p> <p>druhý odstavec.</p> Zalomení řádku <br /> Nepárová značka, která v místě zápisu zalomí řádek, ale nevytvoří žádnou viditelnou mezeru. <p>první odstavec.<br /> zde pokračuje první odstavec na dalším řádku.</p> 17

13 Oddíl <div> Blokový oddíl <div> se používá jako univerzální obalový element jakékoliv části kódu části textu, obrázky, sekce stránek atd. Velmi často je tento element použit jako obal celé stránky. Těmto oddílům jsou pak přiřazeny CSS vlastnosti určující jejich vzhled a chování. Tento element před a za sebou nedělá žádnou viditelnou mezeru horní a dolní okraj je 0. <div id="hlavicka"> <h1>vítejte na našich stránkách</h1> <img src="logo.png" alt="logo společnosti" width="200" height="200" /> </div> Nadpis <h X> Tagy <h1> - <h6> označují úrovně nadpisů. Text je pak automaticky formátován příslušnou velikostí, která je výchozí pro daný prohlížeč, je tučný a dělá kolem sebe vertikální mezery. <h1>nadpis 1. úrovně</h1> Seznamy U aktuálního standardu se setkáte se dvěma typy seznamů tříděný, tedy číslovaný (ordered list) a netříděný, odrážkový (unordered list). Tag Význam Pár ol číslovaný (tříděný) ano ul odrážkový (netříděný) ano li položka seznamu ano Atributy číslovaného seznamu <ol> Atribut Význam atributu Hodnoty Význam hodnoty type typ číslování 1 arabské číslice ano 18

14 Atribut Význam atributu Hodnoty I i Význam hodnoty římské číslice malé římské číslice A velké písmenkování start reversed začátek číslování sestupné číslování a číslo reversed malé písmenkování číslo (písmeno), od kterého chcete seznam začít číslovat ano ano <ol type="1" start="10"> <!-- číslovaný seznam, arabsky od 10 --> <li>první položka</li> <!-- položka seznamu --> <li>druhá položka</li> <li>třetí položka</li> </ol> <!-- konec seznamu --> Tříděný seznam začínající od čísla 10. Atribut reversed není podporován v poslední verzi Internet Exploreru (verze 11). Atributy odrážkového seznamu <ul> Atribut Význam atributu Hodnoty Význam hodnoty disc puntík type typ odrážky square čtvereček circle o kolečko ne Atributy položky seznamu <li> Položka seznamu <li> musí být uvnitř elementu <ul> nebo <ol>. Každá položka se automaticky zobrazuje na novém řádku, beztoho, aniž by za sebou dělala vertikální mezeru. Ačkoliv položka seznamu nemusí být párovým tagem, doporučuji položku vždy ukončit. Atribut Význam atributu Hodnoty? typ odrážky nebo type všechny výše uvedené hodnoty Ne číslování 19

15 Víceúrovňový seznam Číslovaný i odrážkový seznam mohou obsahovat vnořené úrovně seznamů. Dbejte na validní syntaxi kódu vnořená úroveň seznamu je vždy zahrnuta mezi tagy <li> a </li>. Chcete-li, aby některá z položek obsahovala druhou úroveň číslování nebo odrážek, jednoduše do dané položky <li> vnoříte další seznam <ul> nebo <ol>. <ol type="1"> <!-- první úroveň seznamu --> <li>první položka <!-- položka první úrovně seznamu --> <ol type="a"> <!-- druhá úroveň seznamu --> <li>první podpoložka</li> <!-- položka druhé úrovně seznamu --> <li>druhá podpoložka</li> </ol> <!-- konec druhé úrovně seznamu --> </li> <!-- konec položky, ve které je vnořena druhá úroveň --> <li>druhá položka</li> <!-- položka první úrovně seznamu --> <li>třetí položka</li> </ol> <!-- konec první úrovně seznamu --> Odkazy Pro vytvoření odkazu slouží tag <a> (anchor), který sám o sobě nikam neodkazuje. Jako odkaz na konkrétní cíl ho utváří teprve atribut s cestou, tedy cílem odkazu. Odkaz lze využít i jako záložku pro odrolování na konkrétní místo na stejné nebo jiné stránce. Tag <a> je párový a vše, co je uvedeno mezi <a> a </a> slouží jako samotný odkaz. Nemusí zde být pouze text, ale i obrázek, video. Atributy tagu <a> Atribut Význam atributu Hodnoty Význam hodnoty href cíl odkazu URL adresa ano name název odkazu jakýkoliv název (bez diakritiky a mezer) ne _blank otevře dokument v novém okně nebo panelu otevře dokument ve stejném okně _self (výchozí hodnota) target cílový rám _parent otevře dokument v nadřazeném rámu ano _top otevře dokument přes celé okno vlastninazev otevře dokument v okně se zvoleným názvem rel alternate odkazuje na alternativní verzi dokumentu ano 20

16 Atribut Význam atributu definuje vztah mezi aktuálním a odkazovaným dokumentem Hodnoty author bookmark help licence next nofollow noreferrer prefetch prev search tag Význam hodnoty odkazuje na autora dokumentu trvalý odkaz pro vytvoření záložky odkaz na dokument s nápovědou odkaz na dokument s copyrightem následující dokument odkaz nebude sledován roboty prohlížeč nebude odesílat HTTP hlavičku stránky, ze které uživatel přišel cílový dokument bude uložen do cache předchozí dokument odkaz na vyhledávací nástroj dokuemntu tag (klíčové slovo) aktuální dokumentu title popisek libovolný text při najetí myší na odkaz zobrazí popisek ano Příklad: Vytvoření odkazu 1. Vytvořte nový dokument HTML a uložte ho jako odkazy.html. 2. V dokumentu vytvořte odkaz s textem Google, který bude směrovat na domovskou stránku Google a stránka se otevře v novém okně/na novém panelu (záložce). 3. Vytvořte odkaz s textem Seznam, který bude směrovat na domovskou stránku Seznam.cz. Stránka se otevře ve stejném okně a při najetí myší na odkaz se zobrazí popisek Kliknutím přejdete na Seznam.cz. <a href="http://www.google.cz/" target="_blank">odkaz na Google</a> <br /> <a href="http://www.seznam.cz/" title="kliknutím přejdete na Seznam.cz">Seznam</a> Při použití URL používejte protokoly http, https, ftp, file Záložky V některých případech budete chtít odkazovat na konkrétní část stránky (nadpis, oddíl apod.), kdy po kliknutí na daný odkaz se stránka zobrazí na požadované pozici. K tomuto řešení použijete odkaz na záložku vytvořenou právě u konkrétní části stránky, na kterou chcete odkazovat. 21

17 Vytvoření záložky Záložku vytvoříte atributem id nebo name v daném elementu, na který budete chtít odkaz směrovat a jako hodnotu atributu zvolíte vhodný název, který bude element identifikovat. <p id="clanek">obsah elementu</p> Odkaz směrující na záložku Odkaz, který bude směrovat na záložku na stejné stránce, ze které vede odkaz, zadáte jako hodnotu atributu href. Hodnotou bude zvolené id nebo name konkrétní záložky. Samotné hodnotě, která identifikuje element, musí předcházet znak hash (#). Chcete-li odkazovat na jinou stránku, než na stejnou, ze které vede odkaz, znak hash a název záložky připojíte za URL adresu odkazu. <a href="#clanek">text odkazu</a> <!-- Odkaz na záložku na stejné stránce --> <a href="url#clanek">text odkazu</a> <!-- Odkaz na záložku na jiné stránce --> Příklad: Odkazy a záložky Řešení 1. Vytvořte nový soubor HTML a uložte ho jako zalozky.html. 2. Na stránce vygenerujte 5 odstavců s slovy (Nástroje > Lorem Ipsum generátor). 3. Před každý odstavec vložte nadpis. 4. Každému nadpisu přidejte vhodný identifikátor. 5. Na začátku stránky vytvořte seznam odkazů jako navigaci na jednotlivé nadpisy. 6. Pod posledním odstavcem vytvořte odkaz, který po kliknutí odroluje stánku zpět na začátek k navigaci. <h1 id="obsah">navigace</h1> <a href="#nadpis1">nadpis 1</a><br /> <a href="#nadpis2">nadpis 2</a><br /> <a href="#nadpis3">nadpis 3</a><br /> <a href="#nadpis4">nadpis 4</a><br /> <a href="#nadpis5">nadpis 5</a> <h2 id="nadpis1">nadpis 1</h2> <p>lorem ipsum dolor sit amet consectetuer convall... <h2 id="nadpis2">nadpis2</h2> <p>phasellus sed semper nulla est semper scelerisq... <h2 id="nadpis3">nadpis3</h2> <p>feugiat lorem nulla auctor Sed neque scelerisqu... <h2 id="nadpis4">nadpis4</h2> <p>venenatis porttitor Vivamus consequat semper ju... <h2 id="nadpis5">nadpis5</h2> <p>vitae quis tincidunt amet justo Maecenas ut ege... <a href="#obsah">zpět na začátek</a> 22

18 Relativní a absolutní odkazy Při vkládání odkazů, ale i souborů nebo obrázků na stránku je potřeba se rozhodnout, jaký typ odkazu zvolíte relativní nebo absolutní. Absolutní adresa Absolutní odkaz je např. takový, když někomu přes sociální síť odešlete odkaz na nějaký článek na Internetu (http://www.server.cz/clanek.html/). Je tedy přesně určena cesta k cílovému souboru clanek.html. Relativní adresa U relativních odkazu záleží na místě, ze kterého odkazujete na cílový soubor. Cesta vždy vede z daného místa, kde se nachází stránka, ze které na požadovaný soubor odkazujete. Budete-li chtít např. odkazovat ze souboru clanek.html do souboru dalsi-clanek.html, který je ve stejném adresáři jako clanek.html, pak bude cesta následující: <a href="dalsi-clanek.html">text odkazu</a> Pokud se bude soubor dalsi-clanek.html nacházet v podadresáři, bude cesta vypadat takto: <a href="vnoreny-adresar/dalsi-clanek.html">text odkazu</a> Pokud budete chtít naopak odkazovat ze souboru dalsi-clanek.html do souboru clanek.html, který je v nadřazeném adresáři, zadáte do odkazu dvě tečky a lomítko tím vyskočíte o úroveň výš: <a href="../clanek.html">text odkazu</a> Obrázky Obrázek na stránce zobrazíte pomocí nepárového tagu <img> a atributu určujícího cíl obrázku, tedy kde se daný soubor nachází. Může se jednat o cíl směřující na váš hostitelský server, ale i obrázek umístěný kdekoliv v Internetu (pozor na platnost odkazu). Doporučuji však vždy odkazovat na obrázky umístěné na vašem hostitelském serveru. Kromě samotného umístění obrázku by měl tag <img> obsahovat i atribut s alternativním popisem, který slouží jako popis obrázku v případě že se nenačte, a také je tu pro osoby zrakově postižené, jenž využívají různé čtečky a alternativní popis jim může pomoci s pochopením obsahu. Datová velikost Obrázky jsou jedním z prvků, které značně ovlivňují rychlost načítání webové stránky a jako uživatelé Internetu můžete sami potvrdit, že rychlost načtení stránky je rozhodujícím faktorem ovlivňující setrvání uživatele na stránce. Pokud se mi bude stránka načítat 5 sekund bez odezvy, s největší pravděpodobností stránku opustím a vyberu jinou z výsledků hledání. Zdlouhavé načítání jsou i 2 sekundy. Je tedy velmi důležité vkládané obrázky optimalizovat pro web a nevkládat je v plné datové velikosti. Existuje spousta nástrojů pro jejich optimalizaci, ať už s bezztrátovou kompresí nebo ztrátovou. O jejich optimalizaci si povíme později. 23

19 Atributy tagu <img> Atribut Význam atributu Hodnoty src cíl (umístění obrázku) URL ano alt alternativní popis jakýkoliv text (i s diakritikou a mezerami) ano width šířka velikost v px nebo relativní jednotka (%, em, rem) ano height výška velikost v px nebo relativní jednotka (%, em, rem) ano border šířka rámečku velikost v px nebo relativní jednotka (%, em, rem) ne vspace vertikální okraj velikost v px nebo relativní jednotka (%, em, rem) ne hspace horizontální okraj velikost v px nebo relativní jednotka (%, em, rem) ne align zarovnání obrázku left, right (okolní objekty budou obtékat) ne usemap obrázková mapa název obrázkové mapy ano Šířka a výška obrázku Rozměry pomocí atributů width a height není nutné pro samotné zobrazenní obrázku zadávat, ale jsou to povinné atributy, které by vždy měly být uvedeny. Zadané hodnoty udávají velikost v px, ale můžete využít i relativních jednotek (%, em, rem). Uvedete-li pouze jeden rozměr, budou zachovány proporce obrázku. <img src="obrazek.jpg" alt="nějaký obrázek" width="200" height="100" /> Šířku a výšku vždy uveďte. Pokud z nějakého důvodu nedojde k načtení obrázku nebo se načítá déle, prohlížeč, v případě neuvedení těchto rozměrů bude ignorovat jeho existenci a dojde k narušení layoutu. Až po jeho načtení se vše poskládá správně. Jsou-li rozměry uvedeny, již při načítání je pro obrázek rezervováno místo. Zadáním menší velikosti obrázku nezměníte jeho datovou velikost. Pokud má např. obrázek 2MB v plné velikosti, tak i při zmenšené velikost bude prohlížeč stahovat 2MB Označení fotografie a titulek K označení fotografie v dokumentu slouží značka <figure>. Mimo označování fotografií se používá k označení ilustrací, diagramů nebo ukázek kódu. Pozor! Nejedná se o označení každého obrázku na webu, ale pouze o takový obrázek, který doplňuje nějaký článek. Pozice tohoto elementu není závislá na hlavním toku dokumentu a při jeho odstranění by nemělo dojít k narušení toku dokumentu. Značka <figcaption> slouží k vložení titulku značce <figure> a musí být vložena jako podřízený element tagu <figure>. <figure> <img src="image/prague-panorama.jpg" alt="panorama Prahy" width="550" height="150" /> <figcaption>obr1. - Panoramatický pohled na centrum Prahy.</figcaption> </figure> 24

20 Obrázková mapa Atribut usemap použitý u značky <img> vytvoří z obrázku klikací mapu klepnutím v přesně definovaném místě obrázku např. otevřete jiný obrázek. Jako hodnota atributu usemap uveďte znak hash (#) a jméno mapy. <img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap" /> Značka <map> V dokumentu se tento element nijak nezobrazuje, pouze způsobuje, že obrázek bude na některých místech klikat jako odkaz. Mapa obsahuje popis aktivních oblastí, které jsou reprezentovány tagy <area>. Pomocí jména (atributu name) je mapa spojena s obrázkem (atribut usemap u tagu <img>). Atributy tagu <area> Atribut Význam atributu Hodnoty alt alternativní popis alternativní popis oblasti; nutno zadat, pokud je uveden atribut href download stažení souboru cíl a název souboru ano href cíl odkazu URL adresa ano specifikuje, pro jaké media zařízení je cílová URL media query (popsáno později v CSS) ano optimalizovaná alternate rel definuje vztah mezi aktuálním a odkazovaným dokumentem author bookmark help licence next follow nofollow noreferrer prefetch ano ano 25

21 Atribut Význam atributu Hodnoty shape target definuje tvar oblasti určuje cílový rám odkazu prev search tag default rect circle poly _blank _parent _self _top nazevframu ano ano <img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="sun" href="sun.htm" /> <area shape="circle" coords="90,58,3" alt="mercury" href="mercur.htm" /> <area shape="circle" coords="124,58,8" alt="venus" href="venus.htm" /> </map> Vyzkoušejte příklad na stránce Příklad: Vložení obrázku 1. Vytvořte nový soubor HTML a uložte ho jako obrazky.html. 2. Ve složce, kam jste uložili tento soubor, vytvořte podsložku pro obrázky, např. s názvem img, image, images, obrazky, atd. 3. Z Internetu stáhněte do složky pro obrázky libovolný obrázek. 4. Na stránku obrazky.html vložte stažený obrázek. 5. Zadejte atributy tagu <img> - alternativní popis, šířku a výšku. <img src="image/prague-panorama.jpg" alt="panorama Praha" width="550" height="150" /> Tabulky Obsah tabulky je ohraničen párovým tagem <table>, který obsahuje další tagy řádky a buňky, případně záhlaví, zápatí, tělo a nadpis tabulky. Atributy tagu <table> Atribut Význam atributu Hodnoty align zarovnání tabulky left center ne 26

22 Atribut Význam atributu Hodnoty right background obrázek na pozadí URL obrázku ne bgcolor pozadí tabulky decimální hodnota - rgb(x,x,x) hexadecimální hodnota - #xxxxxx název barvy border rámeček tloušťka rámečku v px nebo relativních jednotkách ne bordercolor barva rámečku decimální hodnota - rgb(x,x,x) hexadecimální hodnota - #xxxxxx název barvy cellpadding mezera mezi okrajem hodnota v px relativní jednotka buňky a obsahem ne cellspacing mezera mezi buňkami hodnota v px relativní jednotka ne sortable umožňuje třídění v tabulce sortable ano width šířka tabulky hodnota v px nebo relativní jednotka ne ne ne Řádek <tr> Řádek <tr> se vyskytuje pouze uvnitř tagu <table> a označuje začátek. Další atributy se standardně neuvádí nejsou podporovány. Tag <tr> je nepovinně párový, avšak doporučuji řádek vždy ukončit tagem </tr>. Buňka <td> a atributy Značka <td> označuje buňku v HTML tabulce. Je to nepovinně párový tag, avšak opět doporučuji buňku vždy uzavřít. Tabulky mohou obsahovat dva typy buněk: hlavičkové buňky obsahují názvy sloupců (tag <th> místo <td>) standardní buňky obsahují data (tag <td>) Atribut Význam atributu Hodnoty align zarovnání obsahu buňky left right center justify background obrázek na pozadí URL obrázku ne bgcolor pozadí buňky bordercolor barva rámečku decimální hodnota - rgb(x,x,x) hexadecimální hodnota - #xxxxxx název barvy decimální hodnota - rgb(x,x,x) hexadecimální hodnota - #xxxxxx ne ne ne 27

23 Atribut Význam atributu Hodnoty název barvy colspan určuje počet sloupců, přes které bude číslo ano buňka sloučena height výška buňky výška v px nebo % ne nowrap rowspan valign povolí nebo zamezí zalamování řádků určuje počet řádků, přes které bude buňka sloučena vertikální zarovnání wrap nowrap číslo top middle bottom baseline width šířka buňky šířka v px nebo % ne ne ano ne Atributy, které HTML5 nepodporuje, nepoužívejte! Příklad: Tabulka V následujícím příkladu použijte i nepodporované atributy. 1. Vytvořte nový soubor HTML a uložte ho jako tabulka.html. 2. Vytvořte tabulku 4x4. 3. V prvním řádku budou buňky jako záhlaví tabulky. 4. Šířku nastavte na 400px. 5. Nastavte mezeru mezi buňkami na 0px. 6. Mezeru mezi rámečkem buňky a jejím obsahem nastavte na 3px. 7. Rámeček buňky nastavte na tloušťku 1px a barvu na modrou. 8. Nastavte světle žluté pozadí tabulky. 9. Slučte třetí a čtvrtou buňku druhého řádku. 10. Slučte první a druhou buňku čtvrtého řádku. 11. Slučte čtvrtou buňku třetího řádku s čtvrtou buňku čtvrtého řádku. 12. Tabulku zarovnejte vodorovně na střed stránky. 28

24 Řešení <table border="1" bordercolor="blue" width="400" cellspacing="0" cellpadding="3" bgcolor="lightyellow" align="center"> <tr> <th>aaa</th> <th>bbb</th> <th>ccc</th> <th>ddd</th> </tr> <tr> <td>aaa</td> <td>bbb</td> <td colspan="2">ccc</td> </tr> <tr> <td colspan>aaa</td> <td>bbb</td> <td>ccc</td> <td rowspan="2">ddd</td> </tr> <tr> <td colspan="2">aaa</td> <td>bbb</td> </tr> </table> Titulek tabulky Element <caption> definuje titulek tabulky, který se ve výchozím nastavení zobrazí vycentrovaný nad tabulkou. Tag <caption> musí následovat hned po tagu <table> a jedna tabulka může obsahovat pouze jeden titulek. <table> <caption>měsíční úspory</caption> <tr> <th>měsíc</th> <th>úspory</th> </tr> <tr> <td>leden</td> <td>3000 Kč</td> </tr> </table> 29

25 Atributy tagu <caption> Atribut Význam atributu Hodnoty left align zarovnání titulku right top bottom ne Seskupení buněk tabulky Tag <colgroup> definuje skupinu sloupců v tabulce, které chcete formátovat. Je tedy mnohem efektivnější využít značku <colgroup> místo opakování stylu na každou buňku v každém řádku zvlášť. Značka <colgroup> musí být vnořeným tagem značky <table> a musí následovat až za tagem <caption>, pokud je uveden a musí ležet před tagy <thead>, <tfoot> a <tr>. Pro definování odlišných vlastností pro různé sloupce, použijte tag <col> uvnitř tagu <colgroup>. Tag <col> určuje vlastnosti sloupců pro každý sloupec uvnitř elementu <colgroup>. <table> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>isbn</th> <th>titul</th> <th>cena</th> </tr> <tr> <td>123456</td> <td>první kroky s HTML</td> <td>250 Kč</td> </tr> <tr> <td>654321</td> <td>první kroky s CSS</td> <td>250 Kč</td> </tr> </table> 30

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

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

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

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

- definuje vztah k jiným XHTML dokumentům, typicky

<link> - definuje vztah k jiným XHTML dokumentům, typicky Návrh a tvorba WWW stránek 1/10 Hlavička dokumentu mezi a obsahuje informace vztažené k dokumentu metadata - název stránky, povinná párová značka vzorová stránka

Více

Hlavička dokumentu. mezi a obsahuje informace vztažené k dokumentu metadata - název stránky, povinná párová značka</a> </h3> <p> <img alt="Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka" title="Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka" class="news-block-img pull-right" src="/thumbs/48/23934103.jpg"> 1/10 Hlavička dokumentu mezi a obsahuje informace vztažené k dokumentu metadata - název stránky, povinná párová značka vzorová stránka - definuje vztah k jiným </p> <a href="/23934103-Hlavicka-dokumentu-mezi-head-a-head-obsahuje-informace-vztazene-k-dokumentu-metadata-title-nazev-stranky-povinna-parova-znacka.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1367396-Za-klady-html-tag-html-html-parova-znacka-ktery-definuje-webovou-stranku-obsah-stranky-konci-znackou.html">Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou</a> </h3> <p> <img alt="Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou" title="Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou" class="news-block-img pull-right" src="/thumbs/22/1367396.jpg"> 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 </p> <a href="/1367396-Za-klady-html-tag-html-html-parova-znacka-ktery-definuje-webovou-stranku-obsah-stranky-konci-znackou.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/11860876-Tnpw1-cviceni-2-6-10-2015-aneta-bartuskova-uhk-cz.html">TNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz</a> </h3> <p> <img alt="TNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz" title="TNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz" class="news-block-img pull-right" src="/thumbs/27/11860876.jpg"> 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í, </p> <a href="/11860876-Tnpw1-cviceni-2-6-10-2015-aneta-bartuskova-uhk-cz.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/11986550-Poznamka-v-x-html-vsechno-co-je-v-x-html-souboru-obaleno-znackami-a-je-povazovano-za-poznamku-a-nezobrazuje-se.html">Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami <!-- a -->, je považováno za poznámku a nezobrazuje se.</a> </h3> <p> <img alt="Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami <!-- a -->, je považováno za poznámku a nezobrazuje se." title="Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami <!-- a -->, je považováno za poznámku a nezobrazuje se." class="news-block-img pull-right" src="/thumbs/27/11986550.jpg"> Úvod do tvorby www stránek Tvorba www 3 Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami , je považováno za poznámku a nezobrazuje se. Odkaz (hyperlink) </p> <a href="/11986550-Poznamka-v-x-html-vsechno-co-je-v-x-html-souboru-obaleno-znackami-a-je-povazovano-za-poznamku-a-nezobrazuje-se.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3448339-Html-uvod-zpracoval-petr-lasak.html">HTML - Úvod. Zpracoval: Petr Lasák</a> </h3> <p> <img alt="HTML - Úvod. Zpracoval: Petr Lasák" title="HTML - Úvod. Zpracoval: Petr Lasák" class="news-block-img pull-right" src="/thumbs/24/3448339.jpg"> 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í </p> <a href="/3448339-Html-uvod-zpracoval-petr-lasak.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3097867-Zaklady-html-obecna-syntaxe-html-struktura-html.html">Základy HTML. Obecná syntaxe HTML. Struktura HTML</a> </h3> <p> <img alt="Základy HTML. Obecná syntaxe HTML. Struktura HTML" title="Základy HTML. Obecná syntaxe HTML. Struktura HTML" class="news-block-img pull-right" src="/thumbs/24/3097867.jpg"> Základy HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů </p> <a href="/3097867-Zaklady-html-obecna-syntaxe-html-struktura-html.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/30294836-Zaklady-informatiky-html-tvorba-www-stranek-daniela-szturcova-cast-prevzata-z-prednasky-p-dergela.html">Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela</a> </h3> <p> <img alt="Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela" title="Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela" class="news-block-img pull-right" src="/thumbs/52/30294836.jpg"> Základy informatiky HTML, tvorba WWW stránek Daniela Szturcová Část převzata z přednášky P. Děrgela Obsah přednášky Princip WWW dokumentu, ukázka Nástroje pro tvorbu Pravidla tvorby HTML, tagy Kostra HTML </p> <a href="/30294836-Zaklady-informatiky-html-tvorba-www-stranek-daniela-szturcova-cast-prevzata-z-prednasky-p-dergela.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/595419-22-tvorba-webovych-stranek.html">22. Tvorba webových stránek</a> </h3> <p> <img alt="22. Tvorba webových stránek" title="22. Tvorba webových stránek" class="news-block-img pull-right" src="/thumbs/20/595419.jpg"> 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 </p> <a href="/595419-22-tvorba-webovych-stranek.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/595703-Tvorba-fotogalerie-v-html-str-1.html">Tvorba fotogalerie v HTML str.1</a> </h3> <p> <img alt="Tvorba fotogalerie v HTML str.1" title="Tvorba fotogalerie v HTML str.1" class="news-block-img pull-right" src="/thumbs/20/595703.jpg"> 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é </p> <a href="/595703-Tvorba-fotogalerie-v-html-str-1.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/5653196-Zaklady-html-autor-palito.html">Základy HTML. Autor: Palito</a> </h3> <p> <img alt="Základy HTML. Autor: Palito" title="Základy HTML. Autor: Palito" class="news-block-img pull-right" src="/thumbs/25/5653196.jpg"> 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 </p> <a href="/5653196-Zaklady-html-autor-palito.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2591451-Zaklady-html-obecna-syntaxe-html-struktura-html.html">Základy HTML. Obecná syntaxe HTML. Struktura HTML</a> </h3> <p> <img alt="Základy HTML. Obecná syntaxe HTML. Struktura HTML" title="Základy HTML. Obecná syntaxe HTML. Struktura HTML" class="news-block-img pull-right" src="/thumbs/24/2591451.jpg"> Základy HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů </p> <a href="/2591451-Zaklady-html-obecna-syntaxe-html-struktura-html.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2591333-Webove-stranky-2-uvod-do-jazyka-html-datum-vytvoreni-11-9-2012-str-ank-y-vytvoril-petr-lerch-www-isspolygr-cz.html">Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz</a> </h3> <p> <img alt="Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz" title="Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz" class="news-block-img pull-right" src="/thumbs/24/2591333.jpg"> 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á </p> <a href="/2591333-Webove-stranky-2-uvod-do-jazyka-html-datum-vytvoreni-11-9-2012-str-ank-y-vytvoril-petr-lerch-www-isspolygr-cz.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/33334362-Zaklady-informatiky-03-html-tvorba-www-stranek-daniela-szturcova-cast-prevzata-z-prednasky-p-dergela.html">Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela</a> </h3> <p> <img alt="Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela" title="Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela" class="news-block-img pull-right" src="/thumbs/54/33334362.jpg"> Základy informatiky 03, HTML, tvorba WWW stránek Daniela Szturcová Část převzata z přednášky P. Děrgela Obsah přednášky Princip WWW dokumentu, ukázka Nástroje pro tvorbu Pravidla tvorby HTML, tagy Kostra </p> <a href="/33334362-Zaklady-informatiky-03-html-tvorba-www-stranek-daniela-szturcova-cast-prevzata-z-prednasky-p-dergela.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/595609-Tvorba-webovych-stranek-pomoci-html-kodu-v-prikladech-m-semenka-2014.html">Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014</a> </h3> <p> <img alt="Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014" title="Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014" class="news-block-img pull-right" src="/thumbs/20/595609.jpg"> Tvorba webových stránek pomocí HTML kódu v příkladech podpůrný text pro výuku M. Seménka, 2014 na příkladech se studenti seznámí se základními postupy tvorby www stránek Příklady je třeba důkladně prostudovat </p> <a href="/595609-Tvorba-webovych-stranek-pomoci-html-kodu-v-prikladech-m-semenka-2014.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/4424001-Mgr-vlastislav-kucera-lekce-c-2.html">Mgr. Vlastislav Kučera lekce č. 2</a> </h3> <p> <img alt="Mgr. Vlastislav Kučera lekce č. 2" title="Mgr. Vlastislav Kučera lekce č. 2" class="news-block-img pull-right" src="/thumbs/24/4424001.jpg"> 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 </p> <a href="/4424001-Mgr-vlastislav-kucera-lekce-c-2.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/357285-Mgr-vlastislav-kucera-prednaska-c-2.html">Mgr. Vlastislav Kučera přednáška č. 2</a> </h3> <p> <img alt="Mgr. Vlastislav Kučera přednáška č. 2" title="Mgr. Vlastislav Kučera přednáška č. 2" class="news-block-img pull-right" src="/thumbs/19/357285.jpg"> Mgr. Vlastislav Kučera přednáška č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS </p> <a href="/357285-Mgr-vlastislav-kucera-prednaska-c-2.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/4357174-Internetove-technologie-cviceni-c-5.html">Internetové technologie, cvičení č. 5</a> </h3> <p> <img alt="Internetové technologie, cvičení č. 5" title="Internetové technologie, cvičení č. 5" class="news-block-img pull-right" src="/thumbs/24/4357174.jpg"> Internetové technologie, cvičení č. 5 Náplň cvičení Obsahem 5. cvičení předmětu Internetové technologie je ukázka a procvičení XHTML značek a atributů používaných při vytváření hypertextových odkazů a </p> <a href="/4357174-Internetove-technologie-cviceni-c-5.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1964704-Html-xhtml-javascript-php-asp-net-zajimave-odkazy.html">HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy</a> </h3> <p> <img alt="HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy" title="HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy" class="news-block-img pull-right" src="/thumbs/23/1964704.jpg"> 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 </p> <a href="/1964704-Html-xhtml-javascript-php-asp-net-zajimave-odkazy.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/24778289-X-html-tagy-vos-a-sst-ceska-trebova.html">(X)HTML-TAGY. VOŠ a SŠT Česká Třebová</a> </h3> <p> <img alt="(X)HTML-TAGY. VOŠ a SŠT Česká Třebová" title="(X)HTML-TAGY. VOŠ a SŠT Česká Třebová" class="news-block-img pull-right" src="/thumbs/48/24778289.jpg"> (X)HTML-TAGY Mgr. Petr Slívko VOŠ a SŠT Česká Třebová Tagy Popis Značka tagu začíná levou ostrou závorkou. Za ní následuje jméno tagu, před kterým nesmí být mezera. Mohou následovat atributy. Před </p> <a href="/24778289-X-html-tagy-vos-a-sst-ceska-trebova.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/597264-Html-ict_01-02-konzultace-2-rocnik-1-6.html">HTML. ICT_01., 02. konzultace; 2. ročník 1/6</a> </h3> <p> <img alt="HTML. ICT_01., 02. konzultace; 2. ročník 1/6" title="HTML. ICT_01., 02. konzultace; 2. ročník 1/6" class="news-block-img pull-right" src="/thumbs/20/597264.jpg"> 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, </p> <a href="/597264-Html-ict_01-02-konzultace-2-rocnik-1-6.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/18931438-12-zaklady-html-a-formulare-v-html.html">12. Základy HTML a formuláře v HTML</a> </h3> <p> <img alt="12. Základy HTML a formuláře v HTML" title="12. Základy HTML a formuláře v HTML" class="news-block-img pull-right" src="/thumbs/39/18931438.jpg"> 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 </p> <a href="/18931438-12-zaklady-html-a-formulare-v-html.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2592011-13-vytvareni-webovych-stranek.html">13. Vytváření webových stránek</a> </h3> <p> <img alt="13. Vytváření webových stránek" title="13. Vytváření webových stránek" class="news-block-img pull-right" src="/thumbs/24/2592011.jpg"> 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í </p> <a href="/2592011-13-vytvareni-webovych-stranek.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/9344767-Www-a-html-zakladni-pojmy-ivo-peterka.html">WWW a HTML. Základní pojmy. Ivo Peterka</a> </h3> <p> <img alt="WWW a HTML. Základní pojmy. Ivo Peterka" title="WWW a HTML. Základní pojmy. Ivo Peterka" class="news-block-img pull-right" src="/thumbs/26/9344767.jpg"> 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í </p> <a href="/9344767-Www-a-html-zakladni-pojmy-ivo-peterka.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/9276907-Tvorba-internetovych-stranek.html">Tvorba internetových stránek</a> </h3> <p> <img alt="Tvorba internetových stránek" title="Tvorba internetových stránek" class="news-block-img pull-right" src="/thumbs/26/9276907.jpg"> Tvorba internetových stránek Ing. Michal Seibert E111 Konzultační hodiny: Středa 9:00-10:00h http://tvorba-is.wz.cz/ Samostatný úkol Zvolili jste si doménu a zjistili její cenu? Nalezli jste svůj freehosting? </p> <a href="/9276907-Tvorba-internetovych-stranek.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3871753-Co-je-html-1-parovy-tag-ma-zacatek-a-konec-2-neparovy-tag-nema-ukoncovaci-znacku.html">Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:</a> </h3> <p> <img alt="Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:" title="Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:" class="news-block-img pull-right" src="/thumbs/24/3871753.jpg"> Co je HTML HTML HyperText Markup Language je značkovací jazyk pro tvorbu www stránek. Jako například Český jazyk má svá slova, tak i HTML obsahuje slova, neboli tagy (značky), které dávají vlastnímu obsahu </p> <a href="/3871753-Co-je-html-1-parovy-tag-ma-zacatek-a-konec-2-neparovy-tag-nema-ukoncovaci-znacku.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1765717-Vyvoj-internetovych-aplikaci.html">Vývoj Internetových Aplikací</a> </h3> <p> <img alt="Vývoj Internetových Aplikací" title="Vývoj Internetových Aplikací" class="news-block-img pull-right" src="/thumbs/23/1765717.jpg"> 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 </p> <a href="/1765717-Vyvoj-internetovych-aplikaci.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/17231351-Maturitni-otazka-webove-stranky-technologie-tvorby-webu-co-znamena-pojem-web-web-www-stranky-celym-nazvem-world-wide-web.html">Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web,</a> </h3> <p> <img alt="Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web," title="Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web," class="news-block-img pull-right" src="/thumbs/35/17231351.jpg"> 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í </p> <a href="/17231351-Maturitni-otazka-webove-stranky-technologie-tvorby-webu-co-znamena-pojem-web-web-www-stranky-celym-nazvem-world-wide-web.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/7922454-Redakcni-system-joomla-prokop-zeleny.html">Redakční systém Joomla. Prokop Zelený</a> </h3> <p> <img alt="Redakční systém Joomla. Prokop Zelený" title="Redakční systém Joomla. Prokop Zelený" class="news-block-img pull-right" src="/thumbs/26/7922454.jpg"> Redakční systém Joomla Prokop Zelený 1 Co jsou to red. systémy? Redakční systémy (anglicky Content Management System - CMS) jsou webové aplikace používané pro snadnou správu obsahu stránek. Hlavním cílem </p> <a href="/7922454-Redakcni-system-joomla-prokop-zeleny.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/32822142-Uvod-do-aplikaci-internetu-a-prehled-moznosti-pri-tvorbe-webu.html">Úvod do aplikací internetu a přehled možností při tvorbě webu</a> </h3> <p> <img alt="Úvod do aplikací internetu a přehled možností při tvorbě webu" title="Úvod do aplikací internetu a přehled možností při tvorbě webu" class="news-block-img pull-right" src="/thumbs/53/32822142.jpg"> CVT6 01a Úvod do aplikací internetu a přehled možností při tvorbě webu Internet a www Internet? Služby www ftp e-mail telnet NetNews konference IM komunikace Chaty Remote Access P2P aplikace Online games </p> <a href="/32822142-Uvod-do-aplikaci-internetu-a-prehled-moznosti-pri-tvorbe-webu.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/33493042-Uvod-do-aplikaci-internetu-a-prehled-moznosti-pri-tvorbe-webu.html">Úvod do aplikací internetu a přehled možností při tvorbě webu</a> </h3> <p> <img alt="Úvod do aplikací internetu a přehled možností při tvorbě webu" title="Úvod do aplikací internetu a přehled možností při tvorbě webu" class="news-block-img pull-right" src="/thumbs/54/33493042.jpg"> CVT5 01a Úvod do aplikací internetu a přehled možností při tvorbě webu Internet a www Internet? Služby www ftp e-mail telnet NetNews konference IM komunikace Chaty Remote Access P2P aplikace Online games </p> <a href="/33493042-Uvod-do-aplikaci-internetu-a-prehled-moznosti-pri-tvorbe-webu.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/28506895-Moderni-web-snadno-a-rychle.html">MODERNÍ WEB SNADNO A RYCHLE</a> </h3> <p> <img alt="MODERNÍ WEB SNADNO A RYCHLE" title="MODERNÍ WEB SNADNO A RYCHLE" class="news-block-img pull-right" src="/thumbs/51/28506895.jpg"> SNADNO A RYCHLE Marek Lučný Pavoučí síť přes celý svět Co prohlížeče (ne)skrývají Tajemný kód HTML Všechno má svůj styl Interaktivní je IN Na obrazovce i na mobilu Začni podle šablony Informace jsou základ </p> <a href="/28506895-Moderni-web-snadno-a-rychle.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/561847-Prirucka-sprava-obsahu-webove-prezentace-formatovani-textu.html">PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu</a> </h3> <p> <img alt="PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu" title="PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu" class="news-block-img pull-right" src="/thumbs/20/561847.jpg"> PŘÍRUČKA Správa obsahu webové prezentace Formátování textu Verze: 6.2 Datum: 4.12.2009 Autor: Ing. Michal Šídlo, michal.sidlo@netgenium.com Společnost: NetGenium s.r.o., www.netgenium.com Obsah 1. Základní </p> <a href="/561847-Prirucka-sprava-obsahu-webove-prezentace-formatovani-textu.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3908200-Zaklady-programovaciho-jazyka-html-autor-ing-jan-nozicka-sos-a-sou-ceska-lipa-vy_32_inovace_1133_zaklady-programovaciho-jazyka-html_pwp.html">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</a> </h3> <p> <img alt="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" title="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" class="news-block-img pull-right" src="/thumbs/24/3908200.jpg"> 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é </p> <a href="/3908200-Zaklady-programovaciho-jazyka-html-autor-ing-jan-nozicka-sos-a-sou-ceska-lipa-vy_32_inovace_1133_zaklady-programovaciho-jazyka-html_pwp.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/18364095-Internet-02-tvorba-statickych-www-stranek-za-pomoci-html-tagu.html">Internet 02 - Tvorba statických www stránek za pomoci HTML tagů</a> </h3> <p> <img alt="Internet 02 - Tvorba statických www stránek za pomoci HTML tagů" title="Internet 02 - Tvorba statických www stránek za pomoci HTML tagů" class="news-block-img pull-right" src="/thumbs/39/18364095.jpg"> Tagy Jak bylo uvedeno na předchozích stránkách, tag je vlastně značka, podle které se prohlížeč řídí. Tag určuje, jakým způsobem bude stránka upravena. Například - teď zarovnej text doprava, nyní zvětši </p> <a href="/18364095-Internet-02-tvorba-statickych-www-stranek-za-pomoci-html-tagu.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/356186-1-uvod-2-tvorba-internetovych-prezentaci-2-1-nastroje-pro-tvorbu-prezentace-stranka-1.html">1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1</a> </h3> <p> <img alt="1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1" title="1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1" class="news-block-img pull-right" src="/thumbs/19/356186.jpg"> 1 Úvod V tomto studijním textu se seznámíme s tvorbou webových stránek a prezentací a se základy syntaxe jazyka HTML. K tomu, abychom byli schopni vytvořit internetovou stránku, nemusíme používat žádný </p> <a href="/356186-1-uvod-2-tvorba-internetovych-prezentaci-2-1-nastroje-pro-tvorbu-prezentace-stranka-1.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/37775171-Nswi096-internet-uvod-do-html.html">NSWI096 - INTERNET. Úvod do HTML</a> </h3> <p> <img alt="NSWI096 - INTERNET. Úvod do HTML" title="NSWI096 - INTERNET. Úvod do HTML" class="news-block-img pull-right" src="/thumbs/55/37775171.jpg"> NSWI096 - INTERNET Úvod do HTML XHTML CO TO JE? XML extensible Markup Language Sada pravidel, jak kódovat dokumenty Podle těchto pravidel lze vytvořit nekonečně mnoho různých jazyků HTML HyperText Markup </p> <a href="/37775171-Nswi096-internet-uvod-do-html.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/18897052-Obrazky-tag-vyznam-parovy-vyskyt-img-obrazek-ne-img-video-ne-map-klikaci-mapa-area-oblast-v-klikaci-mape-ne.html">Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne</a> </h3> <p> <img alt="Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne" title="Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne" class="news-block-img pull-right" src="/thumbs/39/18897052.jpg"> Obrázky Tag Význam Párový Výskyt img obrázek ne img video ne map klikací mapa ano area oblast v klikací mapě ne Img Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený z jiného </p> <a href="/18897052-Obrazky-tag-vyznam-parovy-vyskyt-img-obrazek-ne-img-video-ne-map-klikaci-mapa-area-oblast-v-klikaci-mape-ne.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/739515-Zaklady-html-2-prednaska.html">Základy HTML (2. přednáška)</a> </h3> <p> <img alt="Základy HTML (2. přednáška)" title="Základy HTML (2. přednáška)" class="news-block-img pull-right" src="/thumbs/18/739515.jpg"> 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 </p> <a href="/739515-Zaklady-html-2-prednaska.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/561582-Stranka-se-da-otevrit-dvema-zpusoby.html">Stránka se dá otevřít dvěma způsoby</a> </h3> <p> <img alt="Stránka se dá otevřít dvěma způsoby" title="Stránka se dá otevřít dvěma způsoby" class="news-block-img pull-right" src="/thumbs/20/561582.jpg"> 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á </p> <a href="/561582-Stranka-se-da-otevrit-dvema-zpusoby.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/491592-1-zaciname-s-frontpage-2003-11.html">1. Začínáme s FrontPage 2003 11</a> </h3> <p> <img alt="1. Začínáme s FrontPage 2003 11" title="1. Začínáme s FrontPage 2003 11" class="news-block-img pull-right" src="/thumbs/20/491592.jpg"> Ú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 </p> <a href="/491592-1-zaciname-s-frontpage-2003-11.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1532955-Tvorba-webu-uvod-a-zakladni-principy-martin-urza.html">Tvorba webu. Úvod a základní principy. Martin Urza</a> </h3> <p> <img alt="Tvorba webu. Úvod a základní principy. Martin Urza" title="Tvorba webu. Úvod a základní principy. Martin Urza" class="news-block-img pull-right" src="/thumbs/22/1532955.jpg"> 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 </p> <a href="/1532955-Tvorba-webu-uvod-a-zakladni-principy-martin-urza.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3163166-Inovace-vyuky-prostrednictvim-sablon-pro-ss.html">Inovace výuky prostřednictvím šablon pro SŠ</a> </h3> <p> <img alt="Inovace výuky prostřednictvím šablon pro SŠ" title="Inovace výuky prostřednictvím šablon pro SŠ" class="news-block-img pull-right" src="/thumbs/24/3163166.jpg"> 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 </p> <a href="/3163166-Inovace-vyuky-prostrednictvim-sablon-pro-ss.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/595575-1-tvorba-www-stranek-pomoci-programu-microsoft-frontpage.html">1 Tvorba WWW stránek pomocí programu Microsoft FrontPage</a> </h3> <p> <img alt="1 Tvorba WWW stránek pomocí programu Microsoft FrontPage" title="1 Tvorba WWW stránek pomocí programu Microsoft FrontPage" class="news-block-img pull-right" src="/thumbs/20/595575.jpg"> 1 Tvorba WWW stránek pomocí programu Microsoft FrontPage Pomocí tohoto programu můžete vytvářet WWW stránky s minimální znalostí HTML kódu. Bohužel takto vytvořené stránky obsahují množství chyb a nejsou </p> <a href="/595575-1-tvorba-www-stranek-pomoci-programu-microsoft-frontpage.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/33493656-Fiktivni-firma-zaci-ziskaji-zakladni-informace-o-priprave-a-tvorbe-webovych-stranek-na-konci-prezentace-je-ukol-se-kterym-zaci-samostatne-pracuji.html">Fiktivní firma. Žáci získají základní informace o přípravě a tvorbě webových stránek. Na konci prezentace je úkol, se kterým žáci samostatně pracují.</a> </h3> <p> <img alt="Fiktivní firma. Žáci získají základní informace o přípravě a tvorbě webových stránek. Na konci prezentace je úkol, se kterým žáci samostatně pracují." title="Fiktivní firma. Žáci získají základní informace o přípravě a tvorbě webových stránek. Na konci prezentace je úkol, se kterým žáci samostatně pracují." class="news-block-img pull-right" src="/thumbs/54/33493656.jpg"> Název a registrační číslo projektu: CZ.1.07/1.5.00/34.0498 Číslo a název oblasti podpory: 1.5 Zlepšení podmínek pro vzdělávání na středních školách Realizace projektu: 02. 07. 2012 01. 07. 2014 Autor: </p> <a href="/33493656-Fiktivni-firma-zaci-ziskaji-zakladni-informace-o-priprave-a-tvorbe-webovych-stranek-na-konci-prezentace-je-ukol-se-kterym-zaci-samostatne-pracuji.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3163670-Bloky-tag-vyznam-parovy-p-odstavec-nepovinne-br-radkovy-zlom-ne-div-oddil-ano-center-vycentrovani-ano-h1-nadpis-1.html">Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.</a> </h3> <p> <img alt="Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1." title="Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1." class="news-block-img pull-right" src="/thumbs/24/3163670.jpg"> Bloky Tu se popisuji blokové tagy, což jsou všechny, za kterými se zalamuje řádka. Jde o různé oddíly textu a odstavce. Opakem blokových tagů jsou řádkové (in-line) tagy na značkování textu. Tag Význam </p> <a href="/3163670-Bloky-tag-vyznam-parovy-p-odstavec-nepovinne-br-radkovy-zlom-ne-div-oddil-ano-center-vycentrovani-ano-h1-nadpis-1.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1733748-X-html-css-a-jquery.html">(X)HTML, CSS a jquery</a> </h3> <p> <img alt="(X)HTML, CSS a jquery" title="(X)HTML, CSS a jquery" class="news-block-img pull-right" src="/thumbs/22/1733748.jpg"> 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 </p> <a href="/1733748-X-html-css-a-jquery.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2123813-Php-php-je-skriptovaci-programovaci-jazyk-dynamickych-internetovych-stranek-php-je-nezavisly-na-platforme.html">PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě</a> </h3> <p> <img alt="PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě" title="PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě" class="news-block-img pull-right" src="/thumbs/24/2123813.jpg"> 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 </p> <a href="/2123813-Php-php-je-skriptovaci-programovaci-jazyk-dynamickych-internetovych-stranek-php-je-nezavisly-na-platforme.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/561859-Mgr-stepan-stepanov-2013.html">Mgr. Stěpan Stěpanov, 2013</a> </h3> <p> <img alt="Mgr. Stěpan Stěpanov, 2013" title="Mgr. Stěpan Stěpanov, 2013" class="news-block-img pull-right" src="/thumbs/20/561859.jpg"> 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 </p> <a href="/561859-Mgr-stepan-stepanov-2013.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3816700-Jemny-uvod-do-html-co-je-html-znacka-web-nezna-text-formatovany-mezerami-a-konci-radku-ale-ja-potrebuji-psat-vice-mezer-a-urcovat-zalomeni-radku.html">Jemný úvod do HTML. Co je HTML značka? Web nezná text formátovaný mezerami a konci řádku! Ale já potřebuji psát více mezer a určovat zalomení řádku!</a> </h3> <p> <img alt="Jemný úvod do HTML. Co je HTML značka? Web nezná text formátovaný mezerami a konci řádku! Ale já potřebuji psát více mezer a určovat zalomení řádku!" title="Jemný úvod do HTML. Co je HTML značka? Web nezná text formátovaný mezerami a konci řádku! Ale já potřebuji psát více mezer a určovat zalomení řádku!" class="news-block-img pull-right" src="/thumbs/24/3816700.jpg"> Jemný úvod do HTML Redakční systém školního webu umožňuje formátovat text HTML značkami, tedy stejným způsobem, jakým se formátují webové stránky. Tento návod si dává za úkol seznámení se základními formátovacími </p> <a href="/3816700-Jemny-uvod-do-html-co-je-html-znacka-web-nezna-text-formatovany-mezerami-a-konci-radku-ale-ja-potrebuji-psat-vice-mezer-a-urcovat-zalomeni-radku.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/34720409-Uvod-do-tvorby-internetovych-aplikaci.html">Úvod do tvorby internetových aplikací</a> </h3> <p> <img alt="Úvod do tvorby internetových aplikací" title="Úvod do tvorby internetových aplikací" class="news-block-img pull-right" src="/thumbs/54/34720409.jpg"> CVT6 01a Úvod do tvorby internetových aplikací Osnova předmětu (X)HTML a tvorba webu pomocí přímého zápisu kódu Tvorba web designu a skládání stránek z kousků Skriptovací jazyky na webu Návrh software </p> <a href="/34720409-Uvod-do-tvorby-internetovych-aplikaci.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/8898103-Manual-k-editoru-tinymce.html">Manuál k editoru TinyMCE</a> </h3> <p> <img alt="Manuál k editoru TinyMCE" title="Manuál k editoru TinyMCE" class="news-block-img pull-right" src="/thumbs/26/8898103.jpg"> Manuál k editoru TinyMCE Popis ovládacích prvků UPOZORNĚNÍ: Některé tlačítka nemusí být k dispozici. Styl písma Dolní a horní index Zarovnání textu Může se aplikovat na označený text. B - tučné písmo, </p> <a href="/8898103-Manual-k-editoru-tinymce.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/23921591-Tvorba-webovych-stranek.html">Tvorba webových stránek</a> </h3> <p> <img alt="Tvorba webových stránek" title="Tvorba webových stránek" class="news-block-img pull-right" src="/thumbs/48/23921591.jpg"> Tvorba webových stránek Seznamy Seznam je skupina odstavců označených odrážkou. Seznam je: číslovaný je označen pořadovým číslem nebo písmenem, nečíslovaný je označen značkou (odrážkou) Seznam Celý blok </p> <a href="/23921591-Tvorba-webovych-stranek.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/28608580-Internet-a-site-role-pri-tvorbe-webovych-aplikaci-rozhodovaci-vrstvy-pri-tvorbe-webovych-aplikaci-povrch-kostra-struktura-obsah-strategie.html">INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie</a> </h3> <p> <img alt="INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie" title="INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie" class="news-block-img pull-right" src="/thumbs/51/28608580.jpg"> INTERNET A SÍTĚ Ing. Pavel Smutný, Ph.D. Kancelář: H305 Telefon: 3511 Email: pavel.smutny@vsb.cz Role při tvorbě webových aplikací 1996 2009 GIF HTML CSS CGI analytik, informační architekt, grafik, programátor </p> <a href="/28608580-Internet-a-site-role-pri-tvorbe-webovych-aplikaci-rozhodovaci-vrstvy-pri-tvorbe-webovych-aplikaci-povrch-kostra-struktura-obsah-strategie.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/596406-Google-apps-weby-1-verze-2012.html">Google Apps. weby 1. verze 2012</a> </h3> <p> <img alt="Google Apps. weby 1. verze 2012" title="Google Apps. weby 1. verze 2012" class="news-block-img pull-right" src="/thumbs/20/596406.jpg"> Google Apps weby verze 0 Obsah Obsah... Úvod... Zahájení práce... Nastavení webu... Úprava stránky... Popis prostředí... Rozložení stránky... Nadpis stránky... Úprava textu... Vložení odkazu... 8 Vložení </p> <a href="/596406-Google-apps-weby-1-verze-2012.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2177115-Inovace-vyuky-prostrednictvim-sablon-pro-ss.html">Inovace výuky prostřednictvím šablon pro SŠ</a> </h3> <p> <img alt="Inovace výuky prostřednictvím šablon pro SŠ" title="Inovace výuky prostřednictvím šablon pro SŠ" class="news-block-img pull-right" src="/thumbs/24/2177115.jpg"> 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 </p> <a href="/2177115-Inovace-vyuky-prostrednictvim-sablon-pro-ss.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1398093-Administrace-webu-postup-pri-praci.html">Administrace webu Postup při práci</a> </h3> <p> <img alt="Administrace webu Postup při práci" title="Administrace webu Postup při práci" class="news-block-img pull-right" src="/thumbs/22/1398093.jpg"> Administrace webu Postup při práci Obsah Úvod... 2 Hlavní menu... 3 a. Newslettery... 3 b. Administrátoři... 3 c. Editor stránek... 4 d. Kategorie... 4 e. Novinky... 5 f. Produkty... 5 g. Odhlásit se... </p> <a href="/1398093-Administrace-webu-postup-pri-praci.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/17650857-Manual-k-obsluze-redakcniho-systemu-wordpress.html">MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress</a> </h3> <p> <img alt="MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress" title="MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress" class="news-block-img pull-right" src="/thumbs/37/17650857.jpg"> MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress www.webdevel.cz Webdevel s.r.o. IČ 285 97 192 DIČ CZ28597192 W www.webdevel.cz E info@webdevel.cz Ostrava Obránců míru 863/7 703 00 Ostrava Vítkovice M 603 </p> <a href="/17650857-Manual-k-obsluze-redakcniho-systemu-wordpress.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/562507-Skola-gymnazium-brno-slovanske-namesti-7-iii-2-inovace-a-zkvalitneni-vyuky-prostrednictvim-ict-nazev-projektu-inovace-vyuky-na-gsn.html">Š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</a> </h3> <p> <img alt="Š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" title="Š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" class="news-block-img pull-right" src="/thumbs/20/562507.jpg"> Š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 </p> <a href="/562507-Skola-gymnazium-brno-slovanske-namesti-7-iii-2-inovace-a-zkvalitneni-vyuky-prostrednictvim-ict-nazev-projektu-inovace-vyuky-na-gsn.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/491635-Dokumentace-redakcniho-systemu-pinya.html">DOKUMENTACE REDAKČNÍHO SYSTÉMU PINYA</a> </h3> <p> <img alt="DOKUMENTACE REDAKČNÍHO SYSTÉMU PINYA" title="DOKUMENTACE REDAKČNÍHO SYSTÉMU PINYA" class="news-block-img pull-right" src="/thumbs/20/491635.jpg"> DOKUMENTACE REDAKČNÍHO SYSTÉMU PINYA Obsah Obsah... 4 Pinya CMS... 5 Přihlášení do systému... 6 Položky v menu administrace... 7 Uživatelé... 8 Správa uživatelů... 8 Nový uživatel... 9 Role... 10 Vytvoření </p> <a href="/491635-Dokumentace-redakcniho-systemu-pinya.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/35640291-Nswi096-internet-css-kaskadove-styly-mgr-petr-lasak.html">NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák</a> </h3> <p> <img alt="NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák" title="NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák" class="news-block-img pull-right" src="/thumbs/55/35640291.jpg"> NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE </p> <a href="/35640291-Nswi096-internet-css-kaskadove-styly-mgr-petr-lasak.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1049796-Uprava-stranek-obsah-1-popis-ikon-editoru-pouzitych-v-sablone-2-psani-a-formatovani-textu-pro-web-3-odkazy-4-tabulky-5-obrazky-6.html">Úprava stránek. Obsah 1. Popis ikon editoru použitých v šabloně 2. Psaní a formátování textu pro web 3. Odkazy 4. Tabulky 5. Obrázky 6.</a> </h3> <p> <img alt="Úprava stránek. Obsah 1. Popis ikon editoru použitých v šabloně 2. Psaní a formátování textu pro web 3. Odkazy 4. Tabulky 5. Obrázky 6." title="Úprava stránek. Obsah 1. Popis ikon editoru použitých v šabloně 2. Psaní a formátování textu pro web 3. Odkazy 4. Tabulky 5. Obrázky 6." class="news-block-img pull-right" src="/thumbs/20/1049796.jpg"> Úprava stránek Obsah 1. Popis ikon editoru použitých v šabloně 2. Psaní a formátování textu pro web 3. Odkazy 4. Tabulky 5. Obrázky 6. Média 1. Popis ikon editoru použitých v šabloně krátký popis detaily </p> <a href="/1049796-Uprava-stranek-obsah-1-popis-ikon-editoru-pouzitych-v-sablone-2-psani-a-formatovani-textu-pro-web-3-odkazy-4-tabulky-5-obrazky-6.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/4902660-Napoveda-k-redakcnimu-systemu-instantweb-cz.html">Nápověda k redakčnímu systému InstantWeb.cz</a> </h3> <p> <img alt="Nápověda k redakčnímu systému InstantWeb.cz" title="Nápověda k redakčnímu systému InstantWeb.cz" class="news-block-img pull-right" src="/thumbs/25/4902660.jpg"> Nápověda k redakčnímu systému InstantWeb.cz Přihlášení na adrese www.vasedomena.cz/admin naleznete přihlašovací pole se jménem a přiděleným heslem. Toto heslo je zpočátku přiděleno poskytovatelem programu, </p> <a href="/4902660-Napoveda-k-redakcnimu-systemu-instantweb-cz.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1541881-Osnova-kurzu-obsluha-pc-zakladni-znalosti-pilotniho-projektu-v-ramci-i-etapy-realizace-sipvz.html">Osnova kurzu OBSLUHA PC ZÁKLADNÍ ZNALOSTI. pilotního projektu v rámci I. Etapy realizace SIPVZ</a> </h3> <p> <img alt="Osnova kurzu OBSLUHA PC ZÁKLADNÍ ZNALOSTI. pilotního projektu v rámci I. Etapy realizace SIPVZ" title="Osnova kurzu OBSLUHA PC ZÁKLADNÍ ZNALOSTI. pilotního projektu v rámci I. Etapy realizace SIPVZ" class="news-block-img pull-right" src="/thumbs/22/1541881.jpg"> Střední průmyslová škola a Střední odborné učiliště, Trutnov, Školní 101, tel.: +420 499 813 071, fax: +420 499 814 729, e-mail: skola@spssoutu.cz, URL: http://www.spssoutu.cz Osnova kurzu OBSLUHA PC ZÁKLADNÍ </p> <a href="/1541881-Osnova-kurzu-obsluha-pc-zakladni-znalosti-pilotniho-projektu-v-ramci-i-etapy-realizace-sipvz.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2842561-Manual-jak-pouzivat-administraci-webovych-stranek-obsah-zaklad-2-upravy-polozky-3-upravy-textove-stranky-4.html">MANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4</a> </h3> <p> <img alt="MANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4" title="MANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4" class="news-block-img pull-right" src="/thumbs/24/2842561.jpg"> MANUÁL Jak používat administraci webových stránek Obsah ZÁKLAD... 2 PŘIHLÁŠENÍ DO ADMINISTRACE... 2 HLAVNÍ MENU... 2 VÝBĚR POLOŽKY... 2 ÚPRAVY POLOŽKY... 3 DETAIL POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... </p> <a href="/2842561-Manual-jak-pouzivat-administraci-webovych-stranek-obsah-zaklad-2-upravy-polozky-3-upravy-textove-stranky-4.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/10794972-Tvorba-webu-zakladni-html-tagy-martin-urza.html">Tvorba webu. Základní HTML tagy. Martin Urza</a> </h3> <p> <img alt="Tvorba webu. Základní HTML tagy. Martin Urza" title="Tvorba webu. Základní HTML tagy. Martin Urza" class="news-block-img pull-right" src="/thumbs/27/10794972.jpg"> Tvorba webu Základní HTML tagy Martin Urza Cvičení V průběhu přednášky budou postupně probírány jednotlivé základní elementy jazyka HTML a jejich atributy. Nemá smysl tyto věci probírat jen teoreticky </p> <a href="/10794972-Tvorba-webu-zakladni-html-tagy-martin-urza.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/595476-Tvorba-www-stranek-mojmir-volf-mojmir-volf-tul-cz-https-www-nti-tul-cz-wiki-wikiuser-mojmir-volf-485-353-675.html">Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675</a> </h3> <p> <img alt="Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675" title="Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675" class="news-block-img pull-right" src="/thumbs/20/595476.jpg"> 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 </p> <a href="/595476-Tvorba-www-stranek-mojmir-volf-mojmir-volf-tul-cz-https-www-nti-tul-cz-wiki-wikiuser-mojmir-volf-485-353-675.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3199579-Mgr-vlastislav-kucera-prednaska-c-1.html">Mgr. Vlastislav Kučera přednáška č. 1</a> </h3> <p> <img alt="Mgr. Vlastislav Kučera přednáška č. 1" title="Mgr. Vlastislav Kučera přednáška č. 1" class="news-block-img pull-right" src="/thumbs/24/3199579.jpg"> 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 </p> <a href="/3199579-Mgr-vlastislav-kucera-prednaska-c-1.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1398736-Zoom-driver-manual-k-redakcnimu-systemu-zoom-driver-created-by-virtual-zoom-s-r-o.html">zoom-driver Manuál k redakčnímu systému zoom-driver created by virtual-zoom s.r.o.</a> </h3> <p> <img alt="zoom-driver Manuál k redakčnímu systému zoom-driver created by virtual-zoom s.r.o." title="zoom-driver Manuál k redakčnímu systému zoom-driver created by virtual-zoom s.r.o." class="news-block-img pull-right" src="/thumbs/22/1398736.jpg"> zoom-driver Manuál k redakčnímu systému zoom-driver created by virtual-zoom s.r.o. 1 Obsah 1. Přihlášení 2. Výpis sekcí 3. Vytvoření nové sekce 4. Editace sekce 4.1. Výběr sekce k editaci 5. Editace hlavičky </p> <a href="/1398736-Zoom-driver-manual-k-redakcnimu-systemu-zoom-driver-created-by-virtual-zoom-s-r-o.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3706153-Ms-word-zaklady-uvod-do-ms-word-novy-dokument-vytvoreni-zastupce-programu-na-plose-otevreni-dokumentu-a-popis-prostredi-ukladani-souboru.html">MS Word základy. Úvod do MS Word. Nový dokument. Vytvoření zástupce programu na ploše. Otevření dokumentu a popis prostředí: Ukládání souboru:</a> </h3> <p> <img alt="MS Word základy. Úvod do MS Word. Nový dokument. Vytvoření zástupce programu na ploše. Otevření dokumentu a popis prostředí: Ukládání souboru:" title="MS Word základy. Úvod do MS Word. Nový dokument. Vytvoření zástupce programu na ploše. Otevření dokumentu a popis prostředí: Ukládání souboru:" class="news-block-img pull-right" src="/thumbs/24/3706153.jpg"> MS Word základy Úvod do MS Word. Vytvoření zástupce programu na ploše. Start Programy PK na Microsoft Word Odeslat Plocha Vytvořit zástupce Otevření dokumentu a popis prostředí: Spuštění programu Start </p> <a href="/3706153-Ms-word-zaklady-uvod-do-ms-word-novy-dokument-vytvoreni-zastupce-programu-na-plose-otevreni-dokumentu-a-popis-prostredi-ukladani-souboru.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2523093-Jak-se-orientovat-ve-svete-estofanu-verze-3-0-3.html">Jak se orientovat ve světě ESTOFANu verze 3.0.3?</a> </h3> <p> <img alt="Jak se orientovat ve světě ESTOFANu verze 3.0.3?" title="Jak se orientovat ve světě ESTOFANu verze 3.0.3?" class="news-block-img pull-right" src="/thumbs/24/2523093.jpg"> Jak se orientovat ve světě ESTOFANu verze 3.0.3? Systém ESTOFAN je určen pro administraci a editaci webových stránek, které jsou provozovány reklamní agenturou PANKREA. 1. Přihlášení Po objednávce a vytvoření </p> <a href="/2523093-Jak-se-orientovat-ve-svete-estofanu-verze-3-0-3.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/882567-Microsoft-word-prostredi-zakladni-editace-textu-mgr-jan-veverka-stredni-odborna-skola-socialni-evangelicka-akademie.html">Microsoft. Word. prostředí, základní editace textu. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie</a> </h3> <p> <img alt="Microsoft. Word. prostředí, základní editace textu. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie" title="Microsoft. Word. prostředí, základní editace textu. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie" class="news-block-img pull-right" src="/thumbs/18/882567.jpg"> Microsoft Word prostředí, základní editace textu Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie Microsoft Office balík aplikací používaných v kancelářské i jiné práci Word textový </p> <a href="/882567-Microsoft-word-prostredi-zakladni-editace-textu-mgr-jan-veverka-stredni-odborna-skola-socialni-evangelicka-akademie.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/354285-Tvorba-stranek-v-html-ve-wordu.html">Tvorba stránek v HTML ve Wordu</a> </h3> <p> <img alt="Tvorba stránek v HTML ve Wordu" title="Tvorba stránek v HTML ve Wordu" class="news-block-img pull-right" src="/thumbs/19/354285.jpg"> Tvorba stránek v HTML ve Wordu HTML (hypertext markup language hypertextový značkovací jazyk). Internetová stránka jako soubor s příponou htm nebo html. Je to skoro obyčejný textový soubor obohacený o </p> <a href="/354285-Tvorba-stranek-v-html-ve-wordu.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3163818-Hledejceny-mobi-obsah-mobilni-verze-e-shopu-duvody-instalace.html">HLEDEJCENY.mobi. Obsah. Mobilní verze e-shopu. Důvody instalace</a> </h3> <p> <img alt="HLEDEJCENY.mobi. Obsah. Mobilní verze e-shopu. Důvody instalace" title="HLEDEJCENY.mobi. Obsah. Mobilní verze e-shopu. Důvody instalace" class="news-block-img pull-right" src="/thumbs/24/3163818.jpg"> 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... </p> <a href="/3163818-Hledejceny-mobi-obsah-mobilni-verze-e-shopu-duvody-instalace.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/596065-Tvorba-webu-tabulkovy-layout-a-linky-martin-urza.html">Tvorba webu. Tabulkový layout a linky. Martin Urza</a> </h3> <p> <img alt="Tvorba webu. Tabulkový layout a linky. Martin Urza" title="Tvorba webu. Tabulkový layout a linky. Martin Urza" class="news-block-img pull-right" src="/thumbs/20/596065.jpg"> Tvorba webu Tabulkový layout a linky Martin Urza Layout (rozvržení) stránky Layout HTML dokumentu znamená rozložení prvků na stránce. S anglickým výrazem (layout) se nejspíš setkáte častěji než s českými </p> <a href="/596065-Tvorba-webu-tabulkovy-layout-a-linky-martin-urza.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/4924968-Webove-stranky-1-publikovani-na-internetu-datum-vytvoreni-4-9-2012-str-ank-y-vytvoril-petr-lerch-www-isspolygr-cz.html">Webové stránky. 1. Publikování na internetu. Datum vytvoření: 4. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz</a> </h3> <p> <img alt="Webové stránky. 1. Publikování na internetu. Datum vytvoření: 4. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz" title="Webové stránky. 1. Publikování na internetu. Datum vytvoření: 4. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz" class="news-block-img pull-right" src="/thumbs/25/4924968.jpg"> Webové stránky 1. Publikování na internetu Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 4. 9. 2012 Webové Strana: 1/6 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická </p> <a href="/4924968-Webove-stranky-1-publikovani-na-internetu-datum-vytvoreni-4-9-2012-str-ank-y-vytvoril-petr-lerch-www-isspolygr-cz.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1367354-Prehled-zakladnich-html-tagu.html">Přehled základních html tagů</a> </h3> <p> <img alt="Přehled základních html tagů" title="Přehled základních html tagů" class="news-block-img pull-right" src="/thumbs/22/1367354.jpg"> 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... </p> <a href="/1367354-Prehled-zakladnich-html-tagu.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/492688-Registracni-cislo-projektu-skola-adresa.html">Registrační číslo projektu: Škola adresa:</a> </h3> <p> <img alt="Registrační číslo projektu: Škola adresa:" title="Registrační číslo projektu: Škola adresa:" class="news-block-img pull-right" src="/thumbs/20/492688.jpg"> Registrační číslo projektu: CZ.1.07/1.4.00/21.3712 Škola adresa: Základní škola T. G. Masaryka Ivančice, Na Brněnce 1, okres Brno-venkov, příspěvková organizace Na Brněnce 1, Ivančice, okres Brno-venkov </p> <a href="/492688-Registracni-cislo-projektu-skola-adresa.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/11018426-Ie1-jazyk-html-a-kaskadove-styly.html">IE1 jazyk HTML a kaskádové styly</a> </h3> <p> <img alt="IE1 jazyk HTML a kaskádové styly" title="IE1 jazyk HTML a kaskádové styly" class="news-block-img pull-right" src="/thumbs/27/11018426.jpg"> 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. </p> <a href="/11018426-Ie1-jazyk-html-a-kaskadove-styly.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/6023545-Ie1-jazyk-html-a-kaskadove-styly.html">IE1 jazyk HTML a kaskádové styly</a> </h3> <p> <img alt="IE1 jazyk HTML a kaskádové styly" title="IE1 jazyk HTML a kaskádové styly" class="news-block-img pull-right" src="/thumbs/25/6023545.jpg"> 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. </p> <a href="/6023545-Ie1-jazyk-html-a-kaskadove-styly.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/595492-Tvorba-webovych-stranek.html">Tvorba webových stránek</a> </h3> <p> <img alt="Tvorba webových stránek" title="Tvorba webových stránek" class="news-block-img pull-right" src="/thumbs/20/595492.jpg"> 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 </p> <a href="/595492-Tvorba-webovych-stranek.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/18002456-Obsah-strucna-historie-world-wide-webu-7.html">Obsah. Stručná historie World Wide Webu 7</a> </h3> <p> <img alt="Obsah. Stručná historie World Wide Webu 7" title="Obsah. Stručná historie World Wide Webu 7" class="news-block-img pull-right" src="/thumbs/38/18002456.jpg"> 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 </p> <a href="/18002456-Obsah-strucna-historie-world-wide-webu-7.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/4674414-Napoveda-k-aplikaci-ea-script-engine.html">Nápověda k aplikaci EA Script Engine</a> </h3> <p> <img alt="Nápověda k aplikaci EA Script Engine" title="Nápověda k aplikaci EA Script Engine" class="news-block-img pull-right" src="/thumbs/25/4674414.jpg"> Nápověda k aplikaci EA Script Engine Object Consulting s.r.o. 2006 Obsah Nápověda k aplikaci EA Script Engine...1 1. Co je EA Script Engine...2 2. Důležité upozornění pro uživatele aplikace EA Script Engine...3 </p> <a href="/4674414-Napoveda-k-aplikaci-ea-script-engine.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/595525-Mgr-vlastislav-kucera-prednaska-c-1.html">Mgr. Vlastislav Kučera přednáška č. 1</a> </h3> <p> <img alt="Mgr. Vlastislav Kučera přednáška č. 1" title="Mgr. Vlastislav Kučera přednáška č. 1" class="news-block-img pull-right" src="/thumbs/20/595525.jpg"> 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, </p> <a href="/595525-Mgr-vlastislav-kucera-prednaska-c-1.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/5652545-Vyukovy-material-vytvoren-v-ramci-projektu-eu-penize-skolam-inovace-vyuky-registracni-cislo-cz-1-07-1-5-00-34-0585.html">Výukový materiál vytvořen v rámci projektu EU peníze školám. "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585</a> </h3> <p> <img alt="Výukový materiál vytvořen v rámci projektu EU peníze školám. Inovace výuky registrační číslo CZ.1.07/1.5.00/34.0585" title="Výukový materiál vytvořen v rámci projektu EU peníze školám. Inovace výuky registrační číslo CZ.1.07/1.5.00/34.0585" class="news-block-img pull-right" src="/thumbs/25/5652545.jpg"> Výukový materiál vytvořen v rámci projektu EU peníze školám "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585 Škola: Adresa: Autor: Gymnázium, Jablonec nad Nisou, U Balvanu 16, příspěvková organizace </p> <a href="/5652545-Vyukovy-material-vytvoren-v-ramci-projektu-eu-penize-skolam-inovace-vyuky-registracni-cislo-cz-1-07-1-5-00-34-0585.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1810853-Tento-projekt-je-spolufinancovan-evropskym-socialnim-fondem-a-statnim-rozpoctem-ceske-republiky-portal-kudy-kam-manual-pro-editaci-zs-verze-1.html">Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. PORTÁL KUDY KAM. Manuál pro editaci ŽS. Verze 1.</a> </h3> <p> <img alt="Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. PORTÁL KUDY KAM. Manuál pro editaci ŽS. Verze 1." title="Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. PORTÁL KUDY KAM. Manuál pro editaci ŽS. Verze 1." class="news-block-img pull-right" src="/thumbs/23/1810853.jpg"> Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. PORTÁL KUDY KAM Manuál pro editaci ŽS Verze 1.0 2012 AutoCont CZ a.s. Veškerá práva vyhrazena. Tento dokument </p> <a href="/1810853-Tento-projekt-je-spolufinancovan-evropskym-socialnim-fondem-a-statnim-rozpoctem-ceske-republiky-portal-kudy-kam-manual-pro-editaci-zs-verze-1.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3199780-Obsah-uvodem-11-komu-je-kniha-urcena-11-forma-vykladu-12-cviceni-a-priklady-ke-knize-12.html">Obsah. Úvodem 11 Komu je kniha určena 11 Forma výkladu 12 Cvičení a příklady ke knize 12</a> </h3> <p> <img alt="Obsah. Úvodem 11 Komu je kniha určena 11 Forma výkladu 12 Cvičení a příklady ke knize 12" title="Obsah. Úvodem 11 Komu je kniha určena 11 Forma výkladu 12 Cvičení a příklady ke knize 12" class="news-block-img pull-right" src="/thumbs/24/3199780.jpg"> Obsah Úvodem 11 Komu je kniha určena 11 Forma výkladu 12 Cvičení a příklady ke knize 12 Kapitola 1 Než se pustíme do práce 15 Internet, web, WWW co to vlastně je? 15 Jak se tvoří internetové stránky 16 </p> <a href="/3199780-Obsah-uvodem-11-komu-je-kniha-urcena-11-forma-vykladu-12-cviceni-a-priklady-ke-knize-12.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/9514045-Webove-stranky-skoly-a-redakcni-system.html">WEBOVÉ STRÁNKY ŠKOLY A REDAKČNÍ SYSTÉM</a> </h3> <p> <img alt="WEBOVÉ STRÁNKY ŠKOLY A REDAKČNÍ SYSTÉM" title="WEBOVÉ STRÁNKY ŠKOLY A REDAKČNÍ SYSTÉM" class="news-block-img pull-right" src="/thumbs/27/9514045.jpg"> WEBOVÉ STRÁNKY ŠKOLY A REDAKČNÍ SYSTÉM WordPress manuál A3 WEBOVÉ STRÁNKY ŠKOLY A REDAKČNÍ SYSTÉM WordPress manuál Ing. Karel Rejthar 16. 6. 2015-1 - OBSAH WordPress manuál...................................... </p> <a href="/9514045-Webove-stranky-skoly-a-redakcni-system.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/23754939-Formatovani-obsahu-adminweb.html">Formátování obsahu adminweb</a> </h3> <p> <img alt="Formátování obsahu adminweb" title="Formátování obsahu adminweb" class="news-block-img pull-right" src="/thumbs/47/23754939.jpg"> Formátování obsahu adminweb verze 24032015 1 Obsah 1. Možnosti formátování textu...3 2. Formátování v editoru...4 3. Tabulka pro pozicování obsahu...5 4. Tabulka se stylem... 6 5. Šablony...7 6. Obrázky </p> <a href="/23754939-Formatovani-obsahu-adminweb.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/8549999-Tnpw1-cviceni-3-6-10-2015-aneta-bartuskova-uhk-cz.html">TNPW1 Cvičení 3 6.10.2015 aneta.bartuskova@uhk.cz</a> </h3> <p> <img alt="TNPW1 Cvičení 3 6.10.2015 aneta.bartuskova@uhk.cz" title="TNPW1 Cvičení 3 6.10.2015 aneta.bartuskova@uhk.cz" class="news-block-img pull-right" src="/thumbs/26/8549999.jpg"> 6.10.2015 aneta.bartuskova@uhk.cz Struktura stránky 6.10.2015 aneta.bartuskova@uhk.cz Struktura stránky Sémantická - pomocí HTML Stránka je chápána jako skupina oblastí, každá oblast má svůj účel (menu, </p> <a href="/8549999-Tnpw1-cviceni-3-6-10-2015-aneta-bartuskova-uhk-cz.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/7938480-Seo-optimalizace-pro-vyhledavace-jednoduse.html">SEO OPTIMALIZACE PRO VYHLEDÁVAČE JEDNODUŠE</a> </h3> <p> <img alt="SEO OPTIMALIZACE PRO VYHLEDÁVAČE JEDNODUŠE" title="SEO OPTIMALIZACE PRO VYHLEDÁVAČE JEDNODUŠE" class="news-block-img pull-right" src="/thumbs/26/7938480.jpg"> Středoškolská technika 2011 Setkání a prezentace prací středoškolských studentů na ČVUT SEO OPTIMALIZACE PRO VYHLEDÁVAČE JEDNODUŠE Adama Kořenek Úvod Střední průmyslová škola elektrotechnická V Úžlabině </p> <a href="/7938480-Seo-optimalizace-pro-vyhledavace-jednoduse.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/5417000-Obsah-kapitola-1-nekolik-slov-o-wordu-2007-9.html">Obsah KAPITOLA 1 Několik slov o Wordu 2007 9</a> </h3> <p> <img alt="Obsah KAPITOLA 1 Několik slov o Wordu 2007 9" title="Obsah KAPITOLA 1 Několik slov o Wordu 2007 9" class="news-block-img pull-right" src="/thumbs/25/5417000.jpg"> KAPITOLA 1 Několik slov o Wordu 2007 9 Pás karet 10 Další možnosti ovládání Wordu 12 Nastavení Wordu 13 Ovládání Wordu 2007 klávesnicí 14 KAPITOLA 2 Základní operace 17 Základní nastavení 17 Rozdělení </p> <a href="/5417000-Obsah-kapitola-1-nekolik-slov-o-wordu-2007-9.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1398557-Skola-gymnazium-brno-slovanske-namesti-7-iii-2-inovace-a-zkvalitneni-vyuky-prostrednictvim-ict-nazev-projektu-inovace-vyuky-na-gsn.html">Š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</a> </h3> <p> <img alt="Š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" title="Š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" class="news-block-img pull-right" src="/thumbs/22/1398557.jpg"> Š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 </p> <a href="/1398557-Skola-gymnazium-brno-slovanske-namesti-7-iii-2-inovace-a-zkvalitneni-vyuky-prostrednictvim-ict-nazev-projektu-inovace-vyuky-na-gsn.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/8042080-Informace-k-e-learningu.html">Informace k e-learningu</a> </h3> <p> <img alt="Informace k e-learningu" title="Informace k e-learningu" class="news-block-img pull-right" src="/thumbs/26/8042080.jpg"> Informace k e-learningu Příprava na testy bude probíhat samostatně formou e-learningových školení přístupných způsobem popsaným níže. Zkušební testy, pomocí kterých se budete připravovat na závěrečný test, </p> <a href="/8042080-Informace-k-e-learningu.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/24081532-1-otevrete-dokument-ktery-chcete-cist-2-na-karte-zobrazeni-kliknete-ve-skupine-zobrazeni-dokumentu-na-polozku-cteni-na-cele-obrazovce.html">1. Otevřete dokument, který chcete číst. 2. Na kartě Zobrazení klikněte ve skupině Zobrazení dokumentů na položku Čtení na celé obrazovce.</a> </h3> <p> <img alt="1. Otevřete dokument, který chcete číst. 2. Na kartě Zobrazení klikněte ve skupině Zobrazení dokumentů na položku Čtení na celé obrazovce." title="1. Otevřete dokument, který chcete číst. 2. Na kartě Zobrazení klikněte ve skupině Zobrazení dokumentů na položku Čtení na celé obrazovce." class="news-block-img pull-right" src="/thumbs/48/24081532.jpg"> 2. lekce Čtení dokumentů 1. Otevřete dokument, který chcete číst. 2. Na kartě Zobrazení klikněte ve skupině Zobrazení dokumentů na položku Čtení na celé obrazovce. 3. Přecházení mezi stránkami v dokumentu: </p> <a href="/24081532-1-otevrete-dokument-ktery-chcete-cist-2-na-karte-zobrazeni-kliknete-ve-skupine-zobrazeni-dokumentu-na-polozku-cteni-na-cele-obrazovce.html" class="news-block-btn"> Více <i class="m-icon-swapright m-icon-black"></i> </a> </div> </div> <!-- END RIGHT SIDEBAR --> </div> </div> </div> <!-- END CONTENT --> </div> <!-- END SIDEBAR & CONTENT --> </div> </div> <!-- BEGIN FOOTER --> <div class="footer"> <div class="container"> <div class="row"> <!-- BEGIN COPYRIGHT --> <div class="col-md-10 col-sm-10 padding-top-10"> 2017 © DocPlayer.cz <a href="/support/privacy-policy/">Ochrana osobních údajů</a> | <a href="/support/terms-of-service/">Podmínky obsluhování</a> | <a href="/support/feedback/">Kontaktní formulář</a> </div> <!-- END COPYRIGHT --> <!-- BEGIN PAYMENTS --> <div class="col-md-6 col-sm-6"> </div> <!-- END PAYMENTS --> </div> </div> </div> <!-- END FOOTER --> <!--[if lt IE 9]> <script src="/static/theme/global/plugins/respond.min.js"></script> <![endif]--> <script src="/static/js/81dc/total.js" type="text/javascript"></script> <div style="display: none;"> <script> var page_data = {"domain_id":24,"design_id":0,"page_id":0}; (function(){ var img = new Image(); var pixel_image_src = '/pix/'+Math.random()+'/report/pixel.gif?type=pageview&domain_id=24&page_id=0&design_id=0&l='+encodeURIComponent(navigator.language)+'&p='+encodeURIComponent(navigator.platform)+'&url='+encodeURIComponent(document.location); document.write('<img src="'+pixel_image_src+'"> '); }()); </script> </div> </body> </html>