absolutní (úplná) začíná lomítkem nebo https:// pouze v odkazech na jiný web. relativní popisuje cestu od html stránky k cílovému souboru.

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

Download "absolutní (úplná) začíná lomítkem http:// nebo https:// pouze v odkazech na jiný web. relativní popisuje cestu od html stránky k cílovému souboru."

Transkript

1 Základy www Jak vytvořit webové stránky Návody a příklady najdete na adrese webowebu.phorum.cz Podrobný popis a další možnosti najdete na stránkách owebu.org Potřebný software Html editor PSPad, který najdete na Css editor TopStyle Lite, budete-li chtít měnit vzhled webu, nebo vytvářet nový web. Najdete jej na Editor obrázků, např. IrfanView, budete-li na web dávat fotografie. Najdete jej na FTP program, např. FileZila, pro zkopírování souborů na internetový server. Najdete jej na Vytvoření struktury webu, uložení webových souborů na disk Struktura webu a názvy souborů Webová adresa, např. nebo kurzwww.ic.cz představuje na internetovém serveru hlavní složku webu. Do ní autor webu uloží úvodní stránku, která musí mít název index. Zadáme-li v internetovém prohlížeči webovou adresu, je v hlavní složce webu vyhledána html stránka s názvem index. Ostatní stránky, na které se dostaneme kliknutím na odkaz, mají různé názvy, obvykle podle jejich obsahu, např. plemena_psu, apod. Mohou být uloženy také v hlavní složce webu, nebo v jejích podložkách. Vytvoření složek se říká vytvoření struktury webu. Přípona souboru může být html nebo jen htm. Aby nedošlo k chybám při vytváření odkazů, používejte stále stejný druh přípony. Názvy souborů pište bez diakritiky a bez mezer, tedy např. kocky.html, nikoli kočky.html. Internetové servery nejsou schopny pracovat s českými názvy souborů. Malá a velká písmena jsou na serverech odlišována, bude-li tedy v odkazu uvedeno kocky.html, bude nalezen pouze soubor s názvem kocky.html, nikoliv Kocky.html či kocky.html. Má-li být na stránce zobrazen obrázek domecek.jpg, nebude zobrazen, bude-li se soubor jmenovat Domecek.jpg či domecek.jpg. Ve Windows malá a velká písmena v názvech souborů rozlišována nejsou, při vytváření stránek a zobrazení stránek z disku vašeho počítače na tento problém nepřijdete, vše bude vypadat v pořádku, k chybám dojde až po zkopírování stránek a ostatních souborů na server. Pište tedy názvy souborů a jejich přípon malými písmeny. Soubory webu Web je tvořen různými soubory: html či htm soubory vlastní html stránky obsahující text s odkazy na další html stránky a také odkazy na vložené obrázky či soubory ke stažení. css soubory obsahující definici stylů pro nadpisy, odstavce, odkazy apod. Pomocí stylů se určuje písmo, velikost, barva, apod. jpg, png, gif vložené obrázky pdf, doc, xls, zip, apod. soubory ke stažení, některé typy jsou po kliknutí na odkaz otevřeny přímo v internetovém prohlížeči (chceme-li je otevřít v jejich aplikaci, např. xls v Excelu, klikneme na odkaz pravým tlačítkem myši a uložíme soubor). Cesta k souborům může být: absolutní (úplná) začíná lomítkem nebo https:// pouze v odkazech na jiný web. relativní popisuje cestu od html stránky k cílovému souboru. Jak vytvořit www stránky 1/21 RNDr. Jana Reslová

2 Jazyk html Webové stránky mohou být psány v jazyce HTML nebo XHTML: jazyk HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN"> jazyk XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> V čem se liší jazyky HTML a XHTML Html tagy značky, které označují co je nadpis, co je normální odstavec, určují odkazy, zajišťují vložení obrázku apod., jsou buď párové, nebo nepárové. Párové tagy jsou ty, které musí určovat začátek a konec té části textu, která má představovat např. nadpis, či fungovat na kliknutí jako odkaz, nebo určují začátek a konec každého odstavce. <h1>domácí mazlíčci</h1> <a href="kontakty.html">chovatelské stanice </a> <p>vše, co se týká chovu, stravy a zdraví. Seznam chovatelských stanic psů, koček a ostatních domácích zvířátek. </p> Párové tagy se zapisují v html i v xhtml stejně. Nepárové tagy jsou ty, které určují jeden objekt, např. obrázek. V XHTML mají nepárové tagy před ukončovací závorkou mezeru a lomítko: <img src="foto/budova.jpg" width="200" height="130" alt="chovatelská stanice" /> V HTML nepárové tagy toto lomítko nemají: <img src="foto/budova.jpg" width="200" height="130" alt="chovatelská stanice"> Struktura html stránky připojení stylů css titulek kódování češtiny <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <title>domácí mazlíčci</title> <link rel="stylesheet" href="css/styly.css" type="text/css"> </head> nadpis odstavec <body> <h1>domácí mazlíčci</h1> <p>máme rádi zvířata, protože jsou chlupatá...</p> <p>některé lidské vlastnosti jsou často přirovnávány ke zvířecím. Když o někom prohlásíme: <i>mají se rádi jako pes a kočka</i>, nemyslíme tím, že spolu mají zrovna harmonický vztah, přesto pes s kočkou mohou být kamarádi. kurzíva </p> <img src="foto/kocky_a_pejsek.jpg" alt="kočky a pejsek" width="360" </body> </html> height="270"> obrázek další odstavec Jak vytvořit www stránky 2/21 RNDr. Jana Reslová

