absolutní (úplná) začíná lomítkem nebo 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 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" " 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> </div> <div id="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> <div id="obsah">  <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> <div id="pata"> 2009 </div> </div> </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=" 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 href="mailto:reslova@spse.cz">napište 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=" 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á