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

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

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

Více

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

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

Více

HTML - Úvod. Zpracoval: Petr Lasák

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

Více

Tvorba fotogalerie v HTML str.1

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

Více

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.

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. Ú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)

Více

Základy HTML. Obecná syntaxe HTML. Struktura HTML

Základy HTML. Obecná syntaxe HTML. Struktura HTML 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ů

Více

22. Tvorba webových stránek

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

Více

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

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

Více

Základy HTML. Autor: Palito

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

Více

Základy HTML. Obecná syntaxe HTML. Struktura HTML

Základy HTML. Obecná syntaxe HTML. Struktura HTML 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ů

Více

Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014

Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014 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

Více

Mgr. Vlastislav Kučera lekce č. 2

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

Více

Internetové technologie, cvičení č. 5

Internetové technologie, cvičení č. 5 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

Více

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

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

Více

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

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

Více

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

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

Více

Tvorba internetových stránek

Tvorba internetových stránek 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?

Více

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

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

Více

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

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

Více

Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:

Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku: 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

Více

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

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

Více

Vývoj Internetových Aplikací

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

Více

Redakční systém Joomla. Prokop Zelený

Redakční systém Joomla. Prokop Zelený 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

Více

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

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

Více

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

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

Více

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

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 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

Více

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

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

Více

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

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

Více

PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu

PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu 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í

Více

Internet 02 - Tvorba statických www stránek za pomoci HTML tagů

Internet 02 - Tvorba statických www stránek za pomoci HTML tagů 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

Více

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

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

Více

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

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

Více

Mgr. Stěpan Stěpanov, 2013

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

Více

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

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

Více

1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1

1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1 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ý

Více

1 Tvorba WWW stránek pomocí programu Microsoft FrontPage

1 Tvorba WWW stránek pomocí programu Microsoft FrontPage 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

Více

Google Apps. weby 1. verze 2012

Google Apps. weby 1. verze 2012 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í

Více

(X)HTML, CSS a jquery

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

Více

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

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

Více

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

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

Více

Administrace webu Postup při práci

Administrace webu Postup při práci 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...

Více

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1. 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

Více

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

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

Více

MANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4

MANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4 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...

Více

Manuál k editoru TinyMCE

Manuál k editoru TinyMCE 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,

Více

MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress

MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress 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

Více

Osnova kurzu OBSLUHA PC ZÁKLADNÍ ZNALOSTI. pilotního projektu v rámci I. Etapy realizace SIPVZ

Osnova kurzu OBSLUHA PC ZÁKLADNÍ ZNALOSTI. pilotního projektu v rámci I. Etapy realizace SIPVZ 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Í

Více

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

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

Více

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:

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: 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

Více

Tvorba webu. Základní HTML tagy. Martin Urza

Tvorba webu. Základní HTML tagy. Martin Urza 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

Více

Ú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.

Ú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. Ú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

Více

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!

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! 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

Více

Microsoft. Word. prostředí, základní editace textu. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie

Microsoft. Word. prostředí, základní editace textu. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie 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ý

Více

DOKUMENTACE REDAKČNÍHO SYSTÉMU PINYA

DOKUMENTACE REDAKČNÍHO SYSTÉMU PINYA 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í

Více

Jak se orientovat ve světě ESTOFANu verze 3.0.3?

Jak se orientovat ve světě ESTOFANu verze 3.0.3? 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í

Více

Tvorba webových stránek

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

Více

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

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

Více

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

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

Více

Nápověda k redakčnímu systému InstantWeb.cz

Nápověda k redakčnímu systému InstantWeb.cz 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,

Více

Webové stránky. 1. Publikování na internetu. Datum vytvoření: 4. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz

Webové stránky. 1. Publikování na internetu. Datum vytvoření: 4. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz 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á

Více

IE1 jazyk HTML a kaskádové styly

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

Více

Registrační číslo projektu: Škola adresa:

Registrační číslo projektu: Škola adresa: 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