3 Hlavička a tělo stránky head hlavička stránky obsahuje informace o kódování, titulek okna, připojení souborů css se styly Kódování musí být uvedeno v html kódu, např.: <meta http-equiv="content-type" content="text/html; charset=windows-1250"> nebo <meta http-equiv="content-type" content="text/html; charset=utf-8"> Podle kódování zvolíme HTML editor: Středoevropské jazyky Windows (windows-1250) můžeme použít libovolný editor, např.: 1stPage, PSPad, apod. Kódování Unicode (UTF-8) musíme použít editor, který umí pracovat v tomto kódování, např. PSPad. Titulek okna se zobrazuje v titulkovém pruhu okna internetového prohlížeče: <title> Domácí mazlíčci </title> V hlavičce musí být uvedena cesta k souboru se styly. např.: <link rel="stylesheet" href="css/styly.css" type="text/css"> body tělo stránky obsahuje vlastní text stránky, uzavřený mezi jednotlivé html tagy, např.: <h1>domácí mazlíčci</h1> <p>máme rádi zvířata, protože jsou chlupatá...</p> <p>některé lidské vlastnosti jsou často přirovnávány ke zvířecím. Když o někom prohlásíme: <i> Mají se rádi jako pes a kočka </i>, nemyslíme tím, že spolu mají zrovna harmonický vztah, přesto pes s kočkou mohou být kamarádi. </p> Začátek a konec tagu může být před a za textem, nebo nad a pod textem, podle toho, co je pro nás přehlednější. Celý odstavec může být v editoru na jednom řádku, dlouhý odstavec můžeme rozdělit na víc řádků, na výsledné zobrazení v internetovém prohlížeči to nebude mít žádný vliv, odstavec se bude automaticky zalamovat podle velikosti okna prohlížeče. Výsledek pak může vypadat takto: Nebo po úpravě stylů např. takto: Tagy se mohou vnořovat do jiných tagů, např. obrázek do odkazu, odkaz do odstavce. Při vnořování se párové tagy nesmí křížit, tzn., že začátek i konec vnořeného tagu musí být uvnitř vnějšího tagu. Odkaz uvnitř položky seznamu s odrážkami: Správně: <li><a href="kocky.html">kočky</a></li> Špatně: <li><a href="kocky.html">kočky</li></a> Jak vytvořit www stránky 3/21 RNDr. Jana Reslová

4 Layout rozvržení stránky bloky <div> </div> Stránka bývá složena z několika částí - obdélníkových bloků, které jsou vytvořeny párovým tagem div. Jednotlivé bloky bývají po skupinách uzavřeny v tzv. obalovací bloky. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <title>domácí mazlíčci</title> <link rel="stylesheet" href="css/styly.css" type="text/css"> </head> <body> <div id="stranka"> <div id="logo"> <table id="topmenu"> <tr> <td><a href="index.html">home</a></td> <td><a href="rady.html">rady</a></td> <td><a href="foto.html">foto</a></td> <td><a href="kontakty.html">kontakty</a></td> </tr> </table><!-- konec tabulky topmenu --> </div><!-- konec loga --> <div id="menu"> <!-- upravte menu --> <h1>home</h1> <ul> <li><a href="psi.html">psi</a></li> <li><a href="kocky.html">kočky</a></li> <li><a href="ostatni.html">ostatní</a></li> </ul> </div><!-- konec levého menu --> <div id="obsah"> <!-- zde zapište vlastní obsah stránky --> <h1>domácí mazlíčci</h1> <p>máme rádi zvířata, protože jsou chlupatá...</p> <p>některé lidské vlastnosti jsou často přirovnávány ke zvířecím. Když o někom prohlásíme: <i>mají se rádi jako pes a kočka</i>, nemyslíme tím, že spolu mají zrovna harmonický vztah, přesto pes s kočkou mohou být kamarádi. </p> <p class="stred"><img src="foto/kocky_a_pejsek.jpg" alt="kočky a pejsek" width="360" height="270"></p> </div><!-- konec obsahu --> <div id="pata"> 2009 </div><!-- konec paty --> </div><!-- konec stranky --> </body> </html> Jak vytvořit www stránky 4/21 RNDr. Jana Reslová

5 div stranka div logo div topmenu div menu div obsah div pata Jak vytvořit www stránky 5/21 RNDr. Jana Reslová

6 Html editor PSPad Vytvoření html stránky na základě šablony Šablony můžeme najít na internetu, např. na Otevřeme stránku šablony: menu Soubor Otevřít Uložíme pod jiným názvem: Soubor Uložit jako (název souboru bez diakritiky, malými písmeny) Vytvoření html stránky na základě jiné stránky Otevřeme stránku webu: menu Soubor Otevřít Uložíme pod jiným názvem: Soubor Uložit jako (název souboru bez diakritiky, malými písmeny, příponu html nebo htm podle původní stránky) Vytvoření nové html stránky Provedeme menu Soubor Nový, vybereme HTML dokument nebo XHTML dokument (viz rozdíly mezi html a xhtml jazykem) Soubor uložíme do vytvořené složky, kterou si připravíme na disku jako hlavní složku celého webu, nebo přímo na disk C:, budeme-li psát úplné, absolutní cesty k souborům. Zápis html tagů v PSPadu Pro zapsání html tagu můžeme v PSPadu vyžít nabídku seznamu tagů, která se objeví, stiskneme-li klávesy Ctrl a mezerník. Umístíme tedy kurzor tam, kam chceme vložit nový tag, nebo označíme tu část textu, kterou chceme uzavřít do tagu, stiskneme Ctrl+mezerník a napíšeme začátek názvu tagu (bez <), např. st, v seznamu tagů se zobrazí tagy začínající písmeny st (pokud ne, posuneme posuvníkem seznamu tagů ručně), vybereme strong a stiskneme klávesu Enter nebo na tag strong v seznamu 2x klikneme myší. Jak vytvořit www stránky 6/21 RNDr. Jana Reslová

