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=" target="_blank">odkaz na Google</a> <br /> <a href=" 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 ( 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

Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML

Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML Čtvrtek 11. dubna 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

Více

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

Zá klady HTML. Tag HTML <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

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

Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka

Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka 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

Více

Úvod do tvorby internetových stránek v jazyce HTML

Úvod do tvorby internetových stránek v jazyce HTML Úvod do tvorby internetových stránek v jazyce HTML Dostupné z Metodického portálu www.rvp.cz, ISSN: 1802-4785, financovaného z ESF a státního rozpočtu ČR. Provozováno Výzkumným ústavem pedagogickým v Praze.

Více

Úvod do jazyka HTML (Hypertext Markup Language)

Úvod do jazyka HTML (Hypertext Markup Language) Úvod do jazyka HTML (Hypertext Markup Language) WWW zdroje: http://www.jakpsatweb.cz/ Jak psát web, návod na HTML stránky (Dušan Yuhů Janovský) http://www.kit.vslib.cz/~satrapa/www/kurs/ Kurs vytváření

Více

<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura

<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura mv Všechny html tagy jsou uzavřeny do závorek . Většina tagů je párových, tzn. ke každému tagu existuje druhá značka s lomítkem před tagem. (, ) HTML tagy by měly udávat pouze logické členění

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

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.

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

22. Tvorba webových stránek

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

Více

Mgr. Vlastislav Kučera Struktura stránky, hlavička,

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

Více

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela 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

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

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

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML Název školy: Základní škola a Mateřská škola Žalany Číslo projektu: CZ. 1.07/1.4.00/21.3210 Téma sady: Informatika pro sedmý až osmý ročník Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML Vyučovací

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

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 informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela 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

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

Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant

Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant Základy informatiky 03 HTML, tvorba webových stránek Kačmařík/Szturcová/Děrgel/Rapant Obsah přednášky princip webového dokumentu, ukázka nástroje pro tvorbu pravidla tvorby HTML, značky kostra HTML dokumentu

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

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

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

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

(X)HTML-TAGY. VOŠ a SŠT Česká Třebová

(X)HTML-TAGY. VOŠ a SŠT Česká Třebová (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

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

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

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

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

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

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

MODERNÍ WEB SNADNO A RYCHLE

MODERNÍ WEB SNADNO A RYCHLE 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

Více

Úvod do aplikací internetu a přehled možností při tvorbě webu

Úvod do aplikací internetu a přehled možností při tvorbě webu 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

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

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

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

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

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

Manuál pro obsluhu Webových stránek

Manuál pro obsluhu Webových stránek ResMaster Systems s.r.o. Truhlářská 1119/20, 110 00 Praha 1 Manuál pro obsluhu Webových stránek (Prosinec 2018) Jana Vítová, +420 225 388 130 2018 Obsah Úvod Webové stránky... 3 Slovník pojmů... 3 URL

Více

NSWI096 - INTERNET. Úvod do HTML

NSWI096 - INTERNET. Úvod do HTML 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

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

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

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

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

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

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

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

(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

Úvod do tvorby internetových aplikací

Úvod do tvorby internetových aplikací 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

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

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

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

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

Š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

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

INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie

INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie 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

Více

9. Tagy tvorba www stránky pomocí tagů

9. Tagy tvorba www stránky pomocí tagů 9. Tagy tvorba www stránky pomocí tagů Tagy Jak bylo uvedeno v předchozím odstavci, 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ď

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

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

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

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

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

Tabulky. Přehled tagů z oblasti tabulek. Tag Význam Párový Výskyt. tr řádek tabulky nepovinně <table>, <tbody>, <thead>, <tfoot>

Tabulky. Přehled tagů z oblasti tabulek. Tag Význam Párový Výskyt. tr řádek tabulky nepovinně <table>, <tbody>, <thead>, <tfoot> Tabulky Přehled tagů z oblasti tabulek Tag Význam Párový Výskyt table tabulka ano tr řádek tabulky nepovinně , , , td buňka tabulky nepovinně th hlavičková buňka tabulky

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

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

Internet 1 vývoj, html, css

Internet 1 vývoj, html, css Internet 1 vývoj, html, css Martin Hejtmánek hejtmmar@fjfi.cvut.cz http://kmlinux.fjfi.cvut.cz/ hejtmmar Počítačový kurs Univerzity třetího věku na FJFI ČVUT Znalci 19. března 2009 Dnešní přednáška 1 Historie

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

Ú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

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

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

Tvorba webových stránek

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

Více

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE

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

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

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

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

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

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

Osnova. Koncept a použití prezentací. Seznámení s pracovním prostředím MS Word Režimy zobrazení. Užitečná nastavení. Základní práce s dokumenty

Osnova. Koncept a použití prezentací. Seznámení s pracovním prostředím MS Word Režimy zobrazení. Užitečná nastavení. Základní práce s dokumenty PowerPoint 2007 Osnova Koncept a použití prezentací Seznámení s pracovním prostředím MS Word 2007 Režimy zobrazení Užitečná nastavení Základní práce s dokumenty Práce s textem a objekty Doporučení, jak

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

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

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

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

Použití prezentací. K heslovitému sdělení informací. Oživení obrázky, schématy, tabulkami, Nevhodné pro dlouhé texty. Doprovodná pomůcka při výkladu

Použití prezentací. K heslovitému sdělení informací. Oživení obrázky, schématy, tabulkami, Nevhodné pro dlouhé texty. Doprovodná pomůcka při výkladu PowerPoint 2007 Osnova Koncept a použití prezentací Seznámení s pracovním prostředím MS Word 2007 Režimy zobrazení Užitečná nastavení Základní práce s dokumenty Práce s textem a objekty Šablony a jejich

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

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

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

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

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

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

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