Více

IE1 jazyk HTML a kaskádové styly

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

Více

Přehled základních html tagů

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

Více

Tvorba webu. Tabulkový layout a linky. Martin Urza

Tvorba webu. Tabulkový layout a linky. Martin Urza 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

Více

Tvorba stránek v HTML ve Wordu

Tvorba stránek v HTML ve Wordu 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

Více

Reliance 3 design OBSAH

Reliance 3 design OBSAH Reliance 3 design Obsah OBSAH 1. První kroky... 3 1.1 Úvod... 3 1.2 Založení nového projektu... 4 1.3 Tvorba projektu... 6 1.3.1 Správce stanic definice stanic, proměnných, stavových hlášení a komunikačních

Více

ŠKODA Portal Platform

ŠKODA Portal Platform ŠKODA Portal Platform Struktura LESS stylů Jan Obrátil Účel dokumentu Účelem tohoto dokumentu je vysvětlit strukturu stylů v Portálové Platformě tak, aby bylo možné je správně použít a rozšířit je pro

Více

Obsah KAPITOLA 1 Několik slov o Wordu 2007 9

Obsah KAPITOLA 1 Několik slov o Wordu 2007 9 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í

Více

Obsahy kurzů MS Office

Obsahy kurzů MS Office Obsahy kurzů MS Office V současné době probíhají kurzy MS Office 2010 s následující osnovou: 1. Základy práce na PC, MS Office - praktické užití Kurz je určen pro všechny, kteří mají s prací na PC minimální

Více

zoom-driver Manuál k redakčnímu systému zoom-driver created by virtual-zoom s.r.o.

zoom-driver Manuál k redakčnímu systému zoom-driver created by virtual-zoom s.r.o. 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

Více

KAPITOLA 3 - ZPRACOVÁNÍ TEXTU

KAPITOLA 3 - ZPRACOVÁNÍ TEXTU KAPITOLA 3 - ZPRACOVÁNÍ TEXTU KLÍČOVÉ POJMY textové editory formát textu tabulka grafické objekty odrážky a číslování odstavec CÍLE KAPITOLY Pracovat s textovými dokumenty a ukládat je v souborech různého

Více

Formátování pomocí stylů