7 Přehled html tagů h1... hlavní nadpis h2... podnadpisy h3... podnadpisy 3. úrovně p... odstavec strong... tučné písmo b... tučné písmo em... kurzíva i... kurzíva u... podtržené písmo ol... číslovaný seznam li... položka seznamu ul... seznam s odrážkami li... položka seznamu a... odkaz img... obrázky table... tabulka tr... řádek tabulky td... buňka tabulky th... buňka záhlaví tabulky br... zalomení řádku Vysvětlení základních tagů najdete na stránkách Podrobnější výklad najdete na Jak vytvořit www stránky 7/21 RNDr. Jana Reslová

8 Základní html tagy Nadpisy hlavní nadpisy <h1>nadpis první úrovně</h1> Nadpis první úrovně podnadpisy <h2>nadpis druhé úrovně</h2> Nadpis druhé úrovně podnadpisy podnadpisů <h3>nadpis třetí úrovně</h3> Nadpis třetí úrovně Někdy jsou na stránkách použity nadpisy nižších úrovní, např. h3, h5. Odstavce <p>text odstavce</p> Část textu odstavce může být zvýrazněna tučným písmem nebo kurzívou: tučné písmo <p>text odstavce<strong>tučný text</strong>text odstavce</p> nebo také <p>text odstavce<b>tučný text</b>text odstavce</p> kurzíva <p>text odstavce<em>kurzíva</em>text odstavce</p> nebo také <p>text odstavce<i>kurzíva</i>text odstavce</p> Odstavec se automaticky zalamuje podle velikosti okna. Chceme-li v určitém místě rozdělit odstavec na dva řádky, použijeme konec řádku br (vždy zvažte, zda není logičtější vytvořit dva samostatné odstavce). Zalomení řádku se může použít k vytvoření sloupcového menu odkazů. konec řádku <br> Nechceme-li, aby se na konci řádku oddělila předložka od slova (např. s kočkou) nebo den, měsíc a rok v datumu (např. 5. leden 2009) apod., použijeme pevnou mezeru místo obyčejné (V editoru PSPad ji napíšete stisknutím Ctrl+Shift+mezerník) pevná mezera <p>přednáška o tom, jak může žít pes s kočkou, se koná 5. ledna 2009.</p> Seznamy číslované seznamy <ol> <li>první položka seznamu</li> <li>druhá položka</li> <li>třetí položka</li> </ol> seznamy s odrážkami <ul> <li>první položka seznamu</li> <li>druhá položka</li> <li>třetí položka</li> </ul> 1. Psi 2. Kočky 3. Ostatní Psi Kočky Ostatní Lze vytvářet vnořené seznamy: <ul> <li>první položka seznamu</li> <li>druhá položka <ul> <li>první položka podseznamu</li> <li>druhá položka podseznamu</li> </ul> </li> <li>třetí položka hlavního seznamu</li> </ul> Psi Kočky Plemena Rady Chovatelské stanice Výstavy Ostatní Jak vytvořit www stránky 8/21 RNDr. Jana Reslová

9 Odkazy cílem odkazu může být další stránka téhož webu <a href="kocky.html">kočky</a> <a href="dokumenty/vystavy.html">výstavy</a> odkaz může vést na jinou internetovou adresu <a href="http://webowebu.ic.cz/">základy html</a> cílem odkazu může být také soubor ke stažení <a href="dokumenty/propozice.pdf" title="propozice soutěže">informace o soutěži</a> odkaz může vytvořit nový mail se zadanou adresou, pro funkčnost je však nutné, aby na počítači byl správně nastavený mailový program (z důvodu spamu nedoporučuji používat) Tabulky <a nám</a> začátek a konec tabulky <table> </table> začátek a konec řádku <tr> </tr> začátek a konec buňky <td> </td> <table> <tr> <td>1. buňka prvního řádku</td> <td>2. buňka prvního řádku</td> <td>3. buňka prvního řádku</td> </tr> <tr> <td>1. buňka druhého řádku</td> <td>2. buňka druhého řádku</td> <td>3. buňka druhého řádku</td> </tr> </table> Pro buňky záhlaví tabulky se používá th místo td: začátek a konec buňky záhlaví <th> </th> <tr> <th>1. buňka záhlaví</th> <th>2. buňka záhlaví</th> <th>3. buňka záhlaví</th> </tr> Datum Místo Propozice Pardubice všechna plemena propozice pořádá ZO Pardubice Praha národní výstava pouze CAC/CAP všechna plemena Rozdělení textu v buňce na dva řádky: konec řádku <br> <td> všechna plemena<br> <a href="dokumenty/propozice.pdf">propozice</a><br> pořádá <a href="http://schk-pardubice.pc.cz">zo Pardubice</a> </td> Sloučení buněk: sloučení buněk vedle sebe <th colspan="4">běh 100m</th> <th colspan="2">závodník</th> sloučení buněk pod sebou <td rowspan="2">2. 3.</td> Běh 100m Závodník Čas Umístění Václav Malý 10:53 1 Jarda Dlouhý 11:05 Karel Bystrý 11: Jak vytvořit www stránky 9/21 RNDr. Jana Reslová

10 Obrázky <img src="foto/kocky_a_pejsek.jpg" width="360" height="270" alt="kočky a pejsek"> Parametry obrázku: src cesta k souboru s obrázkem width šířka obrázku height výška obrázku alt popisek zobrazuje se při najetí myší na obrázek, nechceme-li popisek, uvedeme alt="" Obrázek je třeba zmenšit do takové velikosti, jakou potřebujeme pro web. Šířku a výšku pak zadáváme podle zmenšeného obrázku. Obrázek pak uložíme do příslušné složky na webu. Typy souborů: jpg fotografie gif mapy, grafy, apod png obdobně jako gif Jak vytvořit www stránky 10/21 RNDr. Jana Reslová

11 Formátování webových stránek pomocí css stylů Pro všechny stránky webu vytvoříme společný soubor css stylů. V hlavičce všech html stránek musí být uvedena cesta k souboru css: <link rel="stylesheet" href="css/styly.css" type="text/css"> Definice stylů V souboru css definujeme styly: a) pro jednotlivé tagy, např. h1, h2, p, apod. h1 { font-size: 22px; } b) některé tagy mohou mít přiřazeny speciální styl pomocí id, např. <div id="menu"> #menu { width: 150px; float: left; background-color: transparent; border: 1px solid #314971; padding: 10px 0px 5px 0px; } nebo pomocí class, např. <p class="vpravo">.vpravo { text-align: right; } stejnou vlastnost lze nastavit pro několik tagů najednou td, th { text-align: left; } vlastnosti lze nastavit pro určitou podskupinu tagů, např. pro h1 uvnitř menu #menu h1 { padding-left: 10px; } Různý zápis stylů Některé vlastnosti lze zapsat různým způsobem. a) stručný zápis img { border: 1px solid red; } b) rozepsané jednotlivé vlastnosti img { border-width: 1px; border-style: solid; border-color: red; } Některé vlastnosti mohou být různé pro horní, pravou, dolní a levou část. a) různé hodnoty pro jednotlivé části border-top-color: red; border-right-color: orange; border-bottom-color: red; border-left-color: orange; lze zapsat též stručně (pořadí hodnot je horní, pravý, dolní, levý) border-color: red orange red orange; b) stejné hodnoty pro jednotlivé části border-color: red; Jak vytvořit www stránky 11/21 RNDr. Jana Reslová

12 Dědičnost stylů Styly se dědí, např. nastavíme-li pro tělo stránky druh písma body { font-family: Arial; } pak toto písmo převezmou všechny tagy, nenastavíme-li pro ně jiné písmo. Nastavíme-li např. písmo pro menu #menu { font-family: Tahoma; } pak toto písmo převezmou tagy umístěné v menu. Dědičnost však probíhá do určité míry. Nastavíme-li např. velikost a barvu písma pro tělo stránky, zdědí tuto velikost odstavce i seznamy, nadpisy však budou velké a také text v tabulkách tuto velikost nepřevezme. Barvu zdědí nadpisy i odstavce, ale nezdědí ji odkazy. Pořadí stylů Na pořadí stylů nezáleží, pokud neurčujeme hodnotu téže vlastnosti pro stejný tag, class či id. V tom případě platí pozdější definice, která překryje dřívější hodnotu. Např., nastavíme-li modrou barvu pro nadpisy 1. až 3. úrovně h1, h2, h3 {color: blue;} a později zapíšeme h3 {color: red;} budou mít nadpisy h1 a h2 modrou barvu a h3 červenou. Editor css stylů TopStyle Lite Úprava použitých stylů Upravíme-li v souboru css styl některého tagu, projeví se změna ve všech stránkách webu. V tom spočívá hlavní význam stylů zajišťují jednotný vzhled všech stránek a rychlou úpravu. V programu TopStyle Lite otevřeme soubor css: File Open Klikneme na řádek s vlastností, kterou chceme upravit a v okně vpravo vybereme hodnotu z nabízených možností. Jak vytvořit www stránky 12/21 RNDr. Jana Reslová

13 Přidání nové vlastnosti Klikneme do té části stylů, kam chceme přidat novou vlastnost. V okně vpravo najdeme požadovanou vlastnost a vybereme z nabízených hodnot (používejte vlastnosti CSS Level 2 viz předchozí obrázek). Můžeme také použít způsob nám známý z PSPadu. Vytvoříme si volný řádek mezi vlastnostmi upravovaného tagu, stiskneme Ctrl+mezerník, zapíšeme začátek názvu vlastnosti a vybereme ji ze seznamu vlastností. Přidání nového stylu Klikneme na volný řádek v levém okně, stiskneme tlačítko. V okně New Selector označíme tag, který chceme formátovat, budeme-li chtít nastavit stejné vlastnosti pro víc tagů, např. písmo pro h1, h2, h3, klikneme po označení tagu na šipku vpravo. Chceme-li vytvořit nový styl pro class nebo id, přepneme přepínač a zapíšeme název do políčka pod přepínačem. Některé tagy mají tzv. pseudoelementy, např. a:hover představuje odkaz při najetí myší. Jak vytvořit www stránky 13/21 RNDr. Jana Reslová