Formátování pomocí stylů Styly a šablony Styly, šablony a témata Formátování dokumentu pomocí standardních nástrojů (přímé formátování) (Podokno úloh Zobrazit formátování): textu jsou přiřazeny parametry (font, velikost, barva,

Více

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

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 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

Více

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

TNPW1 Cvičení 3 6.10.2015 aneta.bartuskova@uhk.cz 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,

Více

Obsah. Úvodem 11 Komu je kniha určena 11 Forma výkladu 12 Cvičení a příklady ke knize 12

Obsah. Úvodem 11 Komu je kniha určena 11 Forma výkladu 12 Cvičení a příklady ke knize 12 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

Více

Elektronické publikování - prezentace. 23. dubna 2009 VŠB - TUO. Beamer - grafické zpracování prezentace. Rostislav Šuta, sut017.

Elektronické publikování - prezentace. 23. dubna 2009 VŠB - TUO. Beamer - grafické zpracování prezentace. Rostislav Šuta, sut017. Beamer - Elektronické publikování - VŠB - TUO 23. dubna 2009 Obsah 1 2 3 4 5 6 Obsah 1 2 3 4 5 6 schémata barvy písma změna fontu vnitřní schémata vnější schémata Obsah Prezentace bez navigace e stromovou

Více

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.

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. 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

Více

WEBOVÉ STRÁNKY ŠKOLY A REDAKČNÍ SYSTÉM

WEBOVÉ STRÁNKY ŠKOLY A REDAKČNÍ SYSTÉM 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......................................

Více

Nápověda k aplikaci EA Script Engine

Nápověda k aplikaci EA Script Engine 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

Více

INTERSTENO 2013Ghent Mistrovstvísvta v profesionálním word processingu

INTERSTENO 2013Ghent Mistrovstvísvta v profesionálním word processingu POUŽITÝ OPERAČNÍ SYSTÉM POUŽITÝ SOFTWARE PRO WORD PROCESSING SOUTĚŽNÍ ID A 1 Instrukce pro účastníky Otevřete dokument TRANSPORT.DOC, ihned uložte jako TRANSPORTXXX.DOCneboDOCX,kde XXX je Vašesoutěžní

Více

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

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

Více

Obsah. Stručná historie World Wide Webu 7

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

Více

ZEBU webdesign s.r.o. Technologická 372/2 +420 597 305 937 70800 Ostrava Pustkovec info@zebu.cz

ZEBU webdesign s.r.o. Technologická 372/2 +420 597 305 937 70800 Ostrava Pustkovec info@zebu.cz DIČ: CZ24704091 Strana: 1 / 18 Obsah 1. Úvod... 3 2. Přihlášení... 4 2.1. Zapomenuté heslo... 4 3. Redakční systém... 5 3.1. Sekce Stránky... 5 3.1.1. Přidání přesměrování... 6 3.1.2. Přidání překladu...

Více

K 2 - Základy zpracování textu

K 2 - Základy zpracování textu Radek Maca Makovského 436 Nové Město na Moravě 592 31 tel. 0776 / 274 152 e-mail: rama@inforama.cz http://www.inforama.cz K 2 - Základy zpracování textu Mgr. Radek Maca Word I 1 slide ZÁKLADNÍ POJMY PRVKY

Více

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

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

Více

Microsoft Office Word 2003

Microsoft Office Word 2003 Microsoft Office Word 2003 Školení učitelů na základní škole Meteorologická Maturitní projekt SSPŠ 2013/2013 Vojtěch Dušek 4.B 1 Obsah 1 Obsah... 2 2 Seznam obrázků... 3 3 Základy programu PowerPoint...

Více

SEO OPTIMALIZACE PRO VYHLEDÁVAČE JEDNODUŠE

SEO OPTIMALIZACE PRO VYHLEDÁVAČE JEDNODUŠE 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ě

Více

Obsah. Rozdíly mezi systémy Joomla 1.0 a 1.5...15 Systém Joomla coby jednička online komunity...16 Shrnutí...16

Obsah. Rozdíly mezi systémy Joomla 1.0 a 1.5...15 Systém Joomla coby jednička online komunity...16 Shrnutí...16 Obsah Kapitola 1 Seznámení se systémem Joomla!................................. 9 Přehled systémů pro správu obsahu....................................................10 Použití systému pro správu obsahu.....................................................11

Více

Olga Rudikova 2. ročník APIN

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

Více

WEBOVÉ STRÁNKY www.krestanskevanoce.cz

WEBOVÉ STRÁNKY www.krestanskevanoce.cz WEBOVÉ STRÁNKY www.krestanskevanoce.cz Domovská stránka Křesťanských Vánoc je založena na databázi, která vedle běžných funkcí redakčního systému internetové prezentace umožňuje též uložit údaje o jednotlivých

Více

Informace k e-learningu

Informace k e-learningu 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,

Více

Nová struktura souborů a složek

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

Více

POKROČILÉ ZPRACOVÁNÍ TEXTU

POKROČILÉ ZPRACOVÁNÍ TEXTU POKROČILÉ ZPRACOVÁNÍ TEXTU Hana Rohrová, Roman Rohr Cíle kurzu Po ukončení tohoto kurzu budete schopni: používat pokročilé formátování textu, odstavců, sloupců a tabulek, převádět text na tabulku a naopak,

Více

Manuál Redakční systém

Manuál Redakční systém Manuál Redakční systém SA.07 Obsah Úvod... ) Struktura webu... ) Aktuality... 0 ) Kalendář akcí... ) Soubory ke stažení... 6 5) Fotogalerie... 8 Redakční systém umožňuje kompletní správu vašich internetových

Více