14 Přehled vybraných vlastností css background-color... barva pozadí background-image... obrázek na pozadí background-position... umístění obrázku na pozadí background-repeat... opakování obrázku na pozadí border... rámeček border-width... tloušťka rámečku border-style... typ čáry rámečku border-color... barva rámečku border-collapse... pouze pro table rámečky buněk oddělené nebo sloučené color... barva písma font... písmo font-family... druh písma font-size... velikost písma font-style... kurzíva nebo bez kurzívy font-weight... tučné nebo netučné text-decoration... podtržené nebo bez podtržení list-style-type... tvar odrážek nebo typ číslování seznamu margin... vnější okraj padding... vnitřní okraj text-align... zarovnání textu vertical-align... vertikální zarovnání width... šířka height... výška Přehled základních css vlastností najdete na Další vlastnosti najdete na Jednotky velikosti: a) absolutní konstantní px... pixely obrazové body používá se nejvíce mm, cm, apod.... milimetry, centimetry používá se málo b) relativní em... šířka velkého písmene M ex... výška malého písmene x large... velké medium... střední small... malé c) procenta 80%... 80% normální velikosti Barvy Příklady: img { border-width: 1px; } h1 { font-size: 22px; } p { font-size: 1em; } td { font-size: 90%; } Některé barvy mohou být zadány názvem: body {background-color: white;} všechny barvy, tedy i ty, které mají název, mohou být zadány kódem: a {color: #2e4569;} Jak vytvořit www stránky 14/21 RNDr. Jana Reslová

15 Editor obrázků IrfanView Změna velikosti obrázku Pro internet je třeba uložit obrázky v přiměřené velikosti, např. 800x600px, kdy se velikost souboru pohybuje okolo 70kB. Otevřeme obrázek: menu Soubor Otevřít Zmenšíme jeho rozměry: Obrázek Změnit velikost/rozlišení Soubor uložíme: Soubor Uložit Všechny obrázky uložíme do podsložky hlavní složky webu. Jak vytvořit www stránky 15/21 RNDr. Jana Reslová

16 Vytvoření náhledových obrázků Ke každému obrázku vytvoříme jeho zmenšený náhled s rozměry 100 až 200px. Název souboru s náhledem zvolíme např. tak, že přidáme n_ před původní název obrázku. Máme-li obrázků málo, vytvoříme náhledy jednotlivě předchozím způsobem, tj. zmenšíme rozměry a pomocí menu Soubor Uložit jako uložíme s novým názvem souboru. Máme-li obrázků více, využijeme hromadného provedení úprav pomocí menu Soubor Dávková konverze/přejmenování: 1. Zvolíme konverzi s přejmenováním 3. Stiskneme tlačítko Možnosti a nastavíme vzor jména viz dále 2. Zaškrtneme Použít pokročilé možnosti a stiskneme tlačítko Pokročilé viz dále 4. Stiskneme tlačítko Přidat vše 5. Stiskneme tlačítko Použít současnou složku jako výchozí 6. Stiskneme tlačítko Spustit dávku Jak vytvořit www stránky 16/21 RNDr. Jana Reslová

17 ad 2. Nastavení pokročilých možností ad 3. Nastavení jména Jak vytvořit www stránky 17/21 RNDr. Jana Reslová

18 Umístění stránek na internet Pro začátek si zaregistrujeme webovou adresu na některém ze serverů, nabízejících umístění našich stránek zdarma, zpravidla pouze za cenu zobrazení reklamy. Přehled těchto serverů najdete na Z těchto serverů vyberte ty, které nabízejí doménu III. řádu, tzn. nikoliv zcela vlastní adresu (placená doména II. řádu), ale vlastní název, např. webowebu s určitou možností výběru zbytku adresy, např. phorum.cz, ic.cz, chytrak.cz apod. Budete-li chtít na web dávat větší množství obrázků, vybírejte servery nabízející větší prostor. Počítejte asi 100KB na jednu fotografii o rozměrech 800x600 až 1000x750px a její zmenšený náhled, tedy 10MB představuje prostor pro asi 100 fotografií. Reklama, kterou nám server na naše stránky automaticky přidá, může být malý reklamní proužek nebo také do očí bijící, nevkusný blok. Příklad registrace na Zapište jméno webu a vyberte v seznamu vhodnou doménu. Některé kombinace již mohou být obsazeny, zkuste jinou doménu nebo jiný název. Jak vytvořit www stránky 18/21 RNDr. Jana Reslová

19 Uložení stránek na server Vytvoření struktury složek na serveru a uložení html stránek a ostatních souborů na server, můžeme provést prostřednictvím webových stránek serveru prostřednictvím ftp programu, např. TotalCommanderu Uložení stránek na server prostřednictvím webových stránek serveru Přihlásíme se na adrese nebo přímo na user.ic.cz Po přihlášení klikněte na odkaz Pak musíte vyplnit přihlašovací údaje ještě jednou. Máte-li jinou doménu než ic.cz, je vaším uživatelským jménem název webu i s doménou. Je-li vaší doménou ic.cz, zapište uživatelské jméno bez domény. Všechny údaje vám server zašle po registraci na váš mail. Nyní pomocí tlačítka Nový adresář vytvoříme strukturu webu. Pomocí tlačítka Nahrát pak zkopírujeme do příslušné složky všechny potřebné soubory. Přejdeme do příslušné složky, stiskneme tlačítko Procházet, najdeme soubor, dalším tlačítkem Procházet můžeme přidat další soubor, pak stiskneme. Po zkopírování souborů na server stiskneme návrat do složky. pro Takto zkopírujeme všechny html soubory, css a obrázky. Změníme-li některou html stránku, musíme ji na server znovu nahrát, starý soubor bude přepsán novou verzí. Jak vytvořit www stránky 19/21 RNDr. Jana Reslová

20 Uložení stránek na server pomocí programu FileZilla Spustíme program FileZilla a stiskneme tlačítko. Provedeme nastavení připojení k serveru. Stiskneme tlačítko New connection a vyplníme údaje podle zaregistrované adresy. Pak stiskneme tlačítko Spojit. Označíme soubory a složky a pomocí pravého tlačítka myši nebo přetažením zkopírujeme na server: Jak vytvořit www stránky 20/21 RNDr. Jana Reslová

21 Uložení stránek na server pomocí programu TotalCommander Spustíme program TotalCommander, v jednom okně se přepneme do složky, v níž máme uložené html stránky a ostatní soubory, klikneme do druhého okna a stiskneme tlačítko. Provedeme nastavení připojení k serveru. Stiskneme tlačítko New connection a vyplníme údaje podle zaregistrované adresy: Po dokončení stiskneme tlačítko Connect. V okně se objeví náš server s automaticky vytvořeným souborem index.html V prvním okně označíme všechny potřebné složky a soubory a stiskneme tlačítko F5 Copy. Jak vytvořit www stránky 21/21 RNDr. Jana Reslová

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

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

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

O CSS podrobněji. Box model Document flow Layout

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

Více

(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

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

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

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

Více

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

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

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

KAPITOLA 4 ZPRACOVÁNÍ TEXTU

KAPITOLA 4 ZPRACOVÁNÍ TEXTU KAPITOLA 4 ZPRACOVÁNÍ TEXTU TABULÁTORY Jsou to značky (zarážky), ke kterým se zarovná text. Můžeme je nastavit kliknutím na pravítku nebo v dialogovém okně, které vyvoláme kliknutím na tlačítko Tabulátory

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

8. Formátování. Úprava vzhledu tabulky

8. Formátování. Úprava vzhledu tabulky 8. Formátování Úprava vzhledu tabulky Výšku řádku nastavíme tak, že kurzorem najedeme na rozhraní mezi políčky s čísly řádků. Kurzor se změní na křížek s dvojšipkou. Stiskneme levé tlačítko a tahem myší

Více

Gabriela Janská. Středočeský vzdělávací institut akademie J. A. Komenského www.sviajak.cz

Gabriela Janská. Středočeský vzdělávací institut akademie J. A. Komenského www.sviajak.cz PŘÍRUČKA KE KURZU: ZÁKLADY PRÁCE NA PC MS WORD 2003 Gabriela Janská Středočeský vzdělávací institut akademie J. A. Komenského www.sviajak.cz Obsah: 1. Písmo, velikost písma, tučně, kurzíva, podtrhnout

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

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

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

ZSF web a intranet manuál

ZSF web a intranet manuál ZSF web a intranet manuál Verze pro školení 11.7.2013. Návody - Jak udělat...? WYSIWYG editor TinyMCE Takto vypadá prostředí WYSIWYG editoru TinyMCE Jak formátovat strukturu stránky? Nadpis, podnadpis,

Více

6. Formátování: Formátování odstavce

6. Formátování: Formátování odstavce 6. Formátování: Formátování odstavce Obrázek 1: Formát / Odstavec Odstavec je text mezi dvěma znaky konce odstavce. Konec odstavce je skrytý znak a vkládáme jej během psaní při každém stisknutí klávesy

Více

SIPVZ Tvorba www stránek

SIPVZ Tvorba www stránek SIPVZ Tvorba www stránek RNDr. Jana Reslová SPŠE a VOŠ Pardubice V čem vytvářet HTML stránky... 2 Editor 1stPage... 4 Instalace...4 Prostředí editoru 1stPage...4 Úprava prostředí 1stPage...5 Základy HTML...

Více

1. Základní pojmy, používané v tomto manuálu. 2. Stránky

1. Základní pojmy, používané v tomto manuálu. 2. Stránky Redakční systém manuál 1. Základní pojmy, používané v tomto manuálu Hlavní menu Menu v horní světlemodré liště obsahující 7 základních položek: Publikovat, Správa, Vzhled, Komentáře, Nastavení, Pluginy,

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

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

Styly odstavců. Word 2010. Přiřazení stylu odstavce odstavci. Změna stylu odstavce

Styly odstavců. Word 2010. Přiřazení stylu odstavce odstavci. Změna stylu odstavce Styly odstavců V textu, který přesahuje několik stránek a je nějakým způsobem strukturovaný (což znamená, že se dá rozdělit na části (v knize jim říkáme kapitoly) a jejich podřízené části (podkapitoly),

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

PŘÍRUČKA PRO REDAKTORY UNIVERZITY PARDUBICE

PŘÍRUČKA PRO REDAKTORY UNIVERZITY PARDUBICE CMS Aladin CMS Aladin je modulární a otevřený publikační systém pro jednoduchou a uživatelsky přívětivou správu webových stránek. PŘÍRUČKA PRO REDAKTORY UNIVERZITY PARDUBICE VERZE 3.0 ZÁŘÍ 2012 Obsah CMS

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

Microsoft Office SharePoint Server 2007

Microsoft Office SharePoint Server 2007 Microsoft Office SharePoint Server 2007 Příručka pro uživatele Úvod do HTML a CSS Verze 1.1 Stav k 7.4. 2009 Středisko komunikačních a informačních systému Univerzita obrany Brno 2009 2008 Středisko komunikačních

Více

GOODWILL vyššší odborná škola, s. r. o. P. Holého 400, Frýdek-Místek

GOODWILL vyššší odborná škola, s. r. o. P. Holého 400, Frýdek-Místek GOODWILL vyššší odborná škola, s. r. o. P. Holého 400, Frýdek-Místek Projekt Využití ICT ve výuce na gymnáziích, registrační číslo projektu CZ.1.07/1.1.07/02.0030 MS Word Metodický materiál pro základní

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

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

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

Základní škola Hluk výukové texty MS Word 2007

Základní škola Hluk výukové texty MS Word 2007 MS Word je textový editor (program pro tvorbu a editaci textových dokumentů). Ve verzi 2007 došlo k zásadní změně v grafickém prostředí a tedy i ovládání programu. Základní ovládací prvky aplikace: RÁM

Více

Manuál: Editace textů v textovém editoru SINPRO Úprava tabulek a internetových odkazů, řádkování

Manuál: Editace textů v textovém editoru SINPRO Úprava tabulek a internetových odkazů, řádkování Manuál: Editace textů v textovém editoru SINPRO Úprava tabulek a internetových odkazů, řádkování (nejen pro editaci STI v systému SINPRO, aktualizováno: 25. 6. 2015) v 2.0 Obsah TABULKY Úprava tabulek...

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

Webový editor MARKET INOVATOR verze 1.0.0.0

Webový editor MARKET INOVATOR verze 1.0.0.0 Webový editor MARKET INOVATOR verze 1.0.0.0 Uživatelská příručka Úprava hotových webových prezentací 1.krok stáhnout web ze serveru Chceme-li provádět úpravy na webových stránkách, které jsou na internetovém

Více

Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS

Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS Výstupový indikátor 06.43.19 Motivační název: Autor: Vzdělávací oblast: Vzdělávací obory: Ročník: Časový rozsah: Pomůcky: Projekt Integrovaný vzdělávací systém města Jáchymov - Mosty Tvorba webu I Petr

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

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

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

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

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

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

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

Rozměry, okraje a rámečky

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

Více

EDITOR ADMINISTRACE WEBU PF UJEP

EDITOR ADMINISTRACE WEBU PF UJEP EDITOR ADMINISTRACE WEBU PF UJEP 2 Práce s editorem v redakčním systému stránek PF UJEP Obsah 1 Editor - obecně... 3 2 Ikony pro jednoduché formátování:... 4 3 Roletky pro přednastavené formátování...

Více

IE1 jazyk HTML a kaskádové styly

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

Více

M E T O D I K A W I K I

M E T O D I K A W I K I M E T O D I K A W I K I STŘEDNÍ ŠKOLY INFORMATIKY A SPOJŮ, BRNO, ČICHNOVA 23 NÁPOVĚDA OBSAH Webové stránky Střední školy informatiky a spojů, Brno, Čichnova 23... 3 Moje stránka... 6 Přihlášení... 6 Po

Více

Microsoft Office Word 2003

Microsoft Office Word 2003 Microsoft Office Word 2003 č. 6 název anotace očekávaný výstup druh učebního materiálu druh interaktivity Microsoft Office Word 2003 - Cesta k základním úpravám Prezentace je zaměřena na úpravy textu v

Více

Nápověda ke cvičení 8

Nápověda ke cvičení 8 Nápověda ke cvičení 8 Word přechod na další stránku: napíšeme text Motoristické časopisy vložíme 3x Enter pak klávesová zkratka CTRL+Enter Stejným způsobem přejdeme i na třetí stránku. PowerPoint vložit

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

Webové stránky. 4. Tvorba základní HTML webové stránky. Datum vytvoření: 25. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.

Webové stránky. 4. Tvorba základní HTML webové stránky. Datum vytvoření: 25. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr. Webové stránky 4. Tvorba základní HTML Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 25. 9. 2012 Webové Strana: 1/9 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická

Více

Úvod do problematiky ÚPRAVY TABULKY

Úvod do problematiky ÚPRAVY TABULKY Úvod do problematiky ÚPRAVY TABULKY Zaměříme se na úpravy, které určují finální grafickou úpravu tabulky (tzv. formátování.). Měnit můžeme celou řadu vlastností a ty nejdůležitější jsou popsány v dalším

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

Vytvoření tiskové sestavy kalibrace

Vytvoření tiskové sestavy kalibrace Tento návod popisuje jak v prostředí WinQbase vytvoříme novou tiskovou sestavu, kterou bude možno použít pro tisk kalibračních protokolů. 1. Vytvoření nového typu sestavy. V prvním kroku vytvoříme nový

Více

FFUK Uživatelský manuál pro administraci webu Obsah

FFUK Uživatelský manuál pro administraci webu Obsah FFUK Uživatelský manuál pro administraci webu Obsah FFUK Uživatelský manuál pro administraci webu... 1 1 Úvod... 2 2 Po přihlášení... 2 3 Základní nastavení webu... 2 4 Menu... 2 5 Bloky... 5 6 Správa

Více

Microsoft Word - Záhlaví a užití stylů

Microsoft Word - Záhlaví a užití stylů Microsoft Word - Záhlaví a užití stylů Záhlaví a zápatí Záhlaví a zápatí jsou oblasti umístěné na horním a dolním okraji každé stránky v dokumentu. Do záhlaví a zápatí můžete vložit text nebo grafiku (obrázek,

Více

Dokument a jeho části oddíly, záhlaví, zápatí

Dokument a jeho části oddíly, záhlaví, zápatí Dokument a jeho části oddíly, záhlaví, zápatí Nejčastějším úkolem bývá ukončení stránky a pokračování textu na další stránce nebo vložení stránky před napsaný text. Podobným úkolem je jiné svislé zarovnání

Více

Kapitola 11: Formuláře 151

Kapitola 11: Formuláře 151 Kapitola 11: Formuláře 151 Formulář DEM-11-01 11. Formuláře Formuláře jsou speciálním typem dokumentu Wordu, který umožňuje zadávat ve Wordu data, která lze snadno načíst například do databázového systému

Více

MS Word 2007 Šablony programu MS Word

MS Word 2007 Šablony programu MS Word MS Word 2007 Šablony programu MS Word Obsah kapitoly V této kapitole se seznámíme s: Možností využití šablon při vytváření nových dokumentů Vytvářením vlastních šablon Studijní cíle Po absolvování této

Více

Formátování diplomové práce (Office 2007,2010)

Formátování diplomové práce (Office 2007,2010) Formátování diplomové práce (Office 2007,2010) Formátování textu Formát textu je jeden z faktorů, který ovlivní celkový dojem a funkčnost dokumentu. Mnoho začátečníků se zpočátku nechává unést možnostmi

Více

Tabulkový procesor. Orientace textu. O úroveň níž O úroveň výš

Tabulkový procesor. Orientace textu. O úroveň níž O úroveň výš Formátování Formátováním rozumíme změnu vlastností daného objektu, dle našich představ a možností programu MS Excel. Formátovat můžeme texty v buňkách, můžeme formátovat buňky, listy i celý sešit a měnit

Více

TVORBA WEBOVÝCH STRÁNEK

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

Více

KAPITOLA 8 TABULKOVÝ PROCESOR

KAPITOLA 8 TABULKOVÝ PROCESOR KAPITOLA 8 TABULKOVÝ PROCESOR FORMÁT BUNĚK Parametry formátu buněk a tabulky můžeme nastavit pomocí celkem šesti karet v nabídce Domů/Buňky FORMÁT BUNĚK - OKNO FORMÁT BUNĚK Karta Číslo - nastavuje formát

Více

ZÁKLADY POŘIZOVÁNÍ TEXTU

ZÁKLADY POŘIZOVÁNÍ TEXTU Úvod do problematiky ZÁKLADY POŘIZOVÁNÍ TEXTU Na začátku psaní je vhodné nastavit vzhled stránky. Důležitá je především orientace stránky. Můžeme si vybrat mezi uspořádáním textu na výšku stránky (většinou

Více

Microsoft Word - Styly, obsah a další

Microsoft Word - Styly, obsah a další Microsoft Word - Styly, obsah a další Definice uživatelských stylů Nový - tzv. uživatelský styl - se vytváří pomocí panelu Styly a formátování stiskem tlačítka Nový styl. Po stisknutí tlačítka se objeví

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

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

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

Tvorba článků na knihožroutu: Slovo úvodem... 2 Přihlášení... 3 Tvorba tabulky... 5 Vložení obrázků... 8 Vložení hypertextového odkazu...

Tvorba článků na knihožroutu: Slovo úvodem... 2 Přihlášení... 3 Tvorba tabulky... 5 Vložení obrázků... 8 Vložení hypertextového odkazu... Tvorba článků na knihožroutu: Slovo úvodem... 2 Přihlášení... 3 Tvorba tabulky... 5 Vložení obrázků... 8 Vložení hypertextového odkazu... 9 Slovo úvodem Editaci článků provádějte v prohlížeči MOZILLA FIREFOX!

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

Tvorba webu. Kaskádové styly (CSS) Martin Urza

Tvorba webu. Kaskádové styly (CSS) Martin Urza Tvorba webu Kaskádové styly (CSS) Martin Urza Motivace Proč používat kaskádové styly k formátování HTML? Dovolují více možností formátování než klasické HTML atributy a stále přibývají další (možnosti).

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

Textový editor MS Word

Textový editor MS Word 5. hodina Textový editor MS Word 1. Ovládání programu MS Word Obrázek č. 1 Okno MS Word Zadávání příkazů a nabídky příkazů Použití panelů s ikonami (+ jejich přesouvání různé umístnění) Přesun kurzoru:

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

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

Práce se styly 1. Styl

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

Více

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

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

Jak vytva r et webove stra nky pomocı XHTML a CSS.

Jak vytva r et webove stra nky pomocı XHTML a CSS. Jak vytva r et webove stra nky pomocı XHTML a CSS. K vytváření webových stránek se používají různé editory. Z pohledu tvůrce je nejednodušší způsob jak napsat stránku použít např. editor MS-Word a soubor

Více

Návod na používání Digitálního povodňového plánu povodňové komise

Návod na používání Digitálního povodňového plánu povodňové komise Návod na používání Digitálního povodňového plánu povodňové komise Obsah: 1. Spuštění programu 2. Změny údajů v povodňových komisích 3. Další možnost editace změn u osob 4. Zápis nových členů povodňových

Více

HROMADNÉ ÚPRAVY NAJÍT A NAHRADIT

HROMADNÉ ÚPRAVY NAJÍT A NAHRADIT HROMADNÉ ÚPRAVY NAJÍT A NAHRADIT Funkce Najít a nahradit slouží k rychlému vyhledávání určitých slov a jejich nahrazování jinými slovy. Lze hledat i určité varianty slov a nahrazovat je buď hromadně (všechny

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

Práce s administračním systémem internetových stránek Podaných rukou

Práce s administračním systémem internetových stránek Podaných rukou Práce s administračním systémem internetových stránek Podaných rukou 2011 Ing. Jakub Matas Přihlášení a uživatelský účet Přihlášení Přihlášení do aplikace lze dvěma způsoby: 1. Pomocí panelu ve vrchní

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

Excel tabulkový procesor

Excel tabulkový procesor Pozice aktivní buňky Excel tabulkový procesor Označená aktivní buňka Řádek vzorců zobrazuje úplný a skutečný obsah buňky Typ buňky řetězec, číslo, vzorec, datum Oprava obsahu buňky F2 nebo v řádku vzorců,

Více

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

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

Více

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

Microsoft Office PowerPoint 2003

Microsoft Office PowerPoint 2003 Microsoft Office PowerPoint 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ů... 4 3 Základy programu PowerPoint...

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

Hromadná korespondence

Hromadná korespondence Kapitola dvanáctá Hromadná korespondence Učební text Mgr. Radek Hoszowski Hromadná korespondence Hromadná korespondence Představíme si jednoduchý nástroj, který nám může ušetřit velké množství práce. Je

Více

Microsoft Office. Word hromadná korespondence

Microsoft Office. Word hromadná korespondence Microsoft Office Word hromadná korespondence Karel Dvořák 2011 Hromadná korespondence Hromadná korespondence je způsob, jak určitý jeden dokument propojit s tabulkou obsahující více záznamů. Tímto propojením

Více

NÁVOD K POUŽITÍ VZORU TECHNIKY, RESP. KAZUISTIKY

NÁVOD K POUŽITÍ VZORU TECHNIKY, RESP. KAZUISTIKY NÁVOD K POUŽITÍ VZORU TECHNIKY, RESP. KAZUISTIKY Tento návod popisuje použití šablon pro tvorbu technik, resp. kazuistik do Příručky dobré praxe. Je psán pro Microsoft Word 2003 i Microsoft Word 2007.

Více

NÁVOD NA OBSLUHU INTERNETOVÉ PREZENTACE. Ataxo Czech s.r.o.

NÁVOD NA OBSLUHU INTERNETOVÉ PREZENTACE. Ataxo Czech s.r.o. NÁVOD NA OBSLUHU INTERNETOVÉ PREZENTACE Ataxo Czech s.r.o. ÚVOD Internetové stránky vytvořené společností Ataxo v rámci produktu Mini web můžete jednoduše a rychle upravovat prostřednictvím on-line administrace.

Více

METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.

METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI. Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky. METODICKÝ POKYN PRÁCE S MS PowerPoint - ZAČÁTEČNÍCI Základní rozložení plochy Výchozím stavem při práci je normální zobrazení. pás karet - základní nabídka příkazů Pořadí jednotlivých snímků Základní plocha

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